# 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.