-
+
+
+
+ {{ label }}
+ {{ progress }}%
+
+
+
+
+
+ {{ progress }}%
+
+
+
diff --git a/src/components/Progress/composables/useProgressClasses.ts b/src/components/Progress/composables/useProgressClasses.ts
new file mode 100644
index 0000000..f97f30b
--- /dev/null
+++ b/src/components/Progress/composables/useProgressClasses.ts
@@ -0,0 +1,78 @@
+import type { Ref } from 'vue'
+import { computed } from 'vue'
+import classNames from 'classnames'
+import type { ProgressVariant, ProgressSize, ProgressLabelPosition } from '../types'
+
+const barColorClasses: Record
= {
+ default: 'bg-blue-600 dark:bg-blue-600',
+ blue: 'bg-blue-600 dark:bg-blue-600',
+ dark: 'bg-gray-600 dark:bg-gray-300',
+ green: 'bg-green-600 dark:bg-green-500',
+ red: 'bg-red-600 dark:bg-red-500',
+ yellow: 'bg-yellow-400',
+ indigo: 'bg-indigo-600 dark:bg-indigo-500',
+ purple: 'bg-purple-600 dark:bg-purple-500',
+}
+
+const outsideTextColorClasses: Record = {
+ default: '',
+ blue: 'text-blue-700 dark:text-blue-500',
+ dark: 'dark:text-white',
+ green: 'text-green-700 dark:text-green-500',
+ red: 'text-red-700 dark:text-red-500',
+ yellow: 'text-yellow-700 dark:text-yellow-500',
+ indigo: 'text-indigo-700 dark:text-indigo-500',
+ purple: 'text-purple-700 dark:text-purple-500',
+}
+
+const progressSizeClasses: Record = {
+ sm: 'h-1.5 text-xs leading-none',
+ md: 'h-2.5 text-xs leading-none',
+ lg: 'h-4 text-sm leading-none',
+ xl: 'h-6 text-base leading-tight',
+}
+
+export type UseProgressClassesProps = {
+ color: Ref
+ size: Ref
+ labelPosition: Ref
+}
+
+export function useProgressClasses(props: UseProgressClassesProps): { innerClasses: Ref, outerClasses: Ref, outsideLabelClasses: Ref} {
+
+ const bindClasses = computed(() => {
+ let colorClass = ''
+ colorClass = barColorClasses[props.color.value]
+
+ let sizeClass = ''
+ sizeClass = progressSizeClasses[props.size.value]
+
+ return classNames(
+ colorClass,
+ sizeClass,
+ )
+ })
+
+ const outerClasses = computed(() => {
+ let outerSizeClass = ''
+ outerSizeClass = progressSizeClasses[props.size.value]
+ return classNames(
+ outerSizeClass
+ )
+ })
+
+ const outsideLabelClasses = computed(() => {
+ let outsideLabelClass = ''
+ outsideLabelClass = outsideTextColorClasses[props.color.value]
+ return classNames(
+ outsideLabelClass
+ )
+ })
+
+
+ return {
+ innerClasses: bindClasses,
+ outerClasses,
+ outsideLabelClasses
+ }
+}
\ No newline at end of file
diff --git a/src/components/Progress/types.ts b/src/components/Progress/types.ts
new file mode 100644
index 0000000..ec44e3d
--- /dev/null
+++ b/src/components/Progress/types.ts
@@ -0,0 +1,3 @@
+export type ProgressVariant = 'default' | 'dark' | 'green' | 'red' | 'yellow' | 'purple' | 'blue' | 'indigo'
+export type ProgressSize = 'sm' | 'md' | 'lg' | 'xl'
+export type ProgressLabelPosition = 'inside' | 'outside' | 'none'