feat : reorganisation de la structure projet

app/story/input/inputUpload.story.vue

@@ -0,0 +1,236 @@
+<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-error` 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>