naive-ui 2.21.5 → 2.22.0

package/lib/popselect/src/PopselectPanel.d.ts

@@ -26,11 +26,7 @@ export declare const panelProps: {
     readonly onMouseenter: PropType<(e: MouseEvent) => void>;
     readonly onMouseleave: PropType<(e: MouseEvent) => void>;
     readonly renderLabel: PropType<RenderLabel>;
-    readonly onChange: {
-        readonly type: PropType<MaybeArray<OnUpdateValue> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
+    readonly onChange: PropType<MaybeArray<OnUpdateValue> | undefined>;
 };
 export declare const panelPropKeys: ("value" | "size" | "width" | "multiple" | "onChange" | "onMouseenter" | "onMouseleave" | "scrollable" | "renderLabel" | "options" | "onUpdate:value" | "onUpdateValue" | "cancelable")[];
 declare const _default: import("vue").DefineComponent<{
@@ -55,11 +51,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly onMouseenter: PropType<(e: MouseEvent) => void>;
     readonly onMouseleave: PropType<(e: MouseEvent) => void>;
     readonly renderLabel: PropType<RenderLabel>;
-    readonly onChange: {
-        readonly type: PropType<MaybeArray<OnUpdateValue> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
+    readonly onChange: PropType<MaybeArray<OnUpdateValue> | undefined>;
 }, {
     mergedTheme: import("vue").Ref<{
         common: {
@@ -266,6 +258,7 @@ declare const _default: import("vue").DefineComponent<{
     mergedClsPrefix: import("vue").ComputedRef<string>;
     treeMate: import("vue").ComputedRef<import("treemate").TreeMate<SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)>, SelectGroupOption, SelectIgnoredOption>>;
     handleToggle: (tmNode: TreeNode<SelectBaseOption>) => void;
+    handleMenuMousedown: (e: MouseEvent) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly multiple?: unknown;
     readonly value?: unknown;
@@ -299,7 +292,6 @@ declare const _default: import("vue").DefineComponent<{
     value: Value | null;
     size: PopselectSize;
     multiple: boolean;
-    onChange: MaybeArray<OnUpdateValue> | undefined;
     scrollable: boolean;
     options: SelectMixedOption[];
     cancelable: boolean;

package/lib/popselect/src/PopselectPanel.js

@@ -4,6 +4,7 @@ exports.panelPropKeys = exports.panelProps = void 0;
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 const vue_1 = require("vue");
 const treemate_1 = require("treemate");
+const seemly_1 = require("seemly");
 const utils_1 = require("../../select/src/utils");
 const _mixins_1 = require("../../_mixins");
 const _internal_1 = require("../../_internal");
@@ -32,20 +33,20 @@ exports.panelProps = {
     onMouseleave: Function,
     renderLabel: Function,
     // deprecated
-    onChange: {
-        type: [Function, Array],
-        validator: () => {
-            (0, _utils_1.warn)('popselect', '`on-change` is deprecated, please use `on-update:value` instead.');
-            return true;
-        },
-        default: undefined
-    }
+    onChange: [Function, Array]
 };
 exports.panelPropKeys = (0, _utils_1.keysOf)(exports.panelProps);
 exports.default = (0, vue_1.defineComponent)({
     name: 'PopselectPanel',
     props: exports.panelProps,
     setup(props) {
+        if (process.env.NODE_ENV !== 'production') {
+            (0, vue_1.watchEffect)(() => {
+                if (props.onChange !== undefined) {
+                    (0, _utils_1.warn)('popselect', '`on-change` is deprecated, please use `on-update:value` instead.');
+                }
+            });
+        }
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         const NPopselect = (0, vue_1.inject)(interface_1.popselectInjectionKey);
         const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
@@ -65,6 +66,10 @@ exports.default = (0, vue_1.defineComponent)({
         function handleToggle(tmNode) {
             toggle(tmNode.key);
         }
+        function handleMenuMousedown(e) {
+            if (!(0, seemly_1.happensIn)(e, 'action'))
+                e.preventDefault();
+        }
         function toggle(value) {
             const { value: { getNode } } = treeMateRef;
             if (props.multiple) {
@@ -121,10 +126,11 @@ exports.default = (0, vue_1.defineComponent)({
             mergedTheme: NPopselect.mergedThemeRef,
             mergedClsPrefix: mergedClsPrefixRef,
             treeMate: treeMateRef,
-            handleToggle
+            handleToggle,
+            handleMenuMousedown
         };
     },
     render() {
-        return ((0, vue_1.h)(_internal_1.NInternalSelectMenu, { clsPrefix: this.mergedClsPrefix, theme: this.mergedTheme.peers.InternalSelectMenu, themeOverrides: this.mergedTheme.peerOverrides.InternalSelectMenu, multiple: this.multiple, treeMate: this.treeMate, size: this.size, value: this.value, width: this.width, virtualScroll: false, scrollable: this.scrollable, renderLabel: this.renderLabel, onToggle: this.handleToggle, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseenter }));
+        return ((0, vue_1.h)(_internal_1.NInternalSelectMenu, { clsPrefix: this.mergedClsPrefix, focusable: true, theme: this.mergedTheme.peers.InternalSelectMenu, themeOverrides: this.mergedTheme.peerOverrides.InternalSelectMenu, multiple: this.multiple, treeMate: this.treeMate, size: this.size, value: this.value, width: this.width, virtualScroll: false, scrollable: this.scrollable, renderLabel: this.renderLabel, onToggle: this.handleToggle, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseenter, onMousedown: this.handleMenuMousedown }, this.$slots));
     }
 });

package/lib/radio/src/Radio.js

@@ -41,15 +41,15 @@ exports.default = (0, vue_1.defineComponent)({
     },
     render() {
         const { $slots, mergedClsPrefix } = this;
-        return ((0, vue_1.h)("div", { class: [
+        return ((0, vue_1.h)("label", { class: [
                 `${mergedClsPrefix}-radio`,
                 {
                     [`${mergedClsPrefix}-radio--disabled`]: this.mergedDisabled,
                     [`${mergedClsPrefix}-radio--checked`]: this.renderSafeChecked,
                     [`${mergedClsPrefix}-radio--focus`]: this.focus
                 }
-            ], style: this.cssVars, onKeyup: this.handleKeyUp, onClick: this.handleClick, onMousedown: this.handleMouseDown },
-            (0, vue_1.h)("input", { ref: "inputRef", type: "radio", class: `${mergedClsPrefix}-radio__radio-input`, value: this.value, name: this.mergedName, checked: this.renderSafeChecked, disabled: this.mergedDisabled, onChange: this.handleRadioInputChange, onFocus: this.handleRadioInputFocus, onBlur: this.handleRadioInputBlur }),
+            ], style: this.cssVars },
+            (0, vue_1.h)("input", { ref: "inputRef", type: "radio", class: `${mergedClsPrefix}-radio-input`, value: this.value, name: this.mergedName, checked: this.renderSafeChecked, disabled: this.mergedDisabled, onChange: this.handleRadioInputChange, onFocus: this.handleRadioInputFocus, onBlur: this.handleRadioInputBlur }),
             (0, vue_1.h)("div", { class: [
                     `${mergedClsPrefix}-radio__dot`,
                     this.renderSafeChecked && `${mergedClsPrefix}-radio__dot--checked`

package/lib/radio/src/RadioButton.js

@@ -13,16 +13,15 @@ exports.default = (0, vue_1.defineComponent)({
     },
     render() {
         const { mergedClsPrefix } = this;
-        return ((0, vue_1.h)("div", { class: [
+        return ((0, vue_1.h)("label", { class: [
                 `${mergedClsPrefix}-radio-button`,
                 {
                     [`${mergedClsPrefix}-radio-button--disabled`]: this.mergedDisabled,
-                    [`${mergedClsPrefix}-radio-button--checked`]: this
-                        .renderSafeChecked,
+                    [`${mergedClsPrefix}-radio-button--checked`]: this.renderSafeChecked,
                     [`${mergedClsPrefix}-radio-button--focus`]: this.focus
                 }
-            ], onKeyup: this.handleKeyUp, onClick: this.handleClick, onMousedown: this.handleMouseDown },
-            (0, vue_1.h)("input", { ref: "inputRef", type: "radio", class: `${mergedClsPrefix}-radio-button__radio-input`, value: this.value, name: this.mergedName, checked: this.renderSafeChecked, disabled: this.mergedDisabled, onChange: this.handleRadioInputChange, onFocus: this.handleRadioInputFocus, onBlur: this.handleRadioInputBlur }),
+            ] },
+            (0, vue_1.h)("input", { ref: "inputRef", type: "radio", class: `${mergedClsPrefix}-radio-input`, value: this.value, name: this.mergedName, checked: this.renderSafeChecked, disabled: this.mergedDisabled, onChange: this.handleRadioInputChange, onFocus: this.handleRadioInputFocus, onBlur: this.handleRadioInputBlur }),
             (0, vue_1.h)("div", { class: `${mergedClsPrefix}-radio-button__state-border` }),
             (0, vue_1.h)("span", { ref: "labelRef" }, this.$slots)));
     }

package/lib/radio/src/styles/radio-group.cssr.js

@@ -54,12 +54,16 @@ exports.default = (0, cssr_1.cB)('radio-group', `
  color: var(--button-text-color);
  border-top: 1px solid var(--button-border-color);
  border-bottom: 1px solid var(--button-border-color);
- `, [(0, cssr_1.cE)('radio-input', `
+ `, [(0, cssr_1.cB)('radio-input', `
+ position: absolute;
  border: 0;
- width: 0;
- height: 0;
+ border-radius: inherit;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
  opacity: 0;
- margin: 0;
+ z-index: 1;
  `), (0, cssr_1.cE)('state-border', `
  pointer-events: none;
  position: absolute;

package/lib/radio/src/styles/radio.cssr.js

@@ -34,12 +34,16 @@ exports.default = (0, cssr_1.cB)('radio', `
 `, [(0, cssr_1.cE)('dot', `
  height: var(--radio-size);
  width: var(--radio-size);
- `), (0, cssr_1.cE)('radio-input', `
+ `), (0, cssr_1.cB)('radio-input', `
+ position: absolute;
  border: 0;
- width: 0;
- height: 0;
+ border-radius: inherit;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
  opacity: 0;
- margin: 0;
+ z-index: 1;
  `), (0, cssr_1.cE)('dot', `
  background: var(--color);
  box-shadow: var(--box-shadow);

package/lib/radio/src/use-radio.d.ts

@@ -47,9 +47,6 @@ export interface UseRadio {
     handleRadioInputChange: () => void;
     handleRadioInputBlur: () => void;
     handleRadioInputFocus: () => void;
-    handleKeyUp: (e: KeyboardEvent) => void;
-    handleMouseDown: () => void;
-    handleClick: () => void;
 }
 declare function setup(props: ExtractPropTypes<typeof radioProps>): UseRadio;
 declare namespace setup {

package/lib/radio/src/use-radio.js

@@ -115,28 +115,6 @@ function setup(props) {
     function handleRadioInputFocus() {
         focusRef.value = true;
     }
-    function handleKeyUp(e) {
-        var _a;
-        switch (e.code) {
-            case 'Enter':
-            case 'NumpadEnter':
-                (_a = inputRef.value) === null || _a === void 0 ? void 0 : _a.click();
-        }
-    }
-    function handleMouseDown() {
-        if (mergedDisabledRef.value)
-            return;
-        setTimeout(() => {
-            var _a, _b;
-            if (!((_a = labelRef.value) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement))) {
-                (_b = inputRef.value) === null || _b === void 0 ? void 0 : _b.focus();
-            }
-        }, 0);
-    }
-    function handleClick() {
-        var _a;
-        (_a = inputRef.value) === null || _a === void 0 ? void 0 : _a.click();
-    }
     return {
         mergedClsPrefix: NRadioGroup
             ? NRadioGroup.mergedClsPrefixRef
@@ -151,10 +129,7 @@ function setup(props) {
         mergedSize: mergedSizeRef,
         handleRadioInputChange,
         handleRadioInputBlur,
-        handleRadioInputFocus,
-        handleKeyUp,
-        handleMouseDown,
-        handleClick
+        handleRadioInputFocus
     };
 }
 setup.props = radioProps;

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

@@ -30,6 +30,7 @@ const cssr_1 = require("../../../_utils/cssr"); // vars:
 
 
 exports.default = (0, cssr_1.cB)('tabs', `
+ box-sizing: border-box;
  width: 100%;
  transition:
  background-color .3s var(--bezier),

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

@@ -49,7 +49,7 @@ exports.default = (0, cssr_1.cB)('tag', `
  color .3s var(--bezier),
  box-shadow .3s var(--bezier),
  opacity .3s var(--bezier);
- line-height: 1;
+ line-height: 1.2;
  height: var(--height);
  font-size: var(--font-size);
 `, [(0, cssr_1.cE)('border', `

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

@@ -1,4 +1,4 @@
-import { PropType } from 'vue';
+import { PropType, HTMLAttributes } from 'vue';
 import { FollowerPlacement } from 'vueuc';
 import { CheckStrategy } from 'treemate';
 import { Key } from '../../tree/src/interface';
@@ -94,6 +94,7 @@ declare const props: {
         type: PropType<string | boolean | HTMLElement>;
         default: undefined;
     };
+    readonly menuProps: PropType<HTMLAttributes>;
     readonly virtualScroll: {
         readonly type: BooleanConstructor;
         readonly default: true;
@@ -104,6 +105,9 @@ declare const props: {
         menuBoxShadow: string;
         menuBorderRadius: string;
         menuHeight: string;
+        actionDividerColor: string;
+        actionTextColor: string;
+        actionPadding: string;
     }, {
         Tree: import("../../_mixins").Theme<"Tree", {
             fontSize: string;
@@ -238,6 +242,9 @@ declare const props: {
         menuBoxShadow: string;
         menuBorderRadius: string;
         menuHeight: string;
+        actionDividerColor: string;
+        actionTextColor: string;
+        actionPadding: string;
     }, {
         Tree: import("../../_mixins").Theme<"Tree", {
             fontSize: string;
@@ -372,6 +379,9 @@ declare const props: {
         menuBoxShadow: string;
         menuBorderRadius: string;
         menuHeight: string;
+        actionDividerColor: string;
+        actionTextColor: string;
+        actionPadding: string;
     }, {
         Tree: import("../../_mixins").Theme<"Tree", {
             fontSize: string;
@@ -591,6 +601,7 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<string | boolean | HTMLElement>;
         default: undefined;
     };
+    readonly menuProps: PropType<HTMLAttributes>;
     readonly virtualScroll: {
         readonly type: BooleanConstructor;
         readonly default: true;
@@ -601,6 +612,9 @@ declare const _default: import("vue").DefineComponent<{
         menuBoxShadow: string;
         menuBorderRadius: string;
         menuHeight: string;
+        actionDividerColor: string;
+        actionTextColor: string;
+        actionPadding: string;
     }, {
         Tree: import("../../_mixins").Theme<"Tree", {
             fontSize: string;
@@ -735,6 +749,9 @@ declare const _default: import("vue").DefineComponent<{
         menuBoxShadow: string;
         menuBorderRadius: string;
         menuHeight: string;
+        actionDividerColor: string;
+        actionTextColor: string;
+        actionPadding: string;
     }, {
         Tree: import("../../_mixins").Theme<"Tree", {
             fontSize: string;
@@ -869,6 +886,9 @@ declare const _default: import("vue").DefineComponent<{
         menuBoxShadow: string;
         menuBorderRadius: string;
         menuHeight: string;
+        actionDividerColor: string;
+        actionTextColor: string;
+        actionPadding: string;
     }, {
         Tree: import("../../_mixins").Theme<"Tree", {
             fontSize: string;
@@ -1060,6 +1080,9 @@ declare const _default: import("vue").DefineComponent<{
         '--menu-color': string;
         '--menu-height': string;
         '--bezier': string;
+        '--action-padding': string;
+        '--action-text-color': string;
+        '--action-divider-color': string;
     }>;
     mergedTheme: import("vue").ComputedRef<{
         common: {
@@ -1171,6 +1194,9 @@ declare const _default: import("vue").DefineComponent<{
             menuBoxShadow: string;
             menuBorderRadius: string;
             menuHeight: string;
+            actionDividerColor: string;
+            actionTextColor: string;
+            actionPadding: string;
         };
         peers: {
             Tree: import("../../_mixins").Theme<"Tree", {
@@ -1403,6 +1429,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly size?: unknown;
     readonly value?: unknown;
     readonly to?: unknown;
+    readonly menuProps?: unknown;
     readonly virtualScroll?: unknown;
     readonly theme?: unknown;
     readonly themeOverrides?: unknown;
@@ -1444,6 +1471,9 @@ declare const _default: import("vue").DefineComponent<{
         menuBoxShadow: string;
         menuBorderRadius: string;
         menuHeight: string;
+        actionDividerColor: string;
+        actionTextColor: string;
+        actionPadding: string;
     }, {
         Tree: import("../../_mixins").Theme<"Tree", {
             fontSize: string;
@@ -1578,6 +1608,9 @@ declare const _default: import("vue").DefineComponent<{
         menuBoxShadow: string;
         menuBorderRadius: string;
         menuHeight: string;
+        actionDividerColor: string;
+        actionTextColor: string;
+        actionPadding: string;
     }, {
         Tree: import("../../_mixins").Theme<"Tree", {
             fontSize: string;
@@ -1712,6 +1745,9 @@ declare const _default: import("vue").DefineComponent<{
         menuBoxShadow: string;
         menuBorderRadius: string;
         menuHeight: string;
+        actionDividerColor: string;
+        actionTextColor: string;
+        actionPadding: string;
     }, {
         Tree: import("../../_mixins").Theme<"Tree", {
             fontSize: string;
@@ -1843,6 +1879,7 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:show"?: MaybeArray<(show: boolean) => void> | undefined;
     onUpdateShow?: MaybeArray<(show: boolean) => void> | undefined;
     maxTagCount?: number | "responsive" | undefined;
+    menuProps?: HTMLAttributes | undefined;
     "onUpdate:value"?: MaybeArray<OnUpdateValue> | undefined;
     onUpdateValue?: MaybeArray<OnUpdateValue> | undefined;
     leafOnly?: boolean | undefined;

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

@@ -8,6 +8,7 @@ const vueuc_1 = require("vueuc");
 const vooks_1 = require("vooks");
 const vdirs_1 = require("vdirs");
 const treemate_1 = require("treemate");
+const seemly_1 = require("seemly");
 const Tree_1 = require("../../tree/src/Tree");
 const _internal_1 = require("../../_internal");
 const tree_1 = require("../../tree");
@@ -45,7 +46,7 @@ const props = Object.assign(Object.assign(Object.assign(Object.assign({}, _mixin
     }, show: {
         type: Boolean,
         default: undefined
-    }, size: String, value: [String, Number, Array], to: _utils_1.useAdjustedTo.propTo, virtualScroll: {
+    }, size: String, value: [String, Number, Array], to: _utils_1.useAdjustedTo.propTo, menuProps: Object, virtualScroll: {
         type: Boolean,
         default: true
     } }), Tree_1.treeSharedProps), { onBlur: Function, onFocus: Function, onUpdateShow: [Function, Array], onUpdateValue: [Function, Array], 'onUpdate:value': [Function, Array], 'onUpdate:show': [Function, Array], 
@@ -442,7 +443,8 @@ exports.default = (0, vue_1.defineComponent)({
         function handleMenuMousedown(e) {
             // If there's an action slot later, we need to check if mousedown happens
             // in action panel
-            e.preventDefault();
+            if (!(0, seemly_1.happensIn)(e, 'action'))
+                e.preventDefault();
         }
         (0, vue_1.provide)(interface_1.treeSelectInjectionKey, {
             pendingNodeKeyRef
@@ -519,20 +521,23 @@ exports.default = (0, vue_1.defineComponent)({
             handleTabOut,
             handleMenuMousedown,
             cssVars: (0, vue_1.computed)(() => {
-                const { common: { cubicBezierEaseInOut }, self: { menuBoxShadow, menuBorderRadius, menuColor, menuHeight } } = themeRef.value;
+                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
+                    '--bezier': cubicBezierEaseInOut,
+                    '--action-padding': actionPadding,
+                    '--action-text-color': actionTextColor,
+                    '--action-divider-color': actionDividerColor
                 };
             }),
             mergedTheme: themeRef
         };
     },
     render() {
-        const { mergedTheme, mergedClsPrefix } = this;
+        const { mergedTheme, mergedClsPrefix, $slots } = this;
         return ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tree-select` },
             (0, vue_1.h)(vueuc_1.VBinder, null, {
                 default: () => [
@@ -544,11 +549,21 @@ exports.default = (0, vue_1.defineComponent)({
                             default: () => {
                                 if (!this.mergedShow)
                                     return null;
-                                const { mergedClsPrefix, filteredTreeInfo, checkable, multiple } = this;
-                                return (0, vue_1.withDirectives)((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tree-select-menu`, ref: "menuElRef", style: this.cssVars, tabindex: 0, onMousedown: this.handleMenuMousedown, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown, onFocusin: this.handleMenuFocusin, onFocusout: this.handleMenuFocusout },
+                                const { mergedClsPrefix, filteredTreeInfo, checkable, multiple, menuProps } = this;
+                                return (0, vue_1.withDirectives)((0, vue_1.h)("div", Object.assign({}, menuProps, { class: [
+                                        `${mergedClsPrefix}-tree-select-menu`,
+                                        menuProps === null || menuProps === void 0 ? void 0 : menuProps.class
+                                    ], ref: "menuElRef", style: [
+                                        (menuProps === null || menuProps === void 0 ? void 0 : menuProps.style) || '',
+                                        this.cssVars
+                                    ], tabindex: 0, onMousedown: this.handleMenuMousedown, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown, onFocusin: this.handleMenuFocusin, onFocusout: this.handleMenuFocusout }),
                                     filteredTreeInfo.filteredTree.length ? ((0, vue_1.h)(tree_1.NTree, { ref: "treeInstRef", blockLine: true, animated: false, data: filteredTreeInfo.filteredTree, cancelable: multiple, labelField: this.labelField, theme: mergedTheme.peers.Tree, themeOverrides: mergedTheme.peerOverrides.Tree, defaultExpandAll: this.defaultExpandAll, defaultExpandedKeys: this.defaultExpandedKeys, expandedKeys: this.mergedExpandedKeys, checkedKeys: this.treeCheckedKeys, selectedKeys: this.treeSelectedKeys, checkable: checkable, checkStrategy: this.checkStrategy, cascade: this.mergedCascade, leafOnly: this.leafOnly, multiple: this.multiple, virtualScroll: this.consistentMenuWidth &&
-                                            this.virtualScroll, internalDataTreeMate: this.dataTreeMate, internalDisplayTreeMate: this.displayTreeMate, internalHighlightKeySet: filteredTreeInfo.highlightKeySet, internalUnifySelectCheck: true, internalScrollable: true, internalScrollablePadding: this.menuPadding, internalFocusable: false, internalCheckboxFocusable: false, onUpdateCheckedKeys: this.handleUpdateCheckedKeys, onUpdateIndeterminateKeys: this.handleUpdateIndeterminateKeys, onUpdateExpandedKeys: this.doUpdateExpandedKeys })) : ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tree-select-menu__empty` },
-                                        (0, vue_1.h)(empty_1.NEmpty, { theme: mergedTheme.peers.Empty, themeOverrides: mergedTheme.peerOverrides.Empty }))),
+                                            this.virtualScroll, internalDataTreeMate: this.dataTreeMate, internalDisplayTreeMate: this.displayTreeMate, internalHighlightKeySet: filteredTreeInfo.highlightKeySet, internalUnifySelectCheck: true, internalScrollable: true, internalScrollablePadding: this.menuPadding, internalFocusable: false, internalCheckboxFocusable: false, onUpdateCheckedKeys: this.handleUpdateCheckedKeys, onUpdateIndeterminateKeys: this.handleUpdateIndeterminateKeys, onUpdateExpandedKeys: this.doUpdateExpandedKeys })) : ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tree-select-menu__empty` }, (0, vue_1.renderSlot)($slots, 'empty', undefined, () => [
+                                        (0, vue_1.h)(empty_1.NEmpty, { theme: mergedTheme.peers.Empty, themeOverrides: mergedTheme.peerOverrides.Empty })
+                                    ]))),
+                                    $slots.action && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tree-select-menu__action`, "data-action": true }, {
+                                        default: $slots.action
+                                    })),
                                     (0, vue_1.h)(_internal_1.NBaseFocusDetector, { onFocus: this.handleTabOut })), [[vdirs_1.clickoutside, this.handleMenuClickoutside]]);
                             }
                         }))

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

@@ -18,6 +18,9 @@ const cssr_1 = require("../../../_utils/cssr"); // vars:
 // --menu-border-radius
 // --menu-box-shadow
 // --menu-color
+// --action-padding
+// --action-text-color
+// --action-divider-color
 
 
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('tree-select', `
@@ -29,15 +32,21 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('tree-select', `
  position: relative;
  overflow: hidden;
  margin: 4px 0;
- max-height: var(--menu-height);
  transition: box-shadow .3s var(--bezier), background-color .3s var(--bezier);
  border-radius: var(--menu-border-radius);
  box-shadow: var(--menu-box-shadow);
  background-color: var(--menu-color);
  outline: none;
- `, [(0, cssr_1.cB)('tree', 'max-height: inherit;'), (0, cssr_1.cE)('empty', `
+ `, [(0, cssr_1.cB)('tree', 'max-height: var(--menu-height);'), (0, cssr_1.cE)('empty', `
  display: flex;
  padding: 12px 32px;
  flex: 1;
  justify-content: center;
+ `), (0, cssr_1.cE)('action', `
+ padding: var(--action-padding);
+ transition: 
+ color .3s var(--bezier);
+ border-color .3s var(--bezier);
+ border-top: 1px solid var(--action-divider-color);
+ color: var(--action-text-color);
  `), (0, fade_in_scale_up_cssr_1.default)()])]);

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

@@ -5,6 +5,9 @@ export declare const self: (vars: ThemeCommonVars) => {
     menuBoxShadow: string;
     menuBorderRadius: string;
     menuHeight: string;
+    actionDividerColor: string;
+    actionTextColor: string;
+    actionPadding: string;
 };
 export declare type TreeSelectThemeVars = ReturnType<typeof self>;
 declare const treeSelectLight: import("../../_mixins/use-theme").Theme<"TreeSelect", {
@@ -13,6 +16,9 @@ declare const treeSelectLight: import("../../_mixins/use-theme").Theme<"TreeSele
     menuBoxShadow: string;
     menuBorderRadius: string;
     menuHeight: string;
+    actionDividerColor: string;
+    actionTextColor: string;
+    actionPadding: string;
 }, {
     Tree: import("../../_mixins/use-theme").Theme<"Tree", {
         fontSize: string;

package/lib/tree-select/styles/light.js

@@ -7,13 +7,16 @@ const styles_1 = require("../../tree/styles");
 const styles_2 = require("../../empty/styles");
 const styles_3 = require("../../_internal/selection/styles");
 const self = (vars) => {
-    const { popoverColor, boxShadow2, borderRadius, heightMedium } = vars;
+    const { popoverColor, boxShadow2, borderRadius, heightMedium, dividerColor, textColor2 } = vars;
     return {
         menuPadding: '4px',
         menuColor: popoverColor,
         menuBoxShadow: boxShadow2,
         menuBorderRadius: borderRadius,
-        menuHeight: `calc(${heightMedium} * 7.6)`
+        menuHeight: `calc(${heightMedium} * 7.6)`,
+        actionDividerColor: dividerColor,
+        actionTextColor: textColor2,
+        actionPadding: '8px 12px'
     };
 };
 exports.self = self;

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "2.21.5";
+declare const _default: "2.22.0";
 export default _default;

package/lib/version.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = '2.21.5';
+exports.default = '2.22.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "naive-ui",
-  "version": "2.21.5",
+  "version": "2.22.0",
   "description": "A Vue 3 Component Library. Fairly Complete, Customizable Themes, Uses TypeScript, Not Too Slow",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -62,6 +62,7 @@
     ]
   },
   "devDependencies": {
+    "esbuild": "0.14.3",
     "@babel/eslint-parser": "^7.15.8",
     "@babel/generator": "^7.12.11",
     "@babel/parser": "^7.12.11",
@@ -75,7 +76,7 @@
     "@vicons/fluent": "^0.11.0",
     "@vicons/ionicons4": "^0.11.0",
     "@vicons/ionicons5": "^0.11.0",
-    "@vitejs/plugin-vue": "^1.2.1",
+    "@vitejs/plugin-vue": "^2.0.0",
     "@vue/compiler-sfc": "^3.0.10",
     "@vue/eslint-config-standard": "^6.0.0",
     "@vue/eslint-config-typescript": "^7.0.0",
@@ -123,7 +124,7 @@
     "@types/lodash-es": "^4.17.4",
     "async-validator": "^4.0.1",
     "css-render": "^0.15.6",
-    "date-fns": "^2.19.0",
+    "date-fns": "^2.27.0",
     "date-fns-tz": "^1.1.6",
     "evtd": "^0.2.3",
     "highlight.js": "^11.0.1",