naive-ui 2.40.0 → 2.40.2

package/lib/popselect/src/PopselectPanel.d.ts

@@ -1,9 +1,9 @@
-import { type PropType } from 'vue';
-import { type TreeNode } from 'treemate';
 import type { NodeProps, RenderLabel } from '../../_internal/select-menu/src/interface';
-import type { OnUpdateValue, SelectBaseOption, SelectGroupOption, SelectIgnoredOption, SelectMixedOption, Value } from '../../select/src/interface';
 import type { MaybeArray } from '../../_utils';
+import type { OnUpdateValue, SelectBaseOption, SelectGroupOption, SelectIgnoredOption, SelectMixedOption, Value } from '../../select/src/interface';
 import type { PopselectSize } from './interface';
+import { type TreeNode } from 'treemate';
+import { type PropType } from 'vue';
 export declare const panelProps: {
     readonly multiple: BooleanConstructor;
     readonly value: {
@@ -33,8 +33,8 @@ export declare const panelProps: {
     readonly virtualScroll: BooleanConstructor;
     readonly onChange: PropType<MaybeArray<OnUpdateValue> | undefined>;
 };
-export declare const panelPropKeys: ("value" | "options" | "size" | "multiple" | "onChange" | "onMouseenter" | "onMouseleave" | "scrollable" | "showCheckmark" | "nodeProps" | "renderLabel" | "virtualScroll" | "cancelable" | "onUpdate:value" | "onUpdateValue")[];
-declare const _default: import("vue").DefineComponent<{
+export declare const panelPropKeys: ("value" | "options" | "size" | "multiple" | "onChange" | "onMouseenter" | "onMouseleave" | "scrollable" | "nodeProps" | "renderLabel" | "showCheckmark" | "virtualScroll" | "onUpdate:value" | "onUpdateValue" | "cancelable")[];
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     readonly multiple: BooleanConstructor;
     readonly value: {
         readonly type: PropType<Value | null>;
@@ -62,7 +62,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly nodeProps: PropType<NodeProps>;
     readonly virtualScroll: BooleanConstructor;
     readonly onChange: PropType<MaybeArray<OnUpdateValue> | undefined>;
-}, {
+}>, {
     mergedTheme: import("vue").Ref<{
         common: import("../..").ThemeCommonVars;
         self: {
@@ -189,17 +189,143 @@ declare const _default: import("vue").DefineComponent<{
                 } | undefined;
             } | undefined;
         };
+    }, {
+        common: import("../..").ThemeCommonVars;
+        self: {
+            menuBoxShadow: string;
+        };
+        peers: {
+            Popover: import("../../_mixins").Theme<"Popover", {
+                fontSize: string;
+                borderRadius: string;
+                color: string;
+                dividerColor: string;
+                textColor: string;
+                boxShadow: string;
+                space: string;
+                spaceArrow: string;
+                arrowOffset: string;
+                arrowOffsetVertical: string;
+                arrowHeight: string;
+                padding: string;
+            }, any>;
+            InternalSelectMenu: import("../../_mixins").Theme<"InternalSelectMenu", {
+                optionFontSizeTiny: string;
+                optionFontSizeSmall: string;
+                optionFontSizeMedium: string;
+                optionFontSizeLarge: string;
+                optionFontSizeHuge: string;
+                optionHeightTiny: string;
+                optionHeightSmall: string;
+                optionHeightMedium: string;
+                optionHeightLarge: string;
+                optionHeightHuge: string;
+                borderRadius: string;
+                color: string;
+                groupHeaderTextColor: string;
+                actionDividerColor: string;
+                optionTextColor: string;
+                optionTextColorPressed: string;
+                optionTextColorDisabled: string;
+                optionTextColorActive: string;
+                optionOpacityDisabled: string;
+                optionCheckColor: string;
+                optionColorPending: string;
+                optionColorActive: string;
+                optionColorActivePending: string;
+                actionTextColor: string;
+                loadingColor: string;
+                height: string;
+                paddingTiny: string;
+                paddingSmall: string;
+                paddingMedium: string;
+                paddingLarge: string;
+                paddingHuge: string;
+                optionPaddingTiny: string;
+                optionPaddingSmall: string;
+                optionPaddingMedium: string;
+                optionPaddingLarge: string;
+                optionPaddingHuge: string;
+                loadingSize: string;
+            }, {
+                Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                    height: string;
+                    width: string;
+                    borderRadius: string;
+                    color: string;
+                    colorHover: string;
+                    railInsetHorizontalBottom: string;
+                    railInsetHorizontalTop: string;
+                    railInsetVerticalRight: string;
+                    railInsetVerticalLeft: string;
+                    railColor: string;
+                }, any>;
+                Empty: import("../../_mixins").Theme<"Empty", {
+                    fontSizeTiny: string;
+                    fontSizeSmall: string;
+                    fontSizeMedium: string;
+                    fontSizeLarge: string;
+                    fontSizeHuge: string;
+                    textColor: string;
+                    iconColor: string;
+                    extraTextColor: string;
+                    iconSizeTiny: string;
+                    iconSizeSmall: string;
+                    iconSizeMedium: string;
+                    iconSizeLarge: string;
+                    iconSizeHuge: string;
+                }, any>;
+            }>;
+        };
+        peerOverrides: {
+            Popover?: {
+                peers?: {
+                    [x: string]: any;
+                } | undefined;
+            } | undefined;
+            InternalSelectMenu?: {
+                peers?: {
+                    Scrollbar?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Scrollbar", {
+                        height: string;
+                        width: string;
+                        borderRadius: string;
+                        color: string;
+                        colorHover: string;
+                        railInsetHorizontalBottom: string;
+                        railInsetHorizontalTop: string;
+                        railInsetVerticalRight: string;
+                        railInsetVerticalLeft: string;
+                        railColor: string;
+                    }, any>> | undefined;
+                    Empty?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Empty", {
+                        fontSizeTiny: string;
+                        fontSizeSmall: string;
+                        fontSizeMedium: string;
+                        fontSizeLarge: string;
+                        fontSizeHuge: string;
+                        textColor: string;
+                        iconColor: string;
+                        extraTextColor: string;
+                        iconSizeTiny: string;
+                        iconSizeSmall: string;
+                        iconSizeMedium: string;
+                        iconSizeLarge: string;
+                        iconSizeHuge: string;
+                    }, any>> | undefined;
+                } | undefined;
+            } | undefined;
+        };
     }>;
-    mergedClsPrefix: import("vue").Ref<string>;
+    mergedClsPrefix: import("vue").Ref<string, string>;
     treeMate: import("vue").ComputedRef<import("treemate").TreeMate<SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)>, SelectGroupOption, SelectIgnoredOption>>;
     handleToggle: (tmNode: TreeNode<SelectBaseOption>) => void;
     handleMenuMousedown: (e: MouseEvent) => void;
     cssVars: import("vue").ComputedRef<{
         '--n-menu-box-shadow': string;
     }> | undefined;
-    themeClass: import("vue").Ref<string> | undefined;
+    themeClass: import("vue").Ref<string, string> | undefined;
     onRender: (() => void) | undefined;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     readonly multiple: BooleanConstructor;
     readonly value: {
         readonly type: PropType<Value | null>;
@@ -227,7 +353,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly nodeProps: PropType<NodeProps>;
     readonly virtualScroll: BooleanConstructor;
     readonly onChange: PropType<MaybeArray<OnUpdateValue> | undefined>;
-}>>, {
+}>> & Readonly<{}>, {
     readonly value: Value | null;
     readonly options: SelectMixedOption[];
     readonly size: PopselectSize;
@@ -236,5 +362,5 @@ declare const _default: import("vue").DefineComponent<{
     readonly showCheckmark: boolean;
     readonly virtualScroll: boolean;
     readonly cancelable: boolean;
-}, {}>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/lib/popselect/src/PopselectPanel.js

@@ -4,13 +4,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.panelPropKeys = exports.panelProps = void 0;
-const vue_1 = require("vue");
-const treemate_1 = require("treemate");
 const seemly_1 = require("seemly");
-const utils_1 = require("../../select/src/utils");
-const _mixins_1 = require("../../_mixins");
+const treemate_1 = require("treemate");
+const vue_1 = require("vue");
 const _internal_1 = require("../../_internal");
+const _mixins_1 = require("../../_mixins");
 const _utils_1 = require("../../_utils");
+const utils_1 = require("../../select/src/utils");
 const styles_1 = require("../styles");
 const interface_1 = require("./interface");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));

package/lib/popselect/src/interface.d.ts

@@ -1,6 +1,6 @@
 import type { Ref } from 'vue';
-import type { PopoverInst } from '../../popover/src/interface';
 import type { MergedTheme } from '../../_mixins';
+import type { PopoverInst } from '../../popover/src/interface';
 import type { PopselectTheme } from '../styles';
 import type { PopselectSetupProps } from './Popselect';
 export type PopselectSize = 'small' | 'medium' | 'large' | 'huge';

package/lib/popselect/styles/dark.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const styles_1 = require("../../_internal/select-menu/styles");
-const styles_2 = require("../../popover/styles");
 const common_1 = require("../../_styles/common");
+const styles_2 = require("../../popover/styles");
 const popselect = {
     name: 'Popselect',
     common: common_1.commonDark,

package/lib/popselect/styles/light.js

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.self = self;
 const styles_1 = require("../../_internal/select-menu/styles");
+const _mixins_1 = require("../../_mixins");
 const common_1 = require("../../_styles/common");
 const styles_2 = require("../../popover/styles");
-const _mixins_1 = require("../../_mixins");
 function self(vars) {
     const { boxShadow2 } = vars;
     return {

package/lib/progress/index.d.ts

@@ -1,2 +1,3 @@
 export { default as NProgress, progressProps } from './src/Progress';
 export type { ProgressProps } from './src/Progress';
+export type * from './src/public-types';

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

@@ -1,19 +1,19 @@
+import type { ProgressGradient, ProgressStatus } from './public-types';
 import { type CSSProperties, type PropType } from 'vue';
-import type { Status } from './interface';
-declare const _default: import("vue").DefineComponent<{
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     clsPrefix: {
         type: StringConstructor;
         required: true;
     };
     status: {
-        type: PropType<Status>;
+        type: PropType<ProgressStatus>;
         required: true;
     };
     strokeWidth: {
         type: NumberConstructor;
         required: true;
     };
-    fillColor: StringConstructor;
+    fillColor: PropType<string | ProgressGradient>;
     railColor: StringConstructor;
     railStyle: PropType<string | CSSProperties>;
     percentage: {
@@ -42,20 +42,20 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, () => JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     clsPrefix: {
         type: StringConstructor;
         required: true;
     };
     status: {
-        type: PropType<Status>;
+        type: PropType<ProgressStatus>;
         required: true;
     };
     strokeWidth: {
         type: NumberConstructor;
         required: true;
     };
-    fillColor: StringConstructor;
+    fillColor: PropType<string | ProgressGradient>;
     railColor: StringConstructor;
     railStyle: PropType<string | CSSProperties>;
     percentage: {
@@ -84,9 +84,9 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
-}>>, {
+}>> & Readonly<{}>, {
     percentage: number;
     offsetDegree: number;
     gapOffsetDegree: number;
-}, {}>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/lib/progress/src/Circle.js

@@ -24,7 +24,7 @@ exports.default = (0, vue_1.defineComponent)({
             type: Number,
             required: true
         },
-        fillColor: String,
+        fillColor: [String, Object],
         railColor: String,
         railStyle: [String, Object],
         percentage: {
@@ -55,7 +55,7 @@ exports.default = (0, vue_1.defineComponent)({
         }
     },
     setup(props, { slots }) {
-        function getPathStyles(percent, offsetDegree, strokeColor) {
+        function getPathStyles(percent, offsetDegree, strokeColor, type) {
             const { gapDegree, viewBoxWidth, strokeWidth } = props;
             const radius = 50;
             const beginPositionX = 0;
@@ -68,7 +68,11 @@ exports.default = (0, vue_1.defineComponent)({
       a ${radius},${radius} 0 1 1 ${-endPositionX},${endPositionY}`;
             const len = Math.PI * 2 * radius;
             const pathStyle = {
-                stroke: strokeColor,
+                stroke: type === 'rail'
+                    ? strokeColor
+                    : typeof props.fillColor === 'object'
+                        ? 'url(#gradient)'
+                        : strokeColor,
                 strokeDasharray: `${(percent / 100) * (len - gapDegree)}px ${viewBoxWidth * 8}px`,
                 strokeDashoffset: `-${gapDegree / 2}px`,
                 transformOrigin: offsetDegree ? 'center' : undefined,
@@ -79,10 +83,19 @@ exports.default = (0, vue_1.defineComponent)({
                 pathStyle
             };
         }
+        const createGradientNode = () => {
+            const isGradient = typeof props.fillColor === 'object';
+            const from = isGradient ? props.fillColor.stops[0] : '';
+            const to = isGradient ? props.fillColor.stops[1] : '';
+            return (isGradient && ((0, vue_1.h)("defs", null,
+                (0, vue_1.h)("linearGradient", { id: "gradient", x1: "0%", y1: "100%", x2: "100%", y2: "0%" },
+                    (0, vue_1.h)("stop", { offset: "0%", "stop-color": from }),
+                    (0, vue_1.h)("stop", { offset: "100%", "stop-color": to })))));
+        };
         return () => {
             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);
+            const { pathString: railPathString, pathStyle: railPathStyle } = getPathStyles(100, 0, railColor, 'rail');
+            const { pathString: fillPathString, pathStyle: fillPathStyle } = getPathStyles(percentage, offsetDegree, fillColor, 'fill');
             const viewBoxSize = 100 + strokeWidth;
             return ((0, vue_1.h)("div", { class: `${clsPrefix}-progress-content`, role: "none" },
                 (0, vue_1.h)("div", { class: `${clsPrefix}-progress-graph`, "aria-hidden": true },
@@ -92,6 +105,7 @@ exports.default = (0, vue_1.defineComponent)({
                                 : undefined
                         } },
                         (0, vue_1.h)("svg", { viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}` },
+                            createGradientNode(),
                             (0, vue_1.h)("g", null,
                                 (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,

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

@@ -1,6 +1,6 @@
+import type { ProgressGradient, ProgressStatus } from './public-types';
 import { type CSSProperties, type PropType } from 'vue';
-import type { Status } from './interface';
-declare const _default: import("vue").DefineComponent<{
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     clsPrefix: {
         type: StringConstructor;
         required: true;
@@ -11,9 +11,9 @@ declare const _default: import("vue").DefineComponent<{
     };
     railColor: StringConstructor;
     railStyle: PropType<string | CSSProperties>;
-    fillColor: StringConstructor;
+    fillColor: PropType<string | ProgressGradient>;
     status: {
-        type: PropType<Status>;
+        type: PropType<ProgressStatus>;
         required: true;
     };
     indicatorPlacement: {
@@ -36,7 +36,7 @@ declare const _default: import("vue").DefineComponent<{
     height: (StringConstructor | NumberConstructor)[];
     railBorderRadius: (StringConstructor | NumberConstructor)[];
     fillBorderRadius: (StringConstructor | NumberConstructor)[];
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, () => JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     clsPrefix: {
         type: StringConstructor;
         required: true;
@@ -47,9 +47,9 @@ declare const _default: import("vue").DefineComponent<{
     };
     railColor: StringConstructor;
     railStyle: PropType<string | CSSProperties>;
-    fillColor: StringConstructor;
+    fillColor: PropType<string | ProgressGradient>;
     status: {
-        type: PropType<Status>;
+        type: PropType<ProgressStatus>;
         required: true;
     };
     indicatorPlacement: {
@@ -72,8 +72,8 @@ declare const _default: import("vue").DefineComponent<{
     height: (StringConstructor | NumberConstructor)[];
     railBorderRadius: (StringConstructor | NumberConstructor)[];
     fillBorderRadius: (StringConstructor | NumberConstructor)[];
-}>>, {
+}>> & Readonly<{}>, {
     unit: string;
     percentage: number;
-}, {}>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/lib/progress/src/Line.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const vue_1 = require("vue");
-const _utils_1 = require("../../_utils");
 const _internal_1 = require("../../_internal");
 const icons_1 = require("../../_internal/icons");
+const _utils_1 = require("../../_utils");
 const iconMap = {
     success: (0, vue_1.h)(icons_1.SuccessIcon, null),
     error: (0, vue_1.h)(icons_1.ErrorIcon, null),
@@ -23,7 +23,7 @@ exports.default = (0, vue_1.defineComponent)({
         },
         railColor: String,
         railStyle: [String, Object],
-        fillColor: String,
+        fillColor: [String, Object],
         status: {
             type: String,
             required: true
@@ -53,6 +53,12 @@ exports.default = (0, vue_1.defineComponent)({
         const styleHeightRef = (0, vue_1.computed)(() => {
             return (0, _utils_1.formatLength)(props.height);
         });
+        const styleFillColorRef = (0, vue_1.computed)(() => {
+            var _a, _b;
+            return typeof props.fillColor === 'object'
+                ? `linear-gradient(to right, ${(_a = props.fillColor) === null || _a === void 0 ? void 0 : _a.stops[0]} , ${(_b = props.fillColor) === null || _b === void 0 ? void 0 : _b.stops[1]})`
+                : props.fillColor;
+        });
         const styleRailBorderRadiusRef = (0, vue_1.computed)(() => {
             if (props.railBorderRadius !== undefined) {
                 return (0, _utils_1.formatLength)(props.railBorderRadius);
@@ -75,7 +81,7 @@ exports.default = (0, vue_1.defineComponent)({
             return '';
         });
         return () => {
-            const { indicatorPlacement, railColor, railStyle, percentage, unit, indicatorTextColor, status, showIndicator, fillColor, processing, clsPrefix } = props;
+            const { indicatorPlacement, railColor, railStyle, percentage, unit, indicatorTextColor, status, showIndicator, processing, clsPrefix } = props;
             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: [
@@ -98,7 +104,7 @@ exports.default = (0, vue_1.defineComponent)({
                                         && `${clsPrefix}-progress-graph-line-fill--processing`
                                 ], style: {
                                     maxWidth: `${props.percentage}%`,
-                                    backgroundColor: fillColor,
+                                    background: styleFillColorRef.value,
                                     height: styleHeightRef.value,
                                     lineHeight: styleHeightRef.value,
                                     borderRadius: styleFillBorderRadiusRef.value

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

@@ -1,5 +1,6 @@
+import type { ProgressGradient } from './public-types';
 import { type CSSProperties, type PropType } from 'vue';
-declare const _default: import("vue").DefineComponent<{
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     clsPrefix: {
         type: StringConstructor;
         required: true;
@@ -25,7 +26,7 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
     fillColor: {
-        type: PropType<string[]>;
+        type: PropType<string[] | ProgressGradient[]>;
         default: () => never[];
     };
     railColor: {
@@ -36,7 +37,7 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<Array<string | CSSProperties>>;
         default: () => never[];
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, () => JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     clsPrefix: {
         type: StringConstructor;
         required: true;
@@ -62,7 +63,7 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
     fillColor: {
-        type: PropType<string[]>;
+        type: PropType<string[] | ProgressGradient[]>;
         default: () => never[];
     };
     railColor: {
@@ -73,10 +74,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<Array<string | CSSProperties>>;
         default: () => never[];
     };
-}>>, {
+}>> & Readonly<{}>, {
     railColor: string[];
-    fillColor: string[];
+    fillColor: string[] | ProgressGradient[];
     percentage: number[];
     railStyle: (string | CSSProperties)[];
-}, {}>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/lib/progress/src/MultipleCircle.js

@@ -53,34 +53,48 @@ exports.default = (0, vue_1.defineComponent)({
                 * 2}, ${props.viewBoxWidth * 8}`);
             return strokeDasharrays;
         });
+        const createGradientNode = (p, index) => {
+            const item = props.fillColor[index];
+            const form = typeof item === 'object' ? item.stops[0] : '';
+            const to = typeof item === 'object' ? item.stops[1] : '';
+            return (typeof props.fillColor[index] === 'object' && ((0, vue_1.h)("linearGradient", { id: `gradient-${index}`, x1: "100%", y1: "0%", x2: "0%", y2: "100%" },
+                (0, vue_1.h)("stop", { offset: "0%", "stop-color": form }),
+                (0, vue_1.h)("stop", { offset: "100%", "stop-color": to }))));
+        };
         return () => {
             const { viewBoxWidth, strokeWidth, circleGap, showIndicator, fillColor, railColor, railStyle, percentage, clsPrefix } = props;
             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)("svg", { viewBox: `0 0 ${viewBoxWidth} ${viewBoxWidth}` }, percentage.map((p, index) => {
-                            return ((0, vue_1.h)("g", { key: index },
-                                (0, vue_1.h)("path", { class: `${clsPrefix}-progress-graph-circle-rail`, d: circlePath(viewBoxWidth / 2
-                                        - (strokeWidth / 2) * (1 + 2 * index)
-                                        - circleGap * index, strokeWidth, viewBoxWidth), "stroke-width": strokeWidth, "stroke-linecap": "round", fill: "none", style: [
-                                        {
+                        (0, vue_1.h)("svg", { viewBox: `0 0 ${viewBoxWidth} ${viewBoxWidth}` },
+                            (0, vue_1.h)("defs", null, percentage.map((p, index) => {
+                                return createGradientNode(p, index);
+                            })),
+                            percentage.map((p, index) => {
+                                return ((0, vue_1.h)("g", { key: index },
+                                    (0, vue_1.h)("path", { class: `${clsPrefix}-progress-graph-circle-rail`, d: circlePath(viewBoxWidth / 2
+                                            - (strokeWidth / 2) * (1 + 2 * index)
+                                            - circleGap * index, strokeWidth, viewBoxWidth), "stroke-width": strokeWidth, "stroke-linecap": "round", fill: "none", style: [
+                                            {
+                                                strokeDashoffset: 0,
+                                                stroke: railColor[index]
+                                            },
+                                            railStyle[index]
+                                        ] }),
+                                    (0, vue_1.h)("path", { class: [
+                                            `${clsPrefix}-progress-graph-circle-fill`,
+                                            p === 0
+                                                && `${clsPrefix}-progress-graph-circle-fill--empty`
+                                        ], d: circlePath(viewBoxWidth / 2
+                                            - (strokeWidth / 2) * (1 + 2 * index)
+                                            - circleGap * index, strokeWidth, viewBoxWidth), "stroke-width": strokeWidth, "stroke-linecap": "round", fill: "none", style: {
+                                            strokeDasharray: strokeDasharrayRef.value[index],
                                             strokeDashoffset: 0,
-                                            stroke: railColor[index]
-                                        },
-                                        railStyle[index]
-                                    ] }),
-                                (0, vue_1.h)("path", { class: [
-                                        `${clsPrefix}-progress-graph-circle-fill`,
-                                        p === 0
-                                            && `${clsPrefix}-progress-graph-circle-fill--empty`
-                                    ], d: circlePath(viewBoxWidth / 2
-                                        - (strokeWidth / 2) * (1 + 2 * index)
-                                        - circleGap * index, strokeWidth, viewBoxWidth), "stroke-width": strokeWidth, "stroke-linecap": "round", fill: "none", style: {
-                                        strokeDasharray: strokeDasharrayRef.value[index],
-                                        strokeDashoffset: 0,
-                                        stroke: fillColor[index]
-                                    } })));
-                        })))),
+                                            stroke: typeof fillColor[index] === 'object'
+                                                ? `url(#gradient-${index})`
+                                                : fillColor[index]
+                                        } })));
+                            })))),
                 showIndicator && slots.default ? ((0, vue_1.h)("div", null,
                     (0, vue_1.h)("div", { class: `${clsPrefix}-progress-text` }, slots.default()))) : null));
         };