Forms

useFormFieldEvents

Composable interno per gestire gli event handlers comuni dei campi form (input, change, focus, blur, clear).

Composable interno — utilizzato da InputText, Password, InputNumber, Textarea e altri campi form della libreria.

Firma TypeScript

export function useFormFieldEvents<T = string | number>(
  options: UseFormFieldEventsOptions<T>
): FormFieldEventsResult

export interface UseFormFieldEventsOptions<T = string | number> {
  emit: FormFieldEmitFn<T>;
  inputRef?: Ref<HTMLInputElement | HTMLTextAreaElement | null>;
  getValue?: (event: Event) => T;
  emptyValue?: T;             // default: ''
  focusAfterClear?: boolean;  // default: true
}

export interface FormFieldEventsResult {
  handleInput: (event: Event) => void;
  handleChange: (event: Event) => void;
  handleFocus: (event: FocusEvent) => void;
  handleBlur: (event: FocusEvent) => void;
  handleKeydown: (event: KeyboardEvent) => void;
  handleKeyup: (event: KeyboardEvent) => void;
  handleKeypress: (event: KeyboardEvent) => void;
  handlePaste: (event: ClipboardEvent) => void;
  handleClear: (event: MouseEvent | Event) => void;
}

Parametri

Parametro	Tipo	Descrizione
`emit`	`FormFieldEmitFn<T>`	Emit function del componente Vue
`inputRef`	`Ref<HTMLInputElement \| null>`	Ref all'elemento input (per focus dopo clear)
`getValue`	`(event: Event) => T`	Funzione custom per estrarre il valore (default: `event.target.value`)
`emptyValue`	`T`	Valore usato da `handleClear` (default: `''`)
`focusAfterClear`	`boolean`	Focus sull'input dopo clear (default: `true`)

Valore di Ritorno

Tutti gli handler emettono i corrispondenti eventi Vue del componente:

Handler	Emette
`handleInput`	`update:modelValue`, `input`
`handleChange`	`change`
`handleFocus`	`focus`
`handleBlur`	`blur`
`handleKeydown`	`keydown`
`handleKeyup`	`keyup`
`handleKeypress`	`keypress`
`handlePaste`	`paste`
`handleClear`	`update:modelValue` (con `emptyValue`), `clear`, `input`

Esempio

// Uso base per InputText
const { handleInput, handleFocus, handleBlur, handleClear } = useFormFieldEvents({
  emit,
  inputRef
})

// Per InputNumber con getValue custom
const { handleInput, handleChange } = useFormFieldEvents({
  emit,
  inputRef,
  getValue: (event) => {
    const value = (event.target as HTMLInputElement).value
    return parseFloat(value) || 0
  },
  emptyValue: 0
})

Note

Gli eventi input e change emettono { originalEvent, value } (non il valore diretto).
handleClear esegue il focus sull'input in nextTick dopo aver svuotato il valore.
Funzione utility esportata: createPassThroughHandler(emit, eventName) per eventi semplici che non necessitano elaborazione.

useFormFieldClasses

Composable interno per generare classi CSS coerenti per tutti i campi form.

useFormFieldMethods

Composable interno per metodi pubblici esposti dai campi form (focus, blur, select, setSelectionRange).