Data

Knob

Controllo rotante (dial) per la selezione di valori numerici tramite drag del mouse, touch o tastiera, con arco SVG personalizzabile per colori e spessore.

Import

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

Esempio Base

Props

Prop	Tipo	Default	Descrizione
`modelValue`	`number`	`0`	Valore corrente (v-model)
`defaultValue`	`number \| null`	`null`	Valore iniziale quando `modelValue` non è fornito
`name`	`string \| null`	`null`	Attributo name per form
`size`	`number`	`100`	Dimensione in pixel del componente SVG (larghezza = altezza)
`strokeWidth`	`number`	`14`	Spessore in pixel dell'arco SVG
`showValue`	`boolean`	`true`	Mostra il valore numerico al centro del knob
`valueTemplate`	`string \| ((value: number) => string)`	`'{value}'`	Template stringa con `{value}` o funzione per formattare il valore visualizzato
`min`	`number`	`0`	Valore minimo
`max`	`number`	`100`	Valore massimo
`step`	`number`	`1`	Incremento per ogni step
`valueColor`	`string`	—	Colore CSS dell'arco valore (default: var CSS `--knob-value-color`, fallback `#3b82f6`)
`rangeColor`	`string`	—	Colore CSS dell'arco range sfondo (default: var CSS `--knob-range-color`, fallback `#e5e7eb`)
`textColor`	`string`	—	Colore CSS del testo centrale
`invalid`	`boolean`	`false`	Indica stato di validazione errato
`disabled`	`boolean`	`false`	Disabilita il componente
`readonly`	`boolean`	`false`	Rende il componente in sola lettura (nessuna modifica)
`loading`	`boolean`	`false`	Mostra indicatore di caricamento
`loadingIcon`	`string`	—	Classe icona personalizzata per lo stato loading
`tabindex`	`number`	`0`	Tabindex per la navigazione da tastiera
`ariaLabel`	`string \| null`	`null`	Etichetta accessibilità aria-label
`ariaLabelledby`	`string \| null`	`null`	ID elemento che etichetta il knob

Emits

Evento	Payload	Descrizione
`update:modelValue`	`number`	Aggiornamento del valore per v-model
`value-change`	`number`	Emesso ad ogni cambio di valore
`change`	`number`	Emesso ad ogni cambio di valore (alias di `value-change`)

Slot

Slot	Scope	Descrizione
`label`	—	Contenuto aggiuntivo posizionato sotto il knob SVG

Esempi

Min, Max e Step personalizzati

Colori personalizzati

Template valore

Dimensioni personalizzate

Stati

Accessibilità

Renderizzato con role="slider", aria-valuemin, aria-valuemax, aria-valuenow.
Navigabile da tastiera: ArrowUp/ArrowRight incrementa di uno step, ArrowDown/ArrowLeft decrementa, Home va al minimo, End va al massimo, PageUp/PageDown incrementa/decrementa di 10 step.
Supporto touch nativo per dispositivi mobili.
disabled e loading impostano tabindex="-1", aria-disabled e aria-busy.

TypeScript

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

Inplace

Editing inline sul posto — mostra un testo/contenuto cliccabile che, al click, si trasforma in un campo di input o contenuto arbitrario, con pulsante di chiusura opzionale.

OrderList

Lista riordinabile con pulsanti freccia (su/giù/top/bottom) e selezione multipla degli elementi; supporta slot personalizzati per item e header.