feat(Listbox,Switcher): preserve modelValue type in emit

Author: bnjm

src/components/Listbox.vue

@@ -3,7 +3,8 @@
   lang="ts"
   generic="
     T extends BaseOption = ExtendedOption,
-    Options extends T[] | OptionGroup<string, T>[] = T[] | OptionGroup<string, T>[]
+    Options extends T[] | OptionGroup<string, T>[] = T[] | OptionGroup<string, T>[],
+    ModelValue extends string = string
   ">
 import { ref, computed, useAttrs } from 'vue'
 import { Listbox, ListboxButton } from '@headlessui/vue'
@@ -43,7 +44,7 @@ const props = withDefaults(
     /**
      * the prop modelValue is required to use [v-model](https://vuejs.org/guide/components/events.html#usage-with-v-model) with a component.
      */
-    modelValue: string
+    modelValue: ModelValue
     /**
      * direction in which the dropdown is opening.
      * possible values: `up`, `down`. Default is `down`
@@ -75,7 +76,7 @@ const props = withDefaults(
 )
 
 const emit = defineEmits<{
-  'update:modelValue': [value: string]
+  'update:modelValue': [value: ModelValue]
 }>()
 
 const attrs = useAttrs()
@@ -98,8 +99,8 @@ const flatOptions = computed((): T[] =>
 )
 
 const model = computed({
-  get: () => props.modelValue,
-  set: (value: string) => emit('update:modelValue', value)
+  get: (): ModelValue => props.modelValue,
+  set: (value: ModelValue) => emit('update:modelValue', value)
 })
 
 const valueOption = computed(() => flatOptions.value.find(option => option.value === model.value))

src/components/Switcher.vue

@@ -2,15 +2,18 @@
 export type { SwitcherOption } from '../types/selection'
 </script>
 
-<script setup lang="ts" generic="T extends SwitcherOption = SwitcherOption">
+<script
+  setup
+  lang="ts"
+  generic="T extends SwitcherOption = SwitcherOption, ModelValue extends string = string">
 import { computed } from 'vue'
 import { RadioGroup, RadioGroupLabel, RadioGroupOption } from '@headlessui/vue'
 import AIcon from './Icon.vue'
 import { type SwitcherOption } from '../types/selection'
 
 const props = withDefaults(
   defineProps<{
-    modelValue: string
+    modelValue: ModelValue
     options: T[]
     label?: string
     raised?: boolean
@@ -24,12 +27,12 @@ const props = withDefaults(
 )
 
 const emit = defineEmits<{
-  'update:modelValue': [value: string]
+  'update:modelValue': [value: ModelValue]
 }>()
 
 const model = computed({
-  get: () => props.modelValue,
-  set: value => emit('update:modelValue', value)
+  get: (): ModelValue => props.modelValue,
+  set: (value: ModelValue) => emit('update:modelValue', value)
 })
 </script>
 <template>