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

refactor(base): new theme for loading & slot-machine & wave

Browse Source
This commit is contained in:
07akioni 2021-01-08 18:45:16 +08:00
parent a8bdc6a709
commit a7fd064bc4
33 changed files with 277 additions and 371 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/_base/fade-in-expand-transition/src/FadeInExpandTransition.js
View File

@ -1,6 +1,6 @@
import { h, Transition, TransitionGroup } from 'vue'
import { h, Transition, TransitionGroup, defineComponent } from 'vue'
export default {
export default defineComponent({
name: 'FadeInExpandTransition',
props: {
appear: {
@ -96,4 +96,4 @@ export default {
}
)
}
}
})

6
src/_base/focus-detector/src/FocusDetector.vue
View File

@ -8,7 +8,9 @@
</template>
<script>
export default {
import { defineComponent } from 'vue'
export default defineComponent({
props: {
onFocus: {
type: Function,
@ -29,5 +31,5 @@ export default {
if (onBlur) onBlur(e)
}
}
}
})
</script>

6
src/_base/icon-switch-transition/src/IconSwitchTransition.js
View File

@ -1,6 +1,6 @@
import { h, nextTick, Transition } from 'vue'
import { h, nextTick, Transition, defineComponent } from 'vue'
export default {
export default defineComponent({
name: 'NBaseIconSwitchTransition',
data () {
return {
@ -22,4 +22,4 @@ export default {
this.$slots
)
}
}
})

18
src/_base/loading/src/Loading.vue
View File

@ -1,6 +1,5 @@
<template>
<div
:class="{ [`n-${theme}-theme`]: theme }"
class="n-base-loading"
:style="{
stroke
@ -32,16 +31,16 @@
</template>
<script>
import { defineComponent } from 'vue'
import { NIconSwitchTransition } from '../../../_base'
import { withCssr } from '../../../_mixins'
import styles from './styles/'
import { useStyle } from '../../../_mixins'
import style from './styles/index.cssr.js'
export default {
export default defineComponent({
name: 'BaseLoading',
components: {
NIconSwitchTransition
},
mixins: [withCssr(styles)],
props: {
scale: {
type: Number,
@ -51,10 +50,6 @@ export default {
type: Number,
default: 100
},
theme: {
type: String,
default: undefined
},
strokeWidth: {
type: Number,
default: 28
@ -67,6 +62,9 @@ export default {
type: Boolean,
default: true
}
},
setup () {
useStyle('BaseLoading', style)
}
}
})
</script>

65
src/_base/loading/src/styles/index.cssr.js Normal file
View File

@ -0,0 +1,65 @@
import { c, cB, cE } from '../../../../_utils/cssr'
import iconSwitchTransition from '../../../../_styles/transitions/icon-switch'
const dashOffset = 500
export default c([
cB('base-loading', `
position: relative;
line-height: 0;
width: 1em;
height: 1em;
`, [
cE('placeholder', {
position: 'absolute',
left: '50%',
top: '50%',
transform: 'translateX(-50%) translateY(-50%)'
}, [
iconSwitchTransition({
left: '50%',
top: '50%',
originalTransform: 'translateX(-50%) translateY(-50%)'
})
]),
cE('icon', [
iconSwitchTransition()
]),
cB('base-loading-circular', `
stroke: currentColor;
height: 100%;
width: 100%;
animation: n-base-loading-rotate 1.5s linear infinite;
transform-origin: center;
`, [
cB('base-loading-circular-path', `
transform-origin: center;
animation: n-base-loading-dash 1.5s ease-in-out infinite;
stroke-dasharray: ${dashOffset};
stroke-dashoffset: 0;
stroke-linecap: round;
`)
])
]),
c('@keyframes n-base-loading-rotate', `
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(270deg);
}
`),
c('@keyframes n-base-loading-dash', `
0% {
stroke-dashoffset: ${dashOffset};
}
50% {
stroke-dashoffset: ${dashOffset / 4};
transform: rotate(135deg);
}
100% {
stroke-dashoffset: ${dashOffset};
transform: rotate(450deg);
}
`)
])

9
src/_base/loading/src/styles/index.js
View File

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

69
src/_base/loading/src/styles/themed-base.cssr.js
View File

@ -1,69 +0,0 @@
import { cTB, c, cB, cE } from '../../../../_utils/cssr'
import iconSwitchTransition from '../../../../_styles/transitions/icon-switch'
const dashOffset = 500
export default c([
({ props }) => {
return [
cTB('base-loading', `
position: relative;
line-height: 0;
width: 1em;
height: 1em;
`, [
cE('placeholder', {
position: 'absolute',
left: '50%',
top: '50%',
transform: 'translateX(-50%) translateY(-50%)'
}, [
iconSwitchTransition({
left: '50%',
top: '50%',
originalTransform: 'translateX(-50%) translateY(-50%)'
})
]),
cE('icon', [
iconSwitchTransition()
]),
cB('base-loading-circular', `
stroke: currentColor;
height: 100%;
width: 100%;
animation: n-base-loading-rotate 1.5s linear infinite;
transform-origin: center;
`, [
cB('base-loading-circular-path', `
transform-origin: center;
animation: n-base-loading-dash 1.5s ease-in-out infinite;
stroke-dasharray: ${dashOffset};
stroke-dashoffset: 0;
stroke-linecap: round;
`)
])
]),
c('@keyframes n-base-loading-rotate', `
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(270deg);
}
`),
c('@keyframes n-base-loading-dash', `
0% {
stroke-dashoffset: ${dashOffset};
}
50% {
stroke-dashoffset: ${dashOffset / 4};
transform: rotate(135deg);
}
100% {
stroke-dashoffset: ${dashOffset};
transform: rotate(450deg);
}
`)
]
}
])

11
src/_base/loading/styles/dark.js
View File

@ -1,11 +0,0 @@
import create from '../../../_styles/utils/create-component-base'
export default create({
name: 'BaseLoading',
theme: 'dark',
getLocalVars (vars) {
return {
color: vars.primaryColor
}
}
})

2
src/_base/loading/styles/index.js
View File

@ -1,2 +0,0 @@
export { default as baseLoadingLight } from './light'
export { default as baseLoadingDark } from './dark'

11
src/_base/loading/styles/light.js
View File

@ -1,11 +0,0 @@
import create from '../../../_styles/utils/create-component-base'
export default create({
name: 'BaseLoading',
theme: 'light',
getLocalVars (vars) {
return {
color: vars.primaryColor
}
}
})

37
src/_base/slot-machine/src/SlotMachine.vue
View File

@ -1,5 +1,5 @@
<template>
<span v-if="valueIsNumber" class="n-base-slot-machine">
<span v-if="valueIsNumber" class="n-base-slot-machine" :style="cssVars">
<transition-group name="n-fade-up-width-expand-transition" tag="span">
<slot-machine-number
v-for="(number, i) in numbers"
@ -19,23 +19,21 @@
</template>
<script>
import { defineComponent, computed } from 'vue'
import { NFadeInExpandTransition } from '../../../_base'
import { useTheme } from '../../../_mixins'
import { baseSlotMachineLight } from '../styles'
import SlotMachineNumber from './SlotMachineNumber.vue'
import { withCssr } from '../../../_mixins'
import styles from './styles/index.js'
import style from './styles/index.cssr.js'
export default {
export default defineComponent({
name: 'BaseSlotMachine',
components: {
NFadeInExpandTransition,
SlotMachineNumber
},
mixins: [withCssr(styles)],
props: {
theme: {
type: String,
default: undefined
},
...useTheme.props,
value: {
type: [Number, String],
default: 0
@ -49,6 +47,25 @@ export default {
required: true
}
},
setup (props) {
const themeRef = useTheme(
'BaseSlotMachine',
'BaseSlotMachine',
style,
baseSlotMachineLight,
props
)
return {
cssVars: computed(() => {
const {
common: { cubicBezierEaseOut }
} = themeRef.value
return {
'--bezier-ease-out': cubicBezierEaseOut
}
})
}
},
data () {
return {
oldValue: null,
@ -84,5 +101,5 @@ export default {
this.oldValue = oldValue
}
}
}
})
</script>

142
src/_base/slot-machine/src/styles/base.cssr.js
View File

@ -1,142 +0,0 @@
import { c, cB, cE, cM } from '../../../../_utils/cssr'
import fadeInWidthExpandTransition from '../../../../_styles/transitions/fade-in-width-expand'
import fadeUpWidthExpandTransition from '../../../../_styles/transitions/fade-up-width-expand'
export default c([
({ props }) => [
c('@keyframes n-base-slot-machine-fade-up-in', {
raw: `
from {
transform: translateY(60%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
`
}),
c('@keyframes n-base-slot-machine-fade-down-in', {
raw: `
from {
transform: translateY(-60%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
`
}),
c('@keyframes n-base-slot-machine-fade-up-out', {
raw: `
from {
transform: translateY(0%);
opacity: 1;
}
to {
transform: translateY(-60%);
opacity: 0;
}
`
}),
c('@keyframes n-base-slot-machine-fade-down-out', {
raw: `
from {
transform: translateY(0%);
opacity: 1;
}
to {
transform: translateY(60%);
opacity: 0;
}
`
}),
cB('base-slot-machine', {
raw: `
overflow: hidden;
white-space: nowrap;
display: inline-block;
height: 18px;
line-height: 18px;
`
},
[
cB('base-slot-machine-number', {
raw: `
display: inline-block;
position: relative;
height: 18px;
width: .6em;
max-width: .6em;
`
}, [
fadeUpWidthExpandTransition({ duration: '.2s' }),
// use 0s, not 0
fadeInWidthExpandTransition({ duration: '.2s', delay: '0s' }),
cB('base-slot-machine-old-number', {
raw: `
display: inline-block;
opacity: 0;
position: absolute;
left: 0;
right: 0;
`
}, [
cM('top', {
transform: 'translateY(-100%)'
}),
cM('bottom', {
transform: 'translateY(100%)'
}),
cM('down-scroll', {
animation: `n-base-slot-machine-fade-down-out .2s ${props.$global.cubicBezierEaseOut}`,
animationIterationCount: 1
}),
cM('up-scroll', {
animation: `n-base-slot-machine-fade-up-out .2s ${props.$global.cubicBezierEaseOut}`,
animationIterationCount: 1
})
]),
cB('base-slot-machine-current-number', {
raw: `
display: inline-block;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
opacity: 1;
transform: translateY(0);
width: .6em;
`
}, [
cM('down-scroll', {
animation: `n-base-slot-machine-fade-down-in .2s ${props.$global.cubicBezierEaseOut}`,
animationIterationCount: 1
}),
cM('up-scroll', {
animation: `n-base-slot-machine-fade-up-in .2s ${props.$global.cubicBezierEaseOut}`,
animationIterationCount: 1
}),
cE('inner', {
raw: `
display: inline-block;
position: absolute;
right: 0;
top: 0;
width: .6em;
`
}, [
cM('not-number', {
raw: `
right: unset;
left: 0;
`
})
])
])
])
])
]
])

121
src/_base/slot-machine/src/styles/index.cssr.js Normal file
View File

@ -0,0 +1,121 @@
import { c, cB, cE, cM } from '../../../../_utils/cssr'
import fadeInWidthExpandTransition from '../../../../_styles/transitions/fade-in-width-expand'
import fadeUpWidthExpandTransition from '../../../../_styles/transitions/fade-up-width-expand'
// vars:
// --bezier-ease-out
export default c([
c('@keyframes n-base-slot-machine-fade-up-in', `
from {
transform: translateY(60%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
`),
c('@keyframes n-base-slot-machine-fade-down-in', `
from {
transform: translateY(-60%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
`),
c('@keyframes n-base-slot-machine-fade-up-out', `
from {
transform: translateY(0%);
opacity: 1;
}
to {
transform: translateY(-60%);
opacity: 0;
}
`),
c('@keyframes n-base-slot-machine-fade-down-out', `
from {
transform: translateY(0%);
opacity: 1;
}
to {
transform: translateY(60%);
opacity: 0;
}
`),
cB('base-slot-machine', `
overflow: hidden;
white-space: nowrap;
display: inline-block;
height: 18px;
line-height: 18px;
`, [
cB('base-slot-machine-number', `
display: inline-block;
position: relative;
height: 18px;
width: .6em;
max-width: .6em;
`, [
fadeUpWidthExpandTransition({ duration: '.2s' }),
// use 0s, not 0
fadeInWidthExpandTransition({ duration: '.2s', delay: '0s' }),
cB('base-slot-machine-old-number', `
display: inline-block;
opacity: 0;
position: absolute;
left: 0;
right: 0;
`, [
cM('top', {
transform: 'translateY(-100%)'
}),
cM('bottom', {
transform: 'translateY(100%)'
}),
cM('down-scroll', {
animation: 'n-base-slot-machine-fade-down-out .2s var(--bezier-ease-out)',
animationIterationCount: 1
}),
cM('up-scroll', {
animation: 'n-base-slot-machine-fade-up-out .2s var(--bezier-ease-out)',
animationIterationCount: 1
})
]),
cB('base-slot-machine-current-number', `
display: inline-block;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
opacity: 1;
transform: translateY(0);
width: .6em;
`, [
cM('down-scroll', {
animation: 'n-base-slot-machine-fade-down-in .2s var(--bezier-ease-out)',
animationIterationCount: 1
}),
cM('up-scroll', {
animation: 'n-base-slot-machine-fade-up-in .2s var(--bezier-ease-out)',
animationIterationCount: 1
}),
cE('inner', `
display: inline-block;
position: absolute;
right: 0;
top: 0;
width: .6em;
`, [
cM('not-number', `
right: unset;
left: 0;
`)
])
])
])
])
])

9
src/_base/slot-machine/src/styles/index.js
View File

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

12
src/_base/slot-machine/styles/dark.js
View File

@ -1,10 +1,6 @@
import create from '../../../_styles/utils/create-component-base'
import { commonDark } from '../../../_styles/new-common'
// no style, placeholder
export default create({
theme: 'dark',
export default {
name: 'BaseSlotMachine',
getLocalVars (vars) {
return {}
}
})
common: commonDark
}

4
src/_base/slot-machine/styles/index.js
View File

@ -1,2 +1,2 @@
export { default as baseSlotMachineLight } from './light'
export { default as baseSlotMachineDark } from './dark'
export { default as baseSelectionLight } from './light'
export { default as baseSelectionDark } from './dark'

12
src/_base/slot-machine/styles/light.js
View File

@ -1,10 +1,6 @@
import create from '../../../_styles/utils/create-component-base'
import { commonLight } from '../../../_styles/new-common'
// no style, placeholder
export default create({
theme: 'light',
export default {
name: 'BaseSlotMachine',
getLocalVars (vars) {
return {}
}
})
common: commonLight
}

17
src/_base/wave/src/Wave.vue
View File

@ -8,17 +8,14 @@
</template>
<script>
import { withCssr } from '../../../_mixins'
import styles from './styles/index.js'
import { defineComponent } from 'vue'
import { useStyle } from '../../../_mixins'
import style from './styles/index.cssr.js'
export default {
export default defineComponent({
name: 'BaseWave',
mixins: [withCssr(styles)],
props: {
theme: {
type: String,
default: undefined
}
setup () {
useStyle('BaseWave', style)
},
data () {
return {
@ -50,5 +47,5 @@ export default {
})
}
}
}
})
</script>

14
src/_base/wave/src/styles/base.cssr.js
View File

@ -1,14 +0,0 @@
import { cB, c } from '../../../../_utils/cssr/index.js'
export default c([
() => cB('base-wave', {
raw: `
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-radius: inherit;
`
})
])

10
src/_base/wave/src/styles/index.cssr.js Normal file
View File

@ -0,0 +1,10 @@
import { cB } from '../../../../_utils/cssr/index.js'
export default cB('base-wave', `
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-radius: inherit;
`)

9
src/_base/wave/src/styles/index.js
View File

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

9
src/_base/wave/styles/dark.js
View File

@ -1,9 +0,0 @@
import create from '../../../_styles/utils/create-component-base'
export default create({
name: 'BaseWave',
theme: 'dark',
getLocalVars () {
return {}
}
})

2
src/_base/wave/styles/index.js
View File

@ -1,2 +0,0 @@
export { default as baseWaveLight } from './light'
export { default as baseWaveDark } from './dark'

9
src/_base/wave/styles/light.js
View File

@ -1,9 +0,0 @@
import create from '../../../_styles/utils/create-component-base'
export default create({
name: 'BaseWave',
theme: 'light',
getLocalVars () {
return {}
}
})

1
src/_mixins/index.js
View File

@ -8,3 +8,4 @@ export { default as useFormItem } from './use-form-item'
export { default as useTheme } from './use-theme'
export { default as useConfig } from './use-config'
export { default as useLocale } from './use-locale'
export { default as useStyle } from './use-style'

9
src/_mixins/use-style.js Normal file
View File

@ -0,0 +1,9 @@
import { onBeforeMount } from 'vue'
export default function useStyle (mountId, style) {
onBeforeMount(() => {
style.mount({
id: mountId
})
})
}

6
src/badge/styles/dark.js
View File

@ -1,11 +1,11 @@
import { baseDark } from '../../_styles/base'
import { baseSlotMachineDark } from '../../_base/slot-machine/styles'
import { baseWaveDark } from '../../_base/wave/styles'
import { commonDark } from '../../_styles/new-common'
export default {
common: commonDark,
peers: [baseDark, baseWaveDark, baseSlotMachineDark],
peers: {
BaseSlotMachine: baseSlotMachineDark
},
self (vars) {
const {
errorColorSuppl,

6
src/badge/styles/light.js
View File

@ -1,11 +1,11 @@
import { baseLight } from '../../_styles/base'
import { baseSlotMachineLight } from '../../_base/slot-machine/styles'
import { baseWaveLight } from '../../_base/wave/styles'
import { commonLight } from '../../_styles/new-common'
export default {
common: commonLight,
peers: [baseLight, baseWaveLight, baseSlotMachineLight],
peers: {
BaseSlotMachine: baseSlotMachineLight
},
self (vars) {
const { errorColor, infoColor, successColor, warningColor } = vars
return {

2
src/cascader/styles/light.js
View File

@ -1,5 +1,4 @@
import { baseMenuMaskLight } from '../../_base/menu-mask/styles'
import { baseLoadingLight } from '../../_base/loading/styles'
import { baseSelectionLight } from '../../_base/selection/styles'
import { baseSelectMenuLight } from '../../_base/select-menu/styles'
import { scrollbarLight } from '../../scrollbar/styles'
@ -12,7 +11,6 @@ export default {
BaseMenuMask: baseMenuMaskLight,
BaseSelectMenu: baseSelectMenuLight,
BaseSelection: baseSelectionLight,
BaseLoading: baseLoadingLight,
Scrollbar: scrollbarLight,
Checkbox: checkboxLight
},

2
src/log/styles/light.js
View File

@ -1,4 +1,3 @@
import { baseLoadingLight } from '../../_base/loading/styles'
import { scrollbarLight } from '../../scrollbar/styles'
import { commonLight } from '../../_styles/new-common'
import { codeLight } from '../../code/styles'
@ -7,7 +6,6 @@ export default {
name: 'Log',
common: commonLight,
peers: {
BaseLoading: baseLoadingLight,
Scrollbar: scrollbarLight,
Code: codeLight
},

4
src/spin/styles/light.js
View File

@ -1,12 +1,8 @@
import { baseLoadingLight } from '../../_base/loading/styles'
import { commonLight } from '../../_styles/new-common'
export default {
name: 'Spin',
common: commonLight,
peers: {
BaseLoading: baseLoadingLight
},
self (vars) {
const {
opacityDisabled,

4
src/styles.js
View File

@ -3,7 +3,7 @@ export {
baseClearButtonDark,
baseClearButtonLight
} from './_base/clear-button/styles'
export { baseLoadingDark, baseLoadingLight } from './_base/loading/styles'
// export { baseLoadingDark, baseLoadingLight } from './_base/loading/styles'
export { baseMenuMaskDark, baseMenuMaskLight } from './_base/menu-mask/styles'
export { baseSelectionDark, baseSelectionLight } from './_base/selection/styles'
export {
@ -14,7 +14,7 @@ export {
baseSlotMachineDark,
baseSlotMachineLight
} from './_base/slot-machine/styles'
export { baseWaveDark, baseWaveLight } from './_base/wave/styles'
// export { baseWaveDark, baseWaveLight } from './_base/wave/styles'
// exposed style
export { baseDark, baseLight } from './_styles/base'
// export { affixDark, affixLight } from './affix/styles'

4
src/tree/styles/light.js
View File

@ -1,7 +1,6 @@
import { changeColor } from 'seemly'
import { iconLight } from '../../icon/styles'
import { checkboxLight } from '../../checkbox/styles'
import { baseLoadingLight } from '../../_base/loading/styles'
import { commonLight } from '../../_styles/new-common'
export default {
@ -9,8 +8,7 @@ export default {
common: commonLight,
peers: {
Icon: iconLight,
Checkbox: checkboxLight,
BaseLoading: baseLoadingLight
Checkbox: checkboxLight
},
self (vars) {
const {