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 |
itemColumnField | string | 'columnId' | Campo (piatto) dell'item che indica la colonna di provenienza, usato come sourceId di moveItem |
showAddItem | boolean | true | Mostra il pulsante "aggiungi" |
emptyLabel | string | 'Trascina qui gli elementi' | Testo mostrato quando la colonna è vuota |
emptyInsertThreshold | number | — | Soglia in px per il drop su lista vuota (opzione SortableJS) |
Emits
| Evento | Payload | Descrizione |
|---|---|---|
moveItem | (itemId, sourceId, targetId, targetIndex) | Elemento spostato tra colonne o riordinato. Se l'item non ha itemColumnField, sourceId ripiega sulla colonna di destinazione: usata dentro KanbanBoard la sorgente viene invece ricavata dall'item originale |
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)
Area di drop
La colonna è un contenitore flex flex-col h-full e la lista draggable ha flex-1: l'intera altezza della colonna accetta il drop, anche quando è vuota. Il pulsante "aggiungi" resta ancorato in fondo.
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.