From dc5149dc50f57fc32adf280eecdb1c3364ac8c06 Mon Sep 17 00:00:00 2001 From: HaiboTang <42064613+gtangxiaobo@users.noreply.github.com> Date: Tue, 1 Sep 2020 15:24:25 +0800 Subject: [PATCH] feat(tree): css in js (#288) --- src/Tree/index.js | 8 - src/_styles/index.scss | 2 +- src/index.js | 6 +- src/tree/index.js | 8 + src/{Tree => tree}/src/Tree.js | 10 +- src/{Tree => tree}/src/TreeNode.js | 0 src/{Tree => tree}/src/TreeNodeCheckbox.vue | 0 src/{Tree => tree}/src/TreeNodeContent.vue | 0 src/{Tree => tree}/src/TreeNodeSwitcher.vue | 0 src/tree/src/styles/index.js | 11 + src/tree/src/styles/themed-base.cssr.js | 222 ++++++++++++++++++++ src/{Tree => tree}/src/utils.js | 0 src/tree/styles/dark.js | 33 +++ src/tree/styles/light.js | 33 +++ 14 files changed, 321 insertions(+), 12 deletions(-) delete mode 100644 src/Tree/index.js create mode 100644 src/tree/index.js rename src/{Tree => tree}/src/Tree.js (98%) rename src/{Tree => tree}/src/TreeNode.js (100%) rename src/{Tree => tree}/src/TreeNodeCheckbox.vue (100%) rename src/{Tree => tree}/src/TreeNodeContent.vue (100%) rename src/{Tree => tree}/src/TreeNodeSwitcher.vue (100%) create mode 100644 src/tree/src/styles/index.js create mode 100644 src/tree/src/styles/themed-base.cssr.js rename src/{Tree => tree}/src/utils.js (100%) create mode 100644 src/tree/styles/dark.js create mode 100644 src/tree/styles/light.js diff --git a/src/Tree/index.js b/src/Tree/index.js deleted file mode 100644 index 34e480b83..000000000 --- a/src/Tree/index.js +++ /dev/null @@ -1,8 +0,0 @@ -/* istanbul ignore file */ -import Tree from './src/Tree' - -Tree.install = function (Vue) { - Vue.component(Tree.name, Tree) -} - -export default Tree diff --git a/src/_styles/index.scss b/src/_styles/index.scss index 3d800062f..c8bd34b1d 100644 --- a/src/_styles/index.scss +++ b/src/_styles/index.scss @@ -28,5 +28,5 @@ @import './TimePicker.scss'; @import './Timeline.scss'; @import './Tooltip.scss'; -@import './Tree.scss'; +// @import './Tree.scss'; @import './Upload.scss'; \ No newline at end of file diff --git a/src/index.js b/src/index.js index f97ad5219..8b05fa114 100644 --- a/src/index.js +++ b/src/index.js @@ -65,7 +65,7 @@ import TimePicker from './TimePicker' import Timeline from './Timeline' import Tooltip from './Tooltip' import Transfer from './transfer' -import Tree from './Tree' +import Tree from './tree' import Typography from './typography' import Upload from './Upload' import zhCN from './locale/zhCN' @@ -176,6 +176,8 @@ import notificationLightStyle from './notification/styles/light' import notificationDarkStyle from './notification/styles/dark' import layoutDarkStyle from './layout/styles/dark' import layoutLightStyle from './layout/styles/light' +import treeLightStyle from './tree/styles/light' +import treeDarkStyle from './tree/styles/dark' // Can be remove after refactoring import baseSelectionLightStyle from './_base/selection/styles/light' @@ -381,6 +383,8 @@ export default create({ notificationDarkStyle, layoutDarkStyle, layoutLightStyle, + treeLightStyle, + treeDarkStyle, // Can be remove after refactoring baseSelectionLightStyle, baseSelectionDarkStyle diff --git a/src/tree/index.js b/src/tree/index.js new file mode 100644 index 000000000..695e5efd3 --- /dev/null +++ b/src/tree/index.js @@ -0,0 +1,8 @@ +/* istanbul ignore file */ +import Tree from './src/Tree' + +Tree.install = function (Vue, naive) { + Vue.component(naive.componentPrefix + Tree.name, Tree) +} + +export default Tree diff --git a/src/Tree/src/Tree.js b/src/tree/src/Tree.js similarity index 98% rename from src/Tree/src/Tree.js rename to src/tree/src/Tree.js index e9974b83c..dc3f9d88b 100644 --- a/src/Tree/src/Tree.js +++ b/src/tree/src/Tree.js @@ -3,6 +3,8 @@ import themeable from '../../_mixins/themeable' import NTreeNode from './TreeNode' import NFadeInHeightExpandTransition from '../../_transition/FadeInHeightExpandTransition' import { isLeaf, isLoaded, getAllKeys, keysWithFilter } from './utils' +import usecssr from '../../_mixins/usecssr' +import styles from './styles' function createNode (node, h, treeInstance) { const listeners = { @@ -54,8 +56,12 @@ function convertOptionsToVNodeTree (options, h, treeInstance) { } export default { - name: 'NTree', - mixins: [ withapp, themeable ], + name: 'Tree', + mixins: [ + withapp, + themeable, + usecssr(styles) + ], model: { prop: 'selected-keys', event: 'selected-keys-change' diff --git a/src/Tree/src/TreeNode.js b/src/tree/src/TreeNode.js similarity index 100% rename from src/Tree/src/TreeNode.js rename to src/tree/src/TreeNode.js diff --git a/src/Tree/src/TreeNodeCheckbox.vue b/src/tree/src/TreeNodeCheckbox.vue similarity index 100% rename from src/Tree/src/TreeNodeCheckbox.vue rename to src/tree/src/TreeNodeCheckbox.vue diff --git a/src/Tree/src/TreeNodeContent.vue b/src/tree/src/TreeNodeContent.vue similarity index 100% rename from src/Tree/src/TreeNodeContent.vue rename to src/tree/src/TreeNodeContent.vue diff --git a/src/Tree/src/TreeNodeSwitcher.vue b/src/tree/src/TreeNodeSwitcher.vue similarity index 100% rename from src/Tree/src/TreeNodeSwitcher.vue rename to src/tree/src/TreeNodeSwitcher.vue diff --git a/src/tree/src/styles/index.js b/src/tree/src/styles/index.js new file mode 100644 index 000000000..3b04bf0e9 --- /dev/null +++ b/src/tree/src/styles/index.js @@ -0,0 +1,11 @@ +import themedBaseStyle from './themed-base.cssr.js' + +export default [ + { + key: 'syntheticTheme', + watch: [ + 'syntheticTheme' + ], + CNode: themedBaseStyle + } +] diff --git a/src/tree/src/styles/themed-base.cssr.js b/src/tree/src/styles/themed-base.cssr.js new file mode 100644 index 000000000..b29e137be --- /dev/null +++ b/src/tree/src/styles/themed-base.cssr.js @@ -0,0 +1,222 @@ +import { c, cTB, cB, cE, cM } from '../../../_utils/cssr' +import fadeInHeightExpandTransition from '../../../styles/_transitions/fade-in-height-expand' +import iconSwitchTransition from '../../../styles/_transitions/icon-switch' + +export default c([ + ({ props }) => { + const { + easeInOutCubicBezier + } = props.$base + const { + color, + switcherColor, + contentTextColor, + smallBorderRadius + } = props.$local + return [ + cTB('tree', { + raw: ` + font-size: 14px; + ` + }, [ + c('ul, li', { + raw: ` + margin: 0; + padding: 0; + list-style: none; + ` + }), + cB('tree-children-wrapper', { + raw: ` + margin-left: 16px; + ` + }, [ + fadeInHeightExpandTransition({ duration: '0.15s' }) + ]), + cB('tree-node', { + raw: ` + padding: 3px 0 3px 0; + ` + }, [ + c('&:first-child', { + raw: ` + padding-top: 6px; + ` + }), + c('&:last-child', { + raw: ` + padding-top: 6px; + ` + }) + ]), + cB('tree-node-switcher', { + raw: ` + cursor: pointer; + display: inline-flex; + height: 24px; + width: 24px; + align-items: center; + justify-content: center; + transition: transform .15s ${easeInOutCubicBezier}; + vertical-align: bottom; + ` + }, [ + cE('icon', { + raw: ` + position: relative; + height: 14px; + width: 14px; + display: flex; + ` + }, [ + cB('icon', { + raw: ` + height: 14px; + width: 14px; + font-size: 14px; + fill: ${switcherColor}; + stroke: ${switcherColor}; + ` + }, [ + iconSwitchTransition() + ]), + cB('base-loading', { + raw: ` + position: absolute; + left: 1px; + top: 1px; + height: 12px; + width: 12px; + ` + }, [ + iconSwitchTransition({ left: '1px', top: '1px' }) + ]) + ]), + cM('hide', { + raw: ` + visibility: hidden + ` + }), + cM('expanded', { + raw: ` + transform: rotate(90deg); + ` + }) + ]), + cB('tree-node-checkbox', { + raw: ` + display: inline-flex; + height: 24px; + width: 16px; + vertical-align: bottom; + align-items: center; + justify-content: center; + margin-right: 4px; + ` + }), + cB('tree-node-content', { + raw: ` + position: relative; + display: inline-flex; + height: 24px; + box-sizing: border-box; + border-bottom: 3px solid transparent; + border-top: 3px solid transparent; + line-height: 24px; + align-items: center; + vertical-align: bottom; + padding: 0 6px; + cursor: pointer; + border-radius: ${smallBorderRadius}; + text-decoration-color: transparent; + text-decoration-line: underline; + color: ${contentTextColor.default}; + transition: + color .3s ${easeInOutCubicBezier}, + text-decoration-color .3s ${easeInOutCubicBezier}, + background-color .3s ${easeInOutCubicBezier}, + border-color .3s ${easeInOutCubicBezier}; + ` + }, [ + c('&:last-child', { + raw: ` + margin-bottom: 0; + ` + }), + cE('padding-box', { + raw: ` + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + background-color: transparent; + ` + }), + cE('text', { + raw: ` + line-height: 1.25; + border-bottom: 1px solid transparent; + transition: border-color .3s ${easeInOutCubicBezier}; + ` + }), + cM('block', { + raw: ` + width: calc(100% - 24px); + ` + }, [ + cM('checkable', { + raw: ` + width: calc(100% - 48px); + ` + }) + ]), + c('&:hover', { + raw: ` + background-color: ${color.hover}; + ` + }), + c('&:active', { + raw: ` + background-color: ${color.active}; + ` + }), + cM('hightlight', [ + cE('text', { + raw: ` + border-bottom-color: ${contentTextColor.default}; + ` + }) + ]), + cM('pending', [ + c('&:hover', { + raw: ` + background-color: transparent; + ` + }), + cM('pending-bottom', { + raw: ` + border-bottom: 3px solid ${color.hover}; + ` + }), + cM('pending-top', { + raw: ` + border-top: 3px solid ${color.hover}; + ` + }), + cM('pending-body', { + raw: ` + background-color: ${color.hover}; + ` + }) + ]), + cM('selected', { + raw: ` + background-color: ${color.selected}; + ` + }) + ]) + ]) + ] + } +]) diff --git a/src/Tree/src/utils.js b/src/tree/src/utils.js similarity index 100% rename from src/Tree/src/utils.js rename to src/tree/src/utils.js diff --git a/src/tree/styles/dark.js b/src/tree/styles/dark.js new file mode 100644 index 000000000..917cc4933 --- /dev/null +++ b/src/tree/styles/dark.js @@ -0,0 +1,33 @@ +import create from '../../styles/_utils/create-component-base' +import { changeColor } from '../../_utils/color' + +export default create({ + theme: 'dark', + name: 'Tree', + getDerivedVariables ({ base, derived }) { + const { + smallBorderRadius + } = base + const { + pendingBackgroundOverlayColor, + activeBackgroundOverlayColor, + primaryColor, + tertiaryTextOverlayColor, + secondaryTextOverlayColor, + disabledTextOverlayColor + } = derived + return { + smallBorderRadius, + color: { + hover: pendingBackgroundOverlayColor, + active: activeBackgroundOverlayColor, + selected: changeColor(primaryColor, { alpha: 0.15 }) + }, + switchColor: tertiaryTextOverlayColor, + contentTextColor: { + default: secondaryTextOverlayColor, + disabled: disabledTextOverlayColor + } + } + } +}) diff --git a/src/tree/styles/light.js b/src/tree/styles/light.js new file mode 100644 index 000000000..de9a55933 --- /dev/null +++ b/src/tree/styles/light.js @@ -0,0 +1,33 @@ +import create from '../../styles/_utils/create-component-base' +import { changeColor } from '../../_utils/color' + +export default create({ + theme: 'light', + name: 'Tree', + getDerivedVariables ({ base, derived }) { + const { + smallBorderRadius + } = base + const { + pendingBackgroundOverlayColor, + activeBackgroundOverlayColor, + primaryColor, + tertiaryTextColor, + secondaryTextColor, + disabledTextColor + } = derived + return { + smallBorderRadius, + color: { + hover: pendingBackgroundOverlayColor, + active: activeBackgroundOverlayColor, + selected: changeColor(primaryColor, { alpha: 0.1 }) + }, + switchColor: tertiaryTextColor, + contentTextColor: { + default: secondaryTextColor, + disabled: disabledTextColor + } + } + } +})