Overlays

ConfirmDialog

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

Import

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

Pattern service con useConfirm()

ConfirmDialog non si usa con v-model. Il componente va registrato una volta nel layout principale dell'app; le conferme vengono poi richieste da qualsiasi componente figlio tramite il composable useConfirm().

1. Registrazione nel layout

<!-- App.vue o layout principale -->
<template>
  <RouterView />
  <ConfirmDialog />
</template>

2. Utilizzo nei componenti

Props

Prop	Tipo	Default	Descrizione
`group`	`string`	`'default'`	Gruppo per distinguere dialogs multipli nella stessa app
`width`	`string`	`'450px'`	Larghezza del dialog
`draggable`	`boolean`	`false`	Abilita il trascinamento del dialog
`position`	`ConfirmationOptions['position']`	`'center'`	Posizione del dialog sullo schermo
`transition`	`string`	`'hs-confirm'`	Nome della transizione CSS

ConfirmationOptions

Oggetto passato a confirm.require(options):

Opzione	Tipo	Default	Descrizione
`message`	`string`	—	Messaggio principale da mostrare
`header`	`string`	`t('overlay.confirmHeader')`	Titolo del dialog
`icon`	`string`	icona da ConfigPlugin	Classe CSS icona (es. `pi pi-exclamation-triangle`)
`severity`	`Severity`	`'warn'`	Severity per lo stile visivo del dialog
`group`	`string`	—	Gruppo target (deve corrispondere alla prop `group` del componente)
`acceptLabel`	`string`	`t('overlay.confirmAccept')`	Testo pulsante accetta
`rejectLabel`	`string`	`t('overlay.confirmReject')`	Testo pulsante rifiuta
`acceptIcon`	`string`	—	Classe CSS icona pulsante accetta
`rejectIcon`	`string`	—	Classe CSS icona pulsante rifiuta
`acceptSeverity`	`Severity`	`'primary'`	Severity pulsante accetta
`rejectSeverity`	`Severity`	`'secondary'`	Severity pulsante rifiuta
`acceptClass`	`string`	—	Classe CSS aggiuntiva pulsante accetta
`rejectClass`	`string`	—	Classe CSS aggiuntiva pulsante rifiuta
`accept`	`() => void`	—	Callback eseguito quando l'utente accetta
`reject`	`() => void`	—	Callback eseguito quando l'utente rifiuta
`dismissableMask`	`boolean`	`false`	Chiude al click fuori dal dialog. Dalla 1.9.0 il default è `false`
`closeOnEscape`	`boolean`	`true`	Chiude alla pressione di Escape
`blockScroll`	`boolean`	`true`	Blocca lo scroll del body
`position`	`'center' \| 'top' \| 'bottom' \| 'left' \| 'right' \| 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'`	`'center'`	Posizione del dialog

Emits

Evento	Payload	Descrizione
`show`	—	Dialog reso visibile
`hide`	—	Dialog nascosto
`accept`	—	Utente ha accettato
`reject`	—	Utente ha rifiutato

Slot

Slot	Scope	Descrizione
`message`	`{ message: ConfirmationOptions }`	Contenuto messaggio personalizzato
`icon`	`{ message: ConfirmationOptions }`	Icona personalizzata
`accepticon`	—	Icona pulsante accetta
`rejecticon`	—	Icona pulsante rifiuta
`footer`	`{ message, acceptCallback, rejectCallback }`	Footer personalizzato con i pulsanti
`container`	`{ message, acceptCallback, rejectCallback, closeCallback }`	Sostituzione completa del contenuto del dialog (headless mode)

Esempi

Dialogs multipli con gruppi

Nota: la funzionalità multi-gruppo richiede il fix #20. L'esempio seguente usa un singolo dialog come workaround.

Personalizzazione footer

Chiusura programmatica

const confirm = useConfirm()

// Apre il dialog
confirm.require({ message: 'Confermare?' })

// Chiude il dialog senza eseguire i callback
confirm.close()

Chiusura dal click fuori

Dalla versione 1.9.0 il click sulla mask non rifiuta la conferma: rispondere al posto dell'utente su una domanda che spesso riguarda un'azione distruttiva è un effetto indesiderato. Il pannello pulsa brevemente per segnalare che serve una risposta esplicita, dai pulsanti o da Escape.

Per ripristinare il comportamento precedente su una singola richiesta:

confirm.require({
  message: 'Vuoi continuare?',
  dismissableMask: true,   // il click fuori equivale a "rifiuta"
  accept: () => salva(),
})

Accessibilità

Renderizzato con role="alertdialog" e aria-modal="true"
aria-labelledby e aria-describedby collegati automaticamente agli ID interni
Focus sul dialog all'apertura
Chiusura con Escape (configurabile per singola richiesta tramite closeOnEscape)
Usa <Teleport to="body"> per corretto stacking context

TypeScript

import type {
  ConfirmDialogProps,
  ConfirmDialogEmits,
  ConfirmationOptions,
  ConfirmService,
} from '@pzeta/vue-components'

Layout

Componenti per strutturare e organizzare il contenuto nelle pagine. Includono contenitori, separatori, navigazione e aree scrollabili.

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.