activate useProgressClasses

src/components/Progress/Progress.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
-    <div class="bg-blue-600 h-2.5 rounded-full" style="width: 45%"></div>
+    <div class="bg-blue-600 h-2.5 rounded-full" :class="wrapperClasses" style="width: 45%"></div>
   </div>
 </template>
 <script lang="ts" setup>
@@ -11,7 +11,7 @@ import { useProgressClasses } from './composables/useProgressClasses'
 const props = defineProps({
   color: {
     type: String, // 'dark' | 'blue' | 'red' | 'green' | 'yellow' | 'indigo' | 'purple'
-    default: 'blue',
+    default: 'yellow',
   },
   label: {
     type: String,

src/components/Progress/composables/useProgressClasses.ts

@@ -1,3 +1,11 @@
+import type { Ref } from 'vue'
+import { computed } from 'vue'
+import classNames from 'classnames'
+import type { ProgressVariant } from '../types'
+
+
+export type ProgressClassMap<T extends string> = { default: Record<T, string> }
+
 const progressColorClasses: ProgressClassMap<ProgressVariant> = {
   default: {
     default: '',
@@ -14,10 +22,23 @@ const progressColorClasses: ProgressClassMap<ProgressVariant> = {
 }
 
 export type UseProgressClassesProps = {
-  color: Ref<progressColor>
+  color: Ref<ProgressVariant>
 }
 
 export function useProgressClasses(props: UseProgressClassesProps): { wrapperClasses: Ref<string>} {
-  let colorClasses = '';
-  colorClasses = progressColorClasses(props.gradient.value as unknown as keyof typeof progressColorClasses.default)
+  
+  const bindClasses = computed(() => {
+    let colorClass = ''
+
+    const color = props.color.value
+    colorClass = progressColorClasses.default[color as unknown as keyof typeof progressColorClasses.default]
+
+    return classNames(
+      colorClass
+    )
+  })
+
+  return {
+    wrapperClasses: bindClasses,
+  }
 }

src/components/Progress/types.ts

@@ -1 +1,2 @@
-export type progressColor = 'default' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple' | 'pink' | 'blue'
+export type progressColor = 'default' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple' | 'pink' | 'blue'
+export type ProgressVariant = 'default' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple' | 'pink' | 'blue'