Overlays

Drawer

Pannello laterale overlay con animazione slide configurabile. Supporta apertura da tutti e quattro i lati, tre dimensioni, variante floating e slot header/footer/container.

Import

import { Drawer } from '@pzeta/vue-components'
// oppure con plugin selettivo:
import { OverlaysPlugin } from '@pzeta/vue-components'
app.use(OverlaysPlugin)

Esempio Base

Props

Prop	Tipo	Default	Descrizione
`modelValue`	`boolean`	`false`	Visibilità del drawer (v-model)
`position`	`DrawerPosition`	`'left'`	Lato da cui il drawer si apre
`size`	`DrawerSize`	`'medium'`	Dimensione del drawer
`variant`	`DrawerVariant`	`'default'`	Variante visiva
`header`	`string \| null`	`null`	Testo del titolo nell'header
`icon`	`string \| null`	`null`	Classe CSS dell'icona nell'header
`closable`	`boolean`	`true`	Mostra il pulsante di chiusura
`closeIcon`	`string`	—	Classe CSS icona di chiusura (default dal ConfigPlugin)
`showHeader`	`boolean`	`true`	Mostra la sezione header
`dismissableMask`	`boolean`	`true`	Chiude al click sull'overlay
`closeOnEscape`	`boolean`	`true`	Chiude alla pressione di Escape
`blockScroll`	`boolean`	`true`	Blocca lo scroll del body quando aperto

DrawerPosition

type DrawerPosition = 'left' | 'right' | 'top' | 'bottom'

DrawerSize

type DrawerSize = 'small' | 'medium' | 'large' | 'full'
// small: ~280px | medium: ~380px (default) | large: ~500px | full: schermo intero

DrawerVariant

type DrawerVariant =
  | 'default'   // Ancorato al bordo dello schermo
  | 'floating'  // Staccato dal bordo con margini e ombra

Emits

Evento	Payload	Descrizione
`update:modelValue`	`boolean`	Aggiornamento visibilità per v-model
`show`	—	Drawer reso visibile
`hide`	—	Drawer nascosto
`close`	`Event`	Drawer chiuso tramite pulsante o ESC

Slot

Slot	Scope	Descrizione
`default`	—	Contenuto principale del drawer
`header`	`{ close: (e: Event) => void }`	Sostituzione del contenuto dell'header
`footer`	—	Area footer (visibile solo se lo slot è fornito)
`closeicon`	—	Icona personalizzata per il pulsante di chiusura
`container`	`{ close: (e: Event) => void }`	Sostituzione completa del contenuto (headless mode)

Esempi

Drawer da destra con notifiche

Drawer da bottom con footer

Variante floating

Headless mode (slot container)

Accessibilità

Renderizzato con role="dialog" e aria-modal="true"
aria-labelledby collegato automaticamente all'ID del titolo nell'header
Chiusura tramite tasto Escape (disabilitabile con :close-on-escape="false")
Overlay esterno separato dal pannello (gestione indipendente click fuori)
Usa <Teleport to="body"> con due <Transition> separate: fade per l'overlay, slide per il pannello

TypeScript

import type { DrawerProps, DrawerEmits, DrawerPosition, DrawerSize, DrawerVariant } from '@pzeta/vue-components'

Dialog

Finestra modale overlay con supporto a posizionamento configurabile, trascinamento, massimizzazione e slot header/footer. `Modal` è un alias deprecato che punta a questo componente.

Popover

Overlay flottante ancorato a un elemento trigger. Supporta trigger click/hover/focus/manual, posizionamento automatico con correzione viewport, freccia, e varianti visive.