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

This commit is contained in:
2026-06-25 09:47:36 +02:00
parent 1c36d40bfd
commit 66ad644728
3 changed files with 16 additions and 5 deletions
@@ -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'},
+10 -5
View File
@@ -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))