naive-ui 2.35.0 → 2.36.0

package/lib/themes/light.js

@@ -59,32 +59,34 @@ const styles_52 = require("../popconfirm/styles");
 const styles_53 = require("../popover/styles");
 const styles_54 = require("../popselect/styles");
 const styles_55 = require("../progress/styles");
-const styles_56 = require("../radio/styles");
-const styles_57 = require("../rate/styles");
-const styles_58 = require("../result/styles");
-const styles_59 = require("../legacy-grid/styles");
-const styles_60 = require("../_internal/scrollbar/styles");
-const styles_61 = require("../select/styles");
-const styles_62 = require("../skeleton/styles");
-const styles_63 = require("../slider/styles");
-const styles_64 = require("../space/styles");
-const styles_65 = require("../spin/styles");
-const styles_66 = require("../statistic/styles");
-const styles_67 = require("../steps/styles");
-const styles_68 = require("../switch/styles");
-const styles_69 = require("../table/styles");
-const styles_70 = require("../tabs/styles");
-const styles_71 = require("../tag/styles");
-const styles_72 = require("../thing/styles");
-const styles_73 = require("../time-picker/styles");
-const styles_74 = require("../timeline/styles");
-const styles_75 = require("../tooltip/styles");
-const styles_76 = require("../transfer/styles");
-const styles_77 = require("../typography/styles");
-const styles_78 = require("../tree/styles");
-const styles_79 = require("../tree-select/styles");
-const styles_80 = require("../upload/styles");
-const styles_81 = require("../watermark/styles");
+const styles_56 = require("../qr-code/styles");
+const styles_57 = require("../radio/styles");
+const styles_58 = require("../rate/styles");
+const styles_59 = require("../result/styles");
+const styles_60 = require("../legacy-grid/styles");
+const styles_61 = require("../_internal/scrollbar/styles");
+const styles_62 = require("../select/styles");
+const styles_63 = require("../skeleton/styles");
+const styles_64 = require("../slider/styles");
+const styles_65 = require("../space/styles");
+const styles_66 = require("../spin/styles");
+const styles_67 = require("../statistic/styles");
+const styles_68 = require("../steps/styles");
+const styles_69 = require("../switch/styles");
+const styles_70 = require("../table/styles");
+const styles_71 = require("../tabs/styles");
+const styles_72 = require("../tag/styles");
+const styles_73 = require("../thing/styles");
+const styles_74 = require("../time-picker/styles");
+const styles_75 = require("../timeline/styles");
+const styles_76 = require("../tooltip/styles");
+const styles_77 = require("../transfer/styles");
+const styles_78 = require("../typography/styles");
+const styles_79 = require("../tree/styles");
+const styles_80 = require("../tree-select/styles");
+const styles_81 = require("../upload/styles");
+const styles_82 = require("../watermark/styles");
+const styles_83 = require("../split/styles");
 exports.lightTheme = {
     name: 'light',
     common: common_1.commonLight,
@@ -143,30 +145,32 @@ exports.lightTheme = {
     Popover: styles_53.popoverLight,
     Popselect: styles_54.popselectLight,
     Progress: styles_55.progressLight,
-    Radio: styles_56.radioLight,
-    Rate: styles_57.rateLight,
-    Row: styles_59.rowLight,
-    Result: styles_58.resultLight,
-    Scrollbar: styles_60.scrollbarLight,
-    Skeleton: styles_62.skeletonLight,
-    Select: styles_61.selectLight,
-    Slider: styles_63.sliderLight,
-    Space: styles_64.spaceLight,
-    Spin: styles_65.spinLight,
-    Statistic: styles_66.statisticLight,
-    Steps: styles_67.stepsLight,
-    Switch: styles_68.switchLight,
-    Table: styles_69.tableLight,
-    Tabs: styles_70.tabsLight,
-    Tag: styles_71.tagLight,
-    Thing: styles_72.thingLight,
-    TimePicker: styles_73.timePickerLight,
-    Timeline: styles_74.timelineLight,
-    Tooltip: styles_75.tooltipLight,
-    Transfer: styles_76.transferLight,
-    Tree: styles_78.treeLight,
-    TreeSelect: styles_79.treeSelectLight,
-    Typography: styles_77.typographyLight,
-    Upload: styles_80.uploadLight,
-    Watermark: styles_81.watermarkLight
+    QrCode: styles_56.qrcodeLight,
+    Radio: styles_57.radioLight,
+    Rate: styles_58.rateLight,
+    Row: styles_60.rowLight,
+    Result: styles_59.resultLight,
+    Scrollbar: styles_61.scrollbarLight,
+    Skeleton: styles_63.skeletonLight,
+    Select: styles_62.selectLight,
+    Slider: styles_64.sliderLight,
+    Space: styles_65.spaceLight,
+    Spin: styles_66.spinLight,
+    Statistic: styles_67.statisticLight,
+    Steps: styles_68.stepsLight,
+    Switch: styles_69.switchLight,
+    Table: styles_70.tableLight,
+    Tabs: styles_71.tabsLight,
+    Tag: styles_72.tagLight,
+    Thing: styles_73.thingLight,
+    TimePicker: styles_74.timePickerLight,
+    Timeline: styles_75.timelineLight,
+    Tooltip: styles_76.tooltipLight,
+    Transfer: styles_77.transferLight,
+    Tree: styles_79.treeLight,
+    TreeSelect: styles_80.treeSelectLight,
+    Typography: styles_78.typographyLight,
+    Upload: styles_81.uploadLight,
+    Watermark: styles_82.watermarkLight,
+    Split: styles_83.splitLight
 };

package/lib/thing/src/Thing.d.ts

@@ -4,8 +4,10 @@ export declare const thingProps: {
     title: StringConstructor;
     titleExtra: StringConstructor;
     description: StringConstructor;
+    descriptionClass: StringConstructor;
     descriptionStyle: PropType<string | CSSProperties>;
     content: StringConstructor;
+    contentClass: StringConstructor;
     contentStyle: PropType<string | CSSProperties>;
     contentIndented: BooleanConstructor;
     theme: PropType<import("../../_mixins").Theme<"Thing", {
@@ -32,8 +34,10 @@ declare const _default: import("vue").DefineComponent<{
     title: StringConstructor;
     titleExtra: StringConstructor;
     description: StringConstructor;
+    descriptionClass: StringConstructor;
     descriptionStyle: PropType<string | CSSProperties>;
     content: StringConstructor;
+    contentClass: StringConstructor;
     contentStyle: PropType<string | CSSProperties>;
     contentIndented: BooleanConstructor;
     theme: PropType<import("../../_mixins").Theme<"Thing", {
@@ -58,8 +62,10 @@ declare const _default: import("vue").DefineComponent<{
     title: StringConstructor;
     titleExtra: StringConstructor;
     description: StringConstructor;
+    descriptionClass: StringConstructor;
     descriptionStyle: PropType<string | CSSProperties>;
     content: StringConstructor;
+    contentClass: StringConstructor;
     contentStyle: PropType<string | CSSProperties>;
     contentIndented: BooleanConstructor;
     theme: PropType<import("../../_mixins").Theme<"Thing", {

package/lib/thing/src/Thing.js

@@ -8,7 +8,7 @@ const vue_1 = require("vue");
 const _mixins_1 = require("../../_mixins");
 const styles_1 = require("../styles");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
-exports.thingProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { title: String, titleExtra: String, description: String, descriptionStyle: [String, Object], content: String, contentStyle: [String, Object], contentIndented: Boolean });
+exports.thingProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { title: String, titleExtra: String, description: String, descriptionClass: String, descriptionStyle: [String, Object], content: String, contentClass: String, contentStyle: [String, Object], contentIndented: Boolean });
 exports.default = (0, vue_1.defineComponent)({
     name: 'Thing',
     props: exports.thingProps,
@@ -59,7 +59,10 @@ exports.default = (0, vue_1.defineComponent)({
                                 slots['header-extra'] || props.titleExtra ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-thing-header__extra` }, slots['header-extra']
                                     ? slots['header-extra']()
                                     : props.titleExtra)) : null),
-                            slots.description || props.description ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-thing-main__description`, style: props.descriptionStyle }, slots.description
+                            slots.description || props.description ? ((0, vue_1.h)("div", { class: [
+                                    `${mergedClsPrefix}-thing-main__description`,
+                                    props.descriptionClass
+                                ], style: props.descriptionStyle }, slots.description
                                 ? slots.description()
                                 : props.description)) : null)) : null)) : ((0, vue_1.h)(vue_1.Fragment, null,
                         slots.header ||
@@ -70,10 +73,16 @@ exports.default = (0, vue_1.defineComponent)({
                             slots['header-extra'] || props.titleExtra ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-thing-header__extra` }, slots['header-extra']
                                 ? slots['header-extra']()
                                 : props.titleExtra)) : null)) : null,
-                        slots.description || props.description ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-thing-main__description`, style: props.descriptionStyle }, slots.description
+                        slots.description || props.description ? ((0, vue_1.h)("div", { class: [
+                                `${mergedClsPrefix}-thing-main__description`,
+                                props.descriptionClass
+                            ], style: props.descriptionStyle }, slots.description
                             ? slots.description()
                             : props.description)) : null)),
-                    slots.default || props.content ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-thing-main__content`, style: props.contentStyle }, slots.default ? slots.default() : props.content)) : null,
+                    slots.default || props.content ? ((0, vue_1.h)("div", { class: [
+                            `${mergedClsPrefix}-thing-main__content`,
+                            props.contentClass
+                        ], style: props.contentStyle }, slots.default ? slots.default() : props.content)) : null,
                     slots.footer ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-thing-main__footer` }, slots.footer())) : null,
                     slots.action ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-thing-main__action` }, slots.action())) : null)));
         };

package/lib/tooltip/src/Tooltip.d.ts

@@ -103,7 +103,10 @@ export declare const tooltipProps: {
         type: import("vue").PropType<"show" | "if">;
         default: string;
     };
+    arrowClass: StringConstructor;
     arrowStyle: import("vue").PropType<string | import("vue").CSSProperties>;
+    arrowWrapperClass: StringConstructor;
+    arrowWrapperStyle: import("vue").PropType<string | import("vue").CSSProperties>;
     flip: {
         type: BooleanConstructor;
         default: boolean;
@@ -127,8 +130,11 @@ export declare const tooltipProps: {
         default: undefined;
     };
     scrollable: BooleanConstructor;
+    contentClass: StringConstructor;
     contentStyle: import("vue").PropType<string | import("vue").CSSProperties>;
+    headerClass: StringConstructor;
     headerStyle: import("vue").PropType<string | import("vue").CSSProperties>;
+    footerClass: StringConstructor;
     footerStyle: import("vue").PropType<string | import("vue").CSSProperties>;
     onClickoutside: import("vue").PropType<(e: MouseEvent) => void>;
     'onUpdate:show': import("vue").PropType<import("../../_utils").MaybeArray<(value: boolean) => void>>;
@@ -256,7 +262,10 @@ declare const _default: import("vue").DefineComponent<{
         type: import("vue").PropType<"show" | "if">;
         default: string;
     };
+    arrowClass: StringConstructor;
     arrowStyle: import("vue").PropType<string | import("vue").CSSProperties>;
+    arrowWrapperClass: StringConstructor;
+    arrowWrapperStyle: import("vue").PropType<string | import("vue").CSSProperties>;
     flip: {
         type: BooleanConstructor;
         default: boolean;
@@ -280,8 +289,11 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
     scrollable: BooleanConstructor;
+    contentClass: StringConstructor;
     contentStyle: import("vue").PropType<string | import("vue").CSSProperties>;
+    headerClass: StringConstructor;
     headerStyle: import("vue").PropType<string | import("vue").CSSProperties>;
+    footerClass: StringConstructor;
     footerStyle: import("vue").PropType<string | import("vue").CSSProperties>;
     onClickoutside: import("vue").PropType<(e: MouseEvent) => void>;
     'onUpdate:show': import("vue").PropType<import("../../_utils").MaybeArray<(value: boolean) => void>>;
@@ -558,7 +570,10 @@ declare const _default: import("vue").DefineComponent<{
         type: import("vue").PropType<"show" | "if">;
         default: string;
     };
+    arrowClass: StringConstructor;
     arrowStyle: import("vue").PropType<string | import("vue").CSSProperties>;
+    arrowWrapperClass: StringConstructor;
+    arrowWrapperStyle: import("vue").PropType<string | import("vue").CSSProperties>;
     flip: {
         type: BooleanConstructor;
         default: boolean;
@@ -582,8 +597,11 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
     scrollable: BooleanConstructor;
+    contentClass: StringConstructor;
     contentStyle: import("vue").PropType<string | import("vue").CSSProperties>;
+    headerClass: StringConstructor;
     headerStyle: import("vue").PropType<string | import("vue").CSSProperties>;
+    footerClass: StringConstructor;
     footerStyle: import("vue").PropType<string | import("vue").CSSProperties>;
     onClickoutside: import("vue").PropType<(e: MouseEvent) => void>;
     'onUpdate:show': import("vue").PropType<import("../../_utils").MaybeArray<(value: boolean) => void>>;

package/lib/tree/index.d.ts

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

package/lib/tree/index.js

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

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

@@ -223,6 +223,7 @@ export declare const treeProps: {
         nodeTextColorDisabled: string;
         loadingColor: string;
         dropMarkColor: string;
+        lineColor: string;
     }, {
         Checkbox: import("../../_mixins").Theme<"Checkbox", {
             labelLineHeight: string;
@@ -286,6 +287,7 @@ export declare const treeProps: {
         nodeTextColorDisabled: string;
         loadingColor: string;
         dropMarkColor: string;
+        lineColor: string;
     }, {
         Checkbox: import("../../_mixins").Theme<"Checkbox", {
             labelLineHeight: string;
@@ -349,6 +351,7 @@ export declare const treeProps: {
         nodeTextColorDisabled: string;
         loadingColor: string;
         dropMarkColor: string;
+        lineColor: string;
     }, {
         Checkbox: import("../../_mixins").Theme<"Checkbox", {
             labelLineHeight: string;
@@ -554,6 +557,7 @@ declare const _default: import("vue").DefineComponent<{
         nodeTextColorDisabled: string;
         loadingColor: string;
         dropMarkColor: string;
+        lineColor: string;
     }, {
         Checkbox: import("../../_mixins").Theme<"Checkbox", {
             labelLineHeight: string;
@@ -617,6 +621,7 @@ declare const _default: import("vue").DefineComponent<{
         nodeTextColorDisabled: string;
         loadingColor: string;
         dropMarkColor: string;
+        lineColor: string;
     }, {
         Checkbox: import("../../_mixins").Theme<"Checkbox", {
             labelLineHeight: string;
@@ -680,6 +685,7 @@ declare const _default: import("vue").DefineComponent<{
         nodeTextColorDisabled: string;
         loadingColor: string;
         dropMarkColor: string;
+        lineColor: string;
     }, {
         Checkbox: import("../../_mixins").Theme<"Checkbox", {
             labelLineHeight: string;
@@ -851,6 +857,7 @@ declare const _default: import("vue").DefineComponent<{
             nodeTextColorDisabled: string;
             loadingColor: string;
             dropMarkColor: string;
+            lineColor: string;
         };
         peers: {
             Checkbox: import("../../_mixins").Theme<"Checkbox", {
@@ -1209,6 +1216,7 @@ 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;
@@ -1378,6 +1386,7 @@ declare const _default: import("vue").DefineComponent<{
         nodeTextColorDisabled: string;
         loadingColor: string;
         dropMarkColor: string;
+        lineColor: string;
     }, {
         Checkbox: import("../../_mixins").Theme<"Checkbox", {
             labelLineHeight: string;
@@ -1441,6 +1450,7 @@ declare const _default: import("vue").DefineComponent<{
         nodeTextColorDisabled: string;
         loadingColor: string;
         dropMarkColor: string;
+        lineColor: string;
     }, {
         Checkbox: import("../../_mixins").Theme<"Checkbox", {
             labelLineHeight: string;
@@ -1504,6 +1514,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

@@ -1178,7 +1178,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 +1198,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 +1242,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 } = NTree;
         const checkboxDisabledRef = (0, vooks_1.useMemo)(() => !!props.tmNode.rawNode.checkboxDisabled);
         const nodeIsDisabledRef = (0, vooks_1.useMemo)(() => {
             return (0, utils_1.isNodeDisabled)(props.tmNode, disabledFieldRef.value);
@@ -49,29 +49,40 @@ const TreeNode = (0, vue_1.defineComponent)({
             contentElRef.value = contentInstRef.value.$el;
         });
         function handleSwitcherClick() {
-            const { tmNode } = props;
-            if (!tmNode.isLeaf && !tmNode.shallowLoaded) {
-                if (!NTree.loadingKeysRef.value.has(tmNode.key)) {
-                    NTree.loadingKeysRef.value.add(tmNode.key);
+            const callback = () => {
+                const { tmNode } = props;
+                if (!tmNode.isLeaf && !tmNode.shallowLoaded) {
+                    if (!NTree.loadingKeysRef.value.has(tmNode.key)) {
+                        NTree.loadingKeysRef.value.add(tmNode.key);
+                    }
+                    else {
+                        return;
+                    }
+                    const { onLoadRef: { value: onLoad } } = NTree;
+                    if (onLoad) {
+                        void onLoad(tmNode.rawNode)
+                            .then((value) => {
+                            if (value !== false) {
+                                NTree.handleSwitcherClick(tmNode);
+                            }
+                        })
+                            .finally(() => {
+                            NTree.loadingKeysRef.value.delete(tmNode.key);
+                        });
+                    }
                 }
                 else {
-                    return;
-                }
-                const { onLoadRef: { value: onLoad } } = NTree;
-                if (onLoad) {
-                    void onLoad(tmNode.rawNode)
-                        .then((value) => {
-                        if (value !== false) {
-                            NTree.handleSwitcherClick(tmNode);
-                        }
-                    })
-                        .finally(() => {
-                        NTree.loadingKeysRef.value.delete(tmNode.key);
-                    });
+                    NTree.handleSwitcherClick(tmNode);
                 }
+            };
+            if (renderSwitcherIconRef.value) {
+                // if renderSwitcherIcon is set, icon dom may be altered before event
+                // bubbles to parent dom, so that target check fails. Call it in next
+                // event loop so that event bubble phase is finishes.
+                setTimeout(callback, 0);
             }
             else {
-                NTree.handleSwitcherClick(tmNode);
+                callback();
             }
         }
         const selectableRef = (0, vooks_1.useMemo)(() => !nodeIsDisabledRef.value &&

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/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)('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: "";

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;

package/lib/tree/styles/light.js

@@ -8,7 +8,7 @@ const styles_3 = require("../../_internal/scrollbar/styles");
 const common_1 = require("../../_styles/common");
 const use_theme_1 = require("../../_mixins/use-theme");
 const self = (vars) => {
-    const { borderRadiusSmall, hoverColor, pressedColor, primaryColor, textColor3, textColor2, textColorDisabled, fontSize } = vars;
+    const { borderRadiusSmall, dividerColor, hoverColor, pressedColor, primaryColor, textColor3, textColor2, textColorDisabled, fontSize } = vars;
     return {
         fontSize,
         lineHeight: '1.5',
@@ -22,7 +22,8 @@ const self = (vars) => {
         nodeTextColor: textColor2,
         nodeTextColorDisabled: textColorDisabled,
         loadingColor: primaryColor,
-        dropMarkColor: primaryColor
+        dropMarkColor: primaryColor,
+        lineColor: dividerColor
     };
 };
 exports.self = self;