# MalioInputEmail Champ email avec label flottant, icône email par défaut, états visuels (erreur / succès) et accessibilité. Basé sur InputText mais ciblé sur la saisie d'une adresse email (`type="email"` + `inputmode="email"`). ------------------------------------------------------------------------ ## 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-email-`). ### label - Type: string - Description: Texte affiché comme label flottant. - Comportement: Si absent, aucun label n'est rendu. ### 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 `email` pour permettre au navigateur de suggérer l'adresse de l'utilisateur (formulaires de connexion / inscription). ### modelValue - Type: string | null | undefined - Description: Valeur contrôlée du composant. - Comportement: - Si défini → composant contrôlé (v-model). - Sinon → gestion interne de l'état. ------------------------------------------------------------------------ ## Apparence & Style ### inputClass - Type: string - Description: Classes CSS appliquées à l'input. ### labelClass - Type: string - Description: Classes CSS appliquées au label. ### groupClass - Type: string - Description: Classes CSS appliquées au conteneur. ------------------------------------------------------------------------ ## Validation & Contraintes ### required - Type: boolean - Description: Ajoute l'attribut HTML required. ### disabled - Type: boolean - Description: Désactive complètement le champ. ### readonly - Type: boolean - Description: Rend le champ non modifiable mais focusable. ------------------------------------------------------------------------ ## États & Messages ### hint - Type: string - Description: Message d'aide affiché sous le champ. ### error - Type: string - Description: Message d'erreur. - Effet: - Active l'état visuel erreur. - aria-invalid=true - Prioritaire sur success et hint. ### success - Type: string - Description: Message de succès. - Effet: - Actif uniquement si error est absent. ------------------------------------------------------------------------ ## Icône ### iconName - Type: string - Défaut: `mdi:email-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: `right` ### iconSize - Type: string | number - Défaut: `24` ### iconColor - Type: string - Défaut: `text-m-muted` - Description: Classe Tailwind de couleur. Surchargée automatiquement par les états erreur / succès. ------------------------------------------------------------------------ ## Comportement - Aucune validation interne — le composant ne vérifie pas le format de l'email. Utiliser la validation HTML native (`type="email"`) ou piloter `error` / `success` depuis le parent. - `inputmode="email"` est appliqué pour adapter le clavier mobile. ## Priorité visuelle 1. error 2. success 3. neutre ------------------------------------------------------------------------ ## Accessibilité - aria-invalid est activé si error existe. - aria-describedby référence dynamiquement le message affiché. - Fonctionne avec ou sans v-model. ------------------------------------------------------------------------ ## Events ### update:modelValue - Émis à chaque modification de l'input. - Permet l'utilisation avec v-model.