Layout

Fieldset

Wrapper HTML fieldset con legenda personalizzabile, funzionalità di toggle collassabile (v-model) e slot per icona toggle personalizzata.

Import

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

Props

Prop	Tipo	Default	Descrizione
`legend`	`string`	`''`	Testo della legenda del fieldset
`toggleable`	`boolean`	`false`	Abilita la funzionalità di collasso/espansione
`collapsed`	`boolean`	`false`	Stato iniziale collassato (usare con `v-model:collapsed`)
`size`	`'small' \| 'medium' \| 'large'`	`'medium'`	Dimensione del componente
`disabled`	`boolean`	`false`	Disabilita il fieldset e il toggle
`border`	`boolean`	`true`	Mostra il bordo
`shadow`	`boolean`	`false`	Mostra l'ombra esterna
`rounded`	`boolean`	`true`	Bordi arrotondati

Emits

Evento	Payload	Descrizione
`update:collapsed`	`boolean`	Emesso quando cambia lo stato collapsed (per v-model)
`toggle`	`{ originalEvent: Event; value: boolean }`	Emesso al click sul toggle con l'evento originale e il nuovo stato

Slot

Slot	Scope	Descrizione
`default`	—	Contenuto del fieldset
`legend`	`{ collapsed: boolean; toggleable: boolean; toggle: () => void }`	Sovrascrive completamente la legenda
`toggleIcon`	`{ collapsed: boolean }`	Sovrascrive solo l'icona del pulsante toggle (chevron di default)

Usa il tag HTML semantico <fieldset> con <legend> nativo. Quando toggleable è attivo, la legenda contiene un <button> con aria-expanded implicito nel comportamento nativo. La prop disabled viene propagata all'elemento fieldset HTML, disabilitando tutti i campi interni.

TypeScript

import type {
  FieldsetProps,
  FieldsetEmits,
  FieldsetSlots,
  FieldsetLegendSlotProps,
  FieldsetToggleIconSlotProps,
  FieldsetToggleEvent,
} from '@pzeta/vue-components'

ExpandableFooter

Footer fisso espandibile al passaggio del mouse (hover). Ideale per form lunghi o layout con azioni contestuali nascoste, con altezze e colori configurabili tramite CSS variables.

Panel

Contenitore collassabile con header, body e footer. Supporta toggle con v-model, slot per icone aggiuntive e dimensioni configurabili.

Fieldset

Import

Esempio Base

Props

Emits

Slot

Esempi

Fieldset collassabile con v-model

Fieldset con legenda personalizzata

Fieldset con icona toggle personalizzata

Fieldset disabilitato e varianti

Accessibilità

TypeScript