Forms
Componenti
| Componente | Descrizione |
|---|---|
| InputText | Campo testo base con supporto validazione e stati |
| InputNumber | Campo numerico con formattazione, step e limiti min/max |
| Password | Campo password con toggle visibilità e indicatore forza |
| Textarea | Area testo multiriga con auto-resize opzionale |
| InputMask | Input con maschera per formati fissi (telefono, CF, ecc.) |
| PinInput | Input PIN/OTP a celle separate con navigazione automatica |
| InputGroup | Contenitore per raggruppare input con prefissi/suffissi |
| FloatLabel | Label flottante animata sopra il campo al focus/fill |
| FormLabel | Etichetta semantica per campi form con supporto required |
| FormHelperText | Testo di supporto/errore sotto i campi form |
| Select | Dropdown a selezione singola con ricerca opzionale |
| MultiSelect | Dropdown a selezione multipla con chip e ricerca |
| AutoComplete | Input con suggerimenti dinamici e ricerca asincrona |
| Listbox | Lista scrollabile con selezione singola o multipla |
| TreeSelect | Dropdown con struttura ad albero per dati gerarchici |
| SelectableCard | Card cliccabile usabile come alternativa visiva a radio/checkbox |
| Checkbox | Casella di spunta con stato indeterminato opzionale |
| RadioButton | Bottone radio per selezione esclusiva in un gruppo |
| ToggleSwitch | Interruttore on/off con animazione e label opzionale |
| Rating | Valutazione a stelle con punteggio configurabile |
| Slider | Cursore per selezione valore in un intervallo continuo |
| ColorPalette | Scelta da una palette chiusa di colori nominati: salva il nome, non l'esadecimale |
| ColorPicker | Selettore colore con palette, HEX, RGB e HSL |
| DatePicker | Selettore data con calendario popup e navigazione mese/anno |
| TimePicker | Selettore orario con formato 12h/24h e step minuti |
| DateTimePicker | Selettore combinato data e ora in un unico componente |
| Calendar | Calendario inline per visualizzazione e selezione date |
| Clock | Orologio analogico interattivo per selezione orario |
| FileUpload | Upload file con drag & drop, preview e validazione tipo/size |
| SignatureInput | Canvas per firma digitale con export immagine |
| TypedSignature | Firma generata dal nome in quattro stili calligrafici, con PNG trasparente |
| Int4RangeInput | Input per intervalli interi PostgreSQL (int4range) |
| IntervalInput | Input per durate e intervalli temporali (formato ISO 8601) |
Plugin
import { FormsPlugin } from '@pzeta/vue-components'
app.use(FormsPlugin)
Attributi non dichiarati come prop
Dalla versione 1.9.0 i campi form ripartiscono gli attributi passati dall'esterno tra il
wrapper e il controllo interno. Prima venivano scartati in silenzio: class e data-*
sparivano dal DOM, rompendo i selettori dei test end-to-end senza alcun avviso.
| Attributo | Dove finisce |
|---|---|
class, style | Wrapper radice del campo, fusi con le classi del componente |
data-*, name, aria-* extra, listener non dichiarati | Controllo interno (input, textarea, trigger del combobox, canvas) |
id | Controllo interno, ed è l'id a cui punta la <label> |
aria-describedby | Controllo interno, concatenato con helper text, messaggio di errore e counter |
<InputText id="codiceclient" class="flex-1" data-testid="wizard-codiceclient" />
<div class="hs-inputtext-wrapper w-full flex-1">
<div class="relative">
<input id="codiceclient" data-testid="wizard-codiceclient" class="hs-inputtext ..." />
</div>
</div>
Nei campi compositi — Int4RangeInput e
IntervalInput — non esiste un singolo controllo nativo,
quindi gli attributi diversi da class/style finiscono sul gruppo [role="group"] che
raccoglie i campi. Nei test il campo si raggiunge con [data-testid="..."] input.
Il meccanismo è fornito dal composable useSplitAttrs.
Spazio del messaggio di validazione
Tutti i campi riservano lo spazio del messaggio sotto il controllo, così la comparsa di un
errore non sposta i campi sottostanti. Nelle colonne strette, dove il messaggio va a capo,
si regolano le righe riservate con --hs-form-message-lines — vedi
FormHelperText.
Componenti per sottocategoria
Input Base
InputText, InputNumber, Password, Textarea, InputMask, PinInput, InputGroup, FloatLabel, FormLabel, FormHelperText
Select e Dropdown
Select, MultiSelect, AutoComplete, Listbox, TreeSelect, SelectableCard
Toggle e Controlli
Checkbox, RadioButton, RadioButtonGroup, ToggleSwitch, Rating, Slider, ColorPalette, ColorPicker
Date, Time e Speciali
DatePicker, TimePicker, DateTimePicker, Calendar, Clock, FileUpload, SignatureInput, TypedSignature, Int4RangeInput, IntervalInput
TypedSignature
Firma generata dal nome con uno stile calligrafico, esportata in PNG trasparente. Quattro stili inclusi nella libreria, caricati solo quando il componente si monta.
Accordion
Sistema di pannelli espandibili composto da quattro sub-componenti (Accordion, AccordionPanel, AccordionHeader, AccordionContent). Supporta modalità singola e multipla, lazy loading e icone personalizzabili.