From 11490b1e9a95f03d707a65c0ce15755aefce988d Mon Sep 17 00:00:00 2001
From: hirakei1203 <hirano.keitaro.64x@gmail.com>
Date: Fri, 28 Oct 2022 23:23:51 +0900
Subject: [PATCH] prepare initial progress.md

---
 docs/components/progress/progress.md | 12 ++++++++++++
 src/components/Progress/Progress.vue | 12 +++++++-----
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/docs/components/progress/progress.md b/docs/components/progress/progress.md
index 3ab4a7a..5518699 100644
--- a/docs/components/progress/progress.md
+++ b/docs/components/progress/progress.md
@@ -13,3 +13,15 @@ import { Progress } from 'flowbite-vue'
 ```
 
 <ProgressExample />
+
+## Sizes
+You can also use different sizes by using various sizing.
+
+## With label inside
+Here is an example of using a progress bar with the label inside the bar.
+
+## With label outside
+And this is an example of using a progress bar outside the bar.
+
+## Colors
+You can also apply color.
diff --git a/src/components/Progress/Progress.vue b/src/components/Progress/Progress.vue
index 5f9be68..7eabc4c 100644
--- a/src/components/Progress/Progress.vue
+++ b/src/components/Progress/Progress.vue
@@ -2,11 +2,11 @@
   <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>
+      <span v-if="labelProgress && labelPosition === 'outside'" class="text-sm font-medium" :class="outsideLabelClasses">{{ progress }}%</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%">
+    <div class="rounded-full font-medium text-blue-100 text-center p-0.5" :class="innerClasses" :style="{ width: progress + '%' }">
       <template v-if="labelProgress && labelPosition === 'inside'">
         {{ progress }}%
       </template>
@@ -25,7 +25,7 @@ const props = defineProps({
   },
   label: {
     type: String,
-    default: 'rate',
+    default: '',
   },
   labelPosition: {
     type: String, // 'inside' | 'outside' | 'none'
@@ -37,14 +37,16 @@ const props = defineProps({
   },
   progress: {
     type: Number,
-    default: 55,
+    default: 45,
   },
   size: {
     type: String, // 'sm' | 'md' | 'lg' | 'xl'
-    default: 'md',
+    default: 'lg',
   },
 })
 
+const widthStyle = computed(() => "width:" + props.progress + "%")
+
 const { innerClasses, outerClasses, outsideLabelClasses } = useProgressClasses(toRefs(props))
 
 </script>