Componenti

PzetaDashboard

Container con layout grid 12 colonne, lazy loading widget e isolamento errori.

Panoramica

<PzetaDashboard> e il componente container che orchestra il rendering dei widget. Riceve una DashboardConfig con array di WidgetConfig e si occupa di:

caricare dinamicamente il componente di ogni widget tramite widgetRegistry (lazy loading + cache);
posizionare i widget in una griglia CSS 12 colonne, dimensionando ogni widget con width (1-12) e height;
avvolgere ogni widget in un <ErrorBoundary> per isolare i fallimenti;
emettere eventi error, widgetMount, widgetUnmount.

E registrato globalmente dal PzetaWidgetPlugin, quindi non richiede import esplicito.

Props

Prop	Tipo	Default	Descrizione
`config`	`DashboardConfig`	`{ widgets: [] }`	Configurazione dashboard con array di widget
`gap`	`number`	`1`	Spazio tra i widget (in `rem`)
`padding`	`number`	`1`	Padding del container (in `rem`)
`showErrorDetails`	`boolean`	`false`	Mostra stack trace negli error boundary (solo dev)

Eventi

Evento	Payload	Descrizione
`error`	`WidgetError`	Errore catturato in un widget figlio
`widgetMount`	`widgetId: string`	Widget montato nel DOM
`widgetUnmount`	`widgetId: string`	Widget rimosso dal DOM

WidgetError contiene widgetId?, error: Error, timestamp: Date.

Tipi — `DashboardConfig` e `WidgetConfig`

interface DashboardConfig {
  readonly widgets: ReadonlyArray<WidgetConfig>
}

interface WidgetConfig<TProps = Record<string, unknown>> {
  readonly id: string                // identificativo univoco
  readonly type: WidgetType          // valore enum WidgetType
  readonly width: number             // 1-12 (colonne griglia)
  readonly height: number            // 1+ (righe griglia)
  readonly position?: WidgetPosition // { x, y } opzionale per drag-and-drop
  readonly props: TProps             // props specifiche del widget
}

Esempio completo

<script setup lang="ts">
import { WidgetType, type DashboardConfig, type WidgetError } from '@pzeta/vue-widget'

const config: DashboardConfig = {
  widgets: [
    {
      id: 'crm-metrics',
      type: WidgetType.CrmMetricsWidget,
      width: 12,
      height: 1,
      props: {
        metrics: [
          { title: 'Trattative', value: 42, change: 12, trend: 'up' },
          { title: 'Fatturato', value: 158000, change: -3, trend: 'down' },
        ],
      },
    },
    {
      id: 'sales',
      type: WidgetType.RecentSales,
      width: 6,
      height: 2,
      props: { rowsPerPage: 5 },
    },
    {
      id: 'forecast',
      type: WidgetType.SalesForecastWidget,
      width: 6,
      height: 2,
      props: {},
    },
  ],
}

function onError(err: WidgetError) {
  console.error(`[${err.widgetId}]`, err.error)
}
</script>

<template>
  <PzetaDashboard
    :config="config"
    :gap="1.5"
    :padding="1"
    :show-error-details="false"
    @error="onError"
  />
</template>

Validazione widget

Il container valida automaticamente la configurazione di ogni widget. Vengono loggati in console gli errori per widget con:

id mancante o stringa vuota;
width fuori dal range 1-12;
height minore di 1.

I widget non validi vengono comunque renderizzati per evitare regressioni silenziose, ma il warning aiuta in fase di sviluppo.

Iniezione automatica props

A ogni widget figlio vengono iniettate automaticamente le seguenti props (tipo BaseWidgetProps):

Prop iniettata	Tipo	Origine
`widgetId`	`string`	Da `WidgetConfig.id`
`widgetType`	`string`	Da `WidgetConfig.type`
`currency`	`string`	Da `props.currency` se presente, altrimenti dal locale

I widget personalizzati possono leggere queste props per identificarsi nell'event bus o adattare il rendering al simbolo valuta.

Componenti

Dashboard container, ErrorBoundary e widget tematici raggruppati in 14 categorie.

ErrorBoundary

Wrapper di isolamento errori per impedire che un widget rompa l'intera dashboard.