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(button): size style using cssr

Browse Source
This commit is contained in:
07akioni 2020-06-25 17:51:59 +08:00
parent 64004a5f67
commit aa61e0ef92
22 changed files with 558 additions and 556 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/Button/index.js
View File

@ -1,10 +1,8 @@
/* istanbul ignore file */
import Button from './src/Button.vue'
import ButtonGroup from './src/ButtonGroup'
Button.install = function (Vue) {
Vue.component(Button.name, Button)
Vue.component(ButtonGroup.name, ButtonGroup)
}
export default Button

161
src/Button/src/Button.vue
View File

@ -17,7 +17,7 @@
'n-button--ghost': ghost,
'n-button--text': text,
[`n-button--${type}-type`]: true,
[`n-button--${colorHash || type}-colored`]: true,
[`n-button--${type}-colored`]: true,
[`n-button--${syntheticSize}-size`]: true,
[`n-button--${iconPlacement}-icon`]: iconPlacement && !noTextContent,
[`n-button--${iconDepth}-icon-depth`]: type === 'default',
@ -96,53 +96,55 @@ import NFadeInHeightExpandTransition from '../../_transition/FadeInHeightExpandT
import hollowoutable from '../../_mixins/hollowoutable'
import withapp from '../../_mixins/withapp'
import themeable from '../../_mixins/themeable'
import usecssr from '../../_mixins/usecssr'
import NIcon from '../../Icon'
import NIconSwitchTransition from '../../_transition/IconSwitchTransition'
import { read, hash, createHoverColor, createActiveColor } from '../../_utils/color'
import { createColorStyle } from './styles/Button.cssr.js'
import { createThemedStyle } from '../../_utils/cssr'
import createTheme from './styles/theme'
import styles from './styles/index.js'
// import { read, hash, createHoverColor, createActiveColor } from '../../_utils/color'
// import { createColorStyle } from './styles/Button.cssr.js'
// import { createThemedStyle } from '../../_utils/cssr'
// import createTheme from './styles/theme'
const colorStyle = createColorStyle()
let typeStyle
// const colorStyle = createColorStyle()
// let typeStyle
function mountTypeStyle (type) {
typeStyle.mount({
target: 'n-button-' + type + '-style',
props: {
type
}
})
}
// function mountTypeStyle (type) {
// typeStyle.mount({
// target: 'n-button-' + type + '-style',
// props: {
// type
// }
// })
// }
function mountColorStyle (color, colorHash) {
const textColor = null
const rgb = read(color)
const digest = hash(rgb)
const hoverColor = createHoverColor(rgb)
const activeColor = createActiveColor(rgb)
const focusColor = hoverColor
colorStyle.mount({
target: 'n-button-' + digest,
props: {
digest,
pallete: {
color,
hoverColor,
activeColor,
focusColor,
textColor
}
}
})
}
// function mountColorStyle (color, colorHash) {
// const textColor = null
// const rgb = read(color)
// const digest = hash(rgb)
// const hoverColor = createHoverColor(rgb)
// const activeColor = createActiveColor(rgb)
// const focusColor = hoverColor
// colorStyle.mount({
// target: 'n-button-' + digest,
// props: {
// digest,
// pallete: {
// color,
// hoverColor,
// activeColor,
// focusColor,
// textColor
// }
// }
// })
// }
function unmountColorStyle (colorHash) {
colorStyle.unmount({
target: 'n-button-' + colorHash,
delay: 3000
})
}
// function unmountColorStyle (colorHash) {
// colorStyle.unmount({
// target: 'n-button-' + colorHash,
// delay: 3000
// })
// }
export default {
name: 'NButton',
@ -160,7 +162,12 @@ export default {
default: null
}
},
mixins: [withapp, themeable, hollowoutable],
mixins: [
withapp,
themeable,
hollowoutable,
usecssr(styles)
],
props: {
color: {
type: String,
@ -253,14 +260,14 @@ export default {
}
},
computed: {
colorRgb () {
if (!this.color) return null
return read(this.color)
},
colorHash () {
if (!this.colorRgb) return null
return hash(this.colorRgb)
},
// colorRgb () {
// if (!this.color) return null
// return read(this.color)
// },
// colorHash () {
// if (!this.colorRgb) return null
// return hash(this.colorRgb)
// },
syntheticSize () {
const NButtonGroup = this.NButtonGroup
if (NButtonGroup && NButtonGroup.size) {
@ -299,35 +306,35 @@ export default {
return this.iconPlacement === 'right'
}
},
watch: {
colorHash (value, oldValue) {
unmountColorStyle(oldValue)
},
color (value) {
mountColorStyle(value)
},
type (value) {
mountTypeStyle(value)
}
},
// watch: {
// colorHash (value, oldValue) {
// unmountColorStyle(oldValue)
// },
// color (value) {
// mountColorStyle(value)
// },
// type (value) {
// mountTypeStyle(value)
// }
// },
created () {
const color = this.color
if (color) {
mountColorStyle(color)
}
if (!typeStyle) {
typeStyle = createThemedStyle(colorStyle, createTheme(
this.$naive.styleSchemes,
this.$naive.fallbackTheme
))
}
mountTypeStyle(this.type)
// const color = this.color
// if (color) {
// mountColorStyle(color)
// }
// if (!typeStyle) {
// typeStyle = createThemedStyle(colorStyle, createTheme(
// this.$naive.styleSchemes,
// this.$naive.fallbackTheme
// ))
// }
// mountTypeStyle(this.type)
},
beforeDestroy () {
const colorHash = this.colorHash
if (colorHash) {
unmountColorStyle(colorHash)
}
// const colorHash = this.colorHash
// if (colorHash) {
// unmountColorStyle(colorHash)
// }
const rippleTimer = this.rippleTimer
if (rippleTimer !== null) {
window.clearTimeout(rippleTimer)

209
src/Button/src/styles/Button.cssr.js
View File

@ -1,209 +0,0 @@
import { c, cB, cTB, cE, cM, cNotM, namespace } from '../../../_utils/cssr'
import { composite, read } from '../../../_utils/color/index'
const ns = namespace
function createRippleAnimation (digest, color, theme) {
return [
c(`@keyframes ${ns}-${theme ? theme + '-' : ''}button-${digest}-colored-ripple-spread`, {
from: {
boxShadow: `0 0 0 0 ${color}`
},
to: {
boxShadow: `0 0 0 4px ${color}`
}
}),
c(`@keyframes ${ns}-${theme ? theme + '-' : ''}button-${digest}-colored-ripple-opacity`, {
from: {
opacity: 0.4
},
to: {
opacity: 0
}
})
]
}
function createBasicColorProps (
color, backgroundColor, borderColor
) {
const props = {}
if (color) props.color = color
if (backgroundColor) props.backgroundColor = backgroundColor
if (borderColor) props.border = `1px solid ${borderColor}`
return props
}
function createIconColorStyle (base, color) {
if (!color) return []
let neuralizedColor
if (!base && color) neuralizedColor = color
else {
const colorRgba = read(color)
if (colorRgba[3] === 1) neuralizedColor = color
else {
neuralizedColor = composite(
read(base),
read(color)
)
}
}
return cE('icon', [
cB('icon', {
fill: neuralizedColor,
stroke: neuralizedColor
}),
cB('base-loading', {
fill: neuralizedColor,
stroke: neuralizedColor
})
])
}
function createBorderMaskStyle (color) {
return cE('border-mask', {
boxShadow: `inset 0 0 0 1px ${color}`
})
}
export function createColorStyle () {
return c([
({ props, context }) => {
const digest = props.digest || props.type
const subpallete = (props && props.pallete) || context.pallete[digest]
if (!subpallete) throw new Error('[naive-ui/button]: can\'t find the color of the button.')
const theme = context.theme
const baseBgColor = subpallete.baseBackgroundColor
return [
createRippleAnimation(digest, subpallete.rippleColor || subpallete.borderColor || subpallete.color, theme),
cTB('button', [
cM(`${digest}-colored`, createBasicColorProps(
subpallete.textColor, subpallete.color, subpallete.borderColor || subpallete.color
), [
createIconColorStyle(baseBgColor, subpallete.textColor),
digest === 'default' ? [
cM('tertiary-icon-depth', [
createIconColorStyle(baseBgColor, subpallete.tertiaryDepthIconColor)
])
] : [],
cNotM('disabled', [
cM(
'enter-pressed',
createBasicColorProps(
subpallete.activeTextColor || subpallete.textColor,
subpallete.activeColor,
subpallete.activeBorderColor || subpallete.activeColor
),
[
createBorderMaskStyle(subpallete.activeBorderColor || subpallete.activeColor),
createIconColorStyle(baseBgColor, subpallete.activeTextColor || subpallete.textColor)
]
),
cNotM('enter-pressed', [
c('&:hover', createBasicColorProps(
subpallete.hoverTextColor || subpallete.textColor,
subpallete.hoverColor,
subpallete.hoverBorderColor || subpallete.hoverColor
), [
createBorderMaskStyle(subpallete.hoverBorderColor || subpallete.hoverColor),
createIconColorStyle(baseBgColor, subpallete.hoverTextColor || subpallete.textColor)
]),
c('&:active', createBasicColorProps(
subpallete.activeTextColor || subpallete.textColor,
subpallete.activeColor,
subpallete.activeBorderColor || subpallete.activeColor
), [
createBorderMaskStyle(subpallete.activeBorderColor || subpallete.activeColor),
createIconColorStyle(baseBgColor, subpallete.activeTextColor || subpallete.textColor)
])
]),
c('&:not(:active):focus', [
cNotM('enter-pressed', createBasicColorProps(
subpallete.focusTextColor || subpallete.textColor,
subpallete.focusColor,
subpallete.focusBorderColor || subpallete.focusColor
), [
createBorderMaskStyle(subpallete.focusBorderColor || subpallete.focusColor),
createIconColorStyle(baseBgColor, subpallete.focusTextColor || subpallete.textColor)
])
]),
cM('rippling', [
c('&::after', {
animationName: `${ns}-${theme ? theme + '-' : ''}button-${digest}-colored-ripple-spread, ${ns}-${theme ? theme + '-' : ''}button-${digest}-colored-ripple-opacity`
})
])
]),
cM(`ghost`, createBasicColorProps(
subpallete.ghostTypedTextColor || subpallete.color, 'transparent', subpallete.borderColor || subpallete.color
), [
createIconColorStyle(baseBgColor, subpallete.ghostTypedTextColor || subpallete.color),
digest === 'default' ? [
cM('tertiary-icon-depth', [
createIconColorStyle(baseBgColor, subpallete.tertiaryDepthIconColor)
])
] : [],
cNotM('disabled', [
cM(
'enter-pressed',
createBasicColorProps(subpallete.ghostTypedActiveTextColor || subpallete.activeColor, 'transparent', subpallete.activeBorderColor || subpallete.activeColor),
[
createBorderMaskStyle(subpallete.activeBorderColor || subpallete.activeColor),
createIconColorStyle(baseBgColor, subpallete.ghostTypedActiveTextColor || subpallete.activeColor)
]
),
cNotM('enter-pressed', [
c('&:hover', createBasicColorProps(subpallete.ghostTypedHoverTextColor || subpallete.hoverColor, 'transparent', subpallete.hoverBorderColor || subpallete.hoverColor), [
createBorderMaskStyle(subpallete.hoverBorderColor || subpallete.hoverColor),
createIconColorStyle(baseBgColor, subpallete.ghostTypedHoverTextColor || subpallete.hoverColor)
]),
c('&:active', createBasicColorProps(subpallete.ghostTypedActiveTextColor || subpallete.activeColor, 'transparent', subpallete.activeBorderColor || subpallete.activeColor), [
createBorderMaskStyle(subpallete.activeBorderColor || subpallete.activeColor),
createIconColorStyle(baseBgColor, subpallete.ghostTypedActiveTextColor || subpallete.activeColor)
])
]),
c('&:not(:active):focus', [
cNotM('enter-pressed', createBasicColorProps(subpallete.ghostTypedHoverTextColor || subpallete.hoverColor, 'transparent', subpallete.focusBorderColor || subpallete.focusColor), [
createBorderMaskStyle(subpallete.focusBorderColor || subpallete.focusColor),
createIconColorStyle(baseBgColor, subpallete.ghostTypedHoverTextColor || subpallete.hoverColor)
])
])
])
]),
cM('text', ({
color: subpallete.textTypedTextColor || subpallete.color
}), [
createIconColorStyle(baseBgColor, subpallete.textTypedTextColor || subpallete.color),
digest === 'default' ? [
cM('tertiary-icon-depth', [
createIconColorStyle(baseBgColor, subpallete.tertiaryDepthIconColor)
])
] : [],
cNotM('disabled', [
cM(
'enter-pressed',
createBasicColorProps(subpallete.textTypedActiveTextColor || subpallete.activeColor, null, null),
[
createIconColorStyle(baseBgColor, subpallete.textTypedActiveTextColor || subpallete.activeColor)
]
),
cNotM('enter-pressed', [
c('&:hover', createBasicColorProps(subpallete.textTypedHoverTextColor || subpallete.hoverColor, null, null), [
createIconColorStyle(baseBgColor, subpallete.textTypedHoverTextColor || subpallete.hoverColor)
]),
c('&:active', createBasicColorProps(subpallete.textTypedActiveTextColor || subpallete.activeColor, null, null), [
createIconColorStyle(baseBgColor, subpallete.textTypedActiveTextColor || subpallete.activeColor)
])
]),
c('&:not(:active):focus', [
cNotM('enter-pressed', createBasicColorProps(subpallete.textTypedFocusTextColor || subpallete.focusColor, null, null), [
createIconColorStyle(baseBgColor, subpallete.textTypedFocusTextColor || subpallete.focusColor)
])
])
])
])
])
])
]
}
])
}

241
src/Button/src/styles/color.cssr.js Normal file
View File

@ -0,0 +1,241 @@
import { c, cB, cE, cM, cNotM, namespace } from '../../../_utils/cssr'
const ns = namespace
function createRippleAnimation (digest, color, theme) {
return [
c(`@keyframes ${ns}-${theme ? theme + '-' : ''}button-${digest}-colored-ripple-spread`, {
from: {
boxShadow: `0 0 0 0 ${color}`
},
to: {
boxShadow: `0 0 0 4px ${color}`
}
}),
c(`@keyframes ${ns}-${theme ? theme + '-' : ''}button-${digest}-colored-ripple-opacity`, {
from: {
opacity: 0.4
},
to: {
opacity: 0
}
})
]
}
function createColorProps (
color, backgroundColor, borderColor
) {
const props = {}
if (color) props.color = color
if (backgroundColor) props.backgroundColor = backgroundColor
if (borderColor) props.border = `1px solid ${borderColor}`
return props
}
function createIconColorStyle (iconColor) {
return cE('icon', [
cB('icon', {
fill: iconColor,
stroke: iconColor
}),
cB('base-loading', {
fill: iconColor,
stroke: iconColor
})
])
}
function createBorderMaskStyle (color) {
return cE('border-mask', {
boxShadow: `inset 0 0 0 1px ${color}`
})
}
export default c([
({ props }) => {
const instanceColor = props.$instance.color
const instanceType = props.$instance.type
const digest = instanceColor || instanceType
const pallete = props[digest]
const theme = props.$renderedTheme
return [
createRippleAnimation(
digest,
pallete.rippleColor || pallete.borderColor || pallete.color,
theme
),
cB(
'button',
[
c(
theme === props.$fallbackTheme ? '' : `&.${namespace}-${theme}-theme`,
[
cM(`${digest}-colored`, [
cM(`${digest}-colored`, createColorProps(
pallete.textColor,
pallete.color,
pallete.borderColor || pallete.color
), [
createIconColorStyle(pallete.textColor),
digest === 'default' ? [
cM('tertiary-icon-depth', [
createIconColorStyle(pallete.tertiaryDepthIconColor)
])
] : [],
cNotM('disabled', [
cM(
'enter-pressed',
createColorProps(
pallete.activeTextColor || pallete.textColor,
pallete.activeColor,
pallete.activeBorderColor || pallete.activeColor
),
[
createBorderMaskStyle(pallete.activeBorderColor || pallete.activeColor),
createIconColorStyle(pallete.activeTextColor || pallete.textColor)
]
),
cNotM('enter-pressed', [
c('&:hover', createColorProps(
pallete.hoverTextColor || pallete.textColor,
pallete.hoverColor,
pallete.hoverBorderColor || pallete.hoverColor
), [
createBorderMaskStyle(pallete.hoverBorderColor || pallete.hoverColor),
createIconColorStyle(pallete.hoverTextColor || pallete.textColor)
]),
c('&:active', createColorProps(
pallete.activeTextColor || pallete.textColor,
pallete.activeColor,
pallete.activeBorderColor || pallete.activeColor
), [
createBorderMaskStyle(pallete.activeBorderColor || pallete.activeColor),
createIconColorStyle(pallete.activeTextColor || pallete.textColor)
])
]),
c('&:not(:active):focus', [
cNotM('enter-pressed', createColorProps(
pallete.focusTextColor || pallete.textColor,
pallete.focusColor,
pallete.focusBorderColor || pallete.focusColor
), [
createBorderMaskStyle(pallete.focusBorderColor || pallete.focusColor),
createIconColorStyle(pallete.focusTextColor || pallete.textColor)
])
]),
cM('rippling', [
c('&::after', {
animationName: `${ns}-${theme ? theme + '-' : ''}button-${digest}-colored-ripple-spread, ${ns}-${theme ? theme + '-' : ''}button-${digest}-colored-ripple-opacity`
})
])
]),
cM(`ghost`, createColorProps(
pallete.ghostTypedTextColor || pallete.color, 'transparent', pallete.borderColor || pallete.color
), [
createIconColorStyle(pallete.ghostTypedTextColor || pallete.color),
digest === 'default' ? [
cM('tertiary-icon-depth', [
createIconColorStyle(pallete.tertiaryDepthIconColor)
])
] : [],
cNotM('disabled', [
cM(
'enter-pressed',
createColorProps(
pallete.ghostTypedActiveTextColor || pallete.activeColor,
'transparent',
pallete.activeBorderColor || pallete.activeColor
),
[
createBorderMaskStyle(pallete.activeBorderColor || pallete.activeColor),
createIconColorStyle(pallete.ghostTypedActiveTextColor || pallete.activeColor)
]
),
cNotM('enter-pressed', [
c('&:hover', createColorProps(
pallete.ghostTypedHoverTextColor || pallete.hoverColor,
'transparent',
pallete.hoverBorderColor || pallete.hoverColor
), [
createBorderMaskStyle(pallete.hoverBorderColor || pallete.hoverColor),
createIconColorStyle(pallete.ghostTypedHoverTextColor || pallete.hoverColor)
]),
c('&:active', createColorProps(
pallete.ghostTypedActiveTextColor || pallete.activeColor,
'transparent',
pallete.activeBorderColor || pallete.activeColor
), [
createBorderMaskStyle(pallete.activeBorderColor || pallete.activeColor),
createIconColorStyle(pallete.ghostTypedActiveTextColor || pallete.activeColor)
])
]),
c('&:not(:active):focus', [
cNotM('enter-pressed', createColorProps(
pallete.ghostTypedHoverTextColor || pallete.hoverColor,
'transparent',
pallete.focusBorderColor || pallete.focusColor
), [
createBorderMaskStyle(pallete.focusBorderColor || pallete.focusColor),
createIconColorStyle(pallete.ghostTypedHoverTextColor || pallete.hoverColor)
])
])
])
]),
cM('text', ({
color: pallete.textTypedTextColor || pallete.color
}), [
createIconColorStyle(pallete.textTypedTextColor || pallete.color),
digest === 'default' ? [
cM('tertiary-icon-depth', [
createIconColorStyle(pallete.tertiaryDepthIconColor)
])
] : [],
cNotM('disabled', [
cM(
'enter-pressed',
createColorProps(
pallete.textTypedActiveTextColor || pallete.activeColor,
null,
null
),
[
createIconColorStyle(pallete.textTypedActiveTextColor || pallete.activeColor)
]
),
cNotM('enter-pressed', [
c('&:hover', createColorProps(
pallete.textTypedHoverTextColor || pallete.hoverColor,
null,
null
), [
createIconColorStyle(pallete.textTypedHoverTextColor || pallete.hoverColor)
]),
c('&:active', createColorProps(
pallete.textTypedActiveTextColor || pallete.activeColor,
null,
null
), [
createIconColorStyle(pallete.textTypedActiveTextColor || pallete.activeColor)
])
]),
c('&:not(:active):focus', [
cNotM('enter-pressed', createColorProps(
pallete.textTypedFocusTextColor || pallete.focusColor,
null,
null
), [
createIconColorStyle(pallete.textTypedFocusTextColor || pallete.focusColor)
])
])
])
])
])
])
]
)
]
)
]
}
])

34
src/Button/src/styles/index.js Normal file
View File

@ -0,0 +1,34 @@
import colorStyle from './color.cssr.js'
import sizeStyle from './size.cssr.js'
// import typeStyle from './type.cssr.js'
// import syntheticThemeStyle from './syntheticTheme.cssr.js'
export default [
{
key: 'type',
CNode: colorStyle,
watch: [
'type',
'syntheticTheme'
]
},
{
key: 'size',
CNode: sizeStyle,
watch: [
'size'
]
}
// {
// key: 'color',
// CNode: colorStyle,
// watch: [
// 'color'
// ]
// }
// syntheticTheme: [
// {
// CNode: colorStyle
// }
// ]
]

101
src/Button/src/styles/size.cssr.js Normal file
View File

@ -0,0 +1,101 @@
import { c, cB, cE, cM, cNotM, namespace } from '../../../_utils/cssr'
import formatLength from '../../../_utils/css/formatLength'
export default c([
({ props }) => {
const theme = props.$renderedTheme
const size = props.$instance.size
const height = props.height[size]
const fontSize = props.fontSize[size]
const borderRadius = props.borderRadius
const padding = props.padding[size]
const roundPadding = props.roundPadding[size]
const roundBorderRadius = formatLength(height, 0.5)
const lineHeight = formatLength(height, 1, -2)
const iconSize = props.iconSize[size]
return cB(
'button',
[
c(
theme === props.$fallbackTheme ? '' : `&.${namespace}-${theme}-theme`,
[
cM(`${size}-size`, {
borderRadius,
fontSize,
whiteSpace: 'nowrap'
}, [
cNotM('text', {
height,
lineHeight: lineHeight,
padding
}),
cM('round', {
padding: roundPadding,
borderRadius: roundBorderRadius
}),
cM('circle', {
borderRadius: roundBorderRadius,
width: height,
padding: '0 !important'
}),
cM('text', {
padding: 0,
borderRadius: 0
}, [
cE('icon', {
height: iconSize,
lineHeight: iconSize
})
]),
cE('content', {
display: 'inline-block',
lineHeight: 'inherit'
}),
cE('icon', {
display: 'inline-block',
position: 'relative',
lineHeight,
height: lineHeight,
width: iconSize,
maxWidth: iconSize,
verticalAlign: 'bottom'
}, [
cB('icon', {
fontSize: iconSize
}),
cB('base-loading', {
height: formatLength(iconSize, 1, -2),
width: formatLength(iconSize, 1, -2),
position: 'absolute',
left: 0,
top: '50%',
transform: 'translateY(-50%)',
display: 'block'
// icon switch transition
}),
cM('slot', {
width: iconSize,
fontSize: iconSize,
display: 'inline-flex',
alignItems: 'center',
verticalAlign: 'bottom'
}, [
cB('icon-slot', {
position: 'absolute',
left: 0,
top: '50%',
transform: 'translateY(-50%)',
display: 'block',
lineHeight: iconSize,
height: iconSize,
fontSize: iconSize
})
])
])
])
]
)
]
)
}
])

16
src/Button/src/styles/syntheticTheme.cssr.js Normal file
View File

@ -0,0 +1,16 @@
import { c, cB, cTB, cE, cM, cNotM, namespace } from '../../../_utils/cssr'
import { composite, read } from '../../../_utils/color/index'
export default c([
({ props }) => {
cB(
props.renderedTheme === props.fallbackTheme
? 'button'
: `button.${namespace}-${props.theme}-theme`,
[
props => cM(`${props.extra.value}-colored`, {}, [
])
])
}
])

154
src/Button/src/styles/theme.js
View File

@ -1,154 +0,0 @@
export default function createMergedStyleSchemes (globalSchemes, fallbackTheme) {
const mergedStyleSchemes = {}
for (const theme of Object.keys(globalSchemes)) {
const scheme = globalSchemes[theme]
if (theme === fallbackTheme) {
mergedStyleSchemes.fallback = createStyleScheme(scheme)
} else {
mergedStyleSchemes[theme] = createStyleScheme(scheme)
}
}
return mergedStyleSchemes
}
function createStyleScheme (scheme, theme) {
if (theme !== 'dark') {
return {
default: {
color: scheme.baseBackgroundColor,
hoverColor: scheme.baseBackgroundColor,
activeColor: scheme.baseBackgroundColor,
focusColor: scheme.baseBackgroundColor,
textColor: scheme.secondaryTextColor,
hoverTextColor: scheme.primaryHoverColor,
activeTextColor: scheme.primaryActiveColor,
focusTextColor: scheme.primaryHoverColor,
textTypedTextColor: scheme.secondaryTextColor,
textTypedHoverTextColor: scheme.primaryHoverColor,
textTypedActiveTextColor: scheme.primaryActiveColor,
textTypedFocusTextColor: scheme.primaryHoverColor,
ghostTypedTextColor: scheme.secondaryTextColor,
ghostTypedHoverTextColor: scheme.primaryHoverColor,
ghostTypedActiveTextColor: scheme.primaryActiveColor,
ghostTypedFocusTextColor: scheme.primaryHoverColor,
borderColor: scheme.borderColor,
hoverBorderColor: scheme.primaryHoverColor,
activeBorderColor: scheme.primaryActiveColor,
focusBorderColor: scheme.primaryHoverColor,
rippleColor: scheme.primaryColor,
tertiaryDepthIconColor: scheme.tertiaryTextColor,
baseBackgroundColor: scheme.baseBackgroundColor
},
primary: {
color: scheme.primaryColor,
hoverColor: scheme.primaryHoverColor,
activeColor: scheme.primaryActiveColor,
focusColor: scheme.primaryHoverColor,
textColor: scheme.baseBackgroundColor
},
info: {
color: scheme.infoColor,
hoverColor: scheme.infoHoverColor,
activeColor: scheme.infoActiveColor,
focusColor: scheme.infoHoverColor,
textColor: scheme.baseBackgroundColor
},
success: {
color: scheme.successColor,
hoverColor: scheme.successHoverColor,
activeColor: scheme.successActiveColor,
focusColor: scheme.successHoverColor,
textColor: scheme.baseBackgroundColor
},
warning: {
color: scheme.warningColor,
hoverColor: scheme.warningHoverColor,
activeColor: scheme.warningActiveColor,
focusColor: scheme.warningHoverColor,
textColor: scheme.baseBackgroundColor
},
error: {
color: scheme.errorColor,
hoverColor: scheme.errorHoverColor,
activeColor: scheme.errorActiveColor,
focusColor: scheme.errorHoverColor,
textColor: scheme.baseBackgroundColor
}
}
} else {
return {
default: {
color: 'transparent',
hoverColor: 'transparent',
activeColor: 'transparent',
focusColor: 'transparent',
textColor: scheme.secondaryTextColor,
hoverTextColor: scheme.primaryHoverColor,
activeTextColor: scheme.primaryActiveColor,
focusTextColor: scheme.primaryHoverColor,
textTypedTextColor: scheme.secondaryTextColor,
textTypedHoverTextColor: scheme.primaryHoverColor,
textTypedActiveTextColor: scheme.primaryActiveColor,
textTypedFocusTextColor: scheme.primaryHoverColor,
ghostTypedTextColor: scheme.secondaryTextColor,
ghostTypedHoverTextColor: scheme.primaryHoverColor,
ghostTypedActiveTextColor: scheme.primaryActiveColor,
ghostTypedFocusTextColor: scheme.primaryHoverColor,
borderColor: scheme.borderColor,
hoverBorderColor: scheme.primaryHoverColor,
activeBorderColor: scheme.primaryActiveColor,
focusBorderColor: scheme.primaryHoverColor,
rippleColor: scheme.primaryColor,
tertiaryDepthIconColor: scheme.tertiaryTextColor,
baseBackgroundColor: scheme.baseBackgroundColor
},
primary: {
color: scheme.primaryColor,
hoverColor: scheme.primaryHoverColor,
activeColor: scheme.primaryActiveColor,
focusColor: scheme.primaryHoverColor,
textColor: scheme.baseBackgroundColor
},
info: {
color: scheme.infoColor,
hoverColor: scheme.infoHoverColor,
activeColor: scheme.infoActiveColor,
focusColor: scheme.infoHoverColor,
textColor: scheme.baseBackgroundColor
},
success: {
color: scheme.successColor,
hoverColor: scheme.successHoverColor,
activeColor: scheme.successActiveColor,
focusColor: scheme.successHoverColor,
textColor: scheme.baseBackgroundColor
},
warning: {
color: scheme.warningColor,
hoverColor: scheme.warningHoverColor,
activeColor: scheme.warningActiveColor,
focusColor: scheme.warningHoverColor,
textColor: scheme.baseBackgroundColor
},
error: {
color: scheme.errorColor,
hoverColor: scheme.errorHoverColor,
activeColor: scheme.errorActiveColor,
focusColor: scheme.errorHoverColor,
textColor: scheme.baseBackgroundColor
}
}
}
}

2
src/DynamicInput/src/DynamicInput.vue
View File

@ -47,7 +47,7 @@
<script>
import NButton from '../../Button'
import NButtonGroup from '../../Button/src/ButtonGroup'
import NButtonGroup from '../../button-group'
import mdAdd from '../../_icons/md-add'
import mdRemove from '../../_icons/md-remove'
import NDynamicInputInputPreset from './InputPreset'

22
src/_mixins/usecssr.js
View File

@ -14,14 +14,16 @@ function getThemeVariables (naive, themeName) {
return theme.base
}
function createMountId (componentName, renderedTheme, dependencyKey, dependencyValue) {
return componentName + '-' + renderedTheme + '-' + dependencyKey + (dependencyValue ? ('-' + dependencyValue) : '')
}
function prepareTheme (
instance,
theme,
dependencyKey,
CNode,
mountOnFalsyValue = false
CNode
) {
if (!mountOnFalsyValue && !instance[dependencyKey]) return
const naive = instance.$naive
const options = instance.$options
const {
@ -29,7 +31,19 @@ function prepareTheme (
_themes
} = naive
const renderedTheme = theme || fallbackTheme
const mountId = options.name + '-' + renderedTheme + '-' + dependencyKey + (instance[dependencyKey] ? '-' + instance[dependencyKey] : '')
const dependencyValue = dependencyKey === 'syntheticTheme' ? renderedTheme : instance[dependencyKey]
if (
process.env.NODE_ENV !== 'production' &&
(dependencyValue === null || dependencyValue === undefined)
) {
console.error(`[naive-ui/mixins/usecssr]: ${options.name}.${dependencyKey} is ${dependencyValue}`)
}
const mountId = createMountId(
options.name,
renderedTheme,
dependencyKey,
dependencyValue
)
if (isStyleMounted(mountId)) return
const cssrPropsGetter = _themes[renderedTheme][options.name]
if (process.env.NODE_ENV !== 'production' && !cssrPropsGetter) {

82
src/_styles/Button.scss
View File

@ -1,83 +1,5 @@
@import './mixins/mixins.scss';
@mixin button-size-mixin($size) {
@include m($size + '-size') {
$height: map-get($--n-height, $size);
$font-size: map-get($--n-button-font-size, $size);
$icon-size: map-get($--n-button-icon-size, $size);
border-radius: $--n-button-border-radius;
font-size: $font-size;
@include not-m(text) {
height: $height;
line-height: $height - 2px;
padding: map-get($--n-button-padding, $size);
}
white-space: nowrap;
@include m(round) {
padding: map-get($--n-button-round-padding, $size);
border-radius: $height / 2;
}
@include m(circle) {
border-radius: $height / 2;
width: $height;
padding: 0!important;
}
@include e(content) {
display: inline-block;
line-height: inherit;
}
@include e(icon) {
display: inline-block;
position: relative;
line-height: $height - 2px;
height: $height - 2px;
width: $icon-size;
max-width: $icon-size;
vertical-align: bottom;
@include b(icon) {
font-size: $icon-size;
}
@include b(base-loading) {
height: $icon-size - 2px;
width: $icon-size - 2px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
display: block;
@include icon-switch-transition($top: 50%, $original-transform: translateY(-50%));
}
@include m(slot) {
width: $icon-size;
font-size: $icon-size;
display: inline-flex;
align-items: center;
vertical-align: bottom;
@include b(icon-slot) {
@include icon-switch-transition($top: 50%, $original-transform: translateY(-50%));
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
display: block;
line-height: $icon-size;
height: $icon-size;
width: $icon-size;
font-size: $icon-size;
}
}
}
@include m(text) {
padding: 0;
border-radius: 0;
@include e(icon) {
height: $icon-size;
line-height: $icon-size;
}
}
}
}
@include themes-mixin {
@include b(button) {
@include once {
@ -167,10 +89,6 @@
&::-moz-focus-inner {
border: 0;
}
@include button-size-mixin('tiny');
@include button-size-mixin('small');
@include button-size-mixin('medium');
@include button-size-mixin('large');
}
@include m(disabled) {
opacity: $--button-disabled-opacity;

8
src/button-group/index.js Normal file
View File

@ -0,0 +1,8 @@
/* istanbul ignore file */
import ButtonGroup from './src/ButtonGroup'
ButtonGroup.install = function (Vue) {
Vue.component(ButtonGroup.name, ButtonGroup)
}
export default ButtonGroup

0
src/Button/src/ButtonGroup.vue → src/button-group/src/ButtonGroup.vue
View File

14
src/index.js
View File

@ -4,7 +4,8 @@ import GradientText from './GradientText'
import Table from './Table'
import DataTable from './DataTable'
import CheckBox from './Checkbox'
import RoundButton from './Button'
import Button from './Button'
import ButtonGroup from './button-group'
import Switch from './Switch'
import Select from './Select'
import Cascader from './Cascader'
@ -71,10 +72,10 @@ import enUS from './locale/enUS'
import lightScheme from './_styles-in-js/lightStyleScheme.scss'
import darkScheme from './_styles-in-js/darkStyleScheme.scss'
import lightBaseStyle from './styles/light/base'
import darkBaseStyle from './styles/dark/base'
import lightButtonStyle from './styles/light/Button'
import darkButtonStyle from './styles/dark/Button'
import lightBaseStyle from './styles/base/light'
import darkBaseStyle from './styles/base/dark'
import lightButtonStyle from './styles/button/light'
import darkButtonStyle from './styles/button/dark'
// Deprecated Components
import NimbusFormCard from './_deprecated/NimbusFormCard'
@ -93,7 +94,8 @@ export default create({
Table,
DataTable,
CheckBox,
RoundButton,
Button,
ButtonGroup,
Switch,
Select,
Modal,

12
src/styles/common-style/index.js → src/styles/_common-style/base.js
View File

@ -13,18 +13,6 @@ export default {
lineHeight: '1.75',
tinyHeight: '22px',
smallHeight: '28px',
mediumHeight: '34px',
largeHeight: '40px',
hugeHeight: '46px',
tinyFontSize: '13px',
smallFontSize: '14px',
mediumFontSize: '14px',
largeFontSize: '15px',
hugeFontSize: '16px',
iconTransition: 'fill .3s $--n-ease-in-out-cubic-bezier, stroke .3s $--n-ease-in-out-cubic-bezier',
transformDebounceScale: 'scale(0.99999)',

32
src/styles/_common-style/button.js Normal file
View File

@ -0,0 +1,32 @@
export default {
height: {
tiny: '22px',
small: '28px',
medium: '34px',
large: '40px'
},
fontSize: {
tiny: '12px',
small: '14px',
medium: '14px',
large: '15px'
},
padding: {
tiny: '0 6px',
small: '0 10px',
medium: '0 14px',
large: '0 18px'
},
roundPadding: {
tiny: '0 10px',
small: '0 14px',
medium: '0 18px',
large: '0 22px'
},
iconSize: {
tiny: '15px',
small: '18px',
medium: '18px',
large: '20px'
}
}

2
src/styles/utils/create-component-base.js → src/styles/_utils/create-component-base.js
View File

@ -9,7 +9,7 @@ export default function createBaseComponent (component) {
return cachedCssrProps
},
customize (options = {}) {
return Object.assign({}, this.styleScheme, options)
// TODO
}
}
}

0
src/styles/utils/create-theme-base.js → src/styles/_utils/create-theme-base.js
View File

4
src/styles/dark/base.js → src/styles/base/dark.js
View File

@ -1,6 +1,6 @@
import create from '../utils/create-theme-base.js'
import create from '../_utils/create-theme-base.js'
import { read, composite } from '../../_utils/color/index.js'
import commonVariables from '../common-style/index.js'
import commonVariables from '../_common-style/base.js'
export default create({
getBaseVariables () {

4
src/styles/light/base.js → src/styles/base/light.js
View File

@ -1,6 +1,6 @@
import create from '../utils/create-theme-base.js'
import create from '../_utils/create-theme-base.js'
import { read, composite } from '../../_utils/color/index.js'
import commonVariables from '../common-style/index.js'
import commonVariables from '../_common-style/base.js'
export default create({
getBaseVariables () {

7
src/styles/light/Button.js → src/styles/button/dark.js
View File

@ -1,8 +1,11 @@
import create from '../utils/create-component-base'
import create from '../_utils/create-component-base'
import commonVariables from '../_common-style/button'
export default create({
getDerivedVariables ({ derived }) {
getDerivedVariables ({ base, derived }) {
return {
...commonVariables,
borderRadius: base.borderRadius,
default: {
color: 'transparent',
hoverColor: 'transparent',

7
src/styles/dark/Button.js → src/styles/button/light.js
View File

@ -1,8 +1,11 @@
import create from '../utils/create-component-base'
import create from '../_utils/create-component-base'
import commonVariables from '../_common-style/button'
export default create({
getDerivedVariables ({ derived }) {
getDerivedVariables ({ base, derived }) {
return {
...commonVariables,
borderRadius: base.borderRadius,
default: {
color: 'transparent',
hoverColor: 'transparent',