feat(RadioGroup): new component (#730)

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

src/runtime/components/forms/Radio.vue

@@ -2,7 +2,7 @@
   <div :class="ui.wrapper">
     <div class="flex items-center h-5">
       <input
-        :id="inputId"
+        :id="id"
         v-model="pick"
         :name="name"
         :required="required"
@@ -15,7 +15,7 @@
       >
     </div>
     <div v-if="label || $slots.label" class="ms-3 text-sm">
-      <label :for="inputId" :class="ui.label">
+      <label :for="id" :class="ui.label">
         <slot name="label">{{ label }}</slot>
         <span v-if="required" :class="ui.required">*</span>
       </label>
@@ -27,11 +27,10 @@
 </template>
 
 <script lang="ts">
-import { computed, toRef, defineComponent } from 'vue'
+import { computed, defineComponent, inject, toRef } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
-import { useFormGroup } from '../../composables/useFormGroup'
 import { mergeConfig } from '../../utils'
 import type { Strategy } from '../../types'
 // @ts-expect-error
@@ -39,6 +38,7 @@ import appConfig from '#build/app.config'
 import { radio } from '#ui/ui.config'
 import colors from '#ui-colors'
 import { uid } from '../../utils/uid'
+import { useFormGroup } from '../../composables/useFormGroup'
 
 const config = mergeConfig<typeof radio>(appConfig.ui.strategy, appConfig.ui.radio, radio)
 
@@ -98,11 +98,12 @@ export default defineComponent({
       default: undefined
     }
   },
-  emits: ['update:modelValue'],
+  emits: ['update:modelValue', 'change'],
   setup (props, { emit }) {
     const { ui, attrs } = useUI('radio', toRef(props, 'ui'), config, toRef(props, 'class'))
 
-    const { emitFormChange, color, name, inputId } = useFormGroup(props)
+    const radioGroup = inject('radio-group', null)
+    const { emitFormChange, color, name } = radioGroup ?? useFormGroup(props, config)
 
     const pick = computed({
       get () {
@@ -110,7 +111,9 @@ export default defineComponent({
       },
       set (value) {
         emit('update:modelValue', value)
-        if (value) {
+        emit('change', value)
+
+        if (!radioGroup) {
           emitFormChange()
         }
       }
@@ -129,7 +132,6 @@ export default defineComponent({
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
-      inputId,
       attrs,
       pick,
       // eslint-disable-next-line vue/no-dupe-keys