naive-ui 2.34.4 → 2.36.0

package/lib/tree/index.d.ts

@@ -1,3 +1,4 @@
 export { default as NTree, treeProps } from './src/Tree';
 export type { TreeProps } from './src/Tree';
 export type { TreeOption, TreeDragInfo, TreeDropInfo, TreeInst } from './src/interface';
+export { treeGetClickTarget } from './src/utils';

package/lib/tree/index.js

@@ -3,7 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.treeProps = exports.NTree = void 0;
+exports.treeGetClickTarget = exports.treeProps = exports.NTree = void 0;
 var Tree_1 = require("./src/Tree");
 Object.defineProperty(exports, "NTree", { enumerable: true, get: function () { return __importDefault(Tree_1).default; } });
 Object.defineProperty(exports, "treeProps", { enumerable: true, get: function () { return Tree_1.treeProps; } });
+var utils_1 = require("./src/utils");
+Object.defineProperty(exports, "treeGetClickTarget", { enumerable: true, get: function () { return utils_1.treeGetClickTarget; } });

package/lib/tree/src/MotionWrapper.d.ts

@@ -36,5 +36,5 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<() => void>;
         required: true;
     };
-}>>, {}>;
+}>>, {}, {}>;
 export default _default;

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

@@ -3,6 +3,7 @@ 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;
@@ -217,6 +223,7 @@ export declare const treeProps: {
         nodeTextColorDisabled: string;
         loadingColor: string;
         dropMarkColor: string;
+        lineColor: string;
     }, {
         Checkbox: import("../../_mixins").Theme<"Checkbox", {
             labelLineHeight: string;
@@ -268,6 +275,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;
@@ -277,6 +287,7 @@ export declare const treeProps: {
         nodeTextColorDisabled: string;
         loadingColor: string;
         dropMarkColor: string;
+        lineColor: string;
     }, {
         Checkbox: import("../../_mixins").Theme<"Checkbox", {
             labelLineHeight: string;
@@ -328,6 +339,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;
@@ -337,6 +351,7 @@ export declare const treeProps: {
         nodeTextColorDisabled: string;
         loadingColor: string;
         dropMarkColor: string;
+        lineColor: string;
     }, {
         Checkbox: import("../../_mixins").Theme<"Checkbox", {
             labelLineHeight: string;
@@ -467,6 +482,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 +505,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 +545,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;
@@ -537,6 +557,7 @@ declare const _default: import("vue").DefineComponent<{
         nodeTextColorDisabled: string;
         loadingColor: string;
         dropMarkColor: string;
+        lineColor: string;
     }, {
         Checkbox: import("../../_mixins").Theme<"Checkbox", {
             labelLineHeight: string;
@@ -588,6 +609,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;
@@ -597,6 +621,7 @@ declare const _default: import("vue").DefineComponent<{
         nodeTextColorDisabled: string;
         loadingColor: string;
         dropMarkColor: string;
+        lineColor: string;
     }, {
         Checkbox: import("../../_mixins").Theme<"Checkbox", {
             labelLineHeight: string;
@@ -648,6 +673,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;
@@ -657,6 +685,7 @@ declare const _default: import("vue").DefineComponent<{
         nodeTextColorDisabled: string;
         loadingColor: string;
         dropMarkColor: string;
+        lineColor: string;
     }, {
         Checkbox: import("../../_mixins").Theme<"Checkbox", {
             labelLineHeight: string;
@@ -707,7 +736,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 +845,9 @@ declare const _default: import("vue").DefineComponent<{
         };
         self: {
             fontSize: string;
+            lineHeight: string;
+            nodeHeight: string;
+            nodeWrapperPadding: string;
             nodeBorderRadius: string;
             nodeColorHover: string;
             nodeColorPressed: string;
@@ -825,6 +857,7 @@ declare const _default: import("vue").DefineComponent<{
             nodeTextColorDisabled: string;
             loadingColor: string;
             dropMarkColor: string;
+            lineColor: string;
         };
         peers: {
             Checkbox: import("../../_mixins").Theme<"Checkbox", {
@@ -1178,6 +1211,12 @@ 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;
+        '--n-line-color': string;
     }> | undefined;
     themeClass: import("vue").Ref<string> | undefined;
     onRender: (() => void) | undefined;
@@ -1272,6 +1311,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 +1334,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 +1374,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;
@@ -1342,6 +1386,7 @@ declare const _default: import("vue").DefineComponent<{
         nodeTextColorDisabled: string;
         loadingColor: string;
         dropMarkColor: string;
+        lineColor: string;
     }, {
         Checkbox: import("../../_mixins").Theme<"Checkbox", {
             labelLineHeight: string;
@@ -1393,6 +1438,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;
@@ -1402,6 +1450,7 @@ declare const _default: import("vue").DefineComponent<{
         nodeTextColorDisabled: string;
         loadingColor: string;
         dropMarkColor: string;
+        lineColor: string;
     }, {
         Checkbox: import("../../_mixins").Theme<"Checkbox", {
             labelLineHeight: string;
@@ -1453,6 +1502,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;
@@ -1462,6 +1514,7 @@ declare const _default: import("vue").DefineComponent<{
         nodeTextColorDisabled: string;
         loadingColor: string;
         dropMarkColor: string;
+        lineColor: string;
     }, {
         Checkbox: import("../../_mixins").Theme<"Checkbox", {
             labelLineHeight: string;
@@ -1539,6 +1592,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 +1604,5 @@ declare const _default: import("vue").DefineComponent<{
     readonly checkOnClick: boolean | CheckOnClick;
     readonly blockNode: boolean;
     readonly allowDrop: AllowDrop;
-}>;
+}, {}>;
 export default _default;

package/lib/tree/src/Tree.js

@@ -32,10 +32,6 @@ const interface_2 = require("./interface");
 const MotionWrapper_1 = __importDefault(require("./MotionWrapper"));
 const dnd_1 = require("./dnd");
 const index_cssr_1 = __importDefault(require("./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
 function createTreeMateOptions(keyField, childrenField, disabledField, getChildren) {
     const settledGetChildren = getChildren ||
         ((node) => {
@@ -99,7 +95,7 @@ exports.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: {
@@ -111,9 +107,9 @@ exports.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: dnd_1.defaultAllowDrop
@@ -261,11 +257,15 @@ exports.default = (0, vue_1.defineComponent)({
         };
         if (watchProps === null || watchProps === void 0 ? void 0 : watchProps.includes('defaultExpandedKeys')) {
             // if watching defaultExpandedKeys, we use access props.defaultExpandedKeys inside initiator
-            (0, vue_1.watchEffect)(() => { initUncontrolledExpandedKeys(undefined); });
+            (0, vue_1.watchEffect)(() => {
+                initUncontrolledExpandedKeys(undefined);
+            });
         }
         else {
             // We by default watchEffect since if defaultExpandAll is true, we should remain tree expand if data changes
-            (0, vue_1.watchEffect)(() => { initUncontrolledExpandedKeys(props.defaultExpandedKeys); });
+            (0, vue_1.watchEffect)(() => {
+                initUncontrolledExpandedKeys(props.defaultExpandedKeys);
+            });
         }
         const controlledExpandedKeysRef = (0, vue_1.toRef)(props, 'expandedKeys');
         const mergedExpandedKeysRef = (0, vooks_1.useMergedState)(controlledExpandedKeysRef, uncontrolledExpandedKeysRef);
@@ -411,6 +411,7 @@ exports.default = (0, vue_1.defineComponent)({
                 void (0, vue_1.nextTick)(syncScrollbar);
                 return;
             }
+            const nodeHeight = (0, seemly_1.depx)(themeRef.value.self.nodeHeight);
             const prevVSet = new Set(prevValue);
             let addedKey = null;
             let removedKey = null;
@@ -436,7 +437,7 @@ exports.default = (0, vue_1.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) {
@@ -465,7 +466,7 @@ exports.default = (0, vue_1.defineComponent)({
                             __motion: true,
                             mode: 'expand',
                             height: virtualScroll
-                                ? expandedChildren.length * ITEM_SIZE
+                                ? expandedChildren.length * nodeHeight
                                 : undefined,
                             nodes: virtualScroll
                                 ? expandedChildren.slice(0, viewportItemCount)
@@ -489,7 +490,7 @@ exports.default = (0, vue_1.defineComponent)({
                         __motion: true,
                         mode: 'collapse',
                         height: virtualScroll
-                            ? collapsedChildren.length * ITEM_SIZE
+                            ? collapsedChildren.length * nodeHeight
                             : undefined,
                         nodes: virtualScroll
                             ? collapsedChildren.slice(0, viewportItemCount)
@@ -1129,6 +1130,7 @@ exports.default = (0, vue_1.defineComponent)({
             droppingOffsetLevelRef,
             fNodesRef,
             pendingNodeKeyRef,
+            showLineRef: (0, vue_1.toRef)(props, 'showLine'),
             disabledFieldRef: (0, vue_1.toRef)(props, 'disabledField'),
             internalScrollableRef: (0, vue_1.toRef)(props, 'internalScrollable'),
             internalCheckboxFocusableRef: (0, vue_1.toRef)(props, 'internalCheckboxFocusable'),
@@ -1176,7 +1178,10 @@ exports.default = (0, vue_1.defineComponent)({
             }
         };
         const cssVarsRef = (0, vue_1.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, lineColor } } = themeRef.value;
+            const lineOffsetTop = (0, seemly_1.getPadding)(nodeWrapperPadding, 'top');
+            const lineOffsetBottom = (0, seemly_1.getPadding)(nodeWrapperPadding, 'bottom');
+            const nodeContentHeight = (0, seemly_1.pxfy)((0, seemly_1.depx)(nodeHeight) - (0, seemly_1.depx)(lineOffsetTop) - (0, seemly_1.depx)(lineOffsetBottom));
             return {
                 '--n-arrow-color': arrowColor,
                 '--n-loading-color': loadingColor,
@@ -1188,7 +1193,13 @@ exports.default = (0, vue_1.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,
+                '--n-line-color': lineColor
             };
         });
         const themeClassHandle = inlineThemeDisabled
@@ -1211,7 +1222,7 @@ exports.default = (0, vue_1.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 = [
@@ -1227,11 +1238,13 @@ exports.default = (0, vue_1.defineComponent)({
         if (this.virtualScroll) {
             const { mergedTheme, internalScrollablePadding } = this;
             const padding = (0, seemly_1.getPadding)(internalScrollablePadding || '0');
-            return ((0, vue_1.h)(_internal_1.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 ((0, vue_1.h)(_internal_1.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 ((0, vue_1.h)(vueuc_1.VVirtualList, { ref: "virtualListInstRef", items: this.fNodes, itemSize: ITEM_SIZE, ignoreItemResize: this.aip, paddingTop: padding.top, paddingBottom: padding.bottom, class: this.themeClass, style: [
+                    return !fNodes.length ? ((0, _utils_1.resolveSlot)(this.$slots.empty, () => [
+                        (0, vue_1.h)(empty_1.NEmpty, { class: `${mergedClsPrefix}-tree__empty`, theme: this.mergedTheme.peers.Empty, themeOverrides: this.mergedTheme.peerOverrides.Empty })
+                    ])) : ((0, vue_1.h)(vueuc_1.VVirtualList, { ref: "virtualListInstRef", items: this.fNodes, itemSize: (0, seemly_1.depx)(mergedTheme.self.nodeHeight), ignoreItemResize: this.aip, paddingTop: padding.top, paddingBottom: padding.bottom, class: this.themeClass, style: [
                             this.cssVars,
                             {
                                 paddingLeft: padding.left,
@@ -1247,7 +1260,7 @@ exports.default = (0, vue_1.defineComponent)({
         treeClass.push(this.themeClass);
         (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
         if (internalScrollable) {
-            return ((0, vue_1.h)(_internal_1.NxScrollbar, { class: treeClass, tabindex: tabindex, onKeydown: mergedFocusable ? handleKeydown : undefined, onFocusout: mergedFocusable ? handleFocusout : undefined, style: this.cssVars, contentStyle: { padding: this.internalScrollablePadding } }, {
+            return ((0, vue_1.h)(_internal_1.NxScrollbar, Object.assign({}, scrollbarProps, { class: treeClass, tabindex: tabindex, onKeydown: mergedFocusable ? handleKeydown : undefined, onFocusout: mergedFocusable ? handleFocusout : undefined, style: this.cssVars, contentStyle: { padding: this.internalScrollablePadding } }), {
                 default: () => ((0, vue_1.h)("div", { onDragleave: draggable ? this.handleDragLeaveTree : undefined, ref: "selfElRef" }, this.fNodes.map(createNode)))
             }));
         }

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

@@ -1,4 +1,4 @@
-import { type PropType, type ComponentPublicInstance } from 'vue';
+import { type PropType, type ComponentPublicInstance, type VNode } from 'vue';
 import { type TmNode } from './interface';
 declare const TreeNode: import("vue").DefineComponent<{
     clsPrefix: {
@@ -34,10 +34,14 @@ declare const TreeNode: import("vue").DefineComponent<{
     droppingOffsetLevel: import("vue").Ref<number>;
     indent: import("vue").Ref<number>;
     checkboxPlacement: "left" | "right";
+    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/lib/tree/src/TreeNode.js

@@ -28,7 +28,7 @@ const TreeNode = (0, vue_1.defineComponent)({
     setup(props) {
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         const NTree = (0, vue_1.inject)(interface_1.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, renderSwitcherIconRef } = NTree;
         const checkboxDisabledRef = (0, vooks_1.useMemo)(() => !!props.tmNode.rawNode.checkboxDisabled);
         const nodeIsDisabledRef = (0, vooks_1.useMemo)(() => {
             return (0, utils_1.isNodeDisabled)(props.tmNode, disabledFieldRef.value);
@@ -49,29 +49,40 @@ const TreeNode = (0, vue_1.defineComponent)({
             contentElRef.value = contentInstRef.value.$el;
         });
         function handleSwitcherClick() {
-            const { tmNode } = props;
-            if (!tmNode.isLeaf && !tmNode.shallowLoaded) {
-                if (!NTree.loadingKeysRef.value.has(tmNode.key)) {
-                    NTree.loadingKeysRef.value.add(tmNode.key);
+            const callback = () => {
+                const { tmNode } = props;
+                if (!tmNode.isLeaf && !tmNode.shallowLoaded) {
+                    if (!NTree.loadingKeysRef.value.has(tmNode.key)) {
+                        NTree.loadingKeysRef.value.add(tmNode.key);
+                    }
+                    else {
+                        return;
+                    }
+                    const { onLoadRef: { value: onLoad } } = NTree;
+                    if (onLoad) {
+                        void onLoad(tmNode.rawNode)
+                            .then((value) => {
+                            if (value !== false) {
+                                NTree.handleSwitcherClick(tmNode);
+                            }
+                        })
+                            .finally(() => {
+                            NTree.loadingKeysRef.value.delete(tmNode.key);
+                        });
+                    }
                 }
                 else {
-                    return;
-                }
-                const { onLoadRef: { value: onLoad } } = NTree;
-                if (onLoad) {
-                    void onLoad(tmNode.rawNode)
-                        .then((value) => {
-                        if (value !== false) {
-                            NTree.handleSwitcherClick(tmNode);
-                        }
-                    })
-                        .finally(() => {
-                        NTree.loadingKeysRef.value.delete(tmNode.key);
-                    });
+                    NTree.handleSwitcherClick(tmNode);
                 }
+            };
+            if (renderSwitcherIconRef.value) {
+                // if renderSwitcherIcon is set, icon dom may be altered before event
+                // bubbles to parent dom, so that target check fails. Call it in next
+                // event loop so that event bubble phase is finishes.
+                setTimeout(callback, 0);
             }
             else {
-                NTree.handleSwitcherClick(tmNode);
+                callback();
             }
         }
         const selectableRef = (0, vooks_1.useMemo)(() => !nodeIsDisabledRef.value &&
@@ -91,8 +102,9 @@ const TreeNode = (0, vue_1.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);
         });
@@ -183,6 +195,33 @@ const TreeNode = (0, vue_1.defineComponent)({
                 });
             }
         }
+        const indentNodes = (0, vue_1.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((0, vue_1.h)("div", { class: `${clsPrefix}-tree-node-indent` },
+                            (0, vue_1.h)("div", { style: { width: `${indent}px` } })));
+                    }
+                    else {
+                        indentNodes.push((0, vue_1.h)("div", { class: [
+                                `${clsPrefix}-tree-node-indent`,
+                                `${clsPrefix}-tree-node-indent--show-line`
+                            ] },
+                            (0, vue_1.h)("div", { style: { width: `${indent}px` } })));
+                    }
+                    cursor = cursor.parent;
+                }
+                return indentNodes.reverse();
+            }
+            else {
+                return (0, seemly_1.repeat)(props.tmNode.level, (0, vue_1.h)("div", { class: `${props.clsPrefix}-tree-node-indent` },
+                    (0, vue_1.h)("div", { style: { width: `${indent}px` } })));
+            }
+        });
         return {
             showDropMark: (0, vooks_1.useMemo)(() => {
                 const { value: draggingNode } = draggingNodeRef;
@@ -236,8 +275,10 @@ const TreeNode = (0, vue_1.defineComponent)({
             droppingOffsetLevel: droppingOffsetLevelRef,
             indent: indentRef,
             checkboxPlacement: checkboxPlacementRef,
+            showLine: showLineRef,
             contentInstRef,
             contentElRef,
+            indentNodes,
             handleCheck,
             handleDrop,
             handleDragStart,
@@ -251,7 +292,7 @@ const TreeNode = (0, vue_1.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
@@ -267,7 +308,7 @@ const TreeNode = (0, vue_1.defineComponent)({
         // scrolled to, so we need data-key to query the target element.
         const dataKey = internalScrollable ? (0, _utils_1.createDataKey)(tmNode.key) : undefined;
         const checkboxOnRight = checkboxPlacement === 'right';
-        const checkboxNode = checkable ? ((0, vue_1.h)(TreeNodeCheckbox_1.default, { right: checkboxOnRight, focusable: this.checkboxFocusable, disabled: disabled || this.checkboxDisabled, clsPrefix: clsPrefix, checked: this.checked, indeterminate: this.indeterminate, onCheck: this.handleCheck })) : null;
+        const checkboxNode = checkable ? ((0, vue_1.h)(TreeNodeCheckbox_1.default, { indent: indent, right: checkboxOnRight, focusable: this.checkboxFocusable, disabled: disabled || this.checkboxDisabled, clsPrefix: clsPrefix, checked: this.checked, indeterminate: this.indeterminate, onCheck: this.handleCheck })) : null;
         return ((0, vue_1.h)("div", Object.assign({ class: `${clsPrefix}-tree-node-wrapper` }, dragEventHandlers),
             (0, vue_1.h)("div", Object.assign({}, (blockLine ? nodeProps : undefined), { class: [
                     `${clsPrefix}-tree-node`,
@@ -284,9 +325,15 @@ const TreeNode = (0, vue_1.defineComponent)({
                 ], "data-key": dataKey, draggable: draggable && blockLine, onClick: this.handleLineClick, onDragstart: draggable && blockLine && !disabled
                     ? this.handleDragStart
                     : undefined }),
-                (0, seemly_1.repeat)(tmNode.level, (0, vue_1.h)("div", { class: `${clsPrefix}-tree-node-indent` },
-                    (0, vue_1.h)("div", { style: { width: `${indent}px` } }))),
-                (0, vue_1.h)(TreeNodeSwitcher_1.default, { clsPrefix: clsPrefix, expanded: this.expanded, selected: selected, loading: this.loading, hide: tmNode.isLeaf, onClick: this.handleSwitcherClick }),
+                indentNodes,
+                tmNode.isLeaf && this.showLine ? ((0, vue_1.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`
+                    ] },
+                    (0, vue_1.h)("div", { style: { width: `${indent}px` } }))) : ((0, vue_1.h)(TreeNodeSwitcher_1.default, { clsPrefix: clsPrefix, expanded: this.expanded, selected: selected, loading: this.loading, hide: tmNode.isLeaf, tmNode: this.tmNode, indent: indent, onClick: this.handleSwitcherClick })),
                 !checkboxOnRight ? checkboxNode : null,
                 (0, vue_1.h)(TreeNodeContent_1.default, { ref: "contentInstRef", clsPrefix: clsPrefix, checked: checked, selected: selected, onClick: this.handleContentClick, nodeProps: blockLine ? undefined : nodeProps, onDragstart: draggable && !blockLine && !disabled
                         ? this.handleDragStart