naive-ui 2.34.3 → 2.35.0

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);
@@ -364,7 +364,8 @@ exports.default = (0, vue_1.defineComponent)({
                     if (process.env.NODE_ENV !== 'production') {
                         (0, _utils_1.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)) {
@@ -410,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;
@@ -435,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) {
@@ -464,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)
@@ -488,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)
@@ -1128,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'),
@@ -1175,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 } } = 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,
@@ -1187,7 +1193,12 @@ 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
             };
         });
         const themeClassHandle = inlineThemeDisabled
@@ -1210,7 +1221,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 = [
@@ -1226,11 +1237,11 @@ 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 ((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,
@@ -1246,7 +1257,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,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/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 } = 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);
@@ -91,8 +91,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 +184,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 +264,10 @@ const TreeNode = (0, vue_1.defineComponent)({
             droppingOffsetLevel: droppingOffsetLevelRef,
             indent: indentRef,
             checkboxPlacement: checkboxPlacementRef,
+            showLine: showLineRef,
             contentInstRef,
             contentElRef,
+            indentNodes,
             handleCheck,
             handleDrop,
             handleDragStart,
@@ -251,7 +281,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 +297,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 +314,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

package/lib/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/lib/tree/src/TreeNodeCheckbox.js

@@ -10,6 +10,10 @@ exports.default = (0, vue_1.defineComponent)({
             type: String,
             required: true
         },
+        indent: {
+            type: Number,
+            required: true
+        },
         right: Boolean,
         focusable: Boolean,
         disabled: Boolean,
@@ -22,16 +26,12 @@ exports.default = (0, vue_1.defineComponent)({
         const NTree = (0, vue_1.inject)(interface_1.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,
@@ -39,11 +39,13 @@ exports.default = (0, vue_1.defineComponent)({
         };
     },
     render() {
-        const { clsPrefix, mergedTheme, checked, indeterminate, disabled, focusable, handleUpdateValue } = this;
+        const { clsPrefix, mergedTheme, checked, indeterminate, disabled, focusable, indent, handleUpdateValue } = this;
         return ((0, vue_1.h)("span", { class: [
                 `${clsPrefix}-tree-node-checkbox`,
                 this.right && `${clsPrefix}-tree-node-checkbox--right`
-            ], "data-checkbox": true },
+            ], style: {
+                width: `${indent}px`
+            }, "data-checkbox": true },
             (0, vue_1.h)(checkbox_1.NCheckbox, { focusable: focusable, disabled: disabled, theme: mergedTheme.peers.Checkbox, themeOverrides: mergedTheme.peerOverrides.Checkbox, checked: checked, indeterminate: indeterminate, onUpdateChecked: handleUpdateValue })));
     }
 });

package/lib/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;

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

@@ -1,28 +1,45 @@
-import { PropType } from 'vue';
+import { type PropType } from 'vue';
+import { type TmNode } from './interface';
 declare const _default: import("vue").DefineComponent<{
     clsPrefix: {
         type: StringConstructor;
         required: true;
     };
+    indent: {
+        type: NumberConstructor;
+        required: true;
+    };
     expanded: BooleanConstructor;
     selected: BooleanConstructor;
     hide: BooleanConstructor;
     loading: BooleanConstructor;
     onClick: PropType<(e: MouseEvent) => void>;
+    tmNode: {
+        type: PropType<TmNode>;
+        required: true;
+    };
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     clsPrefix: {
         type: StringConstructor;
         required: true;
     };
+    indent: {
+        type: NumberConstructor;
+        required: true;
+    };
     expanded: BooleanConstructor;
     selected: BooleanConstructor;
     hide: BooleanConstructor;
     loading: BooleanConstructor;
     onClick: PropType<(e: MouseEvent) => void>;
+    tmNode: {
+        type: PropType<TmNode>;
+        required: true;
+    };
 }>>, {
     hide: boolean;
     expanded: boolean;
     selected: boolean;
     loading: boolean;
-}>;
+}, {}>;
 export default _default;

package/lib/tree/src/TreeNodeSwitcher.js

@@ -11,22 +11,27 @@ exports.default = (0, vue_1.defineComponent)({
             type: String,
             required: true
         },
+        indent: { type: Number, required: true },
         expanded: Boolean,
         selected: Boolean,
         hide: Boolean,
         loading: Boolean,
-        onClick: Function
+        onClick: Function,
+        tmNode: {
+            type: Object,
+            required: true
+        }
     },
     setup(props) {
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         const { renderSwitcherIconRef } = (0, vue_1.inject)(interface_1.treeInjectionKey, null);
         return () => {
-            const { clsPrefix } = props;
+            const { clsPrefix, expanded, hide, indent, onClick } = props;
             return ((0, vue_1.h)("span", { "data-switcher": true, class: [
                     `${clsPrefix}-tree-node-switcher`,
-                    props.expanded && `${clsPrefix}-tree-node-switcher--expanded`,
-                    props.hide && `${clsPrefix}-tree-node-switcher--hide`
-                ], onClick: props.onClick },
+                    expanded && `${clsPrefix}-tree-node-switcher--expanded`,
+                    hide && `${clsPrefix}-tree-node-switcher--hide`
+                ], style: { width: `${indent}px` }, onClick: onClick },
                 (0, vue_1.h)("div", { class: `${clsPrefix}-tree-node-switcher__icon` },
                     (0, vue_1.h)(_internal_1.NIconSwitchTransition, null, {
                         default: () => {
@@ -36,7 +41,8 @@ exports.default = (0, vue_1.defineComponent)({
                             const { value: renderSwitcherIcon } = renderSwitcherIconRef;
                             return renderSwitcherIcon ? (renderSwitcherIcon({
                                 expanded: props.expanded,
-                                selected: props.selected
+                                selected: props.selected,
+                                option: props.tmNode.rawNode
                             })) : ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: clsPrefix, key: "switcher" }, { default: () => (0, vue_1.h)(icons_1.SwitcherIcon, null) }));
                         }
                     }))));

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

@@ -1,5 +1,5 @@
-import { VNode } from 'vue';
-import { DropPosition, TreeOption } from './interface';
+import { type VNode } from 'vue';
+import { type DropPosition, type TreeOption } from './interface';
 export declare function renderDropMark({ position, offsetLevel, indent, el }: {
     position: 'before' | 'inside' | 'after';
     offsetLevel: number;

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

@@ -1,5 +1,5 @@
-import { CheckStrategy, TreeNode } from 'treemate';
-import { HTMLAttributes, Ref, VNodeChild } from 'vue';
+import { type CheckStrategy, type TreeNode } from 'treemate';
+import { type HTMLAttributes, type Ref, type VNodeChild } from 'vue';
 import type { MergedTheme } from '../../_mixins';
 import type { TreeTheme } from '../styles';
 export type Key = string | number;
@@ -56,6 +56,7 @@ export interface InternalDropInfo {
 export type RenderSwitcherIcon = (props: {
     expanded: boolean;
     selected: boolean;
+    option: TreeOption;
 }) => VNodeChild;
 export type CheckOnClick = (option: TreeOption) => boolean;
 export interface TreeInjection {
@@ -96,6 +97,7 @@ export interface TreeInjection {
     internalTreeSelect: boolean;
     checkOnClickRef: Ref<boolean | CheckOnClick>;
     disabledFieldRef: Ref<string>;
+    showLineRef: Ref<boolean>;
     handleSwitcherClick: (node: TreeNode<TreeOption>) => void;
     handleSelect: (node: TreeNode<TreeOption>) => void;
     handleCheck: (node: TreeNode<TreeOption>, checked: boolean) => void;

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

@@ -1,6 +1,6 @@
-import { Ref } from 'vue';
-import { TreeNode } from 'treemate';
-import { Key, TmNode, TreeOption } from './interface';
+import { type Ref } from 'vue';
+import { type TreeNode } from 'treemate';
+import { type Key, type TmNode, type TreeOption } from './interface';
 export declare function useKeyboard({ props, fNodesRef, mergedExpandedKeysRef, mergedSelectedKeysRef, handleSelect, handleSwitcherClick }: {
     props: {
         keyboard: boolean;