From 1d5907052b534fc0084b2fb1453d0b2dff43c41d Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Tue, 13 Jun 2023 23:47:53 +0800 Subject: [PATCH] refactor(tree): show-line --- demo/pages/docs/ssr/enUS/index.md | 2 +- demo/pages/docs/ssr/zhCN/index.md | 2 +- jest.config.js | 3 +- scripts/post-build/index.js | 4 +- scripts/pre-build/pre-cjs-build.js | 3 +- src/checkbox/src/Checkbox.tsx | 22 ++- src/checkbox/src/styles/index.cssr.ts | 25 ++-- src/descriptions/src/Descriptions.tsx | 7 +- src/descriptions/tests/Descriptions.spec.ts | 4 +- src/locales/__snapshots__/index.spec.tsx.snap | 2 +- src/select/src/interface.ts | 2 + src/time-picker/src/TimePicker.tsx | 2 +- src/time/src/Time.ts | 2 +- src/tree/demos/enUS/index.demo-entry.md | 2 +- src/tree/demos/zhCN/index.demo-entry.md | 2 +- src/tree/src/Tree.tsx | 41 +++--- src/tree/src/TreeNode.tsx | 79 ++++++++-- src/tree/src/TreeNodeCheckbox.tsx | 8 + src/tree/src/TreeNodeSwitcher.tsx | 10 +- src/tree/src/interface.ts | 1 + src/tree/src/styles/index.cssr.ts | 137 ++++++++---------- src/tree/styles/light.ts | 3 + vite.config.js | 2 +- 23 files changed, 211 insertions(+), 154 deletions(-) diff --git a/demo/pages/docs/ssr/enUS/index.md b/demo/pages/docs/ssr/enUS/index.md index 6f30020a2..8564b8307 100644 --- a/demo/pages/docs/ssr/enUS/index.md +++ b/demo/pages/docs/ssr/enUS/index.md @@ -35,7 +35,7 @@ export default defineNuxtConfig({ optimizeDeps: { include: process.env.NODE_ENV === 'development' - ? ['naive-ui', 'vueuc', 'date-fns-tz/esm/formatInTimeZone'] + ? ['naive-ui', 'vueuc', 'date-fns-tz/formatInTimeZone'] : [] } } diff --git a/demo/pages/docs/ssr/zhCN/index.md b/demo/pages/docs/ssr/zhCN/index.md index dc55da174..e40fd0009 100644 --- a/demo/pages/docs/ssr/zhCN/index.md +++ b/demo/pages/docs/ssr/zhCN/index.md @@ -35,7 +35,7 @@ export default defineNuxtConfig({ optimizeDeps: { include: process.env.NODE_ENV === 'development' - ? ['naive-ui', 'vueuc', 'date-fns-tz/esm/formatInTimeZone'] + ? ['naive-ui', 'vueuc', 'date-fns-tz/formatInTimeZone'] : [] } } diff --git a/jest.config.js b/jest.config.js index 8424e6e8a..80472957e 100644 --- a/jest.config.js +++ b/jest.config.js @@ -68,8 +68,7 @@ module.exports = { // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module moduleNameMapper: { '^lodash-es$': 'lodash', - '^date-fns/esm(.*)$': 'date-fns$1', - '^date-fns-tz/esm(.*)$': 'date-fns-tz$1' + '^date-fns/esm(.*)$': 'date-fns$1' }, // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader diff --git a/scripts/post-build/index.js b/scripts/post-build/index.js index 4d784e03b..a4140c4eb 100644 --- a/scripts/post-build/index.js +++ b/scripts/post-build/index.js @@ -15,9 +15,7 @@ const { genWebTypes } = require('./gen-web-types') // the sequence is crucial "'lodash'": "'lodash-es'", "'date-fns/(.*)'//": "'date-fns/esm/$1'", - "'date-fns-tz/(.*)'//": "'date-fns-tz/esm/$1'", - "'date-fns'//": "'date-fns/esm'", - "'date-fns-tz'//": "'date-fns-tz/esm'" + "'date-fns'//": "'date-fns/esm'" }) // generate web-types.json for webstorm & vetur diff --git a/scripts/pre-build/pre-cjs-build.js b/scripts/pre-build/pre-cjs-build.js index 203f79d6e..fffe2571e 100644 --- a/scripts/pre-build/pre-cjs-build.js +++ b/scripts/pre-build/pre-cjs-build.js @@ -4,7 +4,6 @@ const { replaceDefine, srcDir } = require('../utils') ;(async () => { await replaceDefine([srcDir], { "'lodash-es'": "'lodash'", - "'date-fns/esm(.*)'": "'date-fns$1'//", - "'date-fns-tz/esm(.*)'": "'date-fns-tz$1'//" + "'date-fns/esm(.*)'": "'date-fns$1'//" }) })() diff --git a/src/checkbox/src/Checkbox.tsx b/src/checkbox/src/Checkbox.tsx index f2f9e1bcf..4f4fbcc21 100644 --- a/src/checkbox/src/Checkbox.tsx +++ b/src/checkbox/src/Checkbox.tsx @@ -20,7 +20,8 @@ import { createKey, type MaybeArray, type ExtractPublicPropTypes, - warnOnce + warnOnce, + resolveWrappedSlot } from '../../_utils' import { checkboxLight } from '../styles' import type { CheckboxTheme } from '../styles' @@ -325,6 +326,16 @@ export default defineComponent({ handleClick } = this this.onRender?.() + const labelNode = resolveWrappedSlot($slots.default, (children) => { + if (label || children) { + return ( + + {label || children} + + ) + } + return null + }) return ( - {label !== null || $slots.default ? ( - - {$slots.default ? $slots.default() : label} - - ) : null} + {labelNode} ) } diff --git a/src/checkbox/src/styles/index.cssr.ts b/src/checkbox/src/styles/index.cssr.ts index 7c87e2fdf..6618dc962 100644 --- a/src/checkbox/src/styles/index.cssr.ts +++ b/src/checkbox/src/styles/index.cssr.ts @@ -27,7 +27,6 @@ import { iconSwitchTransition } from '../../../_styles/transitions/icon-switch.c // --n-label-padding export default c([ cB('checkbox', ` - line-height: var(--n-label-line-height); font-size: var(--n-font-size); outline: none; cursor: pointer; @@ -35,13 +34,13 @@ export default c([ flex-wrap: nowrap; align-items: flex-start; word-break: break-word; + line-height: var(--n-size); --n-merged-color-table: var(--n-color-table); `, [ + cM('show-label', 'line-height: var(--n-label-line-height);'), c('&:hover', [ cB('checkbox-box', [ - cE('border', { - border: 'var(--n-border-checked)' - }) + cE('border', 'border: var(--n-border-checked);') ]) ]), c('&:focus:not(:active)', [ @@ -123,18 +122,18 @@ export default c([ cB('checkbox-box', ` background-color: var(--n-color-disabled); `, [ - cE('border', { - border: 'var(--n-border-disabled)' - }), + cE('border', ` + border: var(--n-border-disabled); + `), cB('checkbox-icon', [ - c('.check-icon, .line-icon', { - fill: 'var(--n-check-mark-color-disabled)' - }) + c('.check-icon, .line-icon', ` + fill: var(--n-check-mark-color-disabled); + `) ]) ]), - cE('label', { - color: 'var(--n-text-color-disabled)' - }) + cE('label', ` + color: var(--n-text-color-disabled); + `) ]), cB('checkbox-box-wrapper', ` position: relative; diff --git a/src/descriptions/src/Descriptions.tsx b/src/descriptions/src/Descriptions.tsx index 03d45d703..f2ee2ba51 100644 --- a/src/descriptions/src/Descriptions.tsx +++ b/src/descriptions/src/Descriptions.tsx @@ -314,12 +314,7 @@ export default defineComponent({ visibility: 'collapse' }} > - {repeat( - compitableColumn * 2, - - )} + {repeat(compitableColumn * 2, )} )} {rows} diff --git a/src/descriptions/tests/Descriptions.spec.ts b/src/descriptions/tests/Descriptions.spec.ts index 0a2cf895f..d3709f51c 100644 --- a/src/descriptions/tests/Descriptions.spec.ts +++ b/src/descriptions/tests/Descriptions.spec.ts @@ -61,12 +61,12 @@ describe('n-descriptions', () => { }) expect( wrapper.find('.n-descriptions-table-row').element.childNodes.length - ).toBe(3) + ).toBe(6) // 3 * 2 await wrapper.setProps({ column: 4 }) expect( wrapper.find('.n-descriptions-table-row').element.childNodes.length - ).toBe(4) + ).toBe(8) // 4 * 2 wrapper.unmount() }) diff --git a/src/locales/__snapshots__/index.spec.tsx.snap b/src/locales/__snapshots__/index.spec.tsx.snap index 5e5aa91dc..26c46b23a 100644 --- a/src/locales/__snapshots__/index.spec.tsx.snap +++ b/src/locales/__snapshots__/index.spec.tsx.snap @@ -2357,7 +2357,7 @@ exports[`locale works 17`] = `
-
+
diff --git a/src/select/src/interface.ts b/src/select/src/interface.ts index 1f137fda0..d29de0583 100644 --- a/src/select/src/interface.ts +++ b/src/select/src/interface.ts @@ -86,6 +86,8 @@ export type SelectGroupOption = export interface SelectInst { focus: () => void blur: () => void + focusInput: () => void + blurInput: () => void } export type SelectFallbackOption = (value: string & number) => SelectOption diff --git a/src/time-picker/src/TimePicker.tsx b/src/time-picker/src/TimePicker.tsx index 5d88722f8..cea4c61ee 100644 --- a/src/time-picker/src/TimePicker.tsx +++ b/src/time-picker/src/TimePicker.tsx @@ -32,7 +32,7 @@ import { getHours, getSeconds } from 'date-fns/esm' -import formatInTimeZone from 'date-fns-tz/esm/formatInTimeZone' +import formatInTimeZone from 'date-fns-tz/formatInTimeZone' import type { Locale } from 'date-fns' import type { FormValidationStatus } from '../../form/src/interface' import { strictParse } from '../../date-picker/src/utils' diff --git a/src/time/src/Time.ts b/src/time/src/Time.ts index 6956cb113..3ff2728b1 100644 --- a/src/time/src/Time.ts +++ b/src/time/src/Time.ts @@ -7,7 +7,7 @@ import { } from 'vue' import { format, formatDistanceStrict, fromUnixTime } from 'date-fns/esm' import type { Locale } from 'date-fns' -import formatInTimeZone from 'date-fns-tz/esm/formatInTimeZone' +import formatInTimeZone from 'date-fns-tz/formatInTimeZone' import { useLocale } from '../../_mixins' import { type ExtractPublicPropTypes } from '../../_utils' diff --git a/src/tree/demos/enUS/index.demo-entry.md b/src/tree/demos/enUS/index.demo-entry.md index 61c462b76..94c44bbc7 100644 --- a/src/tree/demos/enUS/index.demo-entry.md +++ b/src/tree/demos/enUS/index.demo-entry.md @@ -73,7 +73,7 @@ checkbox-placement.vue | selectable | `boolean` | `true` | Whether the node can be selected. | | | selected-keys | `Array` | `undefined` | If set, selected status will work in controlled manner. | | | show-irrelevant-nodes | `boolean` | `true` | Whether to filter unmached nodes when tree is in filter mode. | 2.28.1 | -| show-line | `boolean` | `true` | Whether to display the connection line. | NEXT_VERSION | +| show-line | `boolean` | `false` | Whether to display the connection line. | NEXT_VERSION | | virtual-scroll | `boolean` | `false` | Whether to enable virtual scroll. You need to set proper style height of the tree in advance. | | | watch-props | `Array<'defaultCheckedKeys' \| 'defaultSelectedKeys' \|'defaultExpandedKeys'>` | `undefined` | Default prop names that needed to be watched. Components will be updated after the prop is changed. Note: the `watch-props` itself is not reactive. | | | on-dragend | `(data: { node: TreeOption, event: DragEvent }) => void` | `undefined` | The callback function after the node completes the dragging action. | | diff --git a/src/tree/demos/zhCN/index.demo-entry.md b/src/tree/demos/zhCN/index.demo-entry.md index aca3bb4dc..f7267c92e 100644 --- a/src/tree/demos/zhCN/index.demo-entry.md +++ b/src/tree/demos/zhCN/index.demo-entry.md @@ -79,7 +79,7 @@ expand-debug.vue | selectable | `boolean` | `true` | 节点是否可以被选中 | | | selected-keys | `Array` | `undefined` | 如果设定则 `selected` 状态受控 | | | show-irrelevant-nodes | `boolean` | `true` | 是否在搜索状态显示和搜索无关的节点 | 2.28.1 | -| show-line | `boolean` | `true` | 是否显示连接线 | NEXT_VERSION | +| show-line | `boolean` | `false` | 是否显示连接线 | NEXT_VERSION | | virtual-scroll | `boolean` | `false` | 是否启用虚拟滚动，启用前你需要设定好树的高度样式 | | | watch-props | `Array<'defaultCheckedKeys' \| 'defaultSelectedKeys' \|'defaultExpandedKeys'>` | `undefined` | 需要检测变更的默认属性，检测后组件状态会更新。注意：`watch-props` 本身不是响应式的 | | | on-dragend | `(data: { node: TreeOption, event: DragEvent }) => void` | `undefined` | 节点完成拖拽动作后的回调函数 | | diff --git a/src/tree/src/Tree.tsx b/src/tree/src/Tree.tsx index 8c4527ee1..1c2b8bf81 100644 --- a/src/tree/src/Tree.tsx +++ b/src/tree/src/Tree.tsx @@ -24,7 +24,7 @@ import { } from 'treemate' import { useMergedState } from 'vooks' import { type VirtualListInst, VVirtualList } from 'vueuc' -import { getPadding } from 'seemly' +import { depx, getPadding, pxfy } from 'seemly' import { treeSelectInjectionKey } from '../../tree-select/src/interface' import { useConfig, useTheme, useThemeClass, useRtl } from '../../_mixins' import type { ThemeProps } from '../../_mixins' @@ -71,13 +71,7 @@ import { treeInjectionKey } from './interface' import MotionWrapper from './MotionWrapper' import { defaultAllowDrop } from './dnd' import style from './styles/index.cssr' -import { ScrollbarProps } from '../../scrollbar/src/Scrollbar' - -// TODO: -// During expanding, some node are mis-applied with :active style -// Async dnd has bug - -const ITEM_SIZE = 30 // 24 + 3 + 3 +import { type ScrollbarProps } from '../../scrollbar/src/Scrollbar' export function createTreeMateOptions ( keyField: string, @@ -685,6 +679,7 @@ export default defineComponent({ void nextTick(syncScrollbar) return } + const nodeHeight = depx(themeRef.value.self.nodeHeight) const prevVSet = new Set(prevValue) let addedKey: Key | null = null let removedKey: Key | null = null @@ -710,7 +705,7 @@ export default defineComponent({ const viewportHeight = ( virtualScroll ? virtualListInstRef.value!.listElRef : selfElRef.value! ).offsetHeight - const viewportItemCount = Math.ceil(viewportHeight / ITEM_SIZE) + 1 + const viewportItemCount = Math.ceil(viewportHeight / nodeHeight) + 1 // play add animation let baseExpandedKeys: Key[] | undefined if (addedKey !== null) { @@ -742,7 +737,7 @@ export default defineComponent({ __motion: true, mode: 'expand', height: virtualScroll - ? expandedChildren.length * ITEM_SIZE + ? expandedChildren.length * nodeHeight : undefined, nodes: virtualScroll ? expandedChildren.slice(0, viewportItemCount) @@ -769,7 +764,7 @@ export default defineComponent({ __motion: true, mode: 'collapse', height: virtualScroll - ? collapsedChildren.length * ITEM_SIZE + ? collapsedChildren.length * nodeHeight : undefined, nodes: virtualScroll ? collapsedChildren.slice(0, viewportItemCount) @@ -1519,6 +1514,7 @@ export default defineComponent({ droppingOffsetLevelRef, fNodesRef, pendingNodeKeyRef, + showLineRef: toRef(props, 'showLine'), disabledFieldRef: toRef(props, 'disabledField'), internalScrollableRef: toRef(props, 'internalScrollable'), internalCheckboxFocusableRef: toRef(props, 'internalCheckboxFocusable'), @@ -1575,9 +1571,17 @@ export default defineComponent({ loadingColor, nodeTextColor, nodeTextColorDisabled, - dropMarkColor + dropMarkColor, + nodeWrapperPadding, + nodeHeight, + lineHeight } } = themeRef.value + const lineOffsetTop = getPadding(nodeWrapperPadding, 'top') + const lineOffsetBottom = getPadding(nodeWrapperPadding, 'bottom') + const nodeContentHeight = pxfy( + depx(nodeHeight) - depx(lineOffsetTop) - depx(lineOffsetBottom) + ) return { '--n-arrow-color': arrowColor, '--n-loading-color': loadingColor, @@ -1589,7 +1593,12 @@ export default defineComponent({ '--n-node-color-pressed': nodeColorPressed, '--n-node-text-color': nodeTextColor, '--n-node-text-color-disabled': nodeTextColorDisabled, - '--n-drop-mark-color': dropMarkColor + '--n-drop-mark-color': dropMarkColor, + '--n-node-wrapper-padding': nodeWrapperPadding, + '--n-line-offset-top': `-${lineOffsetTop}`, + '--n-line-offset-bottom': `-${lineOffsetBottom}`, + '--n-node-content-height': nodeContentHeight, + '--n-line-height': lineHeight } }) const themeClassHandle = inlineThemeDisabled @@ -1626,7 +1635,6 @@ export default defineComponent({ mergedClsPrefix, blockNode, blockLine, - showLine, draggable, disabled, internalFocusable, @@ -1643,8 +1651,7 @@ export default defineComponent({ rtlEnabled && `${mergedClsPrefix}-tree--rtl`, checkable && `${mergedClsPrefix}-tree--checkable`, (blockLine || blockNode) && `${mergedClsPrefix}-tree--block-node`, - blockLine && `${mergedClsPrefix}-tree--block-line`, - showLine && `${mergedClsPrefix}-tree--show-line` + blockLine && `${mergedClsPrefix}-tree--block-line` ] const createNode = (tmNode: TmNode | MotionData): VNode => { return '__motion' in tmNode ? ( @@ -1687,7 +1694,7 @@ export default defineComponent({ { + const { clsPrefix } = props + const { value: indent } = indentRef + if (showLineRef.value) { + const indentNodes: VNode[] = [] + let cursor = props.tmNode.parent + while (cursor) { + if (cursor.isLastChild) { + indentNodes.push( +
+
+
+ ) + } else { + indentNodes.push( +
+
+
+ ) + } + cursor = cursor.parent + } + return indentNodes.reverse() + } else { + return repeat( + props.tmNode.level, +
+
+
+ ) + } + }) return { showDropMark: useMemo(() => { const { value: draggingNode } = draggingNodeRef @@ -273,8 +312,10 @@ const TreeNode = defineComponent({ droppingOffsetLevel: droppingOffsetLevelRef, indent: indentRef, checkboxPlacement: checkboxPlacementRef, + showLine: showLineRef, contentInstRef, contentElRef, + indentNodes, handleCheck, handleDrop, handleDragStart, @@ -300,6 +341,7 @@ const TreeNode = defineComponent({ draggable, blockLine, indent, + indentNodes, disabled, pending, internalScrollable, @@ -324,6 +366,7 @@ const TreeNode = defineComponent({ const checkboxOnRight = checkboxPlacement === 'right' const checkboxNode = checkable ? ( - {repeat( - tmNode.level, -
+ {indentNodes} + {tmNode.isLeaf && this.showLine ? ( +
+ ) : ( + )} - {!checkboxOnRight ? checkboxNode : null} { - const { clsPrefix } = props + const { clsPrefix, expanded, hide, indent, onClick } = props return (
diff --git a/src/tree/src/interface.ts b/src/tree/src/interface.ts index 26d473fb8..c2c7b2ccb 100644 --- a/src/tree/src/interface.ts +++ b/src/tree/src/interface.ts @@ -121,6 +121,7 @@ export interface TreeInjection { internalTreeSelect: boolean checkOnClickRef: Ref disabledFieldRef: Ref + showLineRef: Ref handleSwitcherClick: (node: TreeNode) => void handleSelect: (node: TreeNode) => void handleCheck: (node: TreeNode, checked: boolean) => void diff --git a/src/tree/src/styles/index.cssr.ts b/src/tree/src/styles/index.cssr.ts index d8eb79be4..d085aff15 100644 --- a/src/tree/src/styles/index.cssr.ts +++ b/src/tree/src/styles/index.cssr.ts @@ -2,6 +2,8 @@ import { c, cB, cE, cM, cNotM } from '../../../_utils/cssr' import { iconSwitchTransition } from '../../../_styles/transitions/icon-switch.cssr' import { fadeInHeightExpandTransition } from '../../../_styles/transitions/fade-in-height-expand.cssr' +const iconSwitchTransitionNode = iconSwitchTransition() + // vars: // --n-arrow-color // --n-bezier @@ -12,6 +14,11 @@ import { fadeInHeightExpandTransition } from '../../../_styles/transitions/fade- // --n-node-color-pressed // --n-node-text-color // --n-node-text-color-disabled +// --n-node-wrapper-padding +// --n-line-offset-top +// --n-line-offset-bottom +// --n-node-content-height +// --n-line-height export default cB('tree', ` font-size: var(--n-font-size); outline: none; @@ -23,9 +30,7 @@ export default cB('tree', ` `), c('>', [ cB('tree-node', [ - c('&:first-child', { - marginTop: 0 - }) + c('&:first-child', 'margin-top: 0;') ]) ]), cB('tree-motion-wrapper', [ @@ -43,7 +48,7 @@ export default cB('tree', ` ]), cB('tree-node-wrapper', ` box-sizing: border-box; - padding: 3px 0; + padding: var(--n-node-wrapper-padding); `), cB('tree-node', ` transform: translate3d(0,0,0); @@ -54,9 +59,7 @@ export default cB('tree', ` `, [ cM('highlight', [ cB('tree-node-content', [ - cE('text', { - borderBottomColor: 'var(--n-node-text-color-disabled)' - }) + cE('text', 'border-bottom-color: var(--n-node-text-color-disabled);') ]) ]), cM('disabled', [ @@ -83,26 +86,20 @@ export default cB('tree', ` cB('tree-node', [ cNotM('disabled', [ cB('tree-node-content', [ - c('&:hover', { - backgroundColor: 'var(--n-node-color-hover)' - }) + c('&:hover', 'background: var(--n-node-color-hover);') ]), cM('selectable', [ cB('tree-node-content', [ - c('&:active', { - backgroundColor: 'var(--n-node-color-pressed)' - }) + c('&:active', 'background: var(--n-node-color-pressed);') ]) ]), cM('pending', [ cB('tree-node-content', ` - background-color: var(--n-node-color-hover); + background: var(--n-node-color-hover); `) ]), cM('selected', [ - cB('tree-node-content', { - backgroundColor: 'var(--n-node-color-active)' - }) + cB('tree-node-content', 'background: var(--n-node-color-active);') ]) ]) ]) @@ -110,60 +107,61 @@ export default cB('tree', ` cM('block-line', [ cB('tree-node', [ cNotM('disabled', [ - c('&:hover', { - backgroundColor: 'var(--n-node-color-hover)' - }), + c('&:hover', 'background: var(--n-node-color-hover);'), cM('pending', ` - background-color: var(--n-node-color-hover); + background: var(--n-node-color-hover); `), cM('selectable', [ cNotM('selected', [ - c('&:active', { - backgroundColor: 'var(--n-node-color-pressed)' - }) + c('&:active', 'background: var(--n-node-color-pressed);') ]) ]), - cM('selected', { - backgroundColor: 'var(--n-node-color-active)' - }) + cM('selected', 'background: var(--n-node-color-active);') ]), cM('disabled', ` cursor: not-allowed; `) ]) ]), - cM('show-line', [ - cB('tree-node-indent', ` - flex-grow: 0; - flex-shrink: 0; - position: relative - `, [ + cB('tree-node-indent', ` + flex-grow: 0; + flex-shrink: 0; + `, [ + cM('show-line', 'position: relative', [ c('&::before', ` position: absolute; left: 50%; - box-sizing: border-box; - border: 1px solid var(--n-border-color); + border-left: 1px solid var(--n-border-color); + transition: border-color .3s var(--n-bezier); transform: translate(-50%); content: ""; - top: -5px; - bottom: -5px; - } - `) - ]) - ]), - cNotM('show-line', [ - cB('tree-node-indent', ` - flex-grow: 0; - flex-shrink: 0; - height: 0; - `) + top: var(--n-line-offset-top); + bottom: var(--n-line-offset-bottom); + `), + cM('last-child', [ + c('&::before', ` + bottom: 50%; + `) + ]), + cM('is-leaf', [ + c('&::after', ` + position: absolute; + content: ""; + left: calc(50% + 0.5px); + right: 0; + bottom: 50%; + transition: border-color .3s var(--n-bezier); + border-bottom: 1px solid var(--n-border-color); + `) + ]) + ]), + cNotM('show-line', 'height: 0;') ]), cB('tree-node-switcher', ` cursor: pointer; display: inline-flex; flex-shrink: 0; - height: 24px; - width: 24px; + height: var(--n-node-content-height); align-items: center; justify-content: center; transition: transform .15s var(--n-bezier); @@ -178,7 +176,9 @@ export default cB('tree', ` transition: color .3s var(--n-bezier); font-size: 14px; `, [ - cB('icon', [iconSwitchTransition()]), + cB('icon', [ + iconSwitchTransitionNode + ]), cB('base-loading', ` color: var(--n-loading-color); position: absolute; @@ -187,58 +187,41 @@ export default cB('tree', ` right: 0; bottom: 0; `, [ - iconSwitchTransition() + iconSwitchTransitionNode ]), cB('base-icon', [ - iconSwitchTransition() + iconSwitchTransitionNode ]) ]), - cM('hide', { - visibility: 'hidden' - }), - cM('expanded', { - transform: 'rotate(90deg)' - }) + cM('hide', 'visibility: hidden;'), + cM('expanded', 'transform: rotate(90deg);') ]), cB('tree-node-checkbox', ` display: inline-flex; - height: 24px; - width: 16px; + height: var(--n-node-content-height); vertical-align: bottom; align-items: center; justify-content: center; - margin-right: 4px; - `, [ - cM('right', 'margin-left: 4px;') - ]), - cM('checkable', [ - cB('tree-node-content', ` - padding: 0 6px; - `) - ]), + `), cB('tree-node-content', ` + user-select: none; position: relative; display: inline-flex; align-items: center; - min-height: 24px; + min-height: var(--n-node-content-height); box-sizing: border-box; - line-height: 1.5; + line-height: var(--n-line-height); vertical-align: bottom; padding: 0 6px 0 4px; cursor: default; border-radius: var(--n-node-border-radius); - text-decoration-color: #0000; - text-decoration-line: underline; color: var(--n-node-text-color); transition: color .3s var(--n-bezier), - text-decoration-color .3s var(--n-bezier), background-color .3s var(--n-bezier), border-color .3s var(--n-bezier); `, [ - c('&:last-child', { - marginBottom: 0 - }), + c('&:last-child', 'margin-bottom: 0;'), cE('prefix', ` display: inline-flex; margin-right: 8px; diff --git a/src/tree/styles/light.ts b/src/tree/styles/light.ts index 7d377eb6c..d8b090dfb 100644 --- a/src/tree/styles/light.ts +++ b/src/tree/styles/light.ts @@ -19,6 +19,9 @@ export const self = (vars: ThemeCommonVars) => { } = vars return { fontSize, + lineHeight: '1.5', + nodeHeight: '30px', + nodeWrapperPadding: '3px 0', nodeBorderRadius: borderRadiusSmall, nodeColorHover: hoverColor, nodeColorPressed: pressedColor, diff --git a/vite.config.js b/vite.config.js index fa1195841..af5de74ac 100644 --- a/vite.config.js +++ b/vite.config.js @@ -34,7 +34,7 @@ module.exports = { 'async-validator', 'css-render', 'date-fns/esm', - 'date-fns-tz/esm/getTimezoneOffset', + 'date-fns-tz/getTimezoneOffset', 'evtd', 'highlight.js', 'lodash-es',