prepate progress.md

src/components/Progress/Progress.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
   <template v-if="label || (labelProgress && labelPosition === 'outside')">
     <div class="flex justify-between mb-1">
       <span v-show="label || (labelProgress && labelPosition === 'outside')" class="text-base font-medium" :class="outsideLabelClasses">{{ label }}</span>
@@ -12,6 +13,7 @@
       </template>
     </div>
   </div>
+</div>
 </template>
 <script lang="ts" setup>
 import { computed, toRefs } from 'vue'
@@ -20,8 +22,8 @@ import { useProgressClasses } from './composables/useProgressClasses'
 
 const props = defineProps({
   color: {
-    type: String, // 'dark' | 'blue' | 'red' | 'green' | 'yellow' | 'indigo' | 'purple'
-    default: 'pink',
+    type: String, // 'default' | 'dark' | 'blue' | 'red' | 'green' | 'yellow' | 'indigo' | 'purple'
+    default: 'default',
   },
   label: {
     type: String,
@@ -33,11 +35,11 @@ const props = defineProps({
   },
   labelProgress: {
     type: Boolean,
-    default: true,
+    default: false,
   },
   progress: {
     type: Number,
-    default: 45,
+    default: 0,
   },
   size: {
     type: String, // 'sm' | 'md' | 'lg' | 'xl'

src/components/Progress/composables/useProgressClasses.ts

@@ -11,28 +11,24 @@ const barColorClasses: Record<ProgressVariant, string> = {
   // default: {
     default: 'bg-blue-600 dark:bg-blue-600',
     blue: 'bg-blue-600 dark:bg-blue-600',
-    alternative: 'dark:bg-gray-800',
     dark: 'bg-gray-600 dark:bg-gray-300',
-    light: 'bg-white dark:bg-gray-800',
     green: 'bg-green-600 dark:bg-green-500',
     red: 'bg-red-600 dark:bg-red-500',
     yellow: 'bg-yellow-400',
+    indigo: 'bg-indigo-600 dark:bg-indigo-500',
     purple: 'bg-purple-600 dark:bg-purple-500',
-    pink: 'bg-pink-700 dark:bg-pink-600',
   // },
 }
 
 const outsideTextColorClasses: Record<ProgressVariant, string> = {
-    default: 'text-blue-700 dark:text-blue-500',
+    default: '',
     blue: 'text-blue-700 dark:text-blue-500',
-    alternative: 'dark:bg-gray-800',
     dark: 'dark:text-white',
-    light: 'text-white dark:text-gray-800',
     green: 'text-green-700 dark:text-green-500',
     red: 'text-red-700 dark:text-red-500',
     yellow: 'text-yellow-700 dark:text-yellow-500',
+    indigo: 'text-indigo-700 dark:text-indigo-500',
     purple: 'text-purple-700 dark:text-purple-500',
-    pink: 'text-pink-700 dark:text-pink-600',
 }
 
 const progressSizeClasses: Record<ProgressSize, string> = {

src/components/Progress/types.ts

@@ -1,3 +1,2 @@
-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 ProgressVariant = 'default' | 'dark' | 'green' | 'red' | 'yellow' | 'purple' | 'blue' | 'indigo'
 export type ProgressSize = 'sm' | 'md' | 'lg' | 'xl'