Components

InplaceSelectRemote

Select inline con editing in-place: visualizza il valore come testo e apre un dropdown al click per la modifica.

Panoramica

InplaceSelectRemote è un componente select con interazione in-place: mostra il valore corrente come testo semplice e, al click, si trasforma in un dropdown per consentire la modifica. Ideale per editing rapido in tabelle, liste o schede dettaglio.

Caratteristiche principali:

Visualizzazione compatta come testo (non occupa spazio come un dropdown standard)
Caricamento lazy: le opzioni vengono richieste solo alla prima apertura
Supporto opzioni statiche (prop options) o remote (fetchFn)
In alternativa a fetchFn, la chiamata PostgREST può essere composta dal componente dichiarando la risorsa: Sorgente dati endpoint
Template di visualizzazione personalizzabile (displayTemplate)
Chiusura automatica dopo la selezione

Casi d'uso tipici: modifica stato in una riga di tabella, cambio assegnatario in una lista task, aggiornamento categoria senza aprire un form completo.

Anteprima live (con fetchFn mockato)

Utilizzo nello schema

const schema = [{
  name: 'statoOrdine',
  type: 'inplaceselect',
  label: 'Stato',
  props: {
    fetchFn: fetchStatiOrdine,
    optionLabel: 'descrizione',
    optionValue: 'codice',
    placeholder: 'Seleziona stato',
  }
}]

Utilizzo diretto

Con opzioni statiche

Con template di visualizzazione personalizzato

Utilizzo in tabella

Sorgente dati `endpoint`

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

props: {
  endpoint: 'statiordine',
  order: 'descrizione.asc',
  optionLabel: 'descrizione',
  optionValue: 'codstato'
}

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)
`fetchFn`	`FetchFn`	—	Funzione asincrona per caricare le opzioni
`options`	`Record<string, unknown>[]`	`[]`	Opzioni statiche (alternativa a `fetchFn`)
`filter`	`string \|` endpoint`	`string`	—
`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)
FilterCriteria`	—	Filtro statico passato alla `fetchFn`
`optionLabel`	`string`	`'label'`	Proprietà da usare come etichetta
`optionValue`	`string`	`'value'`	Proprietà da usare come valore
`placeholder`	`string`	(da i18n)	Testo mostrato quando nessun valore è selezionato
`displayTemplate`	`(item: Record<string, unknown>) => string`	—	Funzione per formattare il testo visualizzato
`editable`	`boolean`	`true`	Abilita il click per aprire il dropdown
`inputProps`	`Record<string, unknown>`	`{}`	Props aggiuntive per il Select sottostante

Comportamento caricamento opzioni

Il componente utilizza il caricamento lazy (immediate: false):

Le opzioni non vengono richieste al mount
La prima apertura del componente (handleOpen) triggera il reload()
Se al mount è già presente un modelValue, le opzioni vengono caricate immediatamente per mostrare l'etichetta corretta
I cambiamenti al filter prop causano un reload automatico

Eventi

Evento	Payload	Descrizione
`update:modelValue`	`unknown`	Valore aggiornato
`change`	`unknown`	Emesso dopo la selezione (stesso valore di `update:modelValue`)

IconSelect

Dropdown per la selezione di icone con anteprima visuale, filtro e raggruppamento per categoria.

ListboxRemote

Listbox con caricamento dati remoto, selezione singola o multipla, raggruppamento e immagini nelle opzioni.