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) - 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
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 | 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 ilreload() - Se al mount è già presente un
modelValue, le opzioni vengono caricate immediatamente per mostrare l'etichetta corretta - I cambiamenti al
filterprop causano un reload automatico
Eventi
| Evento | Payload | Descrizione |
|---|---|---|
update:modelValue | unknown | Valore aggiornato |
change | unknown | Emesso dopo la selezione (stesso valore di update:modelValue) |