Dialog default (sub-export)
5 wrapper allineati ai slot props di EnhancedKanbanBoard / KanbanFasiBoard. Importati da @pzeta/vue-kanban/dialogs per mantenere optional le peer dep.
Panoramica
Il sub-export @pzeta/vue-kanban/dialogs espone 5 wrapper "drop-in" che mappano direttamente i slot props dei componenti smart (EnhancedKanbanBoard, KanbanFasiBoard):
| Wrapper | Wrappa | Slot |
|---|---|---|
DefaultFormDialog | SchedaFormDialog | #dialog-form |
DefaultTagDialog | SchedaTagDialog | #dialog-tag |
DefaultCommentDialog | SchedaCommentDialog | #dialog-comment |
DefaultAttachmentDialog | AttachmentDialog di @pzeta/vue-attachment | #dialog-attachment |
DefaultActivityDialog | AttivitaForm di @pzeta/attivita (con provide del context) | #dialog-activity |
Perché un sub-export separato?
@pzeta/attivita e @pzeta/vue-attachment sono peerDependenciesMeta.optional. Tenendo i wrapper su /dialogs invece che sul main, app che non usano i dialog default non sono costrette a installarle e il bundle base resta a 278 KB.Quando usarli
- Vuoi i dialog standard PZeta (form scheda con campi dinamici, gestione tag M2M, commenti, allegati MinIO, attività CRM).
- Hai installato le peer deps optional pertinenti.
Per dialog completamente custom, ignora questo sub-export e fornisci i tuoi componenti direttamente come slot.
Installazione peer deps
# Solo se userai DefaultActivityDialog
npm install @pzeta/attivita
# Solo se userai DefaultAttachmentDialog
npm install @pzeta/vue-attachment
Gli altri 3 wrapper (Form, Tag, Comment) non richiedono peer deps optional.
Uso completo
<script setup lang="ts">
import { EnhancedKanbanBoard, getIdUtenteFromJwt } from '@pzeta/vue-kanban'
import {
DefaultFormDialog,
DefaultTagDialog,
DefaultCommentDialog,
DefaultAttachmentDialog,
DefaultActivityDialog,
} from '@pzeta/vue-kanban/dialogs'
const getToken = () => sessionStorage.getItem('jwt')
const getCurrentUserId = () => getIdUtenteFromJwt()
</script>
<template>
<EnhancedKanbanBoard
board-id-or-code="TICKET"
:get-token="getToken"
:get-current-user-id="getCurrentUserId"
>
<template #dialog-form="p">
<DefaultFormDialog v-bind="p" />
</template>
<template #dialog-tag="p">
<DefaultTagDialog v-bind="p" />
</template>
<template #dialog-comment="p">
<DefaultCommentDialog v-bind="p" />
</template>
<template #dialog-attachment="p">
<DefaultAttachmentDialog v-bind="p" />
</template>
<template #dialog-activity="p">
<DefaultActivityDialog v-bind="p" :get-token="getToken" />
</template>
</EnhancedKanbanBoard>
</template>
v-bind="p" inoltra in massa tutti i slot props (visible, idscheda, availableTags, onClose, onSaved, ...) — non serve elencarli. Per DefaultActivityDialog è raccomandato passare :get-token esplicitamente per le chiamate REST autenticate verso @pzeta/attivita.
Solo alcuni dialog
Puoi fornire solo gli slot che ti servono. Senza slot il pulsante azione corrispondente sulla card non apre nulla:
<EnhancedKanbanBoard board-id-or-code="TICKET" :get-token="getToken">
<template #dialog-form="p"><DefaultFormDialog v-bind="p" /></template>
<template #dialog-comment="p"><DefaultCommentDialog v-bind="p" /></template>
<!-- niente tag/attachment/activity -->
</EnhancedKanbanBoard>
Mix con dialog custom
Mescola wrapper default con dialog custom per i casi che richiedono UX specifica:
<EnhancedKanbanBoard board-id-or-code="TICKET" :get-token="getToken">
<template #dialog-form="p"><DefaultFormDialog v-bind="p" /></template>
<template #dialog-tag="p"><DefaultTagDialog v-bind="p" /></template>
<!-- dialog custom per le attività -->
<template #dialog-activity="{ visible, entitasorgente, identitasorgente, onClose, onSaved }">
<MyCustomActivityDialog
:visible="visible"
:entity-type="entitasorgente"
:entity-id="identitasorgente"
@close="onClose"
@saved="onSaved"
/>
</template>
</EnhancedKanbanBoard>
Slot props completi
Riferimento dei contratti per implementare wrapper alternativi:
| Slot | Slot props |
|---|---|
#dialog-form | { visible, boardId, idfase, campi, priorita, item?, getToken, onClose, onSaved } |
#dialog-tag | { visible, idscheda, availableTags, currentTagIds, onClose, onSaved } |
#dialog-comment | { visible, idscheda, idutente, onClose, onSaved } |
#dialog-attachment | { visible, referenceValue, onClose } |
#dialog-activity | { visible, entitasorgente, identitasorgente, getToken, onClose, onSaved } |
Convenzione naming: i slot props sono
onClose / onSaved (camelCase con prefisso on), pensati per essere passati come callback. I wrapper default li accettano e li chiamano internamente. Se preferisci binding via v-model:visible / @saved, mantieni la stessa logica nel wrapper custom.