Forms

useClockPositions

Composable interno per il calcolo delle posizioni SVG degli elementi del Clock (ore, minuti, linee selettore).

Composable interno — utilizzato dal componente TimePicker / Clock SVG della libreria.

Firma TypeScript

export function useClockPositions(params: UseClockPositionsParams): UseClockPositionsResult

export interface UseClockPositionsParams {
  popupWidth: ComputedRef<number>;
  afternoonHoursInOuterCircle: ComputedRef<boolean>;
  hideUnselectableNumbers: ComputedRef<boolean>;
  precision: ComputedRef<ClockPrecision>;
  parsedTime: ComputedRef<ParsedTime>;
  currentHour: ComputedRef<number>;
  modelValue: ComputedRef<string | null | undefined>;
  checkHourValid: (hour: number, negative: boolean) => boolean;
  checkTimeValid: (hour: number, minute: number, negative: boolean) => boolean;
}

export interface UseClockPositionsResult {
  svgSize: ComputedRef<number>;
  center: ComputedRef<number>;
  outerRadius: ComputedRef<number>;
  innerRadius: ComputedRef<number>;
  numberRadius: number;            // costante: 14px
  outerHours: ComputedRef<HourItem[]>;
  innerHours: ComputedRef<HourItem[]>;
  minuteItems: ComputedRef<MinuteItem[]>;
  hourSelectorLine: ComputedRef<SelectorLinePosition | null>;
  minuteSelectorLine: ComputedRef<SelectorLinePosition | null>;
}

Valore di Ritorno

Proprietà	Tipo	Descrizione
`svgSize`	`ComputedRef<number>`	Dimensione SVG (popupWidth - 40)
`center`	`ComputedRef<number>`	Centro SVG (svgSize / 2)
`outerHours`	`ComputedRef<HourItem[]>`	Array con posizioni x/y, valore e stato delle ore cerchio esterno
`innerHours`	`ComputedRef<HourItem[]>`	Array con posizioni x/y, valore e stato delle ore cerchio interno
`minuteItems`	`ComputedRef<MinuteItem[]>`	Array con posizioni x/y, valore e stato dei minuti
`hourSelectorLine`	`ComputedRef<SelectorLinePosition \| null>`	Posizione della linea selettore ore
`minuteSelectorLine`	`ComputedRef<SelectorLinePosition \| null>`	Posizione della linea selettore minuti

HourItem / MinuteItem

interface HourItem { value: number; display: string; x: number; y: number; isOuter: boolean; isValid: boolean; isSelected: boolean; }
interface MinuteItem { value: number; display: string; x: number; y: number; isValid: boolean; isSelected: boolean; }

Note

Le coordinate sono calcolate trigonometricamente usando angoli in radianti per posizionare i numeri sul cerchio.
outerRadius = center - 18, innerRadius = outerRadius - 28.
afternoonHoursInOuterCircle controlla quale cerchio mostra le ore pomeridiane (13-23).
Se hideUnselectableNumbers=true, gli elementi con isValid=false vengono omessi dall'array.
Minuti: generati ogni 5 minuti (12 posizioni), filtrati per precision (es. precision=15 mostra solo 00, 15, 30, 45).

useClockDrag

Composable interno per la gestione dell'interazione mouse/drag sul componente Clock SVG.

useClockTime

Composable interno per parsing, validazione e formattazione del valore orario nel componente Clock.