naive-ui 2.34.3 → 2.35.0

package/es/tree/src/Tree.d.ts

@@ -1,8 +1,9 @@
-import { PropType, VNodeChild } from 'vue';
-import { TreeMateOptions, CheckStrategy } from 'treemate';
+import { type PropType, type VNodeChild } from 'vue';
+import { type TreeMateOptions, type CheckStrategy } from 'treemate';
 import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
 import type { TreeDragInfo, TreeDropInfo, TreeOptions, Key, TreeOption, AllowDrop, RenderSwitcherIcon, TreeNodeProps, CheckOnClick, GetChildren, OnLoad } from './interface';
 import { defaultAllowDrop } from './dnd';
+import { type ScrollbarProps } from '../../scrollbar/src/Scrollbar';
 export declare function createTreeMateOptions<T>(keyField: string, childrenField: string, disabledField: string, getChildren: GetChildren | undefined): TreeMateOptions<T, T, T>;
 export type OnUpdateCheckedKeys = (value: Array<string & number>, option: Array<TreeOption | null>, meta: {
     node: TreeOption | null;
@@ -147,6 +148,7 @@ export declare const treeProps: {
     readonly draggable: BooleanConstructor;
     readonly blockNode: BooleanConstructor;
     readonly blockLine: BooleanConstructor;
+    readonly showLine: BooleanConstructor;
     readonly disabled: BooleanConstructor;
     readonly checkedKeys: PropType<Key[]>;
     readonly defaultCheckedKeys: {
@@ -169,9 +171,10 @@ export declare const treeProps: {
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    readonly scrollbarProps: PropType<ScrollbarProps>;
     readonly indent: {
         readonly type: NumberConstructor;
-        readonly default: 16;
+        readonly default: 24;
     };
     readonly allowDrop: {
         readonly type: PropType<AllowDrop>;
@@ -208,6 +211,9 @@ export declare const treeProps: {
     readonly 'onUpdate:selectedKeys': PropType<MaybeArray<OnUpdateSelectedKeys>>;
     readonly theme: PropType<import("../../_mixins").Theme<"Tree", {
         fontSize: string;
+        lineHeight: string;
+        nodeHeight: string;
+        nodeWrapperPadding: string;
         nodeBorderRadius: string;
         nodeColorHover: string;
         nodeColorPressed: string;
@@ -268,6 +274,9 @@ export declare const treeProps: {
     }>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Tree", {
         fontSize: string;
+        lineHeight: string;
+        nodeHeight: string;
+        nodeWrapperPadding: string;
         nodeBorderRadius: string;
         nodeColorHover: string;
         nodeColorPressed: string;
@@ -328,6 +337,9 @@ export declare const treeProps: {
     }>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Tree", {
         fontSize: string;
+        lineHeight: string;
+        nodeHeight: string;
+        nodeWrapperPadding: string;
         nodeBorderRadius: string;
         nodeColorHover: string;
         nodeColorPressed: string;
@@ -467,6 +479,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly draggable: BooleanConstructor;
     readonly blockNode: BooleanConstructor;
     readonly blockLine: BooleanConstructor;
+    readonly showLine: BooleanConstructor;
     readonly disabled: BooleanConstructor;
     readonly checkedKeys: PropType<Key[]>;
     readonly defaultCheckedKeys: {
@@ -489,9 +502,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    readonly scrollbarProps: PropType<ScrollbarProps>;
     readonly indent: {
         readonly type: NumberConstructor;
-        readonly default: 16;
+        readonly default: 24;
     };
     readonly allowDrop: {
         readonly type: PropType<AllowDrop>;
@@ -528,6 +542,9 @@ declare const _default: import("vue").DefineComponent<{
     readonly 'onUpdate:selectedKeys': PropType<MaybeArray<OnUpdateSelectedKeys>>;
     readonly theme: PropType<import("../../_mixins").Theme<"Tree", {
         fontSize: string;
+        lineHeight: string;
+        nodeHeight: string;
+        nodeWrapperPadding: string;
         nodeBorderRadius: string;
         nodeColorHover: string;
         nodeColorPressed: string;
@@ -588,6 +605,9 @@ declare const _default: import("vue").DefineComponent<{
     }>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Tree", {
         fontSize: string;
+        lineHeight: string;
+        nodeHeight: string;
+        nodeWrapperPadding: string;
         nodeBorderRadius: string;
         nodeColorHover: string;
         nodeColorPressed: string;
@@ -648,6 +668,9 @@ declare const _default: import("vue").DefineComponent<{
     }>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Tree", {
         fontSize: string;
+        lineHeight: string;
+        nodeHeight: string;
+        nodeWrapperPadding: string;
         nodeBorderRadius: string;
         nodeColorHover: string;
         nodeColorPressed: string;
@@ -707,7 +730,7 @@ declare const _default: import("vue").DefineComponent<{
         }, any>;
     }>>>;
 }, {
-    mergedClsPrefix: import("vue").ComputedRef<string>;
+    mergedClsPrefix: import("vue").Ref<string>;
     mergedTheme: import("vue").ComputedRef<{
         common: {
             baseColor: string;
@@ -816,6 +839,9 @@ declare const _default: import("vue").DefineComponent<{
         };
         self: {
             fontSize: string;
+            lineHeight: string;
+            nodeHeight: string;
+            nodeWrapperPadding: string;
             nodeBorderRadius: string;
             nodeColorHover: string;
             nodeColorPressed: string;
@@ -1178,6 +1204,11 @@ declare const _default: import("vue").DefineComponent<{
         '--n-node-text-color': string;
         '--n-node-text-color-disabled': string;
         '--n-drop-mark-color': string;
+        '--n-node-wrapper-padding': string;
+        '--n-line-offset-top': string;
+        '--n-line-offset-bottom': string;
+        '--n-node-content-height': string;
+        '--n-line-height': string;
     }> | undefined;
     themeClass: import("vue").Ref<string> | undefined;
     onRender: (() => void) | undefined;
@@ -1272,6 +1303,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly draggable: BooleanConstructor;
     readonly blockNode: BooleanConstructor;
     readonly blockLine: BooleanConstructor;
+    readonly showLine: BooleanConstructor;
     readonly disabled: BooleanConstructor;
     readonly checkedKeys: PropType<Key[]>;
     readonly defaultCheckedKeys: {
@@ -1294,9 +1326,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    readonly scrollbarProps: PropType<ScrollbarProps>;
     readonly indent: {
         readonly type: NumberConstructor;
-        readonly default: 16;
+        readonly default: 24;
     };
     readonly allowDrop: {
         readonly type: PropType<AllowDrop>;
@@ -1333,6 +1366,9 @@ declare const _default: import("vue").DefineComponent<{
     readonly 'onUpdate:selectedKeys': PropType<MaybeArray<OnUpdateSelectedKeys>>;
     readonly theme: PropType<import("../../_mixins").Theme<"Tree", {
         fontSize: string;
+        lineHeight: string;
+        nodeHeight: string;
+        nodeWrapperPadding: string;
         nodeBorderRadius: string;
         nodeColorHover: string;
         nodeColorPressed: string;
@@ -1393,6 +1429,9 @@ declare const _default: import("vue").DefineComponent<{
     }>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Tree", {
         fontSize: string;
+        lineHeight: string;
+        nodeHeight: string;
+        nodeWrapperPadding: string;
         nodeBorderRadius: string;
         nodeColorHover: string;
         nodeColorPressed: string;
@@ -1453,6 +1492,9 @@ declare const _default: import("vue").DefineComponent<{
     }>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Tree", {
         fontSize: string;
+        lineHeight: string;
+        nodeHeight: string;
+        nodeWrapperPadding: string;
         nodeBorderRadius: string;
         nodeColorHover: string;
         nodeColorPressed: string;
@@ -1523,12 +1565,12 @@ declare const _default: import("vue").DefineComponent<{
     readonly checkable: boolean;
     readonly animated: boolean;
     readonly cancelable: boolean;
+    readonly keyboard: boolean;
     readonly childrenField: string;
     readonly defaultExpandAll: boolean;
     readonly allowCheckingNotLoaded: boolean;
     readonly cascade: boolean;
     readonly indent: number;
-    readonly keyboard: boolean;
     readonly internalScrollable: boolean;
     readonly checkStrategy: CheckStrategy;
     readonly disabledField: string;
@@ -1539,6 +1581,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly expandOnClick: boolean;
     readonly blockLine: boolean;
     readonly checkboxPlacement: "left" | "right";
+    readonly showLine: boolean;
     readonly defaultCheckedKeys: Key[];
     readonly defaultSelectedKeys: Key[];
     readonly internalTreeSelect: boolean;
@@ -1550,5 +1593,5 @@ declare const _default: import("vue").DefineComponent<{
     readonly checkOnClick: boolean | CheckOnClick;
     readonly blockNode: boolean;
     readonly allowDrop: AllowDrop;
-}>;
+}, {}>;
 export default _default;

package/es/tree/src/Tree.js

@@ -12,7 +12,7 @@ import { h, ref, toRef, computed, defineComponent, provide, watch, nextTick, wat
 import { createTreeMate, flatten, createIndexGetter } from 'treemate';
 import { useMergedState } from 'vooks';
 import { 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 { call, createDataKey, resolveSlot, warn, warnOnce } from '../../_utils';
@@ -26,10 +26,6 @@ import { treeInjectionKey } from './interface';
 import MotionWrapper from './MotionWrapper';
 import { defaultAllowDrop } from './dnd';
 import style from './styles/index.cssr';
-// TODO:
-// During expanding, some node are mis-applied with :active style
-// Async dnd has bug
-const ITEM_SIZE = 30; // 24 + 3 + 3
 export function createTreeMateOptions(keyField, childrenField, disabledField, getChildren) {
     const settledGetChildren = getChildren ||
         ((node) => {
@@ -92,7 +88,7 @@ export const treeProps = Object.assign(Object.assign(Object.assign(Object.assign
     }, cancelable: {
         type: Boolean,
         default: true
-    }, checkable: Boolean, draggable: Boolean, blockNode: Boolean, blockLine: Boolean, disabled: Boolean, checkedKeys: Array, defaultCheckedKeys: {
+    }, checkable: Boolean, draggable: Boolean, blockNode: Boolean, blockLine: Boolean, showLine: Boolean, disabled: Boolean, checkedKeys: Array, defaultCheckedKeys: {
         type: Array,
         default: () => []
     }, selectedKeys: Array, defaultSelectedKeys: {
@@ -104,9 +100,9 @@ export const treeProps = Object.assign(Object.assign(Object.assign(Object.assign
     }, onLoad: Function, cascade: Boolean, selectable: {
         type: Boolean,
         default: true
-    }, indent: {
+    }, scrollbarProps: Object, indent: {
         type: Number,
-        default: 16
+        default: 24
     }, allowDrop: {
         type: Function,
         default: defaultAllowDrop
@@ -254,11 +250,15 @@ export default defineComponent({
         };
         if (watchProps === null || watchProps === void 0 ? void 0 : watchProps.includes('defaultExpandedKeys')) {
             // if watching defaultExpandedKeys, we use access props.defaultExpandedKeys inside initiator
-            watchEffect(() => initUncontrolledExpandedKeys(undefined));
+            watchEffect(() => {
+                initUncontrolledExpandedKeys(undefined);
+            });
         }
         else {
             // We by default watchEffect since if defaultExpandAll is true, we should remain tree expand if data changes
-            watchEffect(() => initUncontrolledExpandedKeys(props.defaultExpandedKeys));
+            watchEffect(() => {
+                initUncontrolledExpandedKeys(props.defaultExpandedKeys);
+            });
         }
         const controlledExpandedKeysRef = toRef(props, 'expandedKeys');
         const mergedExpandedKeysRef = useMergedState(controlledExpandedKeysRef, uncontrolledExpandedKeysRef);
@@ -357,7 +357,8 @@ export default defineComponent({
                     if (process.env.NODE_ENV !== 'production') {
                         warn('tree', 'There is unloaded node in data but props.onLoad is not specified.');
                     }
-                    return yield Promise.resolve();
+                    yield Promise.resolve();
+                    return;
                 }
                 const { value: loadingKeys } = loadingKeysRef;
                 if (!loadingKeys.has(node.key)) {
@@ -403,6 +404,7 @@ export default defineComponent({
                 void nextTick(syncScrollbar);
                 return;
             }
+            const nodeHeight = depx(themeRef.value.self.nodeHeight);
             const prevVSet = new Set(prevValue);
             let addedKey = null;
             let removedKey = null;
@@ -428,7 +430,7 @@ export default defineComponent({
             }
             const { virtualScroll } = props;
             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;
             if (addedKey !== null) {
@@ -457,7 +459,7 @@ export default defineComponent({
                             __motion: true,
                             mode: 'expand',
                             height: virtualScroll
-                                ? expandedChildren.length * ITEM_SIZE
+                                ? expandedChildren.length * nodeHeight
                                 : undefined,
                             nodes: virtualScroll
                                 ? expandedChildren.slice(0, viewportItemCount)
@@ -481,7 +483,7 @@ export default defineComponent({
                         __motion: true,
                         mode: 'collapse',
                         height: virtualScroll
-                            ? collapsedChildren.length * ITEM_SIZE
+                            ? collapsedChildren.length * nodeHeight
                             : undefined,
                         nodes: virtualScroll
                             ? collapsedChildren.slice(0, viewportItemCount)
@@ -1121,6 +1123,7 @@ export default defineComponent({
             droppingOffsetLevelRef,
             fNodesRef,
             pendingNodeKeyRef,
+            showLineRef: toRef(props, 'showLine'),
             disabledFieldRef: toRef(props, 'disabledField'),
             internalScrollableRef: toRef(props, 'internalScrollable'),
             internalCheckboxFocusableRef: toRef(props, 'internalCheckboxFocusable'),
@@ -1168,7 +1171,10 @@ export default defineComponent({
             }
         };
         const cssVarsRef = computed(() => {
-            const { common: { cubicBezierEaseInOut }, self: { fontSize, nodeBorderRadius, nodeColorHover, nodeColorPressed, nodeColorActive, arrowColor, loadingColor, nodeTextColor, nodeTextColorDisabled, dropMarkColor } } = themeRef.value;
+            const { common: { cubicBezierEaseInOut }, self: { fontSize, nodeBorderRadius, nodeColorHover, nodeColorPressed, nodeColorActive, arrowColor, loadingColor, nodeTextColor, nodeTextColorDisabled, 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,
@@ -1180,7 +1186,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
@@ -1203,7 +1214,7 @@ export default defineComponent({
         if (!fNodes.length && internalRenderEmpty) {
             return internalRenderEmpty();
         }
-        const { mergedClsPrefix, blockNode, blockLine, draggable, disabled, internalFocusable, checkable, handleKeydown, rtlEnabled, handleFocusout } = this;
+        const { mergedClsPrefix, blockNode, blockLine, draggable, disabled, internalFocusable, checkable, handleKeydown, rtlEnabled, handleFocusout, scrollbarProps } = this;
         const mergedFocusable = internalFocusable && !disabled;
         const tabindex = mergedFocusable ? '0' : undefined;
         const treeClass = [
@@ -1219,11 +1230,11 @@ export default defineComponent({
         if (this.virtualScroll) {
             const { mergedTheme, internalScrollablePadding } = this;
             const padding = getPadding(internalScrollablePadding || '0');
-            return (h(NxScrollbar, { ref: "scrollbarInstRef", onDragleave: draggable ? this.handleDragLeaveTree : undefined, container: this.getScrollContainer, content: this.getScrollContent, class: treeClass, theme: mergedTheme.peers.Scrollbar, themeOverrides: mergedTheme.peerOverrides.Scrollbar, tabindex: tabindex, onKeydown: mergedFocusable ? handleKeydown : undefined, onFocusout: mergedFocusable ? handleFocusout : undefined }, {
+            return (h(NxScrollbar, Object.assign({}, scrollbarProps, { ref: "scrollbarInstRef", onDragleave: draggable ? this.handleDragLeaveTree : undefined, container: this.getScrollContainer, content: this.getScrollContent, class: treeClass, theme: mergedTheme.peers.Scrollbar, themeOverrides: mergedTheme.peerOverrides.Scrollbar, tabindex: tabindex, onKeydown: mergedFocusable ? handleKeydown : undefined, onFocusout: mergedFocusable ? handleFocusout : undefined }), {
                 default: () => {
                     var _a;
                     (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
-                    return (h(VVirtualList, { ref: "virtualListInstRef", items: this.fNodes, itemSize: ITEM_SIZE, ignoreItemResize: this.aip, paddingTop: padding.top, paddingBottom: padding.bottom, class: this.themeClass, style: [
+                    return (h(VVirtualList, { ref: "virtualListInstRef", items: this.fNodes, itemSize: depx(mergedTheme.self.nodeHeight), ignoreItemResize: this.aip, paddingTop: padding.top, paddingBottom: padding.bottom, class: this.themeClass, style: [
                             this.cssVars,
                             {
                                 paddingLeft: padding.left,
@@ -1239,7 +1250,7 @@ export default defineComponent({
         treeClass.push(this.themeClass);
         (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
         if (internalScrollable) {
-            return (h(NxScrollbar, { class: treeClass, tabindex: tabindex, onKeydown: mergedFocusable ? handleKeydown : undefined, onFocusout: mergedFocusable ? handleFocusout : undefined, style: this.cssVars, contentStyle: { padding: this.internalScrollablePadding } }, {
+            return (h(NxScrollbar, Object.assign({}, scrollbarProps, { class: treeClass, tabindex: tabindex, onKeydown: mergedFocusable ? handleKeydown : undefined, onFocusout: mergedFocusable ? handleFocusout : undefined, style: this.cssVars, contentStyle: { padding: this.internalScrollablePadding } }), {
                 default: () => (h("div", { onDragleave: draggable ? this.handleDragLeaveTree : undefined, ref: "selfElRef" }, this.fNodes.map(createNode)))
             }));
         }

package/es/tree/src/TreeNode.d.ts

@@ -1,5 +1,5 @@
-import { PropType, ComponentPublicInstance } from 'vue';
-import { TmNode } from './interface';
+import { type PropType, type ComponentPublicInstance, type VNode } from 'vue';
+import { type TmNode } from './interface';
 declare const TreeNode: import("vue").DefineComponent<{
     clsPrefix: {
         type: StringConstructor;
@@ -34,10 +34,14 @@ declare const TreeNode: import("vue").DefineComponent<{
     droppingOffsetLevel: import("vue").Ref<number>;
     indent: import("vue").Ref<number>;
     checkboxPlacement: "left" | "right";
-    contentInstRef: import("vue").Ref<ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null>;
+    showLine: import("vue").Ref<boolean>;
+    contentInstRef: import("vue").Ref<ComponentPublicInstance | null>;
     contentElRef: {
         value: HTMLElement | null;
     };
+    indentNodes: import("vue").ComputedRef<VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>[]>;
     handleCheck: (checked: boolean) => void;
     handleDrop: (e: DragEvent) => void;
     handleDragStart: (e: DragEvent) => void;
@@ -57,5 +61,5 @@ declare const TreeNode: import("vue").DefineComponent<{
         type: PropType<TmNode>;
         required: true;
     };
-}>>, {}>;
+}>>, {}, {}>;
 export default TreeNode;

package/es/tree/src/TreeNode.js

@@ -23,7 +23,7 @@ const TreeNode = defineComponent({
     setup(props) {
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         const NTree = inject(treeInjectionKey);
-        const { droppingNodeParentRef, droppingMouseNodeRef, draggingNodeRef, droppingPositionRef, droppingOffsetLevelRef, nodePropsRef, indentRef, blockLineRef, checkboxPlacementRef, checkOnClickRef, disabledFieldRef } = NTree;
+        const { droppingNodeParentRef, droppingMouseNodeRef, draggingNodeRef, droppingPositionRef, droppingOffsetLevelRef, nodePropsRef, indentRef, blockLineRef, checkboxPlacementRef, checkOnClickRef, disabledFieldRef, showLineRef } = NTree;
         const checkboxDisabledRef = useMemo(() => !!props.tmNode.rawNode.checkboxDisabled);
         const nodeIsDisabledRef = useMemo(() => {
             return isNodeDisabled(props.tmNode, disabledFieldRef.value);
@@ -86,8 +86,9 @@ const TreeNode = defineComponent({
             if (!checkable)
                 return false;
             const { value: checkOnClick } = checkOnClickRef;
+            const { tmNode } = props;
             if (typeof checkOnClick === 'boolean') {
-                return checkOnClick;
+                return !tmNode.disabled && checkOnClick;
             }
             return checkOnClick(props.tmNode.rawNode);
         });
@@ -178,6 +179,33 @@ const TreeNode = defineComponent({
                 });
             }
         }
+        const indentNodes = computed(() => {
+            const { clsPrefix } = props;
+            const { value: indent } = indentRef;
+            if (showLineRef.value) {
+                const indentNodes = [];
+                let cursor = props.tmNode.parent;
+                while (cursor) {
+                    if (cursor.isLastChild) {
+                        indentNodes.push(h("div", { class: `${clsPrefix}-tree-node-indent` },
+                            h("div", { style: { width: `${indent}px` } })));
+                    }
+                    else {
+                        indentNodes.push(h("div", { class: [
+                                `${clsPrefix}-tree-node-indent`,
+                                `${clsPrefix}-tree-node-indent--show-line`
+                            ] },
+                            h("div", { style: { width: `${indent}px` } })));
+                    }
+                    cursor = cursor.parent;
+                }
+                return indentNodes.reverse();
+            }
+            else {
+                return repeat(props.tmNode.level, h("div", { class: `${props.clsPrefix}-tree-node-indent` },
+                    h("div", { style: { width: `${indent}px` } })));
+            }
+        });
         return {
             showDropMark: useMemo(() => {
                 const { value: draggingNode } = draggingNodeRef;
@@ -231,8 +259,10 @@ const TreeNode = defineComponent({
             droppingOffsetLevel: droppingOffsetLevelRef,
             indent: indentRef,
             checkboxPlacement: checkboxPlacementRef,
+            showLine: showLineRef,
             contentInstRef,
             contentElRef,
+            indentNodes,
             handleCheck,
             handleDrop,
             handleDragStart,
@@ -246,7 +276,7 @@ const TreeNode = defineComponent({
         };
     },
     render() {
-        const { tmNode, clsPrefix, checkable, expandOnClick, selectable, selected, checked, highlight, draggable, blockLine, indent, disabled, pending, internalScrollable, nodeProps, checkboxPlacement } = this;
+        const { tmNode, clsPrefix, checkable, expandOnClick, selectable, selected, checked, highlight, draggable, blockLine, indent, indentNodes, disabled, pending, internalScrollable, nodeProps, checkboxPlacement } = this;
         // drag start not inside
         // it need to be append to node itself, not wrapper
         const dragEventHandlers = draggable && !disabled
@@ -262,7 +292,7 @@ const TreeNode = defineComponent({
         // scrolled to, so we need data-key to query the target element.
         const dataKey = internalScrollable ? createDataKey(tmNode.key) : undefined;
         const checkboxOnRight = checkboxPlacement === 'right';
-        const checkboxNode = checkable ? (h(NTreeNodeCheckbox, { right: checkboxOnRight, focusable: this.checkboxFocusable, disabled: disabled || this.checkboxDisabled, clsPrefix: clsPrefix, checked: this.checked, indeterminate: this.indeterminate, onCheck: this.handleCheck })) : null;
+        const checkboxNode = checkable ? (h(NTreeNodeCheckbox, { indent: indent, right: checkboxOnRight, focusable: this.checkboxFocusable, disabled: disabled || this.checkboxDisabled, clsPrefix: clsPrefix, checked: this.checked, indeterminate: this.indeterminate, onCheck: this.handleCheck })) : null;
         return (h("div", Object.assign({ class: `${clsPrefix}-tree-node-wrapper` }, dragEventHandlers),
             h("div", Object.assign({}, (blockLine ? nodeProps : undefined), { class: [
                     `${clsPrefix}-tree-node`,
@@ -279,9 +309,15 @@ const TreeNode = defineComponent({
                 ], "data-key": dataKey, draggable: draggable && blockLine, onClick: this.handleLineClick, onDragstart: draggable && blockLine && !disabled
                     ? this.handleDragStart
                     : undefined }),
-                repeat(tmNode.level, h("div", { class: `${clsPrefix}-tree-node-indent` },
-                    h("div", { style: { width: `${indent}px` } }))),
-                h(NTreeNodeSwitcher, { clsPrefix: clsPrefix, expanded: this.expanded, selected: selected, loading: this.loading, hide: tmNode.isLeaf, onClick: this.handleSwitcherClick }),
+                indentNodes,
+                tmNode.isLeaf && this.showLine ? (h("div", { class: [
+                        `${clsPrefix}-tree-node-indent`,
+                        `${clsPrefix}-tree-node-indent--show-line`,
+                        tmNode.isLeaf && `${clsPrefix}-tree-node-indent--is-leaf`,
+                        tmNode.isLastChild &&
+                            `${clsPrefix}-tree-node-indent--last-child`
+                    ] },
+                    h("div", { style: { width: `${indent}px` } }))) : (h(NTreeNodeSwitcher, { clsPrefix: clsPrefix, expanded: this.expanded, selected: selected, loading: this.loading, hide: tmNode.isLeaf, tmNode: this.tmNode, indent: indent, onClick: this.handleSwitcherClick })),
                 !checkboxOnRight ? checkboxNode : null,
                 h(NTreeNodeContent, { ref: "contentInstRef", clsPrefix: clsPrefix, checked: checked, selected: selected, onClick: this.handleContentClick, nodeProps: blockLine ? undefined : nodeProps, onDragstart: draggable && !blockLine && !disabled
                         ? this.handleDragStart

package/es/tree/src/TreeNodeCheckbox.d.ts

@@ -1,9 +1,13 @@
-import { PropType } from 'vue';
+import { type PropType } from 'vue';
 declare const _default: import("vue").DefineComponent<{
     clsPrefix: {
         type: StringConstructor;
         required: true;
     };
+    indent: {
+        type: NumberConstructor;
+        required: true;
+    };
     right: BooleanConstructor;
     focusable: BooleanConstructor;
     disabled: BooleanConstructor;
@@ -120,6 +124,9 @@ declare const _default: import("vue").DefineComponent<{
         };
         self: {
             fontSize: string;
+            lineHeight: string;
+            nodeHeight: string;
+            nodeWrapperPadding: string;
             nodeBorderRadius: string;
             nodeColorHover: string;
             nodeColorPressed: string;
@@ -202,6 +209,10 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         required: true;
     };
+    indent: {
+        type: NumberConstructor;
+        required: true;
+    };
     right: BooleanConstructor;
     focusable: BooleanConstructor;
     disabled: BooleanConstructor;
@@ -214,5 +225,5 @@ declare const _default: import("vue").DefineComponent<{
     checked: boolean;
     indeterminate: boolean;
     focusable: boolean;
-}>;
+}, {}>;
 export default _default;

package/es/tree/src/TreeNodeCheckbox.js

@@ -8,6 +8,10 @@ export default defineComponent({
             type: String,
             required: true
         },
+        indent: {
+            type: Number,
+            required: true
+        },
         right: Boolean,
         focusable: Boolean,
         disabled: Boolean,
@@ -20,16 +24,12 @@ export default defineComponent({
         const NTree = inject(treeInjectionKey);
         function doCheck(value) {
             const { onCheck } = props;
-            if (onCheck)
-                return onCheck(value);
+            if (onCheck) {
+                onCheck(value);
+            }
         }
         function handleUpdateValue(value) {
-            if (props.indeterminate) {
-                doCheck(false);
-            }
-            else {
-                doCheck(value);
-            }
+            doCheck(value);
         }
         return {
             handleUpdateValue,
@@ -37,11 +37,13 @@ export default defineComponent({
         };
     },
     render() {
-        const { clsPrefix, mergedTheme, checked, indeterminate, disabled, focusable, handleUpdateValue } = this;
+        const { clsPrefix, mergedTheme, checked, indeterminate, disabled, focusable, indent, handleUpdateValue } = this;
         return (h("span", { class: [
                 `${clsPrefix}-tree-node-checkbox`,
                 this.right && `${clsPrefix}-tree-node-checkbox--right`
-            ], "data-checkbox": true },
+            ], style: {
+                width: `${indent}px`
+            }, "data-checkbox": true },
             h(NCheckbox, { focusable: focusable, disabled: disabled, theme: mergedTheme.peers.Checkbox, themeOverrides: mergedTheme.peerOverrides.Checkbox, checked: checked, indeterminate: indeterminate, onUpdateChecked: handleUpdateValue })));
     }
 });

package/es/tree/src/TreeNodeContent.d.ts

@@ -1,5 +1,5 @@
-import { PropType, HTMLAttributes } from 'vue';
-import { TmNode } from './interface';
+import { type PropType, type HTMLAttributes } from 'vue';
+import { type TmNode } from './interface';
 declare const _default: import("vue").DefineComponent<{
     clsPrefix: {
         type: StringConstructor;
@@ -41,5 +41,5 @@ declare const _default: import("vue").DefineComponent<{
     disabled: boolean;
     checked: boolean;
     selected: boolean;
-}>;
+}, {}>;
 export default _default;