naive-ui 2.24.6 → 2.25.2

package/es/select/src/Select.js

@@ -13,7 +13,10 @@ import style from './styles/index.cssr';
 const selectProps = Object.assign(Object.assign({}, useTheme.props), { to: useAdjustedTo.propTo, bordered: {
         type: Boolean,
         default: undefined
-    }, clearable: Boolean, options: {
+    }, clearable: Boolean, clearFilterAfterSelect: {
+        type: Boolean,
+        default: true
+    }, options: {
         type: Array,
         default: () => []
     }, defaultValue: {
@@ -80,8 +83,8 @@ export default defineComponent({
                 }
             });
         }
-        const { mergedClsPrefixRef, mergedBorderedRef, namespaceRef } = useConfig(props);
-        const themeRef = useTheme('Select', 'Select', style, selectLight, props, mergedClsPrefixRef);
+        const { mergedClsPrefixRef, mergedBorderedRef, namespaceRef, NConfigProvider } = useConfig(props);
+        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 +178,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 +252,6 @@ export default defineComponent({
         }
         function openMenu() {
             if (!mergedDisabledRef.value) {
-                patternRef.value = '';
                 doUpdateShow(true);
                 uncontrolledShowRef.value = true;
                 if (props.filterable) {
@@ -262,6 +264,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)
@@ -342,7 +359,7 @@ export default defineComponent({
         function handleToggleByOption(option) {
             if (mergedDisabledRef.value)
                 return;
-            const { tag, remote } = props;
+            const { tag, remote, clearFilterAfterSelect } = props;
             if (tag && !remote) {
                 const { value: beingCreatedOptions } = beingCreatedOptionsRef;
                 const beingCreatedOption = beingCreatedOptions[0] || null;
@@ -363,13 +380,15 @@ export default defineComponent({
                         const createdOptionIndex = getCreatedOptionIndex(option.value);
                         if (~createdOptionIndex) {
                             createdOptionsRef.value.splice(createdOptionIndex, 1);
-                            patternRef.value = '';
+                            if (clearFilterAfterSelect)
+                                patternRef.value = '';
                         }
                     }
                 }
                 else {
                     changedValue.push(option.value);
-                    patternRef.value = '';
+                    if (clearFilterAfterSelect)
+                        patternRef.value = '';
                 }
                 doUpdateValue(changedValue, getMergedOptions(changedValue));
             }
@@ -440,43 +459,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 +529,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 +567,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, disableInlineTheme: NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.disableInlineTheme, 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 +593,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", disableInlineTheme: this.disableInlineTheme, 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 }, {
@@ -571,11 +603,14 @@ export default defineComponent({
                                 var _a, _b;
                                 return (this.mergedShow ||
                                     this.displayDirective === 'show') &&
-                                    withDirectives(h(NInternalSelectMenu, Object.assign({}, this.menuProps, { ref: "menuRef", virtualScroll: this.consistentMenuWidth && this.virtualScroll, class: [
+                                    withDirectives(h(NInternalSelectMenu, Object.assign({}, this.menuProps, { ref: "menuRef", disableInlineTheme: this.disableInlineTheme, virtualScroll: this.consistentMenuWidth && this.virtualScroll, class: [
                                             `${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/select/styles/light.d.ts

@@ -26,7 +26,7 @@ declare const selectLight: import("../../_mixins").Theme<"Select", {
         borderHover: string;
         borderActive: string;
         borderFocus: string;
-        boxShadowHover: null;
+        boxShadowHover: string;
         boxShadowActive: string;
         boxShadowFocus: string;
         caretColor: string;
@@ -37,7 +37,7 @@ declare const selectLight: import("../../_mixins").Theme<"Select", {
         borderHoverWarning: string;
         borderActiveWarning: string;
         borderFocusWarning: string;
-        boxShadowHoverWarning: null;
+        boxShadowHoverWarning: string;
         boxShadowActiveWarning: string;
         boxShadowFocusWarning: string;
         colorActiveWarning: string;
@@ -46,7 +46,7 @@ declare const selectLight: import("../../_mixins").Theme<"Select", {
         borderHoverError: string;
         borderActiveError: string;
         borderFocusError: string;
-        boxShadowHoverError: null;
+        boxShadowHoverError: string;
         boxShadowActiveError: string;
         boxShadowFocusError: string;
         colorActiveError: string;

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

@@ -451,6 +451,8 @@ declare const _default: import("vue").DefineComponent<{
         closeMarginRtl: string;
     }, any>>>;
 }, {
+    themeClass?: Ref<string> | undefined;
+    onRender?: (() => void) | undefined;
     rtlEnabled: Ref<import("../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
     mergedClsPrefix: import("vue").ComputedRef<string>;
     contentRef: Ref<HTMLElement | null>;
@@ -485,7 +487,7 @@ declare const _default: import("vue").DefineComponent<{
         '--n-text-color-checked': string;
         '--n-text-color-hover-checkable': string;
         '--n-text-color-pressed-checkable': string;
-    }>;
+    }> | undefined;
     setTextContent: (textContent: string) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     bordered: {

package/es/tag/src/Tag.js

@@ -1,7 +1,7 @@
 import { h, defineComponent, computed, ref, provide, toRef } from 'vue';
-import { useConfig, useTheme } from '../../_mixins';
+import { useConfig, useThemeClass, useTheme, emptyThemeClassHandle } from '../../_mixins';
 import { NBaseClose } from '../../_internal';
-import { warn, createKey, call, createInjectionKey } from '../../_utils';
+import { warn, createKey, call, createInjectionKey, color2Class, resolveWrappedSlot } from '../../_utils';
 import { tagLight } from '../styles';
 import commonProps from './common-props';
 import style from './styles/index.cssr';
@@ -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')
         });
@@ -66,45 +66,65 @@ export default defineComponent({
             }
         };
         const rtlEnabledRef = useRtl('Tag', NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedRtlRef, mergedClsPrefixRef);
-        return Object.assign(Object.assign({}, tagPublicMethods), { rtlEnabled: rtlEnabledRef, mergedClsPrefix: mergedClsPrefixRef, contentRef, mergedBordered: mergedBorderedRef, handleClick,
-            handleCloseClick, cssVars: computed(() => {
+        const disableInlineTheme = NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.disableInlineTheme;
+        const cssVarsRef = computed(() => {
+            const { type, size, color: { color, textColor } = {} } = props;
+            const { common: { cubicBezierEaseInOut }, self: { padding, closeMargin, closeMarginRtl, borderRadius, opacityDisabled, textColorCheckable, textColorHoverCheckable, textColorPressedCheckable, textColorChecked, colorCheckable, colorHoverCheckable, colorPressedCheckable, colorChecked, colorCheckedHover, colorCheckedPressed, [createKey('closeSize', size)]: closeSize, [createKey('fontSize', size)]: fontSize, [createKey('height', size)]: height, [createKey('color', type)]: typedColor, [createKey('textColor', type)]: typeTextColor, [createKey('border', type)]: border, [createKey('closeColor', type)]: closeColor, [createKey('closeColorHover', type)]: closeColorHover, [createKey('closeColorPressed', type)]: closeColorPressed } } = themeRef.value;
+            return {
+                '--n-avatar-size-override': `calc(${height} - 8px)`,
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-border-radius': borderRadius,
+                '--n-border': border,
+                '--n-close-color': closeColor,
+                '--n-close-color-hover': closeColorHover,
+                '--n-close-color-pressed': closeColorPressed,
+                '--n-close-color-disabled': closeColor,
+                '--n-close-margin': closeMargin,
+                '--n-close-margin-rtl': closeMarginRtl,
+                '--n-close-size': closeSize,
+                '--n-color': color || typedColor,
+                '--n-color-checkable': colorCheckable,
+                '--n-color-checked': colorChecked,
+                '--n-color-checked-hover': colorCheckedHover,
+                '--n-color-checked-pressed': colorCheckedPressed,
+                '--n-color-hover-checkable': colorHoverCheckable,
+                '--n-color-pressed-checkable': colorPressedCheckable,
+                '--n-font-size': fontSize,
+                '--n-height': height,
+                '--n-opacity-disabled': opacityDisabled,
+                '--n-padding': padding,
+                '--n-text-color': textColor || typeTextColor,
+                '--n-text-color-checkable': textColorCheckable,
+                '--n-text-color-checked': textColorChecked,
+                '--n-text-color-hover-checkable': textColorHoverCheckable,
+                '--n-text-color-pressed-checkable': textColorPressedCheckable
+            };
+        });
+        const themeClassHandle = disableInlineTheme
+            ? useThemeClass('tag', computed(() => {
+                let hash = '';
                 const { type, size, color: { color, textColor } = {} } = props;
-                const { common: { cubicBezierEaseInOut }, self: { padding, closeMargin, closeMarginRtl, borderRadius, opacityDisabled, textColorCheckable, textColorHoverCheckable, textColorPressedCheckable, textColorChecked, colorCheckable, colorHoverCheckable, colorPressedCheckable, colorChecked, colorCheckedHover, colorCheckedPressed, [createKey('closeSize', size)]: closeSize, [createKey('fontSize', size)]: fontSize, [createKey('height', size)]: height, [createKey('color', type)]: typedColor, [createKey('textColor', type)]: typeTextColor, [createKey('border', type)]: border, [createKey('closeColor', type)]: closeColor, [createKey('closeColorHover', type)]: closeColorHover, [createKey('closeColorPressed', type)]: closeColorPressed } } = themeRef.value;
-                return {
-                    '--n-avatar-size-override': `calc(${height} - 8px)`,
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-border-radius': borderRadius,
-                    '--n-border': border,
-                    '--n-close-color': closeColor,
-                    '--n-close-color-hover': closeColorHover,
-                    '--n-close-color-pressed': closeColorPressed,
-                    '--n-close-color-disabled': closeColor,
-                    '--n-close-margin': closeMargin,
-                    '--n-close-margin-rtl': closeMarginRtl,
-                    '--n-close-size': closeSize,
-                    '--n-color': color || typedColor,
-                    '--n-color-checkable': colorCheckable,
-                    '--n-color-checked': colorChecked,
-                    '--n-color-checked-hover': colorCheckedHover,
-                    '--n-color-checked-pressed': colorCheckedPressed,
-                    '--n-color-hover-checkable': colorHoverCheckable,
-                    '--n-color-pressed-checkable': colorPressedCheckable,
-                    '--n-font-size': fontSize,
-                    '--n-height': height,
-                    '--n-opacity-disabled': opacityDisabled,
-                    '--n-padding': padding,
-                    '--n-text-color': textColor || typeTextColor,
-                    '--n-text-color-checkable': textColorCheckable,
-                    '--n-text-color-checked': textColorChecked,
-                    '--n-text-color-hover-checkable': textColorHoverCheckable,
-                    '--n-text-color-pressed-checkable': textColorPressedCheckable
-                };
-            }) });
+                hash += type[0];
+                hash += size[0];
+                if (color) {
+                    hash += `a${color2Class(color)}`;
+                }
+                if (textColor) {
+                    hash += `b${color2Class(textColor)}`;
+                }
+                return hash;
+            }), cssVarsRef, props)
+            : emptyThemeClassHandle;
+        return Object.assign(Object.assign(Object.assign({}, tagPublicMethods), { rtlEnabled: rtlEnabledRef, mergedClsPrefix: mergedClsPrefixRef, contentRef, mergedBordered: mergedBorderedRef, handleClick,
+            handleCloseClick, cssVars: disableInlineTheme ? undefined : cssVarsRef }), themeClassHandle);
     },
     render() {
-        const { mergedClsPrefix, rtlEnabled, color: { borderColor } = {}, $slots } = this;
+        var _a, _b;
+        const { mergedClsPrefix, rtlEnabled, color: { borderColor } = {}, onRender, $slots } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
         return (h("div", { class: [
                 `${mergedClsPrefix}-tag`,
+                this.themeClass,
                 {
                     [`${mergedClsPrefix}-tag--rtl`]: rtlEnabled,
                     [`${mergedClsPrefix}-tag--disabled`]: this.disabled,
@@ -113,10 +133,10 @@ export default defineComponent({
                     [`${mergedClsPrefix}-tag--round`]: this.round
                 }
             ], style: this.cssVars, onClick: this.handleClick, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave },
-            $slots.avatar && (h("div", { class: `${mergedClsPrefix}-tag__avatar` }, {
-                default: $slots.avatar
-            })),
-            h("span", { class: `${mergedClsPrefix}-tag__content`, ref: "contentRef" }, this.$slots),
+            resolveWrappedSlot($slots.avatar, (children) => [
+                h("div", { class: `${mergedClsPrefix}-tag__avatar` }, children)
+            ]),
+            h("span", { class: `${mergedClsPrefix}-tag__content`, ref: "contentRef" }, (_b = (_a = this.$slots).default) === null || _b === void 0 ? void 0 : _b.call(_a)),
             !this.checkable && this.closable ? (h(NBaseClose, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-tag__close`, disabled: this.disabled, onClick: this.handleCloseClick })) : null,
             !this.checkable && this.mergedBordered ? (h("div", { class: `${mergedClsPrefix}-tag__border`, style: { borderColor } })) : null));
     }