refacor: radiop-group

Author: Barbapapazes

.playground/src/pages/components/radio-group.vue

@@ -17,5 +17,7 @@ const value = ref()
 <template>
   <div class="flex flex-col gap-4">
     <RadioGroup v-model="value" :items="items" :color="color" />
+
+    <RadioGroup v-model="value" :items="items" :color="color" variant="table" />
   </div>
 </template>

src/components/RadioGroup/RadioGroup.test.ts

@@ -6,6 +6,8 @@ import { describe, expect, it } from 'vitest'
 
 describe('radioGroup', () => {
   const sizes = Object.keys(theme.variants.size) as any
+  const variants = Object.keys(theme.variants.variant) as any
+  const indicators = Object.keys(theme.variants.indicator) as any
 
   const items = [
     { value: '1', label: 'Option 1' },
@@ -25,9 +27,12 @@ describe('radioGroup', () => {
     ['with disabled', { props: { ...props, disabled: true } }],
     ['with description', { props: { items: items.map((opt, count) => ({ ...opt, description: `Description ${count}` })) } }],
     ['with required', { props: { ...props, legend: 'Legend', required: true } }],
-    ...sizes.map((size: string) => [`with size ${size}`, { props: { ...props, size } }]),
-    ['with color neutral', { props: { color: 'neutral', defaultValue: '1' } }],
-    ['with orientation', { props: { ...props, orientation: 'horizontal' } }],
+    ...sizes.map((size: string) => [`with size ${size}`, { props: { ...props, size, defaultValue: '1' } }]),
+    ...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { ...props, variant, defaultValue: '1' } }]),
+    ...variants.map((variant: string) => [`with neutral variant ${variant}`, { props: { ...props, variant, color: 'neutral', defaultValue: '1' } }]),
+    ...variants.map((variant: string) => [`with horizontal variant ${variant}`, { props: { ...props, variant, orientation: 'horizontal', defaultValue: '1' } }]),
+    ...indicators.map((indicator: string) => [`with indicator ${indicator}`, { props: { ...props, indicator, defaultValue: '1' } }]),
+    ['with ariaLabel', { props, attrs: { 'aria-label': 'Aria label' } }],
     ['with as', { props: { ...props, as: 'section' } }],
     ['with class', { props: { ...props, class: 'absolute' } }],
     ['with ui', { props: { ...props, ui: { wrapper: 'ms-4' } } }],

src/components/RadioGroup/RadioGroup.vue

@@ -1,57 +1,55 @@
 <script lang="ts">
-import type { AcceptableValue, RadioGroupRootEmits, RadioGroupRootProps } from 'reka-ui'
-import type { VariantProps } from 'tailwind-variants'
+import type { AcceptableValue, ComponentConfig } from '@/ui/types/utils'
+import type { RadioGroupRootEmits, RadioGroupRootProps } from 'reka-ui'
 import { useFormField } from '@/ui/composables/useFormField'
 import theme from '@/ui/theme/radio-group'
 import { get } from '@/ui/utils/get'
 import { reactivePick } from '@vueuse/shared'
-import { Label, RadioGroupIndicator, RadioGroupRoot, RadioGroupItem as RRadioGroupItem, useForwardPropsEmits } from 'reka-ui'
+import { Label, RadioGroupIndicator, RadioGroupRoot, RadioGroupItem as RekaRadiopGroupItem, useForwardPropsEmits } from 'reka-ui'
 import { tv } from 'tailwind-variants'
 import { computed, useId } from 'vue'
 
-const radioGroup = tv(theme)
+type RadioGroup = ComponentConfig<typeof theme>
 
-type RadioGroupVariants = VariantProps<typeof radioGroup>
-
-export interface RadioGroupItem {
+export type RadioGroupValue = AcceptableValue
+export type RadioGroupItem = {
   label?: string
   description?: string
   disabled?: boolean
   value?: string
-}
+  [key: string]: any
+} | RadioGroupValue
 
-export interface RadioGroupProps<T> extends Pick<RadioGroupRootProps, 'defaultValue' | 'disabled' | 'loop' | 'modelValue' | 'name' | 'required'> {
+export interface RadioGroupProps<T extends RadioGroupItem = RadioGroupItem> extends Pick<RadioGroupRootProps, 'defaultValue' | 'disabled' | 'loop' | 'modelValue' | 'name' | 'required'> {
   as?: any
   legend?: string
   valueKey?: string
   labelKey?: string
   descriptionKey?: string
   items?: T[]
-  size?: RadioGroupVariants['size']
-  color?: RadioGroupVariants['color']
-  /**
-   * The orientation the radio buttons are laid out.
-   * @defaultValue 'vertical'
-   */
+  size?: RadioGroup['variants']['size']
+  variant?: RadioGroup['variants']['variant']
+  color?: RadioGroup['variants']['color']
   orientation?: RadioGroupRootProps['orientation']
+  indicator?: RadioGroup['variants']['indicator']
   class?: any
-  ui?: Partial<typeof radioGroup.slots>
+  ui?: RadioGroup['slots']
 }
 
 export type RadioGroupEmits = RadioGroupRootEmits & {
   change: [payload: Event]
 }
 
-type SlotProps<T> = (props: { item: T, modelValue?: AcceptableValue }) => any
+type SlotProps<T extends RadioGroupItem> = (props: { item: T & { id: string }, modelValue?: RadioGroupValue }) => any
 
-export interface RadioGroupSlots<T> {
+export interface RadioGroupSlots<T extends RadioGroupItem = RadioGroupItem> {
   legend: (props?: object) => any
   label: SlotProps<T>
   description: SlotProps<T>
 }
 </script>
 
-<script setup lang="ts" generic="T extends RadioGroupItem | AcceptableValue">
+<script setup lang="ts" generic="T extends RadioGroupItem">
 const props = withDefaults(defineProps<RadioGroupProps<T>>(), {
   valueKey: 'value',
   labelKey: 'label',
@@ -63,23 +61,33 @@ const slots = defineSlots<RadioGroupSlots<T>>()
 
 const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'orientation', 'loop', 'required'), emits)
 
-const { color, name, size, id: _id, disabled, ariaAttrs } = useFormField<RadioGroupProps<T>>(props)
+const { color, name, size, id: _id, disabled, ariaAttrs } = useFormField<RadioGroupProps<T>>(props, { bind: false })
 const id = _id.value ?? useId()
 
-const ui = computed(() => radioGroup({
+const ui = computed(() => tv(theme)({
   size: size.value,
   color: color.value,
   disabled: disabled.value,
   required: props.required,
   orientation: props.orientation,
+  variant: props.variant,
+  indicator: props.indicator,
 }))
 
 function normalizeItem(item: any) {
-  if (['string', 'number', 'boolean'].includes(typeof item)) {
+  if (item === null) {
+    return {
+      id: `${id}:null`,
+      value: undefined,
+      label: undefined,
+    }
+  }
+
+  if (typeof item === 'string' || typeof item === 'number') {
     return {
       id: `${id}:${item}`,
-      value: item,
-      label: item,
+      value: String(item),
+      label: String(item),
     }
   }
 
@@ -127,29 +135,32 @@ function onUpdate(value: any) {
           {{ legend }}
         </slot>
       </legend>
-      <div v-for="item in normalizedItems" :key="item.value" :class="ui.item({ class: props.ui?.item })">
+
+      <component :is="variant === 'list' ? 'div' : Label" v-for="item in normalizedItems" :key="item.value" :class="ui.item({ class: props.ui?.item })">
         <div :class="ui.container({ class: props.ui?.container })">
-          <RRadioGroupItem
+          <RekaRadiopGroupItem
             :id="item.id"
             :value="item.value"
-            :disabled="disabled"
-            :class="ui.base({ class: props.ui?.base })"
+            :disabled="item.disabled"
+            :class="ui.base({ class: props.ui?.base, disabled: item.disabled })"
           >
             <RadioGroupIndicator :class="ui.indicator({ class: props.ui?.indicator })" />
-          </RRadioGroupItem>
+          </RekaRadiopGroupItem>
         </div>
 
-        <div :class="ui.wrapper({ class: props.ui?.wrapper })">
-          <Label :class="ui.label({ class: props.ui?.label })" :for="item.id">
-            <slot name="label" :item="item" :model-value="modelValue">{{ item.label }}</slot>
-          </Label>
+        <div v-if="(item.label || !!slots.label) || (item.description || !!slots.description)" :class="ui.wrapper({ class: props.ui?.wrapper })">
+          <component :is="variant === 'list' ? Label : 'p'" v-if="item.label || !!slots.label" :for="item.id" :class="ui.label({ class: props.ui?.label })">
+            <slot name="label" :item="item" :model-value="(modelValue as RadioGroupValue)">
+              {{ item.label }}
+            </slot>
+          </component>
           <p v-if="item.description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
-            <slot name="description" :item="item" :model-value="modelValue">
+            <slot name="description" :item="item" :model-value="(modelValue as RadioGroupValue)">
               {{ item.description }}
             </slot>
           </p>
         </div>
-      </div>
+      </component>
     </fieldset>
   </RadioGroupRoot>
 </template>