# MalioInputTextArea Composant textarea avec label flottant, états visuels (erreur / succès), gestion du redimensionnement et compteur optionnel. ------------------------------------------------------------------------ ## Props détaillées ### id - Type: string - Description: Identifiant HTML du textarea. - 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 du textarea (utile pour les formulaires). ### autocomplete - Type: string - Description: Active ou configure l’autocomplétion navigateur. ### 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 ### textInput - Type: string - Description: Classes CSS appliquées au textarea (taille de texte, etc.). - Défaut: text-lg ### textLabel - Type: string - Description: Classes CSS appliquées au label. - Défaut: text-sm ### rounded - Type: string - Description: Classe Tailwind pour le border-radius. - Défaut: rounded-md ------------------------------------------------------------------------ ## Dimensions ### size - Type: number | string - Description: Nombre de lignes initiales (rows). - Défaut: 2 ### minResizeWidth / maxResizeWidth - Type: number | string - Description: Largeur minimale / maximale autorisée lors du redimensionnement. ### minResizeHeight / maxResizeHeight - Type: number | string - Description: Hauteur minimale / maximale autorisée lors du redimensionnement. ### resize - Type: 'none' | 'both' | 'horizontal' | 'vertical' - Description: Définit le comportement de redimensionnement CSS. - Défaut: both ------------------------------------------------------------------------ ## Validation & États ### required - Type: boolean - Description: Ajoute l’attribut HTML required. ### maxLength - Type: number | string - Description: Longueur maximale autorisée. - Effet: Limite la saisie et alimente le compteur. ### disabled - Type: boolean - Description: Désactive complètement le champ. ### readonly - Type: boolean - Description: Rend le champ non modifiable mais focusable. ### 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. ------------------------------------------------------------------------ ## Compteur ### showCounter - Type: boolean - Description: Affiche le compteur x / maxLength. - Condition: - showCounter = true - maxLength défini et > 0 - Position: Bas gauche du textarea. - Mise à jour: Dynamique à chaque saisie. ------------------------------------------------------------------------ ## Priorité d’affichage ### Messages 1. error 2. success 3. hint ------------------------------------------------------------------------ ## Accessibilité - aria-invalid est activé si error existe. - aria-describedby référence le message affiché. - Fonctionne avec ou sans v-model. ------------------------------------------------------------------------ ## Events ### update:modelValue - Émis à chaque modification du textarea. - Permet l’utilisation avec v-model.