Services

useConfirmPopup

Composable per popup di conferma contestuale ancorato all'elemento trigger.

Firma TypeScript

export const useConfirmPopup = (): UseConfirmPopup

export interface UseConfirmPopup {
  require: (options: ConfirmPopupOptions) => void;
  close: () => void;
}

Parametri

Nessun parametro. Il composable tenta prima inject(ConfirmPopupServiceKey), poi fallback al servizio globale registrato da <ConfirmPopup />.

Valore di Ritorno

Proprietà	Tipo	Descrizione
`require`	`(options: ConfirmPopupOptions) => void`	Mostra il popup di conferma ancorato all'elemento `target`
`close`	`() => void`	Chiude il popup attualmente aperto

ConfirmPopupOptions (principali campi)

Campo	Tipo	Descrizione
`target`	`HTMLElement`	Elemento a cui ancorare il popup (solitamente `event.currentTarget`)
`message`	`string`	Testo del messaggio
`header`	`string`	Titolo opzionale
`icon`	`string`	Classe icona opzionale
`severity`	`string`	Severity visiva
`acceptLabel`	`string`	Testo pulsante conferma
`rejectLabel`	`string`	Testo pulsante annulla
`accept`	`() => void`	Callback alla conferma
`reject`	`() => void`	Callback all'annullamento

Esempio

import { useConfirmPopup } from '@pzeta/vue-components'

const { require: confirmPopup } = useConfirmPopup()

// Handler per pulsante elimina in una riga di tabella
const onDeleteClick = (event: MouseEvent, item: Item) => {
  confirmPopup({
    target: event.currentTarget as HTMLElement,
    message: `Eliminare "${item.name}"?`,
    header: 'Conferma',
    severity: 'danger',
    acceptLabel: 'Elimina',
    rejectLabel: 'Annulla',
    accept: () => deleteItem(item.id),
    reject: () => console.log('Annullato')
  })
}

Prerequisiti

Il componente <ConfirmPopup /> deve essere montato nell'applicazione (tipicamente in App.vue).

<!-- App.vue -->
<template>
  <ConfirmPopup />
  <RouterView />
</template>

Note

A differenza di useConfirm (dialog modale), il popup appare ancorato al pulsante che ha scatenato l'azione — ideale per conferme inline in tabelle o liste.
Se il servizio non è disponibile, emette un console.warn invece di lanciare errore.
Il target nell'evento MouseEvent va castato a HTMLElement (event.currentTarget as HTMLElement).

useConfirm

Composable per dialog di conferma modale tramite ConfirmDialog.

useThemeColors

Composable per modificare dinamicamente i colori del tema a runtime tramite CSS custom properties.