From 48b8ab6f2c42f3bf90d1fcc03859054e0be0ae33 Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Wed, 23 Dec 2020 23:13:09 +0800 Subject: [PATCH] refactor: remove base-suffix --- src/_base/clear-button/src/ClearButton.vue | 9 +- .../src/styles/themed-base.cssr.js | 7 +- src/_base/index.js | 1 - .../src/styles/themed-base.cssr.js | 5 +- src/_base/selection/src/Selection.vue | 80 ++++--- .../selection/src/styles/themed-base.cssr.js | 219 +++++++++--------- src/_base/selection/styles/dark.js | 4 +- src/_base/selection/styles/light.js | 4 +- src/_base/suffix/index.js | 2 - src/_base/suffix/src/Suffix.vue | 138 ----------- src/_base/suffix/src/styles/index.js | 9 - .../suffix/src/styles/themed-base.cssr.js | 135 ----------- src/_base/suffix/styles/_common.js | 3 - src/_base/suffix/styles/dark.js | 33 --- src/_base/suffix/styles/index.js | 2 - src/_base/suffix/styles/light.js | 33 --- src/styles.js | 5 +- 17 files changed, 171 insertions(+), 518 deletions(-) delete mode 100644 src/_base/suffix/index.js delete mode 100644 src/_base/suffix/src/Suffix.vue delete mode 100644 src/_base/suffix/src/styles/index.js delete mode 100644 src/_base/suffix/src/styles/themed-base.cssr.js delete mode 100644 src/_base/suffix/styles/_common.js delete mode 100644 src/_base/suffix/styles/dark.js delete mode 100644 src/_base/suffix/styles/index.js delete mode 100644 src/_base/suffix/styles/light.js diff --git a/src/_base/clear-button/src/ClearButton.vue b/src/_base/clear-button/src/ClearButton.vue index a574b9c90..bc2bcdd66 100644 --- a/src/_base/clear-button/src/ClearButton.vue +++ b/src/_base/clear-button/src/ClearButton.vue @@ -19,14 +19,9 @@ > - +
- +
diff --git a/src/_base/clear-button/src/styles/themed-base.cssr.js b/src/_base/clear-button/src/styles/themed-base.cssr.js index 1e060cb6f..55bae345c 100644 --- a/src/_base/clear-button/src/styles/themed-base.cssr.js +++ b/src/_base/clear-button/src/styles/themed-base.cssr.js @@ -1,4 +1,4 @@ -import { cTB, c, cB, cE } from '../../../../_utils/cssr' +import { cTB, c, cE } from '../../../../_utils/cssr' import createIconSwitchTransition from '../../../../_styles/transitions/icon-switch' export default c([ @@ -34,7 +34,10 @@ export default c([ color: colorPressed }) ]), - cB('icon', { + cE('placeholder', { + display: 'flex' + }), + cE('clear, placeholder', { position: 'absolute', left: '50%', top: '50%', diff --git a/src/_base/index.js b/src/_base/index.js index f81826892..23ba446e9 100644 --- a/src/_base/index.js +++ b/src/_base/index.js @@ -3,7 +3,6 @@ export { default as NFadeInExpandTransition } from './fade-in-expand-transition' export { default as NBaseFocusDetector } from './focus-detector' export { default as NBaseLoading } from './loading' export { default as NBaseSelectMenu } from './select-menu' -export { default as NBaseSuffix } from './suffix' export { default as NBaseWave } from './wave' export { default as NBaseMenuMask } from './menu-mask' export { default as NBaseSelection } from './selection' diff --git a/src/_base/select-menu/src/styles/themed-base.cssr.js b/src/_base/select-menu/src/styles/themed-base.cssr.js index 69576c1b9..bc475d463 100644 --- a/src/_base/select-menu/src/styles/themed-base.cssr.js +++ b/src/_base/select-menu/src/styles/themed-base.cssr.js @@ -156,11 +156,12 @@ export default c([ transform: 'rotate(45deg) scale(1)' }) ]), + // TODO: use SVG icon c('&::after', { raw: ` content: ''; - height: 6px; - width: 3px; + height: 8px; + width: 4px; position: absolute; right: 14px; transform: rotate(45deg) scale(.5); diff --git a/src/_base/selection/src/Selection.vue b/src/_base/selection/src/Selection.vue index 284740b17..d4358e1a2 100644 --- a/src/_base/selection/src/Selection.vue +++ b/src/_base/selection/src/Selection.vue @@ -37,16 +37,17 @@ > {{ option.label }} - + > + + + +
{{ placeholder }} @@ -90,16 +91,17 @@ class="n-base-selection-input-tag__mirror" >{{ pattern ? pattern : ' ' }}
- + > + + + +
{{ placeholder }} @@ -136,16 +138,17 @@ > {{ filterablePlaceholder }}
- + > + + + +
@@ -184,7 +188,8 @@ diff --git a/src/_base/suffix/src/styles/index.js b/src/_base/suffix/src/styles/index.js deleted file mode 100644 index d502e3f3f..000000000 --- a/src/_base/suffix/src/styles/index.js +++ /dev/null @@ -1,9 +0,0 @@ -import baseStyle from './themed-base.cssr' - -export default [ - { - key: 'theme', - watch: ['theme'], - CNode: baseStyle - } -] diff --git a/src/_base/suffix/src/styles/themed-base.cssr.js b/src/_base/suffix/src/styles/themed-base.cssr.js deleted file mode 100644 index ccdde82a1..000000000 --- a/src/_base/suffix/src/styles/themed-base.cssr.js +++ /dev/null @@ -1,135 +0,0 @@ -import { cTB, c, cB, cM, insideFormItem, createKey } from '../../../../_utils/cssr' -import fadeInScaleUpTransition from '../../../../_styles/transitions/fade-in-scale-up' -import createIconSwitchTransition from '../../../../_styles/transitions/icon-switch' - -function styleInsideFormItem (status, $local) { - return insideFormItem(status, cTB('base-suffix', [ - cB('base-suffix-cross', [ - c('&:hover', [ - c('svg', { - color: $local[createKey('crossColorHover', status)] - }) - ]), - c('&:active', [ - c('svg', { - color: $local[createKey('crossColorPressed', status)] - }) - ]) - ]), - cB('base-suffix-arrow', [ - cM('active', { - color: $local[createKey('arrowColorActive', status)] - }) - ]) - ])) -} - -export default c([ - ({ props }) => { - const { - $global: { - transformDebounceScale, - cubicBezierEaseInOut - }, - $local: { - iconSize, - crossColor, - crossColorHover, - crossColorPressed, - arrowColor, - arrowColorActive, - arrowColorDisabled - } - } = props - const iconSwitchTransition = createIconSwitchTransition() - return [ - cTB('base-suffix', { - raw: ` - user-select: none; - display: inline-block; - position: relative; - height: ${iconSize}; - width: ${iconSize}; - vertical-align: bottom; - ` - }, [ - fadeInScaleUpTransition(), - cB('base-suffix-spin', { - transform: transformDebounceScale, - raw: ` - position: absolute; - height: ${iconSize}; - width: ${iconSize}; - ` - }, [ - iconSwitchTransition - ]), - cB('base-suffix-cross', { - transform: transformDebounceScale, - raw: ` - position: absolute; - height: ${iconSize}; - width: ${iconSize}; - line-height: ${iconSize}; - border-radius: 8px; - overflow: hidden; - cursor: pointer; - ` - }, [ - iconSwitchTransition, - c('svg', { - transition: `color .3s ${cubicBezierEaseInOut}`, - color: crossColor - }), - c('&:hover', [ - c('svg', { - color: crossColorHover - }) - ]), - c('&:active', [ - c('svg', { - color: crossColorPressed - }) - ]) - ]), - cB('base-suffix-arrow', { - transform: transformDebounceScale, - raw: ` - position: absolute; - transform: rotate(0); - width: ${iconSize}; - height: ${iconSize}; - border-radius: 8px; - overflow: hidden; - color: ${arrowColor}; - cursor: pointer; - font-size: ${iconSize}; - line-height: 0; - transform-origin: 0 0; - transition: color .3s ${cubicBezierEaseInOut}; - ` - }, [ - iconSwitchTransition, - c('svg', { - transition: `transform .3s ${cubicBezierEaseInOut}`, - width: '1em', - height: '1em' - }), - cM('active', { - color: arrowColorActive - }, [ - c('svg', { - transform: 'rotate(180deg)' - }) - ]), - cM('disabled', { - cursor: 'not-allowed', - color: arrowColorDisabled - }) - ]) - ]), - styleInsideFormItem('warning', props.$local), - styleInsideFormItem('error', props.$local) - ] - } -]) diff --git a/src/_base/suffix/styles/_common.js b/src/_base/suffix/styles/_common.js deleted file mode 100644 index 8285e1094..000000000 --- a/src/_base/suffix/styles/_common.js +++ /dev/null @@ -1,3 +0,0 @@ -export default { - iconSize: '14px' -} diff --git a/src/_base/suffix/styles/dark.js b/src/_base/suffix/styles/dark.js deleted file mode 100644 index d89d7af3b..000000000 --- a/src/_base/suffix/styles/dark.js +++ /dev/null @@ -1,33 +0,0 @@ -import create from '../../../_styles/utils/create-component-base' -import commonVariables from './_common' - -export default create({ - name: 'BaseSuffix', - theme: 'dark', - getLocalVars (vars) { - return { - ...commonVariables, - crossColor: vars.textColor4Overlay, - crossColorHover: vars.primaryColorHover, - crossColorPressed: vars.primaryColorPressed, - arrowColor: vars.textColor4Overlay, - arrowColorHover: vars.primaryColorHover, - arrowColorActive: vars.primaryColorHover, - arrowColorDisabled: vars.textColor5Overlay, - crossColorWarning: vars.warningColor, - crossColorHoverWarning: vars.warningColorHover, - crossColorPressedWarning: vars.warningColorPressed, - arrowColorWarning: vars.warningColor, - arrowColorHoverWarning: vars.warningColorHover, - arrowColorActiveWarning: vars.warningColorHover, - arrowColorDisabledWarning: vars.textColor5Overlay, - crossColorError: vars.errorColor, - crossColorHoverError: vars.errorColorHover, - crossColorPressedError: vars.errorColorPressed, - arrowColorError: vars.errorColor, - arrowColorHoverError: vars.errorColorHover, - arrowColorActiveError: vars.errorColorHover, - arrowColorDisabledError: vars.textColor5Overlay - } - } -}) diff --git a/src/_base/suffix/styles/index.js b/src/_base/suffix/styles/index.js deleted file mode 100644 index eb3524fea..000000000 --- a/src/_base/suffix/styles/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export { default as baseSuffixLight } from './light' -export { default as baseSuffixDark } from './dark' diff --git a/src/_base/suffix/styles/light.js b/src/_base/suffix/styles/light.js deleted file mode 100644 index 1ed6aff04..000000000 --- a/src/_base/suffix/styles/light.js +++ /dev/null @@ -1,33 +0,0 @@ -import create from '../../../_styles/utils/create-component-base' -import commonVariables from './_common' - -export default create({ - name: 'BaseSuffix', - theme: 'light', - getLocalVars (vars) { - return { - ...commonVariables, - crossColor: vars.textColor4Overlay, - crossColorHover: vars.primaryColorHover, - crossColorPressed: vars.primaryColorPressed, - arrowColor: vars.textColor4Overlay, - arrowColorHover: vars.primaryColorHover, - arrowColorActive: vars.primaryColorHover, - arrowColorDisabled: vars.textColor5, - crossColorWarning: vars.warningColor, - crossColorHoverWarning: vars.warningColorHover, - crossColorPressedWarning: vars.warningColorPressed, - arrowColorWarning: vars.warningColor, - arrowColorHoverWarning: vars.warningColorHover, - arrowColorActiveWarning: vars.warningColorHover, - ArrowColorDisabledWarning: vars.textColor5, - crossColorError: vars.errorColor, - crossColorHoverError: vars.errorColorHover, - crossColorPressedError: vars.errorColorPressed, - arrowColorError: vars.errorColor, - arrowColorHoverError: vars.errorColorHover, - arrowColorActiveError: vars.errorColorHover, - arrowColorDisabledError: vars.textColor5 - } - } -}) diff --git a/src/styles.js b/src/styles.js index 2436218e5..7e6e36650 100644 --- a/src/styles.js +++ b/src/styles.js @@ -1,4 +1,8 @@ // unified entry for styles +export { + baseClearButtonDark, + baseClearButtonLight +} from './_base/clear-button/styles' export { baseLoadingDark, baseLoadingLight } from './_base/loading/styles' export { baseMenuMaskDark, baseMenuMaskLight } from './_base/menu-mask/styles' export { baseSelectionDark, baseSelectionLight } from './_base/selection/styles' @@ -10,7 +14,6 @@ export { baseSlotMachineDark, baseSlotMachineLight } from './_base/slot-machine/styles' -export { baseSuffixDark, baseSuffixLight } from './_base/suffix/styles' export { baseWaveDark, baseWaveLight } from './_base/wave/styles' // exposed style export { baseDark, baseLight } from './_styles/base'