Buttons

SelectButton

Componente per selezione singola o multipla tramite un gruppo di pulsanti, compatibile con array di stringhe o oggetti tramite v-model.

Import

import { SelectButton } from '@pzeta/vue-components'
// oppure con plugin selettivo:
import { ButtonsPlugin } from '@pzeta/vue-components'
app.use(ButtonsPlugin)

Esempio Base

Props

Prop	Tipo	Default	Descrizione
`modelValue`	`unknown \| unknown[]`	`undefined`	Valore selezionato (singolo o array per selezione multipla)
`options`	`SelectButtonOption[] \| string[]`	`undefined`	Array di opzioni da visualizzare
`optionLabel`	`string`	`'label'`	Nome della proprietà da usare come etichetta
`optionValue`	`string`	`undefined`	Nome della proprietà da usare come valore (se omesso, usa l'oggetto intero)
`optionDisabled`	`string`	`'disabled'`	Nome della proprietà che indica se l'opzione è disabilitata
`multiple`	`boolean`	`false`	Abilita la selezione multipla
`allowEmpty`	`boolean`	`false`	Permette di deselezionare l'opzione attiva
`disabled`	`boolean`	`false`	Disabilita l'intero componente
`size`	`'small' \| 'medium' \| 'large'`	`'medium'`	Dimensione del componente
`dataKey`	`string`	`undefined`	Chiave univoca per identificare opzioni oggetto (necessaria per selezione multipla con oggetti)
`ariaLabelledby`	`string`	`undefined`	Attributo `aria-labelledby` per il contenitore del gruppo
`invalid`	`boolean`	`false`	Indica uno stato di validazione non valido

Emits

Evento	Payload	Descrizione
`update:modelValue`	`unknown \| unknown[]`	Emesso quando cambia il valore selezionato
`change`	`{ originalEvent: Event; value: unknown \| unknown[] }`	Emesso al cambio di selezione con evento originale

Slot

Slot	Scope	Descrizione
`option`	`{ option: SelectButtonOption; index: number; selected: boolean }`	Template personalizzato per ogni opzione

Esempi

Array di stringhe

Con oggetti e optionLabel/optionValue

Selezione multipla

Con icone

Con icone e label

Dimensioni

Con opzione disabilitata

Accessibilità

Il contenitore ha role="group" per comunicare agli screen reader il raggruppamento logico.
ariaLabelledby permette di collegare il gruppo a un elemento label esterno.
Ogni pulsante ha aria-pressed impostato automaticamente in base allo stato di selezione.
I pulsanti disabilitati hanno l'attributo disabled nativo.

TypeScript

import type { SelectButtonProps, SelectButtonEmits, SelectButtonOption } from '@pzeta/vue-components'

ButtonGroup

Contenitore per raggruppare pulsanti correlati in layout orizzontale o verticale, con supporto a selezione singola tramite v-model.

SpeedDial

Floating Action Button espandibile che mostra un insieme di azioni secondarie in direzione configurabile (up, down, left, right) con supporto a tooltip, link e colori per azione.