Navigation

PanelMenu

Menu accordion multi-livello con pannelli espandibili. Supporta controllo esterno tramite expandedKeys, espansione multipla simultanea, badge e slot per personalizzazione di icone e voci.

Import

import { PanelMenu } from '@pzeta/vue-components'
import type { MenuItem, PanelMenuExpandedKeys } from '@pzeta/vue-components'

Esempio Base

Props

Prop	Tipo	Default	Descrizione
`model`	`MenuItem[]`	`[]`	Array di elementi del menu
`expandedKeys`	`PanelMenuExpandedKeys`	`undefined`	Mappa delle chiavi espanse per controllo esterno (`{ [key: string]: boolean }`)
`multiple`	`boolean`	`false`	Se `true`, permette di espandere più pannelli root contemporaneamente
`tabindex`	`number \| string`	`0`	Indice di tabulazione
`ariaLabel`	`string`	`undefined`	Label ARIA per il componente
`ariaLabelledby`	`string`	`undefined`	ID dell'elemento che fornisce il label ARIA

Emits

Evento	Payload	Descrizione
`update:expandedKeys`	`PanelMenuExpandedKeys`	Emesso quando lo stato di espansione cambia (per `v-model:expandedKeys`)
`panel-open`	`{ originalEvent: Event; item: MenuItem }`	Emesso quando un pannello viene espanso
`panel-close`	`{ originalEvent: Event; item: MenuItem }`	Emesso quando un pannello viene chiuso
`item-click`	`{ originalEvent: Event; item: MenuItem }`	Emesso al click su un elemento (anche senza submenu)

Slot

Slot	Scope	Descrizione
`item`	`{ item: MenuItem; root: boolean; active: boolean; hasSubmenu: boolean }`	Template personalizzato per ogni voce
`submenuicon`	`{ active: boolean }`	Template personalizzato per l'icona espandi/comprimi del pannello
`headericon`	`{ item: MenuItem; class: string }`	Template personalizzato per l'icona dell'header del pannello
`itemicon`	`{ item: MenuItem; class: string }`	Template personalizzato per le icone delle voci interne

Esempi

Controllo esterno con v-model:expandedKeys

Espansione multipla

Ascolto eventi di apertura/chiusura

Icona submenu personalizzata

Comportamento

Con multiple: false (default), aprire un pannello chiude automaticamente gli altri pannelli root.
Le chiavi dei pannelli sono generate da item.itemKey oppure dall'indice numerico.
I pannelli senza items vengono resi come link diretti (router-link, <a> o <button>).
I sottomenu interni usano il componente Menu con popup: false.
Gli elementi con separator: true vengono resi come divisori visivi.

Accessibilità

L'header di ogni pannello è un <button> con aria-expanded che riflette lo stato.
Il componente usa <nav> come contenitore con aria-label configurabile.

TypeScript

import type {
  PanelMenuProps,
  PanelMenuEmits,
  PanelMenuSlots,
  PanelMenuExpandedKeys,
  PanelMenuPanelOpenEvent,
  PanelMenuPanelCloseEvent,
} from '@pzeta/vue-components'

NavigationMenu

Menu di navigazione strutturato per sidebar MFE. Organizza le voci per moduli e gruppi con indicatore active automatico via Vue Router, modalità collapsed e slot per item personalizzati.

ScrollTop

Pulsante torna-su che appare quando la pagina supera un certo scroll threshold. Configurabile per target window o elemento parent, comportamento smooth/auto, severity e aspetto del pulsante.