Components

AddressAutocompleteInput

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

Panoramica

AddressAutocompleteInput è un componente per la ricerca e selezione di indirizzi geografici tramite autocompletamento. Non è legato a un provider specifico: accetta funzioni esterne (searchFn, getDetailsFn) che permettono l'integrazione con qualsiasi servizio (Google Places API, Mapbox, HERE, API interne).

Caratteristiche principali:

Ricerca indirizzi con debounce configurabile
Evento addressResolved con campi strutturati (via, numero civico, CAP, città)
Filtro per città tramite prop cityFilter
Precisione di ricerca configurabile (searchPrecision)
Stato di caricamento durante il fetch

Casi d'uso tipici: form anagrafica, registrazione utenti, indirizzi di spedizione/fatturazione, ricerca punti di interesse.

Anteprima live (con searchFn/getDetailsFn mockati)

Nel preview qui sotto le funzioni simulano un provider esterno con un dataset statico — in produzione si interfacciano a Google Places, Mapbox, HERE o un'API custom.

Utilizzo nello schema

const schema = [{
  name: 'indirizzo',
  type: 'address',
  label: 'Indirizzo',
  props: {
    searchFn: searchAddresses,
    getDetailsFn: getAddressDetails,
    cityFilter: formData.citta,    // Filtro dinamico
    debounceTime: 400,
    placeholder: 'Inizia a digitare l\'indirizzo...',
  }
}]

Utilizzo diretto

Senza funzione di dettaglio (solo autocompletamento)

Struttura tipi

interface Prediction {
  place_id: string
  description: string
}

interface Address {
  formatted_address: string
  place_id?: string
  streetNumber?: string
  postalCode?: string
  city?: string
  [key: string]: unknown
}

interface AddressResolvedData {
  formattedAddress: string
  placeId?: string
  streetNumber?: string
  postalCode?: string
  city?: string
}

Props

Prop	Tipo	Default	Descrizione
`modelValue`	`Address \| null`	`null`	Indirizzo selezionato (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
`loading`	`boolean`	`false`	Mostra stato di caricamento esterno
`searchFn`	`(query: string, cityFilter?: string) => Promise<Prediction[]>`	—	Funzione per cercare suggerimenti
`getDetailsFn`	`(placeId: string) => Promise<Address>`	—	Funzione per ottenere dettagli indirizzo
`cityFilter`	`string`	—	Filtro città per raffinare i risultati
`debounceTime`	`number`	`300`	Ritardo debounce in ms prima di invocare `searchFn`
`searchPrecision`	`number`	`3`	Numero di caratteri aggiuntivi richiesti dopo il primo spazio
`placeholder`	`string`	(da i18n)	Testo placeholder
`language`	`string`	`'it'`	Lingua dei risultati (passata a `searchFn`)

Deprecate (backward compatibility): cityInputId, streetNumberId, postalCodeId — usano document.getElementById con sanitizzazione. Preferire cityFilter e l'evento addressResolved.

Eventi

Evento	Payload	Descrizione
`update:modelValue`	`Address \| null`	Indirizzo aggiornato
`addressResolved`	`AddressResolvedData`	Emesso dopo la selezione con tutti i campi strutturati
`addressCleared`	—	Emesso quando l'utente cancella la selezione
`error`	`Error`	Emesso in caso di errore durante `searchFn` o `getDetailsFn`

Validazione suggerita

import { z } from 'zod'

const schema = z.object({
  indirizzo: z.object({
    formatted_address: z.string().min(1),
    place_id: z.string().optional(),
  }).nullable().refine(v => v !== null, {
    message: 'L\'indirizzo è obbligatorio'
  }),
})

Components

Tutti i tipi di input disponibili nel sistema form — basic, selection, toggle, advanced, editor, remote e special.

BarcodeScanner

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