feat(Slider): new component (#57)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

src/runtime/components/RadioGroup.vue

@@ -39,9 +39,9 @@ export interface RadioGroupSlots<T> {
 
 <script setup lang="ts" generic="T extends string | undefined">
 import { computed } from 'vue'
-import { useId, useFormField } from '#imports'
 import { RadioGroupRoot, RadioGroupItem, RadioGroupIndicator, Label, useForwardPropsEmits } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
+import { useId, useFormField } from '#imports'
 
 const props = defineProps<RadioGroupProps<T>>()
 const emits = defineEmits<RadioGroupEmits>()

src/runtime/components/Slider.vue

@@ -0,0 +1,91 @@
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { SliderRootProps, SliderRootEmits } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/slider'
+
+const appConfig = _appConfig as AppConfig & { ui: { slider: Partial<typeof theme> } }
+
+const slider = tv({ extend: tv(theme), ...(appConfig.ui?.slider || {}) })
+
+type SliderVariants = VariantProps<typeof slider>
+
+export interface SliderProps extends Omit<SliderRootProps, 'asChild' | 'defaultValue' | 'dir'> {
+  size?: SliderVariants['size']
+  color?: SliderVariants['color']
+  defaultValue?: number | number[]
+  class?: any
+  ui?: Partial<typeof slider.slots>
+}
+
+export interface SliderEmits extends Omit<SliderRootEmits, 'update:modelValue'> {}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { SliderRoot, SliderRange, SliderTrack, SliderThumb, useForwardPropsEmits } from 'radix-vue'
+import { reactivePick } from '@vueuse/core'
+import { useFormField } from '#imports'
+
+const props = withDefaults(defineProps<SliderProps>(), {
+  min: 0,
+  max: 100,
+  step: 1,
+  orientation: 'horizontal'
+})
+const emits = defineEmits<SliderEmits>()
+
+const modelValue = defineModel<number | number[]>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'orientation', 'min', 'max', 'step', 'minStepsBetweenThumbs', 'inverted'), emits)
+
+const { inputId, emitFormChange, size, color, name, disabled } = useFormField<SliderProps>(props)
+
+const defaultSliderValue = computed(() => {
+  if (typeof props.defaultValue === 'number') {
+    return [props.defaultValue]
+  }
+  return props.defaultValue
+})
+
+const sliderValue = computed({
+  get() {
+    if (typeof modelValue.value === 'number') {
+      return [modelValue.value]
+    }
+    return modelValue.value ?? defaultSliderValue.value
+  },
+  set(value) {
+    modelValue.value = value?.length !== 1 ? value : value[0]
+  }
+})
+
+const thumbsCount = computed(() => sliderValue.value?.length ?? 1)
+
+const ui = computed(() => tv({ extend: slider, slots: props.ui })({
+  disabled: disabled.value,
+  size: size.value,
+  color: color.value,
+  orientation: props.orientation
+}))
+</script>
+
+<template>
+  <SliderRoot
+    v-bind="rootProps"
+    :id="inputId"
+    v-model="sliderValue"
+    :name="name"
+    :disabled="disabled"
+    :class="ui.root({ class: props.class })"
+    :default-value="defaultSliderValue"
+    @update:model-value="emitFormChange()"
+  >
+    <SliderTrack :class="ui.track()">
+      <SliderRange :class="ui.range()" />
+    </SliderTrack>
+
+    <SliderThumb v-for="count in thumbsCount" :key="count" :class="ui.thumb()" />
+  </SliderRoot>
+</template>

src/runtime/types/index.d.ts

@@ -24,6 +24,7 @@ export * from '../components/RadioGroup.vue'
 export * from '../components/Separator.vue'
 export * from '../components/Skeleton.vue'
 export * from '../components/Slideover.vue'
+export * from '../components/Slider.vue'
 export * from '../components/Switch.vue'
 export * from '../components/Tabs.vue'
 export * from '../components/Textarea.vue'

src/theme/index.ts

@@ -22,6 +22,7 @@ export { default as radioGroup } from './radio-group'
 export { default as separator } from './separator'
 export { default as skeleton } from './skeleton'
 export { default as slideover } from './slideover'
+export { default as slider } from './slider'
 export { default as switch } from './switch'
 export { default as tabs } from './tabs'
 export { default as textarea } from './textarea'

src/theme/slider.ts

@@ -0,0 +1,138 @@
+export default (config: { colors: string[] }) => ({
+  slots: {
+    root: 'relative flex items-center select-none touch-none',
+    track: 'relative bg-gray-200 dark:bg-gray-700 overflow-hidden rounded-full grow',
+    range: 'absolute rounded-full',
+    thumb: 'rounded-full bg-white dark:bg-gray-900 ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2'
+  },
+  variants: {
+    color: Object.fromEntries(config.colors.map((color: string) => [color, {
+      range: `bg-${color}-500 dark:bg-${color}-400`,
+      thumb: `ring-${color}-500 dark:ring-${color}-400 focus-visible:outline-${color}-500/50 dark:focus-visible:outline-${color}-400/50`
+    }])),
+    size: {
+      '2xs': {
+        thumb: 'size-1.5'
+      },
+      'xs': {
+        thumb: 'size-2'
+      },
+      'sm': {
+        thumb: 'size-3'
+      },
+      'md': {
+        thumb: 'size-4'
+      },
+      'lg': {
+        thumb: 'size-5'
+      },
+      'xl': {
+        thumb: 'size-6'
+      }
+    },
+    orientation: {
+      horizontal: {
+        root: 'w-full',
+        range: 'h-full'
+      },
+      vertical: {
+        root: 'flex-col h-full',
+        range: 'w-full'
+      }
+    },
+    disabled: {
+      true: {
+        root: 'opacity-75 cursor-not-allowed'
+      }
+    }
+  },
+  compoundVariants: [{
+    orientation: 'horizontal',
+    size: '2xs',
+    class: {
+      root: 'h-1.5',
+      track: 'h-px'
+    }
+  }, {
+    orientation: 'horizontal',
+    size: 'xs',
+    class: {
+      root: 'h-2',
+      track: 'h-0.5'
+    }
+  }, {
+    orientation: 'horizontal',
+    size: 'sm',
+    class: {
+      root: 'h-3',
+      track: 'h-1'
+    }
+  }, {
+    orientation: 'horizontal',
+    size: 'md',
+    class: {
+      root: 'h-4',
+      track: 'h-2'
+    }
+  }, {
+    orientation: 'horizontal',
+    size: 'lg',
+    class: {
+      root: 'h-5',
+      track: 'h-3'
+    }
+  }, {
+    orientation: 'horizontal',
+    size: 'xl',
+    class: {
+      root: 'h-6',
+      track: 'h-4'
+    }
+  }, {
+    orientation: 'vertical',
+    size: '2xs',
+    class: {
+      root: 'w-1.5',
+      track: 'w-px'
+    }
+  }, {
+    orientation: 'vertical',
+    size: 'xs',
+    class: {
+      root: 'w-2',
+      track: 'w-0.5'
+    }
+  }, {
+    orientation: 'vertical',
+    size: 'sm',
+    class: {
+      root: 'w-3',
+      track: 'w-1'
+    }
+  }, {
+    orientation: 'vertical',
+    size: 'md',
+    class: {
+      root: 'w-4',
+      track: 'w-2'
+    }
+  }, {
+    orientation: 'vertical',
+    size: 'lg',
+    class: {
+      root: 'w-5',
+      track: 'w-3'
+    }
+  }, {
+    orientation: 'vertical',
+    size: 'xl',
+    class: {
+      root: 'w-6',
+      track: 'w-4'
+    }
+  }],
+  defaultVariants: {
+    size: 'sm',
+    color: 'primary'
+  }
+})