Forms

SelectableCard

Griglia di card selezionabili come alternativa visuale a radio button e checkbox. Supporta immagini, icone, selezione singola e multipla con layout configurabile a colonne.

Import

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

Struttura SelectableCardOption

interface SelectableCardOption {
  value: string | number    // Valore univoco
  title: string             // Titolo della card
  description?: string      // Descrizione opzionale
  image?: string            // URL immagine (priorità su icon)
  icon?: string             // Classe icona fallback se non c'è immagine (es. 'pi pi-desktop')
  disabled?: boolean        // Disabilita la singola card
}

Esempio Base

Props

Prop	Tipo	Default	Descrizione
`modelValue`	`string \| number \| (string \| number)[]`	`undefined`	Valore selezionato (v-model)
`options`	`SelectableCardOption[]`	`[]`	Array di card disponibili
`multiple`	`boolean`	`false`	Abilita selezione multipla (checkbox invece di radio)
`columns`	`1 \| 2 \| 3 \| 4 \| 6`	`3`	Numero di colonne nella griglia
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Dimensione delle card
`disabled`	`boolean`	`false`	Disabilita globalmente tutte le card
`showCheckbox`	`boolean`	`true`	Mostra l'indicatore di selezione (checkmark) sulla card

Emits

Evento	Payload	Descrizione
`update:modelValue`	`string \| number \| (string \| number)[]`	Aggiornamento v-model
`change`	`string \| number \| (string \| number)[]`	Cambio selezione (stesso payload di update:modelValue)
`select`	`SelectableCardOption`	Opzione selezionata con tutti i suoi dati

Esempi

Selezione multipla

In modalità multipla il v-model è un array. Le card usano internamente <input type="checkbox">:

Con icone invece di immagini

Se non viene fornita un'immagine, viene mostrata l'icona:

Dimensioni

<SelectableCard v-model="val" :options="options" size="sm" :columns="4" />
<SelectableCard v-model="val" :options="options" size="md" :columns="3" />
<SelectableCard v-model="val" :options="options" size="lg" :columns="2" />

Opzione singola disabilitata

Senza indicatore di selezione

Gestione eventi

<SelectableCard
  v-model="selected"
  :options="options"
  @change="newVal => console.log('Nuovo valore:', newVal)"
  @select="option => console.log('Card selezionata:', option.title)"
/>

Comportamento di selezione

Selezione singola (multiple: false): usa <input type="radio"> internamente. Cliccando una card già selezionata, rimane selezionata (comportamento radio button nativo).
Selezione multipla (multiple: true): usa <input type="checkbox"> internamente. Cliccando una card selezionata la deseleziona.
Card disabilitata: la prop disabled globale disabilita tutte le card; option.disabled disabilita solo quella specifica card.

Accessibilità

Ogni card è un elemento <label> che avvolge un <input type="radio"> o <input type="checkbox"> nascosto
L'input nascosto è accessibile da screen reader e navigazione da tastiera nativa
L'attributo disabled viene applicato all'input per disabilitare la selezione
Il checkmark visivo è decorativo e l'interazione avviene tramite l'input nativo

TypeScript

import type {
  SelectableCardProps,
  SelectableCardEmits,
  SelectableCardOption,
} from '@pzeta/vue-components'

// Selezione singola
const selected = ref<string>('')

// Selezione multipla
const selectedMultiple = ref<string[]>([])

// Tipizzazione opzioni
const options: SelectableCardOption[] = [
  {
    value: 'option-1',
    title: 'Opzione 1',
    description: 'Descrizione opzionale',
    icon: 'pi pi-star',
  },
]

Select

Dropdown di selezione singola o multipla con supporto a filtro, opzioni raggruppate e chips. Componente custom con navigazione tastiera e type-ahead integrati.

SignatureInput

Canvas interattivo per l'acquisizione di firme digitali tramite mouse o touch. Il valore emesso e un data URL base64 in formato PNG.