Forms

ColorPalette

Scelta di un colore da una palette chiusa di colori nominati. Salva il nome della palette (es. `emerald`) e non un esadecimale, quindi regge un vincolo CHECK nel database.

Import

import { ColorPalette, COLOR_PALETTE_NAMES } from '@pzeta/vue-components'

Esempio Base

Quando serve un colore libero (esadecimale) c'è ColorPicker.

Props

Prop	Tipo	Default	Descrizione
`modelValue`	`string \| null`	`null`	Nome della palette scelta (v-model); `null` per nessun colore
`palettes`	`(string \| ColorPaletteOption)[]`	—	Voci della palette: nomi (es. `['slate', 'red']`) o voci estese
`shade`	`ColorPaletteShade`	`500`	Tono del campione: `50`, `100`…`900`, `950`
`allowEmpty`	`boolean`	`false`	Aggiunge in testa la voce «Nessun colore», che imposta il modello a `null`
`label`	`string`	—	Etichetta del gruppo (legend)
`ariaLabel`	`string`	—	Nome accessibile del gruppo se manca `label`
`name`	`string`	generato	Nome condiviso dei radio
`required`	`boolean`	`false`	Campo obbligatorio
`disabled`	`boolean`	`false`	Disabilita tutte le voci
`error`	`string \| null`	`null`	Messaggio di errore del gruppo
`helperText`	`string \| null`	`null`	Testo di aiuto del gruppo
`size`	`'small' \| 'medium' \| 'large'`	`'medium'`	Dimensione dei campioni (24, 32, 40px)

ColorPaletteOption

interface ColorPaletteOption {
  value: string      // valore salvato, di norma il nome della palette
  label?: string     // nome accessibile e tooltip; default il nome tradotto
  color?: string     // colore CSS del campione; default var(--color-<value>-<shade>)
  disabled?: boolean
}

Le palette con un nome tradotto nei dizionari della libreria: le 22 standard di Tailwind (slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose) più primary, secondary, success, info, warn, danger. Passata a palettes dà la scelta completa: :palettes="[...COLOR_PALETTE_NAMES]".

Emits

Evento	Payload	Descrizione
`update:modelValue`	`string \| null`	Nuovo valore (v-model)
`change`	`string \| null`	Emesso a ogni scelta

Esempi

Nessun colore, toni chiari e colore esplicito

Con errore

Colore dei campioni

Il campione usa var(--color-<palette>-<shade>) in uno stile inline, senza classi bg-* costruite per nome (che Tailwind non vedrebbe). Nella shell del portale le variabili esistono per tutte le palette della safelist; fuori dalla shell esistono solo quelle che il CSS dell'applicazione genera, e per le altre serve color sulla voce.

Accessibilità

Radio nativi con name condiviso dentro un fieldset: frecce per cambiare colore, un solo tab-stop, esclusività gestita dal browser.
Ogni campione ha come nome accessibile e tooltip il nome tradotto del colore (i18n colorPalette.<nome>, es. «Smeraldo»); label della voce lo sostituisce.
La scelta si vede da anello e spunta, non solo dal colore; la spunta è scura sui toni fino al 300. «Nessun colore» è barrato e mostra solo l'anello.
Focus da tastiera con outline sul campione; errore collegato al gruppo con aria-describedby e aria-invalid.

TypeScript

import type {
  ColorPaletteProps,
  ColorPaletteEmits,
  ColorPaletteOption,
  ColorPaletteShade,
  ColorPaletteName,
} 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.

ColorPicker

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