Common

useReorderList

Composable interno per riordinamento elementi con moveUp/moveDown/moveTop/moveBottom, usato da OrderList e PickList.

Composable interno — utilizzato dai componenti OrderList e PickList della libreria.

Firma TypeScript

export function useReorderList<T>(options: UseReorderListOptions<T>): UseReorderListReturn<T>

export interface UseReorderListOptions<T> {
  items: Ref<T[]> | ComputedRef<T[]>;
  selectedItems: Ref<T[]> | ComputedRef<T[]>;
  dataKey?: Ref<string | null> | ComputedRef<string | null>;
  onReorder?: (newList: T[], direction: ReorderDirection, movedItems: T[]) => void;
}

export type ReorderDirection = 'up' | 'down' | 'top' | 'bottom'

export interface UseReorderListReturn<T> {
  // Metodi reattivi (leggono da items/selectedItems refs)
  moveUp: () => void;
  moveTop: () => void;
  moveDown: () => void;
  moveBottom: () => void;
  // Metodi stateless (per PickList, accettano lista/selezione esterne)
  reorderUp: (list: T[], selection: T[]) => ReorderResult<T>;
  reorderTop: (list: T[], selection: T[]) => ReorderResult<T>;
  reorderDown: (list: T[], selection: T[]) => ReorderResult<T>;
  reorderBottom: (list: T[], selection: T[]) => ReorderResult<T>;
  // Stato computed
  canMoveUp: ComputedRef<boolean>;
  canMoveDown: ComputedRef<boolean>;
}

export interface ReorderResult<T> {
  moved: boolean;
  list: T[];
  movedItems: T[];
}

Parametri

Parametro	Tipo	Descrizione
`items`	`Ref<T[]>`	Array degli elementi da riordinare
`selectedItems`	`Ref<T[]>`	Array degli elementi selezionati da spostare
`dataKey`	`Ref<string \| null>` (opzionale)	Chiave per confronto oggetti
`onReorder`	`(newList, direction, movedItems) => void`	Callback al completamento del riordinamento

Valore di Ritorno

Proprietà	Tipo	Descrizione
`moveUp/Down/Top/Bottom`	`() => void`	Sposta gli elementi selezionati (reattivo, chiama `onReorder`)
`reorderUp/Down/Top/Bottom`	`(list, selection) => ReorderResult<T>`	Versione stateless (ritorna il risultato senza effetti)
`canMoveUp`	`ComputedRef<boolean>`	True se almeno un elemento selezionato puo salire
`canMoveDown`	`ComputedRef<boolean>`	True se almeno un elemento selezionato puo scendere

Esempio

const { moveUp, moveDown, moveTop, moveBottom, canMoveUp, canMoveDown } = useReorderList({
  items: computed(() => props.modelValue ?? []),
  selectedItems: computed(() => selection.value),
  dataKey: computed(() => props.dataKey),
  onReorder: (newList, direction, movedItems) => {
    emit('update:modelValue', newList)
    emit('reorder', { value: newList, direction })
  },
})

<button :disabled="!canMoveUp" @click="moveUp">Su</button>
<button :disabled="!canMoveDown" @click="moveDown">Giu</button>

Note

I metodi reattivi (moveUp, ecc.) chiamano onReorder solo se almeno un elemento e stato effettivamente spostato.
I metodi stateless (reorderUp, ecc.) ritornano { moved, list, movedItems } — usati da PickList dove la lista e la selezione sono passate esplicitamente.
Algoritmo moveUp: processa gli indici in ordine crescente per evitare conflitti tra spostamenti consecutivi.
Algoritmo moveTop: rimuove gli elementi dalla posizione corrente e li inserisce all'inizio preservando l'ordine relativo.
Se tutti gli elementi selezionati sono gia in cima/fondo, canMoveUp/canMoveDown ritorna false.

usePopoverPosition

Composable interno per posizionamento popover/tooltip con 12 posizioni, auto-flip e tracking scroll.

useSelectionManager

Composable interno per selezione singola/multipla in liste con confronto per dataKey e range selection.