naive-ui 2.34.4 → 2.35.0

package/lib/transfer/src/TransferHeader.js

@@ -11,6 +11,8 @@ exports.default = (0, vue_1.defineComponent)({
             type: String,
             required: true
         },
+        selectAllText: String,
+        clearText: String,
         source: Boolean,
         onCheckedAll: Function,
         onClearAll: Function,
@@ -22,7 +24,7 @@ exports.default = (0, vue_1.defineComponent)({
          } = (0, vue_1.inject)(interface_1.transferInjectionKey);
         const { localeRef } = (0, _mixins_1.useLocale)('Transfer');
         return () => {
-            const { source, onClearAll, onCheckedAll } = props;
+            const { source, onClearAll, onCheckedAll, selectAllText, clearText } = props;
             const { value: mergedTheme } = mergedThemeRef;
             const { value: mergedClsPrefix } = mergedClsPrefixRef;
             const { value: locale } = localeRef;
@@ -31,7 +33,9 @@ exports.default = (0, vue_1.defineComponent)({
             return ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-transfer-list-header` },
                 title && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-transfer-list-header__title` }, title)),
                 source && ((0, vue_1.h)(button_1.NButton, { class: `${mergedClsPrefix}-transfer-list-header__button`, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, size: buttonSize, tertiary: true, onClick: allCheckedRef.value ? onClearAll : onCheckedAll, disabled: canNotSelectAnythingRef.value || disabledRef.value }, {
-                    default: () => allCheckedRef.value ? locale.unselectAll : locale.selectAll
+                    default: () => allCheckedRef.value
+                        ? clearText || locale.unselectAll
+                        : selectAllText || locale.selectAll
                 })),
                 !source && canBeClearedRef.value && ((0, vue_1.h)(button_1.NButton, { class: `${mergedClsPrefix}-transfer-list-header__button`, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, size: buttonSize, tertiary: true, onClick: onClearAll, disabled: disabledRef.value }, {
                     default: () => locale.clearAll

package/lib/transfer/src/TransferList.d.ts

@@ -545,5 +545,5 @@ declare const _default: import("vue").DefineComponent<{
     source: BooleanConstructor;
 }>>, {
     source: boolean;
-}>;
+}, {}>;
 export default _default;

package/lib/transfer/src/TransferListItem.d.ts

@@ -525,5 +525,5 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     source: boolean;
     disabled: boolean;
-}>;
+}, {}>;
 export default _default;

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;
@@ -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;
@@ -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/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 } } = 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,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
@@ -1211,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 = [
@@ -1227,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,
@@ -1247,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,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 } = 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

@@ -4,6 +4,10 @@ declare const _default: import("vue").DefineComponent<{
         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,
@@ -27,12 +31,7 @@ exports.default = (0, vue_1.defineComponent)({
             }
         }
         function handleUpdateValue(value) {
-            if (props.indeterminate) {
-                doCheck(false);
-            }
-            else {
-                doCheck(value);
-            }
+            doCheck(value);
         }
         return {
             handleUpdateValue,
@@ -40,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

@@ -41,5 +41,5 @@ declare const _default: import("vue").DefineComponent<{
     disabled: boolean;
     checked: boolean;
     selected: boolean;
-}>;
+}, {}>;
 export default _default;