fix(Slider): handle generic types

This commit is contained in:
Benjamin Canac
2025-05-13 17:21:42 +02:00
parent 3c8d6cd01d
commit d7a4d029b7

View File

@@ -38,13 +38,13 @@ export interface SliderProps extends Pick<SliderRootProps, 'name' | 'disabled' |
ui?: Slider['slots'] ui?: Slider['slots']
} }
export interface SliderEmits { export interface SliderEmits<T extends number | number[] = number | number[]> {
(e: 'update:modelValue', payload: number | number[]): void (e: 'update:modelValue', payload: T): void
(e: 'change', payload: Event): void (e: 'change', payload: Event): void
} }
</script> </script>
<script setup lang="ts"> <script setup lang="ts" generic="T extends number | number[]">
import { computed } from 'vue' import { computed } from 'vue'
import { SliderRoot, SliderRange, SliderTrack, SliderThumb, useForwardPropsEmits } from 'reka-ui' import { SliderRoot, SliderRange, SliderTrack, SliderThumb, useForwardPropsEmits } from 'reka-ui'
import { reactivePick } from '@vueuse/core' import { reactivePick } from '@vueuse/core'
@@ -59,9 +59,9 @@ const props = withDefaults(defineProps<SliderProps>(), {
step: 1, step: 1,
orientation: 'horizontal' orientation: 'horizontal'
}) })
const emits = defineEmits<SliderEmits>() const emits = defineEmits<SliderEmits<T>>()
const modelValue = defineModel<number | number[]>() const modelValue = defineModel<T>()
const appConfig = useAppConfig() as Slider['AppConfig'] const appConfig = useAppConfig() as Slider['AppConfig']
@@ -81,10 +81,10 @@ const sliderValue = computed({
if (typeof modelValue.value === 'number') { if (typeof modelValue.value === 'number') {
return [modelValue.value] return [modelValue.value]
} }
return modelValue.value ?? defaultSliderValue.value return (modelValue.value as number[]) ?? defaultSliderValue.value
}, },
set(value) { set(value) {
modelValue.value = value?.length !== 1 ? value : value[0] modelValue.value = (value?.length !== 1 ? value : value[0]) as T
} }
}) })