naive-ui 2.25.1 → 2.25.2

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

@@ -47,7 +47,7 @@ exports.default = (0, vue_1.defineComponent)({
         }, loading: Boolean, focusable: Boolean, renderLabel: Function, renderOption: Function, onMousedown: Function, onScroll: Function, onFocus: Function, onBlur: Function, onKeyup: Function, onKeydown: Function, onTabOut: Function, onMouseenter: Function, onMouseleave: Function, resetMenuOnOptionsChange: {
             type: Boolean,
             default: true
-        }, 
+        }, disableInlineTheme: Boolean, 
         // deprecated
         onToggle: Function }),
     setup(props) {
@@ -116,9 +116,6 @@ exports.default = (0, vue_1.defineComponent)({
             const tmNodes = flattenedNodesRef.value;
             return tmNodes && tmNodes.length === 0;
         });
-        const styleRef = (0, vue_1.computed)(() => {
-            return [{ width: (0, _utils_1.formatLength)(props.width) }, cssVarsRef.value];
-        });
         function doToggle(tmNode) {
             const { onToggle } = props;
             if (onToggle)
@@ -265,13 +262,23 @@ exports.default = (0, vue_1.defineComponent)({
                 '--n-loading-size': loadingSize
             };
         });
+        const { disableInlineTheme } = props;
+        const themeClassHandle = disableInlineTheme
+            ? (0, _mixins_1.useThemeClass)('internal-select-menu', (0, vue_1.computed)(() => props.size[0]), cssVarsRef, props)
+            : _mixins_1.emptyThemeClassHandle;
+        const styleRef = (0, vue_1.computed)(() => {
+            return [
+                { width: (0, _utils_1.formatLength)(props.width) },
+                disableInlineTheme ? undefined : cssVarsRef.value
+            ];
+        });
         const exposedProps = {
             selfRef,
             next,
             prev,
             getPendingTmNode
         };
-        return Object.assign({ mergedTheme: themeRef, virtualListRef,
+        return Object.assign(Object.assign({ mergedTheme: themeRef, virtualListRef,
             scrollbarRef, style: styleRef, itemSize: itemSizeRef, padding: paddingRef, flattenedNodes: flattenedNodesRef, empty: emptyRef, virtualListContainer() {
                 const { value } = virtualListRef;
                 return value === null || value === void 0 ? void 0 : value.listElRef;
@@ -287,12 +294,14 @@ exports.default = (0, vue_1.defineComponent)({
             handleKeyDown,
             handleMouseDown,
             handleVirtualListResize,
-            handleVirtualListScroll }, exposedProps);
+            handleVirtualListScroll }, exposedProps), themeClassHandle);
     },
     render() {
-        const { $slots, virtualScroll, clsPrefix, mergedTheme } = this;
+        const { $slots, virtualScroll, clsPrefix, mergedTheme, themeClass, onRender } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
         return ((0, vue_1.h)("div", { ref: "selfRef", tabindex: this.focusable ? 0 : -1, class: [
                 `${clsPrefix}-base-select-menu`,
+                themeClass,
                 this.multiple && `${clsPrefix}-base-select-menu--multiple`
             ], style: this.style, onFocusin: this.handleFocusin, onFocusout: this.handleFocusout, onKeyup: this.handleKeyUp, onKeydown: this.handleKeyDown, onMousedown: this.handleMouseDown, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave },
             this.loading ? ((0, vue_1.h)("div", { class: `${clsPrefix}-base-select-menu__loading` },

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

@@ -63,6 +63,7 @@ declare const _default: import("vue").DefineComponent<{
     onPatternBlur: PropType<(e: FocusEvent) => void>;
     renderLabel: PropType<RenderLabel>;
     status: PropType<FormValidationStatus>;
+    disableInlineTheme: BooleanConstructor;
     theme: PropType<import("../../../_mixins").Theme<"InternalSelection", {
         fontSizeTiny: string;
         fontSizeSmall: string;
@@ -84,7 +85,7 @@ declare const _default: import("vue").DefineComponent<{
         borderHover: string;
         borderActive: string;
         borderFocus: string;
-        boxShadowHover: null;
+        boxShadowHover: string;
         boxShadowActive: string;
         boxShadowFocus: string;
         caretColor: string;
@@ -95,7 +96,7 @@ declare const _default: import("vue").DefineComponent<{
         borderHoverWarning: string;
         borderActiveWarning: string;
         borderFocusWarning: string;
-        boxShadowHoverWarning: null;
+        boxShadowHoverWarning: string;
         boxShadowActiveWarning: string;
         boxShadowFocusWarning: string;
         colorActiveWarning: string;
@@ -104,7 +105,7 @@ declare const _default: import("vue").DefineComponent<{
         borderHoverError: string;
         borderActiveError: string;
         borderFocusError: string;
-        boxShadowHoverError: null;
+        boxShadowHoverError: string;
         boxShadowActiveError: string;
         boxShadowFocusError: string;
         colorActiveError: string;
@@ -153,7 +154,7 @@ declare const _default: import("vue").DefineComponent<{
         borderHover: string;
         borderActive: string;
         borderFocus: string;
-        boxShadowHover: null;
+        boxShadowHover: string;
         boxShadowActive: string;
         boxShadowFocus: string;
         caretColor: string;
@@ -164,7 +165,7 @@ declare const _default: import("vue").DefineComponent<{
         borderHoverWarning: string;
         borderActiveWarning: string;
         borderFocusWarning: string;
-        boxShadowHoverWarning: null;
+        boxShadowHoverWarning: string;
         boxShadowActiveWarning: string;
         boxShadowFocusWarning: string;
         colorActiveWarning: string;
@@ -173,7 +174,7 @@ declare const _default: import("vue").DefineComponent<{
         borderHoverError: string;
         borderActiveError: string;
         borderFocusError: string;
-        boxShadowHoverError: null;
+        boxShadowHoverError: string;
         boxShadowActiveError: string;
         boxShadowFocusError: string;
         colorActiveError: string;
@@ -222,7 +223,7 @@ declare const _default: import("vue").DefineComponent<{
         borderHover: string;
         borderActive: string;
         borderFocus: string;
-        boxShadowHover: null;
+        boxShadowHover: string;
         boxShadowActive: string;
         boxShadowFocus: string;
         caretColor: string;
@@ -233,7 +234,7 @@ declare const _default: import("vue").DefineComponent<{
         borderHoverWarning: string;
         borderActiveWarning: string;
         borderFocusWarning: string;
-        boxShadowHoverWarning: null;
+        boxShadowHoverWarning: string;
         boxShadowActiveWarning: string;
         boxShadowFocusWarning: string;
         colorActiveWarning: string;
@@ -242,7 +243,7 @@ declare const _default: import("vue").DefineComponent<{
         borderHoverError: string;
         borderActiveError: string;
         borderFocusError: string;
-        boxShadowHoverError: null;
+        boxShadowHoverError: string;
         boxShadowActiveError: string;
         boxShadowFocusError: string;
         colorActiveError: string;
@@ -271,6 +272,8 @@ declare const _default: import("vue").DefineComponent<{
         }, any>;
     }>>>;
 }, {
+    themeClass?: import("vue").Ref<string> | undefined;
+    onRender?: (() => void) | undefined;
     mergedTheme: import("vue").ComputedRef<{
         common: {
             baseColor: string;
@@ -396,7 +399,7 @@ declare const _default: import("vue").DefineComponent<{
             borderHover: string;
             borderActive: string;
             borderFocus: string;
-            boxShadowHover: null;
+            boxShadowHover: string;
             boxShadowActive: string;
             boxShadowFocus: string;
             caretColor: string;
@@ -407,7 +410,7 @@ declare const _default: import("vue").DefineComponent<{
             borderHoverWarning: string;
             borderActiveWarning: string;
             borderFocusWarning: string;
-            boxShadowHoverWarning: null;
+            boxShadowHoverWarning: string;
             boxShadowActiveWarning: string;
             boxShadowFocusWarning: string;
             colorActiveWarning: string;
@@ -416,7 +419,7 @@ declare const _default: import("vue").DefineComponent<{
             borderHoverError: string;
             borderActiveError: string;
             borderFocusError: string;
-            boxShadowHoverError: null;
+            boxShadowHoverError: string;
             boxShadowActiveError: string;
             boxShadowFocusError: string;
             colorActiveError: string;
@@ -508,7 +511,7 @@ declare const _default: import("vue").DefineComponent<{
         '--n-border-radius': string;
         '--n-box-shadow-active': string;
         '--n-box-shadow-focus': string;
-        '--n-box-shadow-hover': null;
+        '--n-box-shadow-hover': string;
         '--n-caret-color': string;
         '--n-color': string;
         '--n-color-active': string;
@@ -527,7 +530,7 @@ declare const _default: import("vue").DefineComponent<{
         '--n-color-active-warning': string;
         '--n-box-shadow-focus-warning': string;
         '--n-box-shadow-active-warning': string;
-        '--n-box-shadow-hover-warning': null;
+        '--n-box-shadow-hover-warning': string;
         '--n-border-warning': string;
         '--n-border-focus-warning': string;
         '--n-border-hover-warning': string;
@@ -535,7 +538,7 @@ declare const _default: import("vue").DefineComponent<{
         '--n-color-active-error': string;
         '--n-box-shadow-focus-error': string;
         '--n-box-shadow-active-error': string;
-        '--n-box-shadow-hover-error': null;
+        '--n-box-shadow-hover-error': string;
         '--n-border-error': string;
         '--n-border-focus-error': string;
         '--n-border-hover-error': string;
@@ -545,7 +548,7 @@ declare const _default: import("vue").DefineComponent<{
         '--n-clear-color-hover': string;
         '--n-clear-color-pressed': string;
         '--n-arrow-size': string;
-    }>;
+    }> | undefined;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     clsPrefix: {
         type: StringConstructor;
@@ -599,6 +602,7 @@ declare const _default: import("vue").DefineComponent<{
     onPatternBlur: PropType<(e: FocusEvent) => void>;
     renderLabel: PropType<RenderLabel>;
     status: PropType<FormValidationStatus>;
+    disableInlineTheme: BooleanConstructor;
     theme: PropType<import("../../../_mixins").Theme<"InternalSelection", {
         fontSizeTiny: string;
         fontSizeSmall: string;
@@ -620,7 +624,7 @@ declare const _default: import("vue").DefineComponent<{
         borderHover: string;
         borderActive: string;
         borderFocus: string;
-        boxShadowHover: null;
+        boxShadowHover: string;
         boxShadowActive: string;
         boxShadowFocus: string;
         caretColor: string;
@@ -631,7 +635,7 @@ declare const _default: import("vue").DefineComponent<{
         borderHoverWarning: string;
         borderActiveWarning: string;
         borderFocusWarning: string;
-        boxShadowHoverWarning: null;
+        boxShadowHoverWarning: string;
         boxShadowActiveWarning: string;
         boxShadowFocusWarning: string;
         colorActiveWarning: string;
@@ -640,7 +644,7 @@ declare const _default: import("vue").DefineComponent<{
         borderHoverError: string;
         borderActiveError: string;
         borderFocusError: string;
-        boxShadowHoverError: null;
+        boxShadowHoverError: string;
         boxShadowActiveError: string;
         boxShadowFocusError: string;
         colorActiveError: string;
@@ -689,7 +693,7 @@ declare const _default: import("vue").DefineComponent<{
         borderHover: string;
         borderActive: string;
         borderFocus: string;
-        boxShadowHover: null;
+        boxShadowHover: string;
         boxShadowActive: string;
         boxShadowFocus: string;
         caretColor: string;
@@ -700,7 +704,7 @@ declare const _default: import("vue").DefineComponent<{
         borderHoverWarning: string;
         borderActiveWarning: string;
         borderFocusWarning: string;
-        boxShadowHoverWarning: null;
+        boxShadowHoverWarning: string;
         boxShadowActiveWarning: string;
         boxShadowFocusWarning: string;
         colorActiveWarning: string;
@@ -709,7 +713,7 @@ declare const _default: import("vue").DefineComponent<{
         borderHoverError: string;
         borderActiveError: string;
         borderFocusError: string;
-        boxShadowHoverError: null;
+        boxShadowHoverError: string;
         boxShadowActiveError: string;
         boxShadowFocusError: string;
         colorActiveError: string;
@@ -758,7 +762,7 @@ declare const _default: import("vue").DefineComponent<{
         borderHover: string;
         borderActive: string;
         borderFocus: string;
-        boxShadowHover: null;
+        boxShadowHover: string;
         boxShadowActive: string;
         boxShadowFocus: string;
         caretColor: string;
@@ -769,7 +773,7 @@ declare const _default: import("vue").DefineComponent<{
         borderHoverWarning: string;
         borderActiveWarning: string;
         borderFocusWarning: string;
-        boxShadowHoverWarning: null;
+        boxShadowHoverWarning: string;
         boxShadowActiveWarning: string;
         boxShadowFocusWarning: string;
         colorActiveWarning: string;
@@ -778,7 +782,7 @@ declare const _default: import("vue").DefineComponent<{
         borderHoverError: string;
         borderActiveError: string;
         borderFocusError: string;
-        boxShadowHoverError: null;
+        boxShadowHoverError: string;
         boxShadowActiveError: string;
         boxShadowFocusError: string;
         colorActiveError: string;
@@ -813,8 +817,9 @@ declare const _default: import("vue").DefineComponent<{
     active: boolean;
     disabled: boolean;
     autofocus: boolean;
-    bordered: boolean | undefined;
     loading: boolean;
+    bordered: boolean | undefined;
+    disableInlineTheme: 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/lib/_internal/selection/src/Selection.js

@@ -36,7 +36,7 @@ exports.default = (0, vue_1.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, onPatternFocus: Function, onPatternBlur: Function, renderLabel: Function, status: String }),
+        }, 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, disableInlineTheme: Boolean }),
     setup(props) {
         const patternInputMirrorRef = (0, vue_1.ref)(null);
         const patternInputRef = (0, vue_1.ref)(null);
@@ -303,15 +303,76 @@ exports.default = (0, vue_1.defineComponent)({
                     props.disabled || patternInputFocusedRef.value ? -1 : 0;
             });
         });
-        return {
-            mergedTheme: themeRef,
-            mergedClearable: mergedClearableRef,
-            patternInputFocused: patternInputFocusedRef,
-            filterablePlaceholder: filterablePlaceholderRef,
-            label: labelRef,
-            selected: selectedRef,
-            showTagsPanel: showTagsPopoverRef,
-            isCompositing: isCompositingRef,
+        const { disableInlineTheme } = props;
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { size } = props;
+            const { common: { cubicBezierEaseInOut }, self: { borderRadius, color, placeholderColor, textColor, paddingSingle, paddingMultiple, caretColor, colorDisabled, textColorDisabled, placeholderColorDisabled, colorActive, boxShadowFocus, boxShadowActive, boxShadowHover, border, borderFocus, borderHover, borderActive, arrowColor, arrowColorDisabled, loadingColor, 
+            // form warning
+            colorActiveWarning, boxShadowFocusWarning, boxShadowActiveWarning, boxShadowHoverWarning, borderWarning, borderFocusWarning, borderHoverWarning, borderActiveWarning, 
+            // form error
+            colorActiveError, boxShadowFocusError, boxShadowActiveError, boxShadowHoverError, borderError, borderFocusError, borderHoverError, borderActiveError, 
+            // clear
+            clearColor, clearColorHover, clearColorPressed, clearSize, 
+            // arrow
+            arrowSize, [(0, _utils_1.createKey)('height', size)]: height, [(0, _utils_1.createKey)('fontSize', size)]: fontSize } } = themeRef.value;
+            return {
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-border': border,
+                '--n-border-active': borderActive,
+                '--n-border-focus': borderFocus,
+                '--n-border-hover': borderHover,
+                '--n-border-radius': borderRadius,
+                '--n-box-shadow-active': boxShadowActive,
+                '--n-box-shadow-focus': boxShadowFocus,
+                '--n-box-shadow-hover': boxShadowHover,
+                '--n-caret-color': caretColor,
+                '--n-color': color,
+                '--n-color-active': colorActive,
+                '--n-color-disabled': colorDisabled,
+                '--n-font-size': fontSize,
+                '--n-height': height,
+                '--n-padding-single': paddingSingle,
+                '--n-padding-multiple': paddingMultiple,
+                '--n-placeholder-color': placeholderColor,
+                '--n-placeholder-color-disabled': placeholderColorDisabled,
+                '--n-text-color': textColor,
+                '--n-text-color-disabled': textColorDisabled,
+                '--n-arrow-color': arrowColor,
+                '--n-arrow-color-disabled': arrowColorDisabled,
+                '--n-loading-color': loadingColor,
+                // form warning
+                '--n-color-active-warning': colorActiveWarning,
+                '--n-box-shadow-focus-warning': boxShadowFocusWarning,
+                '--n-box-shadow-active-warning': boxShadowActiveWarning,
+                '--n-box-shadow-hover-warning': boxShadowHoverWarning,
+                '--n-border-warning': borderWarning,
+                '--n-border-focus-warning': borderFocusWarning,
+                '--n-border-hover-warning': borderHoverWarning,
+                '--n-border-active-warning': borderActiveWarning,
+                // form error
+                '--n-color-active-error': colorActiveError,
+                '--n-box-shadow-focus-error': boxShadowFocusError,
+                '--n-box-shadow-active-error': boxShadowActiveError,
+                '--n-box-shadow-hover-error': boxShadowHoverError,
+                '--n-border-error': borderError,
+                '--n-border-focus-error': borderFocusError,
+                '--n-border-hover-error': borderHoverError,
+                '--n-border-active-error': borderActiveError,
+                // clear
+                '--n-clear-size': clearSize,
+                '--n-clear-color': clearColor,
+                '--n-clear-color-hover': clearColorHover,
+                '--n-clear-color-pressed': clearColorPressed,
+                // arrow-size
+                '--n-arrow-size': arrowSize
+            };
+        });
+        const themeClassHandle = disableInlineTheme
+            ? (0, _mixins_1.useThemeClass)('internal-selection', (0, vue_1.computed)(() => {
+                return props.size[0];
+            }), cssVarsRef, props)
+            : _mixins_1.emptyThemeClassHandle;
+        return Object.assign({ mergedTheme: themeRef, mergedClearable: mergedClearableRef, patternInputFocused: patternInputFocusedRef, filterablePlaceholder: filterablePlaceholderRef, label: labelRef, selected: selectedRef, showTagsPanel: showTagsPopoverRef, isCompositing: isCompositingRef, 
             // dom ref
             counterRef,
             counterWrapperRef,
@@ -345,75 +406,11 @@ exports.default = (0, vue_1.defineComponent)({
             blurInput,
             updateCounter,
             getCounter,
-            getTail,
-            renderLabel: props.renderLabel,
-            cssVars: (0, vue_1.computed)(() => {
-                const { size } = props;
-                const { common: { cubicBezierEaseInOut }, self: { borderRadius, color, placeholderColor, textColor, paddingSingle, paddingMultiple, caretColor, colorDisabled, textColorDisabled, placeholderColorDisabled, colorActive, boxShadowFocus, boxShadowActive, boxShadowHover, border, borderFocus, borderHover, borderActive, arrowColor, arrowColorDisabled, loadingColor, 
-                // form warning
-                colorActiveWarning, boxShadowFocusWarning, boxShadowActiveWarning, boxShadowHoverWarning, borderWarning, borderFocusWarning, borderHoverWarning, borderActiveWarning, 
-                // form error
-                colorActiveError, boxShadowFocusError, boxShadowActiveError, boxShadowHoverError, borderError, borderFocusError, borderHoverError, borderActiveError, 
-                // clear
-                clearColor, clearColorHover, clearColorPressed, clearSize, 
-                // arrow
-                arrowSize, [(0, _utils_1.createKey)('height', size)]: height, [(0, _utils_1.createKey)('fontSize', size)]: fontSize } } = themeRef.value;
-                return {
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-border': border,
-                    '--n-border-active': borderActive,
-                    '--n-border-focus': borderFocus,
-                    '--n-border-hover': borderHover,
-                    '--n-border-radius': borderRadius,
-                    '--n-box-shadow-active': boxShadowActive,
-                    '--n-box-shadow-focus': boxShadowFocus,
-                    '--n-box-shadow-hover': boxShadowHover,
-                    '--n-caret-color': caretColor,
-                    '--n-color': color,
-                    '--n-color-active': colorActive,
-                    '--n-color-disabled': colorDisabled,
-                    '--n-font-size': fontSize,
-                    '--n-height': height,
-                    '--n-padding-single': paddingSingle,
-                    '--n-padding-multiple': paddingMultiple,
-                    '--n-placeholder-color': placeholderColor,
-                    '--n-placeholder-color-disabled': placeholderColorDisabled,
-                    '--n-text-color': textColor,
-                    '--n-text-color-disabled': textColorDisabled,
-                    '--n-arrow-color': arrowColor,
-                    '--n-arrow-color-disabled': arrowColorDisabled,
-                    '--n-loading-color': loadingColor,
-                    // form warning
-                    '--n-color-active-warning': colorActiveWarning,
-                    '--n-box-shadow-focus-warning': boxShadowFocusWarning,
-                    '--n-box-shadow-active-warning': boxShadowActiveWarning,
-                    '--n-box-shadow-hover-warning': boxShadowHoverWarning,
-                    '--n-border-warning': borderWarning,
-                    '--n-border-focus-warning': borderFocusWarning,
-                    '--n-border-hover-warning': borderHoverWarning,
-                    '--n-border-active-warning': borderActiveWarning,
-                    // form error
-                    '--n-color-active-error': colorActiveError,
-                    '--n-box-shadow-focus-error': boxShadowFocusError,
-                    '--n-box-shadow-active-error': boxShadowActiveError,
-                    '--n-box-shadow-hover-error': boxShadowHoverError,
-                    '--n-border-error': borderError,
-                    '--n-border-focus-error': borderFocusError,
-                    '--n-border-hover-error': borderHoverError,
-                    '--n-border-active-error': borderActiveError,
-                    // clear
-                    '--n-clear-size': clearSize,
-                    '--n-clear-color': clearColor,
-                    '--n-clear-color-hover': clearColorHover,
-                    '--n-clear-color-pressed': clearColorPressed,
-                    // arrow-size
-                    '--n-arrow-size': arrowSize
-                };
-            })
-        };
+            getTail, renderLabel: props.renderLabel, cssVars: disableInlineTheme ? undefined : cssVarsRef }, themeClassHandle);
     },
     render() {
-        const { status, multiple, size, disabled, filterable, maxTagCount, bordered, clsPrefix, renderTag, renderLabel } = this;
+        const { status, multiple, size, disabled, filterable, maxTagCount, bordered, clsPrefix, onRender, renderTag, renderLabel } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
         const maxTagCountResponsive = maxTagCount === 'responsive';
         const maxTagCountNumeric = typeof maxTagCount === 'number';
         const useMaxTagCount = maxTagCountResponsive || maxTagCountNumeric;
@@ -439,14 +436,14 @@ exports.default = (0, vue_1.defineComponent)({
             // May Overflow
             const renderCounter = maxTagCountResponsive
                 ? () => ((0, vue_1.h)("div", { class: `${clsPrefix}-base-selection-tag-wrapper`, ref: "counterWrapperRef" },
-                    (0, vue_1.h)(tag_1.NTag, { ref: "counterRef", onMouseenter: this.handleMouseEnterCounter, onMouseleave: this.handleMouseLeaveCounter, disabled: disabled })))
+                    (0, vue_1.h)(tag_1.NTag, { size: size, ref: "counterRef", onMouseenter: this.handleMouseEnterCounter, onMouseleave: this.handleMouseLeaveCounter, disabled: disabled })))
                 : undefined;
             let counter;
             if (maxTagCountNumeric) {
                 const rest = this.selectedOptions.length - maxTagCount;
                 if (rest > 0) {
                     counter = ((0, vue_1.h)("div", { class: `${clsPrefix}-base-selection-tag-wrapper`, key: "__counter__" },
-                        (0, vue_1.h)(tag_1.NTag, { ref: "counterRef", onMouseenter: this.handleMouseEnterCounter, disabled: disabled }, {
+                        (0, vue_1.h)(tag_1.NTag, { size: size, ref: "counterRef", onMouseenter: this.handleMouseEnterCounter, disabled: disabled }, {
                             default: () => `+${rest}`
                         })));
                 }
@@ -550,6 +547,7 @@ exports.default = (0, vue_1.defineComponent)({
         }
         return ((0, vue_1.h)("div", { ref: "selfRef", class: [
                 `${clsPrefix}-base-selection`,
+                this.themeClass,
                 status && `${clsPrefix}-base-selection--${status}-status`,
                 {
                     [`${clsPrefix}-base-selection--active`]: this.active,

package/lib/_internal/selection/styles/dark.js

@@ -27,19 +27,19 @@ const internalSelectionDark = {
             // default
             textColor: textColor2, textColorDisabled,
             placeholderColor,
-            placeholderColorDisabled, color: inputColor, colorDisabled: inputColorDisabled, colorActive: (0, seemly_1.changeColor)(primaryColor, { alpha: 0.1 }), border: '1px solid #0000', borderHover: `1px solid ${primaryColorHover}`, borderActive: `1px solid ${primaryColor}`, borderFocus: `1px solid ${primaryColorHover}`, boxShadowHover: null, boxShadowActive: `0 0 8px 0 ${(0, seemly_1.changeColor)(primaryColor, {
+            placeholderColorDisabled, color: inputColor, colorDisabled: inputColorDisabled, colorActive: (0, seemly_1.changeColor)(primaryColor, { alpha: 0.1 }), border: '1px solid #0000', borderHover: `1px solid ${primaryColorHover}`, borderActive: `1px solid ${primaryColor}`, borderFocus: `1px solid ${primaryColorHover}`, boxShadowHover: 'none', boxShadowActive: `0 0 8px 0 ${(0, seemly_1.changeColor)(primaryColor, {
                 alpha: 0.4
             })}`, boxShadowFocus: `0 0 8px 0 ${(0, seemly_1.changeColor)(primaryColor, {
                 alpha: 0.4
             })}`, caretColor: primaryColor, arrowColor: iconColor, arrowColorDisabled: iconColorDisabled, loadingColor: primaryColor, 
             // warning
-            borderWarning: `1px solid ${warningColor}`, borderHoverWarning: `1px solid ${warningColorHover}`, borderActiveWarning: `1px solid ${warningColor}`, borderFocusWarning: `1px solid ${warningColorHover}`, boxShadowHoverWarning: null, boxShadowActiveWarning: `0 0 8px 0 ${(0, seemly_1.changeColor)(warningColor, {
+            borderWarning: `1px solid ${warningColor}`, borderHoverWarning: `1px solid ${warningColorHover}`, borderActiveWarning: `1px solid ${warningColor}`, borderFocusWarning: `1px solid ${warningColorHover}`, boxShadowHoverWarning: 'none', boxShadowActiveWarning: `0 0 8px 0 ${(0, seemly_1.changeColor)(warningColor, {
                 alpha: 0.4
             })}`, boxShadowFocusWarning: `0 0 8px 0 ${(0, seemly_1.changeColor)(warningColor, {
                 alpha: 0.4
             })}`, colorActiveWarning: (0, seemly_1.changeColor)(warningColor, { alpha: 0.1 }), caretColorWarning: warningColor, 
             // error
-            borderError: `1px solid ${errorColor}`, borderHoverError: `1px solid ${errorColorHover}`, borderActiveError: `1px solid ${errorColor}`, borderFocusError: `1px solid ${errorColorHover}`, boxShadowHoverError: null, boxShadowActiveError: `0 0 8px 0 ${(0, seemly_1.changeColor)(errorColor, {
+            borderError: `1px solid ${errorColor}`, borderHoverError: `1px solid ${errorColorHover}`, borderActiveError: `1px solid ${errorColor}`, borderFocusError: `1px solid ${errorColorHover}`, boxShadowHoverError: 'none', boxShadowActiveError: `0 0 8px 0 ${(0, seemly_1.changeColor)(errorColor, {
                 alpha: 0.4
             })}`, boxShadowFocusError: `0 0 8px 0 ${(0, seemly_1.changeColor)(errorColor, {
                 alpha: 0.4

package/lib/_internal/selection/styles/light.d.ts

@@ -20,7 +20,7 @@ declare const self: (vars: ThemeCommonVars) => {
     borderHover: string;
     borderActive: string;
     borderFocus: string;
-    boxShadowHover: null;
+    boxShadowHover: string;
     boxShadowActive: string;
     boxShadowFocus: string;
     caretColor: string;
@@ -31,7 +31,7 @@ declare const self: (vars: ThemeCommonVars) => {
     borderHoverWarning: string;
     borderActiveWarning: string;
     borderFocusWarning: string;
-    boxShadowHoverWarning: null;
+    boxShadowHoverWarning: string;
     boxShadowActiveWarning: string;
     boxShadowFocusWarning: string;
     colorActiveWarning: string;
@@ -40,7 +40,7 @@ declare const self: (vars: ThemeCommonVars) => {
     borderHoverError: string;
     borderActiveError: string;
     borderFocusError: string;
-    boxShadowHoverError: null;
+    boxShadowHoverError: string;
     boxShadowActiveError: string;
     boxShadowFocusError: string;
     colorActiveError: string;
@@ -75,7 +75,7 @@ declare const internalSelectionLight: import("../../../_mixins").Theme<"Internal
     borderHover: string;
     borderActive: string;
     borderFocus: string;
-    boxShadowHover: null;
+    boxShadowHover: string;
     boxShadowActive: string;
     boxShadowFocus: string;
     caretColor: string;
@@ -86,7 +86,7 @@ declare const internalSelectionLight: import("../../../_mixins").Theme<"Internal
     borderHoverWarning: string;
     borderActiveWarning: string;
     borderFocusWarning: string;
-    boxShadowHoverWarning: null;
+    boxShadowHoverWarning: string;
     boxShadowActiveWarning: string;
     boxShadowFocusWarning: string;
     colorActiveWarning: string;
@@ -95,7 +95,7 @@ declare const internalSelectionLight: import("../../../_mixins").Theme<"Internal
     borderHoverError: string;
     borderActiveError: string;
     borderFocusError: string;
-    boxShadowHoverError: null;
+    boxShadowHoverError: string;
     boxShadowActiveError: string;
     boxShadowFocusError: string;
     colorActiveError: string;

package/lib/_internal/selection/styles/light.js

@@ -22,19 +22,19 @@ const self = (vars) => {
         // default
         textColor: textColor2, textColorDisabled,
         placeholderColor,
-        placeholderColorDisabled, color: inputColor, colorDisabled: inputColorDisabled, colorActive: inputColor, border: `1px solid ${borderColor}`, borderHover: `1px solid ${primaryColorHover}`, borderActive: `1px solid ${primaryColor}`, borderFocus: `1px solid ${primaryColorHover}`, boxShadowHover: null, boxShadowActive: `0 0 0 2px ${(0, seemly_1.changeColor)(primaryColor, {
+        placeholderColorDisabled, color: inputColor, colorDisabled: inputColorDisabled, colorActive: inputColor, border: `1px solid ${borderColor}`, borderHover: `1px solid ${primaryColorHover}`, borderActive: `1px solid ${primaryColor}`, borderFocus: `1px solid ${primaryColorHover}`, boxShadowHover: 'none', boxShadowActive: `0 0 0 2px ${(0, seemly_1.changeColor)(primaryColor, {
             alpha: 0.2
         })}`, boxShadowFocus: `0 0 0 2px ${(0, seemly_1.changeColor)(primaryColor, {
             alpha: 0.2
         })}`, caretColor: primaryColor, arrowColor: iconColor, arrowColorDisabled: iconColorDisabled, loadingColor: primaryColor, 
         // warning
-        borderWarning: `1px solid ${warningColor}`, borderHoverWarning: `1px solid ${warningColorHover}`, borderActiveWarning: `1px solid ${warningColor}`, borderFocusWarning: `1px solid ${warningColorHover}`, boxShadowHoverWarning: null, boxShadowActiveWarning: `0 0 0 2px ${(0, seemly_1.changeColor)(warningColor, {
+        borderWarning: `1px solid ${warningColor}`, borderHoverWarning: `1px solid ${warningColorHover}`, borderActiveWarning: `1px solid ${warningColor}`, borderFocusWarning: `1px solid ${warningColorHover}`, boxShadowHoverWarning: 'none', boxShadowActiveWarning: `0 0 0 2px ${(0, seemly_1.changeColor)(warningColor, {
             alpha: 0.2
         })}`, boxShadowFocusWarning: `0 0 0 2px ${(0, seemly_1.changeColor)(warningColor, {
             alpha: 0.2
         })}`, colorActiveWarning: inputColor, caretColorWarning: warningColor, 
         // error
-        borderError: `1px solid ${errorColor}`, borderHoverError: `1px solid ${errorColorHover}`, borderActiveError: `1px solid ${errorColor}`, borderFocusError: `1px solid ${errorColorHover}`, boxShadowHoverError: null, boxShadowActiveError: `0 0 0 2px ${(0, seemly_1.changeColor)(errorColor, {
+        borderError: `1px solid ${errorColor}`, borderHoverError: `1px solid ${errorColorHover}`, borderActiveError: `1px solid ${errorColor}`, borderFocusError: `1px solid ${errorColorHover}`, boxShadowHoverError: 'none', boxShadowActiveError: `0 0 0 2px ${(0, seemly_1.changeColor)(errorColor, {
             alpha: 0.2
         })}`, boxShadowFocusError: `0 0 0 2px ${(0, seemly_1.changeColor)(errorColor, {
             alpha: 0.2

package/lib/_mixins/index.d.ts

@@ -6,4 +6,4 @@ export { default as useLocale } from './use-locale';
 export { default as useStyle } from './use-style';
 export { default as useHljs } from './use-hljs';
 export type { Hljs } from './use-hljs';
-export { useCssVarsClass } from './use-css-vars-class';
+export { useThemeClass, emptyThemeClassHandle } from './use-css-vars-class';

package/lib/_mixins/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useCssVarsClass = exports.useHljs = exports.useStyle = exports.useLocale = exports.defaultClsPrefix = exports.useConfig = exports.createTheme = exports.useTheme = exports.useFormItem = void 0;
+exports.emptyThemeClassHandle = exports.useThemeClass = exports.useHljs = exports.useStyle = exports.useLocale = exports.defaultClsPrefix = exports.useConfig = exports.createTheme = exports.useTheme = exports.useFormItem = void 0;
 var use_form_item_1 = require("./use-form-item");
 Object.defineProperty(exports, "useFormItem", { enumerable: true, get: function () { return __importDefault(use_form_item_1).default; } });
 var use_theme_1 = require("./use-theme");
@@ -19,4 +19,5 @@ Object.defineProperty(exports, "useStyle", { enumerable: true, get: function ()
 var use_hljs_1 = require("./use-hljs");
 Object.defineProperty(exports, "useHljs", { enumerable: true, get: function () { return __importDefault(use_hljs_1).default; } });
 var use_css_vars_class_1 = require("./use-css-vars-class");
-Object.defineProperty(exports, "useCssVarsClass", { enumerable: true, get: function () { return use_css_vars_class_1.useCssVarsClass; } });
+Object.defineProperty(exports, "useThemeClass", { enumerable: true, get: function () { return use_css_vars_class_1.useThemeClass; } });
+Object.defineProperty(exports, "emptyThemeClassHandle", { enumerable: true, get: function () { return use_css_vars_class_1.emptyThemeClassHandle; } });

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

@@ -1,4 +1,11 @@
 import { ComputedRef, Ref } from 'vue';
-export declare function useCssVarsClass(componentName: string, hashRef: Ref<string> | undefined, cssVarsRef: ComputedRef<Record<string, string>> | undefined, props: {
+export declare function useThemeClass(componentName: string, hashRef: Ref<string> | undefined, cssVarsRef: ComputedRef<Record<string, string>> | undefined, props: {
     themeOverrides?: unknown;
-}): Ref<string>;
+}): {
+    themeClass: Ref<string>;
+    onRender: () => void;
+};
+export declare const emptyThemeClassHandle: {
+    themeClass?: Ref<string>;
+    onRender?: () => void;
+};