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 |
| 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 |
| 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, ToggleSwitch, Rating, Slider, ColorPicker
Date, Time e Speciali
DatePicker, TimePicker, DateTimePicker, Calendar, Clock, FileUpload, SignatureInput, Int4RangeInput, IntervalInput
TreeSelect
Dropdown con struttura ad albero per selezione gerarchica. Supporta modalità single, multiple e checkbox con selezione a cascata, filtro e visualizzazione chip.
Accordion
Sistema di pannelli espandibili composto da quattro sub-componenti (Accordion, AccordionPanel, AccordionHeader, AccordionContent). Supporta modalità singola e multipla, lazy loading e icone personalizzabili.