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
class="n-gradient-text"
:class="{
[`n-gradient-text--${computedType}-type`]: true,
[`n-${mergedTheme}-theme`]: mergedTheme
[`n-gradient-text--${compatibleType}-type`]: true
}"
:style="{
...mergedStyle,
fontSize: styleFontSize,
backgroundImage: styleBackgroundImage
backgroundImage: styleBgImage,
...cssVars
}"
>
<slot />
@ -16,15 +15,16 @@
</template>
<script>
import { configurable, themeable, withCssr } from '../../_mixins'
import { formatLength } from '../../_utils'
import styles from './styles/index'
import { defineComponent, computed, onBeforeMount } from 'vue'
import { useTheme } from '../../_mixins'
import { createKey, formatLength } from '../../_utils'
import { gradientTextLight } from '../styles'
import style from './styles/index.cssr.js'
let houdiniRegistered = false
export default {
export default defineComponent({
name: 'GradientText',
mixins: [configurable, themeable, withCssr(styles)],
props: {
size: {
type: [String, Number],
@ -47,30 +47,8 @@ export default {
default: undefined
}
},
computed: {
computedType () {
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 () {
setup (props) {
onBeforeMount(() => {
if (!houdiniRegistered) {
houdiniRegistered = true
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>

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 { baseDark } from '../../_styles/base'
import { commonDark } from '../../_styles/new-common'
export default create({
theme: 'dark',
export default {
name: 'GradientText',
peer: [baseDark],
getLocalVars (vars) {
common: commonDark,
self (vars) {
const {
primaryColor,
successColor,
@ -33,4 +31,4 @@ export default create({
colorEndSuccess: successColorSuppl
}
}
})
}

View File

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

View File

@ -42,8 +42,8 @@ export { baseDark, baseLight } from './_styles/base'
// export { dynamicTagsDark, dynamicTagsLight } from './dynamic-tags/styles'
// export { elementDark, elementLight } from './element/styles'
// export { emptyDark, emptyLight } from './empty/styles'
export { formDark, formLight } from './form/styles'
export { gradientTextDark, gradientTextLight } from './gradient-text/styles'
// export { formDark, formLight } from './form/styles'
// export { gradientTextDark, gradientTextLight } from './gradient-text/styles'
export { gridDark, gridLight } from './grid/styles'
export { iconDark, iconLight } from './icon/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 { elementDark } from './element/styles'
import { emptyDark } from './empty/styles'
import { formDark } from './form/styles'
import { gradientTextDark } from './gradient-text/styles'
export const darkTheme = {
common: commonDark,
@ -51,5 +53,7 @@ export const darkTheme = {
DynamicInput: dynamicInputDark,
DynamicTags: dynamicTagsDark,
Element: elementDark,
Empty: emptyDark
Empty: emptyDark,
Form: formDark,
GradientText: gradientTextDark
}