Feedback

Componenti di feedback visivo — Badge, Tag, Chip, Avatar, Message, Toast, ProgressBar, ProgressSpinner, Skeleton, Tooltip, EmptyState.

Componenti

Componente	Descrizione
Badge	Indicatore compatto per notifiche e contatori. Supporta varianti `solid`, `outlined`, `subtle`, `dot`
OverlayBadge	Wrapper che sovrappone un badge a qualsiasi elemento figlio (icone, avatar, bottoni)
Tag	Etichetta colorata per categorizzare contenuti. Simile a Badge ma con padding maggiore
Chip	Elemento per tag e filtri attivi. Supporta immagine, icona, indicator e rimozione interattiva
Avatar	Rappresentazione visiva utente tramite immagine, iniziali o icona. Shape circle/square
AvatarGroup	Raggruppa e sovrappone più Avatar con spacing configurabile
Message	Messaggio inline di feedback con severity, auto-dismiss e pulsante di chiusura
Toast	Notifiche temporanee posizionate sullo schermo, gestite via composable `useToast()`
ProgressBar	Barra di avanzamento determinate/indeterminate con striped, animated e severity
ProgressSpinner	Spinner SVG circolare determinate/indeterminate con label e severity
Skeleton	Placeholder animato (wave/pulse) che simula la forma del contenuto durante il caricamento
Tooltip	Testo contestuale su hover/focus/click. Disponibile come componente e come direttiva `v-tooltip`
EmptyState	Stato vuoto con icona, titolo, descrizione e CTA opzionale. Varianti default e compact

Plugin

import { FeedbackPlugin } from '@pzeta/vue-components'
app.use(FeedbackPlugin)

Il FeedbackPlugin registra globalmente tutti i componenti della categoria e la direttiva v-tooltip.

Pattern comuni

Toast (servizio globale)

// Nel layout principale — montare una volta sola
// App.vue: <Toast />

// In qualsiasi componente figlio:
import { useToast } from '@pzeta/vue-components'
const toast = useToast()

toast.success('Salvato!')
toast.error('Errore di rete')
toast.add({ severity: 'info', title: 'Info', message: '...', life: 5000 })

<button v-tooltip="'Salva'">Salva</button>
<button v-tooltip.bottom="'Elimina'">Elimina</button>
<button v-tooltip="{ value: 'Info', position: 'right', showDelay: 300 }">?</button>

Skeleton + contenuto reale

<template>
  <Skeleton v-if="loading" width="100%" height="2rem" />
  <div v-else>{{ contenuto }}</div>
</template>

OverlayBadge su icona

<OverlayBadge :value="notifiche" severity="danger" ping>
  <i class="pi pi-bell text-xl"></i>
</OverlayBadge>

Tooltip

Testo contestuale che appare al hover/focus su un elemento. Disponibile come componente Vue e come direttiva v-tooltip per uso diretto su qualsiasi elemento HTML.

Breadcrumb

Navigazione a briciole di pane per indicare la posizione dell'utente nella gerarchia dell'applicazione. Supporta router-link, link esterni, icone, severity e dimensioni.