feat(RadioGroup): new component (#41)

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

src/runtime/components/Checkbox.vue

@@ -68,6 +68,9 @@ const checked = computed({
   }
 })
 
+// FIXME: I think there's a race condition between this and the v-model event.
+// This must be triggered after the value updates, otherwise the form validates
+// the previous value.
 function onChecked () {
   emitFormChange()
 }

src/runtime/components/DropdownMenu.vue

@@ -10,8 +10,6 @@ const appConfig = _appConfig as AppConfig & { ui: { dropdownMenu: Partial<typeof
 
 const dropdownMenu = tv({ extend: tv(theme), ...(appConfig.ui?.dropdownMenu || {}) })
 
-export type DropdownMenuUI = typeof dropdownMenu
-
 export interface DropdownMenuItem extends Omit<LinkProps, 'type'> {
   label?: string
   icon?: IconProps['name']

src/runtime/components/RadioGroup.vue

@@ -0,0 +1,138 @@
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { RadioGroupRootProps, RadioGroupRootEmits } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/radioGroup'
+
+const appConfig = _appConfig as AppConfig & { ui: { radioGroup: Partial<typeof theme> } }
+
+const radioGroup = tv({ extend: tv(theme), ...(appConfig.ui?.radioGroup || {}) })
+
+type RadioGroupVariants = VariantProps<typeof radioGroup>
+
+export type RadioGroupOption<T> = {
+  label: string
+  value: T
+  description: string
+}
+
+export interface RadioGroupProps<T> extends Omit<RadioGroupRootProps, 'asChild' | 'dir'> {
+  name?: string
+  legend?: string
+  options?: string[] | RadioGroupOption<T>[]
+  disabled?: boolean
+  class?: any
+  size?: RadioGroupVariants['size']
+  color?: RadioGroupVariants['color']
+  ui?: Partial<typeof radioGroup.slots>
+}
+
+export type RadioGroupEmits = {
+  change: [value: any]
+} & RadioGroupRootEmits
+
+export interface RadioGroupSlots<T> {
+  legend(): any
+  label(props: { option: RadioGroupOption<T> }): any
+  description(props: { option: RadioGroupOption<T>}): any
+}
+</script>
+
+<script setup lang="ts" generic="T extends string | undefined">
+import { computed } from 'vue'
+import { useId, useFormField } from '#imports'
+import { RadioGroupRoot, RadioGroupItem, RadioGroupIndicator, Label, useForwardPropsEmits } from 'radix-vue'
+import { reactivePick } from '@vueuse/core'
+
+const props = defineProps<RadioGroupProps<T>>()
+const emits = defineEmits<RadioGroupEmits>()
+defineSlots<RadioGroupSlots<T>>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'defaultValue', 'orientation', 'disabled', 'loop', 'name', 'required'), emits)
+
+const { emitFormChange, color, name, size, inputId: _inputId } = useFormField<RadioGroupProps<T>>(props)
+const inputId = _inputId.value ?? useId()
+
+const ui = computed(() => tv({ extend: radioGroup, slots: props.ui })({
+  size: size.value,
+  color: color.value,
+  disabled: props.disabled,
+  required: props.required
+}))
+
+function normalizeOption (option: any) {
+  if (['string', 'number', 'boolean'].includes(typeof option)) {
+    return {
+      id: `${inputId}:${option}`,
+      value: option,
+      label: option
+    }
+  }
+
+  return {
+    ...option,
+    id: `${inputId}:${option.value}`
+  }
+}
+
+const normalizedOptions = computed(() => {
+  if (!props.options) return []
+  return props.options.map(normalizeOption)
+})
+
+const modelValue = defineModel<T>({
+  set (value) {
+    emits('change', value)
+    return value
+  }
+})
+
+// FIXME: I think there's a race condition between this and the v-model event.
+// This must be triggered after the value updates, otherwise the form validates
+// the previous value.
+function onUpdate () {
+  emitFormChange()
+}
+</script>
+
+<template>
+  <RadioGroupRoot
+    :id="inputId"
+    v-model="modelValue"
+    v-bind="rootProps"
+    :name="name"
+    :class="ui.root({ class: props.class })"
+    @update:model-value="onUpdate"
+  >
+    <fieldset :class="ui.fieldset()">
+      <legend v-if="legend || $slots.legend" :class="ui.legend()">
+        <slot name="legend">
+          {{ legend }}
+        </slot>
+      </legend>
+      <div v-for="option in normalizedOptions" :key="option.value" :class="ui.option()">
+        <div :class="ui.container()">
+          <RadioGroupItem
+            :id="option.id"
+            :value="option.value"
+            :class="ui.base()"
+          >
+            <RadioGroupIndicator :class="ui.indicator()" />
+          </RadioGroupItem>
+        </div>
+
+        <div :class="ui.wrapper()">
+          <Label :class="ui.label()" :for="option.id">
+            <slot name="label" v-bind="{ option }">{{ option.label }}</slot>
+          </Label>
+          <p v-if="option.description || $slots.description" :class="ui.description()">
+            <slot name="description" v-bind="{ option }">
+              {{ option.description }}
+            </slot>
+          </p>
+        </div>
+      </div>
+    </fieldset>
+  </RadioGroupRoot>
+</template>

src/theme/index.ts

@@ -17,9 +17,10 @@ export { default as link } from './link'
 export { default as modal } from './modal'
 export { default as navigationMenu } from './navigationMenu'
 export { default as popover } from './popover'
+export { default as radioGroup } from './radioGroup'
 export { default as skeleton } from './skeleton'
 export { default as slideover } from './slideover'
 export { default as switch } from './switch'
 export { default as tabs } from './tabs'
-export { default as tooltip } from './tooltip'
 export { default as textarea } from './textarea'
+export { default as tooltip } from './tooltip'

src/theme/radioGroup.ts

@@ -0,0 +1,86 @@
+export default (config: { colors: string[] }) => ({
+  slots: {
+    root: 'relative',
+    fieldset: 'flex flex-col',
+    legend: 'mb-1 block font-medium text-gray-700 dark:text-gray-200',
+
+    option: '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',
+
+    wrapper: 'ms-2',
+    label: 'block font-medium text-gray-700 dark:text-gray-200',
+    description: 'text-gray-500 dark:text-gray-400'
+  },
+  variants: {
+    color: Object.fromEntries(config.colors.map((color: string) => [
+      color, {
+        base: `focus-visible:outline-${color}-500 dark:focus-visible:outline-${color}-400`,
+        indicator: `bg-${color}-500 dark:bg-${color}-400`
+      }
+    ])),
+
+    size: {
+      '2xs': {
+        fieldset: 'gap-0.5',
+        base: 'size-3',
+        option: 'text-xs',
+        container: 'h-4',
+        indicator: 'after:size-1'
+      },
+      xs: {
+        fieldset: 'gap-0.5',
+        base: 'size-3.5',
+        option: 'text-xs',
+        container: 'h-4',
+        indicator: 'after:size-1'
+      },
+      sm: {
+        fieldset: 'gap-1',
+        base: 'size-4',
+        option: 'text-sm',
+        container: 'h-5',
+        indicator: 'after:size-1.5'
+      },
+      md: {
+        fieldset: 'gap-1',
+        base: 'size-[18px]',
+        option: 'text-sm',
+        container: 'h-5',
+        indicator: 'after:size-1.5'
+      },
+      lg: {
+        fieldset: 'gap-1.5',
+        base: 'size-5',
+        option: 'text-base',
+        container: 'h-6',
+        indicator: 'after:size-2'
+      },
+      xl: {
+        fieldset: 'gap-1.5',
+        base: 'size-[22px]',
+        option: 'text-base',
+        container: 'h-6',
+        indicator: 'after:size-2'
+      }
+    },
+
+    disabled: {
+      true: {
+        container: 'cursor-not-allowed opacity-75'
+      }
+    },
+
+    required: {
+      true: {
+        legend: 'after:content-[\'*\'] after:ms-0.5 after:text-red-500 dark:after:text-red-400'
+      }
+    }
+  },
+
+  defaultVariants: {
+    size: 'sm',
+    color: 'primary'
+  }
+})