naive-ui 2.24.7 → 2.25.0

package/es/_internal/clear/src/Clear.js

@@ -15,7 +15,7 @@ export default defineComponent({
         onClear: Function
     },
     setup(props) {
-        useStyle('BaseClear', style, toRef(props, 'clsPrefix'));
+        useStyle('-base-clear', style, toRef(props, 'clsPrefix'));
         const { NConfigProvider } = useConfig();
         return {
             NConfigProvider,
@@ -29,9 +29,10 @@ export default defineComponent({
         return (h("div", { class: `${clsPrefix}-base-clear` },
             h(NIconSwitchTransition, null, {
                 default: () => {
+                    var _a, _b;
                     return this.show ? (h(NBaseIcon, { clsPrefix: clsPrefix, key: "dismiss", class: `${clsPrefix}-base-clear__clear`, onClick: this.onClear, onMousedown: this.handleMouseDown, "data-clear": true }, {
                         default: () => h(ClearIcon, null)
-                    })) : (h("div", { key: "icon", class: `${clsPrefix}-base-clear__placeholder` }, this.$slots));
+                    })) : (h("div", { key: "icon", class: `${clsPrefix}-base-clear__placeholder` }, (_b = (_a = this.$slots).default) === null || _b === void 0 ? void 0 : _b.call(_a)));
                 }
             })));
     }

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

@@ -17,7 +17,7 @@ export default defineComponent({
         onClick: Function
     },
     setup(props) {
-        useStyle('BaseClose', style, toRef(props, 'clsPrefix'));
+        useStyle('-base-close', style, toRef(props, 'clsPrefix'));
         return () => {
             const { clsPrefix, disabled } = props;
             return (h(NBaseIcon, { role: "button", ariaDisabled: disabled, ariaLabel: "close", clsPrefix: clsPrefix, class: [

package/es/_internal/icon/src/Icon.js

@@ -23,7 +23,7 @@ export default defineComponent({
         onMouseup: Function
     },
     setup(props) {
-        useStyle('BaseIcon', style, toRef(props, 'clsPrefix'));
+        useStyle('-base-icon', style, toRef(props, 'clsPrefix'));
     },
     render() {
         return (h("i", { class: `${this.clsPrefix}-base-icon`, onClick: this.onClick, onMousedown: this.onMousedown, onMouseup: this.onMouseup, role: this.role, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, "aria-disabled": this.ariaDisabled }, this.$slots));

package/es/_internal/icons/ArrowUp.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _default;

package/es/_internal/icons/ArrowUp.js

@@ -0,0 +1,9 @@
+import { h, defineComponent } from 'vue';
+export default defineComponent({
+    name: 'ArrowUp',
+    render() {
+        return (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20" },
+            h("g", { fill: "none" },
+                h("path", { d: "M3.13 9.163a.5.5 0 1 0 .74.674L9.5 3.67V17.5a.5.5 0 0 0 1 0V3.672l5.63 6.165a.5.5 0 0 0 .738-.674l-6.315-6.916a.746.746 0 0 0-.632-.24a.746.746 0 0 0-.476.24L3.131 9.163z", fill: "currentColor" }))));
+    }
+});

package/es/_internal/icons/index.d.ts

@@ -1,5 +1,6 @@
 export { default as AddIcon } from './Add';
 export { default as ArrowDownIcon } from './ArrowDown';
+export { default as ArrowUpIcon } from './ArrowUp';
 export { default as AttachIcon } from './Attach';
 export { default as BackwardIcon } from './Backward';
 export { default as DateIcon } from './Date';

package/es/_internal/icons/index.js

@@ -1,5 +1,6 @@
 export { default as AddIcon } from './Add';
 export { default as ArrowDownIcon } from './ArrowDown';
+export { default as ArrowUpIcon } from './ArrowUp';
 export { default as AttachIcon } from './Attach';
 export { default as BackwardIcon } from './Backward';
 export { default as DateIcon } from './Date';

package/es/_internal/loading/src/Loading.js

@@ -33,7 +33,7 @@ export default defineComponent({
         }
     },
     setup(props) {
-        useStyle('BaseLoading', style, toRef(props, 'clsPrefix'));
+        useStyle('-base-loading', style, toRef(props, 'clsPrefix'));
     },
     render() {
         const { clsPrefix, radius, strokeWidth, stroke, scale } = this;

package/es/_internal/menu-mask/src/MenuMask.js

@@ -10,7 +10,7 @@ export default defineComponent({
         }
     },
     setup(props) {
-        useStyle('BaseMenuMask', style, toRef(props, 'clsPrefix'));
+        useStyle('-base-menu-mask', style, toRef(props, 'clsPrefix'));
         const messageRef = ref(null);
         let timerId = null;
         const uncontrolledShowRef = ref(false);

package/es/_internal/scrollbar/src/ScrollBar.js

@@ -454,7 +454,7 @@ const Scrollbar = defineComponent({
             off('mousemove', window, handleYScrollMouseMove, true);
             off('mouseup', window, handleYScrollMouseUp, true);
         });
-        const themeRef = useTheme('Scrollbar', 'Scrollbar', style, scrollbarLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme('Scrollbar', '-scrollbar', style, scrollbarLight, props, mergedClsPrefixRef);
         const exposedMethods = {
             scrollTo,
             sync,

package/es/_internal/select-menu/src/SelectMenu.d.ts

@@ -1,6 +1,6 @@
 import { PropType } from 'vue';
 import { TreeNode } from 'treemate';
-import type { SelectBaseOption, SelectGroupOption, SelectIgnoredOption, Value, SelectTreeMate } from '../../../select/src/interface';
+import type { SelectOption, SelectGroupOption, SelectIgnoredOption, Value, SelectTreeMate } from '../../../select/src/interface';
 import type { RenderLabel, Size, RenderOption } from './interface';
 declare const _default: import("vue").DefineComponent<{
     clsPrefix: {
@@ -51,7 +51,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    onToggle: PropType<(tmNode: TreeNode<SelectBaseOption>) => void>;
+    onToggle: PropType<(tmNode: TreeNode<SelectOption>) => void>;
     theme: PropType<import("../../../_mixins").Theme<"InternalSelectMenu", {
         optionFontSizeSmall: string;
         optionFontSizeMedium: string;
@@ -210,7 +210,7 @@ declare const _default: import("vue").DefineComponent<{
     }>>>;
 }, {
     selfRef: import("vue").Ref<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("../../../select/src/interface").SelectBaseOption<string | number, string | ((option: import("../../../select/src/interface").SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)>, import("../../../select/src/interface").SelectBaseOption<string | number, string | ((option: import("../../../select/src/interface").SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)>, import("../../../select/src/interface").SelectBaseOption<string | number, string | ((option: import("../../../select/src/interface").SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)>> | null;
     prev: () => void;
     next: () => void;
     mergedTheme: import("vue").ComputedRef<{
@@ -425,7 +425,7 @@ declare const _default: import("vue").DefineComponent<{
     })[]>;
     itemSize: import("vue").ComputedRef<number>;
     padding: import("vue").ComputedRef<import("seemly").Margin>;
-    flattenedNodes: import("vue").ComputedRef<TreeNode<SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)>, SelectGroupOption, SelectIgnoredOption>[]>;
+    flattenedNodes: import("vue").ComputedRef<TreeNode<import("../../../select/src/interface").SelectBaseOption<string | number, string | ((option: import("../../../select/src/interface").SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)>, SelectGroupOption, SelectIgnoredOption>[]>;
     empty: import("vue").ComputedRef<boolean>;
     virtualListContainer(): HTMLElement;
     virtualListContent(): HTMLElement;
@@ -486,7 +486,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    onToggle: PropType<(tmNode: TreeNode<SelectBaseOption>) => void>;
+    onToggle: PropType<(tmNode: TreeNode<SelectOption>) => void>;
     theme: PropType<import("../../../_mixins").Theme<"InternalSelectMenu", {
         optionFontSizeSmall: string;
         optionFontSizeMedium: string;

package/es/_internal/select-menu/src/SelectMenu.js

@@ -4,16 +4,16 @@ import { VirtualList } from 'vueuc';
 import { depx, getPadding, happensIn } from 'seemly';
 import { NEmpty } from '../../../empty';
 import { NScrollbar } from '../../scrollbar';
-import { formatLength } from '../../../_utils';
+import { formatLength, resolveSlot, resolveWrappedSlot } from '../../../_utils';
 import { createKey } from '../../../_utils/cssr';
 import { useTheme } from '../../../_mixins';
 import NInternalLoading from '../../loading';
 import NFocusDetector from '../../focus-detector';
+import { internalSelectMenuLight } from '../styles';
 import NSelectOption from './SelectOption';
 import NSelectGroupHeader from './SelectGroupHeader';
-import style from './styles/index.cssr';
-import { internalSelectMenuLight } from '../styles';
 import { internalSelectionMenuInjectionKey, internalSelectionMenuBodyInjectionKey } from './interface';
+import style from './styles/index.cssr';
 export default defineComponent({
     name: 'InternalSelectMenu',
     props: Object.assign(Object.assign({}, useTheme.props), { clsPrefix: {
@@ -46,7 +46,7 @@ export default defineComponent({
         // deprecated
         onToggle: Function }),
     setup(props) {
-        const themeRef = useTheme('InternalSelectMenu', 'InternalSelectMenu', style, internalSelectMenuLight, props, toRef(props, 'clsPrefix'));
+        const themeRef = useTheme('InternalSelectMenu', '-internal-select-menu', style, internalSelectMenuLight, props, toRef(props, 'clsPrefix'));
         const selfRef = ref(null);
         const virtualListRef = ref(null);
         const scrollbarRef = ref(null);
@@ -55,15 +55,27 @@ export default defineComponent({
         const pendingNodeRef = ref(null);
         function initPendingNode() {
             const { treeMate } = props;
-            setPendingTmNode(props.autoPending
-                ? props.value === null
-                    ? treeMate.getFirstAvailableNode()
-                    : props.multiple
-                        ? treeMate.getNode((props.value || [])[(props.value || [])
-                            .length - 1]) || treeMate.getFirstAvailableNode()
-                        : treeMate.getNode(props.value) ||
-                            treeMate.getFirstAvailableNode()
-                : null);
+            let defaultPendingNode = null;
+            if (props.autoPending) {
+                const { value } = props;
+                if (value === null) {
+                    defaultPendingNode = treeMate.getFirstAvailableNode();
+                }
+                else {
+                    if (props.multiple) {
+                        defaultPendingNode = treeMate.getNode((value || [])[(value || []).length - 1]);
+                    }
+                    else {
+                        defaultPendingNode = treeMate.getNode(value);
+                    }
+                    if (!defaultPendingNode || defaultPendingNode.disabled) {
+                        defaultPendingNode = treeMate.getFirstAvailableNode();
+                    }
+                }
+                if (defaultPendingNode) {
+                    setPendingTmNode(defaultPendingNode);
+                }
+            }
         }
         let initPendingNodeWatchStopHandle;
         watch(toRef(props, 'show'), (value) => {
@@ -290,8 +302,12 @@ export default defineComponent({
                             paddingBottom: this.padding.bottom
                         } }, this.flattenedNodes.map((tmNode) => tmNode.isGroup ? (h(NSelectGroupHeader, { key: tmNode.key, clsPrefix: clsPrefix, tmNode: tmNode })) : (h(NSelectOption, { clsPrefix: clsPrefix, key: tmNode.key, tmNode: tmNode })))));
                 }
-            })) : (h("div", { class: `${clsPrefix}-base-select-menu__empty` }, $slots.empty ? ($slots.empty()) : (h(NEmpty, { theme: mergedTheme.peers.Empty, themeOverrides: mergedTheme.peerOverrides.Empty })))),
-            $slots.action && (h("div", { class: `${clsPrefix}-base-select-menu__action`, "data-action": true }, $slots.action())),
-            $slots.action && h(NFocusDetector, { onFocus: this.onTabOut })));
+            })) : (h("div", { class: `${clsPrefix}-base-select-menu__empty` }, resolveSlot($slots.empty, () => [
+                h(NEmpty, { theme: mergedTheme.peers.Empty, themeOverrides: mergedTheme.peerOverrides.Empty })
+            ]))),
+            resolveWrappedSlot($slots.action, (children) => [
+                h("div", { class: `${clsPrefix}-base-select-menu__action`, "data-action": true, key: "action" }, children),
+                h(NFocusDetector, { onFocus: this.onTabOut, key: "focus-detector" })
+            ])));
     }
 });

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

@@ -1,8 +1,10 @@
 import { PropType, InputHTMLAttributes } from 'vue';
 import type { SelectBaseOption } from '../../../select/src/interface';
-import { RenderTag } from './interface';
+import type { FormValidationStatus } from '../../../form/src/interface';
+import type { RenderTag } from './interface';
 import type { RenderLabel, RenderLabelImpl } from '../../select-menu/src/interface';
 export interface InternalSelectionInst {
+    isCompositing: boolean;
     focus: () => void;
     focusInput: () => void;
     blur: () => void;
@@ -20,7 +22,7 @@ declare const _default: import("vue").DefineComponent<{
     active: BooleanConstructor;
     pattern: {
         type: StringConstructor;
-        default: null;
+        default: string;
     };
     placeholder: StringConstructor;
     selectedOption: {
@@ -57,7 +59,10 @@ declare const _default: import("vue").DefineComponent<{
     maxTagCount: PropType<number | "responsive">;
     onClear: PropType<(e: MouseEvent) => void>;
     onPatternInput: PropType<(e: InputEvent) => void>;
+    onPatternFocus: PropType<(e: FocusEvent) => void>;
+    onPatternBlur: PropType<(e: FocusEvent) => void>;
     renderLabel: PropType<RenderLabel>;
+    status: PropType<FormValidationStatus>;
     theme: PropType<import("../../../_mixins").Theme<"InternalSelection", {
         fontSizeTiny: string;
         fontSizeSmall: string;
@@ -479,7 +484,7 @@ declare const _default: import("vue").DefineComponent<{
     handlePatternKeyDown: (e: KeyboardEvent) => void;
     handlePatternInputInput: (e: InputEvent) => void;
     handlePatternInputBlur: (e: FocusEvent) => void;
-    handlePatternInputFocus: () => void;
+    handlePatternInputFocus: (e: FocusEvent) => void;
     handleMouseEnterCounter: () => void;
     handleMouseLeaveCounter: () => void;
     handleFocusout: (e: FocusEvent) => void;
@@ -553,7 +558,7 @@ declare const _default: import("vue").DefineComponent<{
     active: BooleanConstructor;
     pattern: {
         type: StringConstructor;
-        default: null;
+        default: string;
     };
     placeholder: StringConstructor;
     selectedOption: {
@@ -590,7 +595,10 @@ declare const _default: import("vue").DefineComponent<{
     maxTagCount: PropType<number | "responsive">;
     onClear: PropType<(e: MouseEvent) => void>;
     onPatternInput: PropType<(e: InputEvent) => void>;
+    onPatternFocus: PropType<(e: FocusEvent) => void>;
+    onPatternBlur: PropType<(e: FocusEvent) => void>;
     renderLabel: PropType<RenderLabel>;
+    status: PropType<FormValidationStatus>;
     theme: PropType<import("../../../_mixins").Theme<"InternalSelection", {
         fontSizeTiny: string;
         fontSizeSmall: string;
@@ -805,8 +813,8 @@ declare const _default: import("vue").DefineComponent<{
     active: boolean;
     disabled: boolean;
     autofocus: boolean;
-    loading: boolean;
     bordered: boolean | undefined;
+    loading: boolean;
     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;

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

@@ -18,7 +18,7 @@ export default defineComponent({
             default: undefined
         }, active: Boolean, pattern: {
             type: String,
-            default: null
+            default: ''
         }, placeholder: String, selectedOption: {
             type: Object,
             default: null
@@ -31,7 +31,7 @@ export default defineComponent({
         }, loading: Boolean, autofocus: Boolean, showArrow: {
             type: Boolean,
             default: true
-        }, inputProps: Object, focused: Boolean, renderTag: Function, onKeyup: Function, onKeydown: Function, onClick: Function, onBlur: Function, onFocus: Function, onDeleteOption: Function, maxTagCount: [String, Number], onClear: Function, onPatternInput: Function, renderLabel: Function }),
+        }, inputProps: Object, focused: Boolean, renderTag: Function, onKeyup: Function, onKeydown: Function, onClick: Function, onBlur: Function, onFocus: Function, onDeleteOption: Function, maxTagCount: [String, Number], onClear: Function, onPatternInput: Function, onPatternFocus: Function, onPatternBlur: Function, renderLabel: Function, status: String }),
     setup(props) {
         const patternInputMirrorRef = ref(null);
         const patternInputRef = ref(null);
@@ -46,7 +46,7 @@ export default defineComponent({
         const showTagsPopoverRef = ref(false);
         const patternInputFocusedRef = ref(false);
         const hoverRef = ref(false);
-        const themeRef = useTheme('InternalSelection', 'InternalSelection', style, internalSelectionLight, props, toRef(props, 'clsPrefix'));
+        const themeRef = useTheme('InternalSelection', '-internal-selection', style, internalSelectionLight, props, toRef(props, 'clsPrefix'));
         const mergedClearableRef = computed(() => {
             return (props.clearable && !props.disabled && (hoverRef.value || props.active));
         });
@@ -166,7 +166,7 @@ export default defineComponent({
             doDeleteOption(option);
         }
         function handlePatternKeyDown(e) {
-            if (e.code === 'Backspace') {
+            if (e.code === 'Backspace' && !isCompositingRef.value) {
                 if (!props.pattern.length) {
                     const { selectedOptions } = props;
                     if (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) {
@@ -202,11 +202,15 @@ export default defineComponent({
             doPatternInput(cachedInputEvent);
             cachedInputEvent = null;
         }
-        function handlePatternInputFocus() {
+        function handlePatternInputFocus(e) {
+            var _a;
             patternInputFocusedRef.value = true;
+            (_a = props.onPatternFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
         }
         function handlePatternInputBlur(e) {
+            var _a;
             patternInputFocusedRef.value = false;
+            (_a = props.onPatternBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
         }
         function blur() {
             var _a, _b;
@@ -404,7 +408,7 @@ export default defineComponent({
         };
     },
     render() {
-        const { multiple, size, disabled, filterable, maxTagCount, bordered, clsPrefix, renderTag, renderLabel } = this;
+        const { status, multiple, size, disabled, filterable, maxTagCount, bordered, clsPrefix, renderTag, renderLabel } = this;
         const maxTagCountResponsive = maxTagCount === 'responsive';
         const maxTagCountNumeric = typeof maxTagCount === 'number';
         const useMaxTagCount = maxTagCountResponsive || maxTagCountNumeric;
@@ -426,7 +430,7 @@ export default defineComponent({
                 : this.selectedOptions).map(createTag);
             const input = filterable ? (h("div", { class: `${clsPrefix}-base-selection-input-tag`, ref: "inputTagElRef", key: "__input-tag__" },
                 h("input", Object.assign({}, this.inputProps, { ref: "patternInputRef", tabindex: -1, disabled: disabled, value: this.pattern, autofocus: this.autofocus, class: `${clsPrefix}-base-selection-input-tag__input`, onBlur: this.handlePatternInputBlur, onFocus: this.handlePatternInputFocus, onKeydown: this.handlePatternKeyDown, onInput: this.handlePatternInputInput, onCompositionstart: this.handleCompositionStart, onCompositionend: this.handleCompositionEnd })),
-                h("span", { ref: "patternInputMirrorRef", class: `${clsPrefix}-base-selection-input-tag__mirror` }, this.pattern ? this.pattern : ''))) : null;
+                h("span", { ref: "patternInputMirrorRef", class: `${clsPrefix}-base-selection-input-tag__mirror` }, this.pattern))) : null;
             // May Overflow
             const renderCounter = maxTagCountResponsive
                 ? () => (h("div", { class: `${clsPrefix}-base-selection-tag-wrapper`, ref: "counterWrapperRef" },
@@ -475,7 +479,12 @@ export default defineComponent({
                     themeOverrides: this.mergedTheme.peerOverrides.Popover
                 }
                 : null;
-            const placeholder = !this.selected && !this.pattern && !this.isCompositing ? (h("div", { class: `${clsPrefix}-base-selection-placeholder ${clsPrefix}-base-selection-overlay` }, this.placeholder)) : null;
+            const showPlaceholder = this.selected
+                ? false
+                : this.active
+                    ? !this.pattern && !this.isCompositing
+                    : true;
+            const placeholder = showPlaceholder ? (h("div", { class: `${clsPrefix}-base-selection-placeholder ${clsPrefix}-base-selection-overlay` }, this.placeholder)) : null;
             if (filterable) {
                 const popoverTrigger = (h("div", { ref: "patternInputWrapperRef", class: `${clsPrefix}-base-selection-tags` },
                     tags,
@@ -502,13 +511,12 @@ export default defineComponent({
         }
         else {
             if (filterable) {
-                const showPlaceholder = !this.pattern &&
-                    (this.active || !this.selected) &&
-                    !this.isCompositing;
+                const hasInput = this.pattern || this.isCompositing;
+                const showPlaceholder = this.active ? !hasInput : !this.selected;
+                const showSelectedLabel = this.active ? false : this.selected;
                 body = (h("div", { ref: "patternInputWrapperRef", class: `${clsPrefix}-base-selection-label` },
-                    h("input", Object.assign({}, this.inputProps, { ref: "patternInputRef", class: `${clsPrefix}-base-selection-input`, value: this.patternInputFocused && this.active ? this.pattern : '', placeholder: "", readonly: disabled, disabled: disabled, tabindex: -1, autofocus: this.autofocus, onFocus: this.handlePatternInputFocus, onBlur: this.handlePatternInputBlur, onInput: this.handlePatternInputInput, onCompositionstart: this.handleCompositionStart, onCompositionend: this.handleCompositionEnd })),
-                    showPlaceholder ? null : this.patternInputFocused &&
-                        this.active ? null : (h("div", { class: `${clsPrefix}-base-selection-label__render-label ${clsPrefix}-base-selection-overlay`, key: "input" },
+                    h("input", Object.assign({}, this.inputProps, { ref: "patternInputRef", class: `${clsPrefix}-base-selection-input`, value: this.active ? this.pattern : '', placeholder: "", readonly: disabled, disabled: disabled, tabindex: -1, autofocus: this.autofocus, onFocus: this.handlePatternInputFocus, onBlur: this.handlePatternInputBlur, onInput: this.handlePatternInputInput, onCompositionstart: this.handleCompositionStart, onCompositionend: this.handleCompositionEnd })),
+                    showSelectedLabel ? (h("div", { class: `${clsPrefix}-base-selection-label__render-label ${clsPrefix}-base-selection-overlay`, key: "input" },
                         h("div", { class: `${clsPrefix}-base-selection-overlay__wrapper` }, renderTag
                             ? renderTag({
                                 option: this.selectedOption,
@@ -516,7 +524,7 @@ export default defineComponent({
                             })
                             : renderLabel
                                 ? renderLabel(this.selectedOption, true)
-                                : render(this.label, this.selectedOption, true)))),
+                                : render(this.label, this.selectedOption, true)))) : null,
                     showPlaceholder ? (h("div", { class: `${clsPrefix}-base-selection-placeholder ${clsPrefix}-base-selection-overlay`, key: "placeholder" },
                         h("div", { class: `${clsPrefix}-base-selection-overlay__wrapper` }, this.filterablePlaceholder))) : null,
                     suffix));
@@ -537,6 +545,7 @@ export default defineComponent({
         }
         return (h("div", { ref: "selfRef", class: [
                 `${clsPrefix}-base-selection`,
+                status && `${clsPrefix}-base-selection--${status}-status`,
                 {
                     [`${clsPrefix}-base-selection--active`]: this.active,
                     [`${clsPrefix}-base-selection--selected`]: this.selected || (this.active && this.pattern),

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

@@ -1,6 +1,6 @@
 import { VNodeChild } from 'vue';
-import type { SelectBaseOption } from '../../../select/src/interface';
+import type { SelectOption } from '../../../select/src/interface';
 export declare type RenderTag = (props: {
-    option: SelectBaseOption;
+    option: SelectOption;
     handleClose: () => void;
 }) => VNodeChild;

package/es/_internal/selection/src/styles/index.cssr.js

@@ -1,4 +1,4 @@
-import { c, cB, cE, cM, cNotM, insideFormItem } from '../../../../_utils/cssr'; // vars:
+import { c, cB, cE, cM, cNotM } from '../../../../_utils/cssr'; // vars:
 // --n-bezier
 // --n-border
 // --n-border-active
@@ -40,9 +40,7 @@ export default c([cB('base-selection', `
  font-size: var(--n-font-size);
  `, [cB('base-loading', `
  color: var(--n-loading-color);
- `), cB('base-selection-tags', {
-  minHeight: 'var(--n-height)'
-}), cE('border, state-border', `
+ `), cB('base-selection-tags', 'min-height: var(--n-height);'), cE('border, state-border', `
  position: absolute;
  left: 0;
  right: 0;
@@ -148,13 +146,7 @@ export default c([cB('base-selection', `
  `)]), cM('active', [cE('state-border', `
  box-shadow: var(--n-box-shadow-active);
  border: var(--n-border-active);
- `), cB('base-selection-label', {
-  backgroundColor: 'var(--n-color-active)'
-}), cB('base-selection-tags', {
-  backgroundColor: 'var(--n-color-active)'
-})])]), cM('disabled', {
-  cursor: 'not-allowed'
-}, [cE('arrow', `
+ `), cB('base-selection-label', 'background-color: var(--n-color-active);'), cB('base-selection-tags', 'background-color: var(--n-color-active);')])]), cM('disabled', 'cursor: not-allowed;', [cE('arrow', `
  color: var(--n-arrow-color-disabled);
  `), cB('base-selection-label', `
  cursor: not-allowed;
@@ -200,7 +192,16 @@ export default c([cB('base-selection', `
  visibility: hidden;
  user-select: none;
  opacity: 0;
- `)])]), cB('base-selection-popover', `
+ `)]), ['warning', 'error'].map(status => cM(`${status}-status`, [cE('state-border', `border: var(--n-border-${status});`), cNotM('disabled', [c('&:hover', [cE('state-border', `
+ box-shadow: var(--n-box-shadow-hover-${status});
+ border: var(--n-border-hover-${status});
+ `)]), cM('active', [cE('state-border', `
+ box-shadow: var(--n-box-shadow-active-${status});
+ border: var(--n-border-active-${status});
+ `), cB('base-selection-label', `background-color: var(--n-color-active-${status});`), cB('base-selection-tags', `background-color: var(--n-color-active-${status});`)]), cM('focus', [cE('state-border', `
+ box-shadow: var(--n-box-shadow-focus-${status});
+ border: var(--n-border-focus-${status});
+ `)])])]))]), cB('base-selection-popover', `
  margin-bottom: -3px;
  display: flex;
  flex-wrap: wrap;
@@ -208,27 +209,11 @@ export default c([cB('base-selection', `
  max-width: 100%;
  display: inline-flex;
  padding: 0 7px 3px 0;
- `, [c('&:last-child', {
-  paddingRight: 0
-}), cB('tag', `
+ `, [c('&:last-child', 'padding-right: 0;'), cB('tag', `
  font-size: 14px;
  max-width: 100%;
  `, [cE('content', `
+ line-height: 1.25;
  text-overflow: ellipsis;
  overflow: hidden;
- `)])]), ['warning', 'error'].map(status => insideFormItem(status, cB('base-selection', [cE('state-border', {
-  border: `var(--n-border-${status})`
-}), cNotM('disabled', [c('&:hover', [cE('state-border', `
- box-shadow: var(--n-box-shadow-hover-${status});
- border: var(--n-border-hover-${status});
- `)]), cM('active', [cE('state-border', `
- box-shadow: var(--n-box-shadow-active-${status});
- border: var(--n-border-active-${status});
- `), cB('base-selection-label', {
-  backgroundColor: `var(--n-color-active-${status})`
-}), cB('base-selection-tags', {
-  backgroundColor: `var(--n-box-shadow-active-${status})`
-})]), cM('focus', [cE('state-border', `
- box-shadow: var(--n-box-shadow-focus-${status});
- border: var(--n-border-focus-${status});
- `)])])])))]);
+ `)])])]);

package/es/_internal/slot-machine/src/SlotMachine.js

@@ -24,7 +24,7 @@ export default defineComponent({
         }
     },
     setup(props) {
-        useStyle('BaseSlotMachine', style, toRef(props, 'clsPrefix'));
+        useStyle('-base-slot-machine', style, toRef(props, 'clsPrefix'));
         const oldValueRef = ref();
         const newValueRef = ref();
         const numbersRef = computed(() => {

package/es/_internal/wave/src/Wave.js

@@ -10,7 +10,7 @@ export default defineComponent({
         }
     },
     setup(props) {
-        useStyle('BaseWave', style, toRef(props, 'clsPrefix'));
+        useStyle('-base-wave', style, toRef(props, 'clsPrefix'));
         const selfRef = ref(null);
         const activeRef = ref(false);
         let animationTimerId = null;

package/es/_mixins/use-config.js

@@ -1,5 +1,5 @@
 import { inject, computed } from 'vue';
-import { configProviderInjectionKey } from '../config-provider/src/ConfigProvider';
+import { configProviderInjectionKey } from '../config-provider/src/context';
 export const defaultClsPrefix = 'n';
 export default function useConfig(props = {}, options = {
     defaultBordered: true

package/es/_mixins/use-css-vars-class.d.ts

@@ -1,2 +1,4 @@
-import { Ref } from 'vue';
-export declare function useCssVarsClass(cssVarsRef: Ref<Record<string, string>>): Ref<string>;
+import { ComputedRef, Ref } from 'vue';
+export declare function useCssVarsClass(componentName: string, hashRef: Ref<string> | undefined, cssVarsRef: ComputedRef<Record<string, string>> | undefined, props: {
+    themeOverrides?: unknown;
+}): Ref<string>;

package/es/_mixins/use-css-vars-class.js

@@ -1,22 +1,37 @@
-import { ref, watchEffect } from 'vue';
-import hash from '@emotion/hash';
+import { ref, inject, watchEffect } from 'vue';
+import { hash } from 'css-render';
+import { configProviderInjectionKey } from '../config-provider/src/context';
+import { throwError } from '../_utils';
 import { c } from '../_utils/cssr';
-// window.xxx = 0
-export function useCssVarsClass(cssVarsRef) {
+export function useCssVarsClass(componentName, hashRef, cssVarsRef, props) {
+    var _a;
+    if (!cssVarsRef)
+        throwError('useCssVarsClass', 'cssVarsRef is not passed');
+    const mergedThemeHashRef = (_a = inject(configProviderInjectionKey, null)) === null || _a === void 0 ? void 0 : _a.mergedThemeHashRef;
     const cssVarsClassRef = ref('');
-    watchEffect(() => {
-        // window.xxx -= performance.now()
+    const mountStyle = () => {
         const cssVars = cssVarsRef.value;
         let style = '';
         for (const key in cssVars) {
             style += `${key}: ${cssVars[key]};`;
         }
-        const styleHash = hash(style);
-        cssVarsClassRef.value = `c${styleHash}`;
-        c(`.c${styleHash}`, style).mount({
-            id: styleHash
+        let finalThemeHash = componentName;
+        const hashValue = hashRef ? hashRef.value : undefined;
+        const themeHash = mergedThemeHashRef === null || mergedThemeHashRef === void 0 ? void 0 : mergedThemeHashRef.value;
+        if (themeHash)
+            finalThemeHash += '-' + themeHash;
+        if (hashValue)
+            finalThemeHash += '-' + hashValue;
+        if (props.themeOverrides) {
+            finalThemeHash += '-' + hash(JSON.stringify(props.themeOverrides));
+        }
+        cssVarsClassRef.value = finalThemeHash;
+        c(`.${finalThemeHash}`, style).mount({
+            id: finalThemeHash
         });
-        // window.xxx += performance.now()
+    };
+    watchEffect(() => {
+        mountStyle();
     });
     return cssVarsClassRef;
 }

package/es/_mixins/use-form-item.d.ts

@@ -1,10 +1,12 @@
 import { ComputedRef, Ref } from 'vue';
+import { FormValidationStatus } from '../form/src/interface';
 declare type FormItemSize = 'small' | 'medium' | 'large';
 declare type AllowedSize = 'tiny' | 'small' | 'medium' | 'large' | 'huge' | number;
 export interface FormItemInjection {
     path: Ref<string | undefined>;
     disabled: Ref<boolean>;
     mergedSize: ComputedRef<FormItemSize>;
+    mergedValidationStatus: ComputedRef<FormValidationStatus | undefined>;
     restoreValidation: () => void;
     handleContentBlur: () => void;
     handleContentFocus: () => void;
@@ -20,10 +22,12 @@ interface UseFormItemOptions<T> {
 interface UseFormItemProps<T> {
     size?: T;
     disabled?: boolean;
+    status?: FormValidationStatus;
 }
 export interface UseFormItem<T> {
     mergedSizeRef: ComputedRef<T>;
     mergedDisabledRef: ComputedRef<boolean>;
+    mergedStatusRef: ComputedRef<FormValidationStatus | undefined>;
     nTriggerFormBlur: () => void;
     nTriggerFormChange: () => void;
     nTriggerFormFocus: () => void;