mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-01-24 12:45:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(scrollbar): new theme

Browse Source
This commit is contained in:
07akioni 2021-01-07 15:41:03 +08:00
parent cdc591170a
commit 8493f0620d
22 changed files with 144 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/menu/src/Menu.js
View File

@ -23,6 +23,7 @@ export default defineComponent({
}
},
props: {
...useTheme.props,
items: {
type: Array,
required: true

1
src/modal/src/Modal.js
View File

@ -19,6 +19,7 @@ export default {
},
inheritAttrs: false,
props: {
...useTheme.props,
show: {
type: Boolean,
default: false

1
src/pagination/src/Pagination.vue
View File

@ -235,6 +235,7 @@ export default {
FastBackwardIcon
},
props: {
...useTheme.props,
page: {
type: Number,
required: true

2
src/popconfirm/src/Popconfirm.js
View File

@ -1,7 +1,7 @@
import { h, ref, defineComponent } from 'vue'
import { NPopover } from '../../popover'
import PopconfirmPanel from './PopconfirmPanel.vue'
import { omit, keep } from '../../_utils'
import PopconfirmPanel from './PopconfirmPanel.vue'
const panelProps = [
'positiveText',

1
src/popconfirm/src/PopconfirmPanel.vue
View File

@ -44,6 +44,7 @@ export default defineComponent({
WarningIcon
},
props: {
...useTheme.props,
positiveText: {
type: String,
default: undefined

2
src/popover/src/Popover.js
View File

@ -2,6 +2,7 @@ import { h, ref, computed, watch, createTextVNode, defineComponent } from 'vue'
import { VBinder, VTarget } from 'vueuc'
import { useMergedState, useCompitable, useIsMounted, useMemo } from 'vooks'
import { call, keep, warn } from '../../_utils'
import { useTheme } from '../../_mixins'
import NPopoverBody from './PopoverBody'
const bodyPropKeys = Object.keys(NPopoverBody.props)
@ -46,6 +47,7 @@ export default defineComponent({
},
inheritAttrs: false,
props: {
...useTheme.props,
show: {
type: Boolean,
default: undefined

1
src/popover/src/PopoverBody.js
View File

@ -24,6 +24,7 @@ export default defineComponent({
},
inheritAttrs: false,
props: {
...useTheme.props,
show: {
type: Boolean,
default: undefined

2
src/popselect/src/Popselect.js
View File

@ -2,6 +2,7 @@ import { h, ref, provide, getCurrentInstance, defineComponent } from 'vue'
import { NPopover } from '../../popover'
import NPopselectPanel from './PopselectPanel.vue'
import { omit, keep } from '../../_utils'
import { useTheme } from '../../_mixins'
const NPopselectPanelPropsKey = Object.keys(NPopselectPanel.props)
@ -9,6 +10,7 @@ export default defineComponent({
name: 'Popselect',
props: {
...NPopover.props,
...useTheme.props,
// eslint-disable-next-line vue/require-prop-types
trigger: {
...NPopover.props.trigger,

1
src/popselect/src/PopselectPanel.vue
View File

@ -28,6 +28,7 @@ export default defineComponent({
},
inject: ['NPopselect'],
props: {
...useTheme.props,
multiple: {
type: Boolean,
default: false

1
src/progress/src/Progress.vue
View File

@ -250,6 +250,7 @@ export default defineComponent({
ErrorCircleIcon
},
props: {
...useTheme.props,
processing: {
type: Boolean,
default: false

5
src/radio/src/Radio.vue
View File

@ -45,7 +45,10 @@ import { createKey } from '../../_utils'
export default defineComponent({
name: 'Radio',
props: useRadio.props,
props: {
...useTheme.props,
...useRadio.props
},
setup (props) {
const themeRef = useTheme('Radio', 'Radio', style, radioLight, props)
const radio = useRadio(props)

1
src/radio/src/RadioGroup.js
View File

@ -81,6 +81,7 @@ export default defineComponent({
}
},
props: {
...useTheme.props,
name: {
type: String,
default: undefined

1
src/rate/src/Rate.vue
View File

@ -35,6 +35,7 @@ export default defineComponent({
StarIcon
},
props: {
...useTheme.props,
count: {
type: Number,
default: 5

1
src/result/src/Result.vue
View File

@ -79,6 +79,7 @@ export default defineComponent({
image500
},
props: {
...useTheme.props,
size: {
validator (value) {
return ['small', 'medium', 'large', 'huge'].includes(value)

39
src/scrollbar/src/ScrollBar.vue
View File

@ -4,9 +4,7 @@
<div
v-bind="$attrs"
class="n-scrollbar"
:class="{
[`n-${mergedTheme}-theme`]: mergedTheme
}"
:style="cssVars"
@mouseenter="handleMouseEnterWrapper"
@mouseleave="handleMouseLeaveWrapper"
>
@ -88,20 +86,21 @@
</template>
<script>
import { ref } from 'vue'
import { ref, defineComponent, computed } from 'vue'
import { on, off } from 'evtd'
import { VResizeObserver } from 'vueuc'
import { configurable, themeable, withCssr } from '../../_mixins'
import styles from './styles/index.js'
import { useIsIos } from 'vooks'
import { useTheme } from '../../_mixins'
import { scrollbarLight } from '../styles'
import style from './styles/index.cssr.js'
export default {
export default defineComponent({
name: 'Scrollbar',
components: {
VResizeObserver
},
mixins: [configurable, themeable, withCssr(styles)],
props: {
...useTheme.props,
size: {
type: Number,
default: 5
@ -151,12 +150,30 @@ export default {
default: undefined
}
},
setup () {
setup (props) {
const themeRef = useTheme(
'Scrollbar',
'Scrollbar',
style,
scrollbarLight,
props
)
return {
containerRef: ref(null),
contentRef: ref(null),
yRailRef: ref(null),
xRailRef: ref(null)
xRailRef: ref(null),
cssVars: computed(() => {
const {
common: { cubicBezierEaseInOut },
self: { color, colorHover }
} = themeRef.value
return {
'--bezier': cubicBezierEaseInOut,
'--color': color,
'--color-hover': colorHover
}
})
}
},
data () {
@ -516,5 +533,5 @@ export default {
}
}
}
}
})
</script>

83
src/scrollbar/src/styles/index.cssr.js Normal file
View File

@ -0,0 +1,83 @@
import { cB, c, cM, cE } from '../../../_utils/cssr'
import fadeInTransition from '../../../_styles/transitions/fade-in'
// vars:
// --bezier
// --color
// --color-hover
export default cB('scrollbar', `
overflow: hidden;
position: relative;
z-index: auto;
height: 100%;
`, [
c('>', [
cB('scrollbar-container', `
width: 100%;
overflow: scroll;
height: 100%;
max-height: inherit;
scrollbar-width: none;
`, [
c('&::-webkit-scrollbar', `
width: 0;
height: 0;
`),
c('>', [
cB('scrollbar-content', `
overflow: hidden;
min-width: 100%;
`)
])
]),
cB('scrollbar-rail', `
position: absolute;
pointer-events: none;
user-select: none;
`, [
cM('horizontal', `
left: 2px;
right: 2px;
bottom: 4px;
`, [
c('>', [
cE('scrollbar', {
right: 0
})
])
]),
cM('vertical', `
right: 4px;
top: 2px;
bottom: 2px;
`, [
c('>', [
cE('scrollbar', {
bottom: 0
})
])
]),
cM('disabled', [
c('>', [
cE('scrollbar', {
pointerEvents: 'none'
})
])
]),
c('>', [
cE('scrollbar', `
position: absolute;
cursor: pointer;
pointer-events: all;
background-color: var(--color);
transition: background-color .2s var(--bezier);
`, [
fadeInTransition(),
c('&:hover', {
backgroundColor: 'var(--color-hover)'
})
])
])
])
])
])

9
src/scrollbar/src/styles/index.js
View File

@ -1,9 +0,0 @@
import baseStyle from './themed-base.cssr.js'
export default [
{
key: 'mergedTheme',
watch: ['mergedTheme'],
CNode: baseStyle
}
]

106
src/scrollbar/src/styles/themed-base.cssr.js
View File

@ -1,106 +0,0 @@
import { cTB, c, cB, cM, cE } from '../../../_utils/cssr'
import fadeInTransition from '../../../_styles/transitions/fade-in'
export default c([
({ props }) => {
const {
color,
colorHover
} = props.$local
const {
cubicBezierEaseInOut
} = props.$global
return cTB('scrollbar', {
raw: `
overflow: hidden;
position: relative;
z-index: auto;
height: 100%;
`
}, [
c('>', [
cB('scrollbar-container', {
raw: `
width: 100%;
overflow: scroll;
height: 100%;
max-height: inherit;
scrollbar-width: none;
`
}, [
c('&::-webkit-scrollbar', {
raw: `
width: 0;
height: 0;
`
}),
c('>', [
cB('scrollbar-content', {
raw: `
overflow: hidden;
min-width: 100%;
`
})
])
]),
cB('scrollbar-rail', {
raw: `
position: absolute;
pointer-events: none;
user-select: none;
`
}, [
cM('horizontal', {
raw: `
left: 2px;
right: 2px;
bottom: 4px;
`
}, [
c('>', [
cE('scrollbar', {
right: 0
})
])
]),
cM('vertical', {
raw: `
right: 4px;
top: 2px;
bottom: 2px;
`
}, [
c('>', [
cE('scrollbar', {
bottom: 0
})
])
]),
cM('disabled', [
c('>', [
cE('scrollbar', {
pointerEvents: 'none'
})
])
]),
c('>', [
cE('scrollbar', {
raw: `
position: absolute;
cursor: pointer;
pointer-events: all;
background-color: ${color};
transition: background-color .2s ${cubicBezierEaseInOut};
`
}, [
fadeInTransition(),
c('&:hover', {
backgroundColor: colorHover
})
])
])
])
])
])
}
])

12
src/scrollbar/styles/dark.js
View File

@ -1,15 +1,13 @@
import create from '../../_styles/utils/create-component-base'
import { baseDark } from '../../_styles/base'
import { commonDark } from '../../_styles/new-common'
export default create({
export default {
name: 'Scrollbar',
theme: 'dark',
peer: [baseDark],
getLocalVars (vars) {
common: commonDark,
self (vars) {
const { scrollbarColorOverlay, scrollbarColorHoverOverlay } = vars
return {
color: scrollbarColorOverlay,
colorHover: scrollbarColorHoverOverlay
}
}
})
}

12
src/scrollbar/styles/light.js
View File

@ -1,15 +1,13 @@
import create from '../../_styles/utils/create-component-base'
import { baseLight } from '../../_styles/base'
import { commonLight } from '../../_styles/new-common'
export default create({
export default {
name: 'Scrollbar',
theme: 'light',
peer: [baseLight],
getLocalVars (vars) {
common: commonLight,
self (vars) {
const { scrollbarColorOverlay, scrollbarColorHoverOverlay } = vars
return {
color: scrollbarColorOverlay,
colorHover: scrollbarColorHoverOverlay
}
}
})
}

2
src/styles.js
View File

@ -64,7 +64,7 @@ export { baseDark, baseLight } from './_styles/base'
// export { radioDark, radioLight } from './radio/styles'
// export { rateDark, rateLight } from './rate/styles'
// export { resultDark, resultLight } from './result/styles'
export { scrollbarDark, scrollbarLight } from './scrollbar/styles'
// export { scrollbarDark, scrollbarLight } from './scrollbar/styles'
export { selectDark, selectLight } from './select/styles'
export { sliderDark, sliderLight } from './slider/styles'
export { spaceDark, spaceLight } from './space/styles'

4
src/styles.new.js
View File

@ -46,6 +46,7 @@ import { progressDark } from './progress/styles'
import { radioDark } from './radio/styles'
import { rateDark } from './rate/styles'
import { resultDark } from './result/styles'
import { scrollbarDark } from './scrollbar/styles'
export const darkTheme = {
common: commonDark,
@ -95,5 +96,6 @@ export const darkTheme = {
Progress: progressDark,
Radio: radioDark,
Rate: rateDark,
Result: resultDark
Result: resultDark,
Scrollbar: scrollbarDark
}