add size logic

src/components/Button/composables/useButtonClasses.ts

@@ -122,7 +122,6 @@ const buttonOutlineGradientClasses: ButtonClassMap<ButtonDuotoneGradient> = {
   },
 }
 
-
 const buttonSizeClasses: Record<ButtonSize, string> = {
   xs: 'text-xs px-2 py-1',
   sm: 'text-sm px-3 py-1.5',

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="h-2.5 rounded-full" :class="wrapperClasses" style="width: 45%"></div>
+  <div class="w-full bg-gray-200 rounded-full dark:bg-gray-700" :class="outerClass">
+    <div class="rounded-full" :class="wrapperClasses" style="width: 45%"></div>
   </div>
 </template>
 <script lang="ts" setup>
@@ -31,10 +31,10 @@ const props = defineProps({
   },
   size: {
     type: String, // 'sm' | 'md' | 'lg' | 'xl'
-    default: 'md',
+    default: 'lg',
   },
 })
 
-const { wrapperClasses } = useProgressClasses(toRefs(props))
+const { wrapperClasses, outerClass } = useProgressClasses(toRefs(props))
 
 </script>

src/components/Progress/composables/useProgressClasses.ts

@@ -1,13 +1,14 @@
 import type { Ref } from 'vue'
 import { computed } from 'vue'
 import classNames from 'classnames'
-import type { ProgressVariant } from '../types'
+import type { ProgressVariant, ProgressSize } from '../types'
 
 
-export type ProgressClassMap<T extends string> = { default: Record<T, string> }
+// export type ProgressClassMap<T extends string> = { default: Record<T, string> }
 
-const progressColorClasses: ProgressClassMap<ProgressVariant> = {
-  default: {
+const progressColorClasses: Record<ProgressVariant, string> = {
+  // const progressColorClasses: ProgressClassMap<ProgressVariant> = {
+  // default: {
     default: 'bg-blue-600 dark:bg-blue-600',
     blue: 'bg-blue-600 dark:bg-blue-600',
     alternative: 'dark:bg-gray-800',
@@ -18,27 +19,47 @@ const progressColorClasses: ProgressClassMap<ProgressVariant> = {
     yellow: 'bg-yellow-400',
     purple: 'bg-purple-600 dark:bg-purple-500',
     pink: 'bg-pink-700 dark:bg-pink-600',
-  },
+  // },
+}
+
+const progressSizeClasses: Record<ProgressSize, string> = {
+  sm: 'text-sm h-1.5',
+  md: 'text-sm h-2.5',
+  lg: 'text-base h-4',
+  xl: 'text-base h-6',
 }
 
 export type UseProgressClassesProps = {
   color: Ref<ProgressVariant>
+  size: Ref<ProgressSize>
 }
 
-export function useProgressClasses(props: UseProgressClassesProps): { wrapperClasses: Ref<string>} {
+export function useProgressClasses(props: UseProgressClassesProps): { wrapperClasses: Ref<string>, outerClass: Ref<string>} {
   
   const bindClasses = computed(() => {
     let colorClass = ''
+    colorClass = progressColorClasses[props.color.value]
 
-    const color = props.color.value
-    colorClass = progressColorClasses.default[color as unknown as keyof typeof progressColorClasses.default]
+    let sizeClass = ''
+    sizeClass = progressSizeClasses[props.size.value]
 
     return classNames(
-      colorClass
+      colorClass,
+      sizeClass
     )
   })
 
+  const outerClass = computed(() => {
+    let outerSizeClass = ''
+    outerSizeClass = progressSizeClasses[props.size.value]
+    return classNames(
+      outerSizeClass
+    )
+  })
+
+  
   return {
     wrapperClasses: bindClasses,
+    outerClass
   }
 }

src/components/Progress/types.ts

@@ -1,2 +1,3 @@
 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'
+export type ProgressSize = 'sm' | 'md' | 'lg' | 'xl'