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

refactor(base-suffix): use cssr

Browse Source
This commit is contained in:
07akioni 2020-07-01 21:57:42 +08:00
parent f3d90950b8
commit 7eea8e85f9
13 changed files with 221 additions and 215 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/_base/selection/src/styles/themed-base.js
View File

@ -8,7 +8,6 @@ export default c([
const base = props.$base
const easeInOutCubicBezier = base.easeInOutCubicBezier
const borderRadius = local.borderRadius
console.log(local)
return cTB2('base-selection', {
raw: `
position: relative;

11
src/_base/suffix/src/Suffix.vue
View File

@ -41,7 +41,8 @@
import CancelIcon from './CancelIcon.vue'
import IconSwitchTransition from '../../../_transition/IconSwitchTransition'
import NBaseLoading from '../../loading'
import { mountStyleAsFormItem } from './styles/Suffix.cssr.js'
import usecssr from '../../../_mixins/usecssr'
import styles from './styles'
export default {
name: 'NBaseSuffix',
@ -55,6 +56,9 @@ export default {
NBaseLoading,
IconSwitchTransition
},
mixins: [
usecssr(styles)
],
props: {
theme: {
type: String,
@ -102,11 +106,6 @@ export default {
}
}
},
created () {
if (this.NFormItem) {
mountStyleAsFormItem()
}
},
methods: {
handleClick (e) {
this.$emit('clear', e)

58
src/_base/suffix/src/styles/Suffix.cssr.js
View File

@ -1,58 +0,0 @@
import { createStyleAsFormItem, createThemedStyle, c, cB, cTB, cE, cM } from '../../../../_utils/cssr'
import theme from './theme'
function styleAsFormItem () {
return createStyleAsFormItem(
createThemedStyle(cTB('base-suffix', [
({ context, props }) => {
const pallete = context.pallete
const status = props.status
const subPallete = pallete[status]
return [
cB('base-suffix-cross', [
c('&:hover', [
cE('icon', {
fill: subPallete.crossColor.hover
})
]),
c('&:active', [
cE('icon', {
fill: subPallete.crossColor.active
})
])
]),
cB('base-suffix-arrow', [
cM('active', [
c('&::after', {
borderLeftColor: subPallete.arrowColor.active,
borderBottomColor: subPallete.arrowColor.active
})
])
])
]
}
]), theme)
)
}
let style = null
export function mountStyleAsFormItem () {
if (style === null) {
style = styleAsFormItem()
style.mount({
target: 'base-suffix-error',
count: false,
props: {
status: 'error'
}
})
style.mount({
target: 'base-suffix-warning',
count: false,
props: {
status: 'warning'
}
})
}
}

9
src/_base/suffix/src/styles/index.js Normal file
View File

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

50
src/_base/suffix/src/styles/theme.js
View File

@ -1,50 +0,0 @@
import lightScheme from '../../../../_styles-in-js/lightStyleScheme.scss'
import darkScheme from '../../../../_styles-in-js/darkStyleScheme.scss'
const light = {
error: {
crossColor: {
hover: lightScheme.errorHoverColor,
active: lightScheme.errorActiveColor
},
arrowColor: {
active: lightScheme.errorHoverColor
}
},
warning: {
crossColor: {
hover: lightScheme.warningHoverColor,
active: lightScheme.warningActiveColor
},
arrowColor: {
active: lightScheme.warningHoverColor
}
}
}
const dark = {
error: {
crossColor: {
hover: darkScheme.errorHoverColor,
active: darkScheme.errorActiveColor
},
arrowColor: {
active: darkScheme.errorHoverColor
}
},
warning: {
crossColor: {
hover: darkScheme.warningHoverColor,
active: darkScheme.warningActiveColor
},
arrowColor: {
active: darkScheme.warningHoverColor
}
}
}
export default {
fallback: light,
dark
}

133
src/_base/suffix/src/styles/themed-base.cssr.js Normal file
View File

@ -0,0 +1,133 @@
import { cTB2, c, cB, cE, cM, insideFormItem } from '../../../../_utils/cssr'
import fadeInScaleUpTransition from '../../../../styles/_transitions/fade-in-scale-up'
import createIconSwitchTransition from '../../../../styles/_transitions/icon-switch'
function styleInsideFormItem (status, pallete) {
return insideFormItem(status, cTB2('base-suffix', [
cB('base-suffix-cross', [
c('&:hover', [
cE('icon', {
fill: pallete.hoverCrossColor
})
]),
c('&:active', [
cE('icon', {
fill: pallete.activeCrossColor
})
])
]),
cB('base-suffix-arrow', [
cM('active', [
c('&::after', {
borderLeftColor: pallete.activeArrowColor,
borderBottomColor: pallete.activeArrowColor
})
])
])
]))
}
export default c([
({ props }) => {
const base = props.$base
const iconSwitchTransition = createIconSwitchTransition()
const transformDebounceScale = base.transformDebounceScale
const easeInOutCubicBezier = base.easeInOutCubicBezier
const pallete = props.$local.default
return [
cTB2('base-suffix', {
raw: `
user-select: none;
display: inline-block;
position: relative;
height: 12px;
width: 12px;
vertical-align: bottom;
`
}, [
fadeInScaleUpTransition(),
cB('base-suffix-spin', {
transform: transformDebounceScale,
raw: `
position: absolute;
height: 12px;
width: 12px;
`
}),
cB('base-suffix-cross', {
transform: transformDebounceScale,
raw: `
position: absolute;
height: 12px;
width: 12px;
line-height: 12px;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
`
}, [
iconSwitchTransition,
cE('icon', {
transition: `fill .3s ${base.easeInOutCubicBezier}`,
fill: pallete.crossColor
}),
c('&:hover', [
cE('icon', {
fill: pallete.hoverCrossColor
})
]),
c('&:active', [
cE('icon', {
fill: pallete.activeCrossColor
})
])
]),
cB('base-suffix-arrow', {
transform: transformDebounceScale,
raw: `
position: absolute;
top: 0;
left: 0;
width: 12px;
height: 12px;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
`
}, [
iconSwitchTransition,
c('&::after', {
raw: `
transition:
transform .3s ${easeInOutCubicBezier},
border-color .3s ${easeInOutCubicBezier};
position: absolute;
content: '';
box-sizing: border-box;
width: 7px;
height: 7px;
right: 1px;
top: calc(50% - 4.5px);
transform: rotate(-45deg);
transform-origin: 30% 70%;
`,
borderLeft: `1px solid ${pallete.arrowColor}`,
borderBottom: `1px solid ${pallete.arrowColor}`
}),
cM('active', [
c('&::after', {
transform: 'rotate(135deg)',
borderLeft: `1px solid ${pallete.activeArrowColor}`,
borderBottom: `1px solid ${pallete.activeArrowColor}`
})
]),
cM('disabled', {
cursor: 'not-allowed'
})
])
]),
styleInsideFormItem('warning', props.$local.warning),
styleInsideFormItem('error', props.$local.error)
]
}
])

97
src/_styles/BaseSuffix.scss
View File

@ -1,97 +0,0 @@
@import './mixins/mixins.scss';
@include themes-mixin {
@include b(base-suffix) {
@include once {
@include fade-in-scale-up-transition(base-suffix);
user-select: none;
display: inline-block;
position: relative;
height: 12px;
width: 12px;
vertical-align: bottom;
@include b(base-suffix-spin) {
@include icon-switch-transition();
transform: $--n-transform-debounce-scale;
position: absolute;
height: 12px;
width: 12px;
}
}
@include b(base-suffix-cross) {
@include once {
@include icon-switch-transition();
transform: $--n-transform-debounce-scale;
position: absolute;
height: 12px;
width: 12px;
line-height: 12px;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
}
@include e(icon) {
@include once {
transition: fill .3s $--n-ease-in-out-cubic-bezier;
}
fill: map-get($--base-suffix-cross-color, "default");
}
&:hover {
@include e(icon) {
fill: map-get($--base-suffix-cross-color, "hover");
}
}
&:active {
@include e(icon) {
fill: map-get($--base-suffix-cross-color, "active");
}
}
}
@include b(base-suffix-arrow) {
@include once {
@include icon-switch-transition();
transform: $--n-transform-debounce-scale;
position: absolute;
top: 0;
left: 0;
width: 12px;
height: 12px;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
}
&::after {
@include once {
transition:
transform .3s $--n-ease-in-out-cubic-bezier,
border-color .3s $--n-ease-in-out-cubic-bezier;
position: absolute;
content: '';
box-sizing: border-box;
width: 7px;
height: 7px;
right: 1px;
top: calc(50% - 4.5px);
transform: rotate(-45deg);
transform-origin: 30% 70%;
}
border-left: 1px solid map-get($--base-suffix-arrow-color, 'default');
border-bottom: 1px solid map-get($--base-suffix-arrow-color, 'default');
}
@include m(active) {
&::after {
@include once {
transform: rotate(135deg);
}
border-left: 1px solid map-get($--base-suffix-arrow-color, 'active');
border-bottom: 1px solid map-get($--base-suffix-arrow-color, 'active');
}
}
@include m(disabled) {
@include once {
cursor: not-allowed;
}
}
}
}
}

1
src/_styles/index.scss
View File

@ -4,7 +4,6 @@
@import '../../node_modules/vue-virtual-scroller/dist/vue-virtual-scroller';
@import "./BaseLoading.scss";
@import './BaseSuffix.scss';
@import './BaseSelectMenu.scss';
@import './BaseMenuMask.scss';
@import './BaseTrackingRect.scss';

1
src/_utils/cssr/index.js
View File

@ -74,6 +74,7 @@ function createStyleAsFormItem (style) {
}
function insideFormItem (status, style) {
if (status === null) return style
return c(`${prefix}form-item`, [
c(`${prefix}form-item-blank`, [
c(({ props }) => `&${prefix}form-item-blank${modifierPrefix}${status}`, [

8
src/index.js
View File

@ -82,6 +82,8 @@ import lightProgressStyle from './styles/progress/light'
import darkProgressStyle from './styles/progress/dark'
import lightBaseSelection from './styles/_base/selection/light'
import darkBaseSelection from './styles/_base/selection/dark'
import lightBaseSuffix from './styles/_base/suffix/light'
import darkBaseSuffix from './styles/_base/suffix/dark'
// Deprecated Components
import NimbusFormCard from './_deprecated/NimbusFormCard'
@ -180,14 +182,16 @@ export default create({
NButton: lightButtonStyle,
NBadge: lightBadgeStyle,
NProgress: lightProgressStyle,
NBaseSelection: lightBaseSelection
NBaseSelection: lightBaseSelection,
NBaseSuffix: lightBaseSuffix
},
dark: {
base: darkBaseStyle,
NButton: darkButtonStyle,
NBadge: darkBadgeStyle,
NProgress: darkProgressStyle,
NBaseSelection: darkBaseSelection
NBaseSelection: darkBaseSelection,
NBaseSuffix: darkBaseSuffix
}
}
})

32
src/styles/_base/suffix/dark.js Normal file
View File

@ -0,0 +1,32 @@
import create from '../../_utils/create-component-base'
export default create({
getDerivedVariables ({ base, derived }) {
return {
default: {
crossColor: derived.quaternaryTextOverlayColor,
hoverCrossColor: derived.primaryHoverColor,
activeCrossColor: derived.primaryActiveColor,
arrowColor: derived.quaternaryTextOverlayColor,
hoverArrowColor: derived.primaryHoverColor,
activeArrowColor: derived.primaryHoverColor
},
warning: {
crossColor: derived.warningColor,
hoverCrossColor: derived.warningHoverColor,
activeCrossColor: derived.warningActiveColor,
arrowColor: derived.warningColor,
hoverArrowColor: derived.warningHoverColor,
activeArrowColor: derived.warningHoverColor
},
error: {
crossColor: derived.errorColor,
hoverCrossColor: derived.errorHoverColor,
activeCrossColor: derived.errorActiveColor,
arrowColor: derived.errorColor,
hoverArrowColor: derived.errorHoverColor,
activeArrowColor: derived.errorHoverColor
}
}
}
})

32
src/styles/_base/suffix/light.js Normal file
View File

@ -0,0 +1,32 @@
import create from '../../_utils/create-component-base'
export default create({
getDerivedVariables ({ base, derived }) {
return {
default: {
crossColor: derived.quaternaryTextOverlayColor,
hoverCrossColor: derived.primaryHoverColor,
activeCrossColor: derived.primaryActiveColor,
arrowColor: derived.quaternaryTextOverlayColor,
hoverArrowColor: derived.primaryHoverColor,
activeArrowColor: derived.primaryHoverColor
},
warning: {
crossColor: derived.warningColor,
hoverCrossColor: derived.warningHoverColor,
activeCrossColor: derived.warningActiveColor,
arrowColor: derived.warningColor,
hoverArrowColor: derived.warningHoverColor,
activeArrowColor: derived.warningHoverColor
},
error: {
crossColor: derived.errorColor,
hoverCrossColor: derived.errorHoverColor,
activeCrossColor: derived.errorActiveColor,
arrowColor: derived.errorColor,
hoverArrowColor: derived.errorHoverColor,
activeArrowColor: derived.errorHoverColor
}
}
}
})

3
think.md
View File

@ -185,6 +185,9 @@ light {
```
我目前觉得第一种好点，因为扩展一般是按照种类扩展，每次插入一个同样结构的块。而第二种是每次扩展的时候在每个块里同样的位置插入一行，这样扩展的时候写起来很别扭。
## 2020.7.1
shouldMount 可以加到 usecssr
## TODO 排序不分先后
1. <del>Focus Detector on Time Selector</del>
2. <del>Menu Root Indent = 0 可能造成问题</del>