naive-ui 2.25.1 → 2.25.4

package/lib/progress/src/Circle.js

@@ -37,46 +37,65 @@ exports.default = (0, vue_1.defineComponent)({
         },
         showIndicator: {
             type: Boolean,
-            reqiuired: true
+            required: true
         },
         indicatorTextColor: String,
         unit: String,
         viewBoxWidth: {
             type: Number,
             required: true
+        },
+        gapDegree: {
+            type: Number,
+            required: true
+        },
+        gapOffsetDegree: {
+            type: Number,
+            default: 0
         }
     },
     setup(props, { slots }) {
-        const strokeDasharrayRef = (0, vue_1.computed)(() => {
-            return `${Math.PI * props.percentage}, ${props.viewBoxWidth * 8}`;
-        });
-        const strokeDashoffsetRef = (0, vue_1.computed)(() => {
-            return `-${(Math.PI / 3.6) * props.offsetDegree}`;
-        });
+        function getPathStyles(percent, offsetDegree, strokeColor) {
+            const { gapDegree, viewBoxWidth } = props;
+            const radius = 50;
+            const beginPositionX = 0;
+            const beginPositionY = radius;
+            const endPositionX = 0;
+            const endPositionY = 2 * radius;
+            const pathString = `M 55,55 m ${beginPositionX},${beginPositionY}
+      a ${radius},${radius} 0 1 1 ${endPositionX},${-endPositionY}
+      a ${radius},${radius} 0 1 1 ${-endPositionX},${endPositionY}`;
+            const len = Math.PI * 2 * radius;
+            const pathStyle = {
+                stroke: strokeColor,
+                strokeDasharray: `${(percent / 100) * (len - gapDegree)}px ${viewBoxWidth * 8}px`,
+                strokeDashoffset: `-${gapDegree / 2 + (Math.PI / 3.6) * offsetDegree}px`
+            };
+            return {
+                pathString,
+                pathStyle
+            };
+        }
         return () => {
-            const { fillColor, railColor, railStyle, strokeWidth, status, percentage, showIndicator, indicatorTextColor, unit, clsPrefix } = props;
+            const { fillColor, railColor, strokeWidth, offsetDegree, status, percentage, showIndicator, indicatorTextColor, unit, gapOffsetDegree, clsPrefix } = props;
+            const { pathString: railPathString, pathStyle: railPathStyle } = getPathStyles(100, 0, railColor);
+            const { pathString: fillPathString, pathStyle: fillPathStyle } = getPathStyles(percentage, offsetDegree, fillColor);
             return ((0, vue_1.h)("div", { class: `${clsPrefix}-progress-content`, role: "none" },
                 (0, vue_1.h)("div", { class: `${clsPrefix}-progress-graph`, "aria-hidden": true },
-                    (0, vue_1.h)("div", { class: `${clsPrefix}-progress-graph-circle` },
+                    (0, vue_1.h)("div", { class: `${clsPrefix}-progress-graph-circle`, style: {
+                            transform: gapOffsetDegree
+                                ? `rotate(${gapOffsetDegree}deg)`
+                                : undefined
+                        } },
                         (0, vue_1.h)("svg", { viewBox: "0 0 110 110" },
                             (0, vue_1.h)("g", null,
-                                (0, vue_1.h)("path", { class: `${clsPrefix}-progress-graph-circle-rail`, d: "m 55 5 a 50 50 0 1 1 0 100 a 50 50 0 1 1 0 -100", "stroke-width": strokeWidth * 1.1, "stroke-linecap": "round", fill: "none", style: [
-                                        {
-                                            strokeDashoffset: 0,
-                                            stroke: railColor
-                                        },
-                                        railStyle
-                                    ] })),
+                                (0, vue_1.h)("path", { class: `${clsPrefix}-progress-graph-circle-rail`, d: railPathString, "stroke-width": strokeWidth, "stroke-linecap": "round", fill: "none", style: railPathStyle })),
                             (0, vue_1.h)("g", null,
                                 (0, vue_1.h)("path", { class: [
                                         `${clsPrefix}-progress-graph-circle-fill`,
                                         percentage === 0 &&
                                             `${clsPrefix}-progress-graph-circle-fill--empty`
-                                    ], d: "m 55 5 a 50 50 0 1 1 0 100 a 50 50 0 1 1 0 -100", "stroke-width": strokeWidth * 1.1, "stroke-linecap": "round", fill: "none", style: {
-                                        strokeDasharray: strokeDasharrayRef.value,
-                                        strokeDashoffset: strokeDashoffsetRef.value,
-                                        stroke: fillColor
-                                    } }))))),
+                                    ], d: fillPathString, "stroke-width": strokeWidth, "stroke-linecap": "round", fill: "none", style: fillPathStyle }))))),
                 showIndicator ? ((0, vue_1.h)("div", null, slots.default ? ((0, vue_1.h)("div", { class: `${clsPrefix}-progress-custom-content`, role: "none" }, slots.default())) : status !== 'default' ? ((0, vue_1.h)("div", { class: `${clsPrefix}-progress-icon`, "aria-hidden": true },
                     (0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: clsPrefix }, {
                         default: () => iconMap[status]

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

@@ -4,9 +4,11 @@ import { Status } from './interface';
 declare const progressProps: {
     readonly processing: BooleanConstructor;
     readonly type: {
-        readonly type: PropType<"circle" | "line" | "multiple-circle">;
+        readonly type: PropType<"circle" | "line" | "multiple-circle" | "dashboard">;
         readonly default: "line";
     };
+    readonly gapDegree: NumberConstructor;
+    readonly gapOffsetDegree: NumberConstructor;
     readonly status: {
         readonly type: PropType<Status>;
         readonly default: "default";
@@ -122,9 +124,11 @@ export declare type ProgressProps = ExtractPublicPropTypes<typeof progressProps>
 declare const _default: import("vue").DefineComponent<{
     readonly processing: BooleanConstructor;
     readonly type: {
-        readonly type: PropType<"circle" | "line" | "multiple-circle">;
+        readonly type: PropType<"circle" | "line" | "multiple-circle" | "dashboard">;
         readonly default: "line";
     };
+    readonly gapDegree: NumberConstructor;
+    readonly gapOffsetDegree: NumberConstructor;
     readonly status: {
         readonly type: PropType<Status>;
         readonly default: "default";
@@ -238,6 +242,7 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     mergedClsPrefix: import("vue").ComputedRef<string>;
     mergedIndicatorPlacement: import("vue").ComputedRef<"inside" | "outside">;
+    gapDeg: import("vue").ComputedRef<number | undefined>;
     cssVars: import("vue").ComputedRef<{
         '--n-bezier': string;
         '--n-fill-color': string;
@@ -253,13 +258,17 @@ declare const _default: import("vue").DefineComponent<{
         '--n-text-color-circle': string;
         '--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: {
-        readonly type: PropType<"circle" | "line" | "multiple-circle">;
+        readonly type: PropType<"circle" | "line" | "multiple-circle" | "dashboard">;
         readonly default: "line";
     };
+    readonly gapDegree: NumberConstructor;
+    readonly gapOffsetDegree: NumberConstructor;
     readonly status: {
         readonly type: PropType<Status>;
         readonly default: "default";
@@ -371,7 +380,7 @@ declare const _default: import("vue").DefineComponent<{
         lineBgProcessing: string;
     }, any>>>;
 }>>, {
-    type: "circle" | "line" | "multiple-circle";
+    type: "circle" | "line" | "multiple-circle" | "dashboard";
     strokeWidth: number;
     status: Status;
     processing: boolean;

package/lib/progress/src/Progress.js

@@ -14,7 +14,7 @@ const MultipleCircle_1 = __importDefault(require("./MultipleCircle"));
 const progressProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { processing: Boolean, type: {
         type: String,
         default: 'line'
-    }, status: {
+    }, gapDegree: Number, gapOffsetDegree: Number, status: {
         type: String,
         default: 'default'
     }, railColor: [String, Array], railStyle: [String, Array], color: [String, Array], viewBoxWidth: {
@@ -46,40 +46,60 @@ exports.default = (0, vue_1.defineComponent)({
         const mergedIndicatorPlacementRef = (0, vue_1.computed)(() => {
             return props.indicatorPlacement || props.indicatorPosition;
         });
-        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const gapDeg = (0, vue_1.computed)(() => {
+            if (props.gapDegree || props.gapDegree === 0) {
+                return props.gapDegree;
+            }
+            if (props.type === 'dashboard') {
+                return 75;
+            }
+            return undefined;
+        });
+        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;
+            const { common: { cubicBezierEaseInOut }, self: { fontSize, fontSizeCircle, railColor, railHeight, iconSizeCircle, iconSizeLine, textColorCircle, textColorLineInner, textColorLineOuter, lineBgProcessing, fontWeightCircle, [(0, _utils_1.createKey)('iconColor', status)]: iconColor, [(0, _utils_1.createKey)('fillColor', status)]: fillColor } } = themeRef.value;
+            return {
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-fill-color': fillColor,
+                '--n-font-size': fontSize,
+                '--n-font-size-circle': fontSizeCircle,
+                '--n-font-weight-circle': fontWeightCircle,
+                '--n-icon-color': iconColor,
+                '--n-icon-size-circle': iconSizeCircle,
+                '--n-icon-size-line': iconSizeLine,
+                '--n-line-bg-processing': lineBgProcessing,
+                '--n-rail-color': railColor,
+                '--n-rail-height': railHeight,
+                '--n-text-color-circle': textColorCircle,
+                '--n-text-color-line-inner': textColorLineInner,
+                '--n-text-color-line-outer': textColorLineOuter
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('progress', (0, vue_1.computed)(() => props.status[0]), cssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             mergedIndicatorPlacement: mergedIndicatorPlacementRef,
-            cssVars: (0, vue_1.computed)(() => {
-                const { status } = props;
-                const { common: { cubicBezierEaseInOut }, self: { fontSize, fontSizeCircle, railColor, railHeight, iconSizeCircle, iconSizeLine, textColorCircle, textColorLineInner, textColorLineOuter, lineBgProcessing, fontWeightCircle, [(0, _utils_1.createKey)('iconColor', status)]: iconColor, [(0, _utils_1.createKey)('fillColor', status)]: fillColor } } = themeRef.value;
-                return {
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-fill-color': fillColor,
-                    '--n-font-size': fontSize,
-                    '--n-font-size-circle': fontSizeCircle,
-                    '--n-font-weight-circle': fontWeightCircle,
-                    '--n-icon-color': iconColor,
-                    '--n-icon-size-circle': iconSizeCircle,
-                    '--n-icon-size-line': iconSizeLine,
-                    '--n-line-bg-processing': lineBgProcessing,
-                    '--n-rail-color': railColor,
-                    '--n-rail-height': railHeight,
-                    '--n-text-color-circle': textColorCircle,
-                    '--n-text-color-line-inner': textColorLineInner,
-                    '--n-text-color-line-outer': textColorLineOuter
-                };
-            })
+            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
-        const { type, cssVars, indicatorTextColor, showIndicator, status, railColor, railStyle, color, percentage, viewBoxWidth, strokeWidth, mergedIndicatorPlacement, unit, borderRadius, fillBorderRadius, height, processing, circleGap, mergedClsPrefix, $slots } = this;
+        const { type, cssVars, indicatorTextColor, showIndicator, status, railColor, railStyle, color, percentage, viewBoxWidth, strokeWidth, mergedIndicatorPlacement, unit, borderRadius, fillBorderRadius, height, processing, circleGap, mergedClsPrefix, gapDeg, gapOffsetDegree, themeClass, $slots, onRender } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
         return ((0, vue_1.h)("div", { class: [
+                themeClass,
                 `${mergedClsPrefix}-progress`,
                 `${mergedClsPrefix}-progress--${type}`,
                 `${mergedClsPrefix}-progress--${status}`
-            ], style: cssVars, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": percentage, role: type === 'circle' || type === 'line' ? 'progressbar' : 'none' }, type === 'circle' ? ((0, vue_1.h)(Circle_1.default, { clsPrefix: mergedClsPrefix, status: status, showIndicator: showIndicator, indicatorTextColor: indicatorTextColor, railColor: railColor, fillColor: color, railStyle: railStyle, offsetDegree: this.offsetDegree, percentage: percentage, viewBoxWidth: viewBoxWidth, strokeWidth: strokeWidth, unit: unit }, $slots)) : type === 'line' ? ((0, vue_1.h)(Line_1.default, { clsPrefix: mergedClsPrefix, status: status, showIndicator: showIndicator, indicatorTextColor: indicatorTextColor, railColor: railColor, fillColor: color, railStyle: railStyle, percentage: percentage, processing: processing, indicatorPlacement: mergedIndicatorPlacement, unit: unit, fillBorderRadius: fillBorderRadius, railBorderRadius: borderRadius, height: height }, $slots)) : type === 'multiple-circle' ? ((0, vue_1.h)(MultipleCircle_1.default, { clsPrefix: mergedClsPrefix, strokeWidth: strokeWidth, railColor: railColor, fillColor: color, railStyle: railStyle, viewBoxWidth: viewBoxWidth, percentage: percentage, showIndicator: showIndicator, circleGap: circleGap }, $slots)) : null));
+            ], style: cssVars, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": percentage, role: type === 'circle' || type === 'line' || type === 'dashboard'
+                ? 'progressbar'
+                : 'none' }, type === 'circle' || type === 'dashboard' ? ((0, vue_1.h)(Circle_1.default, { clsPrefix: mergedClsPrefix, status: status, showIndicator: showIndicator, indicatorTextColor: indicatorTextColor, railColor: railColor, fillColor: color, railStyle: railStyle, offsetDegree: this.offsetDegree, percentage: percentage, viewBoxWidth: viewBoxWidth, strokeWidth: strokeWidth, gapDegree: gapDeg === undefined ? (type === 'dashboard' ? 75 : 0) : gapDeg, gapOffsetDegree: gapOffsetDegree, unit: unit }, $slots)) : type === 'line' ? ((0, vue_1.h)(Line_1.default, { clsPrefix: mergedClsPrefix, status: status, showIndicator: showIndicator, indicatorTextColor: indicatorTextColor, railColor: railColor, fillColor: color, railStyle: railStyle, percentage: percentage, processing: processing, indicatorPlacement: mergedIndicatorPlacement, unit: unit, fillBorderRadius: fillBorderRadius, railBorderRadius: borderRadius, height: height }, $slots)) : type === 'multiple-circle' ? ((0, vue_1.h)(MultipleCircle_1.default, { clsPrefix: mergedClsPrefix, strokeWidth: strokeWidth, railColor: railColor, fillColor: color, railStyle: railStyle, viewBoxWidth: viewBoxWidth, percentage: percentage, showIndicator: showIndicator, circleGap: circleGap }, $slots)) : null));
     }
 });

package/lib/progress/src/styles/index.cssr.js

@@ -49,7 +49,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('progress', {
  font-size: var(--n-font-size);
  padding-left: 4px;
  transition: color .3s var(--n-bezier);
- `)])]), (0, cssr_1.cM)('circle', {
+ `)])]), (0, cssr_1.cM)('circle, dashboard', {
   width: '120px'
 }, [(0, cssr_1.cB)('progress-custom-content', `
  position: absolute;

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

@@ -6,7 +6,7 @@ declare const resultProps: {
         default: string;
     };
     status: {
-        type: PropType<"500" | "success" | "error" | "warning" | "info" | "404" | "403" | "418">;
+        type: PropType<"500" | "error" | "info" | "success" | "warning" | "404" | "403" | "418">;
         default: string;
     };
     title: StringConstructor;
@@ -97,7 +97,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
     status: {
-        type: PropType<"500" | "success" | "error" | "warning" | "info" | "404" | "403" | "418">;
+        type: PropType<"500" | "error" | "info" | "success" | "warning" | "404" | "403" | "418">;
         default: string;
     };
     title: StringConstructor;
@@ -191,15 +191,17 @@ 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">;
         default: string;
     };
     status: {
-        type: PropType<"500" | "success" | "error" | "warning" | "info" | "404" | "403" | "418">;
+        type: PropType<"500" | "error" | "info" | "success" | "warning" | "404" | "403" | "418">;
         default: string;
     };
     title: StringConstructor;
@@ -284,6 +286,6 @@ declare const _default: import("vue").DefineComponent<{
     }, any>>>;
 }>>, {
     size: "small" | "medium" | "large" | "huge";
-    status: "500" | "success" | "error" | "warning" | "info" | "404" | "403" | "418";
+    status: "500" | "error" | "info" | "success" | "warning" | "404" | "403" | "418";
 }>;
 export default _default;