Components

RadioGroupRemoteInput

Gruppo di radio button con opzioni caricate da sorgente remota e filtri dinamici.

Panoramica

RadioGroupRemoteInput è un gruppo di radio button che carica le opzioni in modo asincrono tramite fetchFn. Ideale per selezioni singole quando le opzioni devono provenire da API o database e il numero di opzioni è limitato.

Caratteristiche principali:

Caricamento asincrono tramite fetchFn
In alternativa a fetchFn, la chiamata PostgREST può essere composta dal componente dichiarando la risorsa: Sorgente dati endpoint
Filtri dinamici su altri campi del form
Indicatore di caricamento durante il fetch
Layout verticale delle opzioni

Casi d'uso tipici: selezione metodo di pagamento, tipo documento, genere, stato civile, priorità.

Anteprima live (con fetchFn mockato)

Utilizzo nello schema

const schema = [{
  name: 'metodoPagamento',
  type: 'radioremote',
  label: 'Metodo di pagamento',
  props: {
    fetchFn: fetchMetodiPagamento,
    itemText: 'descrizione',
    itemValue: 'codice',
    name: 'metodoPagamento',
  }
}, {
  // Con filtro dinamico
  name: 'tipoSpedizione',
  type: 'radioremote',
  label: 'Tipo spedizione',
  props: {
    fetchFn: fetchTipiSpedizione,
    itemText: 'nome',
    itemValue: 'id',
    filterFields: ['idPaese'],
    name: 'tipoSpedizione',
    helperText: 'Le opzioni dipendono dal paese selezionato',
  }
}]

Utilizzo diretto

<RadioGroupRemoteInput
  v-model="metodoPagamentoSelezionato"
  :fetch-fn="fetchMetodiPagamento"
  item-text="descrizione"
  item-value="codice"
  name="metodoPagamento"
  label="Metodo di pagamento"
  helper-text="Seleziona come vuoi pagare"
/>

Con filtro dinamico

<RadioGroupRemoteInput
  v-model="tipoSpedizione"
  :fetch-fn="fetchTipiSpedizione"
  item-text="nome"
  item-value="id"
  :filter-fields="['idPaese']"
  :full-data="formData"
  name="tipoSpedizione"
  label="Tipo di spedizione"
/>

Sorgente dati `endpoint`

In alternativa a fetchFn, RadioGroupRemoteInput può comporre da sé la chiamata PostgREST a partire dalla risorsa dichiarata:

props: {
  endpoint: 'tipianagrafica',
  order: 'descrizione.asc',
  optionLabel: 'descrizione',
  optionValue: 'codtipoanagrafica'
}

fetchFn ha sempre la precedenza: se sono presenti entrambe, endpoint viene ignorato. La forma dell'endpoint, la traduzione dei filtri e l'ordine con cui viene risolto il trasporto sono descritti in Sorgente dati endpoint.

Props

Prop	Tipo	Default	Descrizione
`modelValue`	`unknown`	—	Valore selezionato (v-model)
`label`	`string`	—	Etichetta del gruppo
`helperText`	`string`	—	Testo di supporto sotto il campo
`error`	`string`	—	Messaggio di errore (attiva stato invalid)
`disabled`	`boolean`	`false`	Disabilita tutti i radio button
`invalid`	`boolean`	`false`	Attiva visivamente lo stato di errore
`fetchFn`	`FetchFn`	—	Funzione asincrona per caricare le opzioni
`filter`	`string \| FilterCriteria`	—	Filtro statico passato alla `fetchFn`
`filterFields`	`RemoteFilterField[]`	`[]`	Campi del form da osservare per filtri dinamici; la forma estesa `{ field, column, operator }` permette colonna e operatore diversi
`fullData`	`Record<string, unknown>`	`{}`	Dati completi del form (per filtri dinamici)
`endpoint`	`string`	—	Risorsa PostgREST `[schema.]risorsa`, alternativa a `fetchFn` — vedi Sorgente dati endpoint
`select`	`string`	—	Colonne da selezionare (solo con `endpoint`)
`order`	`string`	—	Ordinamento PostgREST, es. `'nome.asc'` (solo con `endpoint`)
`limit`	`number`	—	Numero massimo di righe restituite (solo con `endpoint`)
`baseUrl`	`string`	`''`	Prefisso del gateway PostgREST, se l'endpoint dichiara uno schema
`keyName`	`string`	`'id'`	Chiave primaria della risorsa (solo client PostgREST standalone)
`itemText`	`string`	`'label'`	Proprietà da usare come etichetta radio
`itemValue`	`string`	`'value'`	Proprietà da usare come valore radio
`name`	`string`	—	Attributo `name` HTML per il gruppo radio

Metodi esposti

Metodo	Descrizione
`reload()`	Ricarica i dati chiamando nuovamente la `fetchFn`

Eventi

Evento	Payload	Descrizione
`update:modelValue`	`unknown`	Valore radio selezionato

Validazione suggerita

import { z } from 'zod'

const schema = z.object({
  metodoPagamento: z.string({
    required_error: 'Seleziona un metodo di pagamento'
  }).min(1, 'Seleziona un metodo di pagamento'),

  tipoSpedizione: z.number()
    .positive('Seleziona un tipo di spedizione')
    .nullable()
    .refine(v => v !== null, { message: 'Il tipo di spedizione è obbligatorio' }),
})

RadioGroup

Gruppo di radio button custom per selezione singola con layout verticale e supporto disabilitazione per opzione.

SelectRemote

Dropdown con caricamento opzioni da sorgente remota, filtri dinamici e template personalizzabile.