ConfirmDialog

1<script setup lang="ts">2import { Button, ConfirmDialog, Toast, useConfirm, useToast } from '@vitral/vue';3 4const confirm = useConfirm();5const toast = useToast();6 7function remove() {8    confirm.require({9        header: 'Delete “Quarterly report.xlsx”?',10        message: 'The file moves to the recycle bin for 30 days, then it is gone for good.',11        severity: 'danger',12        acceptLabel: 'Delete',13        rejectLabel: 'Cancel',14        defaultFocus: 'reject',15        accept: () => toast.add({ severity: 'success', summary: 'Deleted', detail: 'Quarterly report.xlsx', life: 3000 }),16        reject: () => toast.add({ severity: 'secondary', summary: 'Kept', detail: 'Nothing was deleted.', life: 3000 })17    });18}19 20function publish() {21    confirm.require({22        header: 'Publish changes?',23        message: 'Everyone with access will see the new version.',24        severity: 'info',25        acceptLabel: 'Publish',26        rejectLabel: 'Not now',27        accept: () => toast.add({ severity: 'info', summary: 'Published', life: 3000 })28    });29}30</script>31 32<template>33    <ConfirmDialog />34    <Toast />35    <Button label="Delete file" icon="trash" severity="danger" @click="remove" />36    <Button label="Publish" icon="upload" @click="publish" />37</template>

1<script setup lang="ts">2import { Button, ConfirmDialog, Toast, useConfirm, useToast } from '@vitral/vue';3 4const confirm = useConfirm();5const toast = useToast();6 7// A group of its own, so this dialog and its toasts answer only these calls8// when another <ConfirmDialog> or <Toast> is on the page.9function plain() {10    confirm.require({ group: 'leave', message: 'Leave without saving?', accept: () => toast.add({ group: 'leave', summary: 'Left the page', life: 2000 }) });11}12</script>13 14<template>15    <ConfirmDialog group="leave" />16    <Toast group="leave" />17    <Button label="Leave page" severity="secondary" @click="plain" />18</template>