Data

OrderList

Lista riordinabile con pulsanti freccia (su/giù/top/bottom) e selezione multipla degli elementi; supporta slot personalizzati per item e header.

Import

import { OrderList } from '@pzeta/vue-components'

Esempio Base

Props

Prop	Tipo	Default	Descrizione
`modelValue`	`OrderListItem[] \| null`	`null`	Array degli elementi della lista (v-model)
`selection`	`OrderListItem[] \| null`	`null`	Array degli elementi selezionati (v-model:selection)
`dataKey`	`string \| null`	`null`	Proprietà usata come chiave univoca per gli elementi oggetto
`scrollHeight`	`string`	`'14rem'`	Altezza massima della lista con scroll
`listStyle`	`string \| Record<string, string \| number> \| null`	`null`	Stile inline aggiuntivo per il contenitore lista
`breakpoint`	`string`	`'960px'`	Larghezza viewport sotto la quale il layout diventa verticale
`striped`	`boolean`	`false`	Alterna il colore di sfondo delle righe
`metaKeySelection`	`boolean`	`false`	Richiede Ctrl/Meta per la selezione multipla; senza questa prop il click toglie/aggiunge alla selezione
`autoOptionFocus`	`boolean`	`true`	Mette il focus automaticamente sul primo elemento
`focusOnHover`	`boolean`	`true`	Sposta il focus sull'elemento al passaggio del mouse
`disabled`	`boolean`	`false`	Disabilita il componente
`moveUpButtonProps`	`Record<string, unknown> \| null`	`null`	Attributi aggiuntivi per il pulsante "sposta su"
`moveTopButtonProps`	`Record<string, unknown> \| null`	`null`	Attributi aggiuntivi per il pulsante "sposta in cima"
`moveDownButtonProps`	`Record<string, unknown> \| null`	`null`	Attributi aggiuntivi per il pulsante "sposta giù"
`moveBottomButtonProps`	`Record<string, unknown> \| null`	`null`	Attributi aggiuntivi per il pulsante "sposta in fondo"
`ariaLabel`	`string \| null`	`null`	Etichetta accessibilità aria-label della lista
`ariaLabelledby`	`string \| null`	`null`	ID elemento che etichetta la lista

Emits

Evento	Payload	Descrizione
`update:modelValue`	`OrderListItem[]`	Nuovo array dopo riordinamento (v-model)
`update:selection`	`OrderListItem[]`	Aggiornamento della selezione corrente
`reorder`	`OrderListReorderEvent`	Emesso dopo ogni operazione di riordinamento
`selection-change`	`OrderListSelectionChangeEvent`	Emesso quando cambia la selezione
`focus`	`FocusEvent`	Focus sulla lista
`blur`	`FocusEvent`	Blur dalla lista

Struttura eventi

interface OrderListReorderEvent {
  originalEvent: Event
  value: OrderListItem[]          // Nuovo array ordinato
  direction: 'up' | 'down' | 'top' | 'bottom'
}

interface OrderListSelectionChangeEvent {
  originalEvent: Event
  value: OrderListItem[]          // Elementi selezionati
}

Slot

Slot	Scope	Descrizione
`option`	`{ option: OrderListItem; index: number; selected: boolean }`	Template per ogni elemento della lista
`header`	`{ value: OrderListItem[] }`	Intestazione sopra la lista
`controlsstart`	—	Contenuto inserito prima dei pulsanti di controllo
`controlsend`	—	Contenuto inserito dopo i pulsanti di controllo
`moveupicon`	—	Icona personalizzata per il pulsante "sposta su"
`movetopicon`	—	Icona personalizzata per il pulsante "sposta in cima"
`movedownicon`	—	Icona personalizzata per il pulsante "sposta giù"
`movebottomicon`	—	Icona personalizzata per il pulsante "sposta in fondo"

Esempi

Template personalizzato con prodotti

Ascolto evento reorder

Lista con righe alternate e disabled

Accessibilità

La lista usa role="listbox" con aria-multiselectable="true".
Ogni elemento ha role="option" e aria-selected.
Navigazione da tastiera: ArrowUp/ArrowDown per navigare, Ctrl+ArrowUp/Ctrl+ArrowDown per spostare gli elementi, Ctrl+Home/Ctrl+End per spostare in cima/fondo, Ctrl+A per selezionare tutto, Space/Enter per selezionare/deselezionare l'elemento con focus.

TypeScript

import type { OrderListProps, OrderListItem, OrderListReorderEvent } from '@pzeta/vue-components'

// Tipo per gli elementi della lista
type OrderListItem = Record<string, unknown> | string | number | boolean | null

Knob

Controllo rotante (dial) per la selezione di valori numerici tramite drag del mouse, touch o tastiera, con arco SVG personalizzabile per colori e spessore.

Paginator

Controllo di paginazione standalone con navigazione configurabile, dropdown righe per pagina, report pagina corrente e slot personalizzabili.