naive-ui 2.35.0 → 2.37.0

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/Tree.d.ts

@@ -1,7 +1,7 @@
 import { type PropType, type VNodeChild } from 'vue';
 import { type TreeMateOptions, type CheckStrategy } from 'treemate';
 import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
-import type { TreeDragInfo, TreeDropInfo, TreeOptions, Key, TreeOption, AllowDrop, RenderSwitcherIcon, TreeNodeProps, CheckOnClick, GetChildren, OnLoad } from './interface';
+import type { TreeDragInfo, TreeDropInfo, TreeOptions, Key, TreeOption, AllowDrop, RenderSwitcherIcon, TreeNodeProps, CheckOnClick, GetChildren, OnLoad, TreeOverrideNodeClickBehavior } 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>;
@@ -68,6 +68,7 @@ export declare const treeSharedProps: {
     readonly 'onUpdate:indeterminateKeys': PropType<MaybeArray<OnUpdateIndeterminateKeys>>;
     readonly onUpdateExpandedKeys: PropType<MaybeArray<onUpdateExpandedKeys>>;
     readonly 'onUpdate:expandedKeys': PropType<MaybeArray<onUpdateExpandedKeys>>;
+    readonly overrideDefaultNodeClickBehavior: PropType<TreeOverrideNodeClickBehavior>;
 };
 export declare const treeProps: {
     readonly internalTreeSelect: BooleanConstructor;
@@ -122,6 +123,7 @@ export declare const treeProps: {
     readonly 'onUpdate:indeterminateKeys': PropType<MaybeArray<OnUpdateIndeterminateKeys>>;
     readonly onUpdateExpandedKeys: PropType<MaybeArray<onUpdateExpandedKeys>>;
     readonly 'onUpdate:expandedKeys': PropType<MaybeArray<onUpdateExpandedKeys>>;
+    readonly overrideDefaultNodeClickBehavior: PropType<TreeOverrideNodeClickBehavior>;
     readonly accordion: BooleanConstructor;
     readonly showIrrelevantNodes: {
         readonly type: BooleanConstructor;
@@ -223,6 +225,7 @@ export declare const treeProps: {
         nodeTextColorDisabled: string;
         loadingColor: string;
         dropMarkColor: string;
+        lineColor: string;
     }, {
         Checkbox: import("../../_mixins").Theme<"Checkbox", {
             labelLineHeight: string;
@@ -286,6 +289,7 @@ export declare const treeProps: {
         nodeTextColorDisabled: string;
         loadingColor: string;
         dropMarkColor: string;
+        lineColor: string;
     }, {
         Checkbox: import("../../_mixins").Theme<"Checkbox", {
             labelLineHeight: string;
@@ -349,6 +353,7 @@ export declare const treeProps: {
         nodeTextColorDisabled: string;
         loadingColor: string;
         dropMarkColor: string;
+        lineColor: string;
     }, {
         Checkbox: import("../../_mixins").Theme<"Checkbox", {
             labelLineHeight: string;
@@ -453,6 +458,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly 'onUpdate:indeterminateKeys': PropType<MaybeArray<OnUpdateIndeterminateKeys>>;
     readonly onUpdateExpandedKeys: PropType<MaybeArray<onUpdateExpandedKeys>>;
     readonly 'onUpdate:expandedKeys': PropType<MaybeArray<onUpdateExpandedKeys>>;
+    readonly overrideDefaultNodeClickBehavior: PropType<TreeOverrideNodeClickBehavior>;
     readonly accordion: BooleanConstructor;
     readonly showIrrelevantNodes: {
         readonly type: BooleanConstructor;
@@ -554,6 +560,7 @@ declare const _default: import("vue").DefineComponent<{
         nodeTextColorDisabled: string;
         loadingColor: string;
         dropMarkColor: string;
+        lineColor: string;
     }, {
         Checkbox: import("../../_mixins").Theme<"Checkbox", {
             labelLineHeight: string;
@@ -617,6 +624,7 @@ declare const _default: import("vue").DefineComponent<{
         nodeTextColorDisabled: string;
         loadingColor: string;
         dropMarkColor: string;
+        lineColor: string;
     }, {
         Checkbox: import("../../_mixins").Theme<"Checkbox", {
             labelLineHeight: string;
@@ -680,6 +688,7 @@ declare const _default: import("vue").DefineComponent<{
         nodeTextColorDisabled: string;
         loadingColor: string;
         dropMarkColor: string;
+        lineColor: string;
     }, {
         Checkbox: import("../../_mixins").Theme<"Checkbox", {
             labelLineHeight: string;
@@ -851,6 +860,7 @@ declare const _default: import("vue").DefineComponent<{
             nodeTextColorDisabled: string;
             loadingColor: string;
             dropMarkColor: string;
+            lineColor: string;
         };
         peers: {
             Checkbox: import("../../_mixins").Theme<"Checkbox", {
@@ -1171,7 +1181,7 @@ declare const _default: import("vue").DefineComponent<{
     virtualListInstRef: import("vue").Ref<{
         listElRef: HTMLElement;
         itemsElRef: HTMLElement | null;
-        scrollTo: import("vueuc/lib/virtual-list/src/VirtualList").ScrollTo;
+        scrollTo: import("vueuc").VirtualListScrollTo;
     } | null>;
     scrollbarInstRef: import("vue").Ref<{
         $el: HTMLElement;
@@ -1209,13 +1219,14 @@ declare const _default: import("vue").DefineComponent<{
         '--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;
-    handleKeydown: (e: KeyboardEvent) => void;
-    scrollTo: (options: {
-        key: Key;
-    }) => void;
+    handleKeydown: (e: KeyboardEvent) => {
+        enterBehavoir: import("./interface").TreeOverrideNodeClickBehaviorReturn | null;
+    };
+    scrollTo: import("vueuc").VirtualListScrollTo;
     getCheckedData: () => {
         keys: Key[];
         options: (TreeOption | null)[];
@@ -1277,6 +1288,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly 'onUpdate:indeterminateKeys': PropType<MaybeArray<OnUpdateIndeterminateKeys>>;
     readonly onUpdateExpandedKeys: PropType<MaybeArray<onUpdateExpandedKeys>>;
     readonly 'onUpdate:expandedKeys': PropType<MaybeArray<onUpdateExpandedKeys>>;
+    readonly overrideDefaultNodeClickBehavior: PropType<TreeOverrideNodeClickBehavior>;
     readonly accordion: BooleanConstructor;
     readonly showIrrelevantNodes: {
         readonly type: BooleanConstructor;
@@ -1378,6 +1390,7 @@ declare const _default: import("vue").DefineComponent<{
         nodeTextColorDisabled: string;
         loadingColor: string;
         dropMarkColor: string;
+        lineColor: string;
     }, {
         Checkbox: import("../../_mixins").Theme<"Checkbox", {
             labelLineHeight: string;
@@ -1441,6 +1454,7 @@ declare const _default: import("vue").DefineComponent<{
         nodeTextColorDisabled: string;
         loadingColor: string;
         dropMarkColor: string;
+        lineColor: string;
     }, {
         Checkbox: import("../../_mixins").Theme<"Checkbox", {
             labelLineHeight: string;
@@ -1504,6 +1518,7 @@ declare const _default: import("vue").DefineComponent<{
         nodeTextColorDisabled: string;
         loadingColor: string;
         dropMarkColor: string;
+        lineColor: string;
     }, {
         Checkbox: import("../../_mixins").Theme<"Checkbox", {
             labelLineHeight: string;

package/lib/tree/src/Tree.js

@@ -81,7 +81,8 @@ exports.treeSharedProps = {
     onUpdateIndeterminateKeys: [Function, Array],
     'onUpdate:indeterminateKeys': [Function, Array],
     onUpdateExpandedKeys: [Function, Array],
-    'onUpdate:expandedKeys': [Function, Array]
+    'onUpdate:expandedKeys': [Function, Array],
+    overrideDefaultNodeClickBehavior: Function
 };
 exports.treeProps = Object.assign(Object.assign(Object.assign(Object.assign({}, _mixins_1.useTheme.props), { accordion: Boolean, showIrrelevantNodes: { type: Boolean, default: true }, data: {
         type: Array,
@@ -272,9 +273,11 @@ exports.default = (0, vue_1.defineComponent)({
         const fNodesRef = (0, vue_1.computed)(() => displayTreeMateRef.value.getFlattenedNodes(mergedExpandedKeysRef.value));
         const { pendingNodeKeyRef, handleKeydown } = (0, keyboard_1.useKeyboard)({
             props,
+            mergedCheckedKeysRef,
             mergedSelectedKeysRef,
             fNodesRef,
             mergedExpandedKeysRef,
+            handleCheck,
             handleSelect,
             handleSwitcherClick
         });
@@ -307,7 +310,12 @@ exports.default = (0, vue_1.defineComponent)({
             return droppingNode.parent;
         });
         // shallow watch data
+        let isDataReset = false;
         (0, vue_1.watch)((0, vue_1.toRef)(props, 'data'), () => {
+            isDataReset = true;
+            void (0, vue_1.nextTick)(() => {
+                isDataReset = false;
+            });
             loadingKeysRef.value.clear();
             pendingNodeKeyRef.value = null;
             resetDndState();
@@ -411,6 +419,9 @@ exports.default = (0, vue_1.defineComponent)({
                 void (0, vue_1.nextTick)(syncScrollbar);
                 return;
             }
+            if (isDataReset) {
+                return;
+            }
             const nodeHeight = (0, seemly_1.depx)(themeRef.value.self.nodeHeight);
             const prevVSet = new Set(prevValue);
             let addedKey = null;
@@ -1141,6 +1152,7 @@ exports.default = (0, vue_1.defineComponent)({
             renderSwitcherIconRef: (0, vue_1.toRef)(props, 'renderSwitcherIcon'),
             labelFieldRef: (0, vue_1.toRef)(props, 'labelField'),
             multipleRef: (0, vue_1.toRef)(props, 'multiple'),
+            overrideDefaultNodeClickBehaviorRef: (0, vue_1.toRef)(props, 'overrideDefaultNodeClickBehavior'),
             handleSwitcherClick,
             handleDragEnd,
             handleDragEnter,
@@ -1151,9 +1163,15 @@ exports.default = (0, vue_1.defineComponent)({
             handleSelect,
             handleCheck
         });
-        function scrollTo(options) {
-            var _a;
-            (_a = virtualListInstRef.value) === null || _a === void 0 ? void 0 : _a.scrollTo(options);
+        function scrollTo(options, y) {
+            var _a, _b;
+            if (typeof options === 'number') {
+                (_a = virtualListInstRef.value) === null || _a === void 0 ? void 0 : _a.scrollTo(options, y || 0);
+            }
+            else {
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+                (_b = virtualListInstRef.value) === null || _b === void 0 ? void 0 : _b.scrollTo(options);
+            }
         }
         const exposedMethods = {
             handleKeydown,
@@ -1178,7 +1196,7 @@ 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, nodeWrapperPadding, nodeHeight, lineHeight } } = 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));
@@ -1198,7 +1216,8 @@ exports.default = (0, vue_1.defineComponent)({
                 '--n-line-offset-top': `-${lineOffsetTop}`,
                 '--n-line-offset-bottom': `-${lineOffsetBottom}`,
                 '--n-node-content-height': nodeContentHeight,
-                '--n-line-height': lineHeight
+                '--n-line-height': lineHeight,
+                '--n-line-color': lineColor
             };
         });
         const themeClassHandle = inlineThemeDisabled
@@ -1241,7 +1260,9 @@ exports.default = (0, vue_1.defineComponent)({
                 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: (0, seemly_1.depx)(mergedTheme.self.nodeHeight), 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,

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, showLineRef } = NTree;
+        const { droppingNodeParentRef, droppingMouseNodeRef, draggingNodeRef, droppingPositionRef, droppingOffsetLevelRef, nodePropsRef, indentRef, blockLineRef, checkboxPlacementRef, checkOnClickRef, disabledFieldRef, showLineRef, renderSwitcherIconRef, overrideDefaultNodeClickBehaviorRef } = 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);
@@ -38,7 +38,9 @@ const TreeNode = (0, vue_1.defineComponent)({
             const { value: nodeProps } = nodePropsRef;
             if (!nodeProps)
                 return undefined;
-            return nodeProps({ option: props.tmNode.rawNode });
+            return nodeProps({
+                option: props.tmNode.rawNode
+            });
         });
         // used for drag and drop
         const contentInstRef = (0, vue_1.ref)(null);
@@ -49,29 +51,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 &&
@@ -116,22 +129,50 @@ const TreeNode = (0, vue_1.defineComponent)({
                 handleCheck(!checkedRef.value);
             }
         }
-        function handleContentClick(e) {
+        function handleNodeClick(e) {
             var _a, _b;
+            if (!disabledRef.value) {
+                const overrideDefaultNodeClickBehavior = overrideDefaultNodeClickBehaviorRef.value;
+                let shouldOverride = false;
+                if (overrideDefaultNodeClickBehavior) {
+                    switch (overrideDefaultNodeClickBehavior({ option: props.tmNode.rawNode })) {
+                        case 'toggleCheck':
+                            shouldOverride = true;
+                            handleCheck(!checkedRef.value);
+                            break;
+                        case 'toggleSelect':
+                            shouldOverride = true;
+                            NTree.handleSelect(props.tmNode);
+                            break;
+                        case 'toggleExpand':
+                            shouldOverride = true;
+                            handleSwitcherClick();
+                            shouldOverride = true;
+                            break;
+                        case 'none':
+                            shouldOverride = true;
+                            shouldOverride = true;
+                            return;
+                        case 'default':
+                        default:
+                            break;
+                    }
+                }
+                if (!shouldOverride) {
+                    _handleClick(e);
+                }
+            }
+            (_b = (_a = resolvedNodePropsRef.value) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+        }
+        function handleContentClick(e) {
             if (blockLineRef.value)
                 return;
-            if (!disabledRef.value)
-                _handleClick(e);
-            (_b = (_a = resolvedNodePropsRef.value) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+            handleNodeClick(e);
         }
         function handleLineClick(e) {
-            var _a, _b;
             if (!blockLineRef.value)
                 return;
-            if (!disabledRef.value) {
-                _handleClick(e);
-            }
-            (_b = (_a = resolvedNodePropsRef.value) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+            handleNodeClick(e);
         }
         function handleCheck(checked) {
             NTree.handleCheck(props.tmNode, checked);

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

@@ -136,6 +136,7 @@ declare const _default: import("vue").DefineComponent<{
             nodeTextColorDisabled: string;
             loadingColor: string;
             dropMarkColor: string;
+            lineColor: string;
         };
         peers: {
             Checkbox: import("../../_mixins").Theme<"Checkbox", {

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

@@ -39,7 +39,7 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     hide: boolean;
     expanded: boolean;
-    selected: boolean;
     loading: boolean;
+    selected: boolean;
 }, {}>;
 export default _default;

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

@@ -1,5 +1,6 @@
 import { type CheckStrategy, type TreeNode } from 'treemate';
 import { type HTMLAttributes, type Ref, type VNodeChild } from 'vue';
+import type { VirtualListScrollTo } from 'vueuc';
 import type { MergedTheme } from '../../_mixins';
 import type { TreeTheme } from '../styles';
 export type Key = string | number;
@@ -25,6 +26,10 @@ type RenderTreePart = ({ option, checked, selected }: TreeRenderProps) => VNodeC
 export type RenderLabel = RenderTreePart;
 export type RenderPrefix = RenderTreePart;
 export type RenderSuffix = RenderTreePart;
+export type TreeOverrideNodeClickBehaviorReturn = 'toggleSelect' | 'toggleExpand' | 'toggleCheck' | 'default' | 'none';
+export type TreeOverrideNodeClickBehavior = (info: {
+    option: TreeOption;
+}) => TreeOverrideNodeClickBehaviorReturn;
 export type TreeNodeProps = (info: {
     option: TreeOption;
 }) => HTMLAttributes & Record<string, unknown>;
@@ -98,6 +103,7 @@ export interface TreeInjection {
     checkOnClickRef: Ref<boolean | CheckOnClick>;
     disabledFieldRef: Ref<string>;
     showLineRef: Ref<boolean>;
+    overrideDefaultNodeClickBehaviorRef: Ref<TreeOverrideNodeClickBehavior | undefined>;
     handleSwitcherClick: (node: TreeNode<TreeOption>) => void;
     handleSelect: (node: TreeNode<TreeOption>) => void;
     handleCheck: (node: TreeNode<TreeOption>, checked: boolean) => void;
@@ -117,12 +123,12 @@ export interface MotionData {
     nodes: TmNode[];
 }
 export interface InternalTreeInst {
-    handleKeydown: (e: KeyboardEvent) => void;
+    handleKeydown: (e: KeyboardEvent) => {
+        enterBehavoir: TreeOverrideNodeClickBehaviorReturn | null;
+    };
 }
 export interface TreeInst {
-    scrollTo: (options: {
-        key: Key;
-    }) => void;
+    scrollTo: VirtualListScrollTo;
     getCheckedData: () => {
         keys: Key[];
         options: Array<TreeOption | null>;

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

@@ -1,16 +1,21 @@
 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 }: {
+import { type TreeOverrideNodeClickBehavior, type Key, type TmNode, type TreeOption, type TreeOverrideNodeClickBehaviorReturn } from './interface';
+export declare function useKeyboard({ props, fNodesRef, mergedExpandedKeysRef, mergedSelectedKeysRef, mergedCheckedKeysRef, handleCheck, handleSelect, handleSwitcherClick }: {
     props: {
         keyboard: boolean;
+        overrideDefaultNodeClickBehavior: TreeOverrideNodeClickBehavior | undefined;
     };
     fNodesRef: Ref<Array<TreeNode<TreeOption>>>;
     mergedExpandedKeysRef: Ref<Key[]>;
     mergedSelectedKeysRef: Ref<Key[]>;
+    mergedCheckedKeysRef: Ref<Key[]>;
     handleSelect: (node: TmNode) => void;
     handleSwitcherClick: (node: TmNode) => void;
+    handleCheck: (node: TmNode, checked: boolean) => void;
 }): {
     pendingNodeKeyRef: Ref<null | Key>;
-    handleKeydown: (e: KeyboardEvent) => void;
+    handleKeydown: (e: KeyboardEvent) => {
+        enterBehavoir: TreeOverrideNodeClickBehaviorReturn | null;
+    };
 };

package/lib/tree/src/keyboard.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useKeyboard = void 0;
 const vue_1 = require("vue");
 const interface_1 = require("../../tree-select/src/interface");
-function useKeyboard({ props, fNodesRef, mergedExpandedKeysRef, mergedSelectedKeysRef, handleSelect, handleSwitcherClick }) {
+function useKeyboard({ props, fNodesRef, mergedExpandedKeysRef, mergedSelectedKeysRef, mergedCheckedKeysRef, handleCheck, handleSelect, handleSwitcherClick }) {
     const { value: mergedSelectedKeys } = mergedSelectedKeysRef;
     // If it's used in tree-select, make it take over pending state
     const treeSelectInjection = (0, vue_1.inject)(interface_1.treeSelectInjectionKey, null);
@@ -13,9 +13,11 @@ function useKeyboard({ props, fNodesRef, mergedExpandedKeysRef, mergedSelectedKe
             ? mergedSelectedKeys[mergedSelectedKeys.length - 1]
             : null);
     function handleKeydown(e) {
+        var _a;
         if (!props.keyboard)
-            return;
+            return { enterBehavoir: null };
         const { value: pendingNodeKey } = pendingNodeKeyRef;
+        let enterBehavoir = null;
         if (pendingNodeKey === null) {
             if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
                 e.preventDefault();
@@ -38,9 +40,30 @@ function useKeyboard({ props, fNodesRef, mergedExpandedKeysRef, mergedSelectedKe
             const { value: fNodes } = fNodesRef;
             let fIndex = fNodes.findIndex((tmNode) => tmNode.key === pendingNodeKey);
             if (!~fIndex)
-                return;
+                return { enterBehavoir: null };
             if (e.key === 'Enter') {
-                handleSelect(fNodes[fIndex]);
+                const tmNode = fNodes[fIndex];
+                enterBehavoir =
+                    ((_a = props.overrideDefaultNodeClickBehavior) === null || _a === void 0 ? void 0 : _a.call(props, {
+                        option: tmNode.rawNode
+                    })) || null;
+                switch (enterBehavoir) {
+                    case 'toggleCheck':
+                        handleCheck(tmNode, !mergedCheckedKeysRef.value.includes(tmNode.key));
+                        break;
+                    case 'toggleSelect':
+                        handleSelect(tmNode);
+                        break;
+                    case 'toggleExpand':
+                        handleSwitcherClick(tmNode);
+                        break;
+                    case 'none':
+                        break;
+                    case 'default':
+                    default:
+                        enterBehavoir = 'default';
+                        handleSelect(tmNode);
+                }
             }
             else if (e.key === 'ArrowDown') {
                 e.preventDefault();
@@ -80,7 +103,7 @@ function useKeyboard({ props, fNodesRef, mergedExpandedKeysRef, mergedSelectedKe
             else if (e.key === 'ArrowRight') {
                 const pendingNode = fNodes[fIndex];
                 if (pendingNode.isLeaf)
-                    return;
+                    return { enterBehavoir: null };
                 if (!mergedExpandedKeysRef.value.includes(pendingNodeKey)) {
                     handleSwitcherClick(pendingNode);
                 }
@@ -97,6 +120,9 @@ function useKeyboard({ props, fNodesRef, mergedExpandedKeysRef, mergedSelectedKe
                 }
             }
         }
+        return {
+            enterBehavoir
+        };
     }
     return {
         pendingNodeKeyRef,

package/lib/tree/src/styles/index.cssr.js

@@ -22,6 +22,7 @@ const iconSwitchTransitionNode = (0, icon_switch_cssr_1.iconSwitchTransition)();
 // --n-line-offset-bottom
 // --n-node-content-height
 // --n-line-height
+// --n-line-color
 exports.default = (0, cssr_1.cB)('tree', `
  font-size: var(--n-font-size);
  outline: none;
@@ -53,9 +54,9 @@ exports.default = (0, cssr_1.cB)('tree', `
  min-width: 0;
  `)]), (0, cssr_1.cNotM)('block-line', [(0, cssr_1.cB)('tree-node', [(0, cssr_1.cNotM)('disabled', [(0, cssr_1.cB)('tree-node-content', [(0, cssr_1.c)('&:hover', 'background: var(--n-node-color-hover);')]), (0, cssr_1.cM)('selectable', [(0, cssr_1.cB)('tree-node-content', [(0, cssr_1.c)('&:active', 'background: var(--n-node-color-pressed);')])]), (0, cssr_1.cM)('pending', [(0, cssr_1.cB)('tree-node-content', `
  background: var(--n-node-color-hover);
- `)]), (0, cssr_1.cM)('selected', [(0, cssr_1.cB)('tree-node-content', 'background: var(--n-node-color-active);')])])])]), (0, cssr_1.cM)('block-line', [(0, cssr_1.cB)('tree-node', [(0, cssr_1.cNotM)('disabled', [(0, cssr_1.c)('&:hover', 'background: var(--n-node-color-hover);'), (0, cssr_1.cM)('pending', `
+ `)]), (0, cssr_1.cM)('selected', [(0, cssr_1.cB)('tree-node-content', 'background: var(--n-node-color-active);')])]), (0, cssr_1.cM)('selected', [(0, cssr_1.cB)('tree-node-content', 'background: var(--n-node-color-active);')])])]), (0, cssr_1.cM)('block-line', [(0, cssr_1.cB)('tree-node', [(0, cssr_1.cNotM)('disabled', [(0, cssr_1.c)('&:hover', 'background: var(--n-node-color-hover);'), (0, cssr_1.cM)('pending', `
  background: var(--n-node-color-hover);
- `), (0, cssr_1.cM)('selectable', [(0, cssr_1.cNotM)('selected', [(0, cssr_1.c)('&:active', 'background: var(--n-node-color-pressed);')])]), (0, cssr_1.cM)('selected', 'background: var(--n-node-color-active);')]), (0, cssr_1.cM)('disabled', `
+ `), (0, cssr_1.cM)('selectable', [(0, cssr_1.cNotM)('selected', [(0, cssr_1.c)('&:active', 'background: var(--n-node-color-pressed);')])]), (0, cssr_1.cM)('selected', 'background: var(--n-node-color-active);')]), (0, cssr_1.cM)('selected', 'background: var(--n-node-color-active);'), (0, cssr_1.cM)('disabled', `
  cursor: not-allowed;
  `)])]), (0, cssr_1.cB)('tree-node-indent', `
  flex-grow: 0;
@@ -63,7 +64,7 @@ exports.default = (0, cssr_1.cB)('tree', `
  `, [(0, cssr_1.cM)('show-line', 'position: relative', [(0, cssr_1.c)('&::before', `
  position: absolute;
  left: 50%;
- border-left: 1px solid var(--n-border-color);
+ border-left: 1px solid var(--n-line-color);
  transition: border-color .3s var(--n-bezier);
  transform: translate(-50%);
  content: "";
@@ -78,7 +79,7 @@ exports.default = (0, cssr_1.cB)('tree', `
  right: 0;
  bottom: 50%;
  transition: border-color .3s var(--n-bezier);
- border-bottom: 1px solid var(--n-border-color);
+ border-bottom: 1px solid var(--n-line-color);
  `)])]), (0, cssr_1.cNotM)('show-line', 'height: 0;')]), (0, cssr_1.cB)('tree-node-switcher', `
  cursor: pointer;
  display: inline-flex;

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

@@ -17,3 +17,4 @@ export declare function filterTree(tree: TreeOption[], filter: (pattern: string,
     expandedKeys: Key[];
     highlightKeySet: Set<Key>;
 };
+export declare function treeGetClickTarget(e: MouseEvent): 'checkbox' | 'switcher' | 'node';

package/lib/tree/src/utils.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.filterTree = exports.emptyImage = exports.keysWithFilter = exports.isNodeDisabled = exports.useMergedCheckStrategy = void 0;
+exports.treeGetClickTarget = exports.filterTree = exports.emptyImage = exports.keysWithFilter = exports.isNodeDisabled = exports.useMergedCheckStrategy = void 0;
 const vue_1 = require("vue");
 const _utils_1 = require("../../_utils");
+const seemly_1 = require("seemly");
 function useMergedCheckStrategy(props) {
     return (0, vue_1.computed)(() => (props.leafOnly ? 'child' : props.checkStrategy));
 }
@@ -120,3 +121,15 @@ function filterTree(tree, filter, pattern, keyField, childrenField) {
     };
 }
 exports.filterTree = filterTree;
+function treeGetClickTarget(e) {
+    if ((0, seemly_1.happensIn)(e, 'checkbox')) {
+        return 'checkbox';
+    }
+    else if ((0, seemly_1.happensIn)(e, 'switcher')) {
+        return 'switcher';
+    }
+    else {
+        return 'node';
+    }
+}
+exports.treeGetClickTarget = treeGetClickTarget;

package/lib/tree/styles/light.d.ts

@@ -13,6 +13,7 @@ export declare const self: (vars: ThemeCommonVars) => {
     nodeTextColorDisabled: string;
     loadingColor: string;
     dropMarkColor: string;
+    lineColor: string;
 };
 export type TreeThemeVars = ReturnType<typeof self>;
 declare const treeLight: import("../../_mixins/use-theme").Theme<"Tree", {
@@ -29,6 +30,7 @@ declare const treeLight: import("../../_mixins/use-theme").Theme<"Tree", {
     nodeTextColorDisabled: string;
     loadingColor: string;
     dropMarkColor: string;
+    lineColor: string;
 }, {
     Checkbox: import("../../_mixins/use-theme").Theme<"Checkbox", {
         labelLineHeight: string;