From 0832415f558df3c8e29863b8b8b28a7ec1a677dd Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Thu, 7 Jan 2021 16:14:53 +0800 Subject: [PATCH] refactor(slider): new theme --- src/slider/src/Slider.vue | 97 +++++++++-- src/slider/src/styles/index.cssr.js | 170 +++++++++++++++++++ src/slider/src/styles/index.js | 9 - src/slider/src/styles/themed-base.cssr.js | 198 ---------------------- src/slider/styles/dark.js | 12 +- src/slider/styles/light.js | 12 +- src/styles.js | 4 +- src/styles.new.js | 4 +- 8 files changed, 267 insertions(+), 239 deletions(-) create mode 100644 src/slider/src/styles/index.cssr.js delete mode 100644 src/slider/src/styles/index.js delete mode 100644 src/slider/src/styles/themed-base.cssr.js diff --git a/src/slider/src/Slider.vue b/src/slider/src/Slider.vue index 7237c427b..7d2d03d50 100644 --- a/src/slider/src/Slider.vue +++ b/src/slider/src/Slider.vue @@ -4,9 +4,9 @@ :class="{ 'n-slider--disabled': disabled, 'n-slider--active': active, - 'n-slider--with-mark': marks, - [`n-${mergedTheme}-theme`]: mergedTheme + 'n-slider--with-mark': marks }" + :style="cssVars" @keydown.right="handleKeyDownRight" @keydown.left="handleKeyDownLeft" > @@ -61,9 +61,7 @@
{{ handleValue1 }}
@@ -99,9 +97,7 @@
{{ handleValue2 }}
@@ -122,13 +118,14 @@ diff --git a/src/slider/src/styles/index.cssr.js b/src/slider/src/styles/index.cssr.js new file mode 100644 index 000000000..63c3307e5 --- /dev/null +++ b/src/slider/src/styles/index.cssr.js @@ -0,0 +1,170 @@ +import { cB, c, cM, cE, insideModal } from '../../../_utils/cssr' +import fadeInScaleUpTransition from '../../../_styles/transitions/fade-in-scale-up' + +// vars: +// --bezier +// --dot-border +// --dot-border-active +// --dot-border-radius +// --dot-box-shadow +// --dot-color +// --dot-color-modal +// --dot-height +// --dot-width +// --fill-color +// --fill-color-hover +// --font-size +// --handle-box-shadow +// --handle-box-shadow-active +// --handle-box-shadow-focus +// --handle-box-shadow-hover +// --handle-color +// --handle-size +// --indicator-border-radius +// --indicator-box-shadow +// --indicator-color +// --indicator-text-color +// --rail-color +// --rail-color-hover +// --rail-height +export default c([ + cB('slider', ` + display: block; + padding: calc((var(--handle-size) - var(--rail-height)) / 2) 0; + position: relative; + z-index: 0; + width: 100%; + cursor: pointer; + `, [ + cB('slider-marks', ` + position: absolute; + top: 18px; + left: calc(var(--handle-size) / 2); + right: calc(var(--handle-size) / 2); + `, [ + cB('slider-mark', { + position: 'absolute', + transform: 'translateX(-50%)' + }) + ]), + cM('with-mark', ` + width: 100%; + margin: 8px 0 32px 0; + `), + c('&:hover', [ + cB('slider-rail', { + backgroundColor: 'var(--rail-color-hover)' + }, [ + cE('fill', { + backgroundColor: 'var(--fill-color-hover)' + }) + ]), + cB('slider-handle', { + boxShadow: 'var(--handle-box-shadow-hover)' + }) + ]), + cM('active', [ + cB('slider-rail', { + backgroundColor: 'var(--rail-color-hover)' + }, [ + cE('fill', { + backgroundColor: 'var(--fill-color-hover)' + }) + ]), + cB('slider-handle', { + boxShadow: 'var(--handle-box-shadow-hover)' + }) + ]), + cB('slider-rail', ` + width: 100%; + position: relative; + height: var(--rail-height); + background-color: var(--rail-color); + transition: background-color .3s var(--bezier); + border-radius: calc(var(--rail-height) / 2); + `, [ + cE('fill', ` + position: absolute; + top: 0; + bottom: 0; + border-radius: calc(var(--rail-height) / 2); + transition: background-color .3s var(--bezier); + background-color: var(--fill-color); + `) + ]), + cB('slider-handle', ` + outline: none; + height: var(--handle-size); + width: var(--handle-size); + border-radius: 50%; + transition: box-shadow .2s var(--bezier), background-color .3s var(--bezier); + position: absolute; + top: 0; + transform: translateX(-50%); + overflow: hidden; + cursor: pointer; + background-color: var(--handle-color); + box-shadow: var(--handle-box-shadow); + `, [ + c('&:hover', { + boxShadow: 'var(--handle-box-shadow-hover)' + }), + c('&:hover:focus', { + boxShadow: 'var(--handle-box-shadow-active)' + }), + c('&:focus', { + boxShadow: 'var(--handle-box-shadow-focus)' + }) + ]), + cB('slider-dots', ` + position: absolute; + top: 50%; + left: calc(var(--handle-size) / 2); + right: calc(var(--handle-size) / 2); + `, [ + cM('transition-disabled', [ + cB('slider-dot', { + transition: 'none' + }) + ]), + cB('slider-dot', ` + transition: + border-color .3s var(--bezier), + box-shadow .3s var(--bezier), + background-color .3s var(--bezier); + position: absolute; + transform: translateX(-50%) translateY(-50%); + height: var(--dot-height); + width: var(--dot-width); + border-radius: var(--dot-border-radius); + overflow: hidden; + box-sizing: border-box; + border: var(--dot-border); + background-color: var(--dot-color); + box-shadow: var(--dot-box-shadow); + `, [ + cM('active', { + border: 'var(--dot-border-active)' + }) + ]) + ]) + ]), + cB('slider-handle-indicator', ` + font-size: var(--font-size); + padding: 8px 12px; + margin-bottom: 12px; + border-radius: var(--indicator-border-radius); + color: var(--indicator-text-color); + background-color: var(--indicator-color); + box-shadow: var(--indicator-box-shadow); + `, [ + fadeInScaleUpTransition() + ]), + insideModal( + cB('slider', [ + cB('slider-dot', { + backgroundColor: 'var(--dot-color-modal)' + }) + ]) + ) +]) diff --git a/src/slider/src/styles/index.js b/src/slider/src/styles/index.js deleted file mode 100644 index fd9338f5d..000000000 --- a/src/slider/src/styles/index.js +++ /dev/null @@ -1,9 +0,0 @@ -import baseStyle from './themed-base.cssr.js' - -export default [ - { - key: 'mergedTheme', - watch: ['mergedTheme'], - CNode: baseStyle - } -] diff --git a/src/slider/src/styles/themed-base.cssr.js b/src/slider/src/styles/themed-base.cssr.js deleted file mode 100644 index 0a5f77b1c..000000000 --- a/src/slider/src/styles/themed-base.cssr.js +++ /dev/null @@ -1,198 +0,0 @@ -import { cTB, c, cB, cM, cE, insideModal } from '../../../_utils/cssr' -import fadeInScaleUpTransition from '../../../_styles/transitions/fade-in-scale-up' -import { depx, pxfy } from 'seemly' - -export default c([ - ({ props }) => { - const { - $local: { - railColor, - railColorHover, - fillColor, - fillColorHover, - handleColor, - dotColor, - dotColorModal, - handleBoxShadow, - handleBoxShadowHover, - handleBoxShadowActive, - handleBoxShadowFocus, - indicatorColor, - indicatorBoxShadow, - indicatorTextColor, - dotBorder, - dotBoxShadow, - railHeight, - handleSize, - dotHeight, - dotWidth, - dotBorderRadius, - indicatorBorderRadius, - fontSize, - dotBorderActive - }, - $global: { - cubicBezierEaseInOut, - transformDebounceScale - } - } = props - return [ - cTB('slider', { - raw: ` - display: block; - padding: calc((${handleSize} - ${railHeight}) / 2) 0; - position: relative; - z-index: 0; - width: 100%; - cursor: pointer; - ` - }, [ - cB('slider-marks', { - raw: ` - position: absolute; - top: 18px; - left: calc(${handleSize} / 2); - right: calc(${handleSize} / 2); - ` - }, [ - cB('slider-mark', { - position: 'absolute', - transform: 'translateX(-50%)' - }) - ]), - cM('with-mark', { - raw: ` - width: 100%; - margin: 8px 0 32px 0; - ` - }), - c('&:hover', [ - cB('slider-rail', { - backgroundColor: railColorHover - }, [ - cE('fill', { - backgroundColor: fillColorHover - }) - ]), - cB('slider-handle', { - boxShadow: handleBoxShadowHover - }) - ]), - cM('active', [ - cB('slider-rail', { - backgroundColor: railColorHover - }, [ - cE('fill', { - backgroundColor: fillColorHover - }) - ]), - cB('slider-handle', { - boxShadow: handleBoxShadowHover - }) - ]), - cB('slider-rail', { - width: '100%', - position: 'relative', - height: railHeight, - backgroundColor: railColor, - transition: `background-color .3s ${cubicBezierEaseInOut}`, - borderRadius: pxfy(depx(railHeight) / 2) - }, [ - cE('fill', { - raw: ` - position: absolute; - top: 0; - bottom: 0; - border-radius: ${pxfy(depx(railHeight) / 2)}; - transition: background-color .3s ${cubicBezierEaseInOut}; - `, - backgroundColor: fillColor - }) - ]), - cB('slider-handle', { - raw: ` - outline: none; - height: ${handleSize}; - width: ${handleSize}; - border-radius: 50%; - transition: box-shadow .2s ${cubicBezierEaseInOut}, background-color .3s ${cubicBezierEaseInOut}; - position: absolute; - top: 0; - transform: translateX(-50%); - overflow: hidden; - cursor: pointer; - `, - backgroundColor: handleColor, - boxShadow: handleBoxShadow - }, [ - c('&:hover', { - boxShadow: handleBoxShadowHover - }), - c('&:hover:focus', { - boxShadow: handleBoxShadowActive - }), - c('&:focus', { - boxShadow: handleBoxShadowFocus - }) - ]), - cB('slider-dots', { - raw: ` - position: absolute; - top: 50%; - left: calc(${handleSize} / 2); - right: calc(${handleSize} / 2); - ` - }, [ - cM('transition-disabled', [ - cB('slider-dot', { - transition: 'none' - }) - ]), - cB('slider-dot', { - raw: ` - transition: - border-color .3s ${cubicBezierEaseInOut}, - box-shadow .3s ${cubicBezierEaseInOut}, - background-color .3s ${cubicBezierEaseInOut}; - position: absolute; - transform: translateX(-50%) translateY(-50%); - height: ${dotHeight}; - width: ${dotWidth}; - border-radius: ${dotBorderRadius}; - overflow: hidden; - box-sizing: border-box; - `, - border: dotBorder, - backgroundColor: dotColor, - boxShadow: dotBoxShadow - }, [ - cM('active', { - border: dotBorderActive - }) - ]) - ]) - ]), - cTB('slider-handle-indicator', { - raw: ` - transform: ${transformDebounceScale}; - font-size: ${fontSize}; - padding: 8px 12px; - margin-bottom: 12px; - `, - borderRadius: indicatorBorderRadius, - color: indicatorTextColor, - backgroundColor: indicatorColor, - boxShadow: indicatorBoxShadow - }, [ - fadeInScaleUpTransition() - ]), - insideModal( - cTB('slider', [ - cB('slider-dot', { - backgroundColor: dotColorModal - }) - ]) - ) - ] - } -]) diff --git a/src/slider/styles/dark.js b/src/slider/styles/dark.js index 01e89c807..133ca4d87 100644 --- a/src/slider/styles/dark.js +++ b/src/slider/styles/dark.js @@ -1,12 +1,10 @@ -import create from '../../_styles/utils/create-component-base' import sizeVariables from './_common' -import { baseDark } from '../../_styles/base' +import { commonDark } from '../../_styles/new-common' -export default create({ +export default { name: 'Slider', - theme: 'dark', - peer: [baseDark], - getLocalVars (vars) { + common: commonDark, + self (vars) { const boxShadow = '0 2px 8px 0 rgba(0, 0, 0, 0.12)' const { railColorOverlay, @@ -41,4 +39,4 @@ export default create({ dotBoxShadow: null } } -}) +} diff --git a/src/slider/styles/light.js b/src/slider/styles/light.js index 1b8140be2..ccfa0f059 100644 --- a/src/slider/styles/light.js +++ b/src/slider/styles/light.js @@ -1,12 +1,10 @@ -import create from '../../_styles/utils/create-component-base' import sizeVariables from './_common' -import { baseLight } from '../../_styles/base' +import { commonLight } from '../../_styles/new-common' -export default create({ +export default { name: 'Slider', - theme: 'light', - peer: [baseLight], - getLocalVars (vars) { + common: commonLight, + self (vars) { const indicatorColor = 'rgba(0, 0, 0, .85)' const boxShadow = '0 2px 8px 0 rgba(0, 0, 0, 0.12)' const { @@ -44,4 +42,4 @@ export default create({ dotBoxShadow: null } } -}) +} diff --git a/src/styles.js b/src/styles.js index d7acb610e..533244135 100644 --- a/src/styles.js +++ b/src/styles.js @@ -65,8 +65,8 @@ export { baseDark, baseLight } from './_styles/base' // export { rateDark, rateLight } from './rate/styles' // export { resultDark, resultLight } from './result/styles' // export { scrollbarDark, scrollbarLight } from './scrollbar/styles' -export { selectDark, selectLight } from './select/styles' -export { sliderDark, sliderLight } from './slider/styles' +// export { selectDark, selectLight } from './select/styles' +// export { sliderDark, sliderLight } from './slider/styles' export { spaceDark, spaceLight } from './space/styles' export { spinDark, spinLight } from './spin/styles' export { statisticDark, statisticLight } from './statistic/styles' diff --git a/src/styles.new.js b/src/styles.new.js index c288de5f0..3459bbd03 100644 --- a/src/styles.new.js +++ b/src/styles.new.js @@ -47,6 +47,7 @@ import { radioDark } from './radio/styles' import { rateDark } from './rate/styles' import { resultDark } from './result/styles' import { scrollbarDark } from './scrollbar/styles' +import { sliderDark } from './slider/styles' export const darkTheme = { common: commonDark, @@ -97,5 +98,6 @@ export const darkTheme = { Radio: radioDark, Rate: rateDark, Result: resultDark, - Scrollbar: scrollbarDark + Scrollbar: scrollbarDark, + Slider: sliderDark }