naive-ui 2.25.2 → 2.25.5

package/lib/radio/src/Radio.js

@@ -15,34 +15,43 @@ exports.default = (0, vue_1.defineComponent)({
     setup(props) {
         const radio = (0, use_radio_1.default)(props);
         const themeRef = (0, _mixins_1.useTheme)('Radio', '-radio', radio_cssr_1.default, styles_1.radioLight, props, radio.mergedClsPrefix);
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { mergedSize: { value: size } } = radio;
+            const { common: { cubicBezierEaseInOut }, self: { boxShadow, boxShadowActive, boxShadowDisabled, boxShadowFocus, boxShadowHover, color, colorDisabled, textColor, textColorDisabled, dotColorActive, dotColorDisabled, labelPadding, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)('radioSize', size)]: radioSize } } = themeRef.value;
+            return {
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-box-shadow': boxShadow,
+                '--n-box-shadow-active': boxShadowActive,
+                '--n-box-shadow-disabled': boxShadowDisabled,
+                '--n-box-shadow-focus': boxShadowFocus,
+                '--n-box-shadow-hover': boxShadowHover,
+                '--n-color': color,
+                '--n-color-disabled': colorDisabled,
+                '--n-dot-color-active': dotColorActive,
+                '--n-dot-color-disabled': dotColorDisabled,
+                '--n-font-size': fontSize,
+                '--n-radio-size': radioSize,
+                '--n-text-color': textColor,
+                '--n-text-color-disabled': textColorDisabled,
+                '--n-label-padding': labelPadding
+            };
+        });
+        const { inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('radio', (0, vue_1.computed)(() => radio.mergedSize.value[0]), cssVarsRef, props)
+            : undefined;
         return Object.assign(radio, {
-            cssVars: (0, vue_1.computed)(() => {
-                const { mergedSize: { value: size } } = radio;
-                const { common: { cubicBezierEaseInOut }, self: { boxShadow, boxShadowActive, boxShadowDisabled, boxShadowFocus, boxShadowHover, color, colorDisabled, textColor, textColorDisabled, dotColorActive, dotColorDisabled, labelPadding, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)('radioSize', size)]: radioSize } } = themeRef.value;
-                return {
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-box-shadow': boxShadow,
-                    '--n-box-shadow-active': boxShadowActive,
-                    '--n-box-shadow-disabled': boxShadowDisabled,
-                    '--n-box-shadow-focus': boxShadowFocus,
-                    '--n-box-shadow-hover': boxShadowHover,
-                    '--n-color': color,
-                    '--n-color-disabled': colorDisabled,
-                    '--n-dot-color-active': dotColorActive,
-                    '--n-dot-color-disabled': dotColorDisabled,
-                    '--n-font-size': fontSize,
-                    '--n-radio-size': radioSize,
-                    '--n-text-color': textColor,
-                    '--n-text-color-disabled': textColorDisabled,
-                    '--n-label-padding': labelPadding
-                };
-            })
+            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
         });
     },
     render() {
-        const { $slots, mergedClsPrefix } = this;
+        const { $slots, mergedClsPrefix, onRender } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
         return ((0, vue_1.h)("label", { class: [
                 `${mergedClsPrefix}-radio`,
+                this.themeClass,
                 {
                     [`${mergedClsPrefix}-radio--disabled`]: this.mergedDisabled,
                     [`${mergedClsPrefix}-radio--checked`]: this.renderSafeChecked,

package/lib/radio/src/RadioGroup.d.ts

@@ -268,7 +268,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-button-text-color-active': string;
         '--n-height': string;
         '--n-opacity-disabled': string;
-    }>;
+    }> | undefined;
+    themeClass: import("vue").Ref<string> | undefined;
+    onRender: (() => void) | 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<{
     readonly name: StringConstructor;
     readonly value: PropType<string | number | null>;

package/lib/radio/src/RadioGroup.js

@@ -80,7 +80,7 @@ exports.default = (0, vue_1.defineComponent)({
     setup(props) {
         const selfElRef = (0, vue_1.ref)(null);
         const { mergedSizeRef, mergedDisabledRef, nTriggerFormChange, nTriggerFormInput, nTriggerFormBlur, nTriggerFormFocus } = (0, _mixins_1.useFormItem)(props);
-        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Radio', '-radio-group', radio_group_cssr_1.default, styles_1.radioLight, props, mergedClsPrefixRef);
         const uncontrolledValueRef = (0, vue_1.ref)(props.defaultValue);
         const controlledValueRef = (0, vue_1.toRef)(props, 'value');
@@ -121,39 +121,48 @@ exports.default = (0, vue_1.defineComponent)({
             mergedSizeRef,
             doUpdateValue
         });
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { value: size } = mergedSizeRef;
+            const { common: { cubicBezierEaseInOut }, self: { buttonBorderColor, buttonBorderColorActive, buttonBorderRadius, buttonBoxShadow, buttonBoxShadowFocus, buttonBoxShadowHover, buttonColorActive, buttonTextColor, buttonTextColorActive, buttonTextColorHover, opacityDisabled, [(0, _utils_1.createKey)('buttonHeight', size)]: height, [(0, _utils_1.createKey)('fontSize', size)]: fontSize } } = themeRef.value;
+            return {
+                '--n-font-size': fontSize,
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-button-border-color': buttonBorderColor,
+                '--n-button-border-color-active': buttonBorderColorActive,
+                '--n-button-border-radius': buttonBorderRadius,
+                '--n-button-box-shadow': buttonBoxShadow,
+                '--n-button-box-shadow-focus': buttonBoxShadowFocus,
+                '--n-button-box-shadow-hover': buttonBoxShadowHover,
+                '--n-button-color-active': buttonColorActive,
+                '--n-button-text-color': buttonTextColor,
+                '--n-button-text-color-hover': buttonTextColorHover,
+                '--n-button-text-color-active': buttonTextColorActive,
+                '--n-height': height,
+                '--n-opacity-disabled': opacityDisabled
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('radio-group', (0, vue_1.computed)(() => mergedSizeRef.value[0]), cssVarsRef, props)
+            : undefined;
         return {
             selfElRef,
             mergedClsPrefix: mergedClsPrefixRef,
             mergedValue: mergedValueRef,
             handleFocusout,
             handleFocusin,
-            cssVars: (0, vue_1.computed)(() => {
-                const { value: size } = mergedSizeRef;
-                const { common: { cubicBezierEaseInOut }, self: { buttonBorderColor, buttonBorderColorActive, buttonBorderRadius, buttonBoxShadow, buttonBoxShadowFocus, buttonBoxShadowHover, buttonColorActive, buttonTextColor, buttonTextColorActive, buttonTextColorHover, opacityDisabled, [(0, _utils_1.createKey)('buttonHeight', size)]: height, [(0, _utils_1.createKey)('fontSize', size)]: fontSize } } = themeRef.value;
-                return {
-                    '--n-font-size': fontSize,
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-button-border-color': buttonBorderColor,
-                    '--n-button-border-color-active': buttonBorderColorActive,
-                    '--n-button-border-radius': buttonBorderRadius,
-                    '--n-button-box-shadow': buttonBoxShadow,
-                    '--n-button-box-shadow-focus': buttonBoxShadowFocus,
-                    '--n-button-box-shadow-hover': buttonBoxShadowHover,
-                    '--n-button-color-active': buttonColorActive,
-                    '--n-button-text-color': buttonTextColor,
-                    '--n-button-text-color-hover': buttonTextColorHover,
-                    '--n-button-text-color-active': buttonTextColorActive,
-                    '--n-height': height,
-                    '--n-opacity-disabled': opacityDisabled
-                };
-            })
+            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
         };
     },
     render() {
+        var _a;
         const { mergedValue, mergedClsPrefix, handleFocusin, handleFocusout } = this;
         const { children, isButtonGroup } = mapSlot((0, _utils_1.flatten)((0, _utils_1.getSlot)(this)), mergedValue, mergedClsPrefix);
+        (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
         return ((0, vue_1.h)("div", { onFocusin: handleFocusin, onFocusout: handleFocusout, ref: "selfElRef", class: [
                 `${mergedClsPrefix}-radio-group`,
+                this.themeClass,
                 isButtonGroup && `${mergedClsPrefix}-radio-group--button-group`
             ], style: this.cssVars }, children));
     }

package/lib/rate/src/Rate.d.ts

@@ -94,7 +94,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-item-color': string;
         '--n-item-color-active': string;
         '--n-item-size': string;
-    }>;
+    }> | undefined;
+    themeClass: import("vue").Ref<string> | undefined;
+    onRender: (() => void) | 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<{
     readonly allowHalf: BooleanConstructor;
     readonly count: {

package/lib/rate/src/Rate.js

@@ -25,7 +25,7 @@ exports.default = (0, vue_1.defineComponent)({
     name: 'Rate',
     props: rateProps,
     setup(props) {
-        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Rate', '-rate', index_cssr_1.default, styles_1.rateLight, props, mergedClsPrefixRef);
         const controlledValueRef = (0, vue_1.toRef)(props, 'value');
         const uncontrolledValueRef = (0, vue_1.ref)(props.defaultValue);
@@ -67,6 +67,40 @@ exports.default = (0, vue_1.defineComponent)({
         function handleClick(index, e) {
             doUpdateValue(getDerivedValue(index, e));
         }
+        const mergedSizeRef = (0, vue_1.computed)(() => {
+            const { size } = props;
+            const { self } = themeRef.value;
+            if (typeof size === 'number') {
+                return `${size}px`;
+            }
+            else {
+                return self[(0, _utils_1.createKey)('size', size)];
+            }
+        });
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
+            const { itemColor, itemColorActive } = self;
+            return {
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-item-color': itemColor,
+                '--n-item-color-active': props.color || itemColorActive,
+                '--n-item-size': mergedSizeRef.value
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('rate', (0, vue_1.computed)(() => {
+                const size = mergedSizeRef.value;
+                const { color } = props;
+                let hash = '';
+                if (size) {
+                    hash += size[0];
+                }
+                if (color) {
+                    hash += (0, _utils_1.color2Class)(color);
+                }
+                return hash;
+            }), cssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             mergedValue: (0, vooks_1.useMergedState)(controlledValueRef, uncontrolledValueRef),
@@ -74,33 +108,20 @@ exports.default = (0, vue_1.defineComponent)({
             handleMouseMove,
             handleClick,
             handleMouseLeave,
-            cssVars: (0, vue_1.computed)(() => {
-                const { size } = props;
-                const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
-                const { itemColor, itemColorActive } = self;
-                let mergedSize;
-                if (typeof size === 'number') {
-                    mergedSize = `${size}px`;
-                }
-                else {
-                    mergedSize = self[(0, _utils_1.createKey)('size', size)];
-                }
-                return {
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-item-color': itemColor,
-                    '--n-item-color-active': props.color || itemColorActive,
-                    '--n-item-size': mergedSize
-                };
-            })
+            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
         };
     },
     render() {
-        const { readonly, hoverIndex, mergedValue, mergedClsPrefix, $slots: { default: defaultSlot } } = this;
+        const { readonly, hoverIndex, mergedValue, mergedClsPrefix, onRender, $slots: { default: defaultSlot } } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
         return ((0, vue_1.h)("div", { class: [
                 `${mergedClsPrefix}-rate`,
                 {
                     [`${mergedClsPrefix}-rate--readonly`]: readonly
-                }
+                },
+                this.themeClass
             ], style: this.cssVars, onMouseleave: this.handleMouseLeave }, (0, vue_1.renderList)(this.count, (_, index) => {
             const icon = defaultSlot ? (defaultSlot()) : ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => StarIcon_1.default }));
             const fullStarActive = hoverIndex !== null

package/lib/result/src/Result.d.ts

@@ -191,8 +191,10 @@ declare const _default: import("vue").DefineComponent<{
         '--n-title-font-size': string;
         '--n-title-font-weight': string;
         '--n-title-text-color': string;
-        '--n-icon-color': string | undefined;
-    }>;
+        '--n-icon-color': string;
+    }> | undefined;
+    themeClass: import("vue").Ref<string> | undefined;
+    onRender: (() => void) | 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<{
     size: {
         type: PropType<"small" | "medium" | "large" | "huge">;

package/lib/result/src/Result.js

@@ -35,31 +35,48 @@ exports.default = (0, vue_1.defineComponent)({
     name: 'Result',
     props: resultProps,
     setup(props) {
-        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Result', '-result', index_cssr_1.default, styles_1.resultLight, props, mergedClsPrefixRef);
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { size, status } = props;
+            const { common: { cubicBezierEaseInOut }, self: { textColor, lineHeight, titleTextColor, titleFontWeight, [(0, _utils_1.createKey)('iconColor', status)]: iconColor, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)('titleFontSize', size)]: titleFontSize, [(0, _utils_1.createKey)('iconSize', size)]: iconSize } } = themeRef.value;
+            return {
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-font-size': fontSize,
+                '--n-icon-size': iconSize,
+                '--n-line-height': lineHeight,
+                '--n-text-color': textColor,
+                '--n-title-font-size': titleFontSize,
+                '--n-title-font-weight': titleFontWeight,
+                '--n-title-text-color': titleTextColor,
+                '--n-icon-color': iconColor || ''
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('result', (0, vue_1.computed)(() => {
+                const { size, status } = props;
+                let hash = '';
+                if (size) {
+                    hash += size[0];
+                }
+                if (status) {
+                    hash += status[0];
+                }
+                return hash;
+            }), cssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
-            cssVars: (0, vue_1.computed)(() => {
-                const { size, status } = props;
-                const { common: { cubicBezierEaseInOut }, self: { textColor, lineHeight, titleTextColor, titleFontWeight, [(0, _utils_1.createKey)('iconColor', status)]: iconColor, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)('titleFontSize', size)]: titleFontSize, [(0, _utils_1.createKey)('iconSize', size)]: iconSize } } = themeRef.value;
-                return {
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-font-size': fontSize,
-                    '--n-icon-size': iconSize,
-                    '--n-line-height': lineHeight,
-                    '--n-text-color': textColor,
-                    '--n-title-font-size': titleFontSize,
-                    '--n-title-font-weight': titleFontWeight,
-                    '--n-title-text-color': titleTextColor,
-                    '--n-icon-color': iconColor
-                };
-            })
+            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
         };
     },
     render() {
         var _a;
-        const { status, $slots, mergedClsPrefix } = this;
-        return ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-result`, style: this.cssVars },
+        const { status, $slots, mergedClsPrefix, onRender } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
+        return ((0, vue_1.h)("div", { class: [`${mergedClsPrefix}-result`, this.themeClass], style: this.cssVars },
             (0, vue_1.h)("div", { class: `${mergedClsPrefix}-result-icon` }, ((_a = $slots.icon) === null || _a === void 0 ? void 0 : _a.call($slots)) || ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => iconMap[status] }))),
             (0, vue_1.h)("div", { class: `${mergedClsPrefix}-result-header` },
                 this.title ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-result-header__title` }, this.title)) : null,

package/lib/scrollbar/src/ScrollBar.d.ts

@@ -8,8 +8,10 @@ export interface ScrollTo {
         behavior?: ScrollBehavior;
     }): void;
 }
+export declare type ScrollBy = ScrollTo;
 export interface ScrollbarInst {
     scrollTo: ScrollTo;
+    scrollBy: ScrollBy;
 }
 declare const scrollbarProps: {
     readonly xScrollable: BooleanConstructor;
@@ -45,9 +47,18 @@ declare const Scrollbar: import("vue").DefineComponent<{
     }, any>>>;
 }, {
     scrollbarInstRef: import("vue").Ref<{
-        scrollTo: ScrollTo;
+        containerRef: HTMLElement | null;
+        contentRef: HTMLElement | null;
+        containerScrollTop: number;
+        syncUnifiedContainer: () => void;
+        scrollTo: import("../../_internal/scrollbar/src/ScrollBar").ScrollTo;
+        scrollBy: import("../../_internal/scrollbar/src/ScrollBar").ScrollBy;
+        sync: () => void;
+        handleMouseEnterWrapper: () => void;
+        handleMouseLeaveWrapper: () => void;
     } | null>;
     scrollTo: ScrollTo;
+    scrollBy: ScrollBy;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     readonly xScrollable: BooleanConstructor;
     readonly onScroll: PropType<(e: Event) => void>;

package/lib/scrollbar/src/ScrollBar.js

@@ -13,6 +13,10 @@ const Scrollbar = (0, vue_1.defineComponent)({
             scrollTo: (...args) => {
                 var _a;
                 (_a = scrollbarInstRef.value) === null || _a === void 0 ? void 0 : _a.scrollTo(args[0], args[1]);
+            },
+            scrollBy: (...args) => {
+                var _a;
+                (_a = scrollbarInstRef.value) === null || _a === void 0 ? void 0 : _a.scrollBy(args[0], args[1]);
             }
         };
         return Object.assign(Object.assign({}, exposedMethods), { scrollbarInstRef });

package/lib/select/src/Select.d.ts

@@ -998,7 +998,7 @@ declare const _default: import("vue").DefineComponent<{
     mergedDisabled: import("vue").ComputedRef<boolean>;
     focused: import("vue").Ref<boolean>;
     activeWithoutMenuOpen: import("vue").Ref<boolean>;
-    disableInlineTheme: boolean | undefined;
+    inlineThemeDisabled: boolean | undefined;
     onTriggerInputFocus: () => void;
     onTriggerInputBlur: () => void;
     handleMenuFocus: (e: FocusEvent) => void;

package/lib/select/src/Select.js

@@ -88,7 +88,7 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             });
         }
-        const { mergedClsPrefixRef, mergedBorderedRef, namespaceRef, NConfigProvider } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, mergedBorderedRef, namespaceRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Select', '-select', index_cssr_1.default, styles_1.selectLight, props, mergedClsPrefixRef);
         const uncontrolledValueRef = (0, vue_1.ref)(props.defaultValue);
         const controlledValueRef = (0, vue_1.toRef)(props, 'value');
@@ -573,7 +573,8 @@ exports.default = (0, vue_1.defineComponent)({
             }
         };
         return Object.assign(Object.assign({}, exposedMethods), { mergedStatus: mergedStatusRef, mergedClsPrefix: mergedClsPrefixRef, mergedBordered: mergedBorderedRef, namespace: namespaceRef, treeMate: treeMateRef, isMounted: (0, vooks_1.useIsMounted)(), triggerRef,
-            menuRef, pattern: patternRef, uncontrolledShow: uncontrolledShowRef, mergedShow: mergedShowRef, adjustedTo: (0, _utils_1.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,
+            menuRef, pattern: patternRef, uncontrolledShow: uncontrolledShowRef, mergedShow: mergedShowRef, adjustedTo: (0, _utils_1.useAdjustedTo)(props), uncontrolledValue: uncontrolledValueRef, mergedValue: mergedValueRef, followerRef, localizedPlaceholder: localizedPlaceholderRef, selectedOption: selectedOptionRef, selectedOptions: selectedOptionsRef, mergedSize: mergedSizeRef, mergedDisabled: mergedDisabledRef, focused: focusedRef, activeWithoutMenuOpen: activeWithoutMenuOpenRef, inlineThemeDisabled,
+            onTriggerInputFocus,
             onTriggerInputBlur,
             handleMenuFocus,
             handleMenuBlur,
@@ -598,7 +599,7 @@ exports.default = (0, vue_1.defineComponent)({
             (0, vue_1.h)(vueuc_1.VBinder, null, {
                 default: () => [
                     (0, vue_1.h)(vueuc_1.VTarget, null, {
-                        default: () => ((0, vue_1.h)(_internal_1.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 }, {
+                        default: () => ((0, vue_1.h)(_internal_1.NInternalSelection, { ref: "triggerRef", inlineThemeDisabled: this.inlineThemeDisabled, 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)]; }
                         }))
                     }),
@@ -608,7 +609,7 @@ exports.default = (0, vue_1.defineComponent)({
                                 var _a, _b;
                                 return (this.mergedShow ||
                                     this.displayDirective === 'show') &&
-                                    (0, vue_1.withDirectives)((0, vue_1.h)(_internal_1.NInternalSelectMenu, Object.assign({}, this.menuProps, { ref: "menuRef", disableInlineTheme: this.disableInlineTheme, virtualScroll: this.consistentMenuWidth && this.virtualScroll, class: [
+                                    (0, vue_1.withDirectives)((0, vue_1.h)(_internal_1.NInternalSelectMenu, Object.assign({}, this.menuProps, { ref: "menuRef", inlineThemeDisabled: this.inlineThemeDisabled, 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

package/lib/spin/src/Spin.d.ts

@@ -120,7 +120,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-size': string;
         '--n-color': string;
         '--n-text-color': string;
-    }>;
+    }> | undefined;
+    themeClass: import("vue").Ref<string> | undefined;
+    onRender: (() => void) | 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<{
     description: StringConstructor;
     stroke: StringConstructor;

package/lib/spin/src/Spin.js

@@ -43,8 +43,29 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             });
         }
-        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Spin', '-spin', index_cssr_1.default, styles_1.spinLight, props, mergedClsPrefixRef);
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { size: spinSize } = props;
+            const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
+            const { opacitySpinning, color, textColor } = self;
+            const size = typeof spinSize === 'number'
+                ? (0, seemly_1.pxfy)(spinSize)
+                : self[(0, _utils_1.createKey)('size', spinSize)];
+            return {
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-opacity-spinning': opacitySpinning,
+                '--n-size': size,
+                '--n-color': color,
+                '--n-text-color': textColor
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('spin', (0, vue_1.computed)(() => {
+                const { size } = props;
+                return typeof size === 'number' ? String(size) : size[0];
+            }), cssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             compitableShow: (0, vooks_1.useCompitable)(props, ['spinning', 'show']),
@@ -55,37 +76,26 @@ exports.default = (0, vue_1.defineComponent)({
                 const { size } = props;
                 return STROKE_WIDTH[typeof size === 'number' ? 'medium' : size];
             }),
-            cssVars: (0, vue_1.computed)(() => {
-                const { size: spinSize } = props;
-                const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
-                const { opacitySpinning, color, textColor } = self;
-                const size = typeof spinSize === 'number'
-                    ? (0, seemly_1.pxfy)(spinSize)
-                    : self[(0, _utils_1.createKey)('size', spinSize)];
-                return {
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-opacity-spinning': opacitySpinning,
-                    '--n-size': size,
-                    '--n-color': color,
-                    '--n-text-color': textColor
-                };
-            })
+            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
         };
     },
     render() {
-        var _a;
+        var _a, _b;
         const { $slots, mergedClsPrefix, description } = this;
         const rotate = $slots.icon && this.rotate;
         const descriptionNode = (description || $slots.description) && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-spin-description` }, description || ((_a = $slots.description) === null || _a === void 0 ? void 0 : _a.call($slots))));
-        const icon = $slots.icon ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-spin-body` },
+        const icon = $slots.icon ? ((0, vue_1.h)("div", { class: [`${mergedClsPrefix}-spin-body`, this.themeClass] },
             (0, vue_1.h)("div", { class: [
                     `${mergedClsPrefix}-spin`,
                     rotate && `${mergedClsPrefix}-spin--rotate`
                 ], style: $slots.default ? '' : this.cssVars }, $slots.icon()),
-            descriptionNode)) : ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-spin-body` },
+            descriptionNode)) : ((0, vue_1.h)("div", { class: [`${mergedClsPrefix}-spin-body`, this.themeClass] },
             (0, vue_1.h)(_internal_1.NBaseLoading, { clsPrefix: mergedClsPrefix, style: $slots.default ? '' : this.cssVars, stroke: this.stroke, "stroke-width": this.mergedStrokeWidth, class: `${mergedClsPrefix}-spin` }),
             descriptionNode));
-        return $slots.default ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-spin-container`, style: this.cssVars },
+        (_b = this.onRender) === null || _b === void 0 ? void 0 : _b.call(this);
+        return $slots.default ? ((0, vue_1.h)("div", { class: [`${mergedClsPrefix}-spin-container`, this.themeClass], style: this.cssVars },
             (0, vue_1.h)("div", { class: [
                     `${mergedClsPrefix}-spin-content`,
                     this.compitableShow && `${mergedClsPrefix}-spin-content--spinning`

package/lib/statistic/src/Statistic.d.ts

@@ -74,7 +74,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-value-prefix-text-color': string;
         '--n-value-suffix-text-color': string;
         '--n-value-text-color': string;
-    }>;
+    }> | undefined;
+    themeClass: import("vue").Ref<string> | undefined;
+    onRender: (() => void) | 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<{
     tabularNums: BooleanConstructor;
     label: StringConstructor;

package/lib/statistic/src/Statistic.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const vue_1 = require("vue");
 const _mixins_1 = require("../../_mixins");
+const _utils_1 = require("../../_utils");
 const styles_1 = require("../styles");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 const statisticProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { tabularNums: Boolean, label: String, value: [String, Number] });
@@ -12,35 +13,42 @@ exports.default = (0, vue_1.defineComponent)({
     name: 'Statistic',
     props: statisticProps,
     setup(props) {
-        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Statistic', '-statistic', index_cssr_1.default, styles_1.statisticLight, props, mergedClsPrefixRef);
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { self: { labelFontWeight, valueFontWeight, valuePrefixTextColor, labelTextColor, valueSuffixTextColor, valueTextColor, labelFontSize }, common: { cubicBezierEaseInOut } } = themeRef.value;
+            return {
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-label-font-size': labelFontSize,
+                '--n-label-font-weight': labelFontWeight,
+                '--n-label-text-color': labelTextColor,
+                '--n-value-font-weight': valueFontWeight,
+                '--n-value-prefix-text-color': valuePrefixTextColor,
+                '--n-value-suffix-text-color': valueSuffixTextColor,
+                '--n-value-text-color': valueTextColor
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('statistic', undefined, cssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
-            cssVars: (0, vue_1.computed)(() => {
-                const { self: { labelFontWeight, valueFontWeight, valuePrefixTextColor, labelTextColor, valueSuffixTextColor, valueTextColor, labelFontSize }, common: { cubicBezierEaseInOut } } = themeRef.value;
-                return {
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-label-font-size': labelFontSize,
-                    '--n-label-font-weight': labelFontWeight,
-                    '--n-label-text-color': labelTextColor,
-                    '--n-value-font-weight': valueFontWeight,
-                    '--n-value-prefix-text-color': valuePrefixTextColor,
-                    '--n-value-suffix-text-color': valueSuffixTextColor,
-                    '--n-value-text-color': valueTextColor
-                };
-            })
+            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
         };
     },
     render() {
         var _a;
-        const { $slots, mergedClsPrefix } = this;
-        return ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-statistic`, style: this.cssVars },
-            (0, vue_1.h)("div", { class: `${mergedClsPrefix}-statistic__label` }, this.label || ((_a = $slots.label) === null || _a === void 0 ? void 0 : _a.call($slots))),
+        const { mergedClsPrefix, $slots: { default: defaultSlot, label: labelSlot, prefix: prefixSlot, suffix: suffixSlot } } = this;
+        (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
+        return ((0, vue_1.h)("div", { class: [`${mergedClsPrefix}-statistic`, this.themeClass], style: this.cssVars },
+            (0, _utils_1.resolveWrappedSlot)(labelSlot, (children) => ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-statistic__label` }, this.label || children))),
             (0, vue_1.h)("div", { class: `${mergedClsPrefix}-statistic-value`, style: {
                     fontVariantNumeric: this.tabularNums ? 'tabular-nums' : ''
                 } },
-                $slots.prefix ? ((0, vue_1.h)("span", { class: `${mergedClsPrefix}-statistic-value__prefix` }, $slots.prefix())) : null,
-                this.value !== undefined ? ((0, vue_1.h)("span", { class: `${mergedClsPrefix}-statistic-value__content` }, this.value)) : ((0, vue_1.h)("span", { class: `${mergedClsPrefix}-statistic-value__content` }, $slots)),
-                $slots.suffix ? ((0, vue_1.h)("span", { class: `${mergedClsPrefix}-statistic-value__suffix` }, $slots.suffix())) : null)));
+                (0, _utils_1.resolveWrappedSlot)(prefixSlot, (children) => children && ((0, vue_1.h)("span", { class: `${mergedClsPrefix}-statistic-value__prefix` }, children))),
+                this.value !== undefined ? ((0, vue_1.h)("span", { class: `${mergedClsPrefix}-statistic-value__content` }, this.value)) : ((0, _utils_1.resolveWrappedSlot)(defaultSlot, (children) => children && ((0, vue_1.h)("span", { class: `${mergedClsPrefix}-statistic-value__content` }, children)))),
+                (0, _utils_1.resolveWrappedSlot)(suffixSlot, (children) => children && ((0, vue_1.h)("span", { class: `${mergedClsPrefix}-statistic-value__suffix` }, children))))));
     }
 });

package/lib/styles.d.ts

@@ -65,6 +65,7 @@ export { treeDark } from './tree/styles';
 export { treeSelectDark } from './tree-select/styles';
 export { typographyDark } from './typography/styles';
 export { uploadDark } from './upload/styles';
+export { watermarkDark } from './watermark/styles';
 export { scrollbarDark } from './_internal/scrollbar/styles';
 export { internalSelectMenuDark } from './_internal/select-menu/styles';
 export { internalSelectionDark } from './_internal/selection/styles';