malio-layer-ui/app/story/select/selectCheckbox.story.vue

<template>
  <Story title="Select/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>
        <MalioSelectCheckbox
          v-model="simpleValue"
          :options="options"
          label="Pays"
          empty-option-label="Aucune sélection"
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Avec tags</h2>
        <MalioSelectCheckbox
          v-model="tagValue"
          :options="options"
          label="Pays"
          :display-tag="true"
          empty-option-label="Aucune sélection"
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Avec hint</h2>
        <MalioSelectCheckbox
          v-model="hintValue"
          :options="options"
          label="Pays"
          hint="Sélectionnez un ou plusieurs pays"
          empty-option-label="Aucune sélection"
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
        <MalioSelectCheckbox
          v-model="disabledValue"
          :options="options"
          label="Pays"
          disabled
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Erreur</h2>
        <MalioSelectCheckbox
          v-model="errorValue"
          :options="options"
          label="Pays"
          error="Sélectionnez au moins un pays"
          empty-option-label="Aucune sélection"
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Succès</h2>
        <MalioSelectCheckbox
          v-model="successValue"
          :options="options"
          label="Pays"
          success="Sélection validée"
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Tout sélectionner</h2>
        <MalioSelectCheckbox
          v-model="selectAllValue"
          :options="options"
          label="Pays"
          :display-select-all="true"
          empty-option-label="Aucune sélection"
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Tout sélectionner (label custom)</h2>
        <MalioSelectCheckbox
          v-model="selectAllCustomValue"
          :options="options"
          label="Pays"
          :display-select-all="true"
          select-all-label="Cocher tout"
          empty-option-label="Aucune sélection"
        />
      </div>
    </div>
  </Story>
</template>

<docs lang="md">
# MalioSelectCheckbox

Composant select avec checkboxes multiples, label flottant, tags optionnels,
états visuels (erreur / succès) et option "tout sélectionner".

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

## Props détaillées

### modelValue

-   Type: Array<string | number>
-   Description: Tableau des valeurs sélectionnées.

### options

-   Type: Array<{ label: string; value: string | number }>
-   Description: Liste des options disponibles.

### emptyOptionLabel

-   Type: string
-   Description: Texte affiché quand aucune option n'est sélectionnée (mode tag).

### label

-   Type: string
-   Description: Texte affiché comme label flottant.

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

## Apparence & Style

### displayTag

-   Type: boolean
-   Défaut: false
-   Description: Affiche les sélections sous forme de tags au lieu du compteur.

### displaySelectAll

-   Type: boolean
-   Défaut: false
-   Description: Affiche une checkbox "Tout sélectionner / Tout désélectionner" en haut de la liste.

### selectAllLabel

-   Type: string
-   Défaut: "Tout sélectionner"
-   Description: Label de la checkbox de sélection globale.

### minWidth / maxWidth

-   Type: string
-   Description: Classes Tailwind pour contraindre la largeur.

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

## États & Messages

### hint

-   Type: string
-   Description: Message d'aide affiché sous le champ.

### error

-   Type: string
-   Description: Message d'erreur. Prioritaire sur success et hint.

### success

-   Type: string
-   Description: Message de succès. Actif si error est absent.

### disabled

-   Type: boolean
-   Description: Désactive complètement le composant.

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

## Accessibilité

-   `aria-expanded` et `aria-controls` sur le bouton.
-   `role="listbox"` sur la liste, `role="option"` et `aria-selected` sur chaque option.
-   `aria-invalid` activé si error existe.

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

## Events

### update:modelValue

-   Émis à chaque changement de sélection.
-   Retourne un tableau de valeurs.

</docs>

<script setup lang="ts">
import {ref} from 'vue'
import MalioSelectCheckbox from '../../components/malio/select/SelectCheckbox.vue'

const options = [
  {label: 'France', value: 'fr'},
  {label: 'Belgique', value: 'be'},
  {label: 'Suisse', value: 'ch'},
  {label: 'Canada', value: 'ca'},
  {label: 'Allemagne', value: 'de'},
]

const simpleValue = ref<Array<string | number>>([])
const tagValue = ref<Array<string | number>>(['fr', 'be'])
const hintValue = ref<Array<string | number>>([])
const disabledValue = ref<Array<string | number>>(['fr', 'ch'])
const errorValue = ref<Array<string | number>>([])
const successValue = ref<Array<string | number>>(['be', 'ca'])
const selectAllValue = ref<Array<string | number>>([])
const selectAllCustomValue = ref<Array<string | number>>([])
</script>