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

<template>
  <div class="space-y-4">
    <ColorPicker v-model="primary" label="Colore Primario" show-value />
    <ColorPicker v-model="danger"  label="Colore Pericolo"  show-value />
    <ColorPicker v-model="success" label="Colore Successo"  show-value />
  </div>
  <div class="flex gap-2 mt-4">
    <div v-for="preset in presets" :key="preset" class="flex gap-1">
      <button
        class="w-8 h-8 rounded border"
        :style="{ backgroundColor: preset }"
        @click="primary = preset"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const primary = ref('#2563eb')
const danger  = ref('#ef4444')
const success = ref('#10b981')

const presets = ['#2563eb', '#7c3aed', '#db2777', '#dc2626', '#ea580c', '#16a34a']
</script>

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.