# MalioInputPassword Composant input mot de passe avec label flottant, toggle de visibilité (icône oeil), états visuels (erreur / succès) et accessibilité. ------------------------------------------------------------------------ ## 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: off ### 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. ### 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 de visibilité ### displayIcon - Type: boolean - Défaut: true - Description: Affiche ou masque l'icône toggle de visibilité. - Comportement: - `true` : affiche une icône oeil cliquable à droite de l'input. - `false` : pas d'icône, le type reste `password`. ### Icônes utilisées - `mdi:eye-off-outline` : mot de passe masqué (état par défaut). - `mdi:eye-outline` : mot de passe visible (après clic). ### Couleur de l'icône - `text-m-muted` par défaut. - `text-m-danger` si la prop `error` est renseignée. - `text-m-success` si la prop `success` est renseignée. ------------------------------------------------------------------------ ## Comportement - Au clic sur l'icône, le type de l'input alterne entre `password` et `text`. - Aucune validation interne. - Les états sont pilotés uniquement par les props. ## 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.