Overlays

ConfirmPopup

Popup di conferma posizionato vicino all'elemento trigger. Gestito tramite il composable `useConfirmPopup()`, si ancora dinamicamente all'elemento HTML target e si riposiziona automaticamente rispetto ai bordi del viewport.

Import

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

Pattern service con useConfirmPopup()

ConfirmPopup non si usa con v-model. Il componente va registrato una volta nel layout o nella pagina; il popup viene poi aperto programmaticamente tramite useConfirmPopup(), passando l'elemento HTML target come punto di ancoraggio.

1. Registrazione nel template

<!-- App.vue o nel componente che contiene i trigger -->
<template>
  <ConfirmPopup />
  <!-- resto del contenuto -->
</template>

2. Utilizzo nei componenti

Props

Prop	Tipo	Default	Descrizione
`group`	`string \| null`	`null`	Gruppo per distinguere popup multipli. Deve corrispondere al campo `group` nelle opzioni

ConfirmPopupOptions

Oggetto passato a require(options):

Opzione	Tipo	Default	Descrizione
`target`	`HTMLElement \| null`	—	Elemento HTML a cui ancorare il popup (obbligatorio per il posizionamento)
`message`	`string \| null`	—	Messaggio di conferma da mostrare
`header`	`string \| null`	—	Titolo del popup
`icon`	`string \| null`	icona da ConfigPlugin	Classe CSS icona (es. `pi pi-exclamation-triangle`)
`group`	`string \| null`	—	Gruppo target (deve corrispondere alla prop `group` del componente)
`position`	`ConfirmPopupPosition`	`'bottom'`	Posizione preferita del popup rispetto al target
`acceptLabel`	`string \| null`	`t('overlay.confirmAccept')`	Testo pulsante conferma
`rejectLabel`	`string \| null`	`t('overlay.confirmReject')`	Testo pulsante rifiuto
`acceptIcon`	`string \| null`	—	Classe CSS icona pulsante conferma
`rejectIcon`	`string \| null`	—	Classe CSS icona pulsante rifiuto
`acceptClass`	`string \| null`	—	Classe CSS aggiuntiva pulsante conferma
`rejectClass`	`string \| null`	—	Classe CSS aggiuntiva pulsante rifiuto
`defaultFocus`	`'accept' \| 'reject'`	`'accept'`	Elemento che riceve il focus all'apertura
`blockScroll`	`boolean`	`false`	Blocca lo scroll del body quando aperto
`accept`	`() => void`	—	Callback eseguito quando l'utente conferma
`reject`	`() => void`	—	Callback eseguito quando l'utente rifiuta
`onShow`	`() => void`	—	Callback eseguito all'apertura del popup
`onHide`	`() => void`	—	Callback eseguito alla chiusura del popup

ConfirmPopupPosition

type ConfirmPopupPosition =
  | 'left' | 'right' | 'top' | 'bottom' | 'center'
  | 'topleft' | 'topright' | 'bottomleft' | 'bottomright'

Il componente aggiusta automaticamente la posizione se il popup uscirebbe dai bordi del viewport.

Emits

Evento	Payload	Descrizione
`show`	—	Popup reso visibile
`hide`	—	Popup nascosto

Slot

Slot	Scope	Descrizione
`message`	`{ message: ConfirmPopupOptions }`	Contenuto messaggio personalizzato
`icon`	`{ class: string }`	Icona personalizzata
`accepticon`	—	Icona pulsante conferma
`rejecticon`	—	Icona pulsante rifiuto
`container`	`{ message, acceptCallback, rejectCallback }`	Sostituzione completa del contenuto (headless mode)

Esempi

Chiusura programmatica

const { require, close } = useConfirmPopup()

// Chiude il popup aperto senza eseguire i callback
close()

Differenza con ConfirmDialog

	ConfirmDialog	ConfirmPopup
Posizione	Centrato / overlay modale	Ancorato all'elemento trigger
Comportamento	Blocca l'intera UI con overlay	Non-bloccante, più contestuale
Uso consigliato	Azioni critiche irreversibili	Conferme rapide in-context

Accessibilità

Renderizzato con role="alertdialog" e aria-modal="true"
Il focus viene spostato automaticamente al pulsante accept o reject in base a defaultFocus
Chiusura con Escape (esegue il callback reject)
Click fuori dal popup chiude e chiama reject
Usa <Teleport to="body"> con posizionamento assoluto calcolato via getBoundingClientRect()

TypeScript

import type {
  ConfirmPopupProps,
  ConfirmPopupEmits,
  ConfirmPopupOptions,
  ConfirmPopupPosition,
  UseConfirmPopup,
} from '@pzeta/vue-components'

ConfirmDialog

Dialog di conferma modale gestito tramite il composable `useConfirm()`. Si posiziona globalmente nell'app e viene attivato programmaticamente, senza v-model.

Dialog

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