34 lines
946 B
TypeScript
34 lines
946 B
TypeScript
import { simplifyTailwindClasses } from '@/utils/simplifyTailwindClasses'
|
|
import { computed } from 'vue'
|
|
import type { Ref } from 'vue'
|
|
import type { InputSize } from '@/components/Input/types'
|
|
|
|
// Range
|
|
const rangeDefaultClasses = 'w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700'
|
|
const rangeLabelClasses = 'block mb-2 text-sm font-medium text-gray-900 dark:text-white'
|
|
|
|
const rangeSizeClasses: Record<InputSize, string> = {
|
|
lg: 'h-3 range-lg',
|
|
md: 'h-2 range-md',
|
|
sm: 'h-1 range-sm',
|
|
}
|
|
|
|
export type UseRangeClassesProps = {
|
|
size: Ref<InputSize>
|
|
disabled: Ref<boolean>
|
|
}
|
|
|
|
export function useRangeClasses(props: UseRangeClassesProps) {
|
|
const rangeClasses = computed(() => {
|
|
return simplifyTailwindClasses(rangeDefaultClasses, rangeSizeClasses[props.size.value])
|
|
})
|
|
|
|
const labelClasses = computed(() => {
|
|
return rangeLabelClasses
|
|
})
|
|
|
|
return {
|
|
rangeClasses,
|
|
labelClasses,
|
|
}
|
|
}
|