Data

PickList

Componente a doppia lista per il trasferimento di elementi da source a target (e viceversa), con pulsanti di spostamento, riordinamento interno e selezione multipla.

Import

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

Esempio Base

Props

Prop	Tipo	Default	Descrizione
`modelValue`	`[PickListItem[], PickListItem[]] \| null`	`null`	Tupla `[source, target]` (v-model)
`selection`	`[PickListItem[], PickListItem[]] \| null`	`null`	Tupla `[sourceSelection, targetSelection]` (v-model:selection)
`dataKey`	`string \| null`	`null`	Proprietà usata come chiave univoca per gli elementi oggetto
`scrollHeight`	`string`	`'14rem'`	Altezza massima di ogni lista con scroll
`listStyle`	`string \| Record<string, string \| number> \| null`	`null`	Stile inline aggiuntivo per i contenitori lista
`breakpoint`	`string`	`'960px'`	Larghezza viewport sotto la quale il layout diventa verticale
`striped`	`boolean`	`false`	Alterna il colore di sfondo delle righe
`showSourceControls`	`boolean`	`true`	Mostra i pulsanti di riordinamento nella lista source
`showTargetControls`	`boolean`	`true`	Mostra i pulsanti di riordinamento nella lista target
`metaKeySelection`	`boolean`	`false`	Richiede Ctrl/Meta per la selezione multipla
`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"
`moveToTargetButtonProps`	`Record<string, unknown> \| null`	`null`	Attributi aggiuntivi per il pulsante "sposta selezionati a destra"
`moveAllToTargetButtonProps`	`Record<string, unknown> \| null`	`null`	Attributi aggiuntivi per il pulsante "sposta tutti a destra"
`moveToSourceButtonProps`	`Record<string, unknown> \| null`	`null`	Attributi aggiuntivi per il pulsante "sposta selezionati a sinistra"
`moveAllToSourceButtonProps`	`Record<string, unknown> \| null`	`null`	Attributi aggiuntivi per il pulsante "sposta tutti a sinistra"
`ariaLabel`	`string \| null`	`null`	Prefisso etichetta accessibilità per le liste
`ariaLabelledby`	`string \| null`	`null`	ID elemento che etichetta le liste

Emits

Evento	Payload	Descrizione
`update:modelValue`	`[PickListItem[], PickListItem[]]`	Aggiornamento tupla `[source, target]` dopo trasferimento o riordinamento
`update:selection`	`[PickListItem[], PickListItem[]]`	Aggiornamento selezione corrente
`reorder`	`PickListReorderEvent`	Riordinamento interno a una lista
`selection-change`	`PickListSelectionChangeEvent`	Cambio della selezione
`move-to-target`	`PickListMoveEvent`	Elementi selezionati spostati da source a target
`move-to-source`	`PickListMoveEvent`	Elementi selezionati spostati da target a source
`move-all-to-target`	`PickListMoveAllEvent`	Tutti gli elementi di source spostati a target
`move-all-to-source`	`PickListMoveAllEvent`	Tutti gli elementi di target spostati a source
`focus`	`FocusEvent`	Focus su una delle liste
`blur`	`FocusEvent`	Blur da una delle liste

Struttura eventi

interface PickListReorderEvent {
  originalEvent: Event
  value: PickListItem[]
  direction: 'up' | 'down' | 'top' | 'bottom'
  listType: 'source' | 'target'
}

interface PickListMoveEvent {
  originalEvent: Event
  items: PickListItem[]           // Elementi spostati
}

interface PickListMoveAllEvent {
  originalEvent: Event
  items: PickListItem[]           // Tutti gli elementi spostati
}

Slot

Slot	Scope	Descrizione
`option`	`{ option: PickListItem; index: number; selected: boolean }`	Template per ogni elemento in entrambe le liste
`sourceheader`	`{ items: PickListItem[] }`	Intestazione della lista source
`targetheader`	`{ items: PickListItem[] }`	Intestazione della lista target
`sourcecontrolsstart`	—	Contenuto inserito prima dei pulsanti di controllo source
`sourcecontrolsend`	—	Contenuto inserito dopo i pulsanti di controllo source
`targetcontrolsstart`	—	Contenuto inserito prima dei pulsanti di controllo target
`targetcontrolsend`	—	Contenuto inserito dopo i pulsanti di controllo target
`movecontrolsstart`	—	Contenuto inserito prima dei pulsanti di trasferimento centrali
`movecontrolsend`	—	Contenuto inserito dopo i pulsanti di trasferimento centrali
`moveupicon`	—	Icona "sposta su" personalizzata
`movetopicon`	—	Icona "sposta in cima" personalizzata
`movedownicon`	—	Icona "sposta giù" personalizzata
`movebottomicon`	—	Icona "sposta in fondo" personalizzata
`movetotargeticon`	—	Icona "sposta a target" personalizzata
`movealltotargeticon`	—	Icona "sposta tutto a target" personalizzata
`movetosourceicon`	—	Icona "sposta a source" personalizzata
`movealltosourceicon`	—	Icona "sposta tutto a source" personalizzata

Esempi

Template personalizzato con conteggio in header

Senza controlli di riordinamento

Ascolto eventi di trasferimento

Accessibilità

Entrambe le liste usano role="listbox" con aria-multiselectable="true".
Ogni elemento ha role="option" e aria-selected.
Navigazione da tastiera nella lista source: ArrowRight trasferisce gli elementi selezionati a target; nella lista target: ArrowLeft li riporta a source.
Ctrl+ArrowUp/Ctrl+ArrowDown riordina gli elementi all'interno della lista; Ctrl+Home/Ctrl+End sposta in cima/fondo.
Doppio click su un elemento lo trasferisce immediatamente nell'altra lista.
Ctrl+A seleziona tutti gli elementi della lista corrente.

TypeScript

import type {
  PickListProps,
  PickListItem,
  PickListMoveEvent,
  PickListMoveAllEvent,
  PickListReorderEvent,
  PickListSelectionChangeEvent,
} from '@pzeta/vue-components'

// Il v-model è una tupla di due array
type PickListValue = [PickListItem[], PickListItem[]]

Paginator

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

Timeline

Visualizza una sequenza di eventi in layout verticale, orizzontale o alternato, con marcatori stilizzabili e supporto alla selezione.