# MalioInputText Composant input texte avec masque optionnel (maska), label flottant, états visuels (erreur / succès) et icône configurable. ------------------------------------------------------------------------ ## 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. ### 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 - Description: Active ou configure l’autocomplétion navigateur. - Défaut: vide ### 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. ### mask - Type: string | undefined - Description: Masque appliqué via la directive maska. - Comportement: Formate la saisie selon les tokens définis. ------------------------------------------------------------------------ ## Apparence & Style ### textInput - Type: string - Description: Classes CSS appliquées à l’input (taille de texte, etc.). ### textLabel - Type: string - Description: Classes CSS appliquées au label. ### 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. ------------------------------------------------------------------------ ## Validation & Contraintes ### required - Type: boolean - Description: Ajoute l’attribut HTML required. ### maxLength - Type: number | string - Description: Longueur maximale autorisée. ### minLength - Type: number | string - Description: Longueur minimale autorisée. ### 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 - Description: Nom de l’icône (ex: mdi:magnify). ### iconSize - Type: string | number - Description: Taille de l’icône. ### iconColor - Type: string - Description: Couleur de l’icône. ------------------------------------------------------------------------ ## Comportement de validation - Aucune validation interne. - Les états sont pilotés uniquement par les props. ## Priorité visuelle 1. error 2. success 3. neutre ------------------------------------------------------------------------ ## Tokens de masque - \# : chiffre - A : lettre majuscule - a : lettre minuscule - \* : chiffre ou lettre ------------------------------------------------------------------------ ## 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.