naive-ui 2.25.1 → 2.25.2

package/lib/pagination/src/Pagination.d.ts

@@ -111,7 +111,7 @@ declare const paginationProps: {
                 borderHover: string;
                 borderActive: string;
                 borderFocus: string;
-                boxShadowHover: null;
+                boxShadowHover: string;
                 boxShadowActive: string;
                 boxShadowFocus: string;
                 caretColor: string;
@@ -122,7 +122,7 @@ declare const paginationProps: {
                 borderHoverWarning: string;
                 borderActiveWarning: string;
                 borderFocusWarning: string;
-                boxShadowHoverWarning: null;
+                boxShadowHoverWarning: string;
                 boxShadowActiveWarning: string;
                 boxShadowFocusWarning: string;
                 colorActiveWarning: string;
@@ -131,7 +131,7 @@ declare const paginationProps: {
                 borderHoverError: string;
                 borderActiveError: string;
                 borderFocusError: string;
-                boxShadowHoverError: null;
+                boxShadowHoverError: string;
                 boxShadowActiveError: string;
                 boxShadowFocusError: string;
                 colorActiveError: string;
@@ -339,7 +339,7 @@ declare const paginationProps: {
                 borderHover: string;
                 borderActive: string;
                 borderFocus: string;
-                boxShadowHover: null;
+                boxShadowHover: string;
                 boxShadowActive: string;
                 boxShadowFocus: string;
                 caretColor: string;
@@ -350,7 +350,7 @@ declare const paginationProps: {
                 borderHoverWarning: string;
                 borderActiveWarning: string;
                 borderFocusWarning: string;
-                boxShadowHoverWarning: null;
+                boxShadowHoverWarning: string;
                 boxShadowActiveWarning: string;
                 boxShadowFocusWarning: string;
                 colorActiveWarning: string;
@@ -359,7 +359,7 @@ declare const paginationProps: {
                 borderHoverError: string;
                 borderActiveError: string;
                 borderFocusError: string;
-                boxShadowHoverError: null;
+                boxShadowHoverError: string;
                 boxShadowActiveError: string;
                 boxShadowFocusError: string;
                 colorActiveError: string;
@@ -567,7 +567,7 @@ declare const paginationProps: {
                 borderHover: string;
                 borderActive: string;
                 borderFocus: string;
-                boxShadowHover: null;
+                boxShadowHover: string;
                 boxShadowActive: string;
                 boxShadowFocus: string;
                 caretColor: string;
@@ -578,7 +578,7 @@ declare const paginationProps: {
                 borderHoverWarning: string;
                 borderActiveWarning: string;
                 borderFocusWarning: string;
-                boxShadowHoverWarning: null;
+                boxShadowHoverWarning: string;
                 boxShadowActiveWarning: string;
                 boxShadowFocusWarning: string;
                 colorActiveWarning: string;
@@ -587,7 +587,7 @@ declare const paginationProps: {
                 borderHoverError: string;
                 borderActiveError: string;
                 borderFocusError: string;
-                boxShadowHoverError: null;
+                boxShadowHoverError: string;
                 boxShadowActiveError: string;
                 boxShadowFocusError: string;
                 colorActiveError: string;
@@ -838,7 +838,7 @@ declare const _default: import("vue").DefineComponent<{
                 borderHover: string;
                 borderActive: string;
                 borderFocus: string;
-                boxShadowHover: null;
+                boxShadowHover: string;
                 boxShadowActive: string;
                 boxShadowFocus: string;
                 caretColor: string;
@@ -849,7 +849,7 @@ declare const _default: import("vue").DefineComponent<{
                 borderHoverWarning: string;
                 borderActiveWarning: string;
                 borderFocusWarning: string;
-                boxShadowHoverWarning: null;
+                boxShadowHoverWarning: string;
                 boxShadowActiveWarning: string;
                 boxShadowFocusWarning: string;
                 colorActiveWarning: string;
@@ -858,7 +858,7 @@ declare const _default: import("vue").DefineComponent<{
                 borderHoverError: string;
                 borderActiveError: string;
                 borderFocusError: string;
-                boxShadowHoverError: null;
+                boxShadowHoverError: string;
                 boxShadowActiveError: string;
                 boxShadowFocusError: string;
                 colorActiveError: string;
@@ -1066,7 +1066,7 @@ declare const _default: import("vue").DefineComponent<{
                 borderHover: string;
                 borderActive: string;
                 borderFocus: string;
-                boxShadowHover: null;
+                boxShadowHover: string;
                 boxShadowActive: string;
                 boxShadowFocus: string;
                 caretColor: string;
@@ -1077,7 +1077,7 @@ declare const _default: import("vue").DefineComponent<{
                 borderHoverWarning: string;
                 borderActiveWarning: string;
                 borderFocusWarning: string;
-                boxShadowHoverWarning: null;
+                boxShadowHoverWarning: string;
                 boxShadowActiveWarning: string;
                 boxShadowFocusWarning: string;
                 colorActiveWarning: string;
@@ -1086,7 +1086,7 @@ declare const _default: import("vue").DefineComponent<{
                 borderHoverError: string;
                 borderActiveError: string;
                 borderFocusError: string;
-                boxShadowHoverError: null;
+                boxShadowHoverError: string;
                 boxShadowActiveError: string;
                 boxShadowFocusError: string;
                 colorActiveError: string;
@@ -1294,7 +1294,7 @@ declare const _default: import("vue").DefineComponent<{
                 borderHover: string;
                 borderActive: string;
                 borderFocus: string;
-                boxShadowHover: null;
+                boxShadowHover: string;
                 boxShadowActive: string;
                 boxShadowFocus: string;
                 caretColor: string;
@@ -1305,7 +1305,7 @@ declare const _default: import("vue").DefineComponent<{
                 borderHoverWarning: string;
                 borderActiveWarning: string;
                 borderFocusWarning: string;
-                boxShadowHoverWarning: null;
+                boxShadowHoverWarning: string;
                 boxShadowActiveWarning: string;
                 boxShadowFocusWarning: string;
                 colorActiveWarning: string;
@@ -1314,7 +1314,7 @@ declare const _default: import("vue").DefineComponent<{
                 borderHoverError: string;
                 borderActiveError: string;
                 borderFocusError: string;
-                boxShadowHoverError: null;
+                boxShadowHoverError: string;
                 boxShadowActiveError: string;
                 boxShadowFocusError: string;
                 colorActiveError: string;
@@ -1655,7 +1655,7 @@ declare const _default: import("vue").DefineComponent<{
                     borderHover: string;
                     borderActive: string;
                     borderFocus: string;
-                    boxShadowHover: null;
+                    boxShadowHover: string;
                     boxShadowActive: string;
                     boxShadowFocus: string;
                     caretColor: string;
@@ -1666,7 +1666,7 @@ declare const _default: import("vue").DefineComponent<{
                     borderHoverWarning: string;
                     borderActiveWarning: string;
                     borderFocusWarning: string;
-                    boxShadowHoverWarning: null;
+                    boxShadowHoverWarning: string;
                     boxShadowActiveWarning: string;
                     boxShadowFocusWarning: string;
                     colorActiveWarning: string;
@@ -1675,7 +1675,7 @@ declare const _default: import("vue").DefineComponent<{
                     borderHoverError: string;
                     borderActiveError: string;
                     borderFocusError: string;
-                    boxShadowHoverError: null;
+                    boxShadowHoverError: string;
                     boxShadowActiveError: string;
                     boxShadowFocusError: string;
                     colorActiveError: string;
@@ -1841,7 +1841,7 @@ declare const _default: import("vue").DefineComponent<{
                         borderHover: string;
                         borderActive: string;
                         borderFocus: string;
-                        boxShadowHover: null;
+                        boxShadowHover: string;
                         boxShadowActive: string;
                         boxShadowFocus: string;
                         caretColor: string;
@@ -1852,7 +1852,7 @@ declare const _default: import("vue").DefineComponent<{
                         borderHoverWarning: string;
                         borderActiveWarning: string;
                         borderFocusWarning: string;
-                        boxShadowHoverWarning: null;
+                        boxShadowHoverWarning: string;
                         boxShadowActiveWarning: string;
                         boxShadowFocusWarning: string;
                         colorActiveWarning: string;
@@ -1861,7 +1861,7 @@ declare const _default: import("vue").DefineComponent<{
                         borderHoverError: string;
                         borderActiveError: string;
                         borderFocusError: string;
-                        boxShadowHoverError: null;
+                        boxShadowHoverError: string;
                         boxShadowActiveError: string;
                         boxShadowFocusError: string;
                         colorActiveError: string;
@@ -2111,7 +2111,7 @@ declare const _default: import("vue").DefineComponent<{
                 borderHover: string;
                 borderActive: string;
                 borderFocus: string;
-                boxShadowHover: null;
+                boxShadowHover: string;
                 boxShadowActive: string;
                 boxShadowFocus: string;
                 caretColor: string;
@@ -2122,7 +2122,7 @@ declare const _default: import("vue").DefineComponent<{
                 borderHoverWarning: string;
                 borderActiveWarning: string;
                 borderFocusWarning: string;
-                boxShadowHoverWarning: null;
+                boxShadowHoverWarning: string;
                 boxShadowActiveWarning: string;
                 boxShadowFocusWarning: string;
                 colorActiveWarning: string;
@@ -2131,7 +2131,7 @@ declare const _default: import("vue").DefineComponent<{
                 borderHoverError: string;
                 borderActiveError: string;
                 borderFocusError: string;
-                boxShadowHoverError: null;
+                boxShadowHoverError: string;
                 boxShadowActiveError: string;
                 boxShadowFocusError: string;
                 colorActiveError: string;
@@ -2339,7 +2339,7 @@ declare const _default: import("vue").DefineComponent<{
                 borderHover: string;
                 borderActive: string;
                 borderFocus: string;
-                boxShadowHover: null;
+                boxShadowHover: string;
                 boxShadowActive: string;
                 boxShadowFocus: string;
                 caretColor: string;
@@ -2350,7 +2350,7 @@ declare const _default: import("vue").DefineComponent<{
                 borderHoverWarning: string;
                 borderActiveWarning: string;
                 borderFocusWarning: string;
-                boxShadowHoverWarning: null;
+                boxShadowHoverWarning: string;
                 boxShadowActiveWarning: string;
                 boxShadowFocusWarning: string;
                 colorActiveWarning: string;
@@ -2359,7 +2359,7 @@ declare const _default: import("vue").DefineComponent<{
                 borderHoverError: string;
                 borderActiveError: string;
                 borderFocusError: string;
-                boxShadowHoverError: null;
+                boxShadowHoverError: string;
                 boxShadowActiveError: string;
                 boxShadowFocusError: string;
                 colorActiveError: string;
@@ -2567,7 +2567,7 @@ declare const _default: import("vue").DefineComponent<{
                 borderHover: string;
                 borderActive: string;
                 borderFocus: string;
-                boxShadowHover: null;
+                boxShadowHover: string;
                 boxShadowActive: string;
                 boxShadowFocus: string;
                 caretColor: string;
@@ -2578,7 +2578,7 @@ declare const _default: import("vue").DefineComponent<{
                 borderHoverWarning: string;
                 borderActiveWarning: string;
                 borderFocusWarning: string;
-                boxShadowHoverWarning: null;
+                boxShadowHoverWarning: string;
                 boxShadowActiveWarning: string;
                 boxShadowFocusWarning: string;
                 colorActiveWarning: string;
@@ -2587,7 +2587,7 @@ declare const _default: import("vue").DefineComponent<{
                 borderHoverError: string;
                 borderActiveError: string;
                 borderFocusError: string;
-                boxShadowHoverError: null;
+                boxShadowHoverError: string;
                 boxShadowActiveError: string;
                 boxShadowFocusError: string;
                 colorActiveError: string;

package/lib/pagination/styles/light.d.ts

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

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

@@ -26,7 +26,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     showIndicator: {
         type: BooleanConstructor;
-        reqiuired: boolean;
+        required: true;
     };
     indicatorTextColor: StringConstructor;
     unit: StringConstructor;
@@ -34,6 +34,14 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         required: true;
     };
+    gapDegree: {
+        type: PropType<number>;
+        required: true;
+    };
+    gapOffsetDegree: {
+        type: NumberConstructor;
+        default: number;
+    };
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     clsPrefix: {
         type: StringConstructor;
@@ -60,7 +68,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     showIndicator: {
         type: BooleanConstructor;
-        reqiuired: boolean;
+        required: true;
     };
     indicatorTextColor: StringConstructor;
     unit: StringConstructor;
@@ -68,9 +76,17 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         required: true;
     };
+    gapDegree: {
+        type: PropType<number>;
+        required: true;
+    };
+    gapOffsetDegree: {
+        type: NumberConstructor;
+        default: number;
+    };
 }>>, {
     percentage: number;
-    showIndicator: boolean;
     offsetDegree: number;
+    gapOffsetDegree: number;
 }>;
 export default _default;

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";
@@ -236,8 +240,11 @@ 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>;
     cssVars: import("vue").ComputedRef<{
         '--n-bezier': string;
         '--n-fill-color': string;
@@ -253,13 +260,15 @@ declare const _default: import("vue").DefineComponent<{
         '--n-text-color-circle': string;
         '--n-text-color-line-inner': string;
         '--n-text-color-line-outer': string;
-    }>;
+    }> | undefined;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     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,54 @@ 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, NConfigProvider } = (0, _mixins_1.useConfig)(props);
+        const disableInlineTheme = NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.disableInlineTheme;
         const themeRef = (0, _mixins_1.useTheme)('Progress', '-progress', index_cssr_1.default, styles_1.progressLight, props, mergedClsPrefixRef);
-        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
-                };
-            })
-        };
+        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 = disableInlineTheme
+            ? (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);
     },
     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;