diff --git a/COMPONENTS.md b/COMPONENTS.md index ac19b3e..846b1d8 100644 --- a/COMPONENTS.md +++ b/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 | diff --git a/app/components/malio/radio/RadioGroup.test.ts b/app/components/malio/radio/RadioGroup.test.ts index 6107089..56638a3 100644 --- a/app/components/malio/radio/RadioGroup.test.ts +++ b/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'}, diff --git a/app/components/malio/radio/RadioGroup.vue b/app/components/malio/radio/RadioGroup.vue index 92ffad0..d8afede 100644 --- a/app/components/malio/radio/RadioGroup.vue +++ 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" > (), @@ -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))