diff --git a/src/components/CircularProgressBar.story.md b/src/components/CircularProgressBar.story.md index 7edf8dba..6f2b6cdf 100644 --- a/src/components/CircularProgressBar.story.md +++ b/src/components/CircularProgressBar.story.md @@ -16,12 +16,6 @@ If true, the percentage of the progress will be shown in the center of the circl The size of the progress bar. Default value is 'md'. Available options are 'xs', 'sm', 'md', 'lg', 'xl'. -### variant -The variant of the progress bar. Default value is 'solid'. -Available options are 'solid', 'outline'. - -When the variant is 'solid', the progress bar will be filled with the progress color. When the variant is 'outline', the progress bar will be an outline with the progress color. - ### theme The theme of the progress bar. Default value is 'black'. Available options are 'black', 'red', 'green', 'blue', 'orange'. @@ -29,5 +23,11 @@ Available options are 'black', 'red', 'green', 'blue', 'orange'. If a string is passed, the predefined theme will be used, and if the color does not match any predefined theme, the default theme will be used. If a custom theme is needed, an object with primary and secondary colors can be passed. -### progressCompleteColor -The color of the completed progress. Default value is #76f7be (light green). \ No newline at end of file +### themeComplete +The color of the completed progress. Default value is #76f7be (light green). + +### variant +The variant of the progress bar. Default value is 'solid'. +Available options are 'solid', 'outline'. + +When the variant is 'solid', the progress bar on complete will be filled with the progress color. When the variant is 'outline', the progress bar on complete will be an outline with the progress color. \ No newline at end of file diff --git a/src/components/CircularProgressBar.story.vue b/src/components/CircularProgressBar.story.vue index 3822863a..66390b13 100644 --- a/src/components/CircularProgressBar.story.vue +++ b/src/components/CircularProgressBar.story.vue @@ -23,8 +23,8 @@
+
- +
diff --git a/src/components/CircularProgressBar.vue b/src/components/CircularProgressBar.vue index 7f107e5c..8560da91 100644 --- a/src/components/CircularProgressBar.vue +++ b/src/components/CircularProgressBar.vue @@ -11,7 +11,7 @@

{{ step }}

{{ progress.toFixed(0) }}%

-
+
@@ -25,7 +25,7 @@ interface Props { variant?: Variant theme?: string | ThemeProps size?: Size - progressCompleteColor?: string + themeComplete?: string } const props = withDefaults(defineProps(), { @@ -34,7 +34,7 @@ const props = withDefaults(defineProps(), { showPercentage: false, theme: 'black', size: 'md', - progressCompleteColor: '#76f7be', + themeComplete: 'lightgreen', variant: 'solid', }) @@ -125,7 +125,7 @@ const isCompleted = computed(() => props.step === props.totalSteps) --font-size: v-bind(size.innerTextFontSize); --color-progress: v-bind(theme.primary); --color-remaining-circle: v-bind(theme.secondary); - --color-complete: v-bind($props.progressCompleteColor); + --color-complete: v-bind($props.themeComplete); --progress: v-bind(progress + '%'); width: var(--size);