naive-ui 2.25.2 → 2.25.3

package/lib/pagination/src/Pagination.js

@@ -54,7 +54,7 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             });
         }
-        const { NConfigProvider, mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedComponentPropsRef, mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Pagination', '-pagination', index_cssr_1.default, styles_1.paginationLight, props, mergedClsPrefixRef);
         const { localeRef } = (0, _mixins_1.useLocale)('Pagination');
         const selfRef = (0, vue_1.ref)(null);
@@ -93,12 +93,11 @@ exports.default = (0, vue_1.defineComponent)({
         });
         const inputSizeRef = (0, vue_1.computed)(() => {
             var _a, _b;
-            return (((_b = (_a = NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.Pagination) === null || _b === void 0 ? void 0 : _b.inputSize) ||
-                'small');
+            return ((_b = (_a = mergedComponentPropsRef === null || mergedComponentPropsRef === void 0 ? void 0 : mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.Pagination) === null || _b === void 0 ? void 0 : _b.inputSize) || 'small';
         });
         const selectSizeRef = (0, vue_1.computed)(() => {
             var _a, _b;
-            return (((_b = (_a = NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.Pagination) === null || _b === void 0 ? void 0 : _b.selectSize) || 'small');
+            return ((_b = (_a = mergedComponentPropsRef === null || mergedComponentPropsRef === void 0 ? void 0 : mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.Pagination) === null || _b === void 0 ? void 0 : _b.selectSize) || 'small';
         });
         const startIndexRef = (0, vue_1.computed)(() => {
             return (mergedPageRef.value - 1) * mergedPageSizeRef.value;
@@ -252,6 +251,55 @@ exports.default = (0, vue_1.defineComponent)({
             void mergedPageSizeRef.value;
             disableTransitionOneTick();
         });
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { self: { itemSize, itemPadding, itemMargin, inputWidth, selectWidth, inputMargin, selectMargin, buttonBorder, buttonBorderHover, buttonBorderPressed, buttonIconColor, buttonIconColorHover, buttonIconColorPressed, buttonIconSize, itemTextColor, itemTextColorHover, itemTextColorPressed, itemTextColorActive, itemTextColorDisabled, itemColor, itemColorHover, itemColorPressed, itemColorActive, itemColorActiveHover, itemColorDisabled, itemBorder, itemBorderHover, itemBorderPressed, itemBorderActive, itemBorderDisabled, itemBorderRadius, itemFontSize, jumperFontSize, jumperTextColor, jumperTextColorDisabled, prefixMargin, suffixMargin, buttonColor, buttonColorHover, buttonColorPressed }, common: { cubicBezierEaseInOut } } = themeRef.value;
+            return {
+                '--n-prefix-margin': prefixMargin,
+                '--n-suffix-margin': suffixMargin,
+                '--n-item-font-size': itemFontSize,
+                '--n-select-width': selectWidth,
+                '--n-select-margin': selectMargin,
+                '--n-input-width': inputWidth,
+                '--n-input-margin': inputMargin,
+                '--n-item-size': itemSize,
+                '--n-item-text-color': itemTextColor,
+                '--n-item-text-color-disabled': itemTextColorDisabled,
+                '--n-item-text-color-hover': itemTextColorHover,
+                '--n-item-text-color-active': itemTextColorActive,
+                '--n-item-text-color-pressed': itemTextColorPressed,
+                '--n-item-color': itemColor,
+                '--n-item-color-hover': itemColorHover,
+                '--n-item-color-disabled': itemColorDisabled,
+                '--n-item-color-active': itemColorActive,
+                '--n-item-color-active-hover': itemColorActiveHover,
+                '--n-item-color-pressed': itemColorPressed,
+                '--n-item-border': itemBorder,
+                '--n-item-border-hover': itemBorderHover,
+                '--n-item-border-disabled': itemBorderDisabled,
+                '--n-item-border-active': itemBorderActive,
+                '--n-item-border-pressed': itemBorderPressed,
+                '--n-item-padding': itemPadding,
+                '--n-item-border-radius': itemBorderRadius,
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-jumper-font-size': jumperFontSize,
+                '--n-jumper-text-color': jumperTextColor,
+                '--n-jumper-text-color-disabled': jumperTextColorDisabled,
+                '--n-item-margin': itemMargin,
+                '--n-button-icon-size': buttonIconSize,
+                '--n-button-icon-color': buttonIconColor,
+                '--n-button-icon-color-hover': buttonIconColorHover,
+                '--n-button-icon-color-pressed': buttonIconColorPressed,
+                '--n-button-color-hover': buttonColorHover,
+                '--n-button-color': buttonColor,
+                '--n-button-color-pressed': buttonColorPressed,
+                '--n-button-border': buttonBorder,
+                '--n-button-border-hover': buttonBorderHover,
+                '--n-button-border-pressed': buttonBorderPressed
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('pagination', undefined, cssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             locale: localeRef,
@@ -279,57 +327,15 @@ exports.default = (0, vue_1.defineComponent)({
             handleQuickJumperKeyUp,
             handlePageItemMouseEnter,
             handlePageItemMouseLeave,
-            cssVars: (0, vue_1.computed)(() => {
-                const { self: { itemSize, itemPadding, itemMargin, inputWidth, selectWidth, inputMargin, selectMargin, buttonBorder, buttonBorderHover, buttonBorderPressed, buttonIconColor, buttonIconColorHover, buttonIconColorPressed, buttonIconSize, itemTextColor, itemTextColorHover, itemTextColorPressed, itemTextColorActive, itemTextColorDisabled, itemColor, itemColorHover, itemColorPressed, itemColorActive, itemColorActiveHover, itemColorDisabled, itemBorder, itemBorderHover, itemBorderPressed, itemBorderActive, itemBorderDisabled, itemBorderRadius, itemFontSize, jumperFontSize, jumperTextColor, jumperTextColorDisabled, prefixMargin, suffixMargin, buttonColor, buttonColorHover, buttonColorPressed }, common: { cubicBezierEaseInOut } } = themeRef.value;
-                return {
-                    '--n-prefix-margin': prefixMargin,
-                    '--n-suffix-margin': suffixMargin,
-                    '--n-item-font-size': itemFontSize,
-                    '--n-select-width': selectWidth,
-                    '--n-select-margin': selectMargin,
-                    '--n-input-width': inputWidth,
-                    '--n-input-margin': inputMargin,
-                    '--n-item-size': itemSize,
-                    '--n-item-text-color': itemTextColor,
-                    '--n-item-text-color-disabled': itemTextColorDisabled,
-                    '--n-item-text-color-hover': itemTextColorHover,
-                    '--n-item-text-color-active': itemTextColorActive,
-                    '--n-item-text-color-pressed': itemTextColorPressed,
-                    '--n-item-color': itemColor,
-                    '--n-item-color-hover': itemColorHover,
-                    '--n-item-color-disabled': itemColorDisabled,
-                    '--n-item-color-active': itemColorActive,
-                    '--n-item-color-active-hover': itemColorActiveHover,
-                    '--n-item-color-pressed': itemColorPressed,
-                    '--n-item-border': itemBorder,
-                    '--n-item-border-hover': itemBorderHover,
-                    '--n-item-border-disabled': itemBorderDisabled,
-                    '--n-item-border-active': itemBorderActive,
-                    '--n-item-border-pressed': itemBorderPressed,
-                    '--n-item-padding': itemPadding,
-                    '--n-item-border-radius': itemBorderRadius,
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-jumper-font-size': jumperFontSize,
-                    '--n-jumper-text-color': jumperTextColor,
-                    '--n-jumper-text-color-disabled': jumperTextColorDisabled,
-                    '--n-item-margin': itemMargin,
-                    '--n-button-icon-size': buttonIconSize,
-                    '--n-button-icon-color': buttonIconColor,
-                    '--n-button-icon-color-hover': buttonIconColorHover,
-                    '--n-button-icon-color-pressed': buttonIconColorPressed,
-                    '--n-button-color-hover': buttonColorHover,
-                    '--n-button-color': buttonColor,
-                    '--n-button-color-pressed': buttonColorPressed,
-                    '--n-button-border': buttonBorder,
-                    '--n-button-border-hover': buttonBorderHover,
-                    '--n-button-border-pressed': buttonBorderPressed
-                };
-            })
+            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() {
         // it's ok to expand all prop here since no slots' deps
-        const { $slots, mergedClsPrefix, disabled, cssVars, mergedPage, mergedPageCount, pageItems, showFastBackward, showFastForward, showSizePicker, showQuickJumper, mergedTheme, locale, inputSize, selectSize, mergedPageSize, pageSizeOptions, jumperValue, prev, next, prefix, suffix, label, handleJumperInput, handleSizePickerChange, handleBackwardClick, handlePageItemClick, handlePageItemMouseEnter, handlePageItemMouseLeave, handleForwardClick, handleQuickJumperKeyUp } = this;
+        const { $slots, mergedClsPrefix, disabled, cssVars, mergedPage, mergedPageCount, pageItems, showFastBackward, showFastForward, showSizePicker, showQuickJumper, mergedTheme, locale, inputSize, selectSize, mergedPageSize, pageSizeOptions, jumperValue, prev, next, prefix, suffix, label, handleJumperInput, handleSizePickerChange, handleBackwardClick, handlePageItemClick, handlePageItemMouseEnter, handlePageItemMouseLeave, handleForwardClick, handleQuickJumperKeyUp, onRender } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
         const renderPrefix = $slots.prefix || prefix;
         const renderSuffix = $slots.suffix || suffix;
         const renderPrev = prev || $slots.prev;
@@ -337,6 +343,7 @@ exports.default = (0, vue_1.defineComponent)({
         const renderLabel = label || $slots.label;
         return ((0, vue_1.h)("div", { ref: "selfRef", class: [
                 `${mergedClsPrefix}-pagination`,
+                this.themeClass,
                 disabled && `${mergedClsPrefix}-pagination--disabled`
             ], style: cssVars },
             renderPrefix ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-pagination-prefix` }, renderPrefix({

package/lib/popover/src/PopoverBody.js

@@ -29,7 +29,7 @@ exports.default = (0, vue_1.defineComponent)({
     inheritAttrs: false,
     props: exports.popoverBodyProps,
     setup(props, { slots, attrs }) {
-        const { namespaceRef, mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const { namespaceRef, mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Popover', '-popover', index_cssr_1.default, styles_1.popoverLight, props, mergedClsPrefixRef);
         const followerRef = (0, vue_1.ref)(null);
         const NPopover = (0, vue_1.inject)('NPopover');
@@ -62,7 +62,7 @@ exports.default = (0, vue_1.defineComponent)({
                 },
                 props.maxWidth ? { maxWidth: (0, _utils_1.formatLength)(props.maxWidth) } : {},
                 props.minWidth ? { minWidth: (0, _utils_1.formatLength)(props.minWidth) } : {},
-                cssVarsRef.value
+                inlineThemeDisabled ? undefined : cssVarsRef.value
             ];
         });
         const cssVarsRef = (0, vue_1.computed)(() => {
@@ -85,6 +85,9 @@ exports.default = (0, vue_1.defineComponent)({
                 '--n-space-arrow': spaceArrow
             };
         });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('popover', undefined, cssVarsRef, props)
+            : undefined;
         NPopover.setBodyInstance({
             syncPosition
         });
@@ -137,6 +140,7 @@ exports.default = (0, vue_1.defineComponent)({
         (0, vue_1.provide)(interface_2.drawerBodyInjectionKey, null);
         (0, vue_1.provide)(interface_3.modalBodyInjectionKey, null);
         function renderContentNode() {
+            themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender();
             let contentNode;
             const { internalRenderBodyRef: { value: renderBody } } = NPopover;
             const { value: mergedClsPrefix } = mergedClsPrefixRef;
@@ -146,7 +150,7 @@ exports.default = (0, vue_1.defineComponent)({
                 const renderContentInnerNode = () => {
                     var _a;
                     return [
-                        (0, _utils_1.resolveWrappedSlot)(slots.header, (children) => [
+                        (0, _utils_1.resolveWrappedSlot)(slots.header, (children) => children && [
                             (0, vue_1.h)("div", { class: `${mergedClsPrefix}-popover__header` }, children),
                             (0, vue_1.h)("div", { class: `${mergedClsPrefix}-popover__content` }, slots)
                         ]) || ((_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)),
@@ -161,6 +165,7 @@ exports.default = (0, vue_1.defineComponent)({
                 contentNode = (0, vue_1.h)('div', (0, vue_1.mergeProps)({
                     class: [
                         `${mergedClsPrefix}-popover`,
+                        themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass.value,
                         extraClass.map((v) => `${mergedClsPrefix}-${v}`),
                         {
                             [`${mergedClsPrefix}-popover--overlap`]: props.overlap,
@@ -184,6 +189,7 @@ exports.default = (0, vue_1.defineComponent)({
                 // Shadow class exists for reuse box-shadow.
                 [
                     `${mergedClsPrefix}-popover`,
+                    themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass.value,
                     props.overlap && `${mergedClsPrefix}-popover--overlap`
                 ], bodyRef, styleRef.value, handleMouseEnter, handleMouseLeave);
             }

package/lib/progress/src/Progress.d.ts

@@ -240,8 +240,6 @@ declare const _default: import("vue").DefineComponent<{
         lineBgProcessing: string;
     }, any>>>;
 }, {
-    themeClass?: import("vue").Ref<string> | undefined;
-    onRender?: (() => void) | undefined;
     mergedClsPrefix: import("vue").ComputedRef<string>;
     mergedIndicatorPlacement: import("vue").ComputedRef<"inside" | "outside">;
     gapDeg: import("vue").ComputedRef<number | undefined>;
@@ -261,6 +259,8 @@ declare const _default: import("vue").DefineComponent<{
         '--n-text-color-line-inner': string;
         '--n-text-color-line-outer': 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 processing: BooleanConstructor;
     readonly type: {

package/lib/progress/src/Progress.js

@@ -55,8 +55,7 @@ exports.default = (0, vue_1.defineComponent)({
             }
             return undefined;
         });
-        const { mergedClsPrefixRef, NConfigProvider } = (0, _mixins_1.useConfig)(props);
-        const disableInlineTheme = NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.disableInlineTheme;
+        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Progress', '-progress', index_cssr_1.default, styles_1.progressLight, props, mergedClsPrefixRef);
         const cssVarsRef = (0, vue_1.computed)(() => {
             const { status } = props;
@@ -78,10 +77,17 @@ exports.default = (0, vue_1.defineComponent)({
                 '--n-text-color-line-outer': textColorLineOuter
             };
         });
-        const themeClassHandle = disableInlineTheme
+        const themeClassHandle = inlineThemeDisabled
             ? (0, _mixins_1.useThemeClass)('progress', (0, vue_1.computed)(() => props.status[0]), cssVarsRef, props)
-            : _mixins_1.emptyThemeClassHandle;
-        return Object.assign({ mergedClsPrefix: mergedClsPrefixRef, mergedIndicatorPlacement: mergedIndicatorPlacementRef, gapDeg, cssVars: disableInlineTheme ? undefined : cssVarsRef }, themeClassHandle);
+            : undefined;
+        return {
+            mergedClsPrefix: mergedClsPrefixRef,
+            mergedIndicatorPlacement: mergedIndicatorPlacementRef,
+            gapDeg,
+            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() {
         // it's ok to expand all prop here since no slots' deps

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

@@ -149,7 +149,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-text-color': string;
         '--n-text-color-disabled': string;
         '--n-label-padding': 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<{
     name: StringConstructor;
     value: {

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,