feat(RadioGroup): new component (#730)

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

docs/components/content/ComponentPreset.vue

@@ -24,7 +24,7 @@ const name = `U${upperFirst(camelName)}`
 const preset = config[camelName]
 
 const { data: ast } = await useAsyncData(`${name}-preset`, () => transformContent('content:_markdown.md', `
-\`\`\`json
+\`\`\`json [${name}.vue]
 ${JSON.stringify(preset, null, 2)}
 \`\`\`\
 `, {

docs/components/content/examples/FormExampleElements.vue

@@ -16,6 +16,7 @@ const state = reactive({
   checkbox: undefined,
   toggle: undefined,
   radio: undefined,
+  radioGroup: undefined,
   switch: undefined,
   range: undefined
 })
@@ -38,6 +39,9 @@ const schema = z.object({
   radio: z.string().refine(value => value === 'option-2', {
     message: 'Select Option 2'
   }),
+  radioGroup: z.string().refine(value => value === 'option-2', {
+    message: 'Select Option 2'
+  }),
   range: z.number().max(20, { message: 'Must be less than 20' })
 })
 
@@ -77,6 +81,10 @@ async function onSubmit (event: FormSubmitEvent<Schema>) {
       <UCheckbox v-model="state.checkbox" label="Check me" />
     </UFormGroup>
 
+    <UFormGroup name="radioGroup" label="Radio Group">
+      <URadioGroup v-model="state.radioGroup" :options="options" />
+    </UFormGroup>
+
     <UFormGroup name="radio" label="Radio">
       <URadio v-for="option in options" :key="option.value" v-model="state.radio" v-bind="option">
         {{ option.label }}

docs/components/content/examples/RadioExample.vue

@@ -1,23 +1,15 @@
 <script setup>
-const methods = [{
-  name: 'email',
-  value: 'email',
-  label: 'Email'
-}, {
-  name: 'sms',
-  value: 'sms',
-  label: 'Phone (SMS)'
-}, {
-  name: 'push',
-  value: 'push',
-  label: 'Push notification'
-}]
+const methods = [
+  { value: 'email', label: 'Email' },
+  { value: 'sms', label: 'Phone (SMS)' },
+  { value: 'push', label: 'Push notification' }
+]
 
 const selected = ref('sms')
 </script>
 
 <template>
   <div class="space-y-1">
-    <URadio v-for="method of methods" :key="method.name" v-model="selected" v-bind="method" />
+    <URadio v-for="method of methods" :key="method.value" v-model="selected" v-bind="method" />
   </div>
 </template>

docs/components/content/examples/RadioGroupExample.vue

@@ -0,0 +1,18 @@
+<script setup>
+const options = [{
+  value: 'email',
+  label: 'Email'
+}, {
+  value: 'sms',
+  label: 'Phone (SMS)'
+}, {
+  value: 'push',
+  label: 'Push notification'
+}]
+
+const selected = ref('sms')
+</script>
+
+<template>
+  <URadioGroup v-model="selected" legend="Choose something" :options="options" />
+</template>

docs/components/content/examples/RadioGroupLabelExample.vue

@@ -0,0 +1,20 @@
+<script setup>
+const options = [
+  { value: 'email', label: 'Email', icon: 'i-heroicons-at-symbol' },
+  { value: 'sms', label: 'Phone (SMS)', icon: 'i-heroicons-phone' },
+  { value: 'push', label: 'Push notification', icon: 'i-heroicons-bell' }
+]
+
+const selected = ref('sms')
+</script>
+
+<template>
+  <URadioGroup v-model="selected" :options="options">
+    <template #label="{ option }">
+      <p class="italic">
+        <UIcon :name="option.icon" />
+        {{ option.label }}
+      </p>
+    </template>
+  </URadioGroup>
+</template>