Feedback

AvatarProgressRing

Avatar circolare con anello di progresso perimetrale, pensato per scenari di gamification (punti, livelli, completamento profilo). Contenuto centrale con fallback immagine → label → icona e slot personalizzabili.

Import

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

Esempio Base

Props

Prop	Tipo	Default	Descrizione
`value`	`number`	`0`	Valore corrente del progresso (vincolato all'intervallo `[0, max]`)
`max`	`number`	`100`	Valore massimo, corrisponde al 100% dell'anello
`image`	`string \| null`	`null`	URL dell'immagine avatar
`label`	`string \| null`	`null`	Iniziali/label di fallback quando manca l'immagine
`icon`	`string \| null`	`null`	Icona di fallback (classe CSS, es. `'pi pi-user'`) quando mancano immagine e label
`alt`	`string`	`''`	Testo alternativo dell'immagine (vuoto se decorativa)
`size`	`number`	`96`	Diametro totale in px, anello incluso
`strokeWidth`	`number`	`6`	Spessore dell'anello di progresso in px
`gap`	`number`	`4`	Distanza in px tra anello e avatar interno
`valueColor`	`string`	`undefined`	Colore dell'arco di valore (sovrascrive `severity`)
`rangeColor`	`string`	`undefined`	Colore dell'anello di sfondo (traccia)
`severity`	`'primary' \| 'secondary' \| 'success' \| 'info' \| 'warn' \| 'danger' \| 'contrast' \| 'help'`	`'primary'`	Severità del design system per colorare l'arco di valore
`rounded`	`boolean`	`true`	Terminazione arrotondata dell'arco di valore
`ariaLabel`	`string \| null`	`null`	Label ARIA; se assente usa il fallback `"Progresso: N%"`

Emits

Evento	Payload	Descrizione
`error`	`Event`	Emesso quando il caricamento dell'immagine avatar fallisce (fallback su label/icona/slot)

Slot

Slot	Scope	Descrizione
`center`	—	Sostituisce l'intero contenuto centrale (immagine/label/icona)
`badge`	—	Badge sovrapposto (status dot, livello, ecc.) mostrato solo se valorizzato

Contenuto centrale

In assenza dello slot center, il componente sceglie il contenuto con questa priorità:

image — se fornita e caricata correttamente;
label — se nessuna immagine (o immagine non caricata);
icon — se nessuna immagine e nessuna label.

Se l'immagine fallisce il caricamento viene emesso error e si ricade automaticamente su label/icona.

Esempi

Con immagine e badge

Severity e dimensioni

Colori e spessore personalizzati

Slot center personalizzato

Accessibilità

L'elemento radice espone role="progressbar" con aria-valuemin, aria-valuemax e aria-valuenow.
Fornire ariaLabel per descrivere il progresso; in mancanza viene usato "Progresso: N%".
Valorizzare alt con il nome reale dell'utente quando l'immagine veicola informazione, lasciarlo vuoto ('') se l'avatar è puramente decorativo.

TypeScript

import type {
  AvatarProgressRingProps,
  AvatarProgressRingEmits,
} from '@pzeta/vue-components'

AvatarGroup

Contenitore che raggruppa e sovrappone più Avatar con spacing configurabile. Ideale per mostrare membri di un team o partecipanti.

Badge

Indicatore visivo compatto per notifiche, contatori e stati. Supporta severity, varianti, icone e dismissal.