# MalioInputPhone Champ téléphone avec label flottant, icône phone par défaut (à gauche), états visuels (erreur / succès), accessibilité et bouton « + » optionnel pour gérer une liste de numéros côté parent (`type="tel"` + `inputmode="tel"`). ------------------------------------------------------------------------ ## Props détaillées ### id - Type: string - Description: Identifiant HTML de l'input. - Comportement: Si non fourni, un id unique est généré automatiquement (préfixe `malio-input-phone-`). ### label - Type: string - Description: Texte affiché comme label flottant. ### name - Type: string - Description: Attribut name de l'input (utile pour les formulaires). ### autocomplete - Type: string - Défaut: `off` - Description: Active ou configure l'autocomplétion navigateur. La valeur par défaut est `off` pour les formulaires de création d'ERP. Passer `tel` pour permettre au navigateur de suggérer un numéro enregistré. ### modelValue - Type: string | null | undefined - Description: Valeur contrôlée du composant. ------------------------------------------------------------------------ ## Apparence & Style ### inputClass / labelClass / groupClass - Type: string - Description: Classes CSS appliquées respectivement à l'input, au label et au conteneur. ### mask - Type: string | MaskInputOptions - Description: Masque maska à appliquer. Aucun masque par défaut — les formats téléphoniques varient trop selon les pays. À activer pour un usage mono-pays. ------------------------------------------------------------------------ ## Validation & Contraintes ### required / disabled / readonly - Type: boolean - Description: Attributs HTML standards. ------------------------------------------------------------------------ ## États & Messages ### hint / error / success - Type: string - Description: Messages affichés sous le champ. - `error` est prioritaire sur `success` et active `aria-invalid`. ------------------------------------------------------------------------ ## Icône ### iconName - Type: string - Défaut: `mdi:phone-outline` - Description: Nom Iconify de l'icône affichée. Passer une chaîne vide pour ne pas afficher d'icône. ### iconPosition - Type: `'left' | 'right'` - Défaut: `left` (laisse la droite libre pour le bouton +). ### iconSize / iconColor - Type: number / string - Défaut: `24` / `text-m-muted` ------------------------------------------------------------------------ ## Bouton « ajouter » ### addable - Type: boolean - Défaut: `false` - Description: Affiche un bouton à droite du champ. Au clic, le composant émet l'event `add` — c'est au parent de gérer l'ajout d'un nouveau champ téléphone. ### addIconName - Type: string - Défaut: `mdi:plus` - Description: Nom Iconify de l'icône du bouton d'ajout. ### addButtonLabel - Type: string - Défaut: `Ajouter un numéro` - Description: Attribut `aria-label` du bouton (accessibilité). ------------------------------------------------------------------------ ## Comportement - Aucune validation interne — le composant ne vérifie pas le format du numéro. Piloter `error` / `success` depuis le parent. - `inputmode="tel"` adapte le clavier mobile. - Le bouton `+` est désactivé quand `disabled` ou `readonly` est actif et n'émet pas l'event dans ce cas. ## Priorité visuelle 1. error 2. success 3. neutre ------------------------------------------------------------------------ ## Accessibilité - `aria-invalid` activé si `error` existe. - `aria-describedby` référence dynamiquement le message affiché. - Le bouton `+` expose un `aria-label` configurable. ------------------------------------------------------------------------ ## Events ### update:modelValue - Émis à chaque modification de l'input. Permet l'utilisation avec v-model. ### add - Émis au clic du bouton `+` (uniquement si `addable` est vrai et que le champ n'est ni `disabled` ni `readonly`).