Data

Timeline

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

Import

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

Esempio Base

Props

Prop	Tipo	Default	Descrizione
`events`	`TimelineEvent[]`	`[]`	Array degli eventi da visualizzare
`value`	`number \| number[] \| null`	`null`	Indice/i degli eventi selezionati (supporta `v-model`)
`layout`	`'vertical' \| 'horizontal' \| 'both-sides'`	`'vertical'`	Layout della timeline
`markerStyle`	`'default' \| 'outlined' \| 'filled' \| 'dot' \| 'numbered'`	`'default'`	Stile visivo dei marcatori
`activeIndex`	`number`	`-1`	Indice fino al quale gli eventi sono considerati attivi (usato per progress)
`readonly`	`boolean`	`false`	Disabilita la selezione degli eventi
`selectable`	`boolean`	`false`	Abilita la selezione degli eventi al click
`severity`	`Severity`	`'primary'`	Colore tema della timeline
`size`	`Size`	`'medium'`	Dimensione della timeline

TimelineEvent

Proprieta'	Tipo	Descrizione
`id`	`string \| number`	Identificatore univoco dell'evento
`title`	`string`	Titolo dell'evento
`subtitle`	`string`	Sottotitolo dell'evento
`date`	`string`	Data o etichetta temporale
`content`	`string`	Testo principale dell'evento
`footer`	`string`	Testo nel footer dell'evento
`icon`	`string`	Classe CSS dell'icona nel marcatore
`status`	`'success' \| 'warn' \| 'danger' \| 'info'`	Stato visivo dell'evento per colorare il marcatore
`opposite`	`string`	Testo per il lato opposto (layout `both-sides`)
`customMarker`	`string`	Contenuto custom per il marcatore

Tipi

Size: 'small' | 'medium' | 'large'

Emits

Evento	Payload	Descrizione
`update:value`	`number \| number[]`	Emesso quando cambia la selezione (usabile con `v-model`)
`select`	`{ originalEvent: TimelineEvent, index: number, event: TimelineEvent }`	Emesso al click su un evento selezionabile

Slot

Slot	Scope	Descrizione
`content`	`{ event: TimelineEvent, index: number, active: boolean }`	Template custom per il contenuto dell'evento
`marker`	`{ event: TimelineEvent, index: number, active: boolean }`	Template custom per il marcatore dell'evento
`footer`	`{ event: TimelineEvent, index: number, active: boolean }`	Template custom per il footer dell'evento

Esempi

Layout Orizzontale

Layout Both-Sides

Marcatori Numerati

Con Selezione

Con Content Slot Custom

Note Comportamento

activeIndex e' usato per mostrare visivamente il progresso: tutti gli eventi fino a quell'indice risultano "attivi"
Con selectable: true, il click sugli eventi emette select e aggiorna value tramite update:value
value puo' essere un singolo indice (number) o un array di indici (number[]) per selezioni multiple
Lo slot marker sovrascrive completamente il contenuto del marcatore (icona e numero)
Il layout both-sides alterna visivamente il contenuto a sinistra e destra della linea centrale

Accessibilita'

Gli eventi selezionabili sono elementi <div> cliccabili
Lo stato attivo e' gestito tramite classi CSS (hs-timeline-item-active)
Per accessibilita' completa con selezione da tastiera, usa lo slot marker con un elemento <button>

TypeScript

import type { TimelineProps, TimelineEvent } from '@pzeta/vue-components'

const events: TimelineEvent[] = [
  {
    id: 1,
    title: 'Evento',
    date: '2024-01-15',
    content: 'Descrizione evento',
    icon: 'pi pi-calendar',
    status: 'success',
  },
]

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.

Tree

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