From d302645ca172d807596006cf5bdcc3b1eba2de48 Mon Sep 17 00:00:00 2001
From: hirakei1203 <hirano.keitaro.64x@gmail.com>
Date: Fri, 28 Oct 2022 22:04:59 +0900
Subject: [PATCH] activate useProgressClasses

---
 src/components/Progress/Progress.vue          |  4 +--
 .../composables/useProgressClasses.ts         | 27 ++++++++++++++++---
 src/components/Progress/types.ts              |  3 ++-
 3 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/components/Progress/Progress.vue b/src/components/Progress/Progress.vue
index 48f12ef..3af26b4 100644
--- a/src/components/Progress/Progress.vue
+++ b/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,
diff --git a/src/components/Progress/composables/useProgressClasses.ts b/src/components/Progress/composables/useProgressClasses.ts
index 23d56ad..a77e86c 100644
--- a/src/components/Progress/composables/useProgressClasses.ts
+++ b/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,
+  }
 }
\ No newline at end of file
diff --git a/src/components/Progress/types.ts b/src/components/Progress/types.ts
index 8d5b11a..2b8a944 100644
--- a/src/components/Progress/types.ts
+++ b/src/components/Progress/types.ts
@@ -1 +1,2 @@
-export type progressColor = 'default' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple' | 'pink' | 'blue'
\ No newline at end of file
+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'