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

refactor(tag): use cssr, wip

Browse Source
This commit is contained in:
07akioni 2020-07-14 00:44:11 +08:00
parent 9dbf6acebc
commit b698a60c82
11 changed files with 520 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/index.js
View File

@ -88,6 +88,8 @@ import inputGroupLabelLightStyle from './input-group-label/styles/light'
import inputGroupLabelDarkStyle from './input-group-label/styles/dark'
import inputNumberLightStyle from './input-number/styles/light'
import inputNumberDarkStyle from './input-number/styles/dark'
import tagLightStyle from './tag/styles/light'
import tagDarkStyle from './tag/styles/dark'
// Can be remove after refactoring
import baseSelectionLightStyle from './_base/selection/styles/light'
@ -198,6 +200,8 @@ export default create({
inputGroupLabelDarkStyle,
inputNumberLightStyle,
inputNumberDarkStyle,
tagLightStyle,
tagDarkStyle,
// Can be remove after refactoring
baseSelectionLightStyle,
baseSelectionDarkStyle

2
src/input/styles/dark.js
View File

@ -6,7 +6,7 @@ import suffixStyle from '../../_base/suffix/styles/dark'
export default create({
name: 'Input',
theme: 'dark',
styles: [ suffixStyle ],
peer: [ suffixStyle ],
getDerivedVariables ({ base, derived }) {
const {
secondaryTextOverlayColor,

12
src/styles/_common-style/tag.js Normal file
View File

@ -0,0 +1,12 @@
export default {
height: {
small: '22px',
medium: '28px',
large: '34px'
},
fontSize: {
small: '13px',
medium: '14px',
large: '14px'
}
}

16
src/tag/src/Tag.vue
View File

@ -20,23 +20,29 @@
class="n-tag__close"
@click="handleCloseClick"
>
<md-close />
<close-icon />
</div>
</div>
</template>
<script>
import CloseIcon from '../../_icons/md-close.vue'
import withapp from '../../_mixins/withapp'
import themeable from '../../_mixins/themeable'
import mdClose from '../../_icons/md-close.vue'
import commonProps from './commonProps'
import usecssr from '../../_mixins/usecssr'
import commonProps from './common-props'
import styles from './styles'
export default {
name: 'NTag',
components: {
mdClose
CloseIcon
},
mixins: [withapp, themeable],
mixins: [
withapp,
themeable,
usecssr(styles)
],
model: {
prop: 'checked',
event: 'checked-change'

0
src/tag/src/commonProps.js → src/tag/src/commom-props.js
View File

29
src/tag/src/styles/index.js Normal file
View File

@ -0,0 +1,29 @@
import themedBaseStyle from './themed-base.cssr.js'
import themedSizeStyle from './themed-size.cssr.js'
import themedTypeStyle from './themed-type.cssr.js'
export default [
{
key: 'syntheticTheme',
watch: [
'syntheticTheme'
],
CNode: themedBaseStyle
},
{
key: 'size',
watch: [
'syntheticTheme',
'size'
],
CNode: themedSizeStyle
},
{
key: 'type',
watch: [
'syntheticTheme',
'type'
],
CNode: themedTypeStyle
}
]

108
src/tag/src/styles/themed-base.cssr.js Normal file
View File

@ -0,0 +1,108 @@
import { c, cE, cM, cTB, cNotM } from '../../../_utils/cssr'
export default c([
({ props }) => {
const {
borderRadius,
checkableTextColor,
checkableBackgroundColor,
checkableHoverTextColor,
checkableHoverBackgroundColor,
checkableActiveTextColor,
checkableActiveBackgroundColor,
checkableCheckedHoverBackgroundColor,
checkableCheckedActiveBackgroundColor
} = props.$local
const {
easeInOutCubicBezier
} = props.$base
return cTB('tag', {
raw: `
white-space: nowrap;
position: relative;
padding: 0 7px;
box-sizing: border-box;
cursor: default;
display: inline-block;
`,
borderRadius,
transition: `
background-color .2s ${easeInOutCubicBezier},
color .3s ${easeInOutCubicBezier},
box-shadow .3s ${easeInOutCubicBezier},
opacity .3s ${easeInOutCubicBezier}
`
}, [
cE('close', {
cursor: 'pointer'
}),
cM('checkable', {
cursor: 'pointer'
}),
cM('disabled', {
cursor: 'not-allowed !important'
}, [
cE('close', {
cursor: 'not-allowed !important'
}),
cM('checkable', {
opacity: '0.4'
})
]),
cM('closable', {
paddingRight: '18px'
}, [
cE('close', {
raw: `
right: 3px;
top: 50%;
transform: translateY(-50%);
height: 14px;
width: 14px;
line-height: 14px;
position: absolute;
`,
transition: `
fill .2s ${easeInOutCubicBezier},
color .3s ${easeInOutCubicBezier}
`
})
]),
cM('checkable', {
boxShadow: 'none',
color: checkableTextColor,
backgroundColor: checkableBackgroundColor
}, [
cNotM('disabled', [
c('&:hover', {
backgroundColor: checkableHoverBackgroundColor
}, [
cNotM('checked', {
color: checkableHoverTextColor
})
]),
c('&:active', {
backgroundColor: checkableActiveBackgroundColor
}, [
cNotM('checked', {
color: checkableActiveTextColor
})
])
]),
cM('checked', {
color: checkableActiveTextColor,
backgroundColor: checkableActiveBackgroundColor
}, [
cNotM('disabled', [
c('&:hover', {
backgroundColor: checkableCheckedHoverBackgroundColor
}),
c('&:active', {
backgroundColor: checkableCheckedActiveBackgroundColor
})
])
])
])
])
}
])

33
src/tag/src/styles/themed-size.cssr.js Normal file
View File

@ -0,0 +1,33 @@
import { c, cE, cM, cTB } from '../../../_utils/cssr'
import depx from '../../../_utils/css/depx'
import pxfy from '../../../_utils/css/pxfy'
export default c([
({ props }) => {
const { size } = props.$instance
const height = props.$local.height[size]
const fontSize = props.$local.fontSize[size]
const numericHalfHeight = depx(height) / 2
const halfHeight = pxfy(numericHalfHeight)
return cTB('tag', [
cM(`${size}-size`, {
lineHeight: height,
height,
fontSize
}, [
cM('round', {
padding: `0 ${halfHeight}`,
borderRadius: halfHeight
}, [
cM('closable', {
paddingRight: pxfy(10 + numericHalfHeight)
}, [
cE('close', {
right: pxfy(numericHalfHeight - 6)
})
])
])
])
])
}
])

60
src/tag/src/styles/themed-type.cssr.js Normal file
View File

@ -0,0 +1,60 @@
import { c, cE, cM, cTB, cNotM } from '../../../_utils/cssr'
export default c([
({ props }) => {
const {
type
} = props.$instance.type
const pallete = props.$local[type]
const {
borderColor,
textColor,
backgroundColor,
closeColor,
closeHoverColor,
closeActiveColor,
hoverBackgroundColor,
activeBackgroudColor,
disabledBorderColor,
disabledTextColor,
disabledBackgroundColor,
disabledCloseColor
} = pallete
return cTB('tag', [
cM(`${type}-type`, {
boxShadow: `inset 0 0 0 1px ${borderColor}`,
color: textColor,
backgroundColor: backgroundColor
}, [
cE('close', {
fill: closeColor
}),
cNotM('disabled', [
cE('close', [
c('&:hover', {
fill: closeHoverColor
}),
c('&:active', {
fill: closeActiveColor
})
]),
c('&:hover', {
backgroundColor: hoverBackgroundColor
}),
c('&:active', {
backgroundColor: activeBackgroudColor
})
]),
cM('disabled', {
boxShadow: `inset 0 0 0 1px ${disabledBorderColor}`,
color: disabledTextColor,
backgroundColor: disabledBackgroundColor
}, [
cE('close', {
fill: disabledCloseColor
})
])
])
])
}
])

130
src/tag/styles/dark.js Normal file
View File

@ -0,0 +1,130 @@
import create from '../../styles/_utils/create-component-base'
import commonVariables from '../../styles/_common-style/tag'
import changeColor from '../../_utils/color'
// xxxPaneColor
// xxxBorderColor
export default create({
theme: 'dark',
name: 'Tag',
getDerivedVariables ({ base, derived }) {
const {
secondaryTextOverlayColor,
disabledTextOverlayColor,
primaryHoverColor,
primaryActiveColor,
primaryColor,
infoColor,
successColor,
warningColor,
errorColor,
baseBackgroundColor,
disabledBackgroundOverlayColor,
pendingBackgroundOverlayColor,
borderOverlayColor,
closeOverlayColor,
disabledOpacity
} = derived
const {
borderRadius
} = base
return {
...commonVariables,
borderRadius,
checkableTextColor: secondaryTextOverlayColor,
checkableBackgroundColor: 'transparent',
checkableHoverTextColor: primaryHoverColor,
checkableHoverBackgroundColor: 'transparent',
checkableActiveTextColor: baseBackgroundColor,
checkableActiveBackgroundColor: primaryColor,
checkableCheckedHoverBackgroundColor: primaryHoverColor,
checkableCheckedActiveBackgroundColor: primaryActiveColor,
disabledOpacity,
default: {
borderColor: borderOverlayColor,
disabledBorderColor: borderOverlayColor,
textColor: secondaryTextOverlayColor,
disabledTextColor: disabledTextOverlayColor,
backgroundColor: 'transparent',
hoverBackgroundColor: pendingBackgroundOverlayColor,
activeBackgroudColor: pendingBackgroundOverlayColor,
disabledBackgroundColor: disabledBackgroundOverlayColor,
closeColor: closeOverlayColor,
closeHoverColor: closeOverlayColor,
closeActiveColor: closeOverlayColor,
disabledCloseColor: borderOverlayColor
},
primary: {
borderColor: changeColor(primaryColor, { alpha: 0.3 }), // tertiary
disabledBorderColor: changeColor(primaryColor, { alpha: 0.3 }),
textColor: primaryColor,
disabledTextColor: primaryColor,
backgroundColor: 'transparent',
hoverBackgroundColor: changeColor(primaryColor, { alpha: 0.4 }),
activeBackgroudColor: changeColor(primaryColor, { alpha: 0.4 }),
disabledBackgroundColor: 'transparent',
closeColor: closeOverlayColor,
closeHoverColor: closeOverlayColor,
closeActiveColor: closeOverlayColor,
disabledCloseColor: borderOverlayColor
},
info: {
borderColor: changeColor(infoColor, { alpha: 0.3 }), // tertiary
disabledBorderColor: changeColor(infoColor, { alpha: 0.3 }),
textColor: infoColor,
disabledTextColor: infoColor,
backgroundColor: 'transparent',
hoverBackgroundColor: changeColor(infoColor, { alpha: 0.4 }),
activeBackgroudColor: changeColor(infoColor, { alpha: 0.4 }),
disabledBackgroundColor: 'transparent',
closeColor: closeOverlayColor,
closeHoverColor: closeOverlayColor,
closeActiveColor: closeOverlayColor,
disabledCloseColor: borderOverlayColor
},
success: {
borderColor: changeColor(successColor, { alpha: 0.3 }), // tertiary
disabledBorderColor: changeColor(successColor, { alpha: 0.3 }),
textColor: successColor,
disabledTextColor: successColor,
backgroundColor: 'transparent',
hoverBackgroundColor: changeColor(successColor, { alpha: 0.4 }),
activeBackgroudColor: changeColor(successColor, { alpha: 0.4 }),
disabledBackgroundColor: 'transparent',
closeColor: closeOverlayColor,
closeHoverColor: closeOverlayColor,
closeActiveColor: closeOverlayColor,
disabledCloseColor: borderOverlayColor
},
warning: {
borderColor: changeColor(warningColor, { alpha: 0.3 }), // tertiary
disabledBorderColor: changeColor(warningColor, { alpha: 0.3 }),
textColor: warningColor,
disabledTextColor: warningColor,
backgroundColor: 'transparent',
hoverBackgroundColor: changeColor(warningColor, { alpha: 0.4 }),
activeBackgroudColor: changeColor(warningColor, { alpha: 0.4 }),
disabledBackgroundColor: 'transparent',
closeColor: closeOverlayColor,
closeHoverColor: closeOverlayColor,
closeActiveColor: closeOverlayColor,
disabledCloseColor: borderOverlayColor
},
error: {
borderColor: changeColor(errorColor, { alpha: 0.3 }), // tertiary
disabledBorderColor: changeColor(errorColor, { alpha: 0.3 }),
textColor: errorColor,
disabledTextColor: errorColor,
backgroundColor: 'transparent',
hoverBackgroundColor: changeColor(errorColor, { alpha: 0.4 }),
activeBackgroudColor: changeColor(errorColor, { alpha: 0.4 }),
disabledBackgroundColor: 'transparent',
closeColor: closeOverlayColor,
closeHoverColor: closeOverlayColor,
closeActiveColor: closeOverlayColor,
disabledCloseColor: borderOverlayColor
}
}
}
})

132
src/tag/styles/light.js Normal file
View File

@ -0,0 +1,132 @@
import create from '../../styles/_utils/create-component-base'
import commonVariables from '../../styles/_common-style/tag'
import changeColor from '../../_utils/color'
// xxxPaneColor
// xxxBorderColor
// 需要简化，第一，去掉 hover 和 active 的样式，
// 第二，使用不透明度来搞颜色！
export default create({
theme: 'dark',
name: 'Tag',
getDerivedVariables ({ base, derived }) {
const {
secondaryTextOverlayColor,
disabledTextOverlayColor,
primaryHoverColor,
primaryActiveColor,
primaryColor,
infoColor,
successColor,
warningColor,
errorColor,
baseBackgroundColor,
disabledBackgroundOverlayColor,
pendingBackgroundOverlayColor,
borderOverlayColor,
closeOverlayColor,
disabledOpacity
} = derived
const {
borderRadius
} = base
return {
...commonVariables,
borderRadius,
checkableTextColor: secondaryTextOverlayColor,
checkableBackgroundColor: 'transparent',
checkableHoverTextColor: primaryHoverColor,
checkableHoverBackgroundColor: 'transparent',
checkableActiveTextColor: baseBackgroundColor,
checkableActiveBackgroundColor: primaryColor,
checkableCheckedHoverBackgroundColor: primaryHoverColor,
checkableCheckedActiveBackgroundColor: primaryActiveColor,
disabledOpacity,
default: {
borderColor: borderOverlayColor,
disabledBorderColor: borderOverlayColor,
textColor: secondaryTextOverlayColor,
disabledTextColor: disabledTextOverlayColor,
backgroundColor: 'transparent',
hoverBackgroundColor: pendingBackgroundOverlayColor,
activeBackgroudColor: pendingBackgroundOverlayColor,
disabledBackgroundColor: disabledBackgroundOverlayColor,
closeColor: closeOverlayColor,
closeHoverColor: closeOverlayColor,
closeActiveColor: closeOverlayColor,
disabledCloseColor: borderOverlayColor
},
primary: {
borderColor: changeColor(primaryColor, { alpha: 0.3 }), // tertiary
disabledBorderColor: changeColor(primaryColor, { alpha: 0.3 }),
textColor: primaryColor,
disabledTextColor: primaryColor,
backgroundColor: 'transparent',
hoverBackgroundColor: changeColor(primaryColor, { alpha: 0.4 }),
activeBackgroudColor: changeColor(primaryColor, { alpha: 0.4 }),
disabledBackgroundColor: 'transparent',
closeColor: closeOverlayColor,
closeHoverColor: closeOverlayColor,
closeActiveColor: closeOverlayColor,
disabledCloseColor: borderOverlayColor
},
info: {
borderColor: changeColor(infoColor, { alpha: 0.3 }), // tertiary
disabledBorderColor: changeColor(infoColor, { alpha: 0.3 }),
textColor: infoColor,
disabledTextColor: infoColor,
backgroundColor: 'transparent',
hoverBackgroundColor: changeColor(infoColor, { alpha: 0.4 }),
activeBackgroudColor: changeColor(infoColor, { alpha: 0.4 }),
disabledBackgroundColor: 'transparent',
closeColor: closeOverlayColor,
closeHoverColor: closeOverlayColor,
closeActiveColor: closeOverlayColor,
disabledCloseColor: borderOverlayColor
},
success: {
borderColor: changeColor(successColor, { alpha: 0.3 }), // tertiary
disabledBorderColor: changeColor(successColor, { alpha: 0.3 }),
textColor: successColor,
disabledTextColor: successColor,
backgroundColor: 'transparent',
hoverBackgroundColor: changeColor(successColor, { alpha: 0.4 }),
activeBackgroudColor: changeColor(successColor, { alpha: 0.4 }),
disabledBackgroundColor: 'transparent',
closeColor: closeOverlayColor,
closeHoverColor: closeOverlayColor,
closeActiveColor: closeOverlayColor,
disabledCloseColor: borderOverlayColor
},
warning: {
borderColor: changeColor(warningColor, { alpha: 0.3 }), // tertiary
disabledBorderColor: changeColor(warningColor, { alpha: 0.3 }),
textColor: warningColor,
disabledTextColor: warningColor,
backgroundColor: 'transparent',
hoverBackgroundColor: changeColor(warningColor, { alpha: 0.4 }),
activeBackgroudColor: changeColor(warningColor, { alpha: 0.4 }),
disabledBackgroundColor: 'transparent',
closeColor: closeOverlayColor,
closeHoverColor: closeOverlayColor,
closeActiveColor: closeOverlayColor,
disabledCloseColor: borderOverlayColor
},
error: {
borderColor: changeColor(errorColor, { alpha: 0.3 }), // tertiary
disabledBorderColor: changeColor(errorColor, { alpha: 0.3 }),
textColor: errorColor,
disabledTextColor: errorColor,
backgroundColor: 'transparent',
hoverBackgroundColor: changeColor(errorColor, { alpha: 0.4 }),
activeBackgroudColor: changeColor(errorColor, { alpha: 0.4 }),
disabledBackgroundColor: 'transparent',
closeColor: closeOverlayColor,
closeHoverColor: closeOverlayColor,
closeActiveColor: closeOverlayColor,
disabledCloseColor: borderOverlayColor
}
}
}
})