# MalioInputUpload Composant input d'upload de fichier avec label flottant, icône cloud, affichage du nom du fichier sélectionné, é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. ### modelValue - Type: string | null | undefined - Description: Nom du fichier sélectionné (valeur contrôlée). - 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 texte. ### labelClass - Type: string - Description: Classes CSS appliquées au label. ### groupClass - Type: string - Description: Classes CSS appliquées au conteneur. ### displayIcon - Type: boolean - Défaut: true - Description: Affiche ou masque l'icône d'upload. ------------------------------------------------------------------------ ## Validation & Contraintes ### disabled - Type: boolean - Description: Désactive complètement le champ. ### accept - Type: string - Description: Types de fichiers acceptés (ex: `.pdf,.doc`). ------------------------------------------------------------------------ ## É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 - `mdi:cloud-arrow-up-outline` : icône d'upload affichée à droite. ### 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'input texte, le sélecteur de fichier natif s'ouvre. - Le nom du fichier sélectionné est affiché dans l'input. - L'input texte est en readonly — la saisie manuelle n'est pas autorisée. ## 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 quand un fichier est sélectionné (valeur = nom du fichier). - Permet l'utilisation avec v-model. ### file-selected - Émis quand un fichier est sélectionné (valeur = objet File). - Permet d'accéder au fichier pour l'upload.