jv3-alert/dist/jalert.js

easy alert from assign by route by cdnagroup

import { createApp } from 'vue';
import DialogField from '@/components/DialogField.vue';
export default class JAlert {
    constructor(config) {
        Object.assign(this, {
            ...config,
        });
    }
    dialog(message, options = {}, template = `
        <DialogField v-bind="options"></DialogField>
      `) {
        return new Promise((resolve, reject) => {
            const container = document.createElement('div');
            document.body.appendChild(container);
            if (typeof message !== 'string') {
                message = JSON.stringify(message, null, 2);
            }
            // 2. Create the Vue app instance
            const app = createApp({
                components: { DialogField },
                template: template,
                data() {
                    return {
                        options: {
                            message: message,
                            onClose: this.handleDialogClose,
                            ...options, // Merge with any additional options
                        },
                    };
                },
                methods: {
                    handleDialogClose(val) {
                        // 3. Destroy the component when the dialog is closed
                        app.unmount();
                        container.remove();
                        resolve(val);
                    },
                },
            });
            // 4. Mount the component to the container
            app.mount(container);
        });
    }
    alert(message, options = {}) {
        return this.dialog(message, { color: 'info', title: 'Alert', ...options });
    }
    error(message, options = {}) {
        return this.dialog(message, {
            color: 'error',
            title: 'Error',
            ...options,
        });
    }
    info(message, options = {}) {
        return this.dialog(message, {
            color: 'info',
            title: 'Info',
            ...options,
        });
    }
    confirm(message, callback, options = {}) {
        return new Promise((resolve, reject) => {
            const container = document.createElement('div');
            document.body.appendChild(container);
            if (typeof message !== 'string') {
                message = JSON.stringify(message, null, 2);
            }
            // 2. Create the Vue app instance
            const app = createApp({
                components: { DialogField },
                template: `
          <DialogField v-bind="options"></DialogField>
        `,
                data() {
                    return {
                        options: {
                            message: message,
                            color: 'warning',
                            type: 'confirm',
                            title: 'Confirm',
                            onClose: this.handleDialogClose,
                            ...options, // Merge with any additional options
                        },
                    };
                },
                methods: {
                    handleDialogClose(val) {
                        // 3. Destroy the component when the dialog is closed
                        callback(val);
                        app.unmount();
                        container.remove();
                        resolve();
                    },
                },
            });
            app.mount(container);
        });
    }
}