Data

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.

Import

import { TimerDisplay } from '@pzeta/vue-components'
// oppure tramite plugin:
import { DataPlugin } from '@pzeta/vue-components'
app.use(DataPlugin)

Modalità

Il componente ha due modalità, selezionate dalla presenza di start.

Modalità	Prop	Chi possiede il conteggio	Quando usarla
Controllata	`seconds`	Il chiamante	Il valore arriva già calcolato dal backend o da uno store
Automatica	`start` (+ `running`)	Il componente	Si conosce l'istante di inizio e non si vuole riscrivere `setInterval`

Nella modalità automatica il valore viene ricalcolato dall'orologio di sistema a ogni tick, non accumulato dai tick stessi: il conteggio non va in deriva se la scheda resta in background, e l'intervallo viene fermato allo smontaggio senza che il chiamante debba ricordarsene.

Props

Prop	Tipo	Default	Descrizione
`seconds`	`number`	`0`	Secondi trascorsi (modalità controllata). Ignorato quando è valorizzato `start`
`start`	`string \| Date \| number`	—	Istante di inizio (modalità automatica): stringa ISO, `Date` o timestamp in millisecondi
`running`	`boolean`	`true`	Nella modalità automatica, indica se il conteggio sta avanzando
`compact`	`boolean`	`false`	Nasconde le ore finché restano a zero, mostrando `MM:SS`
`label`	`string`	—	Etichetta accessibile del timer (`aria-label`)

Emits

Evento	Payload	Descrizione
`tick`	`seconds: number`	Emesso a ogni secondo trascorso nella modalità automatica

Formattazione

Input	Output	Nota
`5`	`00:00:05`	Padding a due cifre su ore, minuti e secondi
`3661`	`01:01:01`
`360000`	`100:00:00`	Le ore non vengono troncate a due cifre
`125` con `compact`	`02:05`	Le ore compaiono appena diventano diverse da zero
`-30`	`00:00:00`	I valori negativi sono trattati come zero
`61.9`	`00:01:01`	I secondi frazionari vengono troncati

Esempi

Modalità controllata

Modalità automatica con pausa

Sospendere il conteggio ferma l'aggiornamento della resa, non l'orologio: alla ripresa il valore riparte dal tempo realmente trascorso dall'istante di inizio, non da dove si era fermata la resa.

Modalità compatta

Con evento tick

In una card di lavorazione

Accessibilità

Il componente espone role="timer" con aria-live="off": un aggiornamento al secondo annunciato da uno screen reader renderebbe la pagina inusabile. Se il valore finale conta (per esempio a fine lavorazione), annunciarlo con una live region separata.
La prop label fornisce l'etichetta accessibile del timer: senza, il ruolo timer resta privo di nome.
Le cifre sono rese con tabular-nums, così la larghezza non cambia a ogni tick e il layout non oscilla.

TypeScript

import type { TimerDisplayProps, TimerDisplayEmits } from '@pzeta/vue-components'

// Modalità controllata
const controllata: TimerDisplayProps = { seconds: 3661, compact: false }

// Modalità automatica
const automatica: TimerDisplayProps = {
  start: '2026-08-11T10:00:00.000Z',
  running: true,
  label: 'Durata della rilevazione',
}

TimelineWorkflow

Timeline verticale di eventi di workflow, generica e disaccoppiata dal sistema attività, con marker colorati per tipo evento e slot personalizzabili per marker e contenuto.

Tree

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