feat(radio) : prop contentClass pour piloter la disposition des radios

COMPONENTS.md

@@ -516,6 +516,7 @@ Groupe de boutons radio : possède la valeur, le `name` partagé et **un seul**
 | `hint` / `error` / `success` | `string` | `''` | Message unique du groupe |
 | `reserveMessageSpace` | `boolean` | `true` | Réserve la ligne de message (alignement) |
 | `groupClass` | `string` | `''` | Override `twMerge` du conteneur du groupe |
+| `contentClass` | `string` | `''` | Override `twMerge` de la zone des radios (ex. `justify-between`) |
 | `inputClass` | `string` | `''` | Override `twMerge` propagé à l'`input` de chaque radio |
 | `labelClass` | `string` | `''` | Override `twMerge` du **label de groupe** (legend), pas des labels d'options |
 

app/components/malio/radio/RadioGroup.test.ts

@@ -93,6 +93,11 @@ describe('MalioRadioGroup', () => {
     expect(wrapper.get('[role="radiogroup"]').classes()).toContain('min-h-[3rem]')
   })
 
+  it('contentClass est fusionné sur la zone des radios', () => {
+    const wrapper = mountGroup({inline: true, contentClass: 'justify-between'})
+    expect(wrapper.get('[role="radiogroup"]').classes()).toContain('justify-between')
+  })
+
   it('accepte des radios via le slot par défaut', () => {
     const wrapper = mount(RadioGroupForTest, {
       props: {modelValue: 'b'},

app/components/malio/radio/RadioGroup.vue

@@ -13,7 +13,7 @@
       :aria-labelledby="label ? `${groupId}-label` : undefined"
       :aria-invalid="hasError || undefined"
       :aria-describedby="describedBy"
-      :class="contentClass"
+      :class="contentZoneClass"
     >
       <MalioRadioButton
         v-for="(option, index) in options"
@@ -74,6 +74,7 @@ const props = withDefaults(
     success?: string
     reserveMessageSpace?: boolean
     groupClass?: string
+    contentClass?: string
     inputClass?: string
     labelClass?: string
   }>(),
@@ -91,6 +92,7 @@ const props = withDefaults(
     success: '',
     reserveMessageSpace: true,
     groupClass: '',
+    contentClass: '',
     inputClass: '',
     labelClass: '',
   },
@@ -136,10 +138,13 @@ provide(radioGroupContextKey, {
   describedBy,
 })
 
-const contentClass = computed(() =>
-  props.inline
-    ? 'flex flex-wrap items-center gap-x-6 min-h-[3rem]'
-    : 'flex flex-col gap-y-1',
+const contentZoneClass = computed(() =>
+  twMerge(
+    props.inline
+      ? 'flex flex-wrap items-center gap-x-6 min-h-[3rem]'
+      : 'flex flex-col gap-y-1',
+    props.contentClass,
+  ),
 )
 
 const mergedGroupClass = computed(() => twMerge('w-full', props.groupClass))