Files
malio-layer-ui/.playground/pages/composant/input/inputUpload.vue
tristan 82c4cfaa90
All checks were successful
Release / release (push) Successful in 1m14s
feat: Ajout de composant (#23)
| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|                  |                 |

## Description de la PR

## Modification du .env

## Check list

- [x] Pas de régression
- [x] TU/TI/TF rédigée
- [x] TU/TI/TF OK
- [x] CHANGELOG modifié

Co-authored-by: kevin <kevin@yuno.malio.fr>
Co-authored-by: Kevin Boudet <kevin@yuno.malio.fr>
Reviewed-on: #23
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>
2026-03-26 07:40:04 +00:00

89 lines
2.4 KiB
Vue

<template>
<div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
<div class="rounded-lg border p-4">
<h2 class="mb-4 text-xl font-bold">Simple</h2>
<MalioInputUpload label="Fichier" />
</div>
<div class="rounded-lg border p-4">
<h2 class="mb-4 text-xl font-bold">Avec label et v-model</h2>
<MalioInputUpload
v-model="uploadValue"
label="Téléverser un document"
/>
<p class="mt-2 text-sm text-gray-500">Valeur : {{ uploadValue || '(aucun)' }}</p>
</div>
<div class="rounded-lg border p-4">
<h2 class="mb-4 text-xl font-bold">Avec accept (PDF)</h2>
<MalioInputUpload
label="Document PDF"
accept=".pdf"
/>
</div>
<div class="rounded-lg border p-4">
<h2 class="mb-4 text-xl font-bold">Désactivé</h2>
<MalioInputUpload
model-value="document.pdf"
disabled
label="Fichier"
/>
</div>
<div class="rounded-lg border p-4">
<h2 class="mb-4 text-xl font-bold">Avec hint</h2>
<MalioInputUpload
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">Erreur</h2>
<MalioInputUpload
model-value="image.bmp"
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
model-value="rapport.pdf"
label="Fichier"
success="Fichier valide"
/>
</div>
<div class="rounded-lg border p-4">
<h2 class="mb-4 text-xl font-bold">Validation dynamique</h2>
<MalioInputUpload
v-model="dynamicUpload"
label="Document PDF"
accept=".pdf"
hint="Seuls les fichiers PDF sont acceptés"
:error="dynamicError"
:success="dynamicSuccess"
/>
</div>
</div>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue'
const uploadValue = ref('')
const dynamicUpload = ref('')
const dynamicError = computed(() => {
if (!dynamicUpload.value) return ''
return dynamicUpload.value.endsWith('.pdf') ? '' : 'Seuls les fichiers PDF sont acceptés'
})
const dynamicSuccess = computed(() => {
if (!dynamicUpload.value) return ''
return dynamicUpload.value.endsWith('.pdf') ? 'Fichier PDF valide' : ''
})
</script>