add outer label

src/components/Progress/Progress.vue

@@ -1,6 +1,16 @@
 <template>
-  <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>
+  <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>
+      <span v-if="labelProgress && labelPosition === 'outside'" class="text-sm font-medium" :class="outsideLabelClasses">45%</span>
+    </div>
+  </template>
+  <div class="w-full bg-gray-200 rounded-full dark:bg-gray-700" :class="outerClasses">
+    <div class="rounded-full font-medium text-blue-100 text-center p-0.5" :class="innerClasses" style="width: 45%">
+      <template v-if="labelProgress && labelPosition === 'inside'">
+        {{ progress }}%
+      </template>
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
@@ -15,26 +25,26 @@ const props = defineProps({
   },
   label: {
     type: String,
-    default: 'progressbar',
+    default: 'rate',
   },
   labelPosition: {
     type: String, // 'inside' | 'outside' | 'none'
-    default: 'none',
+    default: 'inside',
   },
   labelProgress: {
     type: Boolean,
-    default: false,
+    default: true,
   },
   progress: {
     type: Number,
-    default: 0,
+    default: 55,
   },
   size: {
     type: String, // 'sm' | 'md' | 'lg' | 'xl'
-    default: 'lg',
+    default: 'md',
   },
 })
 
-const { wrapperClasses, outerClass } = useProgressClasses(toRefs(props))
+const { innerClasses, outerClasses, outsideLabelClasses } = useProgressClasses(toRefs(props))
 
 </script>