Forms

Clock

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

Import

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

Esempio Base

Il Clock e un picker standalone — non include un input testuale. Per un campo form completo con input e popup, usare TimePicker. Il valore e una stringa HH:MM.

Varianti

clock (default): orologio analogico SVG interattivo con selezione drag/click
compact: selettore numerico con frecce su/giu per ore e minuti

Props

Prop	Tipo	Default	Descrizione
`modelValue`	`string \| null`	`null`	Valore corrente in formato `HH:MM` (v-model)
`severity`	`Severity`	`'primary'`	Colore del tema
`variant`	`'clock' \| 'compact'`	`'clock'`	Stile visualizzazione
`minimum`	`string`	`'00:00'`	Orario minimo selezionabile (`HH:MM`)
`maximum`	`string`	`'23:59'`	Orario massimo selezionabile (`HH:MM`)
`precision`	`1 \| 5 \| 10 \| 15 \| 30 \| 60`	`1`	Incremento minuti
`separator`	`string`	`':'`	Separatore tra ore e minuti
`duration`	`boolean`	`false`	Modalita durata (ore > 23 consentite)
`durationNegative`	`boolean`	`false`	Permette valori negativi
`useDurationPlusSign`	`boolean`	`false`	Mostra segno + per durate positive
`afternoonHoursInOuterCircle`	`boolean`	`false`	Ore 13-24 nel cerchio esterno
`alwaysSelectHoursFirst`	`boolean`	`false`	Forza selezione ore prima dei minuti
`hideUnselectableNumbers`	`boolean`	`false`	Nasconde numeri non selezionabili
`modeSwitchSpeed`	`number`	`500`	Velocita animazione switch ore/minuti (ms)
`vibrate`	`boolean`	`true`	Vibrazione aptafica su selezione (mobile)
`popupWidth`	`number`	`280`	Larghezza in pixel
`showHeader`	`boolean`	`true`	Mostra header con orario selezionato
`showFooter`	`boolean`	`true`	Mostra footer con bottoni OK/Annulla
`fluid`	`boolean`	`false`	Espande alla larghezza del contenitore
`required`	`boolean`	`false`	Campo obbligatorio
`disabled`	`boolean`	`false`	Disabilita il componente
`fonts`	`ClockFonts`	vedi sotto	Font personalizzati per il clock analogico
`i18n`	`ClockI18n`	—	Testi localizzati per i bottoni

Default fonts:

{
  fontFamily: 'Arial, sans-serif',
  clockOuterCircleFontSize: 14,
  clockInnerCircleFontSize: 11,
}

Emits

Evento	Payload	Descrizione
`update:modelValue`	`string \| null`	Aggiornamento valore (v-model)
`change`	`newValue: string \| null, oldValue: string \| null`	Valore cambiato definitivamente
`adjust`	`newValue: string, oldValue: string`	Valore aggiustato durante la selezione
`modeSwitch`	`'HOUR' \| 'MINUTE'`	Cambio tra modalita ore e minuti
`confirm`	—	Click su OK
`cancel`	—	Click su Annulla

Metodi Esposti

Metodo	Descrizione
`switchToHourMode()`	Passa alla selezione delle ore
`switchToMinuteMode()`	Passa alla selezione dei minuti
`repaintClock()`	Ridisegna l'orologio (utile dopo resize)

Esempi

Variante compatta senza header/footer

Utile quando integrato in altri componenti (es. come fa TimePicker internamente).

Con precisione 15 minuti

Modalita durata (ore illimitate)

Modalita durata negativa

In modalita durata, cliccare il pulsante +/- al centro dell'orologio cambia il segno.

Con testi localizzati

Fluid (larghezza contenitore)

TypeScript

import type { ClockProps, ClockFonts, ClockI18n, ClockPrecision } from '@pzeta/vue-components'

const time = ref<string | null>('09:00')

const fonts: ClockFonts = {
  fontFamily: 'Inter, sans-serif',
  clockOuterCircleFontSize: 14,
  clockInnerCircleFontSize: 11,
}

const i18n: ClockI18n = {
  okButton: 'OK',
  cancelButton: 'Annulla',
}

const precision: ClockPrecision = 15 // 1 | 5 | 10 | 15 | 30 | 60

Checkbox

Casella di spunta con supporto per modalità binaria, selezione multipla tramite array, stato indeterminato e loading.

ColorPicker

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