Forms

Rating

Componente di valutazione a stelle con numero configurabile di stelle, icone personalizzabili, modalità readonly e pulsante di annullamento.

Import

import { Rating } from '@pzeta/vue-components'

Props

Prop	Tipo	Default	Descrizione
`modelValue`	`number \| null`	`null`	Valore del rating (v-model). Intero da 1 a `stars`, oppure null se non selezionato.
`stars`	`number`	`5`	Numero di stelle da visualizzare.
`cancel`	`boolean`	`true`	Mostra il pulsante di annullamento (icona ban) per deselezionare il rating.
`onIcon`	`string`	`'pi pi-star-fill'` (da config)	Classe CSS dell'icona stella selezionata.
`offIcon`	`string`	`'pi pi-star'` (da config)	Classe CSS dell'icona stella non selezionata.
`cancelIcon`	`string`	`'pi pi-ban'` (da config)	Classe CSS dell'icona del pulsante di annullamento.
`label`	`string`	`null`	Etichetta del campo.
`helperText`	`string`	`null`	Testo di aiuto visualizzato sotto il componente.
`error`	`string`	`null`	Messaggio di errore; attiva lo stato di errore visivo.
`disabled`	`boolean`	`false`	Disabilita l'interazione.
`readonly`	`boolean`	`false`	Rende il componente non modificabile (solo visualizzazione): esposto come immagine (`role="img"`) con il valore nel nome, senza pulsante di annullamento.
`required`	`boolean`	`false`	Marca il campo come obbligatorio.
`loading`	`boolean`	`false`	Mostra il loading spinner e blocca l'interazione.
`loadingIcon`	`string`	Da config	Icona personalizzata per il loading.
`name`	`string`	`undefined`	Nome del campo hidden per la submission del form.
`inputId`	`string`	`undefined`	ID dell'input hidden.
`inputClass`	`string \| object`	`undefined`	Classe CSS sull'input hidden.
`inputStyle`	`string \| object`	`undefined`	Style inline sull'input hidden.
`ariaLabel`	`string`	`undefined`	Label accessibile per screen reader.
`ariaLabelledby`	`string`	`undefined`	Riferimento a elemento label esterno.
`autofocus`	`boolean`	—	Focus automatico al mount.
`unstyled`	`boolean`	`false`	Rimuove gli stili di default (PrimeVue passthrough).
`dt`	`unknown`	`undefined`	PrimeVue design token passthrough.
`pt`	`unknown`	`undefined`	PrimeVue passthrough options.
`ptOptions`	`unknown`	`undefined`	PrimeVue passthrough options configuration.

Emits

Evento	Payload	Descrizione
`update:modelValue`	`number \| null`	Emesso al cambio valore (per v-model). Null quando il rating viene annullato.
`change`	`{ originalEvent: Event; value: number \| null }`	Emesso al cambio con l'evento originale e il nuovo valore.
`focus`	`FocusEvent`	Emesso quando il componente riceve il focus.
`blur`	`FocusEvent`	Emesso quando il componente perde il focus.

Slot

Slot	Scope	Descrizione
`onicon`	`{ index: number }`	Icona personalizzata per stella selezionata. `index` è 0-based.
`officon`	`{ index: number }`	Icona personalizzata per stella non selezionata. `index` è 0-based.
`cancelicon`	—	Icona personalizzata per il pulsante di annullamento.

In sola lettura il valore non si può cambiare, quindi il Rating non è un gruppo di radio: il contenitore ha role="img" e un nome che include il valore, ": N di M" (es. "Priorità: 2 di 3", chiave i18n rating.starValueLabel). Il pulsante di annullamento non viene disegnato e le stelle sono aria-hidden. Senza label né ariaLabel il nome è solo "2 di 3": per un indicatore compatto in tabella passare sempre aria-label.

<Rating :model-value="lead.priorita" :stars="3" readonly aria-label="Priorità" />
<!-- role="img" aria-label="Priorità: 2 di 3" -->

Icone Personalizzate tramite Props

Icone Personalizzate tramite Slot

Con Label, Helper Text ed Errore

Accessibilità

Il componente usa role="radiogroup" sul contenitore con aria-label / aria-labelledby; in readonly usa invece role="img" con il valore nel nome (vedi Readonly).
Ogni stella è un <button role="radio"> con aria-label localizzato (es. "1 stella") e aria-checked.
Il pulsante di annullamento ha aria-label localizzato.
Navigazione da tastiera: frecce destra/sinistra/su/giù per spostarsi tra le stelle; Spazio/Invio per selezionare.
In modalità disabled o readonly i pulsanti ricevono tabindex="-1".

TypeScript

import type { RatingProps, RatingEmits, RatingSlots, RatingChangeEvent } from '@pzeta/vue-components'

RadioButton

Pulsante radio per selezione esclusiva all'interno di un gruppo, con supporto v-model condiviso, varianti stilistiche e stati di caricamento.

Select

Dropdown di selezione singola o multipla con supporto a filtro, opzioni raggruppate e chips. Componente custom con navigazione tastiera e type-ahead integrati.

Rating

Import

Esempio Base

Props

Emits

Slot

Esempi

Numero di Stelle Personalizzato

Senza Pulsante Annullamento

Readonly

Icone Personalizzate tramite Props

Icone Personalizzate tramite Slot

Con Label, Helper Text ed Errore

Accessibilità

TypeScript