Alert & Confirm Helpers

Pre-built alert and confirm dialogs built on top of the overlay system.

Import

import { showAlert, showConfirm, showConfirmDestroy, showWait, showMutableWait } from '@zyno-io/vue-foundation';

showAlert(message) / showAlert(title, message) / showAlert(options)

Shows an alert dialog with an OK button. Returns a Promise that resolves when dismissed.

await showAlert('Something happened');
await showAlert('Warning', 'Something happened');
await showAlert({
    title: 'Error',
    message: new Error('Connection failed'), // Error objects are auto-formatted
    classes: ['error-alert'],
    iconClass: 'icon-warning',
    isHtml: false
});

<template>
    <div data-testid="demo-alert">
        <button @click="handleAlert">Show Alert</button>
        <span v-if="result" class="result" style="margin-left: 12px; font-size: 13px; color: var(--vp-c-text-2)">{{ result }}</span>
    </div>
</template>

<script lang="ts" setup>
import { showAlert } from '@zyno-io/vue-foundation';
import { ref } from 'vue';

const result = ref('');

async function handleAlert() {
    await showAlert('Hello!', 'This is an alert dialog.');
    result.value = 'Alert dismissed';
}
</script>

showConfirm(message) / showConfirm(title, message) / showConfirm(options)

Shows a confirm dialog with Confirm/Cancel buttons. Returns true or false.

const ok = await showConfirm('Are you sure?');
const ok = await showConfirm('Delete Item', 'This cannot be undone.');

<template>
    <div data-testid="demo-confirm">
        <button @click="handleConfirm">Show Confirm</button>
        <span v-if="result" class="result" style="margin-left: 12px; font-size: 13px; color: var(--vp-c-text-2)">{{ result }}</span>
    </div>
</template>

<script lang="ts" setup>
import { showConfirm } from '@zyno-io/vue-foundation';
import { ref } from 'vue';

const result = ref('');

async function handleConfirm() {
    const ok = await showConfirm('Confirm Action', 'Do you want to proceed?');
    result.value = ok ? 'Confirmed' : 'Cancelled';
}
</script>

showConfirmDestroy(message) / showConfirmDestroy(title, message) / showConfirmDestroy(options)

Same as showConfirm but with destructive styling (red Confirm button).

const ok = await showConfirmDestroy('Delete this record permanently?');

<template>
    <div data-testid="demo-confirm-destroy">
        <button @click="handleConfirmDestroy">Show Confirm Destroy</button>
        <span v-if="result" class="result" style="margin-left: 12px; font-size: 13px; color: var(--vp-c-text-2)">{{ result }}</span>
    </div>
</template>

<script lang="ts" setup>
import { showConfirmDestroy } from '@zyno-io/vue-foundation';
import { ref } from 'vue';

const result = ref('');

async function handleConfirmDestroy() {
    const ok = await showConfirmDestroy('Destructive Action', 'This cannot be undone. Continue?');
    result.value = ok ? 'Destroyed' : 'Cancelled';
}
</script>

showWait(message) / showWait(title, message) / showWait(options)

Shows a non-dismissible wait overlay. Returns a dismiss function.

const dismiss = showWait('Processing...');
await longOperation();
dismiss();

<template>
    <div data-testid="demo-wait">
        <button @click="handleWait">Show Wait</button>
        <span v-if="result" class="result" style="margin-left: 12px; font-size: 13px; color: var(--vp-c-text-2)">{{ result }}</span>
    </div>
</template>

<script lang="ts" setup>
import { showWait } from '@zyno-io/vue-foundation';
import { ref } from 'vue';

const result = ref('');

async function handleWait() {
    const dismiss = showWait('Processing, please wait...');
    setTimeout(() => {
        dismiss();
        result.value = 'Wait dismissed after 2 seconds';
    }, 2000);
}
</script>

showMutableWait(message) / showMutableWait(title, message) / showMutableWait(options)

Shows a wait overlay whose message can be updated. Returns { update, dismiss }.

const wait = showMutableWait('Starting...');
wait.update('Step 1 of 3...');
wait.update('Step 2 of 3...');
wait.update('Finishing...');
wait.dismiss();

<template>
    <div data-testid="demo-mutable-wait">
        <button @click="handleMutableWait">Show Mutable Wait</button>
        <span v-if="result" class="result" style="margin-left: 12px; font-size: 13px; color: var(--vp-c-text-2)">{{ result }}</span>
    </div>
</template>

<script lang="ts" setup>
import { showMutableWait } from '@zyno-io/vue-foundation';
import { ref } from 'vue';

const result = ref('');

async function handleMutableWait() {
    const wait = showMutableWait('Starting...');
    result.value = 'Running mutable wait...';

    setTimeout(() => wait.update('Step 1 of 3...'), 800);
    setTimeout(() => wait.update('Step 2 of 3...'), 1600);
    setTimeout(() => wait.update('Step 3 of 3...'), 2400);
    setTimeout(() => {
        wait.dismiss();
        result.value = 'Mutable wait completed';
    }, 3200);
}
</script>

Stacked Overlays

Overlays can be sequenced by awaiting each call.

<template>
    <div data-testid="demo-stacking">
        <button @click="handleStacking">Show Stacked Overlays</button>
        <span v-if="result" class="result" style="margin-left: 12px; font-size: 13px; color: var(--vp-c-text-2)">{{ result }}</span>
    </div>
</template>

<script lang="ts" setup>
import { showAlert } from '@zyno-io/vue-foundation';
import { ref } from 'vue';

const result = ref('');

async function handleStacking() {
    await showAlert('First Overlay', 'Click OK to open a second overlay.');
    await showAlert('Second Overlay', 'This appeared after the first was closed.');
    result.value = 'Stacked overlays completed';
}
</script>