Feedback

Message

Messaggio di feedback inline con severity, varianti visive, auto-dismiss configurabile e pulsante di chiusura.

Import

import { Message } from '@pzeta/vue-components'
// oppure tramite plugin:
import { FeedbackPlugin } from '@pzeta/vue-components'
app.use(FeedbackPlugin)

Esempio Base

Props

Prop	Tipo	Default	Descrizione
`severity`	`'success' \| 'info' \| 'warn' \| 'error' \| 'secondary' \| 'contrast'`	`'info'`	Severity che determina colore e icona
`title`	`string \| null`	`null`	Titolo opzionale, in grassetto sopra il messaggio
`message`	`string \| null`	`null`	Testo del messaggio (alternativa allo slot)
`closable`	`boolean`	`true`	Mostra il pulsante di chiusura
`closeIcon`	`string`	—	Icona del pulsante di chiusura (default dal config globale)
`closeAriaLabel`	`string`	«Chiudi»	Nome accessibile del pulsante di chiusura; default `feedback.closeAriaLabel` (dalla 1.24.0)
`life`	`number \| null`	`null`	Durata in ms prima della chiusura automatica (richiede `sticky: false`)
`sticky`	`boolean`	`true`	Se `true`, ignora `life` e rimane visibile fino alla chiusura manuale
`icon`	`string \| null`	`null`	Icona custom (override dell'icona determinata dalla severity)
`size`	`'small' \| 'medium' \| 'large'`	`'medium'`	Dimensione del messaggio
`variant`	`'default' \| 'outlined' \| 'filled' \| 'borderless'`	`'default'`	Variante visiva

Emits

Evento	Payload	Descrizione
`close`	`Event`	Emesso quando l'utente chiude manualmente il messaggio
`lifeEnd`	—	Emesso quando scade il timer `life` (auto-dismiss)

Slot

Slot	Scope	Descrizione
`default`	—	Contenuto custom del messaggio (sostituisce la prop `message`)
`icon`	`class: string`	Icona custom con accesso alla classe severity

Esempi

Varianti visive

Auto-dismiss

Non closable (solo informativo)

Contenuto custom via slot

Con icona custom

Accessibilità

error e warn usano role="alert" e aria-live="assertive", le altre severity role="status" e aria-live="polite".
Davanti al testo uno sr-only legge la severity localizzata («Errore:», «Attenzione:»…). secondary e contrast sono solo toni visivi e non hanno prefisso: prima veniva letto il nome inglese («secondary: …») (dalla 1.24.0).
Il pulsante di chiusura si chiama «Chiudi» (feedback.closeAriaLabel), personalizzabile con closeAriaLabel. Fino alla 1.23 usava «Rimuovi», chiave condivisa con i Chip e quindi non modificabile per il solo Message (dalla 1.24.0).

TypeScript

import type { MessageProps, MessageEmits } from '@pzeta/vue-components'
import type { MessageSeverity, MessageVariant } from '@pzeta/vue-components'

// MessageSeverity = 'success' | 'info' | 'warn' | 'error' | 'secondary' | 'contrast'
// MessageVariant  = 'default' | 'outlined' | 'filled' | 'borderless'

EmptyState

Componente per comunicare l'assenza di contenuti con icona, titolo, descrizione e azione opzionale. Disponibile in variante default (centrata) e compact (inline).

OverlayBadge

Wrapper che posiziona un badge sovrapposto a qualsiasi elemento figlio. Utile per notifiche su icone, avatar e bottoni.