Forms

useClockDrag

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

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

Firma TypeScript

export function useClockDrag(params: UseClockDragParams): UseClockDragResult

export interface UseClockDragParams {
  svgRef: Ref<SVGSVGElement | null>;
  center: ComputedRef<number>;
  selectionMode: Ref<ClockSelectionMode>;  // 'HOUR' | 'MINUTE'
  disabled: ComputedRef<boolean>;
  duration: ComputedRef<boolean>;
  durationNegative: ComputedRef<boolean>;
  outerHours: ComputedRef<HourItem[]>;
  innerHours: ComputedRef<HourItem[]>;
  minuteItems: ComputedRef<MinuteItem[]>;
  numberRadius: number;
  precision: ComputedRef<ClockPrecision>;
  onHourSelected: (hour: HourItem) => void;
  onMinuteSelected: (minute: MinuteItem) => void;
  onSignToggle: () => void;
  onSwitchToMinuteMode: () => void;
}

export interface UseClockDragResult {
  isDragging: Ref<boolean>;
  hoverHour: Ref<number | null>;
  hoverMinute: Ref<number | null>;
  onSvgMouseDown: (event: MouseEvent) => void;
  onSvgMouseMove: (event: MouseEvent) => void;
  onSvgMouseUp: (event: MouseEvent) => void;
  onSvgMouseLeave: () => void;
  onHourHover: (hour: HourItem | null) => void;
  onMinuteHover: (minute: MinuteItem | null) => void;
}

Parametri

I parametri principali sono ComputedRef che descrivono lo stato del clock, piu le callback da invocare agli eventi utente.

Valore di Ritorno

Proprietà	Tipo	Descrizione
`isDragging`	`Ref<boolean>`	True mentre il mouse e premuto sull'SVG
`hoverHour`	`Ref<number \| null>`	Numero ora sotto hover
`hoverMinute`	`Ref<number \| null>`	Numero minuto sotto hover
`onSvgMouseDown`	handler	Avvia il drag
`onSvgMouseMove`	handler	Aggiorna hover e selezione durante drag
`onSvgMouseUp`	handler	Finalizza la selezione e termina il drag
`onSvgMouseLeave`	handler	Cancella hover e drag allo leave dell'SVG
`onHourHover`	handler	Aggiorna l'ora sotto hover
`onMinuteHover`	handler	Aggiorna il minuto sotto hover

Esempio

<svg
  ref="svgRef"
  @mousedown="onSvgMouseDown"
  @mousemove="onSvgMouseMove"
  @mouseup="onSvgMouseUp"
  @mouseleave="onSvgMouseLeave"
/>

Note

Il rilevamento della posizione usa le coordinate relative all'SVG (getBoundingClientRect).
La selezione avviene all'mouseup (click) o durante il drag se il mouse e sopra un elemento valido.
Click sull'area centrale in modalita durata con segno negativo attiva onSignToggle.
In modalita HOUR: dopo il click su un'ora valida, se precision !== 60, chiama automaticamente onSwitchToMinuteMode.
Se disabled=true tutti gli handler sono no-op.

useAutoCompleteSearch

Composable interno per ricerca con debounce e minLength nel componente AutoComplete.

useClockPositions

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