Components

Wrapper Fields

Riferimento compatto dei campi che sono semplici wrapper di componenti @pzeta/vue-components — Basic, Selection, Toggle, Advanced, Special.

I componenti elencati in questa pagina sono wrapper thin: delegano completamente props/eventi/slot al componente omonimo di @pzeta/vue-components e aggiungono solo le 5 props standard del sistema form.

Per ogni componente vengono mostrati solo le informazioni specifiche del wrapper vue-form:

Tipo schema — valore della prop type in DynamicFormLayouts
Snippet schema (uso più comune)
Snippet utilizzo diretto
Validazione tipica
Link alla documentazione completa di @pzeta/vue-components

Per props/emits/slots/stili dei componenti sottostanti consulta sempre la doc ufficiale di @pzeta/vue-components.

Props comuni a tutti i wrapper

Ogni wrapper espone, oltre alle props native del componente sottostante, le seguenti 5 props del sistema form:

Prop	Tipo	Descrizione
`label`	`string`	Label del campo
`helperText`	`string`	Testo di aiuto sotto il campo
`error`	`string`	Messaggio di errore (attiva stato `invalid`)
`disabled`	`boolean`	Disabilita il campo
`required`	`boolean`	Indica campo obbligatorio sulla label

Eventuali props aggiuntive specifiche del wrapper sono indicate nelle sezioni dei singoli componenti.

Basic

Input per testo, numeri e password.

InputText

type: 'text' — Input di testo libero con trasformazione textCase e filtro keyfilter.

{ name: 'codiceFiscale', type: 'text', label: 'Codice Fiscale',
  props: { maxLength: 16, textCase: 'upper', keyfilter: /[A-Z0-9]/i } }

<InputText v-model="nome" label="Nome" :max-length="100" required />

Props extra wrapper: textCase: 'upper' | 'lower', keyfilter: string | RegExp

Validazione: required|min:2|max:100, url

Doc completa @pzeta/vue-components → InputText

InputNumber

type: 'number' — Numerico con formattazione locale, valuta e stepper.

{ name: 'prezzo', type: 'number', label: 'Prezzo',
  props: { mode: 'currency', currency: 'EUR', locale: 'it-IT',
           minFractionDigits: 2, maxFractionDigits: 2 } }

<InputNumber v-model="prezzo" label="Prezzo" mode="currency" currency="EUR" locale="it-IT" />

Il v-model è number | null: null rappresenta il campo vuoto, non 0.

Validazione: required|integer|min:1, between:0:100

Doc completa @pzeta/vue-components → InputNumber

Textarea

type: 'textarea' — Area multiriga con auto-resize e contatore caratteri.

{ name: 'descrizione', type: 'textarea', label: 'Descrizione',
  props: { rows: 4, autoResize: true, maxLength: 1000 }, span: 2 }

<Textarea v-model="descrizione" label="Descrizione" :rows="5" :max-length="2000" auto-resize />

Props extra wrapper: maxLength: number

Validazione: required|min:10|max:1000

Doc completa @pzeta/vue-components → Textarea

Password

type: 'password' — Input password con toggle visibilità e indicatore robustezza.

{ name: 'password', type: 'password', label: 'Password', required: true,
  props: { feedback: true, toggleMask: true } }

<Password v-model="password" label="Password" :feedback="true" toggle-mask required />

Validazione: required|min:8, conferma: required|same:password

Doc completa @pzeta/vue-components → Password

Selection

Selezione singola o multipla da un insieme di opzioni statiche.

Checkbox

type: 'checkbox' — Booleano binario o valori personalizzati.

{ name: 'accettaPrivacy', type: 'checkbox', label: 'Accetto la privacy', required: true }

{ name: 'statoRecord', type: 'checkbox', label: 'Attivo',
  props: { binary: false, trueValue: 'A', falseValue: 'I' } }

<Checkbox v-model="accetta" label="Accetto i termini" :binary="true" required />

In DynamicFormLayouts il tipo checkbox imposta automaticamente binary: true come default.

Validazione: required|accepted, enum:A,I

Doc completa @pzeta/vue-components → Checkbox

Select

type: 'select' — Dropdown selezione singola con filtro opzionale.

{ name: 'idCategoria', type: 'select', label: 'Categoria', required: true,
  props: { options: categorie, itemText: 'nome', itemValue: 'idcategoria',
           showFilter: true, showClear: true } }

<Select v-model="idCategoria" :options="categorie" item-text="nome" item-value="idcategoria" :show-filter="true" />

Props extra wrapper: itemText (alias optionLabel), itemValue (alias optionValue), itemTemplate (es. '{nome} - {codice}'), itemImage (URL immagine).

Validazione: required, enum:A,I

Doc completa @pzeta/vue-components → Select

MultiSelect

type: 'multiselect' — Dropdown multi-selezione con chip o contatore.

{ name: 'idCategorie', type: 'multiselect', label: 'Categorie',
  props: { options: categorie, itemText: 'nome', itemValue: 'idcategoria',
           display: 'chip', showFilter: true, maxSelectedLabels: 3 } }

<MultiSelect v-model="idCategorie" :options="categorie" item-text="nome" item-value="idcategoria" display="chip" />

Props extra wrapper: itemText, itemValue (alias di optionLabel/optionValue).

Validazione: required|min:1

Doc completa @pzeta/vue-components → MultiSelect

Listbox

type: 'listbox' — Lista sempre visibile (no dropdown), single o multiple.

{ name: 'idRegione', type: 'listbox', label: 'Regione', required: true,
  props: { options: regioni, itemText: 'nome', itemValue: 'idregione',
           showFilter: true, listStyle: 'max-height: 200px' } }

<Listbox v-model="idRegione" :options="regioni" item-text="nome" item-value="idregione" :show-filter="true" />

Props extra wrapper: itemText, itemValue.

Per liste molto lunghe (> 50 elementi) preferire Select con showFilter: true.

Doc completa @pzeta/vue-components → Listbox

TreeSelect

type: 'treeselect' — Dropdown gerarchico con checkbox, filtro e chip.

{ name: 'idCategoria', type: 'treeselect', label: 'Categoria',
  props: { options: alberoCategorie, selectionMode: 'single', showFilter: true } }

{ name: 'permessi', type: 'treeselect', label: 'Permessi',
  props: { options: alberoPermessi, selectionMode: 'checkbox', display: 'chip' } }

<TreeSelect v-model="selezione" :options="albero" selection-mode="checkbox" display="chip" :show-filter="true" />

Formato v-model:

`selectionMode`	Tipo
`'single'`	`string` (chiave nodo)
`'multiple'`	`Record<string, boolean>`
`'checkbox'`	`Record<string, boolean>` (include parziali)

Doc completa @pzeta/vue-components → TreeSelect

Toggle

Controlli on/off e selezione mutuamente esclusiva tramite pulsanti.

ToggleSwitch

type: 'switch' — Switch on/off mobile-style.

{ name: 'notificheAttive', type: 'switch', label: 'Notifiche email' }

{ name: 'statoServizio', type: 'switch', label: 'Servizio attivo',
  props: { trueValue: 'ATTIVO', falseValue: 'SOSPESO' } }

<ToggleSwitch v-model="notifiche" label="Ricevi notifiche email" />

ToggleSwitch supporta trueValue/falseValue personalizzati. Differenza con Checkbox: lo switch è preferibile per impostazioni di configurazione.

Validazione: required|accepted, enum:ATTIVO,SOSPESO

Doc completa @pzeta/vue-components → ToggleSwitch

ToggleButton

type: 'toggle' — Pulsante con etichette/icone distinte per on/off.

{ name: 'pubblicato', type: 'toggle', label: 'Stato pubblicazione',
  props: { onLabel: 'Pubblicato', offLabel: 'Bozza',
           onIcon: 'pi pi-check', offIcon: 'pi pi-pencil' } }

<ToggleButton v-model="pubblicato" on-label="Pubblicato" off-label="Bozza" />

Emette sempre true/false; per valori personalizzati usare ToggleSwitch.

Doc completa @pzeta/vue-components → ToggleButton

SelectButton

type: 'selectbutton' — Gruppo di pulsanti per selezione singola o multipla (2-6 opzioni).

{ name: 'visualizzazione', type: 'selectbutton', label: 'Modalità',
  props: { options: [{ label: 'Lista', value: 'list' }, { label: 'Griglia', value: 'grid' }],
           optionLabel: 'label', optionValue: 'value', allowEmpty: false } }

{ name: 'giorni', type: 'selectbutton', label: 'Giorni',
  props: { options: giorniSettimana, optionLabel: 'label', optionValue: 'value', multiple: true } }

<SelectButton v-model="visualizzazione" :options="opzioni" option-label="label" option-value="value" :allow-empty="false" />

Per più di 6 opzioni preferire RadioGroup o Select.

Doc completa @pzeta/vue-components → SelectButton

Advanced

Selettori specializzati per data, colore, valutazione, slider, maschere, autocomplete e tipi PostgreSQL.

DatePicker

type: 'date' — Selettore data, intervalli e ora con calendario.

{ name: 'dataNascita', type: 'date', label: 'Data di nascita',
  props: { dateFormat: 'dd/mm/yy', showIcon: true, maxDate: new Date() } }

{ name: 'periodo', type: 'date', label: 'Periodo',
  props: { selectionMode: 'range', dateFormat: 'dd/mm/yy' } }

<DatePicker v-model="data" date-format="dd/mm/yy" :min-date="new Date()" show-icon show-button-bar />

Validazione: required|date_before:today, date_after:today

Doc completa @pzeta/vue-components → DatePicker

ColorPicker

type: 'color' — Selettore colore HEX/RGB/HSB tramite palette.

{ name: 'coloreCategoria', type: 'color', label: 'Colore categoria',
  props: { format: 'hex' } }

<ColorPicker v-model="colore" format="hex" />

Il formato hex produce il valore senza il prefisso # (es. 'ff0000').

Validazione: required|regex:/^[0-9a-fA-F]{6}$/

Doc completa @pzeta/vue-components → ColorPicker

Rating

type: 'rating' — Valutazione a stelle.

{ name: 'valutazione', type: 'rating', label: 'Valutazione',
  props: { stars: 5, cancel: false } }

<Rating v-model="voto" :stars="5" :cancel="false" />

Validazione: required|integer|min:1|max:5

Doc completa @pzeta/vue-components → Rating

Slider

type: 'slider' — Cursore numerico con supporto range.

{ name: 'budget', type: 'slider', label: 'Budget',
  props: { min: 0, max: 10000, step: 100 } }

{ name: 'fasciaEta', type: 'slider', label: 'Fascia di età',
  props: { range: true, min: 18, max: 99 } }

<Slider v-model="valore" :min="0" :max="100" :step="5" />

Con range: true il v-model è un array [min, max].

Doc completa @pzeta/vue-components → Slider

InputMask

type: 'mask' — Input con maschera di formato.

Caratteri maschera: 9 (cifra), a (lettera), * (alfanumerico).

{ name: 'telefono', type: 'mask', label: 'Telefono',
  props: { mask: '999-9999999', placeholder: '333-1234567' } }

{ name: 'codiceFiscale', type: 'mask', label: 'Codice fiscale',
  props: { mask: 'aaaaaa99a99a999a' } }

Maschere comuni: telefono '999-9999999', codice fiscale 'aaaaaa99a99a999a', P.IVA '99999999999', CAP '99999', data '99/99/9999'.

<InputMask v-model="telefono" mask="999-9999999" placeholder="333-1234567" />

Doc completa @pzeta/vue-components → InputMask

AutoComplete

type: 'autocomplete' — Input con suggerimenti contestuali su digitazione.

{ name: 'citta', type: 'autocomplete', label: 'Città',
  props: { field: 'nome', forceSelection: true } }

<AutoComplete v-model="valore" :suggestions="suggerimenti" @complete="cerca" />

L'evento @complete è obbligatorio: popola l'array suggestions con i risultati. Per autocompletamento indirizzi geografici usa AddressAutocompleteInput.

Doc completa @pzeta/vue-components → AutoComplete

Int4RangeInput

type: 'int4range' — Range PostgreSQL int4range (due campi numerici).

{ name: 'fasciaPrezzo', type: 'int4range', label: 'Fascia di prezzo',
  props: { minPlaceholder: 'Prezzo min', maxPlaceholder: 'Prezzo max' } }

<Int4RangeInput v-model="fascia" min-placeholder="Min" max-placeholder="Max" />

Formato valore: stringa PostgreSQL — '[10,50)', '[1,100]'. Uso: WHERE quantita <@ $1::int4range.

Doc completa @pzeta/vue-components → Int4RangeInput

IntervalInput

type: 'interval' — Durata PostgreSQL interval (giorni/ore/minuti/secondi).

{ name: 'durataSla', type: 'interval', label: 'Durata SLA',
  props: { showDays: true, showHours: true, showMinutes: true, showSeconds: false } }

<IntervalInput v-model="durata" :show-days="true" :show-hours="true" :show-minutes="true" />

Formato valore: stringa PostgreSQL — '1 day', '2 days 03:30:00', '00:45:00'.

Doc completa @pzeta/vue-components → IntervalInput

Special

SignatureInput

type: 'signature' — Canvas firma con output base64 PNG.

{ name: 'firma', type: 'signature', label: 'Firma del cliente', required: true, span: 2 }

<SignatureInput v-model="firma" label="Firma" required />

Il v-model è una stringa base64 PNG (data:image/png;base64,...) o null se canvas vuoto. Per salvare nel database, estrarre la parte base64 dopo il prefisso data:image/png;base64,.

Validazione: required

Doc completa @pzeta/vue-components → SignatureInput

TreeRemote

Componente Tree gerarchico con nodi caricati da sorgente remota, selezione singola, multipla o checkbox.

Schema builders

Helper fluenti field, row, section, form per costruire FormSchema. Alternativa opzionale all'oggetto literal — che resta la forma raccomandata.