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