tristan
74ee815d82
- Anneau de focus clavier sur le champ (via useKbdFocusRing) - Ouverture du sélecteur de fichier au clavier (Entrée / Espace) - Nouveau prop `clearable` (défaut false) : croix `mdi:close` focusable (Entrée/Espace, anneau clavier) qui vide le champ et émet l'event `clear` - Playground : carte de démonstration "Clearable" Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
123 lines
3.4 KiB
Vue
123 lines
3.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">Clearable (croix pour vider)</h2>
|
|
<MalioInputUpload
|
|
v-model="clearableUpload"
|
|
label="Téléverser un document"
|
|
clearable
|
|
@clear="onClearUpload"
|
|
/>
|
|
<p class="mt-2 text-sm text-gray-500">Valeur : {{ clearableUpload || '(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">Readonly (readonly vide)</h2>
|
|
<MalioInputUpload
|
|
label="Fichier (readonly vide)"
|
|
:readonly="true"
|
|
/>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Readonly (readonly rempli)</h2>
|
|
<MalioInputUpload
|
|
v-model="readonlyFilledUpload"
|
|
label="Fichier (readonly rempli)"
|
|
:readonly="true"
|
|
/>
|
|
</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 readonlyFilledUpload = ref('document.pdf')
|
|
const uploadValue = ref('')
|
|
const dynamicUpload = ref('')
|
|
const clearableUpload = ref('rapport-2026.pdf')
|
|
|
|
const onClearUpload = () => {
|
|
clearableUpload.value = ''
|
|
}
|
|
|
|
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>
|