feat : ajouts du composant select

app/story/InputSelect.story.vue

@@ -0,0 +1,148 @@
+<template>
+  <Story
+    title="Select"
+  >
+      <MalioSelect
+        v-model="value"
+        :options="options"
+      />
+  </Story>
+</template>
+
+<docs lang="md">
+# MalioSelect
+
+Composant select personnalisé avec label flottant, option vide,
+états visuels selon la sélection et ouverture/fermeture contrôlée.
+
+------------------------------------------------------------------------
+
+## Props détaillées
+
+### modelValue
+
+-   Type: string | number | null
+-   Description: Valeur actuellement sélectionnée.
+-   Comportement:
+-   Compatible avec `v-model`.
+-   Peut valoir `null` pour représenter l’option vide.
+
+### options
+
+-   Type: Array<{ label: string; value: string | number | null }>
+-   Description: Liste des options affichées dans le menu.
+-   Défaut: tableau vide.
+
+### emptyOptionLabel
+
+-   Type: string
+-   Description: Texte de l’option vide injectée automatiquement.
+-   Comportement:
+-   Cette option porte toujours la valeur `null`.
+-   Si la prop est vide, l’option reste visuellement discrète.
+
+### label
+
+-   Type: string
+-   Description: Texte affiché comme label flottant au-dessus du champ.
+-   Comportement: Si absent, aucun label n’est rendu.
+
+------------------------------------------------------------------------
+
+## Apparence & Style
+
+### textField
+
+-   Type: string
+-   Description: Classes CSS appliquées au bouton du select.
+
+### textValue
+
+-   Type: string
+-   Description: Classes CSS appliquées à la valeur affichée.
+
+### textLabel
+
+-   Type: string
+-   Description: Classes CSS appliquées au label flottant.
+
+### rounded
+
+-   Type: string
+-   Description: Classe Tailwind pour le border-radius.
+-   Défaut: rounded-md
+
+### minWidth / maxWidth
+
+-   Type: string
+-   Description: Classes utilitaires Tailwind pour contraindre la
+largeur.
+
+------------------------------------------------------------------------
+
+## Interaction
+
+### disabled
+
+-   Type: boolean
+-   Description: Désactive complètement le composant.
+-   Effet:
+-   Empêche l’ouverture du menu.
+-   Applique un style visuel désactivé.
+
+------------------------------------------------------------------------
+
+## Comportement visuel
+
+-   Au repos sans sélection: bordure grise.
+-   Ouvert: bordure et label en couleur primaire.
+-   Fermé avec valeur sélectionnée: bordure et texte en noir.
+-   L’option vide dans la liste peut être stylée différemment pour être
+    distinguée des autres.
+
+------------------------------------------------------------------------
+
+## Accessibilité
+
+-   Le bouton porte `aria-expanded` et `aria-controls`.
+-   La liste utilise `role="listbox"`.
+-   Chaque option utilise `role="option"` et `aria-selected`.
+
+------------------------------------------------------------------------
+
+## Events
+
+### update:modelValue
+
+-   Émis à chaque sélection dans la liste.
+-   Permet l’utilisation avec v-model.
+-   Peut émettre `null` si l’option vide est sélectionnée.
+
+</docs>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import MalioSelect from '../components/malio/Select.vue'
+const value = ref<string | number | null>(null)
+const options = [
+  { label: 'France', value: 'fr' },
+  { label: 'Belgique', value: 'be' },
+  { label: 'Suisse', value: 'ch' },
+  { label: 'Canada', value: 'ca' },
+  { label: 'Allemagne', value: 'de' },
+  { label: 'Espagne', value: 'es' },
+  { label: 'Italie', value: 'it' },
+  { label: 'Portugal', value: 'pt' },
+  { label: 'Pays-Bas', value: 'nl' },
+  { label: 'Suède', value: 'se' },
+  { label: 'Norvège', value: 'no' },
+  { label: 'Danemark', value: 'dk' },
+  { label: 'Finlande', value: 'fi' },
+  { label: 'Autriche', value: 'at' },
+  { label: 'Irlande', value: 'ie' },
+  { label: 'Grèce', value: 'gr' },
+  { label: 'Pologne', value: 'pl' },
+  { label: 'Hongrie', value: 'hu' },
+  { label: 'République tchèque', value: 'cz' },
+]
+</script>