Overlays
Overlays
Componenti overlay — Dialog, ConfirmDialog, ConfirmPopup, Drawer, Sidebar, Popover.
Componenti
| Componente | Descrizione |
|---|---|
| Dialog | Finestra modale overlay con posizionamento, drag e maximizable. Modal è un alias deprecato |
| ConfirmDialog | Dialog di conferma modale gestito tramite useConfirm() |
| ConfirmPopup | Popup di conferma contestuale ancorato al trigger, gestito tramite useConfirmPopup() |
| Drawer | Pannello laterale overlay con animazione slide da tutti i lati |
| Sidebar | Barra laterale fissa e collassabile per la navigazione principale (Portal Shell) |
| Popover | Overlay flottante ancorato a un elemento trigger con posizionamento automatico |
Plugin
import { OverlaysPlugin } from '@pzeta/vue-components'
app.use(OverlaysPlugin)
In alternativa, ogni componente può essere importato singolarmente:
import { Dialog, ConfirmDialog, ConfirmPopup, Drawer, Sidebar, Popover } from '@pzeta/vue-components'
Pattern di utilizzo
Componenti con v-model
Dialog, Drawer e Popover usano v-model per controllare la visibilità:
<Dialog v-model="visible">...</Dialog>
<Drawer v-model="visible">...</Drawer>
<Popover v-model="visible">...</Popover>
Sidebar usa v-model:collapsed per lo stato di collapse:
<Sidebar v-model:collapsed="collapsed">...</Sidebar>
Componenti service-based
ConfirmDialog e ConfirmPopup non usano v-model. Si registrano una volta nel layout e vengono attivati programmaticamente:
<!-- Nel layout principale -->
<ConfirmDialog />
<ConfirmPopup />
// In qualsiasi componente figlio
import { useConfirm, useConfirmPopup } from '@pzeta/vue-components'
const confirm = useConfirm()
confirm.require({ message: 'Confermare?', accept: () => {} })
const confirmPopup = useConfirmPopup()
confirmPopup.require({ target: event.currentTarget, message: 'Sicuro?' })
Sidebar
Barra laterale fissa e collassabile per la navigazione principale dell'applicazione. Progettata per il Portal Shell dei microfrontend, supporta auto-collapse responsive, brand, e slot per header/content/footer.
Avatar
Rappresentazione visiva di un utente tramite immagine, iniziali o icona. Supporta shape circle/square, severity colorata e fallback automatico.