feat : reorganisation de la structure projet

app/story/select/selectCheckbox.story.vue

@@ -0,0 +1,213 @@
+<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>