Components

OrderListRemote

Lista ordinabile tramite drag-and-drop con caricamento dati remoto per gestire l'ordine degli elementi.

Panoramica

OrderListRemote è un componente che carica una lista di elementi da una sorgente remota e consente di riordinarli tramite drag-and-drop. Il valore emesso è l'array degli elementi nell'ordine corrente.

Caratteristiche principali:

Caricamento asincrono elementi tramite fetchFn
In alternativa a fetchFn, la chiamata PostgREST può essere composta dal componente dichiarando la risorsa: Sorgente dati endpoint
Riordinamento visuale drag-and-drop
Evento reorder per tracking delle modifiche di ordine
Template personalizzato per la visualizzazione degli elementi
Supporto lista con righe alternate (striped)
Sincronizzazione bidirezionale: il parent può aggiornare l'ordine anche esternamente

Casi d'uso tipici: ordinamento voci di menu, priorità task, sequenza fasi di workflow, ordinamento categorie.

Anteprima live (con fetchFn mockato)

Utilizzo nello schema

const schema = [{
  name: 'vociMenu',
  type: 'orderlist',
  label: 'Ordine voci menu',
  props: {
    fetchFn: fetchVociMenu,
    optionLabel: 'titolo',
    optionValue: 'id',
    listTitle: 'Trascina per riordinare',
    striped: true,
  }
}]

Utilizzo diretto

<OrderListRemote
  v-model="elementiOrdinati"
  :fetch-fn="fetchElementi"
  option-label="nome"
  option-value="id"
  list-title="Ordine di visualizzazione"
  :striped="true"
  @reorder="handleReorder"
/>

Con template personalizzato per ogni elemento

<OrderListRemote
  v-model="task"
  :fetch-fn="fetchTask"
  option-value="id"
  list-title="Priorità task"
>
  <template #option="{ option }">
    <div class="flex items-center gap-3 py-1">
      <i :class="option.icona" class="text-primary" />
      <div>
        <div class="font-medium">{{ option.titolo }}</div>
        <div class="text-sm text-gray-500">{{ option.assegnatoA }}</div>
      </div>
      <Tag :value="option.priorita" class="ml-auto" />
    </div>
  </template>
</OrderListRemote>

Salvare l'ordine al riordinamento

<script setup lang="ts">
const handleReorder = async (nuovoOrdine: Array<Record<string, unknown>>) => {
  // nuovoOrdine è l'array completo nell'ordine aggiornato
  const aggiornamenti = nuovoOrdine.map((item, index) => ({
    id: item.id,
    posizione: index + 1,
  }))
  await api.aggiornaOrdine(aggiornamenti)
}
</script>

Sorgente dati `endpoint`

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

props: {
  endpoint: 'prezzi.elementi',
  select: 'idelemento,descrizione,ordinamento',
  order: 'ordinamento.asc',
  optionLabel: 'descrizione'
}

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`	`Array<Record<string, unknown>> \| null`	`[]`	Array elementi nell'ordine corrente (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 drag-and-drop
`invalid`	`boolean`	`false`	Attiva visivamente lo stato di errore
`fetchFn`	`FetchFn`	—	Funzione asincrona per caricare gli elementi
`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 elemento
`optionValue`	`string`	`'value'`	Proprietà da usare come identificatore elemento
`listTitle`	`string`	—	Titolo mostrato sopra la lista
`dataKey`	`string`	—	Chiave univoca per identificare gli elementi
`scrollHeight`	`string`	`'14rem'`	Altezza area scrollabile
`striped`	`boolean`	`false`	Righe alternate colorate

Slot

Slot	Props	Descrizione
`header`	—	Header lista (sovrascrive `listTitle`)
`option`	`{ option, index }`	Template personalizzato per ogni elemento

Metodi esposti

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

Eventi

Evento	Payload	Descrizione
`update:modelValue`	`Array<Record<string, unknown>>`	Array aggiornato con il nuovo ordine
`reorder`	`Array<Record<string, unknown>>`	Emesso dopo ogni riordinamento drag-and-drop

Note sul comportamento

Al caricamento dei dati remoti, il componente inizializza items e emette update:modelValue con i dati ricevuti
Il parent può aggiornare l'ordine esternamente aggiornando modelValue; il componente sincronizza internamente senza loop
Il flag isInternalUpdate previene loop di aggiornamento tra il watcher remoteData e il watcher modelValue

ListboxRemote

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

PickListRemote

Doppia lista per trasferimento elementi con caricamento remoto: spostamento tra lista disponibili e lista selezionati.