Components

Tutti i tipi di input disponibili nel sistema form — basic, selection, toggle, advanced, editor, remote e special.

Organizzazione

I componenti del sistema form sono divisi in tre gruppi:

Form principale — il componente DynamicFormLayouts che renderizza l'intero form a partire da uno schema, e i suoi wrapper (Dialog, Drawer, DrawerWithTable).
Wrapper thin — semplici wrapper di componenti @pzeta/vue-components che aggiungono solo le 5 props standard del form (label, helperText, error, disabled, required). Documentati in modo compatto in un'unica pagina: WrapperFields.
Componenti con logica propria — custom (rendering automatico, BarcodeDetector API, getUserMedia, ecc.), Remote (logica fetchFn o endpoint + filtri dinamici) e compositi/interni. Ognuno ha pagina dedicata.

Form principale

Componente	Descrizione
DynamicFormLayouts	Form dinamico schema-driven con validation on-blur, layout normal/tabs/wizard/accordion, tracking dirty/valid
DynamicFormDialog	Dialog modale con DynamicFormLayouts integrato
DynamicFormDrawer	Drawer laterale con auto-fetch del record per modifica
DynamicFormDrawerWithTable	Drawer + DataTable + form CRUD completo
DynamicFormListDialog	Dialog con lista di record esistenti + form di aggiunta inline (collezione embedded, no data fetching)
FormSection	Sezione con header (titolo/sottotitolo/icona), layout `vertical/horizontal/grid` e collassabilità — esportato per layout custom

Forma raccomandata: oggetto literal. Scrivi lo schema come { sections: [...] } — è il formato canonico e diff-friendly. Gli helper fluenti field, row, section, form sono un'alternativa opzionale per casi specifici (campi base riusabili, molte select inline con la stessa struttura): vedi Schema builders per criteri di scelta.

Tipi di input

Wrapper thin → vedi WrapperFields

Tipo	Componente	Categoria
`text`	InputText	Basic
`email`	InputText	Basic
`number`	InputNumber	Basic
`textarea`	Textarea	Basic
`password`	Password	Basic
`checkbox`	Checkbox	Selection
`select`	Select	Selection
`multiselect`	MultiSelect	Selection
`listbox`	Listbox	Selection
`treeselect`	TreeSelect	Selection
`switch`	ToggleSwitch	Toggle
`toggle`	ToggleButton	Toggle
`selectbutton`	SelectButton	Toggle
`date`	DatePicker	Advanced
`datetime`	DateTimePicker (valore `YYYY-MM-DDTHH:MM`)	Advanced
`color`	ColorPicker	Advanced
`rating`	Rating	Advanced
`slider`	Slider	Advanced
`mask`	InputMask	Advanced
`autocomplete`	AutoComplete	Advanced
`int4range`	Int4RangeInput	Advanced
`interval`	IntervalInput	Advanced
`signature`	SignatureInput	Special

Componenti con logica propria

Tipo	Componente	Categoria	Note
`hidden`	HiddenInput	Basic	Custom — nessuna UI
`radio`	RadioGroup	Selection	Custom — rendering automatico da array
`icon`	IconSelect	Advanced	Custom — set PrimeIcons + categorizzazione
`list`	ListInput	Advanced	Custom — righe tipizzate, colonne nello schema
`cron`	CronInput	Advanced	Custom — espressione cron con anteprima leggibile
`tags`	TagsInput	Advanced	Etichette a testo libero, valore `string[]` (dalla 2.20.0)
`tiptap`	TiptapEditor	Editor	Custom — Tiptap lazy + toolbar + output HTML/JSON/MD, estensioni, «/Trascrizione vocale»
`address`	AddressAutocompleteInput	Special	Custom — `searchFn`/`getDetailsFn` per provider esterni
`barcode`	BarcodeScanner	Special	Custom — BarcodeDetector API
`camera`	CameraCapture	Special	Custom — getUserMedia + base64
`selectremote`	SelectRemote	Remote	`fetchFn` + filtri dinamici
`autocompleteremote`	AutoCompleteRemote	Remote	Ricerca sul server mentre si digita, per elenchi lunghi
`listboxremote`	ListboxRemote	Remote	`fetchFn` + raggruppamento
`radioremote`	RadioGroupRemoteInput	Remote	`fetchFn` + filtri dinamici
`treeremote`	TreeRemote	Remote	`fetchFn<TreeNode>` + selezione single/multiple/checkbox
`inplaceselect`	InplaceSelectRemote	Remote	Editing in-place + caricamento lazy
`orderlist`	OrderListRemote	Remote	Drag-and-drop + evento `reorder`
`picklist`	PickListRemote	Remote	Doppia lista source/target

Sorgente dati dichiarativa. Tutti i componenti Remote accettano, in alternativa a fetchFn, la prop endpoint ([schema.]risorsa): la chiamata PostgREST viene composta dal componente riusando filter e filterFields. fetchFn mantiene la precedenza. Vedi Sorgente dati endpoint.

Alias deprecati: LookupListboxInput e LookupComboBoxInput sono alias deprecati rispettivamente di ListboxRemote e SelectRemote (re-export dello stesso modulo, mantenuti per retrocompatibilità). Non hanno un proprio type nello schema — usa listboxremote / selectremote.

Componenti senza tipo di campo

Componente	Descrizione
AiFieldTrigger	Pulsante che genera il valore di un campo con l'AI; nello schema è l'opzione di campo `ai`
VoiceTranscriptionBlock	Note, registrazione, trascrizione e riassunto di una riunione; in `TiptapEditor` è il comando «/Trascrizione vocale»

Messaggi sotto il campo. Fino alla 2.17.0 RadioGroup, TiptapEditor, OrderListRemote, PickListRemote, RadioGroupRemoteInput, TreeRemote, BarcodeScanner e CameraCapture non mostravano né l'errore né il testo di aiuto: il campo diventava rosso senza spiegazione. Corretto nella 2.18.0.

Componenti interni

Componente	Descrizione
FormSectionRow	Componente interno usato da DynamicFormLayouts per il rendering delle righe

Installazione

Come installare e configurare @pzeta/vue-form in un progetto Vue 3 o Nuxt 3.

AddressAutocompleteInput

Input con autocompletamento per indirizzi geografici, integrabile con Google Places, Mapbox o API custom.