InputNumber

Import

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

Esempio Base

Props

Emits

Slot

Esempi

Con range e step

Con prefix e suffix

Modalità valuta

Con pulsanti stepper

Selezione al focus

Con highlightOnFocus il contenuto viene selezionato quando il campo riceve il focus, così la prima cifra digitata sostituisce il valore invece di anteporsi (da 12.000 a 912.000).

<InputNumber v-model="importo" mode="currency" currency="EUR" highlight-on-focus />

La selezione avviene dopo che il campo ha riscritto il valore nella forma modificabile (da "12.000,00 €" a "12000"), altrimenti riguarderebbe il testo precedente e andrebbe persa. Quando il focus arriva da un clic, il mouseup di quel clic non sposta il cursore e la selezione resta; i clic successivi, a campo già attivo, posizionano il cursore normalmente. Non servono più aggiramenti lato consumer (selezione in setTimeout o al primo mouseup).

Accessibilità

• La label è collegata all'input tramite for/id (ID auto-generato se non specificato)
• I tasti ArrowUp/ArrowDown incrementano/decrementano il valore rispettando step, min, max
• In focus il valore viene mostrato senza formattazione per facilitare la modifica
• Al blur il valore viene formattato secondo locale e mode

TypeScript

import type { InputNumberProps } from '@pzeta/vue-components'

const numberProps: InputNumberProps = {
  mode: 'currency',
  currency: 'EUR',
  locale: 'it-IT',
  min: 0,
  max: 9999,
  showButtons: true,
}