Getting Started
Installazione
Installazione e configurazione di @pzeta/vue-kanban v2 — peer deps, plugin Vue, inizializzazione del client PostgREST.
Installazione
npm install @pzeta/vue-kanban
# Opzionale — solo se userai i dialog default
npm install @pzeta/attivita @pzeta/vue-attachment
@pzeta/attivita e @pzeta/vue-attachment sono peerDependenciesMeta.optional: installale solo se importi da @pzeta/vue-kanban/dialogs.
Peer dependencies
| Pacchetto | Versione | Optional |
|---|---|---|
vue | ^3.5.32 | no |
@pzeta/vue-components | ^1.4.0 | no |
@pzeta/vue-i18n | ^1.0.2 | no |
@pzeta/attivita | ^0.1.2 | sì (richiesto solo da DefaultActivityDialog) |
@pzeta/vue-attachment | ^2.0.1 | sì (richiesto solo da DefaultAttachmentDialog) |
Inizializzazione del client PostgREST
In v2 il configService legacy è stato sostituito da initializePostgRESTClient(). Va chiamato una volta prima di montare l'app:
// main.ts
import { createApp } from 'vue'
import { initializePostgRESTClient } from '@pzeta/vue-kanban'
import '@pzeta/vue-kanban/style.css'
import App from './App.vue'
const app = createApp(App)
await initializePostgRESTClient()
app.mount('#app')
La libreria legge la configurazione dalle variabili d'ambiente Vite (
VITE_APP_API_URL, VITE_APP_SCHEMA, VITE_APP_DISABLE_CACHE). Vedi la sezione Variabili d'ambiente. Per backend non-PostgREST salta questa inizializzazione e passa un dataSource custom a useBoardService.Registrazione plugin (opzionale)
Il plugin registra globalmente i componenti UI principali (i 4 componenti board + ActivityView):
import { VueKanbanPlugin } from '@pzeta/vue-kanban'
app.use(VueKanbanPlugin)
Componenti registrati:
KanbanBoardKanbanColumnEnhancedKanbanBoardKanbanFasiBoardElementCardActivityView
Il plugin non registra i dialog default (
DefaultFormDialog, ecc.): vanno importati esplicitamente da @pzeta/vue-kanban/dialogs per garantire il tree-shaking delle peer dependencies opzionali.Opzioni del plugin
app.use(VueKanbanPlugin, {
prefix: 'Pz',
components: ['KanbanBoard', 'EnhancedKanbanBoard'], // selettivo
})
| Opzione | Tipo | Default | Descrizione |
|---|---|---|---|
prefix | string | '' | Prefisso aggiunto al nome dei componenti (es. PzKanbanBoard) |
components | ComponentName[] | tutti | Lista selettiva di componenti da registrare |
Import individuali
Per tree-shaking ottimale importa solo ciò che serve:
// Componenti
import { KanbanBoard, EnhancedKanbanBoard, KanbanFasiBoard, ElementCard } from '@pzeta/vue-kanban'
// Dialog wrapper (sub-export separato — peer deps optional)
import {
DefaultFormDialog,
DefaultTagDialog,
DefaultCommentDialog,
DefaultAttachmentDialog,
DefaultActivityDialog,
} from '@pzeta/vue-kanban/dialogs'
// Composables
import { useBoardService, useBoardMetadata, useFasiService } from '@pzeta/vue-kanban'
// Datasource & Adapter
import {
type KanbanDataSource,
PostgRESTDataSource,
type ItemAdapter,
type NormalizedItem,
defaultPostgRESTItemAdapter,
ITEM_ADAPTER_KEY,
} from '@pzeta/vue-kanban'
// Tipi
import type {
Board, BoardElement, BoardStato, BoardPriorita, BoardTag,
SchedaKanban, FasePipeline, MoveItemResult,
} from '@pzeta/vue-kanban'
// Utility
import { getIdUtenteFromJwt } from '@pzeta/vue-kanban'
Variabili d'ambiente
| Variabile | Descrizione | Default |
|---|---|---|
VITE_APP_API_URL | URL base PostgREST | window.location.origin |
VITE_APP_SCHEMA | Schema PostgreSQL | fasi |
VITE_APP_DISABLE_CACHE | Disabilita cache PostgREST | false |
VITE_APP_SERVICES_URL | URL servizi versionamento form | dev: /git, prod: https://services.pzeta.it/git |
Schema database (default fasi)
Con PostgRESTDataSource di default, la libreria si aspetta:
| Tabella / RPC | PK | Note |
|---|---|---|
fasi.board | idboard | Definizione board, codboard univoco |
fasi.fase | idfase | Stati/colonne |
fasi.scheda | idscheda | Schede (tabella scrittura) |
fasi.v_schede_kanban | view | Lettura schede arricchite |
fasi.priorita | idpriorita | Priorità per board |
fasi.tag | idtag | Tag per board |
fasi.boardcampo | idboardcampo | Campi dinamici (dati_extra) |
fasi.schedatag | idschedatag | M2M scheda↔tag |
fasi.schedacommento | idschedacommento | Commenti |
rpc/sposta_scheda_fase | RPC | Spostamento atomico |
Endpoint, schema, primary key e RPC sono tutti override-abili via PostgRESTDataSourceOptions. Vedi KanbanDataSource.
Verifica installazione
<template>
<EnhancedKanbanBoard board-id-or-code="TICKET" />
</template>
Se vedi le colonne caricate dal backend, l'installazione è OK.