naive-ui 2.24.4 → 2.25.0

package/es/popselect/src/Popselect.js

@@ -15,7 +15,7 @@ export default defineComponent({
     props: popselectProps,
     __popover__: true,
     setup(props) {
-        const themeRef = useTheme('Popselect', 'Popselect', undefined, popselectLight, props);
+        const themeRef = useTheme('Popselect', '-popselect', undefined, popselectLight, props);
         const popoverInstRef = ref(null);
         function syncPosition() {
             var _a;
@@ -36,7 +36,7 @@ export default defineComponent({
         };
     },
     render() {
-        const { mergedTheme, $attrs, $slots } = this;
+        const { mergedTheme } = this;
         const popoverProps = {
             theme: mergedTheme.peers.Popover,
             themeOverrides: mergedTheme.peerOverrides.Popover,
@@ -45,15 +45,17 @@ export default defineComponent({
             },
             ref: 'popoverInstRef',
             internalRenderBody: (className, ref, style, onMouseenter, onMouseleave) => {
-                return (h(NPopselectPanel, Object.assign({}, mergeProps($attrs, {
+                return (h(NPopselectPanel, Object.assign({}, mergeProps(this.$attrs, {
                     class: className,
                     style
-                }), keep(this.$props, panelPropKeys), { ref: createRefSetter(ref), onMouseenter: onMouseenter, onMouseleave: onMouseleave }), $slots));
+                }), keep(this.$props, panelPropKeys), { ref: 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 (h(NPopover, Object.assign({}, omit(this.$props, panelPropKeys), popoverProps), {
-            trigger: this.$slots.default,
-            _: 1
+            trigger: () => { var _a, _b; return (_b = (_a = this.$slots).default) === null || _b === void 0 ? void 0 : _b.call(_a); }
         }));
     }
 });

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

@@ -11,7 +11,6 @@ export declare const panelProps: {
         readonly default: null;
     };
     readonly cancelable: BooleanConstructor;
-    readonly width: PropType<string | number>;
     readonly options: {
         readonly type: PropType<SelectMixedOption[]>;
         readonly default: () => never[];
@@ -28,7 +27,7 @@ export declare const panelProps: {
     readonly renderLabel: PropType<RenderLabel>;
     readonly onChange: PropType<MaybeArray<OnUpdateValue> | undefined>;
 };
-export declare const panelPropKeys: ("value" | "size" | "width" | "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: {
@@ -36,7 +35,6 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: null;
     };
     readonly cancelable: BooleanConstructor;
-    readonly width: PropType<string | number>;
     readonly options: {
         readonly type: PropType<SelectMixedOption[]>;
         readonly default: () => never[];
@@ -266,7 +264,6 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: null;
     };
     readonly cancelable: BooleanConstructor;
-    readonly width: PropType<string | number>;
     readonly options: {
         readonly type: PropType<SelectMixedOption[]>;
         readonly default: () => never[];
@@ -286,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/es/popselect/src/PopselectPanel.js

@@ -14,7 +14,6 @@ export const panelProps = {
         default: null
     },
     cancelable: Boolean,
-    width: [Number, String],
     options: {
         type: Array,
         default: () => []
@@ -128,6 +127,9 @@ export default defineComponent({
         };
     },
     render() {
-        return (h(NInternalSelectMenu, { clsPrefix: this.mergedClsPrefix, focusable: true, theme: this.mergedTheme.peers.InternalSelectMenu, themeOverrides: this.mergedTheme.peerOverrides.InternalSelectMenu, multiple: this.multiple, treeMate: this.treeMate, size: this.size, value: this.value, width: this.width, virtualScroll: false, scrollable: this.scrollable, renderLabel: this.renderLabel, onToggle: this.handleToggle, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseenter, onMousedown: this.handleMenuMousedown }, this.$slots));
+        return (h(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/es/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/es/progress/src/Progress.js

@@ -42,7 +42,7 @@ export default defineComponent({
             return props.indicatorPlacement || props.indicatorPosition;
         });
         const { mergedClsPrefixRef } = useConfig(props);
-        const themeRef = useTheme('Progress', 'Progress', style, progressLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme('Progress', '-progress', style, progressLight, props, mergedClsPrefixRef);
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             mergedIndicatorPlacement: mergedIndicatorPlacementRef,

package/es/radio/src/Radio.js

@@ -9,7 +9,7 @@ export default defineComponent({
     props: Object.assign(Object.assign({}, useTheme.props), useRadio.props),
     setup(props) {
         const radio = useRadio(props);
-        const themeRef = useTheme('Radio', 'Radio', style, radioLight, props, radio.mergedClsPrefix);
+        const themeRef = useTheme('Radio', '-radio', style, radioLight, props, radio.mergedClsPrefix);
         return Object.assign(radio, {
             cssVars: computed(() => {
                 const { mergedSize: { value: size } } = radio;

package/es/radio/src/RadioGroup.js

@@ -76,7 +76,7 @@ export default defineComponent({
         const selfElRef = ref(null);
         const { mergedSizeRef, mergedDisabledRef, nTriggerFormChange, nTriggerFormInput, nTriggerFormBlur, nTriggerFormFocus } = useFormItem(props);
         const { mergedClsPrefixRef } = useConfig(props);
-        const themeRef = useTheme('Radio', 'RadioGroup', style, radioLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme('Radio', '-radio-group', style, radioLight, props, mergedClsPrefixRef);
         const uncontrolledValueRef = ref(props.defaultValue);
         const controlledValueRef = toRef(props, 'value');
         const mergedValueRef = useMergedState(controlledValueRef, uncontrolledValueRef);

package/es/rate/src/Rate.js

@@ -21,7 +21,7 @@ export default defineComponent({
     props: rateProps,
     setup(props) {
         const { mergedClsPrefixRef } = useConfig(props);
-        const themeRef = useTheme('Rate', 'Rate', style, rateLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme('Rate', '-rate', style, rateLight, props, mergedClsPrefixRef);
         const controlledValueRef = toRef(props, 'value');
         const uncontrolledValueRef = ref(props.defaultValue);
         const hoverIndexRef = ref(null);

package/es/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/es/result/src/Result.js

@@ -31,7 +31,7 @@ export default defineComponent({
     props: resultProps,
     setup(props) {
         const { mergedClsPrefixRef } = useConfig(props);
-        const themeRef = useTheme('Result', 'Result', style, resultLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme('Result', '-result', style, resultLight, props, mergedClsPrefixRef);
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             cssVars: computed(() => {

package/es/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/es/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/es/select/src/Select.js

@@ -81,7 +81,7 @@ export default defineComponent({
             });
         }
         const { mergedClsPrefixRef, mergedBorderedRef, namespaceRef } = useConfig(props);
-        const themeRef = useTheme('Select', 'Select', style, selectLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme('Select', '-select', style, selectLight, props, mergedClsPrefixRef);
         const uncontrolledValueRef = ref(props.defaultValue);
         const controlledValueRef = toRef(props, 'value');
         const mergedValueRef = useMergedState(controlledValueRef, uncontrolledValueRef);
@@ -175,7 +175,7 @@ export default defineComponent({
             return null;
         });
         const formItem = 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;
@@ -249,7 +249,6 @@ export default defineComponent({
         }
         function openMenu() {
             if (!mergedDisabledRef.value) {
-                patternRef.value = '';
                 doUpdateShow(true);
                 uncontrolledShowRef.value = true;
                 if (props.filterable) {
@@ -262,6 +261,21 @@ export default defineComponent({
         }
         function handleMenuAfterLeave() {
             patternRef.value = '';
+            beingCreatedOptionsRef.value = [];
+        }
+        const activeWithoutMenuOpenRef = 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)
@@ -440,43 +454,69 @@ export default 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();
@@ -484,21 +524,7 @@ export default 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;
             }
         }
@@ -536,20 +562,21 @@ export default 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: useIsMounted(), triggerRef,
-            menuRef, pattern: patternRef, uncontrolledShow: uncontrolledShowRef, mergedShow: mergedShowRef, adjustedTo: 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: useIsMounted(), triggerRef,
+            menuRef, pattern: patternRef, uncontrolledShow: uncontrolledShowRef, mergedShow: mergedShowRef, adjustedTo: 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: computed(() => {
+            handleMenuScroll, handleMenuKeydown: handleKeydown, handleMenuMousedown, mergedTheme: themeRef, cssVars: computed(() => {
                 const { self: { menuBoxShadow } } = themeRef.value;
                 return {
                     '--n-menu-box-shadow': menuBoxShadow
@@ -561,8 +588,8 @@ export default defineComponent({
             h(VBinder, null, {
                 default: () => [
                     h(VTarget, null, {
-                        default: () => (h(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: () => (h(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)]; }
                         }))
                     }),
                     h(VFollower, { ref: "followerRef", show: this.mergedShow, to: this.adjustedTo, teleportDisabled: this.adjustedTo === useAdjustedTo.tdkey, containerClass: this.namespace, width: this.consistentMenuWidth ? 'target' : undefined, minWidth: "target", placement: this.placement }, {
@@ -575,7 +602,10 @@ export default 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'
                                         ? [
                                             [vShow, this.mergedShow],
                                             [clickoutside, this.handleMenuClickOutside]

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

@@ -46,3 +46,5 @@ export interface SelectInst {
     focus: () => void;
     blur: () => void;
 }
+export declare type SelectFallbackOption = (value: string & number) => SelectOption;
+export declare type SelectFallbackOptionImpl = (value: string | number) => SelectOption;

package/es/skeleton/src/Skeleton.js

@@ -21,7 +21,7 @@ export default defineComponent({
     setup(props) {
         useHoudini();
         const { mergedClsPrefixRef } = useConfig(props);
-        const themeRef = useTheme('Skeleton', 'Skeleton', style, skeletonLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme('Skeleton', '-skeleton', style, skeletonLight, props, mergedClsPrefixRef);
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             style: computed(() => {

package/es/slider/src/Slider.js

@@ -36,7 +36,7 @@ export default defineComponent({
     props: sliderProps,
     setup(props) {
         const { mergedClsPrefixRef, namespaceRef } = useConfig(props);
-        const themeRef = useTheme('Slider', 'Slider', style, sliderLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme('Slider', '-slider', style, sliderLight, props, mergedClsPrefixRef);
         // dom ref
         const handleRailRef = ref(null);
         const [handleRefs, setHandleRefs] = useRefs();

package/es/space/src/Space.js

@@ -18,7 +18,7 @@ export default defineComponent({
     props: spaceProps,
     setup(props) {
         const { mergedClsPrefixRef } = useConfig(props);
-        const themeRef = useTheme('Space', 'Space', undefined, spaceLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme('Space', '-space', undefined, spaceLight, props, mergedClsPrefixRef);
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             margin: computed(() => {