Layout

Stepper

Wizard multi-step composto da cinque sub-componenti (Stepper, StepList, Step, StepPanels, StepPanel). Supporta modalità lineare (blocca l'avanzamento), orientamento orizzontale/verticale e tracciamento completamento automatico.

Import

import { Stepper, StepList, Step, StepPanels, StepPanel } from '@pzeta/vue-components'

Esempio Base

Stepper (root)

Props

Prop	Tipo	Default	Descrizione
`modelValue`	`string \| number`	—	Step corrente (v-model)
`value`	`string \| number`	`''`	Alias di `modelValue`
`linear`	`boolean`	`false`	Modalità lineare: blocca il click diretto sugli step non raggiunti
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Orientamento del wizard
`severity`	`Severity`	`undefined`	Colore dell'indicatore step
`size`	`'small' \| 'medium' \| 'large'`	`'medium'`	Dimensione degli indicatori

Emits

Evento	Payload	Descrizione
`update:modelValue`	`string \| number`	Aggiornamento del v-model
`update:value`	`string \| number`	Alias per compatibilità
`stepChange`	`{ previousValue: string \| number; currentValue: string \| number }`	Emesso al cambio di step

Metodi esposti (`defineExpose`)

Metodo	Firma	Descrizione
`selectStep`	`(value: string \| number) => void`	Naviga a uno step specifico
`completeStep`	`(value: string \| number) => void`	Marca uno step come completato
`uncompleteStep`	`(value: string \| number) => void`	Rimuove il completamento da uno step
`resetCompleted`	`() => void`	Azzera tutti gli step completati
`isStepCompleted`	`(value: string \| number) => boolean`	Verifica se uno step è completato

StepList

Container per la lista degli step.

Props

Prop	Tipo	Default	Descrizione
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Orientamento (eredita da Stepper)

Step

Singolo elemento step con indicatore visivo, label e connettore.

Props

Prop	Tipo	Default	Descrizione
`value`	`string \| number`	—	Identificatore univoco dello step
`label`	`string`	—	Etichetta dello step
`description`	`string`	—	Descrizione sotto la label
`icon`	`string`	—	Icona nell'indicatore (classe CSS)
`disabled`	`boolean`	`false`	Disabilita il click sullo step
`showConnector`	`boolean`	`true`	Mostra la linea connettore prima dell'indicatore
`as`	`string \| null`	`null`	Tag HTML da renderizzare
`asChild`	`boolean`	`false`	Modalità headless

Emits

Evento	Payload	Descrizione
`click`	`MouseEvent`	Click sullo step

Slot

Slot	Scope	Descrizione
`default`	—	Contenuto personalizzato dell'indicatore (numero, testo)
`indicator`	`{ isActive, isCompleted }`	Sovrascrive l'indicatore visivo

StepPanels

Container per i pannelli di contenuto.

Props

Prop	Tipo	Default	Descrizione
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Orientamento

StepPanel

Contenuto associato a uno step.

Props

Prop	Tipo	Default	Descrizione
`value`	`string \| number`	—	Valore corrispondente allo Step
`as`	`string \| null`	`null`	Tag HTML del wrapper
`asChild`	`boolean`	`false`	Modalità headless

Slot

Slot	Scope	Descrizione
`default`	—	Contenuto del pannello

Esempi

Stepper lineare orizzontale con navigazione

Stepper verticale non lineare

Accessibilità

StepList usa role="tablist"
Ogni Step ha role="tab", aria-selected, aria-current="step" quando attivo e aria-disabled quando disabilitato
Ogni StepPanel ha role="tabpanel" e aria-hidden
In modalità lineare, il click su step non raggiunti è bloccato a livello logico

TypeScript

import type {
  StepperProps,
  StepperEmits,
  StepProps,
  StepEmits,
  StepPanelProps,
  StepListProps,
  StepPanelsProps,
  StepperOrientation,
} from '@pzeta/vue-components'

Splitter

Layout con pannelli ridimensionabili tramite divisore drag-and-drop. Composto da Splitter e SplitterPanel. Supporta orientamento orizzontale/verticale, dimensioni percentuali, minSize e persistenza stato.

Tabs

Navigazione a schede composta da cinque sub-componenti (Tabs, TabList, Tab, TabPanels, TabPanel). Supporta varianti visive, orientamento, badge, scroll e modalità closable.