ConfirmPopup

1<script setup lang="ts">2import { Button, ConfirmPopup, useConfirm } from '@vitral/vue';3import { ref } from 'vue';4 5const confirm = useConfirm();6const status = ref('—');7 8function save(event: MouseEvent) {9    confirm.require({10        target: event.currentTarget as HTMLElement,11        message: 'Save your changes before leaving?',12        icon: 'info',13        accept: () => (status.value = 'Saved'),14        reject: () => (status.value = 'Discarded'),15        onHide: () => (status.value = 'Dismissed')16    });17}18 19function remove(event: MouseEvent) {20    confirm.require({21        target: event.currentTarget as HTMLElement,22        header: 'Delete record',23        message: 'This cannot be undone.',24        severity: 'danger',25        acceptLabel: 'Delete',26        rejectLabel: 'Keep',27        defaultFocus: 'reject',28        accept: () => (status.value = 'Deleted'),29        reject: () => (status.value = 'Kept')30    });31}32</script>33 34<template>35    <ConfirmPopup />36    <Button label="Save" icon="check" @click="save" />37    <Button label="Delete" icon="trash" severity="danger" variant="outlined" @click="remove" />38    <small style="color: var(--vt-text-muted-color)">Last answer: {{ status }}</small>39</template>