Forms

SignatureInput

Canvas interattivo per l'acquisizione di firme digitali tramite mouse o touch. Il valore emesso e un data URL base64 in formato PNG.

Import

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

Esempio Base

Il valore e un data URL PNG in formato data:image/png;base64,.... Il canvas e vuoto finche l'utente non disegna. Il pulsante clear (icona X) cancella il canvas e emette null.

Props

Prop	Tipo	Default	Descrizione
`modelValue`	`string \| null`	`null`	Data URL PNG della firma (v-model)
`label`	`string`	—	Label del componente
`width`	`number`	`400`	Larghezza del canvas in pixel; il canvas si restringe sotto `width` ma non la supera. Con `fluid` vale solo finché il contenitore non è misurato
`fluid`	`boolean`	`false`	Il canvas occupa tutto il contenitore e la larghezza logica del PNG segue quella del contenitore, anche quando cambia; l'altezza resta `height` (dalla 1.24.0)
`height`	`number`	`150`	Altezza del canvas in pixel
`penColor`	`string`	`'#000000'`	Colore della penna (qualsiasi valore CSS color)
`penWidth`	`number`	`2`	Spessore della penna in pixel
`backgroundColor`	`string`	`'#ffffff'`	Colore di sfondo del canvas
`placeholder`	`string`	locale	Testo placeholder quando il canvas e vuoto
`helperText`	`string`	—	Testo di aiuto sotto il componente
`error`	`string`	—	Messaggio di errore
`required`	`boolean`	`false`	Campo obbligatorio
`disabled`	`boolean`	`false`	Disabilita il disegno sul canvas
`loading`	`boolean`	`false`	Mostra overlay di caricamento
`invalid`	`boolean`	`false`	Forza stato errore
`clearIcon`	`string`	config	Classe icona pulsante clear
`loadingIcon`	`string`	config	Classe icona loading spinner
`inputId`	`string`	auto	ID dell'elemento canvas
`name`	`string`	—	Nome del campo per form submission
`class`	`string`	—	Classe CSS aggiuntiva

Emits

Evento	Payload	Descrizione
`update:modelValue`	`string \| null`	Aggiornamento valore (v-model) — emesso al termine del disegno
`begin`	—	Inizio del tratto (mousedown/touchstart)
`end`	—	Fine del tratto (mouseup/touchend) — valore aggiornato
`clear`	—	Canvas cancellato

Esempi

Dimensioni personalizzate

Larghezza fluida

Con fluid il canvas segue la larghezza del contenitore (anche quando cambia, per esempio ruotando il telefono), al posto di una larghezza calcolata a mano dalla finestra (dalla 1.24.0).

Penna colorata su sfondo scuro

Con validazione

Integrazione con form e invio server

Comportamento

Il canvas usa lineCap: 'round' e lineJoin: 'round' per tratti fluidi
Supporta sia mouse che touch (mobile)
Il valore viene aggiornato a ogni mouseup/touchend (fine tratto)
Se modelValue contiene un data URL valido al mount, viene disegnato sul canvas
Quando si fa clear, modelValue diventa null
Con fluid la larghezza è misurata con un ResizeObserver: al cambio di larghezza la firma già tracciata (anche non ancora emessa) si ridisegna in proporzione, senza deformarsi; anche un modelValue o un'immagine caricata entrano interi (dalla 1.24.0)

Accessibilita

Il canvas e associato alla label tramite id
Il pulsante clear e navigabile da tastiera
In stato disabled, il canvas non accetta eventi pointer

TypeScript

import type { SignatureInputProps, SignatureInputEmits } from '@pzeta/vue-components'

// Il valore e sempre un data URL PNG o null
const signature = ref<string | null>(null)

// Per controllare se la firma e presente
const hasSignature = computed(() => signature.value !== null)

SelectableCard

Griglia di card selezionabili come alternativa visuale a radio button e checkbox. Supporta immagini, icone, selezione singola e multipla con layout configurabile a colonne.

Slider

Cursore per la selezione di valori numerici con supporto range (due handle), orientamento verticale, step personalizzato e navigazione da tastiera completa.