Data

Tree

Visualizzazione gerarchica interattiva con supporto per selezione (single, multiple, checkbox), filtro testuale e espansione/collasso dei nodi.

Import

import { Tree } from '@pzeta/vue-components'
import type {
  TreeProps,
  TreeEmits,
  TreeNode,
  TreeSlots,
  TreeSelectionMode,
} from '@pzeta/vue-components'

TreeNode

interface TreeNode {
  key?: string | number      // Chiave univoca del nodo (richiesta per selezione/espansione)
  label?: string             // Testo visualizzato
  icon?: string              // Classe icona (es. 'pi pi-folder')
  data?: unknown             // Dati custom associati al nodo
  type?: string              // Tipo nodo (per slot template personalizzati)
  children?: TreeNode[]      // Nodi figli
  style?: Record<string, string | number>
  class?: string
  selectable?: boolean       // false = nodo non selezionabile
  leaf?: boolean             // Nodo foglia (nasconde il toggle)
  expanded?: boolean         // Stato espansione iniziale
}

Props

Prop	Tipo	Default	Descrizione
`value`	`TreeNode[]`	`[]`	Array radice dei nodi
`selectionMode`	`'single' \| 'multiple' \| 'checkbox'`	`undefined`	Modalità selezione nodi
`selectionKeys`	`Record<string \| number, boolean> \| null`	`null`	Chiavi nodi selezionati (v-model:selectionKeys). Segue anche i cambi del chiamante dopo il montaggio (dalla 1.24.0)
`expandedKeys`	`Record<string \| number, boolean>`	`{}`	Chiavi nodi espansi (v-model:expandedKeys). Segue anche i cambi del chiamante dopo il montaggio (dalla 1.24.0; prima era letta solo al montaggio)
`filter`	`boolean`	`false`	Abilita casella di filtro testuale
`filterPlaceholder`	`string`	`'Search...'`	Placeholder per il campo di ricerca
`filterMode`	`'lenient' \| 'strict'`	`'lenient'`	Modalità filtro: `lenient` mostra il nodo se uno dei figli corrisponde, `strict` richiede corrispondenza esatta
`filterBy`	`string`	`'label'`	Campo del nodo su cui applicare il filtro
`loading`	`boolean`	`false`	Mostra indicatore di caricamento
`loadingMode`	`'mask' \| 'icon'`	`'mask'`	Modalità visualizzazione loading
`class`	`string`	`''`	Classe CSS aggiuntiva
`droppable`	`boolean`	`false`	I nodi accettano le righe trascinate da una DataTable con `draggable-rows` ed emettono `nodeDrop` (dalla 1.24.0)

expandedKeys e selectionKeys si confrontano sul contenuto (le chiavi attive), non sull'oggetto: un valore scritto nel template, come :expanded-keys="{ radice: true }", si ricrea a ogni render del padre ma non richiude i nodi aperti dall'utente.

Emits

Evento	Payload	Descrizione
`update:selectionKeys`	`Record<string \| number, boolean> \| null`	Selezione cambiata
`update:expandedKeys`	`Record<string \| number, boolean>`	Chiavi espanse cambiate
`nodeSelect`	`TreeNode`	Nodo selezionato
`nodeUnselect`	`TreeNode`	Nodo deselezionato
`nodeExpand`	`TreeNode`	Nodo espanso
`nodeCollapse`	`TreeNode`	Nodo collassato
`nodeDrop`	`TreeNodeDropEvent`	Righe di una DataTable rilasciate su un nodo, con `droppable` (`{ originalEvent: DragEvent; node: TreeNode; data: unknown[] }`, dalla 1.24.0)

Slot

Slot	Scope	Descrizione
`default`	`{ node: TreeNode }`	Template personalizzato per il contenuto del nodo. Riceve il proprio nodo a ogni livello (dalla 1.24.0: prima, dal terzo livello in giù, riceveva il padre)
`toggleicon`	`{ expanded: boolean }`	Icona toggle espansione custom
`checkboxicon`	`{ checked: boolean; partialChecked: boolean }`	Icona checkbox custom
`loadingicon`	—	Icona di caricamento custom

Esempi

Selezione singola

Selezione multipla

Selezione con checkbox

Con filtro

Template nodo personalizzato

Controllo espansione programmatico

Righe rilasciate su un nodo

Con droppable (dalla 1.24.0) i nodi accettano le righe trascinate da una DataTable con draggable-rows: il nodo sotto il puntatore è evidenziato e il rilascio emette nodeDrop con { node, data, originalEvent }, dove data sono le righe (una riga selezionata trascina tutta la selezione). Lo spostamento lo fa il chiamante.

<DataTable :value="documenti" data-key="id" draggable-rows>
  <Column field="nome" header="Documento" />
</DataTable>
<Tree :value="cartelle" droppable @node-drop="({ node, data }) => sposta(data, node.key)" />

Da tastiera serve un'alternativa al trascinamento, per esempio un'azione «Sposta in…».

Metodi esposti (defineExpose)

Metodo	Descrizione
`expandAll()`	Espande tutti i nodi che hanno figli
`collapseAll()`	Collassa tutti i nodi

Note sulla selezione

La prop selectionKeys è una mappa { [key]: true }.
In modalità single, un click deseleziona il nodo precedente.
In modalità multiple, il click aggiunge/rimuove dalla selezione senza richiedere Ctrl.
In modalità checkbox, ogni nodo ha una propria checkbox. I nodi con selectable: false non possono essere selezionati.

Accessibilità

Il contenitore usa role="tree". Ogni nodo è un elemento <li> dentro <ul>. I pulsanti di toggle sono elementi <button> accessibili da tastiera.

TypeScript

import type {
  TreeProps,
  TreeEmits,
  TreeNode,
  TreeSlots,
  TreeSelectionMode,
  TreeNodeProps,
  TreeNodeDropEvent,
} from '@pzeta/vue-components'

TimerDisplay

Contatore HH:MM:SS a cifre tabellari per durate in corso. Due modalità — controllata dal chiamante oppure automatica con intervallo gestito dal componente e fermato allo smontaggio.

TreeTable

Tabella con struttura dati gerarchica espandibile, supporto per ordinamento, paginazione e selezione nodi tramite il sub-componente Column.