feat(RadioGroup): new component (#41)

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

playground/app.vue

@@ -25,6 +25,7 @@ const components = [
   'modal',
   'navigation-menu',
   'popover',
+  'radio-group',
   'skeleton',
   'slideover',
   'switch',

playground/components/FormElementsExample.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { z } from 'zod'
+import type { FormSubmitEvent } from '#ui/types/form'
+
+const form = ref()
+
+const state = reactive({
+  input: undefined,
+  inputMenu: undefined,
+  textarea: undefined,
+  select: undefined,
+  selectMenu: undefined,
+  checkbox: undefined,
+  toggle: undefined,
+  radio: undefined,
+  radioGroup: undefined,
+  switch: undefined,
+  range: undefined
+})
+
+const schema = z.object({
+  input: z.string().min(10),
+  // inputMenu: z.any().refine(option => option?.value === 'option-2', {
+  //   message: 'Select Option 2'
+  // }),
+  textarea: z.string().min(10),
+  // select: z.string().refine(value => value === 'option-2', {
+  //   message: 'Select Option 2'
+  // }),
+  // selectMenu: z.any().refine(option => option?.value === 'option-2', {
+  //   message: 'Select Option 2'
+  // }),
+  // toggle: z.boolean().refine(value => value === true, {
+  //   message: 'Toggle me'
+  // }),
+  checkbox: z.boolean().refine(value => value === true, {
+    message: 'Check me'
+  }),
+  radioGroup: z.string().refine(value => value === 'option-2', {
+    message: 'Select Option 2'
+  })
+  // range: z.number().max(20, { message: 'Must be less than 20' })
+})
+
+type Schema = z.output<typeof schema>
+
+const options = [
+  { label: 'Option 1', value: 'option-1' },
+  { label: 'Option 2', value: 'option-2' },
+  { label: 'Option 3', value: 'option-3' }
+]
+
+function onSubmit (event: FormSubmitEvent<Schema>) {
+  console.log(event.data)
+}
+</script>
+
+<template>
+  <UForm
+    ref="form"
+    :state="state"
+    :schema="schema"
+    class="gap-4 flex flex-col w-60"
+    @submit="onSubmit"
+  >
+    <UFormField label="Input" name="input">
+      <UInput v-model="state.input" placeholder="john@lennon.com" />
+    </UFormField>
+
+    <UFormField label="Text area" name="textarea">
+      <UTextarea v-model="state.textarea" />
+    </UFormField>
+
+    <UFormField name="checkbox">
+      <UCheckbox v-model="state.checkbox" label="I accept the terms and conditions" />
+    </UFormField>
+
+    <UFormField name="radioGroup">
+      <URadioGroup v-model="state.radioGroup" legend="Radio group" :options="options" />
+    </UFormField>
+
+    <div class="flex gap-2">
+      <UButton color="gray" type="submit">
+        Submit
+      </UButton>
+
+      <UButton variant="outline" @click="form.clear()">
+        Clear
+      </UButton>
+    </div>
+  </UForm>
+</template>

playground/pages/form.vue

@@ -116,6 +116,7 @@ function onSubmit (event: FormSubmitEvent<User>) {
     <div class="flex gap-4">
       <FormNestedExample />
       <FormNestedListExample />
+      <FormElementsExample />
     </div>
   </div>
 </template>

playground/pages/radio-group.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import theme from '#build/ui/checkbox'
+
+const sizes = Object.keys(theme.variants.size)
+
+const literalOptions = [
+  'Option 1',
+  'Option 2',
+  'Option 3'
+]
+const options = [
+  { value: '1', label: 'Option 1' },
+  { value: '2', label: 'Option 2' },
+  { value: '3', label: 'Option 3' }
+]
+
+
+const optionsWithDescription = [
+  { value: '1', label: 'Option 1', description: 'Description 1' },
+  { value: '2', label: 'Option 2', description: 'Description 2' },
+  { value: '3', label: 'Option 3', description: 'Description 3' }
+]
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-4">
+    <div class="flex flex-col gap-4 ml-[-142px]">
+      <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>
+
+    <div class="flex items-center gap-4">
+      <URadioGroup v-for="size in sizes" :key="size" :size="(size as any)" :options="options" />
+    </div>
+
+    <div class="flex items-center gap-4 ml-[75px]">
+      <URadioGroup v-for="size in sizes" :key="size" :size="(size as any)" :options="optionsWithDescription" />
+    </div>
+
+    <div class="flex gap-4 ml-[-142px]">
+      <URadioGroup :options="options" legend="Legend" />
+      <URadioGroup :options="options" legend="Legend" required />
+      <URadioGroup :options="options">
+        <template #legend>
+          <span class="italic font-bold">
+            With slots
+          </span>
+        </template>
+        <template #label="{ option }">
+          <span class="italic">
+            {{ option.label }}
+          </span>
+        </template>
+      </URadioGroup>
+    </div>
+  </div>
+</template>