chore(RadioGroup): rename options prop to items (#98)

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

playground/components/FormElementsExample.vue

@@ -63,7 +63,7 @@ function onSubmit(event: FormSubmitEvent<Schema>) {
     </UFormField>
 
     <UFormField name="radioGroup">
-      <URadioGroup v-model="state.radioGroup" legend="Radio group" :options="options" />
+      <URadioGroup v-model="state.radioGroup" legend="Radio group" :items="options" />
     </UFormField>
 
     <UFormField name="switch">

playground/pages/radio-group.vue

@@ -8,13 +8,13 @@ const literalOptions = [
   'Option 2',
   'Option 3'
 ]
-const options = [
+const items = [
   { value: '1', label: 'Option 1' },
   { value: '2', label: 'Option 2' },
   { value: '3', label: 'Option 3' }
 ]
 
-const optionsWithDescription = [
+const itemsWithDescription = [
   { value: '1', label: 'Option 1', description: 'Description 1' },
   { value: '2', label: 'Option 2', description: 'Description 2' },
   { value: '3', label: 'Option 3', description: 'Description 3' }
@@ -23,38 +23,38 @@ const optionsWithDescription = [
 
 <template>
   <div class="flex flex-col items-center gap-4">
-    <div class="flex flex-col gap-4">
+    <div class="flex flex-col gap-4 ml-[100px]">
-      <URadioGroup :options="options" default-value="1" />
+      <URadioGroup :items="items" default-value="1" />
-      <URadioGroup :options="literalOptions" />
+      <URadioGroup :items="literalOptions" />
-      <URadioGroup :options="options" label="Disabled" disabled />
+      <URadioGroup :items="items" label="Disabled" disabled />
-      <URadioGroup :options="options" color="red" default-value="1" />
+      <URadioGroup :items="items" color="red" default-value="1" />
-      <URadioGroup :options="options" orientation="horizontal" />
+      <URadioGroup :items="items" orientation="horizontal" class="ml-[-91px]" />
     </div>
 
     <div class="flex items-center gap-4 ml-[34px]">
-      <URadioGroup v-for="size in sizes" :key="size" :size="(size as any)" :options="options" />
+      <URadioGroup v-for="size in sizes" :key="size" :size="(size as any)" :items="items" />
     </div>
 
     <div class="flex items-center gap-4 ml-[74px]">
-      <URadioGroup v-for="size in sizes" :key="size" :size="(size as any)" :options="optionsWithDescription" />
+      <URadioGroup v-for="size in sizes" :key="size" :size="(size as any)" :items="itemsWithDescription" />
     </div>
 
     <div class="flex gap-4">
-      <URadioGroup :options="options" legend="Legend" />
+      <URadioGroup :items="items" legend="Legend" />
-      <URadioGroup :options="options" legend="Legend" required />
+      <URadioGroup :items="items" legend="Legend" required />
-      <URadioGroup :options="options">
+      <URadioGroup :items="items">
         <template #legend>
           <span class="italic font-bold">
             With slots
           </span>
         </template>
-        <template #label="{ option }">
+        <template #label="{ item }">
           <span class="italic">
-            {{ option.label }}
+            {{ item.label }}
           </span>
         </template>
       </URadioGroup>
     </div>
-    <URadioGroup :options="options" legend="Legend" orientation="horizontal" required />
+    <URadioGroup :items="items" legend="Legend" orientation="horizontal" required />
   </div>
 </template>

playground/pages/toast.vue

@@ -109,7 +109,7 @@ function removeToast() {
 <template>
   <div class="flex flex-col items-center gap-8">
     <div class="flex flex-col gap-2">
-      <URadioGroup v-model="appConfig.toaster.position" :options="positions" />
+      <URadioGroup v-model="appConfig.toaster.position" :items="positions" />
       <UCheckbox v-model="appConfig.toaster.expand" label="Expand" class="mt-1" />
       <UInput v-model="appConfig.toaster.duration" label="Duration" type="number" class="mt-1" />
     </div>

src/runtime/components/RadioGroup.vue

@@ -11,15 +11,15 @@ const radioGroup = tv({ extend: tv(theme), ...(appConfig.ui?.radioGroup || {}) }
 
 type RadioGroupVariants = VariantProps<typeof radioGroup>
 
-export type RadioGroupOption<T> = {
+export type RadioGroupItem = {
   label: string
-  value: T
+  value: string
   description?: string
 }
 
 export interface RadioGroupProps<T> extends Omit<RadioGroupRootProps, 'asChild' | 'dir'> {
   legend?: string
-  options?: string[] | RadioGroupOption<T>[]
+  items?: T[]
   class?: any
   size?: RadioGroupVariants['size']
   color?: RadioGroupVariants['color']
@@ -30,14 +30,16 @@ export type RadioGroupEmits = {
   change: [value: any]
 } & RadioGroupRootEmits
 
+type SlotProps<T> = (props: { item: T }) => any
+
 export interface RadioGroupSlots<T> {
   legend(): any
-  label(props: { option: RadioGroupOption<T> }): any
+  label: SlotProps<T>
-  description(props: { option: RadioGroupOption<T> }): any
+  description: SlotProps<T>
 }
 </script>
 
-<script setup lang="ts" generic="T extends string | undefined">
+<script setup lang="ts" generic="T extends RadioGroupItem | string">
 import { computed } from 'vue'
 import { RadioGroupRoot, RadioGroupItem, RadioGroupIndicator, Label, useForwardPropsEmits } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
@@ -47,7 +49,7 @@ const props = withDefaults(defineProps<RadioGroupProps<T>>(), { orientation: 've
 const emits = defineEmits<RadioGroupEmits>()
 const slots = defineSlots<RadioGroupSlots<T>>()
 
-const modelValue = defineModel<T>({
+const modelValue = defineModel<string>({
   set(value) {
     emits('change', value)
     return value
@@ -67,24 +69,24 @@ const ui = computed(() => tv({ extend: radioGroup, slots: props.ui })({
   orientation: props.orientation
 }))
 
-function normalizeOption(option: any) {
+function normalizeItem(item: any) {
-  if (['string', 'number', 'boolean'].includes(typeof option)) {
+  if (['string', 'number', 'boolean'].includes(typeof item)) {
     return {
-      id: `${id}:${option}`,
+      id: `${id}:${item}`,
-      value: option,
+      value: item,
-      label: option
+      label: item
     }
   }
 
   return {
-    ...option,
+    ...item,
-    id: `${id}:${option.value}`
+    id: `${id}:${item.value}`
   }
 }
 
-const normalizedOptions = computed(() => {
+const normalizedItems = computed(() => {
-  if (!props.options) return []
+  if (!props.items) return []
-  return props.options.map(normalizeOption)
+  return props.items.map(normalizeItem)
 })
 
 // FIXME: I think there's a race condition between this and the v-model event.
@@ -111,11 +113,11 @@ function onUpdate() {
           {{ legend }}
         </slot>
       </legend>
-      <div v-for="option in normalizedOptions" :key="option.value" :class="ui.option()">
+      <div v-for="item in normalizedItems" :key="item.value" :class="ui.item()">
         <div :class="ui.container()">
           <RadioGroupItem
-            :id="option.id"
+            :id="item.id"
-            :value="option.value"
+            :value="item.value"
             :disabled="disabled"
             :class="ui.base()"
           >
@@ -124,12 +126,12 @@ function onUpdate() {
         </div>
 
         <div :class="ui.wrapper()">
-          <Label :class="ui.label()" :for="option.id">
+          <Label :class="ui.label()" :for="item.id">
-            <slot name="label" v-bind="{ option }">{{ option.label }}</slot>
+            <slot name="label" :item="item">{{ item.label }}</slot>
           </Label>
-          <p v-if="option.description || !!slots.description" :class="ui.description()">
+          <p v-if="item.description || !!slots.description" :class="ui.description()">
-            <slot name="description" v-bind="{ option }">
+            <slot name="description" :item="item">
-              {{ option.description }}
+              {{ item.description }}
             </slot>
           </p>
         </div>

src/theme/radio-group.ts

@@ -3,7 +3,7 @@ export default (config: { colors: string[] }) => ({
     root: 'relative',
     fieldset: 'flex',
     legend: 'mb-1 block font-medium text-gray-700 dark:text-gray-200',
-    option: 'flex items-start',
+    item: 'flex items-start',
     base: 'rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-white dark:focus-visible:outline-offset-gray-900',
     indicator: 'flex items-center justify-center size-full rounded-full after:bg-white dark:after:bg-gray-900 after:rounded-full',
     container: 'flex items-center',
@@ -29,35 +29,35 @@ export default (config: { colors: string[] }) => ({
       xs: {
         fieldset: 'gap-0.5',
         base: 'size-3',
-        option: 'text-xs',
+        item: 'text-xs',
         container: 'h-4',
         indicator: 'after:size-1'
       },
       sm: {
         fieldset: 'gap-0.5',
         base: 'size-3.5',
-        option: 'text-xs',
+        item: 'text-xs',
         container: 'h-4',
         indicator: 'after:size-1'
       },
       md: {
         fieldset: 'gap-1',
         base: 'size-4',
-        option: 'text-sm',
+        item: 'text-sm',
         container: 'h-5',
         indicator: 'after:size-1.5'
       },
       lg: {
         fieldset: 'gap-1',
         base: 'size-4.5',
-        option: 'text-sm',
+        item: 'text-sm',
         container: 'h-5',
         indicator: 'after:size-1.5'
       },
       xl: {
         fieldset: 'gap-1.5',
         base: 'size-5',
-        option: 'text-base',
+        item: 'text-base',
         container: 'h-6',
         indicator: 'after:size-2'
       }

test/components/RadioGroup.spec.ts

@@ -7,27 +7,27 @@ describe('RadioGroup', () => {
   const sizes = Object.keys(theme.variants.size) as any
   const colors = Object.keys(theme.variants.color) as any
 
-  const options = [
+  const items = [
     { value: '1', label: 'Option 1' },
     { value: '2', label: 'Option 2' },
     { value: '3', label: 'Option 3' }
   ]
 
   it.each([
-    ['with options', { props: { options } }],
+    ['with items', { props: { items } }],
-    ['with defaultValue', { props: { options, defaultValue: '1' } }],
+    ['with defaultValue', { props: { items, defaultValue: '1' } }],
-    ['with disabled', { props: { options, disabled: true } }],
+    ['with disabled', { props: { items, disabled: true } }],
-    ['with description', { props: { options: options.map((opt, count) => ({ ...opt, description: `Description ${count}` })) } }],
+    ['with description', { props: { items: items.map((opt, count) => ({ ...opt, description: `Description ${count}` })) } }],
-    ['with required', { props: { options, legend: 'Legend', required: true } }],
+    ['with required', { props: { items, legend: 'Legend', required: true } }],
-    ...sizes.map((size: string) => [`with size ${size}`, { props: { options, size } }]),
+    ...sizes.map((size: string) => [`with size ${size}`, { props: { items, size } }]),
-    ...colors.map((color: string) => [`with color ${color}`, { props: { options, color } }]),
+    ...colors.map((color: string) => [`with color ${color}`, { props: { items, color } }]),
-    ['with class', { props: { options, class: 'absolute' } }],
+    ['with class', { props: { items, class: 'absolute' } }],
-    ['with ui', { props: { ui: { options, wrapper: 'ms-4' } } }],
+    ['with ui', { props: { ui: { items, wrapper: 'ms-4' } } }],
-    ['with orientation', { props: { options, orientation: 'horizontal' } }],
+    ['with orientation', { props: { items, orientation: 'horizontal' } }],
     // Slots
-    ['with legend slot', { props: { options }, slots: { label: () => 'Legend slot' } }],
+    ['with legend slot', { props: { items }, slots: { label: () => 'Legend slot' } }],
-    ['with label slot', { props: { options }, slots: { label: () => 'Label slot' } }],
+    ['with label slot', { props: { items }, slots: { label: () => 'Label slot' } }],
-    ['with description slot', { slots: { label: () => 'Description slot' } }]
+    ['with description slot', { props: { items }, slots: { label: () => 'Description slot' } }]
   ])('renders %s correctly', async (nameOrHtml: string, options: { props?: RadioGroupProps<any>, slots?: Partial<RadioGroupSlots<any>> }) => {
     const html = await ComponentRender(nameOrHtml, options, RadioGroup)
     expect(html).toMatchSnapshot()

test/components/__snapshots__/RadioGroup.spec.ts.snap

@@ -210,9 +210,36 @@ exports[`RadioGroup > renders with description correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with description slot correctly 1`] = `
-"<div role="radiogroup" required="false" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="18" class="relative">
+"<div role="radiogroup" required="false" aria-orientation="vertical" aria-required="false" dir="ltr" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="18" class="relative" tabindex="0">
   <fieldset class="flex flex-col gap-1">
     <!--v-if-->
+    <div class="flex items-start text-sm">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="18:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-2"><label for="18:1" class="block font-medium text-gray-700 dark:text-gray-200">Description slot</label>
+        <!--v-if-->
+      </div>
+    </div>
+    <div class="flex items-start text-sm">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="18:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-2"><label for="18:2" class="block font-medium text-gray-700 dark:text-gray-200">Description slot</label>
+        <!--v-if-->
+      </div>
+    </div>
+    <div class="flex items-start text-sm">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="18:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-2"><label for="18:3" class="block font-medium text-gray-700 dark:text-gray-200">Description slot</label>
+        <!--v-if-->
+      </div>
+    </div>
   </fieldset>
 </div>"
 `;
@@ -252,6 +279,41 @@ exports[`RadioGroup > renders with disabled correctly 1`] = `
 </div>"
 `;
 
+exports[`RadioGroup > renders with items correctly 1`] = `
+"<div role="radiogroup" required="false" aria-orientation="vertical" aria-required="false" dir="ltr" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="0" class="relative" tabindex="0">
+  <fieldset class="flex flex-col gap-1">
+    <!--v-if-->
+    <div class="flex items-start text-sm">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-2"><label for="0:1" class="block font-medium text-gray-700 dark:text-gray-200">Option 1</label>
+        <!--v-if-->
+      </div>
+    </div>
+    <div class="flex items-start text-sm">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-2"><label for="0:2" class="block font-medium text-gray-700 dark:text-gray-200">Option 2</label>
+        <!--v-if-->
+      </div>
+    </div>
+    <div class="flex items-start text-sm">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-2"><label for="0:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
+        <!--v-if-->
+      </div>
+    </div>
+  </fieldset>
+</div>"
+`;
+
 exports[`RadioGroup > renders with label slot correctly 1`] = `
 "<div role="radiogroup" required="false" aria-orientation="vertical" aria-required="false" dir="ltr" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="17" class="relative" tabindex="0">
   <fieldset class="flex flex-col gap-1">
@@ -322,41 +384,6 @@ exports[`RadioGroup > renders with legend slot correctly 1`] = `
 </div>"
 `;
 
-exports[`RadioGroup > renders with options correctly 1`] = `
-"<div role="radiogroup" required="false" aria-orientation="vertical" aria-required="false" dir="ltr" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="0" class="relative" tabindex="0">
-  <fieldset class="flex flex-col gap-1">
-    <!--v-if-->
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="0:1" class="block font-medium text-gray-700 dark:text-gray-200">Option 1</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="0:2" class="block font-medium text-gray-700 dark:text-gray-200">Option 2</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-orientation="vertical" data-active="false" id="0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="0:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
-        <!--v-if-->
-      </div>
-    </div>
-  </fieldset>
-</div>"
-`;
-
 exports[`RadioGroup > renders with orientation correctly 1`] = `
 "<div role="radiogroup" required="false" aria-orientation="horizontal" aria-required="false" dir="ltr" data-orientation="horizontal" style="outline-color: none; outline-style: none; outline-width: initial;" id="15" class="relative" tabindex="0">
   <fieldset class="flex flex-row gap-1">