naive-ui 2.30.6 → 2.30.7

package/es/select/src/Select.js

@@ -132,6 +132,9 @@ export default defineComponent({
             return beingCreatedOptionsRef.value.concat(createdOptionsRef.value).concat(compitableOptionsRef.value);
         });
         const resolvedFilterRef = computed(() => {
+            const { filter } = props;
+            if (filter)
+                return filter;
             const { labelField, valueField } = props;
             return (pattern, option) => {
                 if (!option)
@@ -395,7 +398,13 @@ export default defineComponent({
                 const { value: beingCreatedOptions } = beingCreatedOptionsRef;
                 const beingCreatedOption = beingCreatedOptions[0] || null;
                 if (beingCreatedOption) {
-                    createdOptionsRef.value.push(beingCreatedOption);
+                    const createdOptions = createdOptionsRef.value;
+                    if (!createdOptions.length) {
+                        createdOptionsRef.value = [beingCreatedOption];
+                    }
+                    else {
+                        createdOptions.push(beingCreatedOption);
+                    }
                     beingCreatedOptionsRef.value = emptyArray;
                 }
             }

package/es/select/src/interface.d.ts

@@ -48,3 +48,4 @@ export interface SelectInst {
 }
 export declare type SelectFallbackOption = (value: string & number) => SelectOption;
 export declare type SelectFallbackOptionImpl = (value: string | number) => SelectOption;
+export declare type SelectFilter = (pattern: string, option: SelectOption) => boolean;

package/es/tabs/src/Tabs.js

@@ -92,7 +92,7 @@ export default defineComponent({
                 else {
                     barEl.classList.remove(disabledClassName);
                 }
-                if (barWidth && tabEl.offsetWidth >= barWidth) {
+                if (typeof barWidth === 'number' && tabEl.offsetWidth >= barWidth) {
                     const offsetDiffLeft = Math.floor((tabEl.offsetWidth - barWidth) / 2) + tabEl.offsetLeft;
                     barEl.style.left = `${offsetDiffLeft}px`;
                     barEl.style.maxWidth = `${barWidth}px`;

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

@@ -29,6 +29,7 @@ export declare const treeSharedProps: {
         readonly default: () => never[];
     };
     readonly indeterminateKeys: PropType<Key[]>;
+    readonly renderSwitcherIcon: PropType<RenderSwitcherIcon>;
     readonly onUpdateIndeterminateKeys: PropType<MaybeArray<OnUpdateKeys>>;
     readonly 'onUpdate:indeterminateKeys': PropType<MaybeArray<OnUpdateKeys>>;
     readonly onUpdateExpandedKeys: PropType<MaybeArray<OnUpdateKeys>>;
@@ -78,6 +79,7 @@ declare const treeProps: {
         readonly default: () => never[];
     };
     readonly indeterminateKeys: PropType<Key[]>;
+    readonly renderSwitcherIcon: PropType<RenderSwitcherIcon>;
     readonly onUpdateIndeterminateKeys: PropType<MaybeArray<OnUpdateKeys>>;
     readonly 'onUpdate:indeterminateKeys': PropType<MaybeArray<OnUpdateKeys>>;
     readonly onUpdateExpandedKeys: PropType<MaybeArray<OnUpdateKeys>>;
@@ -146,7 +148,6 @@ declare const treeProps: {
     readonly renderLabel: PropType<({ option, checked, selected }: import("./interface").TreeRenderProps) => VNodeChild>;
     readonly renderPrefix: PropType<({ option, checked, selected }: import("./interface").TreeRenderProps) => VNodeChild>;
     readonly renderSuffix: PropType<({ option, checked, selected }: import("./interface").TreeRenderProps) => VNodeChild>;
-    readonly renderSwitcherIcon: PropType<RenderSwitcherIcon>;
     readonly nodeProps: PropType<TreeNodeProps>;
     readonly onDragenter: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
     readonly onDragleave: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
@@ -381,6 +382,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: () => never[];
     };
     readonly indeterminateKeys: PropType<Key[]>;
+    readonly renderSwitcherIcon: PropType<RenderSwitcherIcon>;
     readonly onUpdateIndeterminateKeys: PropType<MaybeArray<OnUpdateKeys>>;
     readonly 'onUpdate:indeterminateKeys': PropType<MaybeArray<OnUpdateKeys>>;
     readonly onUpdateExpandedKeys: PropType<MaybeArray<OnUpdateKeys>>;
@@ -449,7 +451,6 @@ declare const _default: import("vue").DefineComponent<{
     readonly renderLabel: PropType<({ option, checked, selected }: import("./interface").TreeRenderProps) => VNodeChild>;
     readonly renderPrefix: PropType<({ option, checked, selected }: import("./interface").TreeRenderProps) => VNodeChild>;
     readonly renderSuffix: PropType<({ option, checked, selected }: import("./interface").TreeRenderProps) => VNodeChild>;
-    readonly renderSwitcherIcon: PropType<RenderSwitcherIcon>;
     readonly nodeProps: PropType<TreeNodeProps>;
     readonly onDragenter: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
     readonly onDragleave: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
@@ -1156,6 +1157,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: () => never[];
     };
     readonly indeterminateKeys: PropType<Key[]>;
+    readonly renderSwitcherIcon: PropType<RenderSwitcherIcon>;
     readonly onUpdateIndeterminateKeys: PropType<MaybeArray<OnUpdateKeys>>;
     readonly 'onUpdate:indeterminateKeys': PropType<MaybeArray<OnUpdateKeys>>;
     readonly onUpdateExpandedKeys: PropType<MaybeArray<OnUpdateKeys>>;
@@ -1224,7 +1226,6 @@ declare const _default: import("vue").DefineComponent<{
     readonly renderLabel: PropType<({ option, checked, selected }: import("./interface").TreeRenderProps) => VNodeChild>;
     readonly renderPrefix: PropType<({ option, checked, selected }: import("./interface").TreeRenderProps) => VNodeChild>;
     readonly renderSuffix: PropType<({ option, checked, selected }: import("./interface").TreeRenderProps) => VNodeChild>;
-    readonly renderSwitcherIcon: PropType<RenderSwitcherIcon>;
     readonly nodeProps: PropType<TreeNodeProps>;
     readonly onDragenter: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
     readonly onDragleave: PropType<MaybeArray<(e: TreeDragInfo) => void>>;

package/es/tree/src/Tree.js

@@ -65,6 +65,7 @@ export const treeSharedProps = {
         default: () => []
     },
     indeterminateKeys: Array,
+    renderSwitcherIcon: Function,
     onUpdateIndeterminateKeys: [Function, Array],
     'onUpdate:indeterminateKeys': [Function, Array],
     onUpdateExpandedKeys: [Function, Array],
@@ -103,7 +104,7 @@ const treeProps = Object.assign(Object.assign(Object.assign(Object.assign({}, us
     }, checkboxPlacement: {
         type: String,
         default: 'left'
-    }, virtualScroll: Boolean, watchProps: Array, renderLabel: Function, renderPrefix: Function, renderSuffix: Function, renderSwitcherIcon: Function, nodeProps: 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] }), treeSharedProps), { 
+    }, virtualScroll: Boolean, watchProps: Array, renderLabel: Function, renderPrefix: Function, renderSuffix: Function, nodeProps: 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] }), treeSharedProps), { 
     // internal props for tree-select
     internalTreeSelect: Boolean, internalScrollable: Boolean, internalScrollablePadding: String, 
     // use it to display

package/es/tree/src/TreeNode.d.ts

@@ -27,7 +27,7 @@ declare const TreeNode: import("vue").DefineComponent<{
     internalScrollable: import("vue").Ref<boolean>;
     draggable: import("vue").Ref<boolean>;
     blockLine: import("vue").Ref<boolean>;
-    nodeProps: import("vue").ComputedRef<import("vue").HTMLAttributes | undefined>;
+    nodeProps: import("vue").ComputedRef<(import("vue").HTMLAttributes & Record<string, unknown>) | undefined>;
     checkboxFocusable: import("vue").Ref<boolean>;
     droppingPosition: import("vue").Ref<import("./interface").DropPosition | null>;
     droppingOffsetLevel: import("vue").Ref<number>;

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

@@ -28,7 +28,7 @@ export declare type RenderPrefix = RenderTreePart;
 export declare type RenderSuffix = RenderTreePart;
 export declare type TreeNodeProps = (info: {
     option: TreeOption;
-}) => HTMLAttributes;
+}) => HTMLAttributes & Record<string, unknown>;
 export interface TreeDragInfo {
     event: DragEvent;
     node: TreeOption;

package/es/tree-select/index.d.ts

@@ -1,3 +1,3 @@
 export { default as NTreeSelect } from './src/TreeSelect';
 export type { TreeSelectProps } from './src/TreeSelect';
-export type { TreeSelectOption } from './src/interface';
+export type { TreeSelectOption, TreeSelectNodeProps, TreeSelectRenderLabel, TreeSelectRenderPrefix, TreeSelectRenderSuffix, TreeSelectRenderTag } from './src/interface';

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

@@ -1,13 +1,17 @@
-import { PropType, HTMLAttributes } from 'vue';
+import { PropType, HTMLAttributes, VNodeChild } from 'vue';
 import { FollowerPlacement } from 'vueuc';
 import { CheckStrategy } from 'treemate';
 import type { FormValidationStatus } from '../../form/src/interface';
 import { Key } from '../../tree/src/interface';
-import type { SelectBaseOption } from '../../select/src/interface';
+import type { SelectBaseOption, SelectOption } from '../../select/src/interface';
 import { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
-import type { OnUpdateValue, TreeSelectOption, Value } from './interface';
+import type { OnUpdateValue, TreeSelectNodeProps, TreeSelectOption, TreeSelectRenderTag, Value } from './interface';
 declare type OnLoad = (node: TreeSelectOption) => Promise<void>;
 declare const props: {
+    readonly renderLabel: PropType<import("./interface").TreeSelectRenderTreePart>;
+    readonly renderPrefix: PropType<import("./interface").TreeSelectRenderTreePart>;
+    readonly renderSuffix: PropType<import("./interface").TreeSelectRenderTreePart>;
+    readonly nodeProps: PropType<TreeSelectNodeProps>;
     readonly onBlur: PropType<(e: FocusEvent) => void>;
     readonly onFocus: PropType<(e: FocusEvent) => void>;
     readonly onLoad: PropType<OnLoad>;
@@ -40,6 +44,7 @@ declare const props: {
         readonly default: () => never[];
     };
     readonly indeterminateKeys: PropType<Key[]>;
+    readonly renderSwitcherIcon: PropType<import("../../tree/src/interface").RenderSwitcherIcon>;
     readonly onUpdateIndeterminateKeys: PropType<MaybeArray<import("../../tree/src/Tree").OnUpdateKeys>>;
     readonly 'onUpdate:indeterminateKeys': PropType<MaybeArray<import("../../tree/src/Tree").OnUpdateKeys>>;
     readonly onUpdateExpandedKeys: PropType<MaybeArray<import("../../tree/src/Tree").OnUpdateKeys>>;
@@ -106,6 +111,7 @@ declare const props: {
         readonly default: true;
     };
     readonly status: PropType<FormValidationStatus>;
+    readonly renderTag: PropType<TreeSelectRenderTag>;
     readonly theme: PropType<import("../../_mixins").Theme<"TreeSelect", {
         menuPadding: string;
         menuColor: string;
@@ -565,6 +571,10 @@ declare const props: {
 };
 export declare type TreeSelectProps = ExtractPublicPropTypes<typeof props>;
 declare const _default: import("vue").DefineComponent<{
+    readonly renderLabel: PropType<import("./interface").TreeSelectRenderTreePart>;
+    readonly renderPrefix: PropType<import("./interface").TreeSelectRenderTreePart>;
+    readonly renderSuffix: PropType<import("./interface").TreeSelectRenderTreePart>;
+    readonly nodeProps: PropType<TreeSelectNodeProps>;
     readonly onBlur: PropType<(e: FocusEvent) => void>;
     readonly onFocus: PropType<(e: FocusEvent) => void>;
     readonly onLoad: PropType<OnLoad>;
@@ -597,6 +607,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: () => never[];
     };
     readonly indeterminateKeys: PropType<Key[]>;
+    readonly renderSwitcherIcon: PropType<import("../../tree/src/interface").RenderSwitcherIcon>;
     readonly onUpdateIndeterminateKeys: PropType<MaybeArray<import("../../tree/src/Tree").OnUpdateKeys>>;
     readonly 'onUpdate:indeterminateKeys': PropType<MaybeArray<import("../../tree/src/Tree").OnUpdateKeys>>;
     readonly onUpdateExpandedKeys: PropType<MaybeArray<import("../../tree/src/Tree").OnUpdateKeys>>;
@@ -663,6 +674,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: true;
     };
     readonly status: PropType<FormValidationStatus>;
+    readonly renderTag: PropType<TreeSelectRenderTag>;
     readonly theme: PropType<import("../../_mixins").Theme<"TreeSelect", {
         menuPadding: string;
         menuColor: string;
@@ -1149,12 +1161,16 @@ declare const _default: import("vue").DefineComponent<{
     treeCheckedKeys: import("vue").ComputedRef<Key[]>;
     mergedSize: import("vue").ComputedRef<"small" | "medium" | "large">;
     mergedDisabled: import("vue").ComputedRef<boolean>;
-    selectedOption: import("vue").ComputedRef<SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)> | null>;
-    selectedOptions: import("vue").ComputedRef<SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)>[] | null>;
+    selectedOption: import("vue").ComputedRef<SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => VNodeChild)> | null>;
+    selectedOptions: import("vue").ComputedRef<SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => VNodeChild)>[] | null>;
     pattern: import("vue").Ref<string>;
     pendingNodeKey: import("vue").Ref<string | number | null>;
     mergedCascade: import("vue").ComputedRef<boolean>;
     mergedFilter: import("vue").ComputedRef<(pattern: string, node: import("../../tree").TreeOption) => boolean>;
+    selectionRenderTag: import("vue").ComputedRef<(({ option, handleClose }: {
+        option: SelectOption;
+        handleClose: () => void;
+    }) => VNodeChild) | undefined>;
     handleTriggerOrMenuResize: () => void;
     doUpdateExpandedKeys: (keys: Key[], option: Array<TreeSelectOption | null>) => void;
     handleMenuLeave: () => void;
@@ -1520,6 +1536,10 @@ declare const _default: import("vue").DefineComponent<{
     themeClass: import("vue").Ref<string> | undefined;
     onRender: (() => void) | undefined;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly renderLabel: PropType<import("./interface").TreeSelectRenderTreePart>;
+    readonly renderPrefix: PropType<import("./interface").TreeSelectRenderTreePart>;
+    readonly renderSuffix: PropType<import("./interface").TreeSelectRenderTreePart>;
+    readonly nodeProps: PropType<TreeSelectNodeProps>;
     readonly onBlur: PropType<(e: FocusEvent) => void>;
     readonly onFocus: PropType<(e: FocusEvent) => void>;
     readonly onLoad: PropType<OnLoad>;
@@ -1552,6 +1572,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: () => never[];
     };
     readonly indeterminateKeys: PropType<Key[]>;
+    readonly renderSwitcherIcon: PropType<import("../../tree/src/interface").RenderSwitcherIcon>;
     readonly onUpdateIndeterminateKeys: PropType<MaybeArray<import("../../tree/src/Tree").OnUpdateKeys>>;
     readonly 'onUpdate:indeterminateKeys': PropType<MaybeArray<import("../../tree/src/Tree").OnUpdateKeys>>;
     readonly onUpdateExpandedKeys: PropType<MaybeArray<import("../../tree/src/Tree").OnUpdateKeys>>;
@@ -1618,6 +1639,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: true;
     };
     readonly status: PropType<FormValidationStatus>;
+    readonly renderTag: PropType<TreeSelectRenderTag>;
     readonly theme: PropType<import("../../_mixins").Theme<"TreeSelect", {
         menuPadding: string;
         menuColor: string;

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

@@ -47,7 +47,7 @@ const props = Object.assign(Object.assign(Object.assign(Object.assign({}, useThe
     }, size: String, value: [String, Number, Array], to: useAdjustedTo.propTo, menuProps: Object, virtualScroll: {
         type: Boolean,
         default: true
-    }, status: String }), treeSharedProps), { onBlur: Function, onFocus: Function, onLoad: Function, onUpdateShow: [Function, Array], onUpdateValue: [Function, Array], 'onUpdate:value': [Function, Array], 'onUpdate:show': [Function, Array], 
+    }, status: String, renderTag: Function }), treeSharedProps), { renderLabel: Function, renderPrefix: Function, renderSuffix: Function, nodeProps: Function, onBlur: Function, onFocus: Function, onLoad: Function, onUpdateShow: [Function, Array], onUpdateValue: [Function, Array], 'onUpdate:value': [Function, Array], 'onUpdate:show': [Function, Array], 
     /**
      * @deprecated
      */
@@ -431,6 +431,21 @@ export default defineComponent({
             if (!happensIn(e, 'action'))
                 e.preventDefault();
         }
+        const selectionRenderTagRef = computed(() => {
+            const { renderTag } = props;
+            if (!renderTag)
+                return undefined;
+            return function selectionRenderTag({ option, handleClose }) {
+                const { value } = option;
+                if (value !== undefined) {
+                    const treeOption = dataTreeMateRef.value.getNode(value);
+                    if (treeOption) {
+                        return renderTag({ option: treeOption.rawNode, handleClose });
+                    }
+                }
+                return value;
+            };
+        });
         provide(treeSelectInjectionKey, {
             pendingNodeKeyRef,
             dataTreeMate: dataTreeMateRef
@@ -485,6 +500,7 @@ export default defineComponent({
             pendingNodeKey: pendingNodeKeyRef,
             mergedCascade: mergedCascadeRef,
             mergedFilter: mergedFilterRef,
+            selectionRenderTag: selectionRenderTagRef,
             handleTriggerOrMenuResize,
             doUpdateExpandedKeys,
             handleMenuLeave,
@@ -514,7 +530,7 @@ export default defineComponent({
             h(VBinder, null, {
                 default: () => [
                     h(VTarget, null, {
-                        default: () => (h(NInternalSelection, { ref: "triggerInstRef", onResize: this.handleTriggerOrMenuResize, status: this.mergedStatus, focused: this.focused, clsPrefix: mergedClsPrefix, theme: mergedTheme.peers.InternalSelection, themeOverrides: mergedTheme.peerOverrides.InternalSelection, selectedOption: this.selectedOption, selectedOptions: this.selectedOptions, size: this.mergedSize, bordered: this.bordered, placeholder: this.mergedPlaceholder, disabled: this.mergedDisabled, active: this.mergedShow, loading: this.loading, multiple: this.multiple, maxTagCount: this.maxTagCount, showArrow: true, filterable: this.filterable, clearable: this.clearable, pattern: this.pattern, onPatternInput: this.handlePatternInput, onClear: this.handleClear, onClick: this.handleTriggerClick, onFocus: this.handleTriggerFocus, onBlur: this.handleTriggerBlur, onDeleteOption: this.handleDeleteOption, onKeydown: this.handleKeydown }, {
+                        default: () => (h(NInternalSelection, { ref: "triggerInstRef", onResize: this.handleTriggerOrMenuResize, status: this.mergedStatus, focused: this.focused, clsPrefix: mergedClsPrefix, theme: mergedTheme.peers.InternalSelection, themeOverrides: mergedTheme.peerOverrides.InternalSelection, renderTag: this.selectionRenderTag, selectedOption: this.selectedOption, selectedOptions: this.selectedOptions, size: this.mergedSize, bordered: this.bordered, placeholder: this.mergedPlaceholder, disabled: this.mergedDisabled, active: this.mergedShow, loading: this.loading, multiple: this.multiple, maxTagCount: this.maxTagCount, showArrow: true, filterable: this.filterable, clearable: this.clearable, pattern: this.pattern, onPatternInput: this.handlePatternInput, onClear: this.handleClear, onClick: this.handleTriggerClick, onFocus: this.handleTriggerFocus, onBlur: this.handleTriggerBlur, onDeleteOption: this.handleDeleteOption, onKeydown: this.handleKeydown }, {
                             arrow: () => { var _a, _b; return [(_b = (_a = this.$slots).arrow) === null || _b === void 0 ? void 0 : _b.call(_a)]; }
                         }))
                     }),
@@ -534,7 +550,7 @@ export default defineComponent({
                                         (menuProps === null || menuProps === void 0 ? void 0 : menuProps.style) || '',
                                         this.cssVars
                                     ], tabindex: 0, onMousedown: this.handleMenuMousedown, onKeydown: this.handleKeydown, onFocusin: this.handleMenuFocusin, onFocusout: this.handleMenuFocusout }),
-                                    h(NTree, { ref: "treeInstRef", blockLine: true, allowCheckingNotLoaded: this.allowCheckingNotLoaded, showIrrelevantNodes: false, animated: false, pattern: this.pattern, filter: this.mergedFilter, data: options, cancelable: multiple, labelField: this.labelField, keyField: this.keyField, childrenField: this.childrenField, 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, internalTreeSelect: true, internalUnifySelectCheck: true, internalScrollable: true, internalScrollablePadding: this.menuPadding, internalFocusable: false, internalCheckboxFocusable: false, internalRenderEmpty: () => (h("div", { class: `${mergedClsPrefix}-tree-select-menu__empty` }, resolveSlot($slots.empty, () => [
+                                    h(NTree, { ref: "treeInstRef", blockLine: true, allowCheckingNotLoaded: this.allowCheckingNotLoaded, showIrrelevantNodes: false, animated: false, pattern: this.pattern, filter: this.mergedFilter, data: options, cancelable: multiple, labelField: this.labelField, keyField: this.keyField, childrenField: this.childrenField, 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, renderLabel: this.renderLabel, renderPrefix: this.renderPrefix, renderSuffix: this.renderSuffix, renderSwitcherIcon: this.renderSwitcherIcon, nodeProps: this.nodeProps, virtualScroll: this.consistentMenuWidth && this.virtualScroll, internalTreeSelect: true, internalUnifySelectCheck: true, internalScrollable: true, internalScrollablePadding: this.menuPadding, internalFocusable: false, internalCheckboxFocusable: false, internalRenderEmpty: () => (h("div", { class: `${mergedClsPrefix}-tree-select-menu__empty` }, resolveSlot($slots.empty, () => [
                                             h(NEmpty, { theme: mergedTheme.peers.Empty, themeOverrides: mergedTheme.peerOverrides.Empty })
                                         ]))), onLoad: this.onLoad, onUpdateCheckedKeys: this.handleUpdateCheckedKeys, onUpdateIndeterminateKeys: this.handleUpdateIndeterminateKeys, onUpdateExpandedKeys: this.doUpdateExpandedKeys }),
                                     resolveWrappedSlot($slots.action, (children) => {

package/es/tree-select/src/interface.d.ts

@@ -1,5 +1,5 @@
 import { TreeMate, TreeNode } from 'treemate';
-import { Ref } from 'vue';
+import { HTMLAttributes, Ref, VNodeChild } from 'vue';
 import type { TreeOptionBase, TreeOption } from '../../tree/src/interface';
 export declare type TreeSelectOption = Omit<TreeOptionBase, 'checkboxDisabled' | 'isLeaf' | 'children'> & {
     children?: TreeSelectOption[];
@@ -14,3 +14,19 @@ export interface TreeSelectInjection {
     dataTreeMate: Ref<TreeMate<TreeOption>>;
 }
 export declare const treeSelectInjectionKey: import("vue").InjectionKey<TreeSelectInjection>;
+export declare type TreeSelectRenderTag = (props: {
+    option: TreeSelectOption;
+    handleClose: () => void;
+}) => VNodeChild;
+export interface TreeSelectRenderProps {
+    option: TreeSelectOption;
+    checked: boolean;
+    selected: boolean;
+}
+export declare type TreeSelectRenderTreePart = ({ option, checked, selected }: TreeSelectRenderProps) => VNodeChild;
+export declare type TreeSelectRenderLabel = TreeSelectRenderTreePart;
+export declare type TreeSelectRenderPrefix = TreeSelectRenderTreePart;
+export declare type TreeSelectRenderSuffix = TreeSelectRenderTreePart;
+export declare type TreeSelectNodeProps = (info: {
+    option: TreeSelectOption;
+}) => HTMLAttributes & Record<string, unknown>;

package/es/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "2.30.6";
+declare const _default: "2.30.7";
 export default _default;

package/es/version.js

@@ -1 +1 @@
-export default '2.30.6';
+export default '2.30.7';

package/lib/_internal/close/src/Close.js

@@ -31,7 +31,7 @@ exports.default = (0, vue_1.defineComponent)({
         (0, _mixins_1.useStyle)('-base-close', index_cssr_1.default, (0, vue_1.toRef)(props, 'clsPrefix'));
         return () => {
             const { clsPrefix, disabled, absolute, round } = props;
-            return ((0, vue_1.h)("button", { tabindex: disabled || !props.focusable ? -1 : 0, "aria-disabled": disabled, "aria-label": "close", disabled: disabled, class: [
+            return ((0, vue_1.h)("button", { type: "button", tabindex: disabled || !props.focusable ? -1 : 0, "aria-disabled": disabled, "aria-label": "close", disabled: disabled, class: [
                     `${clsPrefix}-base-close`,
                     absolute && `${clsPrefix}-base-close--absolute`,
                     disabled && `${clsPrefix}-base-close--disabled`,

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

@@ -159,6 +159,8 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('button', `
  top: 50%;
  transform: translateY(-50%);
  display: flex;
+ align-items: center;
+ justify-content: center;
  `, [(0, icon_switch_cssr_1.iconSwitchTransition)({
   top: '50%',
   originalTransform: 'translateY(-50%)'
@@ -166,6 +168,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('button', `
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
+ min-width: 0;
  `, [(0, cssr_1.c)('~', [(0, cssr_1.cE)('icon', {
   margin: 'var(--n-icon-margin)',
   marginRight: 0

package/lib/date-picker/src/DatePicker.d.ts

@@ -121,6 +121,8 @@ declare const datePickerProps: {
         calendarLeftPaddingYear: string;
         calendarLeftPaddingQuarter: string;
         calendarLeftPaddingMonthrange: string;
+        calendarLeftPaddingQuarterrange: string;
+        calendarLeftPaddingYearrange: string;
         calendarRightPaddingDate: string;
         calendarRightPaddingDatetime: string;
         calendarRightPaddingDaterange: string;
@@ -129,6 +131,8 @@ declare const datePickerProps: {
         calendarRightPaddingYear: string;
         calendarRightPaddingQuarter: string;
         calendarRightPaddingMonthrange: string;
+        calendarRightPaddingQuarterrange: string;
+        calendarRightPaddingYearrange: string;
     }, {
         Input: import("../../_mixins").Theme<"Input", {
             countTextColor: string;
@@ -735,6 +739,8 @@ declare const datePickerProps: {
         calendarLeftPaddingYear: string;
         calendarLeftPaddingQuarter: string;
         calendarLeftPaddingMonthrange: string;
+        calendarLeftPaddingQuarterrange: string;
+        calendarLeftPaddingYearrange: string;
         calendarRightPaddingDate: string;
         calendarRightPaddingDatetime: string;
         calendarRightPaddingDaterange: string;
@@ -743,6 +749,8 @@ declare const datePickerProps: {
         calendarRightPaddingYear: string;
         calendarRightPaddingQuarter: string;
         calendarRightPaddingMonthrange: string;
+        calendarRightPaddingQuarterrange: string;
+        calendarRightPaddingYearrange: string;
     }, {
         Input: import("../../_mixins").Theme<"Input", {
             countTextColor: string;
@@ -1349,6 +1357,8 @@ declare const datePickerProps: {
         calendarLeftPaddingYear: string;
         calendarLeftPaddingQuarter: string;
         calendarLeftPaddingMonthrange: string;
+        calendarLeftPaddingQuarterrange: string;
+        calendarLeftPaddingYearrange: string;
         calendarRightPaddingDate: string;
         calendarRightPaddingDatetime: string;
         calendarRightPaddingDaterange: string;
@@ -1357,6 +1367,8 @@ declare const datePickerProps: {
         calendarRightPaddingYear: string;
         calendarRightPaddingQuarter: string;
         calendarRightPaddingMonthrange: string;
+        calendarRightPaddingQuarterrange: string;
+        calendarRightPaddingYearrange: string;
     }, {
         Input: import("../../_mixins").Theme<"Input", {
             countTextColor: string;
@@ -2032,6 +2044,8 @@ declare const _default: import("vue").DefineComponent<{
         calendarLeftPaddingYear: string;
         calendarLeftPaddingQuarter: string;
         calendarLeftPaddingMonthrange: string;
+        calendarLeftPaddingQuarterrange: string;
+        calendarLeftPaddingYearrange: string;
         calendarRightPaddingDate: string;
         calendarRightPaddingDatetime: string;
         calendarRightPaddingDaterange: string;
@@ -2040,6 +2054,8 @@ declare const _default: import("vue").DefineComponent<{
         calendarRightPaddingYear: string;
         calendarRightPaddingQuarter: string;
         calendarRightPaddingMonthrange: string;
+        calendarRightPaddingQuarterrange: string;
+        calendarRightPaddingYearrange: string;
     }, {
         Input: import("../../_mixins").Theme<"Input", {
             countTextColor: string;
@@ -2646,6 +2662,8 @@ declare const _default: import("vue").DefineComponent<{
         calendarLeftPaddingYear: string;
         calendarLeftPaddingQuarter: string;
         calendarLeftPaddingMonthrange: string;
+        calendarLeftPaddingQuarterrange: string;
+        calendarLeftPaddingYearrange: string;
         calendarRightPaddingDate: string;
         calendarRightPaddingDatetime: string;
         calendarRightPaddingDaterange: string;
@@ -2654,6 +2672,8 @@ declare const _default: import("vue").DefineComponent<{
         calendarRightPaddingYear: string;
         calendarRightPaddingQuarter: string;
         calendarRightPaddingMonthrange: string;
+        calendarRightPaddingQuarterrange: string;
+        calendarRightPaddingYearrange: string;
     }, {
         Input: import("../../_mixins").Theme<"Input", {
             countTextColor: string;
@@ -3260,6 +3280,8 @@ declare const _default: import("vue").DefineComponent<{
         calendarLeftPaddingYear: string;
         calendarLeftPaddingQuarter: string;
         calendarLeftPaddingMonthrange: string;
+        calendarLeftPaddingQuarterrange: string;
+        calendarLeftPaddingYearrange: string;
         calendarRightPaddingDate: string;
         calendarRightPaddingDatetime: string;
         calendarRightPaddingDaterange: string;
@@ -3268,6 +3290,8 @@ declare const _default: import("vue").DefineComponent<{
         calendarRightPaddingYear: string;
         calendarRightPaddingQuarter: string;
         calendarRightPaddingMonthrange: string;
+        calendarRightPaddingQuarterrange: string;
+        calendarRightPaddingYearrange: string;
     }, {
         Input: import("../../_mixins").Theme<"Input", {
             countTextColor: string;
@@ -4120,6 +4144,8 @@ declare const _default: import("vue").DefineComponent<{
             calendarLeftPaddingYear: string;
             calendarLeftPaddingQuarter: string;
             calendarLeftPaddingMonthrange: string;
+            calendarLeftPaddingQuarterrange: string;
+            calendarLeftPaddingYearrange: string;
             calendarRightPaddingDate: string;
             calendarRightPaddingDatetime: string;
             calendarRightPaddingDaterange: string;
@@ -4128,6 +4154,8 @@ declare const _default: import("vue").DefineComponent<{
             calendarRightPaddingYear: string;
             calendarRightPaddingQuarter: string;
             calendarRightPaddingMonthrange: string;
+            calendarRightPaddingQuarterrange: string;
+            calendarRightPaddingYearrange: string;
         };
         peers: {
             Input: import("../../_mixins").Theme<"Input", {
@@ -5148,6 +5176,8 @@ declare const _default: import("vue").DefineComponent<{
         calendarLeftPaddingYear: string;
         calendarLeftPaddingQuarter: string;
         calendarLeftPaddingMonthrange: string;
+        calendarLeftPaddingQuarterrange: string;
+        calendarLeftPaddingYearrange: string;
         calendarRightPaddingDate: string;
         calendarRightPaddingDatetime: string;
         calendarRightPaddingDaterange: string;
@@ -5156,6 +5186,8 @@ declare const _default: import("vue").DefineComponent<{
         calendarRightPaddingYear: string;
         calendarRightPaddingQuarter: string;
         calendarRightPaddingMonthrange: string;
+        calendarRightPaddingQuarterrange: string;
+        calendarRightPaddingYearrange: string;
     }, {
         Input: import("../../_mixins").Theme<"Input", {
             countTextColor: string;
@@ -5762,6 +5794,8 @@ declare const _default: import("vue").DefineComponent<{
         calendarLeftPaddingYear: string;
         calendarLeftPaddingQuarter: string;
         calendarLeftPaddingMonthrange: string;
+        calendarLeftPaddingQuarterrange: string;
+        calendarLeftPaddingYearrange: string;
         calendarRightPaddingDate: string;
         calendarRightPaddingDatetime: string;
         calendarRightPaddingDaterange: string;
@@ -5770,6 +5804,8 @@ declare const _default: import("vue").DefineComponent<{
         calendarRightPaddingYear: string;
         calendarRightPaddingQuarter: string;
         calendarRightPaddingMonthrange: string;
+        calendarRightPaddingQuarterrange: string;
+        calendarRightPaddingYearrange: string;
     }, {
         Input: import("../../_mixins").Theme<"Input", {
             countTextColor: string;
@@ -6376,6 +6412,8 @@ declare const _default: import("vue").DefineComponent<{
         calendarLeftPaddingYear: string;
         calendarLeftPaddingQuarter: string;
         calendarLeftPaddingMonthrange: string;
+        calendarLeftPaddingQuarterrange: string;
+        calendarLeftPaddingYearrange: string;
         calendarRightPaddingDate: string;
         calendarRightPaddingDatetime: string;
         calendarRightPaddingDaterange: string;
@@ -6384,6 +6422,8 @@ declare const _default: import("vue").DefineComponent<{
         calendarRightPaddingYear: string;
         calendarRightPaddingQuarter: string;
         calendarRightPaddingMonthrange: string;
+        calendarRightPaddingQuarterrange: string;
+        calendarRightPaddingYearrange: string;
     }, {
         Input: import("../../_mixins").Theme<"Input", {
             countTextColor: string;

package/lib/date-picker/src/DatePicker.js

@@ -82,11 +82,13 @@ exports.default = (0, vue_1.defineComponent)({
                 case 'datetimerange':
                     return localeRef.value.dateTimeFormat;
                 case 'year':
+                case 'yearrange':
                     return localeRef.value.yearTypeFormat;
                 case 'month':
                 case 'monthrange':
                     return localeRef.value.monthTypeFormat;
                 case 'quarter':
+                case 'quarterrange':
                     return localeRef.value.quarterFormat;
             }
         });
@@ -133,7 +135,13 @@ exports.default = (0, vue_1.defineComponent)({
             return (((_b = (_a = mergedComponentPropsRef === null || mergedComponentPropsRef === void 0 ? void 0 : mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.DatePicker) === null || _b === void 0 ? void 0 : _b.timePickerSize) || 'small');
         });
         const isRangeRef = (0, vue_1.computed)(() => {
-            return ['daterange', 'datetimerange', 'monthrange'].includes(props.type);
+            return [
+                'daterange',
+                'datetimerange',
+                'monthrange',
+                'quarterrange',
+                'yearrange'
+            ].includes(props.type);
         });
         const localizedPlacehoderRef = (0, vue_1.computed)(() => {
             const { placeholder } = props;
@@ -220,7 +228,9 @@ exports.default = (0, vue_1.defineComponent)({
                 case 'quarter': {
                     return ['clear', 'now', 'confirm'];
                 }
-                case 'monthrange': {
+                case 'monthrange':
+                case 'yearrange':
+                case 'quarterrange': {
                     return ['clear', 'confirm'];
                 }
                 default: {
@@ -648,7 +658,9 @@ exports.default = (0, vue_1.defineComponent)({
         };
         const renderPanel = () => {
             const { type } = this;
-            return type === 'datetime' ? ((0, vue_1.h)(datetime_1.default, Object.assign({}, commonPanelProps))) : type === 'daterange' ? ((0, vue_1.h)(daterange_1.default, Object.assign({}, commonPanelProps, { defaultCalendarStartTime: this.defaultCalendarStartTime, defaultCalendarEndTime: this.defaultCalendarEndTime, bindCalendarMonths: this.bindCalendarMonths }))) : type === 'datetimerange' ? ((0, vue_1.h)(datetimerange_1.default, Object.assign({}, commonPanelProps, { defaultCalendarStartTime: this.defaultCalendarStartTime, defaultCalendarEndTime: this.defaultCalendarEndTime, bindCalendarMonths: this.bindCalendarMonths }))) : type === 'month' || type === 'year' || type === 'quarter' ? ((0, vue_1.h)(month_1.default, Object.assign({}, commonPanelProps, { type: type, key: type }))) : type === 'monthrange' ? ((0, vue_1.h)(monthrange_1.default, Object.assign({}, commonPanelProps, { type: type }))) : ((0, vue_1.h)(date_1.default, Object.assign({}, commonPanelProps)));
+            return type === 'datetime' ? ((0, vue_1.h)(datetime_1.default, Object.assign({}, commonPanelProps))) : type === 'daterange' ? ((0, vue_1.h)(daterange_1.default, Object.assign({}, commonPanelProps, { defaultCalendarStartTime: this.defaultCalendarStartTime, defaultCalendarEndTime: this.defaultCalendarEndTime, bindCalendarMonths: this.bindCalendarMonths }))) : type === 'datetimerange' ? ((0, vue_1.h)(datetimerange_1.default, Object.assign({}, commonPanelProps, { defaultCalendarStartTime: this.defaultCalendarStartTime, defaultCalendarEndTime: this.defaultCalendarEndTime, bindCalendarMonths: this.bindCalendarMonths }))) : type === 'month' || type === 'year' || type === 'quarter' ? ((0, vue_1.h)(month_1.default, Object.assign({}, commonPanelProps, { type: type, key: type }))) : type === 'monthrange' ||
+                type === 'yearrange' ||
+                type === 'quarterrange' ? ((0, vue_1.h)(monthrange_1.default, Object.assign({}, commonPanelProps, { type: type }))) : ((0, vue_1.h)(date_1.default, Object.assign({}, commonPanelProps)));
         };
         if (this.panel) {
             return renderPanel();

package/lib/date-picker/src/config.d.ts

@@ -1,3 +1,3 @@
 export declare const START_YEAR = 1901;
 export declare const MONTH_ITEM_HEIGHT = 40;
-export declare type DatePickerType = 'date' | 'datetime' | 'daterange' | 'datetimerange' | 'month' | 'year' | 'quarter' | 'monthrange';
+export declare type DatePickerType = 'date' | 'datetime' | 'daterange' | 'datetimerange' | 'month' | 'year' | 'quarter' | 'monthrange' | 'quarterrange' | 'yearrange';

package/lib/date-picker/src/panel/date.d.ts

@@ -214,6 +214,8 @@ declare const _default: import("vue").DefineComponent<{
             calendarLeftPaddingYear: string;
             calendarLeftPaddingQuarter: string;
             calendarLeftPaddingMonthrange: string;
+            calendarLeftPaddingQuarterrange: string;
+            calendarLeftPaddingYearrange: string;
             calendarRightPaddingDate: string;
             calendarRightPaddingDatetime: string;
             calendarRightPaddingDaterange: string;
@@ -222,6 +224,8 @@ declare const _default: import("vue").DefineComponent<{
             calendarRightPaddingYear: string;
             calendarRightPaddingQuarter: string;
             calendarRightPaddingMonthrange: string;
+            calendarRightPaddingQuarterrange: string;
+            calendarRightPaddingYearrange: string;
         };
         peers: {
             Input: import("../../../_mixins").Theme<"Input", {