feat(upload) : anneau focus clavier, activation Entrée/Espace et prop clearable

- 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>
This commit is contained in:
2026-06-09 16:36:57 +02:00
parent c427f5a7c5
commit 74ee815d82
2 changed files with 69 additions and 14 deletions
@@ -14,6 +14,17 @@
<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
@@ -94,6 +105,11 @@ 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 ''