Components

BarcodeScanner

Scanner di codici a barre e QR code tramite fotocamera del dispositivo, con fallback per input manuale.

Panoramica

BarcodeScanner utilizza la BarcodeDetector API nativa del browser per la scansione real-time di codici a barre e QR code tramite la fotocamera. Include un input manuale come fallback.

Formati supportati:

qr_code — QR Code
ean_13 — EAN-13
ean_8 — EAN-8
code_128 — Code 128
code_39 — Code 39
upc_a — UPC-A
upc_e — UPC-E
all — tutti i formati supportati dal browser

Requisiti browser:

Chrome 83+ o Edge 83+ (BarcodeDetector API non disponibile in Firefox/Safari)
Permesso accesso fotocamera
Contesto sicuro (HTTPS)

Casi d'uso tipici: lettura codici prodotto, scansione QR code per check-in, lettura barcode magazzino, input codice seriale.

Anteprima live

Il preview mostra l'input manuale e il pulsante per attivare la scansione. La camera reale richiede HTTPS, BarcodeDetector API supportata e il permesso utente — dipende dall'ambiente di esecuzione.

Utilizzo nello schema

const schema = [{
  name: 'codiceProdotto',
  type: 'barcode',
  label: 'Codice prodotto',
  props: {
    formats: ['ean_13', 'code_128'],
    showInput: true,
    placeholder: 'Scansiona o inserisci il codice',
  }
}, {
  name: 'qrCode',
  type: 'barcode',
  label: 'QR Code',
  props: {
    formats: ['qr_code'],
    autoStart: true,
    showInput: false,
  }
}]

Utilizzo diretto

Con avvio automatico (senza input manuale)

<BarcodeScanner
  v-model="codiceTracking"
  :formats="['code_128']"
  :auto-start="true"
  :show-input="false"
  label="Codice tracking"
  @scan="processTracking"
/>

Gestione errori browser non supportato

Props

Prop	Tipo	Default	Descrizione
`modelValue`	`string \| null`	`null`	Codice letto/inserito (v-model)
`label`	`string`	—	Etichetta del campo
`helperText`	`string`	—	Testo di supporto sotto il campo
`error`	`string`	—	Messaggio di errore (attiva stato invalid)
`disabled`	`boolean`	`false`	Disabilita il campo
`invalid`	`boolean`	`false`	Attiva visivamente lo stato di errore
`formats`	`BarcodeFormat[]`	`['all']`	Formati di codice da rilevare
`autoStart`	`boolean`	`false`	Avvia la scansione automaticamente al mount
`showInput`	`boolean`	`true`	Mostra campo input per inserimento manuale
`placeholder`	`string`	(da i18n)	Placeholder del campo input manuale
`inputProps`	`Record<string, unknown>`	`{}`	Props aggiuntive per il contenitore scanner

Tipo `BarcodeFormat`

type BarcodeFormat =
  | 'all'
  | 'qr_code'
  | 'ean_13'
  | 'ean_8'
  | 'code_128'
  | 'code_39'
  | 'upc_a'
  | 'upc_e'

Comportamento scanner

L'utente clicca il pulsante fotocamera (o autoStart: true)
Il browser richiede il permesso di accesso alla fotocamera
Viene attivata la fotocamera posteriore (facingMode: 'environment')
Il loop di scansione (requestAnimationFrame) analizza ogni frame
Al primo codice rilevato: emette scan, aggiorna modelValue, ferma la fotocamera
In caso di errore: mostra un messaggio e smette di scansionare

Eventi

Evento	Payload	Descrizione
`update:modelValue`	`string \| null`	Valore aggiornato (da scansione o input manuale)
`scan`	`string`	Emesso solo al rilevamento da fotocamera (non da input manuale)
`error`	`Error`	Errore fotocamera, API non supportata, o errore di scansione

Validazione suggerita

import { z } from 'zod'

const schema = z.object({
  codiceProdotto: z.string()
    .min(1, 'Inserisci o scansiona un codice')
    .regex(/^[0-9]{8,14}$/, 'Codice EAN non valido')
    .nullable()
    .refine(v => v !== null, { message: 'Il codice è obbligatorio' }),
})

AddressAutocompleteInput

Input con autocompletamento per indirizzi geografici, integrabile con Google Places, Mapbox o API custom.

CameraCapture

Componente per catturare foto dalla fotocamera del dispositivo o da upload file, con output in formato base64.