Vue 3 Dialog Box

A simple and customisable dialog box plugin for vue 3

Installation

npm install vue3-dialog

Add plugin

import { createApp } from 'vue';
import App from './App.vue';
import Dialog from 'vue3-dialog';

createApp(App)
.use(Dialog, {
    //...options (not required)
})
.mount('#app');

Available options

An object with these attributes can be passed to the plugin on install in your main.js file or when calling the plugin methods in a component

| Attribute | Type | Default | Description | | :--- | :---: | :---: | :--- | | message | String | Hello World! | The message prompted to the user | | buttons | String Array | ['cancel', 'confirm']| List of buttons for the user to use as a reply | | presets | Object | {} | Preset dialog boxes with their own buttons and message | | preset | String | -- | The preset to use, defined in the presets option | | callbacks | Object | {} | Set each key as a button name and the value as a function. The function will be run when the corresponding button is clicked | | wrapperClass | String | __dialog-wrapper | Class for wrapper div that darkens the screen when the dialog box is shown | | boxClass | String | __dialog-box | Class for main dialog box div | | messageClass | String | __dialog-message | Class for message div | | buttonsClass | String | __dialog-buttons | Class for div that holds the buttons | | css | Object | { default: true, wrapper: true, darken: 0.6 } | This option is only read when first installed css.default determines if default styles should be applied. wrapper.default determines if the wrapper class styles should be applied. css.darken determines what percentage to darken behind the dialog box |

Options set in main.js are saved as a global property that can be editted later

This object can be accessed by injection:

import { inject } from 'vue';

const options = inject('$dialogOptions');

options.presets.delete = {
    message: 'Delete?',
    buttons: ['cancel', 'delete']
}

Directly in the template:

<button @click="$dialogOptions.message = 'Changed!'">Click Me!</button>

Or directly in the script with the options API:

export default {
    mounted() {
        this.$dialogOptions.presets.delete = {
            message: 'Delete?',
            buttons: ['cancel', 'delete']
        }
    }
}

Buttons

The buttons options can optionally be passed as an object in this format:

{
    buttons: {
        cancel: {
            text: 'Cancel',
            class: '__dialog-button-cancel __dialog-button'
        },
        confirm: {
            text: 'Confirm',
            class: '__dialog-button-confirm __dialog-button'
        }
    }
}

The text attribute is the text that will appear in the button The class attribute is a class name that will be applied to the button The values shown are are the default values when none is provided

This object will create the same results as the object above:

{
    buttons: ['cancel', 'confirm']
}

Callbacks

Any options passed in that is not listed above will be treated as a callback It will be added to the callbacks option if its value is a function with no arguments

For example,

{
    buttons: ['delete', 'cancel'],
    callbacks: {
        delete: () => {
            //some function
        }
    }
}

Is the same as :

{
    buttons: ['delete', 'cancel'],
    delete: () => {
        //some function
    }
}

Usage

In your main.js you should set the default or fallback options for the dialog box along with your presets In your components you then only need to specify the preset name along with the callback functions

For example:

main.js:

app.use(Dialog, {
    message: 'Are you sure?',
    buttons: {
        yes: {
            text: 'Yes',
            class: 'my-yes-button-class'
        },
        no: {}
    },
    presets: {
        remove: {
            message: 'Do you want to delete this?',
            buttons: ['cancel', 'remove']
        }
    },
    boxClass: 'my-box-class',
    css: {
        darken: 0.9
    }
})

The default 'no' button's details will automatically be filled in as:

{
    no: {
        text: 'No',
        class: '__dialog-button-no __dialog-button'
    }
}

'cancel' and 'remove' buttons are filled in similarly

In a component file:

<button v-dialog="{ yes: myYesFunction }">Button One</button>
<button v-dialog:remove="{ cancel: myCancelFunction, remove: myRemoveFunction }">Button Two</button>

Directive

The v-dialog directive can be applied to an element to replace @click

<button v-dialog="{
    message: 'Are you sure?'
    buttons: ['yes', 'no'],
    yes: () => {/*some function*/},
    no: () => {/*some function*/}
}">
Click Me!
</button>

When this button is clicked a dialog box will appear with the message Are you sure? and a yes and no button. The dialog box will disapear after these are pressed

When using the directive the preset name can be passed in as the directive argument This:

<button v-dialog:confirm>Click Me!</button>

Is equivalent to:

<button v-dialog="{ preset: 'confirm' }">Click Me!</button>

Provide / Inject

The $dialog method is provided for use with the composition API

import { inject } from 'vue';

const dialog = inject('$dialog');

dialog({
    message: 'Are you sure?',
    buttons: ['yes', 'no'],
    yes: () => {/*some function*/},
    no: () => {/*some function*/}
});

Global Property

The $dialog method is available in the template to activate a dialog box

<button @click="$dialog({
    message: 'Are you sure?',
    buttons: ['yes', 'no'],
    yes: () => {/*some function*/},
    no: () => {/*some function*/}
})">
Click Me!
</button>

Or in the script when using the options API

export default {
    methods: {
        activateDialog() {
            this.$dialog({
                message: 'Are you sure?',
                buttons: ['yes', 'no'],
                yes: () => {/*some function*/},
                no: () => {/*some function*/}
            })
        }
    }
}