# MalioInputAutocomplete Champ de saisie assistée (typeahead / combobox) : l'utilisateur tape pour filtrer une liste d'options, ou pour déclencher une recherche côté parent (API). Combine le pattern floating-label des autres inputs avec un dropdown inspiré de `MalioSelect`. Conçu pour les cas ERP où la liste vient d'un appel API (auth, transformation, cache gérés par le parent). ------------------------------------------------------------------------ ## Props détaillées ### id - Type: string - Description: Identifiant HTML de l'input. Auto-généré si non fourni (préfixe `malio-input-autocomplete-`). ### label - Type: string - Description: Texte affiché comme label flottant. ### name - Type: string - Description: Attribut name de l'input (formulaires). ### modelValue - Type: `string | number | null | undefined` - Description: Valeur sélectionnée. Doit correspondre à un `option.value` (ou être un texte libre si `allowCreate`). ### options - Type: `{ label: string; value: string | number }[]` - Défaut: `[]` - Description: Liste affichée dans le dropdown. Le parent alimente cette liste (statique ou via API en réponse à l'event `search`). ### loading - Type: boolean - Défaut: `false` - Description: Affiche un spinner à la place du chevron et un message dans le dropdown. ### debounce - Type: number - Défaut: `300` - Description: Délai (ms) avant émission de l'event `search` après une frappe. Évite de spammer l'API. ### minSearchLength - Type: number - Défaut: `0` - Description: Nombre minimum de caractères avant d'émettre `search`. Pratique pour API : ne pas appeler avec query vide. ### allowCreate - Type: boolean - Défaut: `false` - Description: Si vrai, l'utilisateur peut valider (Entrée ou clic ailleurs) une valeur libre non présente dans `options` ; émet l'event `create`. ------------------------------------------------------------------------ ## Icône ### iconName - Type: string - Défaut: `''` (aucune) - Description: Nom Iconify de l'icône décorative. ### iconPosition - Type: `'left' | 'right'` - Défaut: `left` - Description: Côté d'affichage de l'icône. À droite, l'icône s'aligne avec le chevron. ### iconSize / iconColor - Type: number / string - Défaut: `24` / `text-m-muted` ------------------------------------------------------------------------ ## Textes du dropdown ### noResultsText - Type: string - Défaut: `Aucun résultat` - Description: Affiché quand `options` est vide. ### loadingText - Type: string - Défaut: `Chargement…` - Description: Affiché pendant que `loading=true`. ### minSearchText - Type: string - Défaut: `Tapez pour rechercher` - Description: Affiché quand l'utilisateur n'a pas atteint `minSearchLength`. ------------------------------------------------------------------------ ## Apparence & Style ### inputClass / labelClass / groupClass - Type: string - Description: Classes CSS appliquées respectivement à l'input, au label et au conteneur (fusionnées via `twMerge`). ------------------------------------------------------------------------ ## Validation & Contraintes ### required / disabled / readonly - Type: boolean - Description: Attributs HTML standards. `disabled` et `readonly` empêchent l'ouverture du dropdown. ------------------------------------------------------------------------ ## États & Messages ### hint / error / success - Type: string - Description: Messages affichés sous le champ. `error` est prioritaire et active `aria-invalid`. ------------------------------------------------------------------------ ## Clavier - `↓` / `↑` : naviguer dans les options - `Entrée` : sélectionner l'option active (ou créer si `allowCreate`) - `Échap` : fermer le dropdown et revenir à la dernière sélection ------------------------------------------------------------------------ ## Accessibilité - `role="combobox"` sur l'input avec `aria-expanded`, `aria-controls`, `aria-activedescendant`. - `role="listbox"` sur le dropdown, `role="option"` sur chaque entrée, `aria-selected` reflète `modelValue`. - `aria-invalid` activé si `error` existe. - `aria-describedby` référence dynamiquement le message affiché. ------------------------------------------------------------------------ ## Events ### update:modelValue - Émis quand l'utilisateur sélectionne une option. Permet l'utilisation avec v-model. ### search - Émis (après debounce + minSearchLength) avec la query texte tapée. C'est ce que le parent écoute pour lancer l'appel API. ### select - Émis avec l'objet `Option` complet (ou `null` à la réinitialisation). Utile pour récupérer le `label` côté parent en plus du `value`. ### create - Émis avec la chaîne saisie quand `allowCreate` est vrai et que l'utilisateur valide une valeur libre.