naive-ui 2.23.1 → 2.24.2

package/es/_internal/selection/src/Selection.d.ts

@@ -5,6 +5,7 @@ import type { RenderLabel, RenderLabelImpl } from '../../select-menu/src/interfa
 export interface InternalSelectionInst {
     focus: () => void;
     focusInput: () => void;
+    blur: () => void;
     $el: HTMLElement;
 }
 declare const _default: import("vue").DefineComponent<{
@@ -107,6 +108,7 @@ declare const _default: import("vue").DefineComponent<{
         clearColorHover: string;
         clearColorPressed: string;
         paddingSingle: string;
+        paddingMultiple: string;
         clearSize: string;
         arrowSize: string;
     }, {
@@ -175,6 +177,7 @@ declare const _default: import("vue").DefineComponent<{
         clearColorHover: string;
         clearColorPressed: string;
         paddingSingle: string;
+        paddingMultiple: string;
         clearSize: string;
         arrowSize: string;
     }, {
@@ -243,6 +246,7 @@ declare const _default: import("vue").DefineComponent<{
         clearColorHover: string;
         clearColorPressed: string;
         paddingSingle: string;
+        paddingMultiple: string;
         clearSize: string;
         arrowSize: string;
     }, {
@@ -416,6 +420,7 @@ declare const _default: import("vue").DefineComponent<{
             clearColorHover: string;
             clearColorPressed: string;
             paddingSingle: string;
+            paddingMultiple: string;
             clearSize: string;
             arrowSize: string;
         };
@@ -483,112 +488,110 @@ declare const _default: import("vue").DefineComponent<{
     onPopoverUpdateShow: (show: boolean) => void;
     focus: () => void;
     focusInput: () => void;
+    blur: () => void;
     blurInput: () => void;
     updateCounter: (count: number) => void;
     getCounter: () => HTMLElement | null;
     getTail: () => HTMLElement | null;
     renderLabel: RenderLabelImpl;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--border': string;
-        '--border-active': string;
-        '--border-focus': string;
-        '--border-hover': string;
-        '--border-radius': string;
-        '--box-shadow-active': string;
-        '--box-shadow-focus': string;
-        '--box-shadow-hover': null;
-        '--caret-color': string;
-        '--color': string;
-        '--color-active': string;
-        '--color-disabled': string;
-        '--font-size': string;
-        '--height': string;
-        '--padding-single': string;
-        '--placeholder-color': string;
-        '--placeholder-color-disabled': string;
-        '--text-color': string;
-        '--text-color-disabled': string;
-        '--arrow-color': string;
-        '--arrow-color-disabled': string;
-        '--loading-color': string;
-        '--color-active-warning': string;
-        '--box-shadow-focus-warning': string;
-        '--box-shadow-active-warning': string;
-        '--box-shadow-hover-warning': null;
-        '--border-warning': string;
-        '--border-focus-warning': string;
-        '--border-hover-warning': string;
-        '--border-active-warning': string;
-        '--color-active-error': string;
-        '--box-shadow-focus-error': string;
-        '--box-shadow-active-error': string;
-        '--box-shadow-hover-error': null;
-        '--border-error': string;
-        '--border-focus-error': string;
-        '--border-hover-error': string;
-        '--border-active-error': string;
-        '--clear-size': string;
-        '--clear-color': string;
-        '--clear-color-hover': string;
-        '--clear-color-pressed': string;
-        '--arrow-size': string;
+        '--n-bezier': string;
+        '--n-border': string;
+        '--n-border-active': string;
+        '--n-border-focus': string;
+        '--n-border-hover': string;
+        '--n-border-radius': string;
+        '--n-box-shadow-active': string;
+        '--n-box-shadow-focus': string;
+        '--n-box-shadow-hover': null;
+        '--n-caret-color': string;
+        '--n-color': string;
+        '--n-color-active': string;
+        '--n-color-disabled': string;
+        '--n-font-size': string;
+        '--n-height': string;
+        '--n-padding-single': string;
+        '--n-padding-multiple': string;
+        '--n-placeholder-color': string;
+        '--n-placeholder-color-disabled': string;
+        '--n-text-color': string;
+        '--n-text-color-disabled': string;
+        '--n-arrow-color': string;
+        '--n-arrow-color-disabled': string;
+        '--n-loading-color': string;
+        '--n-color-active-warning': string;
+        '--n-box-shadow-focus-warning': string;
+        '--n-box-shadow-active-warning': string;
+        '--n-box-shadow-hover-warning': null;
+        '--n-border-warning': string;
+        '--n-border-focus-warning': string;
+        '--n-border-hover-warning': string;
+        '--n-border-active-warning': string;
+        '--n-color-active-error': string;
+        '--n-box-shadow-focus-error': string;
+        '--n-box-shadow-active-error': string;
+        '--n-box-shadow-hover-error': null;
+        '--n-border-error': string;
+        '--n-border-focus-error': string;
+        '--n-border-hover-error': string;
+        '--n-border-active-error': string;
+        '--n-clear-size': string;
+        '--n-clear-color': string;
+        '--n-clear-color-hover': string;
+        '--n-clear-color-pressed': string;
+        '--n-arrow-size': string;
     }>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    clsPrefix?: unknown;
-    bordered?: unknown;
-    active?: unknown;
-    pattern?: unknown;
-    placeholder?: unknown;
-    selectedOption?: unknown;
-    selectedOptions?: unknown;
-    multiple?: unknown;
-    filterable?: unknown;
-    clearable?: unknown;
-    disabled?: unknown;
-    size?: unknown;
-    loading?: unknown;
-    autofocus?: unknown;
-    showArrow?: unknown;
-    inputProps?: unknown;
-    focused?: unknown;
-    renderTag?: unknown;
-    onKeyup?: unknown;
-    onKeydown?: unknown;
-    onClick?: unknown;
-    onBlur?: unknown;
-    onFocus?: unknown;
-    onDeleteOption?: unknown;
-    maxTagCount?: unknown;
-    onClear?: unknown;
-    onPatternInput?: unknown;
-    renderLabel?: unknown;
-    theme?: unknown;
-    themeOverrides?: unknown;
-    builtinThemeOverrides?: unknown;
-} & {
-    pattern: string;
-    size: "small" | "medium" | "large";
-    multiple: boolean;
-    active: boolean;
-    disabled: boolean;
-    autofocus: boolean;
-    loading: boolean;
-    clsPrefix: string;
-    showArrow: boolean;
-    selectedOption: SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)> | null;
-    selectedOptions: SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)>[] | null;
-    filterable: boolean;
-    clearable: boolean;
-    focused: boolean;
-} & {
-    onFocus?: ((e: FocusEvent) => void) | undefined;
-    onBlur?: ((e: FocusEvent) => void) | undefined;
-    onKeydown?: ((e: KeyboardEvent) => void) | undefined;
-    onKeyup?: ((e: KeyboardEvent) => void) | undefined;
-    onClick?: ((e: MouseEvent) => void) | undefined;
-    placeholder?: string | undefined;
-    theme?: import("../../../_mixins").Theme<"InternalSelection", {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    clsPrefix: {
+        type: StringConstructor;
+        required: true;
+    };
+    bordered: {
+        type: PropType<boolean | undefined>;
+        default: undefined;
+    };
+    active: BooleanConstructor;
+    pattern: {
+        type: StringConstructor;
+        default: null;
+    };
+    placeholder: StringConstructor;
+    selectedOption: {
+        type: PropType<SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)> | null>;
+        default: null;
+    };
+    selectedOptions: {
+        type: PropType<SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)>[] | null>;
+        default: null;
+    };
+    multiple: BooleanConstructor;
+    filterable: BooleanConstructor;
+    clearable: BooleanConstructor;
+    disabled: BooleanConstructor;
+    size: {
+        type: PropType<"small" | "medium" | "large">;
+        default: string;
+    };
+    loading: BooleanConstructor;
+    autofocus: BooleanConstructor;
+    showArrow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    inputProps: PropType<InputHTMLAttributes>;
+    focused: BooleanConstructor;
+    renderTag: PropType<RenderTag>;
+    onKeyup: PropType<(e: KeyboardEvent) => void>;
+    onKeydown: PropType<(e: KeyboardEvent) => void>;
+    onClick: PropType<(e: MouseEvent) => void>;
+    onBlur: PropType<(e: FocusEvent) => void>;
+    onFocus: PropType<(e: FocusEvent) => void>;
+    onDeleteOption: PropType<(option: SelectBaseOption) => void>;
+    maxTagCount: PropType<number | "responsive">;
+    onClear: PropType<(e: MouseEvent) => void>;
+    onPatternInput: PropType<(e: InputEvent) => void>;
+    renderLabel: PropType<RenderLabel>;
+    theme: PropType<import("../../../_mixins").Theme<"InternalSelection", {
         fontSizeTiny: string;
         fontSizeSmall: string;
         fontSizeMedium: string;
@@ -638,6 +641,7 @@ declare const _default: import("vue").DefineComponent<{
         clearColorHover: string;
         clearColorPressed: string;
         paddingSingle: string;
+        paddingMultiple: string;
         clearSize: string;
         arrowSize: string;
     }, {
@@ -655,8 +659,8 @@ declare const _default: import("vue").DefineComponent<{
             arrowHeight: string;
             padding: string;
         }, any>;
-    }> | undefined;
-    themeOverrides?: import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"InternalSelection", {
+    }>>;
+    themeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"InternalSelection", {
         fontSizeTiny: string;
         fontSizeSmall: string;
         fontSizeMedium: string;
@@ -706,6 +710,7 @@ declare const _default: import("vue").DefineComponent<{
         clearColorHover: string;
         clearColorPressed: string;
         paddingSingle: string;
+        paddingMultiple: string;
         clearSize: string;
         arrowSize: string;
     }, {
@@ -723,8 +728,8 @@ declare const _default: import("vue").DefineComponent<{
             arrowHeight: string;
             padding: string;
         }, any>;
-    }>> | undefined;
-    builtinThemeOverrides?: import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"InternalSelection", {
+    }>>>;
+    builtinThemeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"InternalSelection", {
         fontSizeTiny: string;
         fontSizeSmall: string;
         fontSizeMedium: string;
@@ -774,6 +779,7 @@ declare const _default: import("vue").DefineComponent<{
         clearColorHover: string;
         clearColorPressed: string;
         paddingSingle: string;
+        paddingMultiple: string;
         clearSize: string;
         arrowSize: string;
     }, {
@@ -791,16 +797,8 @@ declare const _default: import("vue").DefineComponent<{
             arrowHeight: string;
             padding: string;
         }, any>;
-    }>> | undefined;
-    bordered?: boolean | undefined;
-    renderLabel?: RenderLabel | undefined;
-    onClear?: ((e: MouseEvent) => void) | undefined;
-    inputProps?: InputHTMLAttributes | undefined;
-    renderTag?: RenderTag | undefined;
-    onDeleteOption?: ((option: SelectBaseOption) => void) | undefined;
-    maxTagCount?: number | "responsive" | undefined;
-    onPatternInput?: ((e: InputEvent) => void) | undefined;
-}>, {
+    }>>>;
+}>>, {
     pattern: string;
     size: "small" | "medium" | "large";
     multiple: boolean;

package/es/_internal/selection/src/Selection.js

@@ -208,20 +208,33 @@ export default defineComponent({
         function handlePatternInputBlur(e) {
             patternInputFocusedRef.value = false;
         }
-        function focus() {
+        function blur() {
+            var _a, _b;
             if (props.filterable) {
                 patternInputFocusedRef.value = false;
-                const { value: patternInputWrapperEl } = patternInputWrapperRef;
-                if (patternInputWrapperEl)
-                    patternInputWrapperEl.focus();
+                (_a = patternInputWrapperRef.value) === null || _a === void 0 ? void 0 : _a.blur();
+                (_b = patternInputRef.value) === null || _b === void 0 ? void 0 : _b.blur();
             }
             else if (props.multiple) {
                 const { value: multipleEl } = multipleElRef;
-                multipleEl === null || multipleEl === void 0 ? void 0 : multipleEl.focus();
+                multipleEl === null || multipleEl === void 0 ? void 0 : multipleEl.blur();
             }
             else {
                 const { value: singleEl } = singleElRef;
-                singleEl === null || singleEl === void 0 ? void 0 : singleEl.focus();
+                singleEl === null || singleEl === void 0 ? void 0 : singleEl.blur();
+            }
+        }
+        function focus() {
+            var _a, _b, _c;
+            if (props.filterable) {
+                patternInputFocusedRef.value = false;
+                (_a = patternInputWrapperRef.value) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            else if (props.multiple) {
+                (_b = multipleElRef.value) === null || _b === void 0 ? void 0 : _b.focus();
+            }
+            else {
+                (_c = singleElRef.value) === null || _c === void 0 ? void 0 : _c.focus();
             }
         }
         function focusInput() {
@@ -319,6 +332,7 @@ export default defineComponent({
             onPopoverUpdateShow,
             focus,
             focusInput,
+            blur,
             blurInput,
             updateCounter,
             getCounter,
@@ -326,7 +340,7 @@ export default defineComponent({
             renderLabel: props.renderLabel,
             cssVars: computed(() => {
                 const { size } = props;
-                const { common: { cubicBezierEaseInOut }, self: { borderRadius, color, placeholderColor, textColor, paddingSingle, caretColor, colorDisabled, textColorDisabled, placeholderColorDisabled, colorActive, boxShadowFocus, boxShadowActive, boxShadowHover, border, borderFocus, borderHover, borderActive, arrowColor, arrowColorDisabled, loadingColor, 
+                const { common: { cubicBezierEaseInOut }, self: { borderRadius, color, placeholderColor, textColor, paddingSingle, paddingMultiple, caretColor, colorDisabled, textColorDisabled, placeholderColorDisabled, colorActive, boxShadowFocus, boxShadowActive, boxShadowHover, border, borderFocus, borderHover, borderActive, arrowColor, arrowColorDisabled, loadingColor, 
                 // form warning
                 colorActiveWarning, boxShadowFocusWarning, boxShadowActiveWarning, boxShadowHoverWarning, borderWarning, borderFocusWarning, borderHoverWarning, borderActiveWarning, 
                 // form error
@@ -336,54 +350,55 @@ export default defineComponent({
                 // arrow
                 arrowSize, [createKey('height', size)]: height, [createKey('fontSize', size)]: fontSize } } = themeRef.value;
                 return {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--border': border,
-                    '--border-active': borderActive,
-                    '--border-focus': borderFocus,
-                    '--border-hover': borderHover,
-                    '--border-radius': borderRadius,
-                    '--box-shadow-active': boxShadowActive,
-                    '--box-shadow-focus': boxShadowFocus,
-                    '--box-shadow-hover': boxShadowHover,
-                    '--caret-color': caretColor,
-                    '--color': color,
-                    '--color-active': colorActive,
-                    '--color-disabled': colorDisabled,
-                    '--font-size': fontSize,
-                    '--height': height,
-                    '--padding-single': paddingSingle,
-                    '--placeholder-color': placeholderColor,
-                    '--placeholder-color-disabled': placeholderColorDisabled,
-                    '--text-color': textColor,
-                    '--text-color-disabled': textColorDisabled,
-                    '--arrow-color': arrowColor,
-                    '--arrow-color-disabled': arrowColorDisabled,
-                    '--loading-color': loadingColor,
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-border': border,
+                    '--n-border-active': borderActive,
+                    '--n-border-focus': borderFocus,
+                    '--n-border-hover': borderHover,
+                    '--n-border-radius': borderRadius,
+                    '--n-box-shadow-active': boxShadowActive,
+                    '--n-box-shadow-focus': boxShadowFocus,
+                    '--n-box-shadow-hover': boxShadowHover,
+                    '--n-caret-color': caretColor,
+                    '--n-color': color,
+                    '--n-color-active': colorActive,
+                    '--n-color-disabled': colorDisabled,
+                    '--n-font-size': fontSize,
+                    '--n-height': height,
+                    '--n-padding-single': paddingSingle,
+                    '--n-padding-multiple': paddingMultiple,
+                    '--n-placeholder-color': placeholderColor,
+                    '--n-placeholder-color-disabled': placeholderColorDisabled,
+                    '--n-text-color': textColor,
+                    '--n-text-color-disabled': textColorDisabled,
+                    '--n-arrow-color': arrowColor,
+                    '--n-arrow-color-disabled': arrowColorDisabled,
+                    '--n-loading-color': loadingColor,
                     // form warning
-                    '--color-active-warning': colorActiveWarning,
-                    '--box-shadow-focus-warning': boxShadowFocusWarning,
-                    '--box-shadow-active-warning': boxShadowActiveWarning,
-                    '--box-shadow-hover-warning': boxShadowHoverWarning,
-                    '--border-warning': borderWarning,
-                    '--border-focus-warning': borderFocusWarning,
-                    '--border-hover-warning': borderHoverWarning,
-                    '--border-active-warning': borderActiveWarning,
+                    '--n-color-active-warning': colorActiveWarning,
+                    '--n-box-shadow-focus-warning': boxShadowFocusWarning,
+                    '--n-box-shadow-active-warning': boxShadowActiveWarning,
+                    '--n-box-shadow-hover-warning': boxShadowHoverWarning,
+                    '--n-border-warning': borderWarning,
+                    '--n-border-focus-warning': borderFocusWarning,
+                    '--n-border-hover-warning': borderHoverWarning,
+                    '--n-border-active-warning': borderActiveWarning,
                     // form error
-                    '--color-active-error': colorActiveError,
-                    '--box-shadow-focus-error': boxShadowFocusError,
-                    '--box-shadow-active-error': boxShadowActiveError,
-                    '--box-shadow-hover-error': boxShadowHoverError,
-                    '--border-error': borderError,
-                    '--border-focus-error': borderFocusError,
-                    '--border-hover-error': borderHoverError,
-                    '--border-active-error': borderActiveError,
+                    '--n-color-active-error': colorActiveError,
+                    '--n-box-shadow-focus-error': boxShadowFocusError,
+                    '--n-box-shadow-active-error': boxShadowActiveError,
+                    '--n-box-shadow-hover-error': boxShadowHoverError,
+                    '--n-border-error': borderError,
+                    '--n-border-focus-error': borderFocusError,
+                    '--n-border-hover-error': borderHoverError,
+                    '--n-border-active-error': borderActiveError,
                     // clear
-                    '--clear-size': clearSize,
-                    '--clear-color': clearColor,
-                    '--clear-color-hover': clearColorHover,
-                    '--clear-color-pressed': clearColorPressed,
+                    '--n-clear-size': clearSize,
+                    '--n-clear-color': clearColor,
+                    '--n-clear-color-hover': clearColorHover,
+                    '--n-clear-color-pressed': clearColorPressed,
                     // arrow-size
-                    '--arrow-size': arrowSize
+                    '--n-arrow-size': arrowSize
                 };
             })
         };
@@ -393,7 +408,9 @@ export default defineComponent({
         const maxTagCountResponsive = maxTagCount === 'responsive';
         const maxTagCountNumeric = typeof maxTagCount === 'number';
         const useMaxTagCount = maxTagCountResponsive || maxTagCountNumeric;
-        const suffix = (h(Suffix, { clsPrefix: clsPrefix, loading: this.loading, showArrow: this.showArrow, showClear: this.mergedClearable && this.selected, onClear: this.handleClear }));
+        const suffix = (h(Suffix, { clsPrefix: clsPrefix, loading: this.loading, showArrow: this.showArrow, showClear: this.mergedClearable && this.selected, onClear: this.handleClear }, {
+            default: () => { var _a, _b; return (_b = (_a = this.$slots).arrow) === null || _b === void 0 ? void 0 : _b.call(_a); }
+        }));
         let body;
         if (multiple) {
             const createTag = (option) => (h("div", { class: `${clsPrefix}-base-selection-tag-wrapper`, key: option.value }, renderTag ? (renderTag({