@@ -11,5 +11,5 @@
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { Progress } from '../../../../src/index'
|
||||
</script>
|
||||
import { Progress } from 'flowbite-vue'
|
||||
</script>
|
||||
|
||||
@@ -4,5 +4,5 @@
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { Progress } from '../../../../src/index'
|
||||
import { Progress } from 'flowbite-vue'
|
||||
</script>
|
||||
|
||||
@@ -43,7 +43,7 @@ const props = defineProps({
|
||||
default: 0,
|
||||
},
|
||||
size: {
|
||||
type: String, // 'sm' | 'md' | 'lg' | 'xl'
|
||||
type: String as PropType<ProgressSize>,
|
||||
default: 'md',
|
||||
},
|
||||
})
|
||||
|
||||
@@ -39,40 +39,26 @@ export type UseProgressClassesProps = {
|
||||
}
|
||||
|
||||
export function useProgressClasses(props: UseProgressClassesProps): { innerClasses: Ref<string>, outerClasses: Ref<string>, outsideLabelClasses: Ref<string>} {
|
||||
|
||||
const bindClasses = computed(() => {
|
||||
let colorClass = ''
|
||||
colorClass = barColorClasses[props.color.value]
|
||||
|
||||
let sizeClass = ''
|
||||
sizeClass = progressSizeClasses[props.size.value]
|
||||
|
||||
return classNames(
|
||||
colorClass,
|
||||
sizeClass,
|
||||
barColorClasses[props.color.value],
|
||||
progressSizeClasses[props.size.value],
|
||||
)
|
||||
})
|
||||
|
||||
const outerClasses = computed(() => {
|
||||
let outerSizeClass = ''
|
||||
outerSizeClass = progressSizeClasses[props.size.value]
|
||||
return classNames(
|
||||
outerSizeClass
|
||||
progressSizeClasses[props.size.value],
|
||||
)
|
||||
})
|
||||
|
||||
const outsideLabelClasses = computed(() => {
|
||||
let outsideLabelClass = ''
|
||||
outsideLabelClass = outsideTextColorClasses[props.color.value]
|
||||
return classNames(
|
||||
outsideLabelClass
|
||||
outsideTextColorClasses[props.color.value],
|
||||
)
|
||||
})
|
||||
|
||||
|
||||
return {
|
||||
innerClasses: bindClasses,
|
||||
outerClasses,
|
||||
outsideLabelClasses
|
||||
outsideLabelClasses,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user