Forms

ColorPicker

Selettore colore nativo con formato hex, visualizzazione del valore, label, stati di errore e loading.

Import

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

Esempio Base

Props

Prop	Tipo	Default	Descrizione
`modelValue`	`string`	`'#2563eb'`	Valore del colore in formato hex (v-model).
`format`	`'hex' \| 'rgb' \| 'hsl'`	`'hex'`	Formato del colore. Attualmente supportato solo `hex` con input nativo.
`label`	`string`	`undefined`	Etichetta del color picker.
`showValue`	`boolean`	`false`	Mostra il valore hex come testo accanto al picker.
`helperText`	`string \| null`	`null`	Testo di aiuto visualizzato sotto il componente.
`error`	`string \| null`	`null`	Messaggio di errore visualizzato sotto il componente.
`disabled`	`boolean`	`false`	Disabilita il componente.
`invalid`	`boolean`	`false`	Marca il picker come non valido (stile di errore visivo sull'input).
`required`	`boolean`	`false`	Marca il campo come obbligatorio.
`loading`	`boolean`	`false`	Mostra il loading spinner e blocca l'interazione.
`loadingIcon`	`string`	Da config	Icona personalizzata per il loading.
`name`	`string`	`undefined`	Attributo name del campo (per form HTML).
`inputId`	`string`	`undefined`	ID dell'input color (per associazione a label).
`class`	`string`	`''`	Classe CSS aggiuntiva sul wrapper del componente.

Emits

Evento	Payload	Descrizione
`update:modelValue`	`string`	Emesso al cambio colore (per v-model). Valore in formato hex.
`change`	`{ originalEvent: Event; value: string }`	Emesso al cambio con l'evento originale e il nuovo valore hex.

Slot

Il componente ColorPicker non espone slot personalizzabili.

Esempi

Con Valore Visibile

Con Helper Text

Stato Disabilitato

Stato Loading

Stato di Errore

Picker Multipli con Palette Preset

Accessibilità

Il <input type="color"> nativo è accessibile agli screen reader con il prop label come title.
inputId associa l'input a un elemento <label> esterno.
Quando loading è true, aria-busy="true" è impostato sull'input.
In stato disabled o loading l'input è inattivo (disabled).
Il prop required attiva la marcatura visiva obbligatoria tramite FormLabel.

TypeScript

import type { ColorPickerProps, ColorPickerEmits, ColorFormat } from '@pzeta/vue-components'

Clock

Picker orario standalone con interfaccia orologio analogico SVG o variante compatta a frecce. Supporta modalita durata, intervalli e precisione minuti personalizzabile.

DatePicker

Input data con calendario popup e auto-completamento intelligente. Supporta selezione singola, multipla e a intervallo, opzioni rapide e bottoni di conferma.