Merge pull request #96 from hirakei1203/add/khirano/add_new_progress_component

Add progress bar component (Issue #68)

docs/.vitepress/config.ts

@@ -42,6 +42,7 @@ function getComponents() {
     { text: 'Button Group', link: '/components/buttonGroup/buttonGroup.md' },
     { text: 'Card', link: 'components/card/card.md' },
     { text: 'Dropdown', link: '/components/dropdown/dropdown.md' },
+    { text: 'Progress', link: 'components/progress/progress.md' },
     { text: 'Spinner', link: '/components/spinner/spinner.md' },
     { text: 'Tabs', link: '/components/tabs/tabs.md' },
     { text: 'ListGroup', link: 'components/listGroup/listGroup.md' },
@@ -53,7 +54,6 @@ function getComponents() {
     { text: '- Carousel', link: 'components/carousel/carousel.md' },
     { text: '- Footer', link: 'components/footer/footer.md' },
     { text: '- Pagination', link: 'components/pagination/pagination.md' },
-    { text: '- Progress', link: 'components/progress/progress.md' },
     { text: '- Rating', link: 'components/rating/rating.md' },
     { text: '- Sidebar', link: 'components/sidebar/sidebar.md' },
     { text: '- Table', link: 'components/table/table.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" size="lg" progress="45"></Progress>
+</template>
+<script setup>
+import { Progress } from 'flowbite-vue'
+</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 'flowbite-vue'
+</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 'flowbite-vue'
+</script>

docs/components/progress/progress.md

@@ -1,15 +1,102 @@
 <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>
 ```
 
 <ProgressExample />
+
+## 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" size="lg" 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 />