Modal Usage

Confirmation modals are used when you want the user to confirm an action before continuing.
Common examples include deleting data, logging out, or performing irreversible operations.

With @erag/vue-toastification, modals are designed to be:

• ✅ Promise-based (async / await)
• ✅ Very easy to read and use
• ✅ No callbacks
• ✅ Fully typed with TypeScript
• ✅ Clean and predictable flow

---

💬 Basic Modal Example

Import the useConfirmation composable and call confirm().

import { useConfirmation } from '@erag/vue-toastification';

const modal = useConfirmation();

const ok = await modal.confirm({
  title: 'Delete?',
  message: 'Are you sure?',
  type: 'danger'
});

• If the user confirms, ok will be true
• If the user cancels or closes, ok will be false

---

🗑️ Real-World Example: Delete Action

This is the most common use case for confirmation modals.

<script setup lang="ts">
import { useConfirmation, useToast } from '@erag/vue-toastification';

const modal = useConfirmation();
const toast = useToast();

const handleDelete = async () => {
    const isConfirmed = await modal.confirm({
        title: 'Delete Account?',
        message: 'Are you sure? This action cannot be undone.',
        confirmText: 'Yes, Delete',
        cancelText: 'No, Keep it',
        type: 'danger'
    });

    if (isConfirmed) {
        // Perform delete logic here
        toast.success('Account deleted successfully');
    } else {
        toast.info('Action cancelled');
    }
};
</script>

---

🧠 What Happens Internally?

const isConfirmed = await modal.confirm({ ... });

Step-by-Step Flow

1. handleDelete() is called

2. The confirmation modal opens

3. Code execution pauses at await

4. User takes an action:

   • Confirm → resolves true
   • Cancel / Close → resolves false

5. Code continues based on the result

This makes your logic linear, readable, and safe.

---

⚠️ Modal Types

You can control the intent and color of the confirm button using type.

🔴 danger — Destructive Actions

type: 'danger'

Use for:

• Delete account
• Remove data
• Permanent actions

---

🟠 warning — Risky Actions

type: 'warning'

Use for:

• Logout
• Discard changes
• Navigation with unsaved data

---

🔵 info — Neutral Confirmations (Default)

type: 'info'

Use for:

• General confirmations
• Informational prompts

---

🚪 Example: Logout Confirmation

const logout = async () => {
    const ok = await modal.confirm({
        title: 'Logout',
        message: 'You have unsaved changes. Do you really want to leave?',
        confirmText: 'Logout',
        type: 'warning'
    });

    if (ok) {
        // Perform logout
    }
};

---

🎨 Custom Icon (Override Default)

You can pass a custom SVG icon. When icon is provided, default icons are not used.

await modal.confirm({
  title: 'Custom Icon',
  message: 'This modal uses a custom icon.',
  icon: `<svg viewBox="0 0 24 24">...</svg>`
});

---

🧾 Modal Options Reference

Option	Type	Description
title	string	Modal heading (required)
message	string	Modal message text
confirmText	string	Confirm button label
cancelText	string	Cancel button label
type	'danger' | 'warning' | 'info'	Button style & intent
icon	string	Custom icon (overrides default icons)

---