Fixed the display of the progress bar with 0 value

themesberg · Jan 9, 2025 · 2976b07 · 2976b07
1 parent 00646eb
commit 2976b07
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/docs/components/progress/examples/FwbProgressExampleLabelOutside.vue b/docs/components/progress/examples/FwbProgressExampleLabelOutside.vue
@@ -5,6 +5,15 @@
     label-progress
     label="Flowbite Vue 3"
   />
+
+  <div class="mb-4" />
+
+  <fwb-progress
+    :progress="0"
+    label-position="outside"
+    label-progress
+    label="Flowbite Vue 3"
+  />
 </template>
 
 <script setup>

diff --git a/src/components/FwbProgress/FwbProgress.vue b/src/components/FwbProgress/FwbProgress.vue
@@ -18,6 +18,7 @@
       class="w-full bg-gray-200 rounded-full dark:bg-gray-700"
     >
       <div
+        v-if="displayBar"
         :class="innerClasses"
         :style="{ width: safeProgress + '%' }"
         class="rounded-full font-medium text-blue-100 text-center p-0.5 min-w-max box-border"
@@ -65,6 +66,10 @@ const safeProgress = computed(() => {
   return props.progress <= size ? size : props.progress
 })
 
+const displayBar = computed(() => {
+  return props.labelPosition === 'inside' || props.progress > 0
+})
+
 const {
   innerClasses,
   outerClasses,