Merge pull request #155 from vasucp1207/range

feat(component): New range slider

docs/.vitepress/config.ts

@@ -68,6 +68,7 @@ function getFormComponents() {
     { text: 'Checkbox', link: 'components/checkbox' },
     { text: 'Select', link: 'components/select' },
     { text: 'Toggle', link: 'components/toggle' },
+    { text: 'Range', link: 'components/range' },
   ]
 }
 

docs/components/range.md

@@ -0,0 +1,79 @@
+<script setup>
+import DefaultRange from './range/examples/DefaultRange.vue'
+import DisabledRange from './range/examples/DisabledRange.vue'
+import MinMaxRange from './range/examples/MinMaxRange.vue'
+import StepsRange from './range/examples/StepsRange.vue'
+import SizeRange from './range/examples/SizeRange.vue'
+</script>
+
+# Vue Toggle Range - Flowbite
+#### Get started with the range component to receive a number from the user anywhere from 1 to 100 by sliding form control horizontally based on multiple options
+
+---
+
+:::tip
+Original reference: [https://flowbite.com/docs/forms/range/](https://flowbite.com/docs/forms/range/)
+:::
+
+## Default
+
+```vue
+<template>
+  <Range v-model="value" />
+</template>
+
+<script setup>
+import Range from 'flowbite-vue'
+import { ref } from 'vue'
+
+const value = ref('10')
+</script>
+
+```
+
+<DefaultRange />
+
+## Disabled state
+
+```vue
+<template>
+  <Range v-model="value" label="Disabled range" :disabled="true" />
+</template>
+</script>
+```
+
+<DisabledRange />
+
+## Min and Max
+
+```vue
+<template>
+  <Range v-model="value" label="Min-max range" min="0" max="10" />
+</template>
+```
+
+<MinMaxRange />
+
+## Steps
+
+```vue
+<template>
+  <Range v-model="value"  label="Steps range" steps="5" />
+</template>
+```
+
+<StepsRange />
+
+## Sizes
+
+```vue
+<template>
+  <div>
+    <Range v-model="value1" label="Small range" size="sm" />
+    <Range v-model="value2" label="Medium range" size="md" />
+    <Range v-model="value3" label="Large range" size="lg" />
+  </div>
+</template>
+```
+
+<SizeRange />

docs/components/range/examples/DefaultRange.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <Range v-model="value" />
+  </div>
+</template>
+
+<script setup>
+import Range from '../../../../src/components/Range/Range.vue'
+import { ref } from 'vue'
+
+const value = ref('10')
+</script>

docs/components/range/examples/DisabledRange.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <Range v-model="value" label="Disabled range" :disabled="true" />
+  </div>
+</template>
+
+<script setup>
+import Range from '../../../../src/components/Range/Range.vue'
+import { ref } from 'vue'
+
+const value = ref('10')
+</script>

docs/components/range/examples/MinMaxRange.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <Range v-model="value" label="Min-max range" min="0" max="10" />
+  </div>
+</template>
+
+<script setup>
+import Range from '../../../../src/components/Range/Range.vue'
+import { ref } from 'vue'
+
+const value = ref('10')
+</script>

docs/components/range/examples/SizeRange.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="flex flex-col gap-3">
+    <Range v-model="value1" label="Small range" size="sm" />
+    <Range v-model="value2" label="Medium range" size="md" />
+    <Range v-model="value3" label="Large range" size="lg" />
+  </div>
+</template>
+
+<script setup>
+import Range from '../../../../src/components/Range/Range.vue'
+import { ref } from 'vue'
+
+const value1 = ref('10')
+const value2 = ref('10')
+const value3 = ref('10')
+</script>

docs/components/range/examples/StepsRange.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <Range v-model="value" label="Steps range" steps="5" />
+  </div>
+</template>
+
+<script setup>
+import Range from '../../../../src/components/Range/Range.vue'
+import { ref } from 'vue'
+
+const value = ref('10')
+</script>

src/components/Range/Range.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <label for="default-range" :class="labelClasses">{{ label }}</label>
+    <input :step="steps" v-model="model" :min="min" :max="max" :disabled="disabled" type="range" :class="rangeClasses">
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, toRefs } from 'vue'
+import { useRangeClasses } from './composables/useRangeClasses'
+import type { InputSize } from '@/components/Input/types'
+
+interface RangeProps {
+  modelValue?: string;
+  label?: string;
+  disabled?: boolean;
+  min?: string;
+  max?: string;
+  size?: InputSize;
+  steps?: string;
+}
+
+const props = withDefaults(defineProps<RangeProps>(), {
+  modelValue: '50',
+  label: 'Range slider',
+  disabled: false,
+  min: '0',
+  max: '100',
+  size: 'md',
+  steps: '1',
+})
+
+const emit = defineEmits(['update:modelValue'])
+const model = computed({
+  get() {
+    return props.modelValue
+  },
+  set(val) {
+    emit('update:modelValue', val)
+  },
+})
+
+const { rangeClasses, labelClasses } = useRangeClasses(toRefs(props))
+</script>

src/components/Range/composables/useRangeClasses.ts

@@ -0,0 +1,34 @@
+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,
+  }
+} 

src/index.ts

@@ -58,4 +58,6 @@ export { default as Select } from './components/Select/Select.vue'
 
 export { default as Toggle } from './components/Toggle/Toggle.vue'
 
+export { default as Range } from './components/Range/Range.vue'
+
 export * from './composables'