WeConfirmDialog
A versatile confirmation dialog component that provides a Promise-based API for user confirmations. It supports different confirmation types like standard confirmations, deletion confirmations, and fully customizable dialogs.
Usage
vue
<template>
<!-- Reference the dialog component -->
<WeConfirmDialog ref="confirmDialog" />
<!-- Trigger buttons -->
<v-btn @click="confirmAction">Confirm Action</v-btn>
<v-btn @click="confirmDelete">Delete Item</v-btn>
</template>
<script setup>
import { ref } from 'vue'
const confirmDialog = ref(null)
async function confirmAction() {
// Returns true if user confirms, false otherwise
if (await confirmDialog.value.confirm({
title: 'Confirm Publication',
text: 'Are you sure you want to publish this article?'
})) {
// User confirmed
console.log('Action confirmed')
} else {
// User cancelled
console.log('Action cancelled')
}
}
async function confirmDelete() {
// Using the built-in delete type
if (await confirmDialog.value.confirm({
type: 'delete',
text: 'This item will be permanently removed.'
})) {
// Handle deletion
}
}
</script>Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | String | Varies by type | Dialog title |
text | String | Varies by type | Dialog message text |
confirmButtonText | String | Varies by type | Text for confirm button |
cancelButtonText | String | Varies by type | Text for cancel button |
type | String | 'confirm' | Dialog type: 'confirm', 'delete', or 'custom' |
icon | String | Varies by type | Optional icon to display |
color | String | Varies by type | Color of the confirm button |
maxWidth | Number | String | 400 | Maximum width of the dialog |
Methods
| Method | Parameters | Return | Description |
|---|---|---|---|
confirm | overrideValues?: Object | Promise<boolean> | Open the dialog with optional overrides. Returns a promise that resolves to true (confirmed) or false (cancelled) |
Slots
| Name | Props | Description |
|---|---|---|
default | { resolve } | Default slot for custom content |
content | { resolve } | Slot for complete dialog content override |
actions | { resolve } | Slot for customizing dialog actions/buttons |
Dialog Types
Confirm Type (default)
The standard confirmation dialog with a neutral tone, typically used for confirming user actions.
Default values:
- Title: "Confirm"
- Icon:
mdi-check-circle - Color:
primary
Delete Type
Specialized for delete operations with appropriate styling and warning text.
Default values:
- Title: "Delete Item"
- Icon:
mdi-trash-can - Color:
error
Custom Type
Minimal defaults, allowing full customization of all elements.
Examples
Basic Confirmation
vue
<script setup>
import { ref } from 'vue'
const confirmDialog = ref(null)
async function openConfirm() {
const confirm = await confirmDialog.value.confirm()
if (confirm) {
// User confirmed
alert('Confirmed!')
} else {
// User cancelled
alert('Not confirmed')
}
}
</script>
<template>
<WeConfirmDialog ref="confirmDialog" />
<v-btn @click="openConfirm">Open Confirm Dialog</v-btn>
</template>Delete Confirmation
vue
<script setup>
import { ref } from 'vue'
const confirmDeleteDialog = ref(null)
async function openConfirmDelete() {
const confirm = await confirmDeleteDialog.value.confirm()
if (confirm) {
// User confirmed deletion
alert('Deletion confirmed!')
} else {
// User cancelled deletion
alert('Deletion cancelled')
}
}
</script>
<template>
<WeConfirmDialog
ref="confirmDeleteDialog"
type="delete"
/>
<v-btn
color="error"
@click="openConfirmDelete"
>
Delete Item
</v-btn>
</template>Custom Dialog with Custom Content and Actions
vue
<script setup>
import { ref } from 'vue'
const confirmCustomDialog = ref(null)
async function openConfirmCustom() {
const confirm = await confirmCustomDialog.value.confirm()
if (confirm) {
// User confirmed
alert('Custom action confirmed!')
} else {
// User cancelled
alert('Custom action cancelled')
}
}
</script>
<template>
<WeConfirmDialog
ref="confirmCustomDialog"
type="custom"
>
<v-card-text>
<h2>Custom Confirmation</h2>
<p>This is a completely custom confirmation dialog with custom actions.</p>
</v-card-text>
<template #actions="{ resolve }">
<v-btn
color="purple"
@click="resolve(true)"
>
Yes, Proceed
</v-btn>
<v-btn
color="pink"
@click="resolve(false)"
>
No, Cancel
</v-btn>
</template>
</WeConfirmDialog>
<v-btn @click="openConfirmCustom">
Open Custom Dialog
</v-btn>
</template>Basic Confirmation
vue
<script setup>
import { ref } from 'vue'
const confirmDialog = ref(null)
async function saveChanges() {
if (await confirmDialog.value.confirm({
title: 'Save Changes',
text: 'Do you want to save your changes?'
})) {
// Save changes
}
}
</script>
<template>
<WeConfirmDialog ref="confirmDialog" />
<v-btn @click="saveChanges">Save</v-btn>
</template>Delete Confirmation
vue
<script setup>
import { ref } from 'vue'
const confirmDialog = ref(null)
const items = ref([
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' }
])
async function deleteItem(item) {
if (await confirmDialog.value.confirm({
type: 'delete',
title: `Delete ${item.name}`,
text: 'This action cannot be undone.'
})) {
// Remove item from the list
items.value = items.value.filter(i => i.id !== item.id)
}
}
</script>
<template>
<WeConfirmDialog ref="confirmDialog" />
<v-list>
<v-list-item v-for="item in items" :key="item.id">
{{ item.name }}
<v-btn icon @click="deleteItem(item)">
<v-icon>mdi-delete</v-icon>
</v-btn>
</v-list-item>
</v-list>
</template>Custom Dialog with Slots
vue
<script setup>
import { ref } from 'vue'
const confirmDialog = ref(null)
async function showCustomConfirm() {
return confirmDialog.value.confirm({ type: 'custom' })
}
</script>
<template>
<WeConfirmDialog ref="confirmDialog" max-width="500">
<template #content="{ resolve }">
<v-card>
<v-card-title class="bg-warning">
<v-icon left>mdi-alert</v-icon>
Warning: Database Operation
</v-card-title>
<v-card-text class="pt-4">
<p>You are about to perform a potentially destructive operation.</p>
<p>This will affect all users currently in the system.</p>
<v-checkbox label="I understand the risks involved" v-model="understood" />
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn text @click="resolve(false)">Cancel</v-btn>
<v-btn
color="warning"
:disabled="!understood"
@click="resolve(true)"
>
Proceed Anyway
</v-btn>
</v-card-actions>
</v-card>
</template>
</WeConfirmDialog>
<v-btn @click="showCustomConfirm">Show Custom Dialog</v-btn>
</template>Basic Confirmation
vue
<script setup>
import { ref } from 'vue'
const confirmDialog = ref(null)
async function saveChanges() {
if (await confirmDialog.value.confirm({
title: 'Save Changes',
text: 'Do you want to save your changes?'
})) {
// Save changes
}
}
</script>
<template>
<WeConfirmDialog ref="confirmDialog" />
<v-btn @click="saveChanges">Save</v-btn>
</template>Delete Confirmation
vue
<script setup>
import { ref } from 'vue'
const confirmDialog = ref(null)
const items = ref([
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' }
])
async function deleteItem(item) {
if (await confirmDialog.value.confirm({
type: 'delete',
title: `Delete ${item.name}`,
text: 'This action cannot be undone.'
})) {
// Remove item from the list
items.value = items.value.filter(i => i.id !== item.id)
}
}
</script>
<template>
<WeConfirmDialog ref="confirmDialog" />
<v-list>
<v-list-item v-for="item in items" :key="item.id">
{{ item.name }}
<v-btn icon @click="deleteItem(item)">
<v-icon>mdi-delete</v-icon>
</v-btn>
</v-list-item>
</v-list>
</template>Custom Dialog with Slots
vue
<script setup>
import { ref } from 'vue'
const confirmDialog = ref(null)
async function showCustomConfirm() {
return confirmDialog.value.confirm({ type: 'custom' })
}
</script>
<template>
<WeConfirmDialog ref="confirmDialog" max-width="500">
<template #content="{ resolve }">
<v-card>
<v-card-title class="bg-warning">
<v-icon left>mdi-alert</v-icon>
Warning: Database Operation
</v-card-title>
<v-card-text class="pt-4">
<p>You are about to perform a potentially destructive operation.</p>
<p>This will affect all users currently in the system.</p>
<v-checkbox label="I understand the risks involved" v-model="understood" />
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn text @click="resolve(false)">Cancel</v-btn>
<v-btn
color="warning"
:disabled="!understood"
@click="resolve(true)"
>
Proceed Anyway
</v-btn>
</v-card-actions>
</v-card>
</template>
</WeConfirmDialog>
<v-btn @click="showCustomConfirm">Show Custom Dialog</v-btn>
</template>