# MalioInputAmount Composant input dédié à la saisie d’un montant décimal avec 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 dans les formulaires. ### autocomplete - Type: string - Description: Valeur de l’attribut `autocomplete`. - Défaut: `off` ### modelValue - Type: string | null | undefined - Description: Valeur contrôlée du composant. - Comportement: - Si défini, le composant fonctionne via `v-model`. - Sinon, il conserve une valeur locale interne. ------------------------------------------------------------------------ ## Apparence & Style ### inputClass - Type: string - Description: Classes CSS additionnelles appliquées à l’input. ### labelClass - Type: string - Description: Classes CSS additionnelles appliquées au label. ### groupClass - Type: string - Description: Classes CSS additionnelles 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. - Positionne `aria-invalid="true"`. - Est 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 affichée dans le champ. - Défaut: `mdi:currency-eur` ### iconPosition - Type: `'left' | 'right'` - Description: Position de l’icône dans le champ. - Défaut: `right` ### iconSize - Type: string | number - Description: Taille de l’icône. ### iconColor - Type: string - Description: Classe de couleur de l’icône en état neutre. ------------------------------------------------------------------------ ## Comportement montant - Le champ est rendu en `type="text"` avec `inputmode="decimal"`. - Le séparateur décimal affiché par défaut est `.`. - Les virgules saisies par l’utilisateur sont converties en points. - Tous les caractères non numériques, sauf le séparateur décimal, sont supprimés. - La partie décimale est limitée à 2 chiffres. ### Exemples de normalisation - `12,5` devient `12.5` - `0012,345abc` devient `12.34` - `,5` devient `0.5` ### Formatage au blur - `12` devient `12.00` - `12.5` devient `12.50` ------------------------------------------------------------------------ ## Priorité visuelle 1. `error` 2. `success` 3. état neutre ------------------------------------------------------------------------ ## Accessibilité - `aria-invalid` est activé si `error` existe. - `aria-describedby` référence le message affiché sous le champ. - Le composant fonctionne avec ou sans `v-model`. ------------------------------------------------------------------------ ## Events ### update:modelValue - Émis à chaque modification de l’input. - Émis aussi au `blur` si la valeur est reformatée. - Permet l’utilisation avec `v-model`.