prepate progress.md

docs/components/progress/examples/ProgressColorExample.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="vp-raw flex flex-col grid gap-4">
+    <Progress label="Default" progress="45"></Progress>
+    <Progress color="dark" label="Dark" progress="45"></Progress>
+    <Progress color="blue" label="Blue" progress="45"></Progress>
+    <Progress color="red" label="Red" progress="45"></Progress>
+    <Progress color="green" label="Green" progress="45"></Progress>
+    <Progress color="yellow" label="Yellow" progress="45"></Progress>
+    <Progress color="indigo" label="Indigo" progress="45"></Progress>
+    <Progress color="purple" label="Purple" progress="45"></Progress>
+  </div>
+</template>
+<script setup>
+import { Progress } from '../../../../src/index'
+</script>

docs/components/progress/examples/ProgressExample.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="vp-raw flex flex-col">
-    <Progress></Progress>
+    <Progress progress="45"></Progress>
   </div>
 </template>
 <script setup>

docs/components/progress/examples/ProgressInsideLabelExample.vue

@@ -0,0 +1,6 @@
+<template>
+  <Progress labelProgress="true" labelPosition="inside" progress="45"></Progress>
+</template>
+<script setup>
+import { Progress } from '../../../../src/index'
+</script>

docs/components/progress/examples/ProgressOutsideLabelExample.vue

@@ -0,0 +1,6 @@
+<template>
+  <Progress labelProgress="true" labelPosition="outside" label="Flowbite Vue 3" progress="45"></Progress>
+</template>
+<script setup>
+import { Progress } from '../../../../src/index'
+</script>

docs/components/progress/examples/ProgressSizeExample.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="flex flex-col grid gap-4">
+    <Progress size="sm" label="Small" progress="45"></Progress>
+    <Progress size="md" label="Medium" progress="45"></Progress>
+    <Progress size="lg" label="Large" progress="45"></Progress>
+    <Progress size="xl" label="Extra Large" progress="45"></Progress>
+  </div>
+</template>
+<script setup>
+import { Progress } from '../../../../src/index'
+</script>

docs/components/progress/progress.md

@@ -1,14 +1,22 @@
 <script setup>
 import ProgressExample from './examples/ProgressExample.vue'
+import ProgressSizeExample from './examples/ProgressSizeExample.vue'
+import ProgressInsideLabelExample from './examples/ProgressInsideLabelExample.vue'
+import ProgressOutsideLabelExample from './examples/ProgressOutsideLabelExample.vue'
+import ProgressColorExample from './examples/ProgressColorExample.vue'
+
+
 </script>
 # Vue Progress Bar Component - Flowbite
 
+## Default
+
 ```vue
 <script setup>
 import { Progress } from 'flowbite-vue'
 </script>
 <template>
-  <Progress></Progress>
+  <Progress progress="45"></Progress>
 </template>
 ```
 
@@ -17,11 +25,78 @@ import { Progress } from 'flowbite-vue'
 ## Sizes
 You can also use different sizes by using various sizing.
 
+```vue
+<script setup>
+import { Progress } from 'flowbite-vue'
+</script>
+<template>
+  <!-- small size -->
+  <Progress size="sm" label="Small" progress="45"></Progress>
+  <!-- medium size -->
+  <Progress size="md" label="Medium" progress="45"></Progress>
+  <!-- large size -->
+  <Progress size="lg" label="Large" progress="45"></Progress>
+  <!-- extra large size -->
+  <Progress size="xl" label="Extra Large" progress="45"></Progress>
+</template>
+```
+
+<ProgressSizeExample />
+
 ## With label inside
 Here is an example of using a progress bar with the label inside the bar.
 
+```vue
+<script setup>
+import { Progress } from 'flowbite-vue'
+</script>
+<template>
+  <Progress labelProgress="true" labelPosition="inside" progress="45"></Progress>
+</template>
+```
+
+<ProgressInsideLabelExample />
+
 ## With label outside
 And this is an example of using a progress bar outside the bar.
 
+```vue
+<script setup>
+import { Progress } from 'flowbite-vue'
+</script>
+<template>
+  <Progress labelProgress="true" labelPosition="outside" label="Flowbite Vue 3" progress="45"></Progress>
+</template>
+```
+
+<ProgressOutsideLabelExample />
+
 ## Colors
 You can also apply color.
+
+```vue
+<script setup>
+import { Progress } from 'flowbite-vue'
+</script>
+<template>
+  <!-- Default color -->
+  <Progress label="Default" progress="45"></Progress>
+  <!-- Dark -->
+  <Progress color="dark" label="Dark" progress="45"></Progress>
+  <!-- Blue -->
+  <Progress color="blue" label="Blue" progress="45"></Progress>
+  <!-- Red -->
+  <Progress color="red" label="Red" progress="45"></Progress>
+  <!-- Green -->
+  <Progress color="green" label="Green" progress="45"></Progress>
+  <!-- Yellow -->
+  <Progress color="yellow" label="Yellow" progress="45"></Progress>
+  <!-- Indigo -->
+  <Progress color="indigo" label="Indigo" progress="45"></Progress>
+  <!-- Purple -->
+  <Progress color="purple" label="Purple" progress="45"></Progress>
+
+</template>
+```
+
+<ProgressColorExample />

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'