naive-ui 2.24.7 → 2.25.0

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

@@ -25,7 +25,7 @@ declare const popselectProps: {
     onChange: PropType<import("../../_utils").MaybeArray<import("../../select/src/interface").OnUpdateValue> | undefined>;
     placement: {
         default: string;
-        type: PropType<import("vueuc").FollowerPlacement>;
+        type: PropType<import("vueuc/lib/binder/src/interface").Placement>;
     };
     trigger: {
         type: PropType<PopoverTrigger>;
@@ -68,6 +68,10 @@ declare const popselectProps: {
         type: PropType<"show" | "if">;
         default: string;
     };
+    keepAliveOnHover: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     internalTrapFocus: BooleanConstructor;
     animated: {
         type: BooleanConstructor;
@@ -319,7 +323,7 @@ declare const _default: import("vue").DefineComponent<{
     onChange: PropType<import("../../_utils").MaybeArray<import("../../select/src/interface").OnUpdateValue> | undefined>;
     placement: {
         default: string;
-        type: PropType<import("vueuc").FollowerPlacement>;
+        type: PropType<import("vueuc/lib/binder/src/interface").Placement>;
     };
     trigger: {
         type: PropType<PopoverTrigger>;
@@ -362,6 +366,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<"show" | "if">;
         default: string;
     };
+    keepAliveOnHover: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     internalTrapFocus: BooleanConstructor;
     animated: {
         type: BooleanConstructor;
@@ -818,7 +826,7 @@ declare const _default: import("vue").DefineComponent<{
     onChange: PropType<import("../../_utils").MaybeArray<import("../../select/src/interface").OnUpdateValue> | undefined>;
     placement: {
         default: string;
-        type: PropType<import("vueuc").FollowerPlacement>;
+        type: PropType<import("vueuc/lib/binder/src/interface").Placement>;
     };
     trigger: {
         type: PropType<PopoverTrigger>;
@@ -861,6 +869,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<"show" | "if">;
         default: string;
     };
+    keepAliveOnHover: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     internalTrapFocus: BooleanConstructor;
     animated: {
         type: BooleanConstructor;
@@ -1096,20 +1108,21 @@ declare const _default: import("vue").DefineComponent<{
     disabled: boolean;
     duration: number;
     to: string | boolean | HTMLElement;
+    options: import("../../select/src/interface").SelectMixedOption[];
     raw: boolean;
-    placement: import("vueuc").FollowerPlacement;
+    placement: import("vueuc/lib/binder/src/interface").Placement;
     overlap: boolean;
     scrollable: boolean;
     trigger: PopoverTrigger;
     delay: number;
     displayDirective: "show" | "if";
+    keepAliveOnHover: boolean;
     internalTrapFocus: boolean;
     animated: boolean;
     defaultShow: boolean;
     internalExtraClass: string[];
     internalSyncTargetWithParent: boolean;
     internalInheritedEventHandlers: import("../../popover/src/Popover").TriggerEventHandlers[];
-    options: import("../../select/src/interface").SelectMixedOption[];
     cancelable: boolean;
 }>;
 export default _default;

package/lib/popselect/src/Popselect.js

@@ -36,7 +36,7 @@ exports.default = (0, vue_1.defineComponent)({
     props: popselectProps,
     __popover__: true,
     setup(props) {
-        const themeRef = (0, _mixins_1.useTheme)('Popselect', 'Popselect', undefined, styles_1.popselectLight, props);
+        const themeRef = (0, _mixins_1.useTheme)('Popselect', '-popselect', undefined, styles_1.popselectLight, props);
         const popoverInstRef = (0, vue_1.ref)(null);
         function syncPosition() {
             var _a;
@@ -69,7 +69,10 @@ exports.default = (0, vue_1.defineComponent)({
                 return ((0, vue_1.h)(PopselectPanel_1.default, Object.assign({}, (0, vue_1.mergeProps)(this.$attrs, {
                     class: className,
                     style
-                }), (0, _utils_1.keep)(this.$props, PopselectPanel_1.panelPropKeys), { ref: (0, _utils_1.createRefSetter)(ref), onMouseenter: onMouseenter, onMouseleave: onMouseleave }), { default: () => { var _a, _b; return (_b = (_a = this.$slots).default) === null || _b === void 0 ? void 0 : _b.call(_a); } }));
+                }), (0, _utils_1.keep)(this.$props, PopselectPanel_1.panelPropKeys), { ref: (0, _utils_1.createRefSetter)(ref), onMouseenter: onMouseenter, onMouseleave: onMouseleave }), {
+                    action: () => { var _a, _b; return (_b = (_a = this.$slots).action) === null || _b === void 0 ? void 0 : _b.call(_a); },
+                    empty: () => { var _a, _b; return (_b = (_a = this.$slots).empty) === null || _b === void 0 ? void 0 : _b.call(_a); }
+                }));
             }
         };
         return ((0, vue_1.h)(popover_1.NPopover, Object.assign({}, (0, _utils_1.omit)(this.$props, PopselectPanel_1.panelPropKeys), popoverProps), {

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

@@ -27,7 +27,7 @@ export declare const panelProps: {
     readonly renderLabel: PropType<RenderLabel>;
     readonly onChange: PropType<MaybeArray<OnUpdateValue> | undefined>;
 };
-export declare const panelPropKeys: ("value" | "size" | "multiple" | "onChange" | "onMouseenter" | "onMouseleave" | "scrollable" | "renderLabel" | "options" | "onUpdate:value" | "onUpdateValue" | "cancelable")[];
+export declare const panelPropKeys: ("value" | "size" | "multiple" | "onChange" | "onMouseenter" | "onMouseleave" | "options" | "scrollable" | "renderLabel" | "onUpdate:value" | "onUpdateValue" | "cancelable")[];
 declare const _default: import("vue").DefineComponent<{
     readonly multiple: BooleanConstructor;
     readonly value: {
@@ -283,8 +283,8 @@ declare const _default: import("vue").DefineComponent<{
     value: Value | null;
     size: PopselectSize;
     multiple: boolean;
-    scrollable: boolean;
     options: SelectMixedOption[];
+    scrollable: boolean;
     cancelable: boolean;
 }>;
 export default _default;

package/lib/popselect/src/PopselectPanel.js

@@ -130,6 +130,9 @@ exports.default = (0, vue_1.defineComponent)({
         };
     },
     render() {
-        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, virtualScroll: false, scrollable: this.scrollable, renderLabel: this.renderLabel, onToggle: this.handleToggle, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseenter, onMousedown: this.handleMenuMousedown }, this.$slots));
+        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, virtualScroll: false, scrollable: this.scrollable, renderLabel: this.renderLabel, onToggle: this.handleToggle, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseenter, onMousedown: this.handleMenuMousedown }, {
+            action: () => { var _a, _b; return ((_b = (_a = this.$slots).action) === null || _b === void 0 ? void 0 : _b.call(_a)) || []; },
+            empty: () => { var _a, _b; return ((_b = (_a = this.$slots).empty) === null || _b === void 0 ? void 0 : _b.call(_a)) || []; }
+        }));
     }
 });

package/lib/progress/src/Progress.d.ts

@@ -373,9 +373,9 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     type: "circle" | "line" | "multiple-circle";
     strokeWidth: number;
+    status: Status;
     processing: boolean;
     unit: string;
-    status: Status;
     indicatorPlacement: "inside" | "outside";
     showIndicator: boolean;
     viewBoxWidth: number;

package/lib/progress/src/Progress.js

@@ -47,7 +47,7 @@ exports.default = (0, vue_1.defineComponent)({
             return props.indicatorPlacement || props.indicatorPosition;
         });
         const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
-        const themeRef = (0, _mixins_1.useTheme)('Progress', 'Progress', index_cssr_1.default, styles_1.progressLight, props, mergedClsPrefixRef);
+        const themeRef = (0, _mixins_1.useTheme)('Progress', '-progress', index_cssr_1.default, styles_1.progressLight, props, mergedClsPrefixRef);
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             mergedIndicatorPlacement: mergedIndicatorPlacementRef,

package/lib/radio/src/Radio.js

@@ -14,7 +14,7 @@ exports.default = (0, vue_1.defineComponent)({
     props: Object.assign(Object.assign({}, _mixins_1.useTheme.props), use_radio_1.default.props),
     setup(props) {
         const radio = (0, use_radio_1.default)(props);
-        const themeRef = (0, _mixins_1.useTheme)('Radio', 'Radio', radio_cssr_1.default, styles_1.radioLight, props, radio.mergedClsPrefix);
+        const themeRef = (0, _mixins_1.useTheme)('Radio', '-radio', radio_cssr_1.default, styles_1.radioLight, props, radio.mergedClsPrefix);
         return Object.assign(radio, {
             cssVars: (0, vue_1.computed)(() => {
                 const { mergedSize: { value: size } } = radio;

package/lib/radio/src/RadioGroup.js

@@ -81,7 +81,7 @@ exports.default = (0, vue_1.defineComponent)({
         const selfElRef = (0, vue_1.ref)(null);
         const { mergedSizeRef, mergedDisabledRef, nTriggerFormChange, nTriggerFormInput, nTriggerFormBlur, nTriggerFormFocus } = (0, _mixins_1.useFormItem)(props);
         const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
-        const themeRef = (0, _mixins_1.useTheme)('Radio', 'RadioGroup', radio_group_cssr_1.default, styles_1.radioLight, props, mergedClsPrefixRef);
+        const themeRef = (0, _mixins_1.useTheme)('Radio', '-radio-group', radio_group_cssr_1.default, styles_1.radioLight, props, mergedClsPrefixRef);
         const uncontrolledValueRef = (0, vue_1.ref)(props.defaultValue);
         const controlledValueRef = (0, vue_1.toRef)(props, 'value');
         const mergedValueRef = (0, vooks_1.useMergedState)(controlledValueRef, uncontrolledValueRef);

package/lib/rate/src/Rate.js

@@ -26,7 +26,7 @@ exports.default = (0, vue_1.defineComponent)({
     props: rateProps,
     setup(props) {
         const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
-        const themeRef = (0, _mixins_1.useTheme)('Rate', 'Rate', index_cssr_1.default, styles_1.rateLight, props, mergedClsPrefixRef);
+        const themeRef = (0, _mixins_1.useTheme)('Rate', '-rate', index_cssr_1.default, styles_1.rateLight, props, mergedClsPrefixRef);
         const controlledValueRef = (0, vue_1.toRef)(props, 'value');
         const uncontrolledValueRef = (0, vue_1.ref)(props.defaultValue);
         const hoverIndexRef = (0, vue_1.ref)(null);

package/lib/result/src/Result.d.ts

@@ -6,7 +6,7 @@ declare const resultProps: {
         default: string;
     };
     status: {
-        type: PropType<"500" | "error" | "info" | "success" | "warning" | "404" | "403" | "418">;
+        type: PropType<"500" | "success" | "error" | "warning" | "info" | "404" | "403" | "418">;
         default: string;
     };
     title: StringConstructor;
@@ -97,7 +97,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
     status: {
-        type: PropType<"500" | "error" | "info" | "success" | "warning" | "404" | "403" | "418">;
+        type: PropType<"500" | "success" | "error" | "warning" | "info" | "404" | "403" | "418">;
         default: string;
     };
     title: StringConstructor;
@@ -199,7 +199,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
     status: {
-        type: PropType<"500" | "error" | "info" | "success" | "warning" | "404" | "403" | "418">;
+        type: PropType<"500" | "success" | "error" | "warning" | "info" | "404" | "403" | "418">;
         default: string;
     };
     title: StringConstructor;
@@ -284,6 +284,6 @@ declare const _default: import("vue").DefineComponent<{
     }, any>>>;
 }>>, {
     size: "small" | "medium" | "large" | "huge";
-    status: "500" | "error" | "info" | "success" | "warning" | "404" | "403" | "418";
+    status: "500" | "success" | "error" | "warning" | "info" | "404" | "403" | "418";
 }>;
 export default _default;

package/lib/result/src/Result.js

@@ -36,7 +36,7 @@ exports.default = (0, vue_1.defineComponent)({
     props: resultProps,
     setup(props) {
         const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
-        const themeRef = (0, _mixins_1.useTheme)('Result', 'Result', index_cssr_1.default, styles_1.resultLight, props, mergedClsPrefixRef);
+        const themeRef = (0, _mixins_1.useTheme)('Result', '-result', index_cssr_1.default, styles_1.resultLight, props, mergedClsPrefixRef);
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             cssVars: (0, vue_1.computed)(() => {

package/lib/select/index.d.ts

@@ -1,3 +1,5 @@
 export { default as NSelect } from './src/Select';
 export type { SelectProps } from './src/Select';
 export type { SelectGroupOption, SelectOption, SelectInst } from './src/interface';
+export type { RenderLabelImpl as SelectRenderLabel, RenderOptionImpl as SelectRenderOption } from '../_internal/select-menu/src/interface';
+export type { RenderTag as SelectRenderTag } from '../_internal/selection/src/interface';

package/lib/select/src/Select.d.ts

@@ -5,7 +5,7 @@ import { RenderLabel, RenderOption } from '../../_internal/select-menu/src/inter
 import { RenderTag } from '../../_internal/selection/src/interface';
 import type { MaybeArray, ExtractPublicPropTypes } from '../../_utils';
 import { defaultFilter } from './utils';
-import type { SelectMixedOption, SelectBaseOption, SelectGroupOption, SelectIgnoredOption, OnUpdateValue, Value, Size, ValueAtom } from './interface';
+import type { SelectMixedOption, SelectOption, SelectGroupOption, SelectIgnoredOption, SelectFallbackOption, OnUpdateValue, Value, Size, ValueAtom } from './interface';
 declare const selectProps: {
     readonly to: {
         type: PropType<string | boolean | HTMLElement>;
@@ -37,7 +37,7 @@ declare const selectProps: {
     readonly remote: BooleanConstructor;
     readonly loading: BooleanConstructor;
     readonly filter: {
-        readonly type: PropType<(pattern: string, option: SelectBaseOption) => boolean>;
+        readonly type: PropType<(pattern: string, option: SelectOption) => boolean>;
         readonly default: typeof defaultFilter;
     };
     readonly placement: {
@@ -50,14 +50,14 @@ declare const selectProps: {
     };
     readonly tag: BooleanConstructor;
     readonly onCreate: {
-        readonly type: PropType<(label: string) => SelectBaseOption>;
+        readonly type: PropType<(label: string) => SelectOption>;
         readonly default: (label: string) => {
             label: string;
             value: string;
         };
     };
     readonly fallbackOption: {
-        readonly type: PropType<false | ((value: string | number) => SelectBaseOption)>;
+        readonly type: PropType<false | SelectFallbackOption>;
         readonly default: () => (value: string | number) => {
             label: string;
             value: string | number;
@@ -512,7 +512,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly remote: BooleanConstructor;
     readonly loading: BooleanConstructor;
     readonly filter: {
-        readonly type: PropType<(pattern: string, option: SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)>) => boolean>;
+        readonly type: PropType<(pattern: string, option: SelectOption) => boolean>;
         readonly default: typeof defaultFilter;
     };
     readonly placement: {
@@ -525,14 +525,14 @@ declare const _default: import("vue").DefineComponent<{
     };
     readonly tag: BooleanConstructor;
     readonly onCreate: {
-        readonly type: PropType<(label: string) => SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)>>;
+        readonly type: PropType<(label: string) => SelectOption>;
         readonly default: (label: string) => {
             label: string;
             value: string;
         };
     };
     readonly fallbackOption: {
-        readonly type: PropType<false | ((value: string | number) => SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)>)>;
+        readonly type: PropType<false | SelectFallbackOption>;
         readonly default: () => (value: string | number) => {
             label: string;
             value: string | number;
@@ -955,12 +955,14 @@ declare const _default: import("vue").DefineComponent<{
         }>;
     }>>>;
 }, {
+    mergedStatus: import("vue").ComputedRef<import("../../form/src/interface").FormValidationStatus | undefined>;
     mergedClsPrefix: import("vue").ComputedRef<string>;
     mergedBordered: import("vue").ComputedRef<boolean>;
     namespace: import("vue").ComputedRef<string | undefined>;
-    treeMate: import("vue").ComputedRef<import("treemate").TreeMate<SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)>, SelectGroupOption, SelectIgnoredOption>>;
+    treeMate: import("vue").ComputedRef<import("treemate").TreeMate<SelectOption, SelectGroupOption, SelectIgnoredOption>>;
     isMounted: Readonly<import("vue").Ref<boolean>>;
     triggerRef: import("vue").Ref<{
+        isCompositing: boolean;
         focus: () => void;
         focusInput: () => void;
         blur: () => void;
@@ -968,7 +970,7 @@ declare const _default: import("vue").DefineComponent<{
     } | null>;
     menuRef: import("vue").Ref<{
         selfRef: HTMLElement | null;
-        getPendingTmNode: () => TreeNode<SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)>, SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)>, SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)>> | null;
+        getPendingTmNode: () => TreeNode<import("./interface").SelectBaseOption<string | number, string | ((option: import("./interface").SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)>, import("./interface").SelectBaseOption<string | number, string | ((option: import("./interface").SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)>, import("./interface").SelectBaseOption<string | number, string | ((option: import("./interface").SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)>> | null;
         prev: () => void;
         next: () => void;
     } | null>;
@@ -982,28 +984,29 @@ declare const _default: import("vue").DefineComponent<{
         syncPosition: () => void;
     } | null>;
     localizedPlaceholder: import("vue").ComputedRef<string>;
-    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<SelectOption | null>;
+    selectedOptions: import("vue").ComputedRef<SelectOption[] | null>;
     mergedSize: import("vue").ComputedRef<"small" | "medium" | "large">;
     mergedDisabled: import("vue").ComputedRef<boolean>;
     focused: import("vue").Ref<boolean>;
+    activeWithoutMenuOpen: import("vue").Ref<boolean>;
+    onTriggerInputFocus: () => void;
+    onTriggerInputBlur: () => void;
     handleMenuFocus: (e: FocusEvent) => void;
     handleMenuBlur: (e: FocusEvent) => void;
     handleMenuTabOut: () => void;
     handleTriggerClick: () => void;
-    handleToggle: (tmNode: TreeNode<SelectBaseOption>) => void;
-    handleDeleteOption: (option: SelectBaseOption) => void;
+    handleToggle: (tmNode: TreeNode<SelectOption>) => void;
+    handleDeleteOption: (option: SelectOption) => void;
     handlePatternInput: (e: InputEvent) => void;
     handleClear: (e: MouseEvent) => void;
     handleTriggerBlur: (e: FocusEvent) => void;
     handleTriggerFocus: (e: FocusEvent) => void;
-    handleKeyDown: (e: KeyboardEvent) => void;
-    handleKeyUp: (e: KeyboardEvent) => void;
+    handleKeydown: (e: KeyboardEvent) => void;
     syncPosition: () => void;
     handleMenuAfterLeave: () => void;
     handleMenuClickOutside: (e: MouseEvent) => void;
     handleMenuScroll: (e: Event) => void;
-    handleMenuKeyup: (e: KeyboardEvent) => void;
     handleMenuKeydown: (e: KeyboardEvent) => void;
     handleMenuMousedown: (e: MouseEvent) => void;
     mergedTheme: import("vue").ComputedRef<{
@@ -1314,7 +1317,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly remote: BooleanConstructor;
     readonly loading: BooleanConstructor;
     readonly filter: {
-        readonly type: PropType<(pattern: string, option: SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)>) => boolean>;
+        readonly type: PropType<(pattern: string, option: SelectOption) => boolean>;
         readonly default: typeof defaultFilter;
     };
     readonly placement: {
@@ -1327,14 +1330,14 @@ declare const _default: import("vue").DefineComponent<{
     };
     readonly tag: BooleanConstructor;
     readonly onCreate: {
-        readonly type: PropType<(label: string) => SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)>>;
+        readonly type: PropType<(label: string) => SelectOption>;
         readonly default: (label: string) => {
             label: string;
             value: string;
         };
     };
     readonly fallbackOption: {
-        readonly type: PropType<false | ((value: string | number) => SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)>)>;
+        readonly type: PropType<false | SelectFallbackOption>;
         readonly default: () => (value: string | number) => {
             label: string;
             value: string | number;
@@ -1758,26 +1761,26 @@ declare const _default: import("vue").DefineComponent<{
     }>>>;
 }>>, {
     tag: boolean;
-    filter: (pattern: string, option: SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)>) => boolean;
+    filter: (pattern: string, option: SelectOption) => boolean;
     show: boolean | undefined;
     multiple: boolean;
     disabled: boolean | undefined;
     to: string | boolean | HTMLElement;
+    options: SelectMixedOption[];
+    bordered: boolean | undefined;
     loading: boolean;
     placement: FollowerPlacement;
-    bordered: boolean | undefined;
     virtualScroll: boolean;
     resetMenuOnOptionsChange: boolean;
     showArrow: boolean;
     displayDirective: "show" | "if";
     filterable: boolean;
     clearable: boolean;
-    options: SelectMixedOption[];
     defaultValue: Value | null;
     remote: boolean;
     widthMode: string;
-    onCreate: (label: string) => SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)>;
-    fallbackOption: false | ((value: string | number) => SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)>);
+    onCreate: (label: string) => SelectOption;
+    fallbackOption: false | SelectFallbackOption;
     consistentMenuWidth: boolean;
 }>;
 export default _default;

package/lib/select/src/Select.js

@@ -86,7 +86,7 @@ exports.default = (0, vue_1.defineComponent)({
             });
         }
         const { mergedClsPrefixRef, mergedBorderedRef, namespaceRef } = (0, _mixins_1.useConfig)(props);
-        const themeRef = (0, _mixins_1.useTheme)('Select', 'Select', index_cssr_1.default, styles_1.selectLight, props, mergedClsPrefixRef);
+        const themeRef = (0, _mixins_1.useTheme)('Select', '-select', index_cssr_1.default, styles_1.selectLight, props, mergedClsPrefixRef);
         const uncontrolledValueRef = (0, vue_1.ref)(props.defaultValue);
         const controlledValueRef = (0, vue_1.toRef)(props, 'value');
         const mergedValueRef = (0, vooks_1.useMergedState)(controlledValueRef, uncontrolledValueRef);
@@ -180,7 +180,7 @@ exports.default = (0, vue_1.defineComponent)({
             return null;
         });
         const formItem = (0, _mixins_1.useFormItem)(props);
-        const { mergedSizeRef, mergedDisabledRef } = formItem;
+        const { mergedSizeRef, mergedDisabledRef, mergedStatusRef } = formItem;
         function doUpdateValue(value, option) {
             const { onChange, 'onUpdate:value': _onUpdateValue, onUpdateValue } = props;
             const { nTriggerFormChange, nTriggerFormInput } = formItem;
@@ -254,7 +254,6 @@ exports.default = (0, vue_1.defineComponent)({
         }
         function openMenu() {
             if (!mergedDisabledRef.value) {
-                patternRef.value = '';
                 doUpdateShow(true);
                 uncontrolledShowRef.value = true;
                 if (props.filterable) {
@@ -267,6 +266,21 @@ exports.default = (0, vue_1.defineComponent)({
         }
         function handleMenuAfterLeave() {
             patternRef.value = '';
+            beingCreatedOptionsRef.value = [];
+        }
+        const activeWithoutMenuOpenRef = (0, vue_1.ref)(false);
+        function onTriggerInputFocus() {
+            if (props.filterable) {
+                activeWithoutMenuOpenRef.value = true;
+            }
+        }
+        function onTriggerInputBlur() {
+            if (props.filterable) {
+                activeWithoutMenuOpenRef.value = false;
+                if (!mergedShowRef.value) {
+                    handleMenuAfterLeave();
+                }
+            }
         }
         function handleTriggerClick() {
             if (mergedDisabledRef.value)
@@ -445,43 +459,69 @@ exports.default = (0, vue_1.defineComponent)({
             doScroll(e);
         }
         // keyboard events
-        // also for menu keyup
-        function handleKeyUp(e) {
-            var _a, _b, _c, _d;
+        // also for menu keydown
+        function handleKeydown(e) {
+            var _a, _b, _c, _d, _e;
             switch (e.code) {
                 case 'Space':
                     if (props.filterable)
                         break;
+                    else {
+                        e.preventDefault();
+                    }
                 // eslint-disable-next-line no-fallthrough
                 case 'Enter':
                 case 'NumpadEnter':
-                    if (mergedShowRef.value) {
-                        const pendingTmNode = (_a = menuRef.value) === null || _a === void 0 ? void 0 : _a.getPendingTmNode();
-                        if (pendingTmNode) {
-                            handleToggleByTmNode(pendingTmNode);
+                    if (!((_a = triggerRef.value) === null || _a === void 0 ? void 0 : _a.isCompositing)) {
+                        if (mergedShowRef.value) {
+                            const pendingTmNode = (_b = menuRef.value) === null || _b === void 0 ? void 0 : _b.getPendingTmNode();
+                            if (pendingTmNode) {
+                                handleToggleByTmNode(pendingTmNode);
+                            }
+                            else if (!props.filterable) {
+                                closeMenu();
+                                focusSelection();
+                            }
                         }
-                        else if (!props.filterable) {
-                            closeMenu();
-                            focusSelection();
+                        else {
+                            openMenu();
+                            if (props.tag && activeWithoutMenuOpenRef.value) {
+                                const beingCreatedOption = beingCreatedOptionsRef.value[0];
+                                if (beingCreatedOption) {
+                                    const optionValue = beingCreatedOption.value;
+                                    const { value: mergedValue } = mergedValueRef;
+                                    if (props.multiple) {
+                                        if (Array.isArray(mergedValue) &&
+                                            mergedValue.some((value) => value === optionValue)) {
+                                            // do nothing
+                                        }
+                                        else {
+                                            handleToggleByOption(beingCreatedOption);
+                                        }
+                                    }
+                                    else {
+                                        handleToggleByOption(beingCreatedOption);
+                                    }
+                                }
+                            }
                         }
                     }
-                    else {
-                        openMenu();
-                    }
                     e.preventDefault();
                     break;
                 case 'ArrowUp':
+                    e.preventDefault();
                     if (props.loading)
                         return;
                     if (mergedShowRef.value) {
-                        (_b = menuRef.value) === null || _b === void 0 ? void 0 : _b.prev();
+                        (_c = menuRef.value) === null || _c === void 0 ? void 0 : _c.prev();
                     }
                     break;
                 case 'ArrowDown':
+                    e.preventDefault();
                     if (props.loading)
                         return;
                     if (mergedShowRef.value) {
-                        (_c = menuRef.value) === null || _c === void 0 ? void 0 : _c.next();
+                        (_d = menuRef.value) === null || _d === void 0 ? void 0 : _d.next();
                     }
                     else {
                         openMenu();
@@ -489,21 +529,7 @@ exports.default = (0, vue_1.defineComponent)({
                     break;
                 case 'Escape':
                     closeMenu();
-                    (_d = triggerRef.value) === null || _d === void 0 ? void 0 : _d.focus();
-                    break;
-            }
-        }
-        // also for menu
-        function handleKeyDown(e) {
-            switch (e.code) {
-                case 'Space':
-                    if (!props.filterable) {
-                        e.preventDefault();
-                    }
-                    break;
-                case 'ArrowUp':
-                case 'ArrowDown':
-                    e.preventDefault();
+                    (_e = triggerRef.value) === null || _e === void 0 ? void 0 : _e.focus();
                     break;
             }
         }
@@ -541,20 +567,21 @@ exports.default = (0, vue_1.defineComponent)({
                 (_a = triggerRef.value) === null || _a === void 0 ? void 0 : _a.blur();
             }
         };
-        return Object.assign(Object.assign({}, exposedMethods), { mergedClsPrefix: mergedClsPrefixRef, mergedBordered: mergedBorderedRef, namespace: namespaceRef, treeMate: treeMateRef, isMounted: (0, vooks_1.useIsMounted)(), triggerRef,
-            menuRef, pattern: patternRef, uncontrolledShow: uncontrolledShowRef, mergedShow: mergedShowRef, adjustedTo: (0, _utils_1.useAdjustedTo)(props), uncontrolledValue: uncontrolledValueRef, mergedValue: mergedValueRef, followerRef, localizedPlaceholder: localizedPlaceholderRef, selectedOption: selectedOptionRef, selectedOptions: selectedOptionsRef, mergedSize: mergedSizeRef, mergedDisabled: mergedDisabledRef, focused: focusedRef, handleMenuFocus,
+        return Object.assign(Object.assign({}, exposedMethods), { mergedStatus: mergedStatusRef, mergedClsPrefix: mergedClsPrefixRef, mergedBordered: mergedBorderedRef, namespace: namespaceRef, treeMate: treeMateRef, isMounted: (0, vooks_1.useIsMounted)(), triggerRef,
+            menuRef, pattern: patternRef, uncontrolledShow: uncontrolledShowRef, mergedShow: mergedShowRef, adjustedTo: (0, _utils_1.useAdjustedTo)(props), uncontrolledValue: uncontrolledValueRef, mergedValue: mergedValueRef, followerRef, localizedPlaceholder: localizedPlaceholderRef, selectedOption: selectedOptionRef, selectedOptions: selectedOptionsRef, mergedSize: mergedSizeRef, mergedDisabled: mergedDisabledRef, focused: focusedRef, activeWithoutMenuOpen: activeWithoutMenuOpenRef, onTriggerInputFocus,
+            onTriggerInputBlur,
+            handleMenuFocus,
             handleMenuBlur,
             handleMenuTabOut,
             handleTriggerClick, handleToggle: handleToggleByTmNode, handleDeleteOption: handleToggleByOption, handlePatternInput,
             handleClear,
             handleTriggerBlur,
             handleTriggerFocus,
-            handleKeyDown,
-            handleKeyUp,
+            handleKeydown,
             syncPosition,
             handleMenuAfterLeave,
             handleMenuClickOutside,
-            handleMenuScroll, handleMenuKeyup: handleKeyUp, handleMenuKeydown: handleKeyDown, handleMenuMousedown, mergedTheme: themeRef, cssVars: (0, vue_1.computed)(() => {
+            handleMenuScroll, handleMenuKeydown: handleKeydown, handleMenuMousedown, mergedTheme: themeRef, cssVars: (0, vue_1.computed)(() => {
                 const { self: { menuBoxShadow } } = themeRef.value;
                 return {
                     '--n-menu-box-shadow': menuBoxShadow
@@ -566,8 +593,8 @@ exports.default = (0, vue_1.defineComponent)({
             (0, vue_1.h)(vueuc_1.VBinder, null, {
                 default: () => [
                     (0, vue_1.h)(vueuc_1.VTarget, null, {
-                        default: () => ((0, vue_1.h)(_internal_1.NInternalSelection, { ref: "triggerRef", inputProps: this.inputProps, clsPrefix: this.mergedClsPrefix, showArrow: this.showArrow, maxTagCount: this.maxTagCount, bordered: this.mergedBordered, active: this.mergedShow, pattern: this.pattern, placeholder: this.localizedPlaceholder, selectedOption: this.selectedOption, selectedOptions: this.selectedOptions, multiple: this.multiple, renderTag: this.renderTag, renderLabel: this.renderLabel, filterable: this.filterable, clearable: this.clearable, disabled: this.mergedDisabled, size: this.mergedSize, theme: this.mergedTheme.peers.InternalSelection, themeOverrides: this.mergedTheme.peerOverrides.InternalSelection, loading: this.loading, focused: this.focused, onClick: this.handleTriggerClick, onDeleteOption: this.handleDeleteOption, onPatternInput: this.handlePatternInput, onClear: this.handleClear, onBlur: this.handleTriggerBlur, onFocus: this.handleTriggerFocus, onKeydown: this.handleKeyDown, onKeyup: this.handleKeyUp }, {
-                            arrow: () => { var _a, _b; return (_b = (_a = this.$slots).arrow) === null || _b === void 0 ? void 0 : _b.call(_a); }
+                        default: () => ((0, vue_1.h)(_internal_1.NInternalSelection, { ref: "triggerRef", status: this.mergedStatus, inputProps: this.inputProps, clsPrefix: this.mergedClsPrefix, showArrow: this.showArrow, maxTagCount: this.maxTagCount, bordered: this.mergedBordered, active: this.activeWithoutMenuOpen || this.mergedShow, pattern: this.pattern, placeholder: this.localizedPlaceholder, selectedOption: this.selectedOption, selectedOptions: this.selectedOptions, multiple: this.multiple, renderTag: this.renderTag, renderLabel: this.renderLabel, filterable: this.filterable, clearable: this.clearable, disabled: this.mergedDisabled, size: this.mergedSize, theme: this.mergedTheme.peers.InternalSelection, themeOverrides: this.mergedTheme.peerOverrides.InternalSelection, loading: this.loading, focused: this.focused, onClick: this.handleTriggerClick, onDeleteOption: this.handleDeleteOption, onPatternInput: this.handlePatternInput, onClear: this.handleClear, onBlur: this.handleTriggerBlur, onFocus: this.handleTriggerFocus, onKeydown: this.handleKeydown, onPatternBlur: this.onTriggerInputBlur, onPatternFocus: this.onTriggerInputFocus }, {
+                            arrow: () => { var _a, _b; return [(_b = (_a = this.$slots).arrow) === null || _b === void 0 ? void 0 : _b.call(_a)]; }
                         }))
                     }),
                     (0, vue_1.h)(vueuc_1.VFollower, { ref: "followerRef", show: this.mergedShow, to: this.adjustedTo, teleportDisabled: this.adjustedTo === _utils_1.useAdjustedTo.tdkey, containerClass: this.namespace, width: this.consistentMenuWidth ? 'target' : undefined, minWidth: "target", placement: this.placement }, {
@@ -580,7 +607,10 @@ exports.default = (0, vue_1.defineComponent)({
                                             `${this.mergedClsPrefix}-select-menu`,
                                             (_a = this.menuProps) === null || _a === void 0 ? void 0 : _a.class
                                         ], clsPrefix: this.mergedClsPrefix, focusable: true, autoPending: true, theme: this.mergedTheme.peers.InternalSelectMenu, themeOverrides: this.mergedTheme.peerOverrides
-                                            .InternalSelectMenu, treeMate: this.treeMate, multiple: this.multiple, size: 'medium', renderOption: this.renderOption, renderLabel: this.renderLabel, value: this.mergedValue, style: [(_b = this.menuProps) === null || _b === void 0 ? void 0 : _b.style, this.cssVars], onToggle: this.handleToggle, onScroll: this.handleMenuScroll, onFocus: this.handleMenuFocus, onBlur: this.handleMenuBlur, onKeyup: this.handleMenuKeyup, onKeydown: this.handleMenuKeydown, onTabOut: this.handleMenuTabOut, onMousedown: this.handleMenuMousedown, show: this.mergedShow, resetMenuOnOptionsChange: this.resetMenuOnOptionsChange }), this.$slots), this.displayDirective === 'show'
+                                            .InternalSelectMenu, treeMate: this.treeMate, multiple: this.multiple, size: 'medium', renderOption: this.renderOption, renderLabel: this.renderLabel, value: this.mergedValue, style: [(_b = this.menuProps) === null || _b === void 0 ? void 0 : _b.style, this.cssVars], onToggle: this.handleToggle, onScroll: this.handleMenuScroll, onFocus: this.handleMenuFocus, onBlur: this.handleMenuBlur, onKeydown: this.handleMenuKeydown, onTabOut: this.handleMenuTabOut, onMousedown: this.handleMenuMousedown, show: this.mergedShow, resetMenuOnOptionsChange: this.resetMenuOnOptionsChange }), {
+                                        empty: () => { var _a, _b; return [(_b = (_a = this.$slots).empty) === null || _b === void 0 ? void 0 : _b.call(_a)]; },
+                                        action: () => { var _a, _b; return [(_b = (_a = this.$slots).action) === null || _b === void 0 ? void 0 : _b.call(_a)]; }
+                                    }), this.displayDirective === 'show'
                                         ? [
                                             [vue_1.vShow, this.mergedShow],
                                             [vdirs_1.clickoutside, this.handleMenuClickOutside]