malio-layer-ui/app/story/input/inputUpload.story.vue

<template>
  <Story title="Input/Upload">
    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Simple</h2>
        <MalioInputUpload
          v-model="simpleValue"
          label="Fichier"
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Sans icône</h2>
        <MalioInputUpload
          v-model="noIconValue"
          label="Fichier"
          :display-icon="false"
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Avec hint</h2>
        <MalioInputUpload
          v-model="hintValue"
          label="Fichier"
          hint="Formats acceptés : PDF, DOC, DOCX"
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
        <MalioInputUpload
          v-model="disabledValue"
          label="Fichier"
          disabled
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Readonly (avec fichier)</h2>
        <MalioInputUpload
          v-model="readonlyValue"
          label="Fichier"
          disabled
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Erreur</h2>
        <MalioInputUpload
          v-model="errorValue"
          label="Fichier"
          error="Format non supporté"
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Succès</h2>
        <MalioInputUpload
          v-model="successValue"
          label="Fichier"
          success="Fichier valide"
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Avec accept (PDF)</h2>
        <MalioInputUpload
          v-model="acceptValue"
          label="Document PDF"
          accept=".pdf"
          hint="Seuls les fichiers PDF sont acceptés"
        />
      </div>
    </div>
  </Story>
</template>

<docs lang="md">
# 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.

</docs>

<script setup lang="ts">
import {ref} from 'vue'
import MalioInputUpload from '../../components/malio/input/InputUpload.vue'

const simpleValue = ref('')
const noIconValue = ref('')
const hintValue = ref('')
const disabledValue = ref('document.pdf')
const readonlyValue = ref('rapport.pdf')
const errorValue = ref('image.bmp')
const successValue = ref('rapport.pdf')
const acceptValue = ref('')
</script>