Componenti
Base
Widget di utility base — placeholder, loading, metriche e bottoni di selezione.
I widget base sono primitive riutilizzabili dentro o fuori la dashboard. Non estendono BaseWidgetProps (a parte dove specificato), e possono essere importati direttamente.
EmptyWidget
Placeholder per stato vuoto o assenza dati. Usa EmptyState di @pzeta/vue-components internamente.
| Prop | Tipo | Descrizione |
|---|---|---|
icon | string | Classe CSS icona (default: status.inbox dal registry) |
title | string | Titolo (default: t('widgets.empty.title')) |
description | string | Descrizione (default: t('widgets.empty.description')) |
<EmptyWidget title="Nessuna trattativa" description="Crea la prima trattativa">
<Button label="Nuova trattativa" />
</EmptyWidget>
LoadingWidget
Spinner di caricamento opzionalmente con testo.
| Prop | Tipo | Default | Descrizione |
|---|---|---|---|
text | string | '' | Testo personalizzato |
showText | boolean | false | Mostra testo default t('widgets.loading.title') |
MetricsWidget
Griglia di card metriche con animazione contatori e indicatori di trend.
| Prop | Tipo | Default | Descrizione |
|---|---|---|---|
metrics | MetricCard[] | — | Array metriche con title, value, icon, trend?, change? |
columns | 1 | 2 | 3 | 4 | 2 | Colonne griglia |
animate | boolean | true | Abilita animazione contatori |
animationDuration | number | 1500 | Durata animazione in ms |
<MetricsWidget
:metrics="[
{ title: 'Vendite', value: 1234, icon: 'pi pi-shopping-cart', change: 12, trend: 'up' },
{ title: 'Ordini', value: 567, icon: 'pi pi-box', change: -3, trend: 'down' },
]"
:columns="2"
/>
SelectButtons
Gruppo di bottoni per selezione singola, alternativa compatta a <select>.
| Prop | Tipo | Default | Descrizione |
|---|---|---|---|
options | SelectOption[] | [] | Opzioni { label, value } |
modelValue | string | — | Valore selezionato |
size | 'small' | 'normal' | 'small' | Dimensione bottoni |
| Evento | Payload |
|---|---|
update:modelValue | string |
change | { value: string, selectedOption: SelectOption } |
StatsCards
Griglia di card statistiche con sfondo personalizzato (immagine o colore) e indicatore di trend.
| Prop | Tipo | Descrizione |
|---|---|---|
statistiche | StatisticCard[] | Array con titolo, valore, trend, bgColor, backgroundUrl? |
Layout responsive a 4 colonne su lg, 2 su md, 1 su mobile.