malio-layer-ui/app/story/checkbox/inputCheckbox.story.vue

<template>
  <Story title="Input/Checkbox">
    <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>
        <MalioCheckbox
          v-model="simpleValue"
          label="Accepter les conditions"
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Coché</h2>
        <MalioCheckbox
          v-model="checkedValue"
          label="Newsletter activée"
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Avec hint</h2>
        <MalioCheckbox
          v-model="hintValue"
          label="Recevoir les notifications"
          hint="Vous pouvez désactiver à tout moment"
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
        <MalioCheckbox
          v-model="disabledValue"
          label="Option verrouillée"
          disabled
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Readonly</h2>
        <MalioCheckbox
          v-model="readonlyValue"
          label="Accepté par l'utilisateur"
          readonly
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Erreur</h2>
        <MalioCheckbox
          v-model="errorValue"
          label="Accepter les conditions"
          error="Vous devez accepter les conditions"
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Succès</h2>
        <MalioCheckbox
          v-model="successValue"
          label="Conditions acceptées"
          success="Merci"
        />
      </div>
    </div>
  </Story>
</template>

<docs lang="md">
# MalioCheckbox

Composant checkbox custom avec `v-model`, message d'aide, et états visuels
`error` / `success`.

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

## Props

### id

- Type: `string`
- Description: Identifiant HTML du checkbox.
- Comportement: si absent, un id unique est généré automatiquement.

### label

- Type: `string`
- Description: Texte affiche a cote de la case.

### name

- Type: `string`
- Description: Attribut `name` du champ.

### modelValue

- Type: `boolean | null | undefined`
- Description: État coche du composant.

### inputClass

- Type: `string`
- Description: Classes supplémentaires appliquées a l'input natif.

### labelClass

- Type: `string`
- Description: Classes supplémentaires appliquées au label.

### groupClass

- Type: `string`
- Description: Classes supplémentaires appliquées au conteneur.

### required

- Type: `boolean`
- Description: Ajoute l'attribut HTML `required`.

### disabled

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

### readonly

- Type: `boolean`
- Description: Empêche la mise a jour du `v-model` tout en gardant
  l'affichage courant.

### hint

- Type: `string`
- Description: Message d'aide affiche sous le checkbox.

### error

- Type: `string`
- Description: Message d'erreur.
- Effet: prioritaire sur `success`, applique `aria-invalid` et la couleur
  d'erreur au texte et a la case.

### success

- Type: `string`
- Description: Message de succès.
- Effet: applique la couleur de succès au texte et a la case si `error`
  est absent.

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

## Accessibilité

- `aria-invalid` est active si `error` existe.
- `aria-describedby` pointe vers le message affiche.
- L'input natif reste present pour conserver le comportement formulaire.

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

## Event

### update:modelValue

- Émis a chaque changement de l'état coche.
- Retourne un booléen `true` ou `false`.
</docs>

<script setup lang="ts">
import {ref} from 'vue'
import MalioCheckbox from '../../components/malio/checkbox/Checkbox.vue'

const simpleValue = ref(false)
const checkedValue = ref(true)
const hintValue = ref(false)
const disabledValue = ref(true)
const readonlyValue = ref(true)
const errorValue = ref(false)
const successValue = ref(true)
</script>