Components
AttachmentsManager
Componente presentational completo — toolbar, list/grid, paginazione, delete bulk. Riceve attachments via prop ed emette eventi.
Panoramica
AttachmentsManager è il componente presentational più ricco della libreria. Combina AttachmentsToolbar, AttachmentsList/AttachmentsGrid e una Paginator, gestisce internamente filtri, ricerca, sort, view-mode e selezione multipla.
Non fa fetch di rete: riceve
attachments via prop ed emette eventi (upload, delete, delete-many, download, refresh). Per la variante che usa useAttachments e fa fetch automatico vedi AttachmentsManagerConnected.Quando usarlo
- Lista già in memoria (cache, store Pinia, mock per Storybook).
- Vuoi controllare manualmente upload/delete/download (workflow custom).
- Demo / SSR senza backend.
In tutti gli altri casi, preferisci AttachmentsManagerConnected.
Props
| Prop | Tipo | Default | Descrizione |
|---|---|---|---|
attachments | Attachment[] | — | Richiesto. Lista da visualizzare |
isLoading | boolean | false | Mostra skeleton/spinner |
error | string | null | null | Messaggio di errore mostrato in cima |
maxSize | number | 104857600 | Dimensione max upload in byte (100 MB), validata client-side |
allowedTypes | string[] | — | MIME accepted (es. ['image/*', 'application/pdf']) |
multiple | boolean | true | Upload multipli |
viewMode | 'grid' | 'list' | 'grid' | Modalità visualizzazione (sincronizzata con update:viewMode) |
enableFilters | boolean | true | Mostra filtri tipo/size nella toolbar |
enableSearch | boolean | true | Mostra campo ricerca |
enableViewSwitch | boolean | true | Mostra toggle list/grid |
enableUpload | boolean | true | Mostra pulsante upload |
multipleSelect | boolean | true | Mostra checkbox per selezione multipla |
Eventi
| Evento | Payload | Descrizione |
|---|---|---|
update:viewMode | 'grid' | 'list' | Cambio modalità (compatibile v-model:viewMode) |
upload | File[] | File già validati (size + tipo) pronti all'upload |
delete | id: string | Richiesta cancellazione singola |
delete-many | ids: string[] | Cancellazione bulk dei selezionati |
download | attachment: Attachment | Richiesta download |
refresh | — | Click sul pulsante refresh in toolbar |
Validazione client-side: l'evento
upload viene emesso solo per i file che superano la validazione maxSize + allowedTypes. I file rifiutati producono un toast di errore tramite useToast di @pzeta/vue-components.Esempio: lista da store
<script setup lang="ts">
import { ref } from 'vue'
import type { Attachment } from '@pzeta/vue-attachment'
const attachments = ref<Attachment[]>([
{ id: '1', fileName: 'contratto.pdf', fileType: 'application/pdf', size: 245000, uploadDate: '2026-05-01T10:00:00Z' }
])
const loading = ref(false)
const errorMsg = ref<string | null>(null)
async function onUpload(files: File[]) {
// upload manuale verso il tuo endpoint
for (const file of files) {
const created = await myApi.upload(file)
attachments.value.push(created)
}
}
function onDelete(id: string) {
attachments.value = attachments.value.filter(a => a.id !== id)
}
function onDeleteMany(ids: string[]) {
attachments.value = attachments.value.filter(a => !ids.includes(a.id))
}
</script>
<template>
<AttachmentsManager
:attachments="attachments"
:is-loading="loading"
:error="errorMsg"
:max-size="10485760"
:allowed-types="['image/png', 'image/jpeg', 'application/pdf']"
@upload="onUpload"
@delete="onDelete"
@delete-many="onDeleteMany"
@refresh="reload"
/>
</template>