KanbanBoard
Panoramica
KanbanBoard è il componente di basso livello: riceve colonne e items come props generici e non sa nulla di fasi, schede o PostgREST. Tutta la logica di dominio è delegata al consumer tramite emits e slot.
Anteprima live
Props
| Prop | Tipo | Default | Descrizione |
|---|---|---|---|
columns | Record<string, unknown>[] | [] | Array di oggetti colonna |
columnKeyField | string | — | Nome del campo chiave nelle colonne |
columnTitleField | string | — | Nome del campo titolo nelle colonne |
items | Record<string, unknown>[] | [] | Array di oggetti elemento |
itemKeyField | string | — | Nome del campo chiave negli elementi |
itemTitleField | string | — | Nome del campo titolo negli elementi |
itemColumnField | string | — | Campo che collega l'elemento alla colonna |
searchQuery | string | '' | Query di ricerca per filtrare elementi |
searchFields | string[] | — | Campi in cui cercare (supporta dot notation) |
addItemLabel | string | 'Nuova' | Prefisso etichetta pulsante aggiungi (il titolo della colonna viene accodato) |
showAddItem | boolean | true | Mostra il pulsante "aggiungi" in fondo alle colonne. false per chi non ha il permesso di creare |
emptyLabel | string | 'Trascina qui gli elementi' | Testo delle colonne vuote |
emptyInsertThreshold | number | — | Distanza in px entro cui una colonna vuota accetta il drop (opzione SortableJS, default di libreria 5) |
showToolbar | boolean | true | Mostra toolbar superiore |
columnWidth | number | 280 | Larghezza minima delle colonne in pixel: la griglia usa minmax(columnWidth px, 1fr) |
enableColumnDrag | boolean | false | Abilita drag delle colonne per riordino |
Emits
| Evento | Payload | Descrizione |
|---|---|---|
moveItem | (itemId, sourceId, targetId, newIndex) | Elemento spostato. sourceId è letto dall'item originale tramite itemColumnField (anche con dot notation) |
addItem | columnId | Clic "aggiungi" in una colonna |
editItem | item | Clic "modifica" su un elemento |
deleteItem | itemId | Clic "elimina" su un elemento |
reorderColumns | column[] | Colonne riordinate tramite drag |
updateItems | item[] | Lista elementi aggiornata |
Slot
| Slot | Props | Descrizione |
|---|---|---|
header-start | — | Sinistra della toolbar |
header-center | — | Centro della toolbar |
header-end | — | Destra della toolbar |
column-header | { column } | Intestazione colonna custom |
item | { item } | Rendering card custom |
Area di drop
Ogni colonna occupa tutta l'altezza della riga della griglia e la lista draggable si estende fino in fondo (flex-1): il drop funziona anche nella parte bassa di una colonna vuota o corta, senza aggiramenti lato consumer. Per board molto dense si può allargare la soglia di aggancio delle colonne vuote con emptyInsertThreshold.
Pulsante "aggiungi" e colonne vuote
<KanbanBoard
...
:show-add-item="puoCreare"
empty-label="Nessuna opportunità in questa fase"
/>
addItemLabel='' non nasconde il pulsante (l'etichetta diventa il solo titolo della colonna): per nasconderlo si usa showAddItem.
Colonne compresse
Una colonna viene resa compressa (52px di larghezza) se il suo oggetto ha la proprietà _compressa: true. KanbanFasiBoard gestisce questo stato internamente tramite faseCompresse.
Esempio con dati arbitrari
<template>
<KanbanBoard
:columns="[
{ id: 'todo', label: 'Da fare' },
{ id: 'doing', label: 'In corso' },
{ id: 'done', label: 'Fatto' },
]"
column-key-field="id"
column-title-field="label"
:items="tasks"
item-key-field="id"
item-title-field="title"
item-column-field="status"
:enable-column-drag="true"
@move-item="handleMove"
@reorder-columns="handleReorder"
>
<template #item="{ item }">
<div class="p-3 bg-white rounded shadow text-sm">{{ item.title }}</div>
</template>
</KanbanBoard>
</template>