add props

docs/components/range/examples/DefaultRange.vue

@@ -1,6 +1,10 @@
 <template>
   <div>
-    <Range v-model="value" :steps="5" />
+    <Range v-model="value" :steps="5" :size="lg" />
+    <Range v-model="value" :steps="5" :disabled="true" />
+    <Range v-model="value" :steps="5" size="sm" />
+    <Range v-model="value" :steps="5" size="md" />
+    <Range v-model="value" :steps="5" size="lg" />
     {{ value }}
   </div>
 </template>

src/components/Range/Range.vue

@@ -1,12 +1,12 @@
 <template>
   <div>
     <label for="default-range" :class="labelClasses">Default range</label>
-    <input :step="steps" v-model="model" id="default-range" type="range" :class="rangeClasses">
+    <input :step="steps" v-model="model" :disabled="disabled" id="default-range" type="range" :class="rangeClasses">
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed, toRefs } from 'vue'
 import { useRangeClasses } from './composables/useRangeClasses'
 
 interface RangeProps {
@@ -35,5 +35,5 @@ const model = computed({
   },
 })
 
-const { rangeClasses, labelClasses } = useRangeClasses()
+const { rangeClasses, labelClasses } = useRangeClasses(toRefs(props))
 </script>

src/components/Range/composables/useRangeClasses.ts

@@ -1,12 +1,27 @@
+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'
 
-export function useRangeClasses() {
+const rangeSizeClasses: Record<InputSize, string> = {
+  lg: 'h-3 range-lg',
+  md: 'h-2 range-md',
+  sm: 'h-1 range-sm',
+}
+
+export type UseRangeClassesProps = {
+  disabled: Ref<boolean>
+  size: Ref<InputSize>
+}
+
+export function useRangeClasses(props: UseRangeClassesProps) {
+  console.log(props.size.value)
   const rangeClasses = computed(() => {
-    return rangeDefaultClasses
+    return simplifyTailwindClasses(rangeDefaultClasses, rangeSizeClasses[props.size.value])
   })
 
   const labelClasses = computed(() => {