feat(radio) : composant MalioRadioGroup (message unique, reserveMessageSpace)

2026-06-24 16:25:57 +02:00
parent 9207d7bb95
commit 62b23c53b4
2 changed files with 263 additions and 0 deletions
@@ -0,0 +1,109 @@
+import {describe, expect, it} from 'vitest'
+import {h} from 'vue'
+import {mount} from '@vue/test-utils'
+import type {DefineComponent} from 'vue'
+import RadioGroup from './RadioGroup.vue'
+import RadioButton from './RadioButton.vue'
+
+type Opt = {label: string; value: string; disabled?: boolean}
+type RadioGroupProps = {
+  modelValue?: string | number | boolean | null
+  options?: Opt[]
+  label?: string
+  name?: string
+  inline?: boolean
+  disabled?: boolean
+  readonly?: boolean
+  required?: boolean
+  hint?: string
+  error?: string
+  success?: string
+  reserveMessageSpace?: boolean
+  groupClass?: string
+  inputClass?: string
+  labelClass?: string
+}
+
+const RadioGroupForTest = RadioGroup as DefineComponent<RadioGroupProps>
+
+const options: Opt[] = [
+  {label: 'Oui', value: 'oui'},
+  {label: 'Non', value: 'non'},
+]
+
+const mountGroup = (props: RadioGroupProps = {}) =>
+  mount(RadioGroupForTest, {props: {options, ...props}})
+
+describe('MalioRadioGroup', () => {
+  it('rend une option par entrée et un seul role=radiogroup', () => {
+    const wrapper = mountGroup()
+    expect(wrapper.findAll('input[type="radio"]')).toHaveLength(2)
+    expect(wrapper.findAll('[role="radiogroup"]')).toHaveLength(1)
+  })
+
+  it('partage le même name natif entre les radios', () => {
+    const wrapper = mountGroup({name: 'prestation'})
+    const names = wrapper.findAll('input').map(i => i.attributes('name'))
+    expect(names).toEqual(['prestation', 'prestation'])
+  })
+
+  it('coche selon modelValue', () => {
+    const wrapper = mountGroup({modelValue: 'non'})
+    const inputs = wrapper.findAll('input')
+    expect((inputs[1].element as HTMLInputElement).checked).toBe(true)
+    expect((inputs[0].element as HTMLInputElement).checked).toBe(false)
+  })
+
+  it('émet update:modelValue au clic sur une option', async () => {
+    const wrapper = mountGroup()
+    await wrapper.findAll('input')[1].trigger('change')
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['non'])
+  })
+
+  it('affiche UN seul message d\'erreur réservant l\'espace', () => {
+    const wrapper = mountGroup({error: 'Sélection requise'})
+    const msgs = wrapper.findAll('[id$="-describedby"]')
+    expect(msgs).toHaveLength(1)
+    expect(msgs[0].text()).toBe('Sélection requise')
+    expect(msgs[0].classes()).toContain('min-h-[1rem]')
+    expect(msgs[0].classes()).toContain('text-m-danger')
+    expect(wrapper.find('.radio-message').exists()).toBe(false)
+  })
+
+  it('propage l\'erreur aux radios enfants', () => {
+    const wrapper = mountGroup({error: 'Sélection requise'})
+    expect(wrapper.findAll('.radio-control.is-error')).toHaveLength(2)
+    expect(wrapper.findAll('input').every(i => i.attributes('aria-invalid') === 'true')).toBe(true)
+  })
+
+  it('reserveMessageSpace=false sans message : aucune ligne réservée', () => {
+    const wrapper = mountGroup({reserveMessageSpace: false})
+    expect(wrapper.find('[id$="-describedby"]').exists()).toBe(false)
+  })
+
+  it('rend la legend et la lie via aria-labelledby', () => {
+    const wrapper = mountGroup({label: 'Prestation'})
+    const legendId = wrapper.find('[id$="-label"]').attributes('id')
+    expect(wrapper.get('[id$="-label"]').text()).toContain('Prestation')
+    expect(wrapper.get('[role="radiogroup"]').attributes('aria-labelledby')).toBe(legendId)
+  })
+
+  it('inline : la zone radios réserve la hauteur d\'un champ', () => {
+    const wrapper = mountGroup({inline: true})
+    expect(wrapper.get('[role="radiogroup"]').classes()).toContain('min-h-[2.5rem]')
+  })
+
+  it('accepte des radios via le slot par défaut', () => {
+    const wrapper = mount(RadioGroupForTest, {
+      props: {modelValue: 'b'},
+      slots: {
+        default: () => [
+          h(RadioButton, {value: 'a', label: 'A'}),
+          h(RadioButton, {value: 'b', label: 'B'}),
+        ],
+      },
+    })
+    expect(wrapper.findAll('input')).toHaveLength(2)
+    expect((wrapper.findAll('input')[1].element as HTMLInputElement).checked).toBe(true)
+  })
+})
@@ -0,0 +1,154 @@
+<template>
+  <div :class="mergedGroupClass">
+    <span
+      v-if="label"
+      :id="`${groupId}-label`"
+      :class="mergedLabelClass"
+    >
+      {{ label }}<MalioRequiredMark v-if="required" />
+    </span>
+
+    <div
+      role="radiogroup"
+      :aria-labelledby="label ? `${groupId}-label` : undefined"
+      :aria-invalid="hasError || undefined"
+      :aria-describedby="describedBy"
+      :class="contentClass"
+    >
+      <MalioRadioButton
+        v-for="(option, index) in options"
+        :key="`${groupId}-opt-${index}`"
+        :label="option.label"
+        :value="option.value"
+        :disabled="option.disabled"
+        :input-class="inputClass"
+      />
+      <slot />
+    </div>
+
+    <p
+      v-if="reserveMessageSpace || hint || error || success"
+      :id="`${groupId}-describedby`"
+      :class="[
+        hasError
+          ? 'text-m-danger'
+          : hasSuccess
+            ? 'text-m-success'
+            : 'text-m-muted',
+        'mt-1 ml-[2px] text-xs',
+        reserveMessageSpace ? 'min-h-[1rem]' : '',
+      ]"
+    >
+      {{ error || success || hint }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed, provide, ref, useId} from 'vue'
+import {twMerge} from 'tailwind-merge'
+import MalioRadioButton from './RadioButton.vue'
+import MalioRequiredMark from '../shared/RequiredMark.vue'
+import {radioGroupContextKey, type RadioValue} from './context'
+
+defineOptions({name: 'MalioRadioGroup', inheritAttrs: false})
+
+interface RadioOption {
+  label: string
+  value: RadioValue
+  disabled?: boolean
+}
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: RadioValue
+    options?: RadioOption[]
+    label?: string
+    name?: string
+    inline?: boolean
+    disabled?: boolean
+    readonly?: boolean
+    required?: boolean
+    hint?: string
+    error?: string
+    success?: string
+    reserveMessageSpace?: boolean
+    groupClass?: string
+    inputClass?: string
+    labelClass?: string
+  }>(),
+  {
+    modelValue: undefined,
+    options: () => [],
+    label: '',
+    name: '',
+    inline: false,
+    disabled: false,
+    readonly: false,
+    required: false,
+    hint: '',
+    error: '',
+    success: '',
+    reserveMessageSpace: true,
+    groupClass: '',
+    inputClass: '',
+    labelClass: '',
+  },
+)
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: RadioValue): void
+}>()
+
+const generatedId = useId()
+const groupId = computed(() => props.name || `malio-radio-group-${generatedId}`)
+
+const localValue = ref<RadioValue>(undefined)
+const isControlled = computed(() => props.modelValue !== undefined)
+const selectedValue = computed(() =>
+  isControlled.value ? props.modelValue : localValue.value,
+)
+
+const hasError = computed(() => !!props.error)
+const hasSuccess = computed(() => !!props.success && !hasError.value)
+const shouldShowMessage = computed(() => !!(props.hint || hasError.value || hasSuccess.value))
+const describedBy = computed(() =>
+  props.reserveMessageSpace || shouldShowMessage.value
+    ? `${groupId.value}-describedby`
+    : undefined,
+)
+
+const select = (value: RadioValue) => {
+  if (props.readonly || props.disabled) return
+  if (!isControlled.value) localValue.value = value
+  emit('update:modelValue', value)
+}
+
+provide(radioGroupContextKey, {
+  name: computed(() => groupId.value),
+  isSelected: (value: RadioValue) => selectedValue.value === value,
+  select,
+  hasError,
+  hasSuccess,
+  disabled: computed(() => props.disabled),
+  readonly: computed(() => props.readonly),
+  required: computed(() => props.required),
+  describedBy,
+})
+
+const contentClass = computed(() =>
+  props.inline
+    ? 'flex flex-wrap items-center gap-x-6 min-h-[2.5rem]'
+    : 'flex flex-col gap-y-1',
+)
+
+const mergedGroupClass = computed(() => twMerge('w-full', props.groupClass))
+
+const mergedLabelClass = computed(() =>
+  twMerge(
+    'mb-1 block text-sm text-m-text',
+    hasError.value ? 'text-m-danger' : '',
+    props.labelClass,
+  ),
+)
+</script>