diff --git a/docs/components/progress.md b/docs/components/progress.md index 9c147192..933c730e 100644 --- a/docs/components/progress.md +++ b/docs/components/progress.md @@ -86,14 +86,15 @@ You can also apply color. ```vue @@ -101,3 +102,15 @@ You can also apply color. import { FwbProgress } from 'flowbite-vue' ``` + +## API + +### Props +| Name | Values | Default | +|----------------|---------------------------------------------------------------------------------------|-----------| +| color | `default`, `dark`, `green`, `red`, `yellow`, `purple`, `blue`, `indigo`, any hex code | `default` | +| label | `string` | `''` | +| labelPosition | `inside`, `outside`, `none` | `none` | +| labelProgress | `boolean` | `false` | +| progress | `number` (0-100) | `0` | +| size | `sm`, `md`, `lg`, `xl` | `md` | diff --git a/docs/components/progress/examples/FwbProgressExampleColor.vue b/docs/components/progress/examples/FwbProgressExampleColor.vue index bd2c5343..00914eca 100644 --- a/docs/components/progress/examples/FwbProgressExampleColor.vue +++ b/docs/components/progress/examples/FwbProgressExampleColor.vue @@ -2,42 +2,47 @@
+
diff --git a/docs/components/spinner.md b/docs/components/spinner.md index 87450aa5..7f726bfa 100644 --- a/docs/components/spinner.md +++ b/docs/components/spinner.md @@ -59,6 +59,7 @@ import { FwbSpinner } from 'flowbite-vue' + diff --git a/src/components/FwbProgress/composables/useProgressClasses.ts b/src/components/FwbProgress/composables/useProgressClasses.ts index 6767ff58..a0926098 100644 --- a/src/components/FwbProgress/composables/useProgressClasses.ts +++ b/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 = { default: 'bg-blue-600 dark:bg-blue-600', @@ -38,10 +38,18 @@ export type UseProgressClassesProps = { labelPosition: Ref } -export function useProgressClasses (props: UseProgressClassesProps): { innerClasses: Ref, outerClasses: Ref, outsideLabelClasses: Ref } { +export function useProgressClasses (props: UseProgressClassesProps): { + innerClasses: Ref + outerClasses: Ref + outsideLabelClasses: Ref + customColor: Ref +} { + const customColor = computed(() => { + return barColorClasses[props.color.value] ? null : (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,14 +59,17 @@ export function useProgressClasses (props: UseProgressClassesProps): { innerClas ) }) const outsideLabelClasses = computed(() => { - return classNames( - outsideTextColorClasses[props.color.value], - ) + return customColor.value + ? '' + : classNames( + outsideTextColorClasses[props.color.value], + ) }) return { innerClasses: bindClasses, outerClasses, outsideLabelClasses, + customColor, } } diff --git a/src/components/FwbProgress/types.ts b/src/components/FwbProgress/types.ts index eddab6a4..426b10e4 100644 --- a/src/components/FwbProgress/types.ts +++ b/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 diff --git a/src/components/FwbSpinner/FwbSpinner.vue b/src/components/FwbSpinner/FwbSpinner.vue index 8e09ce97..6bfeffc3 100644 --- a/src/components/FwbSpinner/FwbSpinner.vue +++ b/src/components/FwbSpinner/FwbSpinner.vue @@ -1,6 +1,7 @@ @@ -34,5 +35,5 @@ const props = withDefaults(defineProps(), { size: '4', }) -const { spinnerClasses } = useSpinnerClasses(toRefs(props)) +const { spinnerClasses, customColor } = useSpinnerClasses(toRefs(props)) diff --git a/src/components/FwbSpinner/composables/useSpinnerClasses.ts b/src/components/FwbSpinner/composables/useSpinnerClasses.ts index 0edd7e09..497eb405 100644 --- a/src/components/FwbSpinner/composables/useSpinnerClasses.ts +++ b/src/components/FwbSpinner/composables/useSpinnerClasses.ts @@ -38,9 +38,12 @@ export type UseSpinnerClassesProps = { size: Ref } -export function useSpinnerClasses (props: UseSpinnerClassesProps): { spinnerClasses: Ref } { +export function useSpinnerClasses (props: UseSpinnerClassesProps): { spinnerClasses: Ref, customColor: Ref } { const sizeClasses = computed(() => sizes[props.size.value]) - const colorClasses = computed(() => colors[props.color.value]) + + const colorClasses = computed(() => colors[props.color.value as SpinnerColor] ?? '') + const customColor = computed(() => colorClasses.value ? null : (props.color.value as string)) + const bgColorClasses = computed(() => 'text-gray-200 dark:text-gray-600') const animateClasses = computed(() => 'animate-spin') const spinnerClasses = computed(() => classNames( @@ -50,5 +53,5 @@ export function useSpinnerClasses (props: UseSpinnerClassesProps): { spinnerClas sizeClasses.value, )) - return { spinnerClasses } + return { spinnerClasses, customColor } } diff --git a/src/components/FwbSpinner/types.ts b/src/components/FwbSpinner/types.ts index 1e8e8b7d..2d0f6034 100644 --- a/src/components/FwbSpinner/types.ts +++ b/src/components/FwbSpinner/types.ts @@ -1,3 +1,4 @@ -export type SpinnerColor = 'blue' | 'gray' | 'green' | 'red' | 'yellow' | 'pink' | 'purple' | 'white' +type CustomColor = (`#${string}` & {}) +export type SpinnerColor = 'blue' | 'gray' | 'green' | 'red' | 'yellow' | 'pink' | 'purple' | 'white' | CustomColor export type SpinnerSize = '0' | '0.5' | '1' | '1.5' | '2' | '2.5' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12'