Componenti Board

KanbanBoard

Componente board generico con drag-and-drop, indipendente dal dominio.

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
`showToolbar`	`boolean`	`true`	Mostra toolbar superiore
`columnWidth`	`number`	`340`	Larghezza colonne in pixel
`enableColumnDrag`	`boolean`	`false`	Abilita drag delle colonne per riordino

Emits

Evento	Payload	Descrizione
`moveItem`	`(itemId, sourceId, targetId, newIndex)`	Elemento spostato
`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

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>

EnhancedKanbanBoard

Board Kanban high-level facade con caricamento dati da backend, gestione CRUD schede, slot dialog e adapter item personalizzabile.

KanbanFasiBoard

Componente completo per pipeline fasi con drag-and-drop, metriche, slot dialog per CRUD schede/tag/attività/allegati/commenti.