naive-ui 2.34.4 → 2.36.0

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;
@@ -129,6 +136,7 @@ declare const _default: import("vue").DefineComponent<{
             nodeTextColorDisabled: string;
             loadingColor: string;
             dropMarkColor: string;
+            lineColor: string;
         };
         peers: {
             Checkbox: import("../../_mixins").Theme<"Checkbox", {
@@ -202,6 +210,10 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         required: true;
     };
+    indent: {
+        type: NumberConstructor;
+        required: true;
+    };
     right: BooleanConstructor;
     focusable: BooleanConstructor;
     disabled: BooleanConstructor;
@@ -214,5 +226,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;

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

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

package/lib/tree/src/TreeNodeSwitcher.js

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

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

@@ -56,6 +56,7 @@ export interface InternalDropInfo {
 export type RenderSwitcherIcon = (props: {
     expanded: boolean;
     selected: boolean;
+    option: TreeOption;
 }) => VNodeChild;
 export type CheckOnClick = (option: TreeOption) => boolean;
 export interface TreeInjection {
@@ -96,6 +97,7 @@ export interface TreeInjection {
     internalTreeSelect: boolean;
     checkOnClickRef: Ref<boolean | CheckOnClick>;
     disabledFieldRef: Ref<string>;
+    showLineRef: Ref<boolean>;
     handleSwitcherClick: (node: TreeNode<TreeOption>) => void;
     handleSelect: (node: TreeNode<TreeOption>) => void;
     handleCheck: (node: TreeNode<TreeOption>, checked: boolean) => void;

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 const cssr_1 = require("../../../_utils/cssr");
 const icon_switch_cssr_1 = require("../../../_styles/transitions/icon-switch.cssr");
 const fade_in_height_expand_cssr_1 = require("../../../_styles/transitions/fade-in-height-expand.cssr");
+const iconSwitchTransitionNode = (0, icon_switch_cssr_1.iconSwitchTransition)();
 // vars:
 // --n-arrow-color
 // --n-bezier
@@ -16,6 +17,12 @@ const fade_in_height_expand_cssr_1 = require("../../../_styles/transitions/fade-
 // --n-node-color-pressed
 // --n-node-text-color
 // --n-node-text-color-disabled
+// --n-node-wrapper-padding
+// --n-line-offset-top
+// --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;
@@ -23,29 +30,21 @@ exports.default = (0, cssr_1.cB)('tree', `
  margin: 0;
  padding: 0;
  list-style: none;
- `), (0, cssr_1.c)('>', [(0, cssr_1.cB)('tree-node', [(0, cssr_1.c)('&:first-child', {
-  marginTop: 0
-})])]), (0, cssr_1.cB)('tree-node-indent', `
- flex-grow: 0;
- flex-shrink: 0;
- height: 0;
- `), (0, cssr_1.cB)('tree-motion-wrapper', [(0, cssr_1.cM)('expand', [(0, fade_in_height_expand_cssr_1.fadeInHeightExpandTransition)({
+ `), (0, cssr_1.c)('>', [(0, cssr_1.cB)('tree-node', [(0, cssr_1.c)('&:first-child', 'margin-top: 0;')])]), (0, cssr_1.cB)('tree-motion-wrapper', [(0, cssr_1.cM)('expand', [(0, fade_in_height_expand_cssr_1.fadeInHeightExpandTransition)({
   duration: '0.2s'
 })]), (0, cssr_1.cM)('collapse', [(0, fade_in_height_expand_cssr_1.fadeInHeightExpandTransition)({
   duration: '0.2s',
   reverse: true
 })])]), (0, cssr_1.cB)('tree-node-wrapper', `
  box-sizing: border-box;
- padding: 3px 0;
+ padding: var(--n-node-wrapper-padding);
  `), (0, cssr_1.cB)('tree-node', `
  transform: translate3d(0,0,0);
  position: relative;
  display: flex;
  border-radius: var(--n-node-border-radius);
  transition: background-color .3s var(--n-bezier);
- `, [(0, cssr_1.cM)('highlight', [(0, cssr_1.cB)('tree-node-content', [(0, cssr_1.cE)('text', {
-  borderBottomColor: 'var(--n-node-text-color-disabled)'
-})])]), (0, cssr_1.cM)('disabled', [(0, cssr_1.cB)('tree-node-content', `
+ `, [(0, cssr_1.cM)('highlight', [(0, cssr_1.cB)('tree-node-content', [(0, cssr_1.cE)('text', 'border-bottom-color: var(--n-node-text-color-disabled);')])]), (0, cssr_1.cM)('disabled', [(0, cssr_1.cB)('tree-node-content', `
  color: var(--n-node-text-color-disabled);
  cursor: not-allowed;
  `)]), (0, cssr_1.cNotM)('disabled', [(0, cssr_1.cM)('clickable', [(0, cssr_1.cB)('tree-node-content', `
@@ -53,30 +52,39 @@ exports.default = (0, cssr_1.cB)('tree', `
  `)])])]), (0, cssr_1.cM)('block-node', [(0, cssr_1.cB)('tree-node-content', `
  flex: 1;
  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', {
-  backgroundColor: 'var(--n-node-color-hover)'
-})]), (0, cssr_1.cM)('selectable', [(0, cssr_1.cB)('tree-node-content', [(0, cssr_1.c)('&:active', {
-  backgroundColor: 'var(--n-node-color-pressed)'
-})])]), (0, cssr_1.cM)('pending', [(0, cssr_1.cB)('tree-node-content', `
- background-color: var(--n-node-color-hover);
- `)]), (0, cssr_1.cM)('selected', [(0, cssr_1.cB)('tree-node-content', {
-  backgroundColor: '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', {
-  backgroundColor: 'var(--n-node-color-hover)'
-}), (0, cssr_1.cM)('pending', `
- background-color: var(--n-node-color-hover);
- `), (0, cssr_1.cM)('selectable', [(0, cssr_1.cNotM)('selected', [(0, cssr_1.c)('&:active', {
-  backgroundColor: 'var(--n-node-color-pressed)'
-})])]), (0, cssr_1.cM)('selected', {
-  backgroundColor: 'var(--n-node-color-active)'
-})]), (0, cssr_1.cM)('disabled', `
+ `)]), (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', `
+ 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)('selected', 'background: var(--n-node-color-active);'), (0, cssr_1.cM)('disabled', `
  cursor: not-allowed;
- `)])]), (0, cssr_1.cB)('tree-node-switcher', `
+ `)])]), (0, cssr_1.cB)('tree-node-indent', `
+ flex-grow: 0;
+ flex-shrink: 0;
+ `, [(0, cssr_1.cM)('show-line', 'position: relative', [(0, cssr_1.c)('&::before', `
+ position: absolute;
+ left: 50%;
+ border-left: 1px solid var(--n-line-color);
+ transition: border-color .3s var(--n-bezier);
+ transform: translate(-50%);
+ content: "";
+ top: var(--n-line-offset-top);
+ bottom: var(--n-line-offset-bottom);
+ `), (0, cssr_1.cM)('last-child', [(0, cssr_1.c)('&::before', `
+ bottom: 50%;
+ `)]), (0, cssr_1.cM)('is-leaf', [(0, cssr_1.c)('&::after', `
+ position: absolute;
+ content: "";
+ left: calc(50% + 0.5px);
+ right: 0;
+ bottom: 50%;
+ transition: border-color .3s var(--n-bezier);
+ border-bottom: 1px solid var(--n-border-color);
+ `)])]), (0, cssr_1.cNotM)('show-line', 'height: 0;')]), (0, cssr_1.cB)('tree-node-switcher', `
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
- height: 24px;
- width: 24px;
+ height: var(--n-node-content-height);
  align-items: center;
  justify-content: center;
  transition: transform .15s var(--n-bezier);
@@ -89,49 +97,37 @@ exports.default = (0, cssr_1.cB)('tree', `
  color: var(--n-arrow-color);
  transition: color .3s var(--n-bezier);
  font-size: 14px;
- `, [(0, cssr_1.cB)('icon', [(0, icon_switch_cssr_1.iconSwitchTransition)()]), (0, cssr_1.cB)('base-loading', `
+ `, [(0, cssr_1.cB)('icon', [iconSwitchTransitionNode]), (0, cssr_1.cB)('base-loading', `
  color: var(--n-loading-color);
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
- `, [(0, icon_switch_cssr_1.iconSwitchTransition)()]), (0, cssr_1.cB)('base-icon', [(0, icon_switch_cssr_1.iconSwitchTransition)()])]), (0, cssr_1.cM)('hide', {
-  visibility: 'hidden'
-}), (0, cssr_1.cM)('expanded', {
-  transform: 'rotate(90deg)'
-})]), (0, cssr_1.cB)('tree-node-checkbox', `
+ `, [iconSwitchTransitionNode]), (0, cssr_1.cB)('base-icon', [iconSwitchTransitionNode])]), (0, cssr_1.cM)('hide', 'visibility: hidden;'), (0, cssr_1.cM)('expanded', 'transform: rotate(90deg);')]), (0, cssr_1.cB)('tree-node-checkbox', `
  display: inline-flex;
- height: 24px;
- width: 16px;
+ height: var(--n-node-content-height);
  vertical-align: bottom;
  align-items: center;
  justify-content: center;
- margin-right: 4px;
- `, [(0, cssr_1.cM)('right', 'margin-left: 4px;')]), (0, cssr_1.cM)('checkable', [(0, cssr_1.cB)('tree-node-content', `
- padding: 0 6px;
- `)]), (0, cssr_1.cB)('tree-node-content', `
+ `), (0, cssr_1.cB)('tree-node-content', `
+ user-select: none;
  position: relative;
  display: inline-flex;
  align-items: center;
- min-height: 24px;
+ min-height: var(--n-node-content-height);
  box-sizing: border-box;
- line-height: 1.5;
+ line-height: var(--n-line-height);
  vertical-align: bottom;
  padding: 0 6px 0 4px;
  cursor: default;
  border-radius: var(--n-node-border-radius);
- text-decoration-color: #0000;
- text-decoration-line: underline;
  color: var(--n-node-text-color);
  transition:
  color .3s var(--n-bezier),
- text-decoration-color .3s var(--n-bezier),
  background-color .3s var(--n-bezier),
  border-color .3s var(--n-bezier);
- `, [(0, cssr_1.c)('&:last-child', {
-  marginBottom: 0
-}), (0, cssr_1.cE)('prefix', `
+ `, [(0, cssr_1.c)('&:last-child', 'margin-bottom: 0;'), (0, cssr_1.cE)('prefix', `
  display: inline-flex;
  margin-right: 8px;
  `), (0, cssr_1.cE)('text', `

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));
 }
@@ -48,6 +49,7 @@ const emptyImage = null;
 exports.emptyImage = emptyImage;
 if (_utils_1.isBrowser && Image) {
     const emptyImage = new Image();
+    exports.emptyImage = emptyImage;
     emptyImage.src =
         'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
 }
@@ -119,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

@@ -1,6 +1,9 @@
 import type { ThemeCommonVars } from '../../_styles/common';
 export declare const self: (vars: ThemeCommonVars) => {
     fontSize: string;
+    lineHeight: string;
+    nodeHeight: string;
+    nodeWrapperPadding: string;
     nodeBorderRadius: string;
     nodeColorHover: string;
     nodeColorPressed: string;
@@ -10,10 +13,14 @@ 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", {
     fontSize: string;
+    lineHeight: string;
+    nodeHeight: string;
+    nodeWrapperPadding: string;
     nodeBorderRadius: string;
     nodeColorHover: string;
     nodeColorPressed: string;
@@ -23,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,9 +8,12 @@ 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',
+        nodeHeight: '30px',
+        nodeWrapperPadding: '3px 0',
         nodeBorderRadius: borderRadiusSmall,
         nodeColorHover: hoverColor,
         nodeColorPressed: pressedColor,
@@ -19,7 +22,8 @@ const self = (vars) => {
         nodeTextColor: textColor2,
         nodeTextColorDisabled: textColorDisabled,
         loadingColor: primaryColor,
-        dropMarkColor: primaryColor
+        dropMarkColor: primaryColor,
+        lineColor: dividerColor
     };
 };
 exports.self = self;