Data

QRCode

Genera lato client un QR code da una stringa o URL e lo mostra come immagine, con dimensione, livello di correzione d'errore e colori configurabili.

Import

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

Il componente richiede il peer opzionaleqrcode, caricato tramite import dinamico. Installalo solo se usi questo componente: npm install qrcode. Se il pacchetto non è presente, il componente mostra il messaggio d'errore senza rompere il bundle dei consumer che non lo usano.

Esempio Base

Props

Prop	Tipo	Default	Descrizione
`value`	`string`	(required)	Stringa o URL da codificare
`size`	`number`	`160`	Lato del QR in pixel (larghezza/altezza)
`level`	`QRCodeErrorCorrectionLevel`	`'M'`	Livello di correzione d'errore (`'L'`, `'M'`, `'Q'`, `'H'`)
`margin`	`number`	`2`	Margine (numero di moduli) attorno al QR
`colorDark`	`string`	`'#000000'`	Colore dei moduli scuri (CSS hex)
`colorLight`	`string`	`'#ffffff'`	Colore dello sfondo (CSS hex)
`alt`	`string`	`'QR code'`	Testo alternativo dell'immagine generata

QRCodeErrorCorrectionLevel

Valore	Capacità di recupero	Descrizione
`'L'`	~7%	Low — codice più compatto, minore resilienza ai danni
`'M'`	~15%	Medium — bilanciamento di default
`'Q'`	~25%	Quartile — più robusto
`'H'`	~30%	High — massima resilienza (consigliato per logo overlay/stampa)

Slots

Slot	Props	Descrizione
`error`	`{ message: string }`	Override del contenuto mostrato in caso di errore di generazione (fallback: messaggio d'errore testuale)
`loading`	-	Override del contenuto mostrato durante la generazione (fallback: `…`)

Emits

Evento	Payload	Descrizione
`ready`	`dataUrl: string`	Emesso al completamento della generazione, con la data URL dell'immagine PNG
`error`	`error: Error`	Emesso se la generazione fallisce (peer mancante, valore non codificabile, ecc.)

Esempi

Colori e livelli di correzione

Il QR si rigenera in modo reattivo a ogni variazione di value, size, level, margin, colorDark e colorLight.

Eventi ready ed error

Usa @ready per ottenere la data URL (es. per il download) e @error per intercettare i fallimenti di generazione.

Slot personalizzati per errore e caricamento

Gli slot #error e #loading permettono di sostituire il rendering di default degli stati transitori.

<QRCode :value="value" :size="160">
  <template #loading>
    <span class="text-xs text-gray-400">Generazione…</span>
  </template>
  <template #error="{ message }">
    <div class="text-xs text-red-500">Impossibile generare il QR: {{ message }}</div>
  </template>
</QRCode>

Note Comportamento

La generazione avviene client-side tramite import dinamico del peer qrcode: il modulo viene caricato solo alla prima generazione, non incide sul bundle iniziale
Il watch è immediate, quindi il QR viene generato già al mount; ogni successiva variazione di value, size, level, margin, colorDark o colorLight lo rigenera
Con value vuoto il componente non genera nulla (nessuna immagine, nessun errore) e resta in stato neutro
Durante la generazione viene mostrato lo stato di caricamento; in caso di eccezione (incluso il peer qrcode non installato) viene mostrato lo stato di errore con bordo tratteggiato rosso
L'immagine prodotta è una data URL PNG di lato size pixel; il contenitore esterno è dimensionato a size × size

TypeScript

import type {
  QRCodeProps,
  QRCodeEmits,
  QRCodeErrorCorrectionLevel,
} from '@pzeta/vue-components'

const level: QRCodeErrorCorrectionLevel = 'H'

const onReady = (dataUrl: string) => {
  // dataUrl è una data URL PNG (data:image/png;base64,...)
  console.log('QR pronto', dataUrl.slice(0, 32))
}

const onError = (error: Error) => {
  console.error('Generazione QR fallita', error.message)
}

Quando usarlo

Generare al volo un QR code da un URL o codice (link a installazione, ordine, ticket, pagamento)
Etichette e documenti stampabili con codice scansionabile
Condivisione rapida di un link verso dispositivo mobile

Per casi diversi:

Visualizzazione di un'immagine remota generica → Image
Codifica/decodifica server-side o QR ad alta densità con logo → libreria dedicata lato backend

PivotTable

Tabella pivot configurabile con dimensioni su righe e colonne, misura aggregata (sum/count/avg), intestazioni di colonna multi-livello e totali di riga, colonna e totale generale.

Timeline

Visualizza una sequenza di eventi in layout verticale, orizzontale o alternato, con marcatori stilizzabili e supporto alla selezione.