fix: change props variable name for completion of progress

src/components/CircularProgressBar.story.md

@@ -16,18 +16,18 @@ 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'.
 
 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).
+### 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.

src/components/CircularProgressBar.story.vue

@@ -23,32 +23,32 @@
     <Variant title="Custom Theme">
       <div class="p-2 w-full h-full">
         <CircularProgressBar
-          :step="3"
-          :totalSteps="4"
+          :step="2"
+          :totalSteps="6"
           :theme="{
             primary: '#2376f5',
             secondary: '#ddd5d5',
           }"
         />
       </div>
     </Variant>
-    <Variant title="Progress Complete Fill Color Inside">
+    <Variant title="Solid Variant">
       <div class="p-2 w-full h-full">
         <CircularProgressBar
           :step="9"
           :totalSteps="9"
           variant="solid"
-          progressCompleteColor="lightgreen"
+          themeComplete="lightgreen"
         />
       </div>
     </Variant>
-    <Variant title="Progress Complete Fill Color Outside">
+    <Variant title="Outline Variant">
       <div class="p-2 w-full h-full">
         <CircularProgressBar
           :step="9"
           :totalSteps="9"
           variant="outline"
-          progressCompleteColor="lightgreen"
+          themeComplete="lightgreen"
         />
       </div>
     </Variant>

src/components/CircularProgressBar.vue

@@ -11,7 +11,7 @@
       <p v-if="!showPercentage">{{ step }}</p>
       <p v-else>{{ progress.toFixed(0) }}%</p>
     </div>
-    <div v-else class="check-icon"></div>
+    <div v-else class="check-icon" />
   </div>
 </template>
 
@@ -25,7 +25,7 @@ interface Props {
   variant?: Variant
   theme?: string | ThemeProps
   size?: Size
-  progressCompleteColor?: string
+  themeComplete?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -34,7 +34,7 @@ const props = withDefaults(defineProps<Props>(), {
   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);