feat(Switcher): migrate to script setup with generics

Author: bnjm

src/components/Combobox.vue

@@ -236,7 +236,6 @@ const removeValue = (value: string, event: Event) => {
   }
 }
 
-// Type-safe color access
 const getOptionColor = (option: T | undefined): Color | undefined => {
   const opt = option as (BaseOption & { color?: Color }) | undefined
   return opt?.color
@@ -263,9 +262,7 @@ const hiddenCount = computed(() => {
 
 const showSelectableGroups = computed(
   () =>
-    props.selectableGroups &&
-    isMultiSelect(props.modelValue) &&
-    areOptionsGrouped(props.options)
+    props.selectableGroups && isMultiSelect(props.modelValue) && areOptionsGrouped(props.options)
 )
 
 const handleDelete = () => {
@@ -296,8 +293,7 @@ const isMulti = computed(() => isMultiSelect(model.value))
           :class="[
             {
               'h-auto min-h-10 body-lg placeholder:body-lg': size === 'md' && isMulti,
-              'my-px h-auto min-h-[1.875rem] body-sm placeholder:body-sm':
-                size === 'sm' && isMulti,
+              'my-px h-auto min-h-[1.875rem] body-sm placeholder:body-sm': size === 'sm' && isMulti,
               'a-text-input--sm': size === 'sm' && !isMulti,
               'a-text-input--md': size === 'md' && !isMulti
             },

src/components/Listbox.vue

@@ -100,7 +100,6 @@ const valueOption = computed(() => flatOptions.value.find(option => option.value
 
 const valueLabel = computed(() => valueOption.value?.label || model.value)
 
-// Type-safe color access
 const valueOptionColor = computed(() => {
   const opt = valueOption.value as (BaseOption & { color?: Color }) | undefined
   return opt?.color

src/components/Option.vue

@@ -1,6 +1,4 @@
 <script lang="ts">
-// Re-export types for backwards compatibility
-// This separate script block is needed because <script setup> doesn't support named exports
 export type { Option, BaseOption, ExtendedOption, OptionValue } from '../types/selection'
 </script>
 
@@ -39,14 +37,10 @@ const props = withDefaults(
   }
 )
 
-// Note: Slots are typed via template usage, not defineSlots, for better compatibility
-// Slot props: default({ active, selected, disabled, option }), extra()
-
 const componentOption = computed(() =>
   props.component === 'combobox' ? ComboboxOption : ListboxOption
 )
 
-// Type-safe check for color property (only available on ExtendedOption)
 const optionColor = computed(() => {
   const opt = props.option as BaseOption & { color?: Color }
   return opt.color

src/components/OptionGroup.vue

@@ -1,5 +1,4 @@
 <script lang="ts">
-// Re-export types for backwards compatibility
 export type { OptionGroup } from '../types/selection'
 export { areOptionsGrouped } from '../types/selection'
 </script>

src/components/SelectableOptionGroup.vue

@@ -1,5 +1,4 @@
 <script lang="ts">
-// Re-export GROUP_VALUE_PREFIX for backwards compatibility
 export { GROUP_VALUE_PREFIX } from '../types/selection'
 </script>
 

src/components/Switcher.vue

@@ -1,59 +1,35 @@
 <script lang="ts">
-import { defineComponent, computed, PropType } from 'vue'
+export type { SwitcherOption } from '../types/selection'
+</script>
+
+<script setup lang="ts" generic="T extends SwitcherOption = SwitcherOption">
+import { computed } from 'vue'
 import { RadioGroup, RadioGroupLabel, RadioGroupOption } from '@headlessui/vue'
 import AIcon from './Icon.vue'
+import { type SwitcherOption } from '../types/selection'
 
-export type SwitcherOption = {
-  label: string
-  value: string
-  disabled?: boolean
-  icon?: string
-}
-
-export default defineComponent({
-  name: 'ASwitcher',
-  components: {
-    RadioGroup,
-    RadioGroupLabel,
-    RadioGroupOption,
-    AIcon
-  },
-  props: {
-    modelValue: {
-      type: String,
-      required: true
-    },
-    options: {
-      type: Array as PropType<SwitcherOption[]>,
-      required: true
-    },
-    label: {
-      type: String,
-      default: ''
-    },
-    raised: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['update:modelValue'],
-  setup(props, { emit }) {
-    const model = computed({
-      get: () => {
-        return props.modelValue
-      },
-      set: value => {
-        emit('update:modelValue', value)
-      }
-    })
-    return {
-      model
-    }
+const props = withDefaults(
+  defineProps<{
+    modelValue: string
+    options: T[]
+    label?: string
+    raised?: boolean
+    disabled?: boolean
+  }>(),
+  {
+    label: '',
+    raised: false,
+    disabled: false
   }
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const model = computed({
+  get: () => props.modelValue,
+  set: value => emit('update:modelValue', value)
 })
 </script>
 <template>
@@ -65,7 +41,7 @@ export default defineComponent({
     <RadioGroupLabel class="sr-only">{{ label }}</RadioGroupLabel>
     <RadioGroupOption
       v-for="option in options"
-      :key="option.value"
+      :key="String(option.value)"
       v-slot="{ checked }"
       :value="option.value"
       :disabled="option.disabled || disabled"
@@ -80,7 +56,7 @@ export default defineComponent({
         }"
         :aria-label="option.icon ? option.label : undefined"
         :title="option.icon ? option.label : undefined">
-        <slot :name="option.value">
+        <slot :name="String(option.value)">
           <a-icon v-if="option.icon" :name="option.icon" size="sm"></a-icon>
           <template v-else>
             {{ option.label }}

src/components/__tests__/Combobox.test.ts

@@ -10,6 +10,23 @@ const defaultOptions = [
   { value: 'e', label: 'Option E' }
 ]
 
+// Helper to count visible tags in the combobox trigger
+// Tags have removable buttons with aria-label="Remove"
+const getVisibleTagCount = () => {
+  return screen.queryAllByLabelText('Remove').length
+}
+
+// Helper to check if a tag with specific text is visible
+const hasVisibleTag = (label: string) => {
+  // Tags are rendered as ATag components with removable buttons
+  // The tag text appears alongside the Remove button
+  const removeButtons = screen.queryAllByLabelText('Remove')
+  return removeButtons.some(button => {
+    const tag = button.closest('[class*="a-tag"]') || button.parentElement
+    return tag?.textContent?.includes(label)
+  })
+}
+
 describe('Combobox.vue - Multi-select tag display', () => {
   describe('maxTags prop', () => {
     it('displays all tags when maxTags is undefined', () => {
@@ -20,11 +37,13 @@ describe('Combobox.vue - Multi-select tag display', () => {
         }
       })
 
-      expect(screen.getByText('Option A')).toBeInTheDocument()
-      expect(screen.getByText('Option B')).toBeInTheDocument()
-      expect(screen.getByText('Option C')).toBeInTheDocument()
-      expect(screen.getByText('Option D')).toBeInTheDocument()
-      expect(screen.getByText('Option E')).toBeInTheDocument()
+      // All 5 tags should be visible (each has a Remove button)
+      expect(getVisibleTagCount()).toBe(5)
+      expect(hasVisibleTag('Option A')).toBe(true)
+      expect(hasVisibleTag('Option B')).toBe(true)
+      expect(hasVisibleTag('Option C')).toBe(true)
+      expect(hasVisibleTag('Option D')).toBe(true)
+      expect(hasVisibleTag('Option E')).toBe(true)
     })
 
     it('limits visible tags to maxTags count', () => {
@@ -36,11 +55,13 @@ describe('Combobox.vue - Multi-select tag display', () => {
         }
       })
 
-      expect(screen.getByText('Option A')).toBeInTheDocument()
-      expect(screen.getByText('Option B')).toBeInTheDocument()
-      expect(screen.queryByText('Option C')).not.toBeInTheDocument()
-      expect(screen.queryByText('Option D')).not.toBeInTheDocument()
-      expect(screen.queryByText('Option E')).not.toBeInTheDocument()
+      // Only 2 tags should be visible
+      expect(getVisibleTagCount()).toBe(2)
+      expect(hasVisibleTag('Option A')).toBe(true)
+      expect(hasVisibleTag('Option B')).toBe(true)
+      expect(hasVisibleTag('Option C')).toBe(false)
+      expect(hasVisibleTag('Option D')).toBe(false)
+      expect(hasVisibleTag('Option E')).toBe(false)
     })
 
     it('shows collapsed indicator when tags exceed maxTags', () => {
@@ -76,9 +97,12 @@ describe('Combobox.vue - Multi-select tag display', () => {
         }
       })
 
-      expect(screen.queryByText('Option A')).not.toBeInTheDocument()
-      expect(screen.queryByText('Option B')).not.toBeInTheDocument()
-      expect(screen.queryByText('Option C')).not.toBeInTheDocument()
+      // With maxTags: 0, no tags should be visible (no Remove buttons)
+      expect(getVisibleTagCount()).toBe(0)
+      expect(hasVisibleTag('Option A')).toBe(false)
+      expect(hasVisibleTag('Option B')).toBe(false)
+      expect(hasVisibleTag('Option C')).toBe(false)
+      // The collapsed indicator should be shown
       expect(screen.getByText('+3 more')).toBeInTheDocument()
     })
   })

src/components/internal/OptionsPanel.vue

@@ -1,5 +1,4 @@
 <script lang="ts">
-// Re-export Direction type for backwards compatibility
 export type Direction = 'up' | 'down'
 </script>
 
@@ -15,7 +14,12 @@ import {
   areOptionsGrouped
 } from '../../types/selection'
 
-const props = withDefaults(
+const optionsComponents = {
+  listbox: ListboxOptions,
+  combobox: ComboboxOptions
+}
+
+withDefaults(
   defineProps<{
     /**
      * the component inside of which the option is rendered
@@ -78,14 +82,13 @@ const props = withDefaults(
   }
 )
 
-// Type guard for checking if options are grouped
 const isGrouped = (opts: T[] | OptionGroup<string, T>[]): opts is OptionGroup<string, T>[] => {
   return areOptionsGrouped(opts)
 }
 </script>
 <template>
   <component
-    :is="`${component}-options`"
+    :is="optionsComponents[component]"
     as="div"
     :static="inline"
     class="focus-visible:outline-none"

src/types/selection.ts

@@ -52,10 +52,7 @@ export interface ExtendedOption<V extends OptionValue = string> extends BaseOpti
  *   { value: 1, label: 'One', metadata: { priority: 1 } }
  * ]
  */
-export type Option<
-  V extends OptionValue = string,
-  T extends BaseOption<V> = ExtendedOption<V>
-> = T
+export type Option<V extends OptionValue = string, T extends BaseOption<V> = ExtendedOption<V>> = T
 
 /**
  * Generic OptionGroup for grouped options.