malio-layer-ui/app/story/radio/RadioButton.story.vue

<template>
  <Story title="Input/Radio">
    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Simple</h2>
        <div class="space-y-1">
          <MalioRadioButton
            v-for="option in options"
            :key="`simple-${option.value}`"
            v-model="primaryChoice"
            :label="option.label"
            :value="option.value"
            name="primary-choice"
          />
        </div>
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Preselected</h2>
        <div class="space-y-1">
          <MalioRadioButton
            v-for="option in options"
            :key="`preselected-${option.value}`"
            v-model="preselectedChoice"
            :label="option.label"
            :value="option.value"
            name="preselected-choice"
          />
        </div>
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Error</h2>
        <div class="space-y-1">
          <MalioRadioButton
            v-for="option in options"
            :key="`error-${option.value}`"
            v-model="errorChoice"
            :label="option.label"
            :value="option.value"
            name="error-choice"
            error="Selection required"
          />
        </div>
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Success</h2>
        <div class="space-y-1">
          <MalioRadioButton
            v-for="option in options"
            :key="`success-${option.value}`"
            v-model="successChoice"
            :label="option.label"
            :value="option.value"
            name="success-choice"
            success="Selection saved"
          />
        </div>
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Disabled</h2>
        <div class="space-y-1">
          <MalioRadioButton
            v-for="option in options"
            :key="`disabled-${option.value}`"
            v-model="disabledChoice"
            :label="option.label"
            :value="option.value"
            name="disabled-choice"
            disabled
          />
        </div>
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Readonly</h2>
        <div class="space-y-1">
          <MalioRadioButton
            v-for="option in options"
            :key="`readonly-${option.value}`"
            v-model="readonlyChoice"
            :label="option.label"
            :value="option.value"
            name="readonly-choice"
            readonly
            hint="Readonly group"
          />
        </div>
      </div>
    </div>
  </Story>
</template>

<docs lang="md">
# MalioRadioButton

Composant radio personnalisé compatible avec `v-model`, les groupes via `name`,
et les états visuels de validation.

------------------------------------------------------------------------

## Props détaillées

### modelValue

-   Type: `string | number | boolean | null | undefined`
-   Description: Valeur actuellement sélectionnée dans le groupe.
-   Comportement:
-   Compatible avec `v-model`.
-   Le radio est coché quand `modelValue === value`.

### value

-   Type: `string | number | boolean | null | undefined`
-   Description: Valeur portée par le radio courant.

### label

-   Type: `string`
-   Description: Texte affiché à droite du radio.

### name

-   Type: `string`
-   Description: Nom HTML partagé par les radios d’un même groupe.

------------------------------------------------------------------------

## États

### error

-   Type: `string`
-   Description: Message et style d’erreur.

### success

-   Type: `string`
-   Description: Message et style de succès.
-   Comportement: ignoré si `error` est présent.

### disabled

-   Type: `boolean`
-   Description: Désactive le radio.

### readonly

-   Type: `boolean`
-   Description: Empêche le changement de valeur tout en gardant le rendu affiché.

### hint

-   Type: `string`
-   Description: Message d’aide sous le groupe.

------------------------------------------------------------------------

## Events

### update:modelValue

-   Émis à la sélection d’un radio.
-   Retourne la `value` du radio sélectionné.

</docs>

<script setup lang="ts">
import {ref} from 'vue'
import MalioRadioButton from '../../components/malio/radio/RadioButton.vue'

const options = [
  {label: 'Option 1', value: 'option1'},
  {label: 'Option 2', value: 'option2'},
  {label: 'Option 3', value: 'option3'},
  {label: 'Option 4', value: 'option4'},
]

const primaryChoice = ref<string | null>(null)
const preselectedChoice = ref<string | null>('option2')
const errorChoice = ref<string | null>(null)
const successChoice = ref<string | null>('option3')
const disabledChoice = ref<string | null>('option2')
const readonlyChoice = ref<string | null>('option4')
</script>