Componenti Ui
KanbanColumn
Colonna singola con drag-and-drop degli elementi.
Panoramica
KanbanColumn gestisce una singola colonna della board con drag-and-drop basato su vue-draggable-next (SortableJS). È usato internamente da KanbanBoard ma può essere istanziato direttamente per layout custom.
Anteprima live
Props
| Prop | Tipo | Default | Descrizione |
|---|---|---|---|
column | Record<string, unknown> | — | Oggetto colonna completo |
columnId | string | number | — | Chiave univoca della colonna |
columnTitle | string | — | Titolo visualizzato |
addItemLabel | string | — | Testo del pulsante "aggiungi" |
items | KanbanItem[] | — | Elementi della colonna |
itemKey | string | — | Nome del campo chiave negli elementi |
compressa | boolean | false | Riduce la colonna a 52px, nasconde items e pulsante |
Emits
| Evento | Payload | Descrizione |
|---|---|---|
moveItem | (itemId, sourceId, targetId, targetIndex) | Elemento spostato tra colonne o riordinato |
addItem | columnId | Clic sul pulsante "aggiungi" |
deleteItem | item | Richiesta eliminazione elemento |
editItem | item | Richiesta modifica elemento |
Slot
| Slot | Props | Descrizione |
|---|---|---|
column-header | { column, columnId, columnTitle, items } | Header colonna custom (default: nome + conteggio + WIP) |
item | { item, index, isDragging } | Rendering card custom |
Header di default
Se non viene fornito lo slot column-header, mostra:
- nome colonna con bordo colorato (usa
column.colore) - conteggio items
- WIP limit se
column.wiplimitè valorizzato (in arancione)
Stato compresso
Quando compressa: true la colonna viene ridotta a 52px e gli elementi sono nascosti (con v-show, non v-if — il drag rimane funzionale). KanbanFasiBoard comprime automaticamente le fasi con finale: true al mount.