naive-ui 2.24.7 → 2.25.0

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(() => {

package/es/spin/src/Spin.js

@@ -39,7 +39,7 @@ export default defineComponent({
             });
         }
         const { mergedClsPrefixRef } = useConfig(props);
-        const themeRef = useTheme('Spin', 'Spin', style, spinLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme('Spin', '-spin', style, spinLight, props, mergedClsPrefixRef);
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             compitableShow: useCompitable(props, ['spinning', 'show']),

package/es/statistic/src/Statistic.js

@@ -8,7 +8,7 @@ export default defineComponent({
     props: statisticProps,
     setup(props) {
         const { mergedClsPrefixRef } = useConfig(props);
-        const themeRef = useTheme('Statistic', 'Statistic', style, statisticLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme('Statistic', '-statistic', style, statisticLight, props, mergedClsPrefixRef);
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             cssVars: computed(() => {

package/es/steps/src/Steps.js

@@ -28,7 +28,7 @@ export default defineComponent({
     props: stepsProps,
     setup(props, { slots }) {
         const { mergedClsPrefixRef } = useConfig(props);
-        const themeRef = useTheme('Steps', 'Steps', style, stepsLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme('Steps', '-steps', style, stepsLight, props, mergedClsPrefixRef);
         provide(stepsInjectionKey, {
             props,
             mergedThemeRef: themeRef,

package/es/switch/src/Switch.js

@@ -42,7 +42,7 @@ export default defineComponent({
             });
         }
         const { mergedClsPrefixRef } = useConfig(props);
-        const themeRef = useTheme('Switch', 'Switch', style, switchLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme('Switch', '-switch', style, switchLight, props, mergedClsPrefixRef);
         const formItem = useFormItem(props);
         const { mergedSizeRef, mergedDisabledRef } = formItem;
         const uncontrolledValueRef = ref(props.defaultValue);

package/es/table/src/Table.js

@@ -21,7 +21,7 @@ export default defineComponent({
     props: tableProps,
     setup(props) {
         const { mergedClsPrefixRef } = useConfig(props);
-        const themeRef = useTheme('Table', 'Table', style, tableLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme('Table', '-table', style, tableLight, props, mergedClsPrefixRef);
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             cssVars: computed(() => {

package/es/tabs/src/Tabs.d.ts

@@ -11,12 +11,13 @@ declare const tabsProps: {
         readonly default: "bar";
     };
     readonly closable: BooleanConstructor;
-    readonly justifyContent: PropType<"space-around" | "space-between" | "space-evenly">;
+    readonly justifyContent: PropType<"start" | "end" | "space-around" | "space-between" | "space-evenly" | "center">;
     readonly size: {
         readonly type: PropType<"small" | "medium" | "large">;
         readonly default: "medium";
     };
     readonly tabStyle: PropType<string | CSSProperties>;
+    readonly barWidth: NumberConstructor;
     readonly paneClass: StringConstructor;
     readonly paneStyle: PropType<string | CSSProperties>;
     readonly addable: PropType<Addable>;
@@ -228,12 +229,13 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "bar";
     };
     readonly closable: BooleanConstructor;
-    readonly justifyContent: PropType<"space-around" | "space-between" | "space-evenly">;
+    readonly justifyContent: PropType<"start" | "end" | "space-around" | "space-between" | "space-evenly" | "center">;
     readonly size: {
         readonly type: PropType<"small" | "medium" | "large">;
         readonly default: "medium";
     };
     readonly tabStyle: PropType<string | CSSProperties>;
+    readonly barWidth: NumberConstructor;
     readonly paneClass: StringConstructor;
     readonly paneStyle: PropType<string | CSSProperties>;
     readonly addable: PropType<Addable>;
@@ -485,7 +487,7 @@ declare const _default: import("vue").DefineComponent<{
     addTabFixed: import("vue").Ref<boolean>;
     tabWrapperStyle: import("vue").ComputedRef<{
         display: string;
-        justifyContent: "space-around" | "space-between" | "space-evenly";
+        justifyContent: "start" | "end" | "space-around" | "space-between" | "space-evenly" | "center";
     } | undefined>;
     handleNavResize: import("lodash").DebouncedFunc<() => void>;
     mergedSize: import("vue").ComputedRef<"small" | "medium" | "large">;
@@ -523,12 +525,13 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "bar";
     };
     readonly closable: BooleanConstructor;
-    readonly justifyContent: PropType<"space-around" | "space-between" | "space-evenly">;
+    readonly justifyContent: PropType<"start" | "end" | "space-around" | "space-between" | "space-evenly" | "center">;
     readonly size: {
         readonly type: PropType<"small" | "medium" | "large">;
         readonly default: "medium";
     };
     readonly tabStyle: PropType<string | CSSProperties>;
+    readonly barWidth: NumberConstructor;
     readonly paneClass: StringConstructor;
     readonly paneStyle: PropType<string | CSSProperties>;
     readonly addable: PropType<Addable>;

package/es/tabs/src/Tabs.js

@@ -14,7 +14,7 @@ const tabsProps = Object.assign(Object.assign({}, useTheme.props), { value: [Str
     }, closable: Boolean, justifyContent: String, size: {
         type: String,
         default: 'medium'
-    }, tabStyle: [String, Object], paneClass: String, paneStyle: [String, Object], addable: [Boolean, Object], tabsPadding: {
+    }, tabStyle: [String, Object], barWidth: Number, paneClass: String, paneStyle: [String, Object], addable: [Boolean, Object], tabsPadding: {
         type: Number,
         default: 0
     }, onBeforeLeave: Function, onAdd: Function, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], onClose: [Function, Array], 
@@ -39,7 +39,7 @@ export default defineComponent({
             });
         }
         const { mergedClsPrefixRef } = useConfig(props);
-        const themeRef = useTheme('Tabs', 'Tabs', style, tabsLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme('Tabs', '-tabs', style, tabsLight, props, mergedClsPrefixRef);
         const tabsElRef = ref(null);
         const barElRef = ref(null);
         const scrollWrapperElRef = ref(null);
@@ -82,15 +82,23 @@ export default defineComponent({
                 return;
             if (tabEl) {
                 const disabledClassName = `${mergedClsPrefixRef.value}-tabs-bar--disabled`;
+                const { barWidth } = props;
                 if (tabEl.dataset.disabled === 'true') {
                     barEl.classList.add(disabledClassName);
                 }
                 else {
                     barEl.classList.remove(disabledClassName);
                 }
-                barEl.style.left = `${tabEl.offsetLeft}px`;
+                if (barWidth && tabEl.offsetWidth >= barWidth) {
+                    const offsetDiffLeft = Math.floor((tabEl.offsetWidth - barWidth) / 2) + tabEl.offsetLeft;
+                    barEl.style.left = `${offsetDiffLeft}px`;
+                    barEl.style.maxWidth = `${barWidth}px`;
+                }
+                else {
+                    barEl.style.left = `${tabEl.offsetLeft}px`;
+                    barEl.style.maxWidth = `${tabEl.offsetWidth}px`;
+                }
                 barEl.style.width = '8192px';
-                barEl.style.maxWidth = `${tabEl.offsetWidth + 1}px`;
             }
         }
         function updateCurrentBarStyle() {

package/es/tag/src/Tag.d.ts

@@ -26,7 +26,7 @@ declare const tagProps: {
     };
     color: PropType<import("./common-props").TagColor>;
     type: {
-        readonly type: PropType<"default" | "error" | "info" | "success" | "warning" | "primary">;
+        readonly type: PropType<"default" | "success" | "error" | "warning" | "info" | "primary">;
         readonly default: "default";
     };
     round: BooleanConstructor;
@@ -251,7 +251,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     color: PropType<import("./common-props").TagColor>;
     type: {
-        readonly type: PropType<"default" | "error" | "info" | "success" | "warning" | "primary">;
+        readonly type: PropType<"default" | "success" | "error" | "warning" | "info" | "primary">;
         readonly default: "default";
     };
     round: BooleanConstructor;
@@ -507,7 +507,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     color: PropType<import("./common-props").TagColor>;
     type: {
-        readonly type: PropType<"default" | "error" | "info" | "success" | "warning" | "primary">;
+        readonly type: PropType<"default" | "success" | "error" | "warning" | "info" | "primary">;
         readonly default: "default";
     };
     round: BooleanConstructor;
@@ -707,7 +707,7 @@ declare const _default: import("vue").DefineComponent<{
         closeMarginRtl: string;
     }, any>>>;
 }>>, {
-    type: "default" | "error" | "info" | "success" | "warning" | "primary";
+    type: "default" | "success" | "error" | "warning" | "info" | "primary";
     round: boolean;
     size: "small" | "medium" | "large";
     disabled: boolean | undefined;

package/es/tag/src/Tag.js

@@ -30,7 +30,7 @@ export default defineComponent({
     setup(props) {
         const contentRef = ref(null);
         const { mergedBorderedRef, mergedClsPrefixRef, NConfigProvider } = useConfig(props);
-        const themeRef = useTheme('Tag', 'Tag', style, tagLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme('Tag', '-tag', style, tagLight, props, mergedClsPrefixRef);
         provide(tagInjectionKey, {
             roundRef: toRef(props, 'round')
         });

package/es/tag/src/common-props.d.ts

@@ -7,7 +7,7 @@ export interface TagColor {
 declare const _default: {
     readonly color: PropType<TagColor>;
     readonly type: {
-        readonly type: PropType<"default" | "error" | "info" | "success" | "warning" | "primary">;
+        readonly type: PropType<"default" | "success" | "error" | "warning" | "info" | "primary">;
         readonly default: "default";
     };
     readonly round: BooleanConstructor;

package/es/tag/src/styles/index.cssr.js

@@ -42,7 +42,7 @@ export default cB('tag', `
  color .3s var(--n-bezier),
  box-shadow .3s var(--n-bezier),
  opacity .3s var(--n-bezier);
- line-height: 1.2;
+ line-height: 1;
  height: var(--n-height);
  font-size: var(--n-font-size);
 `, [cE('border', `
@@ -76,19 +76,7 @@ export default cB('tag', `
  box-shadow: none;
  color: var(--n-text-color-checkable);
  background-color: var(--n-color-checkable);
- `, [cNotM('disabled', [c('&:hover', {
-  backgroundColor: 'var(--n-color-hover-checkable)'
-}, [cNotM('checked', {
-  color: 'var(--n-text-color-hover-checkable)'
-})]), c('&:active', {
-  backgroundColor: 'var(--n-color-pressed-checkable)'
-}, [cNotM('checked', {
-  color: 'var(--n-text-color-pressed-checkable)'
-})])]), cM('checked', {
-  color: 'var(--n-text-color-checked)',
-  backgroundColor: 'var(--n-color-checked)'
-}, [cNotM('disabled', [c('&:hover', {
-  backgroundColor: 'var(--n-color-checked-hover)'
-}), c('&:active', {
-  backgroundColor: 'var(--n-color-checked-pressed)'
-})])])])]);
+ `, [cNotM('disabled', [c('&:hover', 'background-color: var(--n-color-hover-checkable);', [cNotM('checked', 'color: var(--n-text-color-hover-checkable);')]), c('&:active', 'background-color: var(--n-color-pressed-checkable);', [cNotM('checked', 'color: var(--n-text-color-pressed-checkable);')])]), cM('checked', `
+ color: var(--n-text-color-checked);
+ background-color: 'var(--n-color-checked);
+ `, [cNotM('disabled', [c('&:hover', 'background-color: var(--n-color-checked-hover);'), c('&:active', 'background-color: var(--n-color-checked-pressed);')])])])]);

package/es/themes/dark.js

@@ -31,6 +31,7 @@ import { emptyDark } from '../empty/styles';
 import { formDark } from '../form/styles';
 import { gradientTextDark } from '../gradient-text/styles';
 import { iconDark } from '../icon/styles';
+import { iconWrapperDark } from '../icon-wrapper/styles';
 import { imageDark } from '../image/styles';
 import { inputDark } from '../input/styles';
 import { inputNumberDark } from '../input-number/styles';
@@ -74,6 +75,7 @@ import { typographyDark } from '../typography/styles';
 import { treeDark } from '../tree/styles';
 import { uploadDark } from '../upload/styles';
 export const darkTheme = {
+    name: 'dark',
     common: commonDark,
     Alert: alertDark,
     Anchor: anchorDark,
@@ -107,6 +109,7 @@ export const darkTheme = {
     Form: formDark,
     GradientText: gradientTextDark,
     Icon: iconDark,
+    IconWrapper: iconWrapperDark,
     Image: imageDark,
     Input: inputDark,
     InputNumber: inputNumberDark,

package/es/themes/light.js

@@ -33,6 +33,7 @@ import { emptyLight } from '../empty/styles';
 import { formLight } from '../form/styles';
 import { gradientTextLight } from '../gradient-text/styles';
 import { iconLight } from '../icon/styles';
+import { iconWrapperLight } from '../icon-wrapper/styles';
 import { imageLight } from '../image/styles';
 import { inputLight } from '../input/styles';
 import { inputNumberLight } from '../input-number/styles';
@@ -76,6 +77,7 @@ import { treeLight } from '../tree/styles';
 import { treeSelectLight } from '../tree-select/styles';
 import { uploadLight } from '../upload/styles';
 export const lightTheme = {
+    name: 'light',
     common: commonLight,
     Alert: alertLight,
     Anchor: anchorLight,
@@ -109,6 +111,7 @@ export const lightTheme = {
     Form: formLight,
     GradientText: gradientTextLight,
     Icon: iconLight,
+    IconWrapper: iconWrapperLight,
     Image: imageLight,
     Input: inputLight,
     InputNumber: inputNumberLight,

package/es/themes/utils.d.ts

@@ -1,5 +1,6 @@
 import { GlobalTheme } from '../config-provider';
-declare type ComponentKey = keyof GlobalTheme;
+declare type ComponentKey = Exclude<keyof GlobalTheme, 'name'>;
 declare type ComponentThemes = Array<Exclude<GlobalTheme[ComponentKey], undefined>>;
+export declare function createTheme(name: string, componentThemes: ComponentThemes): GlobalTheme;
 export declare function createTheme(componentThemes: ComponentThemes): GlobalTheme;
 export {};

package/es/themes/utils.js

@@ -1,7 +1,19 @@
-export function createTheme(componentThemes) {
-    const theme = {};
-    for (const cTheme of componentThemes) {
-        theme[cTheme.name] = cTheme;
+export function createTheme(name, componentThemes) {
+    const nameIsString = typeof name === 'string';
+    const theme = {
+        name: nameIsString ? name : 'customized-theme'
+    };
+    if (nameIsString) {
+        if (componentThemes) {
+            for (const cTheme of componentThemes) {
+                theme[cTheme.name] = cTheme;
+            }
+        }
+    }
+    else {
+        for (const cTheme of name) {
+            theme[cTheme.name] = cTheme;
+        }
     }
     return theme;
 }

package/es/thing/src/Thing.js

@@ -11,7 +11,7 @@ export default defineComponent({
     props: thingProps,
     setup(props, { slots }) {
         const { mergedClsPrefixRef } = useConfig(props);
-        const themeRef = useTheme('Thing', 'Thing', style, thingLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme('Thing', '-thing', style, thingLight, props, mergedClsPrefixRef);
         const cssVarsRef = computed(() => {
             const { self: { titleTextColor, textColor, titleFontWeight, fontSize }, common: { cubicBezierEaseInOut } } = themeRef.value;
             return {

package/es/time-picker/src/TimePicker.d.ts

@@ -1,4 +1,5 @@
 import { PropType } from 'vue';
+import { FollowerPlacement } from 'vueuc';
 import type { MaybeArray, ExtractPublicPropTypes } from '../../_utils';
 import type { IsHourDisabled, IsMinuteDisabled, IsSecondDisabled, ItemValue, OnUpdateFormattedValue, OnUpdateValue, Size } from './interface';
 declare const timePickerProps: {
@@ -18,7 +19,7 @@ declare const timePickerProps: {
     defaultFormattedValue: StringConstructor;
     placeholder: StringConstructor;
     placement: {
-        type: StringConstructor;
+        type: PropType<FollowerPlacement>;
         default: string;
     };
     value: PropType<number | null>;
@@ -947,7 +948,7 @@ declare const _default: import("vue").DefineComponent<{
     defaultFormattedValue: StringConstructor;
     placeholder: StringConstructor;
     placement: {
-        type: StringConstructor;
+        type: PropType<FollowerPlacement>;
         default: string;
     };
     value: PropType<number | null>;
@@ -1858,6 +1859,7 @@ declare const _default: import("vue").DefineComponent<{
         }, any>;
     }>>>;
 }, {
+    mergedStatus: import("vue").ComputedRef<import("../../form/src/interface").FormValidationStatus | undefined>;
     mergedBordered: import("vue").ComputedRef<boolean>;
     mergedClsPrefix: import("vue").ComputedRef<string>;
     namespace: import("vue").ComputedRef<string | undefined>;
@@ -2407,7 +2409,7 @@ declare const _default: import("vue").DefineComponent<{
     defaultFormattedValue: StringConstructor;
     placeholder: StringConstructor;
     placement: {
-        type: StringConstructor;
+        type: PropType<FollowerPlacement>;
         default: string;
     };
     value: PropType<number | null>;
@@ -3322,9 +3324,9 @@ declare const _default: import("vue").DefineComponent<{
     disabled: boolean | undefined;
     format: string;
     to: string | boolean | HTMLElement;
-    placement: string;
-    showIcon: boolean;
     bordered: boolean | undefined;
+    showIcon: boolean;
+    placement: FollowerPlacement;
     clearable: boolean;
     defaultValue: number | null;
     stateful: boolean;