Components

AttachmentPopover

Popover compatto con lista allegati + pannello dettagli. Componente presentational (riceve attachments via prop).

Panoramica

AttachmentPopover è un indicatore compatto da mettere in un header / toolbar di pagina (es. accanto al numero del Ticket, in una riga di tabella, in un Card header). Click sul trigger apre un popover con:

Header colorato con titolo + dimensione totale
Lista scrollabile di allegati con thumbnail/icona
Pannello dettagli inferiore (selezione corrente: nome, tipo, size, data)
Azioni download + delete (con ConfirmDialog integrato)

È presentational: riceve attachments via prop ed emette download / delete. Per la variante che fetcha autonomamente, vedi AttachmentPopoverConnected.

Se attachments è vuoto il componente non viene renderizzato (no trigger button).

Props

Prop	Tipo	Default	Descrizione
`attachments`	`Attachment[]`	—	Richiesto. Lista da visualizzare
`isLoading`	`boolean`	`false`	Mostra spinner nel popover
`groupId`	`string \| number`	`'default'`	Chiave del `ConfirmDialog` group. Necessaria se hai più popover sulla stessa pagina, per evitare collisioni
`canDelete`	`boolean`	`true`	Mostra il pulsante elimina

Eventi

Evento	Payload	Descrizione
`download`	`attachment: Attachment`	Click sul pulsante download del dettaglio selezionato
`delete`	`attachment: Attachment`	Conferma eliminazione (dopo `ConfirmDialog`)

Esempio

<script setup lang="ts">
import { ref } from 'vue'
import type { Attachment } from '@pzeta/vue-attachment'

const ticketId = '42'
const allegati = ref<Attachment[]>([
  { id: '1', fileName: 'foto.png', fileType: 'image/png', size: 32500, uploadDate: '2026-05-01T10:00:00Z' }
])

function onDownload(a: Attachment) {
  // chiama il tuo download URL
}
function onDelete(a: Attachment) {
  allegati.value = allegati.value.filter(x => x.id !== a.id)
}
</script>

<template>
  <header class="flex items-center gap-2">
    <span>Ticket #{{ ticketId }}</span>
    <AttachmentPopover
      :attachments="allegati"
      :group-id="ticketId"
      @download="onDownload"
      @delete="onDelete"
    />
  </header>
</template>

Anteprima live

Note implementative

Usa ConfirmDialog (@pzeta/vue-components) con group derivato da groupId ('Attachment' + groupId).
Selezione iniziale: il primo allegato della lista (mostrato nel pannello dettagli).
formatDate / formatFileSize interni gestiscono la localizzazione.

AttachmentDialog

Modal che wrappa AttachmentsManagerConnected per gestione allegati in popup. v-model:visible.

AttachmentPopoverConnected

Container che wrappa AttachmentPopover e fa fetch/download/delete automatico via useAttachments + adapter.