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

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
2026-01-14 12:14:41 +01:00 · 2024-05-10 12:31:20 +02:00
parent 2480efe6e5
commit 810d278ea7
7 changed files with 128 additions and 99 deletions
--- a/playground/components/FormElementsExample.vue
+++ b/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">
--- a/playground/pages/radio-group.vue
+++ b/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">
-      <URadioGroup :options="options" default-value="1" />
-      <URadioGroup :options="literalOptions" />
-      <URadioGroup :options="options" label="Disabled" disabled />
-      <URadioGroup :options="options" color="red" default-value="1" />
-      <URadioGroup :options="options" orientation="horizontal" />
+    <div class="flex flex-col gap-4 ml-[100px]">
+      <URadioGroup :items="items" default-value="1" />
+      <URadioGroup :items="literalOptions" />
+      <URadioGroup :items="items" label="Disabled" disabled />
+      <URadioGroup :items="items" color="red" default-value="1" />
+      <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 :options="options" legend="Legend" required />
-      <URadioGroup :options="options">
+      <URadioGroup :items="items" legend="Legend" />
+      <URadioGroup :items="items" legend="Legend" required />
+      <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>
--- a/playground/pages/toast.vue
+++ b/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>
--- a/src/runtime/components/RadioGroup.vue
+++ b/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
-  description(props: { option: RadioGroupOption<T> }): any
+  label: SlotProps<T>
+  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) {
-  if (['string', 'number', 'boolean'].includes(typeof option)) {
+function normalizeItem(item: any) {
+  if (['string', 'number', 'boolean'].includes(typeof item)) {
    return {
-      id: `${id}:${option}`,
-      value: option,
-      label: option
+      id: `${id}:${item}`,
+      value: item,
+      label: item
    }
  }

  return {
-    ...option,
-    id: `${id}:${option.value}`
+    ...item,
+    id: `${id}:${item.value}`
  }
 }

-const normalizedOptions = computed(() => {
-  if (!props.options) return []
-  return props.options.map(normalizeOption)
+const normalizedItems = computed(() => {
+  if (!props.items) return []
+  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"
-            :value="option.value"
+            :id="item.id"
+            :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">
-            <slot name="label" v-bind="{ option }">{{ option.label }}</slot>
+          <Label :class="ui.label()" :for="item.id">
+            <slot name="label" :item="item">{{ item.label }}</slot>
          </Label>
-          <p v-if="option.description || !!slots.description" :class="ui.description()">
-            <slot name="description" v-bind="{ option }">
-              {{ option.description }}
+          <p v-if="item.description || !!slots.description" :class="ui.description()">
+            <slot name="description" :item="item">
+              {{ item.description }}
            </slot>
          </p>
        </div>
--- a/src/theme/radio-group.ts
+++ b/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'
      }
--- a/test/components/RadioGroup.spec.ts
+++ b/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 defaultValue', { props: { options, defaultValue: '1' } }],
-    ['with disabled', { props: { options, disabled: true } }],
-    ['with description', { props: { options: options.map((opt, count) => ({ ...opt, description: `Description ${count}` })) } }],
-    ['with required', { props: { options, legend: 'Legend', required: true } }],
-    ...sizes.map((size: string) => [`with size ${size}`, { props: { options, size } }]),
-    ...colors.map((color: string) => [`with color ${color}`, { props: { options, color } }]),
-    ['with class', { props: { options, class: 'absolute' } }],
-    ['with ui', { props: { ui: { options, wrapper: 'ms-4' } } }],
-    ['with orientation', { props: { options, orientation: 'horizontal' } }],
+    ['with items', { props: { items } }],
+    ['with defaultValue', { props: { items, defaultValue: '1' } }],
+    ['with disabled', { props: { items, disabled: true } }],
+    ['with description', { props: { items: items.map((opt, count) => ({ ...opt, description: `Description ${count}` })) } }],
+    ['with required', { props: { items, legend: 'Legend', required: true } }],
+    ...sizes.map((size: string) => [`with size ${size}`, { props: { items, size } }]),
+    ...colors.map((color: string) => [`with color ${color}`, { props: { items, color } }]),
+    ['with class', { props: { items, class: 'absolute' } }],
+    ['with ui', { props: { ui: { items, wrapper: 'ms-4' } } }],
+    ['with orientation', { props: { items, orientation: 'horizontal' } }],
    // Slots
-    ['with legend slot', { props: { options }, slots: { label: () => 'Legend slot' } }],
-    ['with label slot', { props: { options }, slots: { label: () => 'Label slot' } }],
-    ['with description slot', { slots: { label: () => 'Description slot' } }]
+    ['with legend slot', { props: { items }, slots: { label: () => 'Legend slot' } }],
+    ['with label slot', { props: { items }, slots: { label: () => 'Label 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()
--- a/test/components/snapshots/RadioGroup.spec.ts.snap
+++ b/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">