naive-ui 2.22.0 → 2.24.0

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

@@ -44,7 +44,7 @@ const animation = (0, cssr_1.c)([(0, cssr_1.c)('@keyframes transfer-slide-in-fro
  }
  `), (0, cssr_1.c)('@keyframes transfer-height-collapse', `
  0% {
- max-height: var(--item-height);
+ max-height: var(--n-item-height);
  }
  100% {
  max-height: 0;
@@ -54,30 +54,34 @@ const animation = (0, cssr_1.c)([(0, cssr_1.c)('@keyframes transfer-slide-in-fro
  max-height: 0;
  }
  100% {
- max-height: var(--item-height);
+ max-height: var(--n-item-height);
  }
  `)]);
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('transfer', `
  display: flex;
- width: var(--width);
- font-size: var(--font-size);
- `, [(0, cssr_1.cM)('filterable', [(0, cssr_1.cB)('transfer-list', [(0, cssr_1.cB)('transfer-list-body', {
-  height: 'calc(var(--item-height) * 5.6 + 45px)'
-})])]), (0, cssr_1.cB)('transfer-icon', `
- color: var(--icon-color);
- transition: color .3s var(--bezier);
+ width: var(--n-width);
+ font-size: var(--n-font-size);
+ height: 240px;
+ display: flex;
+ flex-wrap: nowrap;
+ `, [(0, cssr_1.cB)('transfer-icon', `
+ color: var(--n-icon-color);
+ transition: color .3s var(--n-bezier);
  `), (0, cssr_1.cM)('disabled', [(0, cssr_1.cB)('transfer-icon', {
-  color: 'var(--icon-color-disabled)'
+  color: 'var(--n-icon-color-disabled)'
 })]), (0, cssr_1.cB)('transfer-list', `
+ height: inherit;
+ display: flex;
+ flex-direction: column;
  background-clip: padding-box;
  width: calc(50% - 36px);
  position: relative;
- transition: background-color .3s var(--bezier);
- border-radius: var(--border-radius);
- background-color: var(--list-color);
+ transition: background-color .3s var(--n-bezier);
+ border-radius: var(--n-border-radius);
+ background-color: var(--n-list-color);
  `, [(0, cssr_1.cE)('border', `
- border: 1px solid var(--border-color);
- transition: border-color .3s var(--bezier);
+ border: 1px solid var(--n-border-color);
+ transition: border-color .3s var(--n-bezier);
  pointer-events: none;
  border-radius: inherit;
  position: absolute;
@@ -86,7 +90,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('transfer', `
  top: 0;
  bottom: 0;
  `), (0, cssr_1.cB)('transfer-list-header', `
- height: calc(var(--item-height) + 4px);
+ height: calc(var(--n-item-height) + 4px);
  box-sizing: border-box;
  display: flex;
  align-items: center;
@@ -94,10 +98,10 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('transfer', `
  border-radius: inherit;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
- background-color: var(--header-color);
+ background-color: var(--n-header-color);
  transition:
- border-color .3s var(--bezier),
- background-color .3s var(--bezier);
+ border-color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier);
  `, [(0, cssr_1.cE)('checkbox', `
  display: flex;
  align-items: center;
@@ -106,20 +110,21 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('transfer', `
  `), (0, cssr_1.cE)('header', `
  flex: 1;
  line-height: 1;
- font-weight: var(--header-font-weight);
- transition: color .3s var(--bezier);
- color: var(--header-text-color);
+ font-weight: var(--n-header-font-weight);
+ transition: color .3s var(--n-bezier);
+ color: var(--n-header-text-color);
  `, [(0, cssr_1.cM)('disabled', {
-  color: 'var(--header-text-color-disabled)'
+  color: 'var(--n-header-text-color-disabled)'
 })]), (0, cssr_1.cE)('extra', `
- transition: color .3s var(--bezier);
- font-size: var(--extra-font-size);
+ transition: color .3s var(--n-bezier);
+ font-size: var(--n-extra-font-size);
  justify-self: flex-end;
  margin-right: 14px;
  white-space: nowrap;
- color: var(--header-extra-text-color);
+ color: var(--n-header-extra-text-color);
  `)]), (0, cssr_1.cB)('transfer-list-body', `
- height: calc(var(--item-height) * 5.6);
+ flex-basis: 0;
+ flex-grow: 1;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
@@ -131,11 +136,11 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('transfer', `
  `, [(0, cssr_1.cB)('transfer-filter', `
  padding: 0 8px 8px 8px;
  box-sizing: border-box;
- background-color: var(--header-color);
+ background-color: var(--n-header-color);
  transition:
- border-color .3s var(--bezier),
- background-color .3s var(--bezier);
- border-bottom: 1px solid var(--filter-divider-color);
+ border-color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier);
+ border-bottom: 1px solid var(--n-filter-divider-color);
  `), (0, cssr_1.cB)('transfer-list-flex-container', `
  flex: 1;
  position: relative;
@@ -160,18 +165,18 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('transfer', `
  `, [(0, cssr_1.cM)('transition-disabled', [(0, cssr_1.cB)('transfer-list-item', {
   animation: 'none !important'
 })]), (0, cssr_1.cB)('transfer-list-item', `
- height: var(--item-height);
- max-height: var(--item-height);
+ height: var(--n-item-height);
+ max-height: var(--n-item-height);
  transition:
- background-color .3s var(--bezier),
- color .3s var(--bezier);
+ background-color .3s var(--n-bezier),
+ color .3s var(--n-bezier);
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
- color: var(--item-text-color);
+ color: var(--n-item-text-color);
  `, [(0, cssr_1.cNotM)('disabled', [(0, cssr_1.c)('&:hover', {
-  backgroundColor: 'var(--item-color-pending)'
+  backgroundColor: 'var(--n-item-color-pending)'
 })]), (0, cssr_1.cE)('extra', `
  text-overflow: ellipsis;
  overflow: hidden;
@@ -185,19 +190,19 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('transfer', `
  `), (0, cssr_1.cM)('disabled', `
  cursor: not-allowed
  background-color: #0000;
- color: var(--item-text-color-disabled);
+ color: var(--n-item-text-color-disabled);
  `), (0, cssr_1.cM)('source', {
   animationFillMode: 'forwards'
 }, [(0, cssr_1.c)('&.item-enter-active', `
  transform: translateX(150%);
  animation-duration: .25s, .25s;
- animation-timing-function: var(--bezier), var(--bezier-ease-out);
+ animation-timing-function: var(--n-bezier), var(--n-bezier-ease-out);
  animation-delay: 0s, .25s;
  animation-name: transfer-height-expand, transfer-slide-in-from-right;
  `), (0, cssr_1.c)('&.item-leave-active', `
  transform: translateX(-150%);
  animation-duration: .25s, .25s;
- animation-timing-function: var(--bezier), var(--bezier-ease-in);
+ animation-timing-function: var(--n-bezier), var(--n-bezier-ease-in);
  animation-delay: .25s, 0s;
  animation-name: transfer-height-collapse, transfer-slide-out-to-right;
  `)]), (0, cssr_1.cM)('target', {
@@ -205,13 +210,13 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('transfer', `
 }, [(0, cssr_1.c)('&.item-enter-active', `
  transform: translateX(-150%);
  animation-duration: .25s, .25s;
- animation-timing-function: var(--bezier), var(--bezier-ease-out);
+ animation-timing-function: var(--n-bezier), var(--n-bezier-ease-out);
  animation-delay: 0s, .25s;
  animation-name: transfer-height-expand, transfer-slide-in-from-left;
  `), (0, cssr_1.c)('&.item-leave-active', `
  transform: translateX(150%);
  animation-duration: .25s, .25s;
- animation-timing-function: var(--bezier), var(--bezier-ease-in);
+ animation-timing-function: var(--n-bezier), var(--n-bezier-ease-in);
  animation-delay: .25s, 0s;
  animation-name: transfer-height-collapse, transfer-slide-out-to-left;
  `)])])])])])]), (0, cssr_1.cB)('transfer-gap', {

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

@@ -1,7 +1,7 @@
 import { PropType } from 'vue';
 import { TreeMate, TreeMateOptions, CheckStrategy } from 'treemate';
 import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
-import { TreeDragInfo, TreeDropInfo, TreeOptions, Key, TreeOption, AllowDrop } from './interface';
+import { TreeDragInfo, TreeDropInfo, TreeOptions, Key, TreeOption, AllowDrop, RenderSwitcherIcon } from './interface';
 import { defaultAllowDrop } from './dnd';
 export declare function createTreeMateOptions<T>(keyField: string, childrenField: string): TreeMateOptions<T, T, T>;
 declare type OnUpdateKeys = (value: Key[], option: Array<TreeOption | null>) => void;
@@ -133,6 +133,7 @@ declare const treeProps: {
     readonly renderLabel: PropType<({ option, checked, selected }: import("./interface").TreeRenderProps) => import("vue").VNodeChild>;
     readonly renderPrefix: PropType<({ option, checked, selected }: import("./interface").TreeRenderProps) => import("vue").VNodeChild>;
     readonly renderSuffix: PropType<({ option, checked, selected }: import("./interface").TreeRenderProps) => import("vue").VNodeChild>;
+    readonly renderSwitcherIcon: PropType<RenderSwitcherIcon>;
     readonly onDragenter: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
     readonly onDragleave: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
     readonly onDragend: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
@@ -381,6 +382,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly renderLabel: PropType<({ option, checked, selected }: import("./interface").TreeRenderProps) => import("vue").VNodeChild>;
     readonly renderPrefix: PropType<({ option, checked, selected }: import("./interface").TreeRenderProps) => import("vue").VNodeChild>;
     readonly renderSuffix: PropType<({ option, checked, selected }: import("./interface").TreeRenderProps) => import("vue").VNodeChild>;
+    readonly renderSwitcherIcon: PropType<RenderSwitcherIcon>;
     readonly onDragenter: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
     readonly onDragleave: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
     readonly onDragend: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
@@ -961,17 +963,17 @@ declare const _default: import("vue").DefineComponent<{
     handleAfterEnter: () => void;
     handleResize: () => void;
     cssVars: import("vue").ComputedRef<{
-        '--arrow-color': string;
-        '--loading-color': string;
-        '--bezier': string;
-        '--font-size': string;
-        '--node-border-radius': string;
-        '--node-color-active': string;
-        '--node-color-hover': string;
-        '--node-color-pressed': string;
-        '--node-text-color': string;
-        '--node-text-color-disabled': string;
-        '--drop-mark-color': string;
+        '--n-arrow-color': string;
+        '--n-loading-color': string;
+        '--n-bezier': string;
+        '--n-font-size': string;
+        '--n-node-border-radius': string;
+        '--n-node-color-active': string;
+        '--n-node-color-hover': string;
+        '--n-node-color-pressed': string;
+        '--n-node-text-color': string;
+        '--n-node-text-color-disabled': string;
+        '--n-drop-mark-color': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly internalScrollable?: unknown;
@@ -1023,6 +1025,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly renderLabel?: unknown;
     readonly renderPrefix?: unknown;
     readonly renderSuffix?: unknown;
+    readonly renderSwitcherIcon?: unknown;
     readonly onDragenter?: unknown;
     readonly onDragleave?: unknown;
     readonly onDragend?: unknown;
@@ -1228,6 +1231,7 @@ declare const _default: import("vue").DefineComponent<{
     onUpdateIndeterminateKeys?: MaybeArray<OnUpdateKeys> | undefined;
     "onUpdate:indeterminateKeys"?: MaybeArray<OnUpdateKeys> | undefined;
     selectedKeys?: Key[] | undefined;
+    renderSwitcherIcon?: RenderSwitcherIcon | undefined;
     onUpdateCheckedKeys?: MaybeArray<OnUpdateKeys> | undefined;
     "onUpdate:checkedKeys"?: MaybeArray<OnUpdateKeys> | undefined;
     onUpdateSelectedKeys?: MaybeArray<OnUpdateKeys> | undefined;

package/lib/tree/src/Tree.js

@@ -104,7 +104,7 @@ const treeProps = Object.assign(Object.assign(Object.assign(Object.assign({}, _m
     }, animated: {
         type: Boolean,
         default: true
-    }, virtualScroll: Boolean, watchProps: Array, renderLabel: Function, renderPrefix: Function, renderSuffix: Function, onDragenter: [Function, Array], onDragleave: [Function, Array], onDragend: [Function, Array], onDragstart: [Function, Array], onDragover: [Function, Array], onDrop: [Function, Array], onUpdateCheckedKeys: [Function, Array], 'onUpdate:checkedKeys': [Function, Array], onUpdateSelectedKeys: [Function, Array], 'onUpdate:selectedKeys': [Function, Array] }), exports.treeSharedProps), { 
+    }, virtualScroll: Boolean, watchProps: Array, renderLabel: Function, renderPrefix: Function, renderSuffix: Function, renderSwitcherIcon: Function, onDragenter: [Function, Array], onDragleave: [Function, Array], onDragend: [Function, Array], onDragstart: [Function, Array], onDragover: [Function, Array], onDrop: [Function, Array], onUpdateCheckedKeys: [Function, Array], 'onUpdate:checkedKeys': [Function, Array], onUpdateSelectedKeys: [Function, Array], 'onUpdate:selectedKeys': [Function, Array] }), exports.treeSharedProps), { 
     // internal props for tree-select
     internalScrollable: Boolean, internalScrollablePadding: String, 
     // use it to do check
@@ -961,6 +961,7 @@ exports.default = (0, vue_1.defineComponent)({
             renderLabelRef: (0, vue_1.toRef)(props, 'renderLabel'),
             renderPrefixRef: (0, vue_1.toRef)(props, 'renderPrefix'),
             renderSuffixRef: (0, vue_1.toRef)(props, 'renderSuffix'),
+            renderSwitcherIconRef: (0, vue_1.toRef)(props, 'renderSwitcherIcon'),
             labelFieldRef: (0, vue_1.toRef)(props, 'labelField'),
             handleSwitcherClick,
             handleDragEnd,
@@ -988,26 +989,27 @@ exports.default = (0, vue_1.defineComponent)({
             handleResize, cssVars: (0, vue_1.computed)(() => {
                 const { common: { cubicBezierEaseInOut }, self: { fontSize, nodeBorderRadius, nodeColorHover, nodeColorPressed, nodeColorActive, arrowColor, loadingColor, nodeTextColor, nodeTextColorDisabled, dropMarkColor } } = themeRef.value;
                 return {
-                    '--arrow-color': arrowColor,
-                    '--loading-color': loadingColor,
-                    '--bezier': cubicBezierEaseInOut,
-                    '--font-size': fontSize,
-                    '--node-border-radius': nodeBorderRadius,
-                    '--node-color-active': nodeColorActive,
-                    '--node-color-hover': nodeColorHover,
-                    '--node-color-pressed': nodeColorPressed,
-                    '--node-text-color': nodeTextColor,
-                    '--node-text-color-disabled': nodeTextColorDisabled,
-                    '--drop-mark-color': dropMarkColor
+                    '--n-arrow-color': arrowColor,
+                    '--n-loading-color': loadingColor,
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-font-size': fontSize,
+                    '--n-node-border-radius': nodeBorderRadius,
+                    '--n-node-color-active': nodeColorActive,
+                    '--n-node-color-hover': nodeColorHover,
+                    '--n-node-color-pressed': nodeColorPressed,
+                    '--n-node-text-color': nodeTextColor,
+                    '--n-node-text-color-disabled': nodeTextColorDisabled,
+                    '--n-drop-mark-color': dropMarkColor
                 };
             }) }, exposedMethods);
     },
     render() {
-        const { mergedClsPrefix, blockNode, blockLine, draggable, disabled, internalFocusable, handleKeyup, handleKeydown, handleFocusout } = this;
+        const { mergedClsPrefix, blockNode, blockLine, draggable, disabled, internalFocusable, checkable, handleKeyup, handleKeydown, handleFocusout } = this;
         const mergedFocusable = internalFocusable && !disabled;
         const tabindex = mergedFocusable ? '0' : undefined;
         const treeClass = [
             `${mergedClsPrefix}-tree`,
+            checkable && `${mergedClsPrefix}-tree--checkable`,
             (blockLine || blockNode) && `${mergedClsPrefix}-tree--block-node`,
             blockLine && `${mergedClsPrefix}-tree--block-line`
         ];

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

@@ -8,7 +8,7 @@ declare const _default: import("vue").DefineComponent<{
     hide: BooleanConstructor;
     loading: BooleanConstructor;
     onClick: PropType<(e: MouseEvent) => void>;
-}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     clsPrefix?: unknown;
     expanded?: unknown;
     hide?: unknown;

package/lib/tree/src/TreeNodeSwitcher.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const vue_1 = require("vue");
 const icons_1 = require("../../_internal/icons");
 const _internal_1 = require("../../_internal");
+const interface_1 = require("./interface");
 exports.default = (0, vue_1.defineComponent)({
     name: 'NTreeSwitcher',
     props: {
@@ -15,18 +16,28 @@ exports.default = (0, vue_1.defineComponent)({
         loading: Boolean,
         onClick: Function
     },
-    render() {
-        const { clsPrefix } = this;
-        return ((0, vue_1.h)("span", { "data-switcher": true, class: [
-                `${clsPrefix}-tree-node-switcher`,
-                {
-                    [`${clsPrefix}-tree-node-switcher--expanded`]: this.expanded,
-                    [`${clsPrefix}-tree-node-switcher--hide`]: this.hide
-                }
-            ], onClick: this.onClick },
-            (0, vue_1.h)("div", { class: `${clsPrefix}-tree-node-switcher__icon` },
-                (0, vue_1.h)(_internal_1.NIconSwitchTransition, null, {
-                    default: () => !this.loading ? ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: clsPrefix, key: "switcher" }, { default: () => (0, vue_1.h)(icons_1.SwitcherIcon, null) })) : ((0, vue_1.h)(_internal_1.NBaseLoading, { clsPrefix: clsPrefix, key: "loading", radius: 85, strokeWidth: 20 }))
-                }))));
+    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;
+            return ((0, vue_1.h)("span", { "data-switcher": true, class: [
+                    `${clsPrefix}-tree-node-switcher`,
+                    {
+                        [`${clsPrefix}-tree-node-switcher--expanded`]: props.expanded,
+                        [`${clsPrefix}-tree-node-switcher--hide`]: props.hide
+                    }
+                ], onClick: props.onClick },
+                (0, vue_1.h)("div", { class: `${clsPrefix}-tree-node-switcher__icon` },
+                    (0, vue_1.h)(_internal_1.NIconSwitchTransition, null, {
+                        default: () => {
+                            if (props.loading) {
+                                return ((0, vue_1.h)(_internal_1.NBaseLoading, { clsPrefix: clsPrefix, key: "loading", radius: 85, strokeWidth: 20 }));
+                            }
+                            const { value: renderSwitcherIcon } = renderSwitcherIconRef;
+                            return renderSwitcherIcon ? (renderSwitcherIcon()) : ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: clsPrefix, key: "switcher" }, { default: () => (0, vue_1.h)(icons_1.SwitcherIcon, null) }));
+                        }
+                    }))));
+        };
     }
 });

package/lib/tree/src/dnd.js

@@ -13,7 +13,7 @@ function renderDropMark({ position, offsetLevel, indent, el }) {
         style.top = 0;
         style.bottom = 0;
         style.borderRadius = 'inherit';
-        style.boxShadow = 'inset 0 0 0 2px var(--drop-mark-color)';
+        style.boxShadow = 'inset 0 0 0 2px var(--n-drop-mark-color)';
     }
     else {
         const cssPosition = position === 'before' ? 'top' : 'bottom';
@@ -22,7 +22,7 @@ function renderDropMark({ position, offsetLevel, indent, el }) {
         // Maybe it is possible to use content left
         style.left = `${el.offsetLeft + 6 - offsetLevel * indent}px`;
         style.height = '2px';
-        style.backgroundColor = 'var(--drop-mark-color)';
+        style.backgroundColor = 'var(--n-drop-mark-color)';
         style.transformOrigin = cssPosition;
         style.borderRadius = '1px';
         style.transform =

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

@@ -51,6 +51,7 @@ export interface InternalDropInfo {
     node: TmNode;
     dropPosition: DropPosition;
 }
+export declare type RenderSwitcherIcon = () => VNodeChild;
 export interface TreeInjection {
     loadingKeysRef: Ref<Set<Key>>;
     highlightKeySetRef: Ref<Set<Key>>;
@@ -81,6 +82,7 @@ export interface TreeInjection {
     renderLabelRef: Ref<RenderLabel | undefined>;
     renderPrefixRef: Ref<RenderPrefix | undefined>;
     renderSuffixRef: Ref<RenderSuffix | undefined>;
+    renderSwitcherIconRef: Ref<RenderSwitcherIcon | undefined>;
     labelFieldRef: Ref<string>;
     handleSwitcherClick: (node: TreeNode<TreeOption>) => void;
     handleSelect: (node: TreeNode<TreeOption>) => void;

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

@@ -15,19 +15,19 @@ const cssr_1 = require("../../../_utils/cssr");
 const icon_switch_cssr_1 = __importDefault(require("../../../_styles/transitions/icon-switch.cssr"));
 
 const fade_in_height_expand_cssr_1 = __importDefault(require("../../../_styles/transitions/fade-in-height-expand.cssr")); // vars:
-// --arrow-color
-// --bezier
-// --font-size
-// --node-border-radius
-// --node-color-active
-// --node-color-hover
-// --node-color-pressed
-// --node-text-color
-// --node-text-color-disabled
+// --n-arrow-color
+// --n-bezier
+// --n-font-size
+// --n-node-border-radius
+// --n-node-color-active
+// --n-node-color-hover
+// --n-node-color-pressed
+// --n-node-text-color
+// --n-node-text-color-disabled
 
 
 exports.default = (0, cssr_1.cB)('tree', `
- font-size: var(--font-size);
+ font-size: var(--n-font-size);
  outline: none;
 `, [(0, cssr_1.c)('ul, li', `
  margin: 0;
@@ -47,33 +47,33 @@ exports.default = (0, cssr_1.cB)('tree', `
  `), (0, cssr_1.cB)('tree-node', `
  position: relative;
  display: flex;
- border-radius: var(--node-border-radius);
- transition: background-color .3s var(--bezier);
+ 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(--node-text-color-disabled)'
+  borderBottomColor: 'var(--n-node-text-color-disabled)'
 })])]), (0, cssr_1.cM)('disabled', [(0, cssr_1.cB)('tree-node-content', `
- color: var(--node-text-color-disabled);
+ color: var(--n-node-text-color-disabled);
  cursor: not-allowed;
  `)]), (0, cssr_1.cNotM)('disabled', [(0, cssr_1.cM)('selectable', [(0, cssr_1.cB)('tree-node-content', `
  cursor: pointer;
  `)])])]), (0, cssr_1.cM)('block-node', [(0, cssr_1.cB)('tree-node-content', `
  width: 100%;
  `)]), (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(--node-color-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(--node-color-pressed)'
+  backgroundColor: 'var(--n-node-color-pressed)'
 })])]), (0, cssr_1.cM)('pending', [(0, cssr_1.cB)('tree-node-content', `
- background-color: var(--node-color-hover);
+ background-color: var(--n-node-color-hover);
  `)]), (0, cssr_1.cM)('selected', [(0, cssr_1.cB)('tree-node-content', {
-  backgroundColor: 'var(--node-color-active)'
+  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(--node-color-hover)'
+  backgroundColor: 'var(--n-node-color-hover)'
 }), (0, cssr_1.cM)('selectable', [(0, cssr_1.c)('&:active', {
-  backgroundColor: 'var(--node-color-pressed)'
+  backgroundColor: 'var(--n-node-color-pressed)'
 })]), (0, cssr_1.cM)('pending', `
- background-color: var(--node-color-hover);
+ background-color: var(--n-node-color-hover);
  `), (0, cssr_1.cM)('selected', {
-  backgroundColor: 'var(--node-color-active)'
+  backgroundColor: 'var(--n-node-color-active)'
 })]), (0, cssr_1.cM)('disabled', `
  cursor: not-allowed;
  `)])]), (0, cssr_1.cB)('tree-node-switcher', `
@@ -84,18 +84,18 @@ exports.default = (0, cssr_1.cB)('tree', `
  width: 24px;
  align-items: center;
  justify-content: center;
- transition: transform .15s var(--bezier);
+ transition: transform .15s var(--n-bezier);
  vertical-align: bottom;
  `, [(0, cssr_1.cE)('icon', `
  position: relative;
  height: 14px;
  width: 14px;
  display: flex;
- color: var(--arrow-color);
- transition: color .3s var(--bezier);
+ color: var(--n-arrow-color);
+ transition: color .3s var(--n-bezier);
  font-size: 14px;
  `, [(0, cssr_1.cB)('icon', [(0, icon_switch_cssr_1.default)()]), (0, cssr_1.cB)('base-loading', `
- color: var(--loading-color);
+ color: var(--n-loading-color);
  position: absolute;
  left: 0;
  top: 0;
@@ -113,7 +113,9 @@ exports.default = (0, cssr_1.cB)('tree', `
  align-items: center;
  justify-content: center;
  margin-right: 4px;
- `), (0, cssr_1.cB)('tree-node-content', `
+ `), (0, cssr_1.cM)('checkable', [(0, cssr_1.cB)('tree-node-content', `
+ padding: 0 6px;
+ `)]), (0, cssr_1.cB)('tree-node-content', `
  position: relative;
  display: inline-flex;
  align-items: center;
@@ -121,17 +123,17 @@ exports.default = (0, cssr_1.cB)('tree', `
  box-sizing: border-box;
  line-height: 1.5;
  vertical-align: bottom;
- padding: 0 6px;
+ padding: 0 6px 0 4px;
  cursor: default;
- border-radius: var(--node-border-radius);
+ border-radius: var(--n-node-border-radius);
  text-decoration-color: #0000;
  text-decoration-line: underline;
- color: var(--node-text-color);
+ color: var(--n-node-text-color);
  transition:
- color .3s var(--bezier),
- text-decoration-color .3s var(--bezier),
- background-color .3s var(--bezier),
- border-color .3s var(--bezier);
+ 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', `
@@ -139,7 +141,7 @@ exports.default = (0, cssr_1.cB)('tree', `
  margin-right: 8px;
  `), (0, cssr_1.cE)('text', `
  border-bottom: 1px solid #0000;
- transition: border-color .3s var(--bezier);
+ transition: border-color .3s var(--n-bezier);
  flex-grow:1;
  `), (0, cssr_1.cE)('suffix', `
  display: inline-flex;

package/lib/tree-select/src/TreeSelect.d.ts

@@ -1075,14 +1075,14 @@ declare const _default: import("vue").DefineComponent<{
     handleTabOut: () => void;
     handleMenuMousedown: (e: MouseEvent) => void;
     cssVars: import("vue").ComputedRef<{
-        '--menu-box-shadow': string;
-        '--menu-border-radius': string;
-        '--menu-color': string;
-        '--menu-height': string;
-        '--bezier': string;
-        '--action-padding': string;
-        '--action-text-color': string;
-        '--action-divider-color': string;
+        '--n-menu-box-shadow': string;
+        '--n-menu-border-radius': string;
+        '--n-menu-color': string;
+        '--n-menu-height': string;
+        '--n-bezier': string;
+        '--n-action-padding': string;
+        '--n-action-text-color': string;
+        '--n-action-divider-color': string;
     }>;
     mergedTheme: import("vue").ComputedRef<{
         common: {

package/lib/tree-select/src/TreeSelect.js

@@ -523,14 +523,14 @@ exports.default = (0, vue_1.defineComponent)({
             cssVars: (0, vue_1.computed)(() => {
                 const { common: { cubicBezierEaseInOut }, self: { menuBoxShadow, menuBorderRadius, menuColor, menuHeight, actionPadding, actionDividerColor, actionTextColor } } = themeRef.value;
                 return {
-                    '--menu-box-shadow': menuBoxShadow,
-                    '--menu-border-radius': menuBorderRadius,
-                    '--menu-color': menuColor,
-                    '--menu-height': menuHeight,
-                    '--bezier': cubicBezierEaseInOut,
-                    '--action-padding': actionPadding,
-                    '--action-text-color': actionTextColor,
-                    '--action-divider-color': actionDividerColor
+                    '--n-menu-box-shadow': menuBoxShadow,
+                    '--n-menu-border-radius': menuBorderRadius,
+                    '--n-menu-color': menuColor,
+                    '--n-menu-height': menuHeight,
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-action-padding': actionPadding,
+                    '--n-action-text-color': actionTextColor,
+                    '--n-action-divider-color': actionDividerColor
                 };
             }),
             mergedTheme: themeRef