feat: add support for custom progress bar colors in FwbProgress component

Author: wazeerc

docs/components/progress.md

@@ -86,14 +86,15 @@ You can also apply color.
 ```vue
 <template>
   <div class="grid gap-2">
-    <fwb-progress :progress="12.5" label="Default"  />
-    <fwb-progress :progress="25" color="dark" label="Dark"  />
-    <fwb-progress :progress="37.5" color="blue" label="Blue"  />
-    <fwb-progress :progress="50" color="red" label="Red"  />
-    <fwb-progress :progress="62.5" color="green" label="Green"  />
-    <fwb-progress :progress="75" color="yellow" label="Yellow"  />
-    <fwb-progress :progress="87.5" color="indigo" label="Indigo"  />
-    <fwb-progress :progress="100" color="purple" label="Purple"  />
+    <fwb-progress :progress="11" label="Default"  />
+    <fwb-progress :progress="22" color="dark" label="Dark"  />
+    <fwb-progress :progress="33" color="blue" label="Blue"  />
+    <fwb-progress :progress="44" color="red" label="Red"  />
+    <fwb-progress :progress="55" color="green" label="Green"  />
+    <fwb-progress :progress="66" color="yellow" label="Yellow"  />
+    <fwb-progress :progress="77" color="indigo" label="Indigo"  />
+    <fwb-progress :progress="88" color="purple" label="Purple"  />
+    <fwb-progress :progress="99" color="#3fb984" label="Custom color"  />
   </div>
 </template>
 

docs/components/progress/examples/FwbProgressExampleColor.vue

@@ -2,42 +2,47 @@
   <div class="vp-raw grid gap-2">
     <fwb-progress
       label="Default"
-      :progress="12.5"
+      :progress="11"
     />
     <fwb-progress
       color="dark"
       label="Dark"
-      :progress="25"
+      :progress="22"
     />
     <fwb-progress
       color="blue"
       label="Blue"
-      :progress="37.5"
+      :progress="33"
     />
     <fwb-progress
       color="red"
       label="Red"
-      :progress="50"
+      :progress="44"
     />
     <fwb-progress
       color="green"
       label="Green"
-      :progress="62.5"
+      :progress="55"
     />
     <fwb-progress
       color="yellow"
       label="Yellow"
-      :progress="75"
+      :progress="66"
     />
     <fwb-progress
       color="indigo"
       label="Indigo"
-      :progress="87.5"
+      :progress="77"
     />
     <fwb-progress
       color="purple"
       label="Purple"
-      :progress="100"
+      :progress="88"
+    />
+    <fwb-progress
+      color="#3fb984"
+      label="Custom color"
+      :progress="99"
     />
   </div>
 </template>

src/components/FwbProgress/FwbProgress.vue

@@ -4,11 +4,13 @@
       <div class="mb-1 flex justify-between">
         <span
           :class="outsideLabelClasses"
+          :style="customColor ? { color: customColor } : {}"
           class="text-base font-medium"
         >{{ label }}</span>
         <span
           v-if="labelProgress && labelPosition === 'outside'"
           :class="outsideLabelClasses"
+          :style="customColor ? { color: customColor } : {}"
           class="text-sm font-medium"
         >{{ progress }}%</span>
       </div>
@@ -19,7 +21,9 @@
     >
       <div
         :class="innerClasses"
-        :style="{ width: progress + '%' }"
+        :style="customColor
+          ? { width: progress + '%', backgroundColor: customColor }
+          : { width: progress + '%' }"
         class="rounded-full p-0.5 text-center font-medium text-blue-100"
       >
         <template v-if="labelProgress && labelPosition === 'inside'">
@@ -59,5 +63,6 @@ const {
   innerClasses,
   outerClasses,
   outsideLabelClasses,
+  customColor,
 } = useProgressClasses(toRefs(props))
 </script>

src/components/FwbProgress/composables/useProgressClasses.ts

@@ -1,7 +1,7 @@
 import classNames from 'classnames'
 import { computed, type Ref } from 'vue'
 
-import type { ProgressLabelPosition, ProgressSize, ProgressVariant } from '../types'
+import type { CustomColor, ProgressLabelPosition, ProgressSize, ProgressVariant } from '../types'
 
 const barColorClasses: Record<ProgressVariant, string> = {
   default: 'bg-blue-600 dark:bg-blue-600',
@@ -38,10 +38,18 @@ export type UseProgressClassesProps = {
   labelPosition: Ref<ProgressLabelPosition>
 }
 
-export function useProgressClasses (props: UseProgressClassesProps): { innerClasses: Ref<string>, outerClasses: Ref<string>, outsideLabelClasses: Ref<string> } {
+export function useProgressClasses (props: UseProgressClassesProps): {
+  innerClasses: Ref<string>,
+  outerClasses: Ref<string>,
+  outsideLabelClasses: Ref<string>,
+  customColor: Ref<CustomColor | null>
+} {
+  const customColor = computed(() => {
+    return props.color.value as CustomColor
+  })
   const bindClasses = computed(() => {
     return classNames(
-      barColorClasses[props.color.value],
+      customColor.value ? '' : barColorClasses[props.color.value],
       progressSizeClasses[props.size.value],
     )
   })
@@ -51,7 +59,7 @@ export function useProgressClasses (props: UseProgressClassesProps): { innerClas
     )
   })
   const outsideLabelClasses = computed(() => {
-    return classNames(
+    return customColor.value ? '' : classNames(
       outsideTextColorClasses[props.color.value],
     )
   })
@@ -60,5 +68,6 @@ export function useProgressClasses (props: UseProgressClassesProps): { innerClas
     innerClasses: bindClasses,
     outerClasses,
     outsideLabelClasses,
+    customColor,
   }
 }

src/components/FwbProgress/types.ts

@@ -1,3 +1,4 @@
 export type ProgressLabelPosition = 'inside' | 'outside' | 'none'
 export type ProgressSize = 'sm' | 'md' | 'lg' | 'xl'
-export type ProgressVariant = 'default' | 'dark' | 'green' | 'red' | 'yellow' | 'purple' | 'blue' | 'indigo'
+export type CustomColor = (`#${string}` & {})
+export type ProgressVariant = 'default' | 'dark' | 'green' | 'red' | 'yellow' | 'purple' | 'blue' | 'indigo' | CustomColor