Layout

Accordion

Sistema di pannelli espandibili composto da quattro sub-componenti (Accordion, AccordionPanel, AccordionHeader, AccordionContent). Supporta modalità singola e multipla, lazy loading e icone personalizzabili.

Import

import {
  Accordion,
  AccordionPanel,
  AccordionHeader,
  AccordionContent,
} from '@pzeta/vue-components'

Esempio Base

Accordion (root)

Props

Prop	Tipo	Default	Descrizione
`modelValue`	`string \| number \| (string \| number)[] \| null`	`null`	Valore del pannello attivo (usare con `v-model`)
`multiple`	`boolean`	`false`	Consente di aprire più pannelli contemporaneamente
`lazy`	`boolean`	`false`	Carica il contenuto dei pannelli solo alla prima apertura
`expandIcon`	`string \| null`	`null`	Icona personalizzata per il pannello espanso
`collapseIcon`	`string \| null`	`null`	Icona personalizzata per il pannello collassato

Emits

Evento	Payload	Descrizione
`update:modelValue`	`AccordionActiveValue`	Aggiornamento del v-model
`change`	`AccordionActiveValue`	Emesso quando cambia il pannello attivo
`tabOpen`	`{ originalEvent: Event; value: AccordionValue }`	Emesso quando un pannello viene aperto
`tabClose`	`{ originalEvent: Event; value: AccordionValue }`	Emesso quando un pannello viene chiuso

AccordionPanel

Wrapper per ogni pannello. Fornisce il contesto ai figli tramite provide/inject.

Props

Prop	Tipo	Default	Descrizione
`value`	`string \| number`	—	Richiesto. Identificatore univoco del pannello
`disabled`	`boolean`	`false`	Disabilita l'interazione con il pannello

Slot

Slot	Scope	Descrizione
`default`	`{ isActive, disabled, toggle }`	Contenuto del pannello (AccordionHeader + AccordionContent)

AccordionHeader

Header cliccabile che attiva/disattiva il pannello.

Props

Prop	Tipo	Default	Descrizione
`as`	`string`	`'div'`	Tag HTML da renderizzare
`iconPosition`	`'left' \| 'right' \| 'none'`	`'left'`	Posizione dell'icona
`iconType`	`'plus-minus' \| 'chevron' \| 'none'`	`'plus-minus'`	Tipo di icona visualizzata

Slot

Slot	Scope	Descrizione
`default`	`{ isActive, disabled, toggle }`	Contenuto principale dell'header (titolo)
`left`	`{ isActive, disabled, toggle }`	Sovrascrive l'area icona sinistra
`right`	`{ isActive, disabled, toggle }`	Sovrascrive l'area icona/azioni destra

AccordionContent

Contenuto espandibile del pannello, animato con Transition.

Props

Prop	Tipo	Default	Descrizione
`as`	`string`	`'div'`	Tag HTML da renderizzare

Slot

Slot	Scope	Descrizione
`default`	`{ isActive }`	Contenuto del pannello

Esempi

Pannelli multipli aperti contemporaneamente

Accordion con v-model

Icona chevron con animazione rotazione

Lazy loading

<template>
  <!-- Il contenuto di ogni pannello viene renderizzato solo alla prima apertura -->
  <Accordion :lazy="true">
    <AccordionPanel value="1">
      <AccordionHeader><span>Caricamento lazy</span></AccordionHeader>
      <AccordionContent>
        <HeavyComponent />
      </AccordionContent>
    </AccordionPanel>
  </Accordion>
</template>

Accessibilità

AccordionHeader ha role="button", aria-expanded e supporto tastiera (Enter/Space)
La struttura segue il pattern ARIA per i widget accordion
Il pannello disabilitato (disabled) non risponde all'interazione

TypeScript

import type {
  AccordionProps,
  AccordionEmits,
  AccordionPanelProps,
  AccordionHeaderProps,
  AccordionContentProps,
  AccordionValue,
  AccordionActiveValue,
  AccordionIconType,
  AccordionIconPosition,
} from '@pzeta/vue-components'

Forms

Componenti form — input, select, date picker, toggle, upload e componenti speciali. 31 componenti totali.

Card

Contenitore versatile con slot header, content e footer. Supporta varianti visive, icone, dimensioni e stati interattivi.