refactor(gradient-text): new theme

This commit is contained in:
07akioni 2021-01-03 18:36:05 +08:00
parent fbf6fa4813
commit 9a61fe2d73
8 changed files with 108 additions and 135 deletions

View File

@ -2,13 +2,12 @@
<span <span
class="n-gradient-text" class="n-gradient-text"
:class="{ :class="{
[`n-gradient-text--${computedType}-type`]: true, [`n-gradient-text--${compatibleType}-type`]: true
[`n-${mergedTheme}-theme`]: mergedTheme
}" }"
:style="{ :style="{
...mergedStyle,
fontSize: styleFontSize, fontSize: styleFontSize,
backgroundImage: styleBackgroundImage backgroundImage: styleBgImage,
...cssVars
}" }"
> >
<slot /> <slot />
@ -16,15 +15,16 @@
</template> </template>
<script> <script>
import { configurable, themeable, withCssr } from '../../_mixins' import { defineComponent, computed, onBeforeMount } from 'vue'
import { formatLength } from '../../_utils' import { useTheme } from '../../_mixins'
import styles from './styles/index' import { createKey, formatLength } from '../../_utils'
import { gradientTextLight } from '../styles'
import style from './styles/index.cssr.js'
let houdiniRegistered = false let houdiniRegistered = false
export default { export default defineComponent({
name: 'GradientText', name: 'GradientText',
mixins: [configurable, themeable, withCssr(styles)],
props: { props: {
size: { size: {
type: [String, Number], type: [String, Number],
@ -47,30 +47,8 @@ export default {
default: undefined default: undefined
} }
}, },
computed: { setup (props) {
computedType () { onBeforeMount(() => {
if (this.type === 'danger') return 'error'
return this.type
},
styleFontSize () {
let fontSize = this.size || this.fontSize
if (fontSize) fontSize = formatLength(fontSize)
return fontSize || undefined
},
styleBackgroundImage () {
const gradient = this.color || this.gradient
if (typeof gradient === 'string') {
return gradient
} else if (gradient) {
const deg = gradient.deg || 0
const from = gradient.from
const to = gradient.to
return `linear-gradient(${deg}deg, ${from} 0%, ${to} 100%)`
}
return undefined
}
},
beforeMount () {
if (!houdiniRegistered) { if (!houdiniRegistered) {
houdiniRegistered = true houdiniRegistered = true
if (window?.CSS?.registerProperty) { if (window?.CSS?.registerProperty) {
@ -88,6 +66,60 @@ export default {
}) })
} }
} }
})
const compatibleTypeRef = computed(() => {
const { type } = props
if (type === 'danger') return 'error'
return type
})
const styleFontSizeRef = computed(() => {
let fontSize = props.size || props.fontSize
if (fontSize) fontSize = formatLength(fontSize)
return fontSize || undefined
})
const styleBgImageRef = computed(() => {
const gradient = props.color || props.gradient
if (typeof gradient === 'string') {
return gradient
} else if (gradient) {
const deg = gradient.deg || 0
const from = gradient.from
const to = gradient.to
return `linear-gradient(${deg}deg, ${from} 0%, ${to} 100%)`
}
return undefined
})
const themeRef = useTheme(
'GradientText',
'GradientText',
style,
gradientTextLight,
props
)
return {
compatibleType: compatibleTypeRef,
styleFontSize: styleFontSizeRef,
styleBgImage: styleBgImageRef,
cssVars: computed(() => {
const { value: type } = compatibleTypeRef
const {
common: { cubicBezierEaseInOut },
self: {
rotate,
[createKey('colorStart', type)]: colorStart,
[createKey('colorEnd', type)]: colorEnd,
fontWeight
}
} = themeRef.value
return {
'--bezier': cubicBezierEaseInOut,
'--rotate': rotate,
'--color-start': colorStart,
'--color-end': colorEnd,
'--font-weight': fontWeight
}
})
} }
} }
})
</script> </script>

View File

@ -0,0 +1,20 @@
import { cB } from '../../../_utils/cssr'
// vars:
// --font-weight
// --rotate
// --bezier
// --color-start
// --color-end
export default cB('gradient-text', `
display: inline-block;
font-weight: var(--font-weight);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
white-space: nowrap;
background-image: linear-gradient(var(--rotate), var(--color-start) 0%, var(--color-end) 100%);
transition:
--color-start .3s var(--bezier),
--color-end .3s var(--bezier);
`)

View File

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

View File

@ -1,70 +0,0 @@
import { c, cTB, cM } from '../../../_utils/cssr'
export default c([
({ props }) => {
const {
rotate,
colorStartPrimary,
colorEndPrimary,
colorStartInfo,
colorEndInfo,
colorStartWarning,
colorEndWarning,
colorStartError,
colorEndError,
colorStartSuccess,
colorEndSuccess,
fontWeight
} = props.$local
const {
cubicBezierEaseInOut
} = props.$global
return cTB('gradient-text', {
raw: `
display: inline-block;
font-weight: ${fontWeight};
font-size: inherit;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
white-space: nowrap;
background-image: linear-gradient(${rotate}, var(--start-stop) 0%, var(--end-stop) 100%);
transition:
--start-stop .3s ${cubicBezierEaseInOut},
--end-stop .3s ${cubicBezierEaseInOut};
`
},
[
cM('default-type', {
raw: `
--start-stop: ${colorStartPrimary};
--end-stop: ${colorEndPrimary};
`
}),
cM('success-type', {
raw: `
--start-stop: ${colorStartSuccess};
--end-stop: ${colorEndSuccess};
`
}),
cM('warning-type', {
raw: `
--start-stop: ${colorStartWarning};
--end-stop: ${colorEndWarning};
`
}),
cM('error-type', {
raw: `
--start-stop: ${colorStartError};
--end-stop: ${colorEndError};
`
}),
cM('info-type', {
raw: `
--start-stop: ${colorStartInfo};
--end-stop: ${colorEndInfo};
`
})
])
}
])

View File

@ -1,11 +1,9 @@
import create from '../../_styles/utils/create-component-base' import { commonDark } from '../../_styles/new-common'
import { baseDark } from '../../_styles/base'
export default create({ export default {
theme: 'dark',
name: 'GradientText', name: 'GradientText',
peer: [baseDark], common: commonDark,
getLocalVars (vars) { self (vars) {
const { const {
primaryColor, primaryColor,
successColor, successColor,
@ -33,4 +31,4 @@ export default create({
colorEndSuccess: successColorSuppl colorEndSuccess: successColorSuppl
} }
} }
}) }

View File

@ -1,12 +1,10 @@
import create from '../../_styles/utils/create-component-base'
import { changeColor } from 'seemly' import { changeColor } from 'seemly'
import { baseLight } from '../../_styles/base' import { commonLight } from '../../_styles/new-common'
export default create({ export default {
theme: 'light',
name: 'GradientText', name: 'GradientText',
peer: [baseLight], common: commonLight,
getLocalVars (vars) { self (vars) {
const { const {
primaryColor, primaryColor,
successColor, successColor,
@ -29,4 +27,4 @@ export default create({
colorEndSuccess: successColor colorEndSuccess: successColor
} }
} }
}) }

View File

@ -42,8 +42,8 @@ export { baseDark, baseLight } from './_styles/base'
// export { dynamicTagsDark, dynamicTagsLight } from './dynamic-tags/styles' // export { dynamicTagsDark, dynamicTagsLight } from './dynamic-tags/styles'
// export { elementDark, elementLight } from './element/styles' // export { elementDark, elementLight } from './element/styles'
// export { emptyDark, emptyLight } from './empty/styles' // export { emptyDark, emptyLight } from './empty/styles'
export { formDark, formLight } from './form/styles' // export { formDark, formLight } from './form/styles'
export { gradientTextDark, gradientTextLight } from './gradient-text/styles' // export { gradientTextDark, gradientTextLight } from './gradient-text/styles'
export { gridDark, gridLight } from './grid/styles' export { gridDark, gridLight } from './grid/styles'
export { iconDark, iconLight } from './icon/styles' export { iconDark, iconLight } from './icon/styles'
export { inputDark, inputLight } from './input/styles' export { inputDark, inputLight } from './input/styles'

View File

@ -24,6 +24,8 @@ import { dynamicInputDark } from './dynamic-input/styles'
import { dynamicTagsDark } from './dynamic-tags/styles' import { dynamicTagsDark } from './dynamic-tags/styles'
import { elementDark } from './element/styles' import { elementDark } from './element/styles'
import { emptyDark } from './empty/styles' import { emptyDark } from './empty/styles'
import { formDark } from './form/styles'
import { gradientTextDark } from './gradient-text/styles'
export const darkTheme = { export const darkTheme = {
common: commonDark, common: commonDark,
@ -51,5 +53,7 @@ export const darkTheme = {
DynamicInput: dynamicInputDark, DynamicInput: dynamicInputDark,
DynamicTags: dynamicTagsDark, DynamicTags: dynamicTagsDark,
Element: elementDark, Element: elementDark,
Empty: emptyDark Empty: emptyDark,
Form: formDark,
GradientText: gradientTextDark
} }