VueDialog

Dialog windows for Vue (like confirm or alert), based on Vuedals.

These dialogs will return a Promise when called that will resolve when confirmed and rejects when denied

It provides 3 types of dialogs:

• Alert
• Confirm
• Hard Confirm

More info about the types, below

DEMO

Live demo on jsFiddle: https://jsfiddle.net/041r81r0/

Example

import VueDialog from 'vuedialog';
import { Bus, Component as  Vuedals } from 'vuedals';
 
VueDialog.setBus(Bus);
 
var vm = new Vue({
    el: '#app',
    
    components: {
        VueDialog,
        Vuedals
    },
 
    methods: {
        continue() {
            VueDialog.confirm('Are you sure of this?')
                .then(_ => alert('You are sure'))
                .catch(_ => alert('Phew..'));
        }
    },
    
    template: `<div>
        To continue, <span @click="continue()">click here</span>
 
        <vuedals></vuedals>
    </div>`
});

Dependencies

This plugin depends on Vuedals so you need to have Vuedals as a component dependency if you don't:

$ npm install vuedals --save

import { Component as Vuedals } from 'vuedals';

Vue.component('my-component', {
    components: {
        Vuedals
    },

    template: `
        <div>
            <vuedals></vuedals>
        </div>
    `
});

For more info on how to setup Vuedals, check the repo: https://github.com/javisperez/vuedals/

Install

Be sure that you have Vuedals install, as is a dependency

Install with npm:

$ npm install vuedialog --save

After that you need to pass the Vuedal's Event Bus instance to trigger the open and close methods, example:

import { Bus } from 'vuedals';
import VueDialog from 'vue-dialog';

VueDialog.setBus(Bus);

Usage

import { VueDialog } from 'vuedialog';

Vue.component('my-component', {
    methods: {
        myMethod() {
            VueDialog.alert('Watch me!', 'Ok, done!');
        }
    }
});

Dialog types

This plugin has 3 methods you can call:

alert

VueDialog.alert(message[, buttonLabel])

Will open an alert window with the given message.

arguments

confirm

VueDialog.confirm(message[, options])

Will open a confirm window with the message and the given options.

arguments

options

hardConfirm

VueDialog.hardConfirm(message[, confirmationMessage[, options]])

Opens a "hard confirm" window dialog, this is a confirm in which the user has to type a given confirmation message and press the "im sure" button for a given amount of seconds. This is intended for really sensitive actions.

arguments

options