Vitral 0.2
Overlay

ConfirmPopup

A confirmation anchored to the element it is about, opened with useConfirm and holding focus until answered.

WAI-ARIA tested

Import

main.ts
import { ConfirmPopup } from '@vitral/vue';

Basic

Last answer: —
<script setup lang="ts">import { Button, ConfirmPopup, useConfirm } from '@vitral/vue';import { ref } from 'vue'; const confirm = useConfirm();const status = ref('—'); function save(event: MouseEvent) {    confirm.require({        target: event.currentTarget as HTMLElement,        message: 'Save your changes before leaving?',        icon: 'info',        accept: () => (status.value = 'Saved'),        reject: () => (status.value = 'Discarded'),        onHide: () => (status.value = 'Dismissed')    });} function remove(event: MouseEvent) {    confirm.require({        target: event.currentTarget as HTMLElement,        header: 'Delete record',        message: 'This cannot be undone.',        severity: 'danger',        acceptLabel: 'Delete',        rejectLabel: 'Keep',        defaultFocus: 'reject',        accept: () => (status.value = 'Deleted'),        reject: () => (status.value = 'Kept')    });}</script> <template>    <ConfirmPopup />    <Button label="Save" icon="check" @click="save" />    <Button label="Delete" icon="trash" severity="danger" variant="outlined" @click="remove" />    <small style="color: var(--vt-text-muted-color)">Last answer: {{ status }}</small></template>

API

Read from packages/vue/src/components/ConfirmPopup/types.ts, so it says what the component actually accepts.

Props

NameTypeDescription
groupstringAnswers only the `useConfirm().require()` calls sent with the same `group` and a `target`.
placementOverlayPlacementWhere it opens relative to the target. Defaults to `'bottom'`.

Plus pt, dt and unstyled from BaseProps, see pass-through and unstyled mode.

Slots

NameSlot propsDescription
message(props: { message: ConfirmOptions })Replaces the message; it still describes the popup.
icon(props: { message: ConfirmOptions })—