@pzeta/vue-components
Overlays

Popover

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

Import

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

Esempio Base

Props

PropTipoDefaultDescrizione
modelValuebooleanfalseVisibilità controllata esternamente (v-model)
titlestring—Titolo mostrato nell'header del popover
positionPopoverPosition'top'Posizione preferita del popover rispetto al trigger
triggerPopoverTrigger'click'Evento che apre il popover
closablebooleantrueMostra il pulsante di chiusura nell'header
closeIconstring—Classe CSS icona di chiusura (default dal ConfigPlugin)
showArrowbooleantrueMostra la freccia direzionale verso il trigger
dismissablebooleantrueChiude al click fuori dal popover
autoHidebooleantrueNasconde automaticamente all'uscita del mouse (con trigger hover) o fuori viewport
showDelaynumber0Delay in ms prima di mostrare il popover
hideDelaynumber0Delay in ms prima di nascondere il popover
variantPopoverVariant'default'Variante visiva
sizePopoverSize'medium'Larghezza massima del pannello
panelClassstring | nullnullClasse CSS del pannello (dalla 1.22.0). class passato al Popover finisce sul wrapper del trigger
panelStylestring | Record<string, string | number> | nullnullStile inline del pannello (dalla 1.22.0). Una width toglie il limite della taglia, fino alla viewport meno 2rem; la posizione resta calcolata dal componente

PopoverPosition

type PopoverPosition =
  | 'top' | 'top-start' | 'top-end'
  | 'bottom' | 'bottom-start' | 'bottom-end'
  | 'left' | 'left-start' | 'left-end'
  | 'right' | 'right-start' | 'right-end'

Il posizionamento si corregge automaticamente se il popover uscirebbe dai bordi del viewport.

PopoverTrigger

type PopoverTrigger = 'click' | 'hover' | 'focus' | 'manual'

PopoverVariant

type PopoverVariant = 'default' | 'outlined' | 'filled'

PopoverSize

type PopoverSize = 'small' | 'medium' | 'large' | 'xlarge'
// larghezza massima: small 20rem | medium 24rem (default) | large 28rem | xlarge 36rem (dalla 1.22.0)

Pannello più largo

class e style passati al Popover cadono sul wrapper del trigger, non sul pannello: per allargare il pannello si usano size="xlarge" oppure panelStyle / panelClass.

Emits

EventoPayloadDescrizione
update:modelValuebooleanAggiornamento visibilità per v-model
show—Popover reso visibile
hide—Popover nascosto
beforeShow—Emesso prima dell'apertura
beforeHide—Emesso prima della chiusura

Slot

SlotScopeDescrizione
trigger—Elemento che attiva il popover (obbligatorio)
default—Contenuto principale del popover
header—Sostituzione completa dell'header
footer—Area footer del popover (visibile solo se lo slot è fornito)

Esempi

Trigger hover con delay

Popover con v-model (trigger manuale)

Popover con header e footer

Varianti visive

Posizioni con allineamento

Accessibilità

  • Il popover è renderizzato con role="tooltip"
  • Il posizionamento è calcolato tramite il composable usePopoverPosition che usa getBoundingClientRect() e tiene traccia dello scroll
  • Con trigger="click" e dismissable="true": click fuori chiude il popover
  • Con trigger="hover" e autoHide="true": spostare il mouse sopra il popover stesso non chiude (gestione hover su entrambi gli elementi)
  • La freccia (showArrow) è posizionata automaticamente in base alla direzione effettiva del popover

TypeScript

import type {
  PopoverProps,
  PopoverEmits,
  PopoverPosition,
  PopoverTrigger,
  PopoverVariant,
  PopoverSize,
} from '@pzeta/vue-components'

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.

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.