Vuejs Dialog Plugin

A lightweight, promise based alert, prompt and confirm dialog.

Demo

https://godofbrowser.github.io/vuejs-dialog/

Important updates in version v1.x.x

1. Dialog will always resolve with an object. (i.e callback for proceed always will receive an object)
2. For directives usage, the object returned in (1) above will include a node. The node is the element the directive was bound to (see issue #5
3. Styles will have to be included explicitly as they have been extracted into a separate file (see issue #28)
4. If loader is enabled globally, and a dialog is triggered via a directive without a callback, the loader is ignored for clicks on proceed
5. Custom class injection on parent node (see issue #25)
6. Ability to register custom views. This allows for custom logic, custom buttons, etc (see issue #13, #14, #33)
7. For installation via HTML script tag
   • The library has been namespaced as it has been split into two. The main library which is the plugin and the mixin which is useful in custom components
   • To this effect, the new way to install the plugin is slightly dufferent: window.Vue.use(VuejsDialog.main.default)
   • And the mixin can be added to components like so: mixins: [VuejsDialog.mixin.default, ...otherMixins]

Installation

HTML

1// Include vuejs
2<script type="text/javascript" src="./path/to/vue.min.js"></script>
3
4// Include vuejs-dialog plugin
5<link href="./path/to/vuejs-dialog.min.css" rel="stylesheet">
6<script type="text/javascript" src="./path/to/vuejs-dialog.min.js"></script>
7<script type="text/javascript" src="./path/to/vuejs-dialog-mixin.min.js"></script> // only needed in custom components
8
9<script>
10// Tell Vue to install the plugin.
11window.Vue.use(VuejsDialog.main.default)
12</script>

Package Manager

1// installation via npm
2npm i -S vuejs-dialog
3
4// or
5
6// installation via yarn
7yarn add vuejs-dialog

1// then
2
3// import into project
4import Vue from 'vue';
5import VuejsDialog from 'vuejs-dialog';
6import VuejsDialogMixin from 'vuejs-dialog/dist/vuejs-dialog-mixin.min.js'; // only needed in custom components
7
8// include the default style
9import 'vuejs-dialog/dist/vuejs-dialog.min.css';
10
11// Tell Vue to install the plugin.
12Vue.use(VuejsDialog);

Webpack External

1// If you're including via script tag and importing as Webpack external
2// Webpack config
3{
4    // ... other webpack config
5    externals: {
6        // .. other externals if any
7        'vuejs-dialog': 'VuejsDialog'
8    }
9}

1// then
2
3// import into project
4import Vue from 'vue';
5import VuejsDialog from 'vuejs-dialog';
6
7// Tell Vue to install the plugin.
8Vue.use(VuejsDialog.main.default);
9
10// mixin available at: VuejsDialog.mixin.default

Basic Usage inside a vuejs application

1// Anywhere in your Vuejs App.
2
3// Trigger an Alert dialog
4this.$dialog.alert('Request completed!').then(function(dialog) {
5  console.log('Closed');
6});
7
8// Trigger a confirmation dialog
9this.$dialog
10  .confirm('Please confirm to continue')
11  .then(function(dialog) {
12    console.log('Clicked on proceed');
13  })
14  .catch(function() {
15    console.log('Clicked on cancel');
16  });

Basic Usage outside a vuejs application

1// VuejsDialog Methods are also available on the global vue
2// This makes it possible to use the plugin inside a ReactJs application
3// or just any javascript application
4// Simply include vue, vuejs-dialog, ask vue to use the plugin and that's all:
5
6Vue.dialog.alert('Request completed!').then(function(dialog) {
7  console.log('Closed');
8});
9
10Vue.dialog
11  .confirm('Please confirm to continue')
12  .then(function(dialog) {
13    console.log('Clicked on proceed');
14  })
15  .catch(function() {
16    console.log('Clicked on cancel');
17  });

Return value on success

1// Whenever a user clicks on proceed,
2// the promise returned by the dialog call will be
3// resolved with a dialog object with the following shape:
4
5
6{
7    close: function | sometimes | A method that can be used to close the dialog if it's in a loading state
8    loading: function | sometimes | A method that can be used to stop the dialog loader
9    node: DOMElement | sometimes | A DOM element which the directive was bound to, when triggered via a directive
10    data: any | always | Data sent with the positive action. Useful in prompts or custom components where you have multiple proceed buttons
11}
12
13// Example:
14
15<button class="btn-danger"
16        v-confirm="{
17            loader: true,
18            ok: okCallback,
19            cancel: cancelcallback,
20            message: 'Some confirmation message'}"
21>
22
23okCallback: function (dialog) {
24		dialog.loading(false) // stop the loader (you won't be needing this)
25		dialog.close() // stops loader and close the dialog
26		dialog.node.className // === "btn-danger"
27		dialog.data // === null
28}

Prompt (collect data from user)

1this.$dialog
2  .prompt({
3    title: "Let's hear from you",
4    body: "What is the most important thing in life?",
5  }, {
6    promptHelp: 'Type in the box below and click "[+:okText]"'
7  })
8  .then(dialog => {
9    // Triggered when proceed button is clicked
10    // Show an alert with the user's input as the message
11    this.$dialog.alert(dialog.data || '[empty]')
12  })
13  .catch(() => {
14    // Triggered when dialog is dismissed by user
15
16    console.log('Prompt dismissed');
17  });

Usage with ajax - Loader enabled

1this.$dialog
2  .confirm("If you delete this record, it'll be gone forever.", {
3    loader: true // default: false - when set to true, the proceed button shows a loader when clicked.
4    // And a dialog object will be passed to the then() callback
5  })
6  .then(dialog => {
7    // Triggered when proceed button is clicked
8
9    // dialog.loading(false) // stops the proceed button's loader
10    // dialog.loading(true) // starts the proceed button's loader again
11    // dialog.close() // stops the loader and close the dialog
12
13    // do some stuff like ajax request.
14    setTimeout(() => {
15      console.log('Delete action completed ');
16      dialog.close();
17    }, 2500);
18  })
19  .catch(() => {
20    // Triggered when cancel button is clicked
21
22    console.log('Delete aborted');
23  });

Usage as a directive

If you don't pass a message, the global/default message would be used.

1<button type="submit" v-confirm="">submit</button>

1// Callbacks can be provided
2// Note: If "loader" is set to true, the makeAdmin callback will receive a "dialog" object
3// Which is useful for closing the dialog when transaction is complete.
4<button v-confirm="{ok: makeAdmin, cancel: doNothing, message: 'User will be given admin privileges. Make user an Admin?'}">Make Admin</button>

1methods: {
2    makeAdmin: function() {
3        // Do stuffs
4
5    },
6    doNothing: function() {
7        // Do nothing or some other stuffs
8    }
9}

A more practical use of ths v-confirm directive with multiple triggers - Solution 1

1// While looping through users
2<button v-for="user in users"
3        v-confirm="{
4            loader: true,
5            ok: dialog => makeAdmin(dialog, user),
6            cancel: doNothing,
7            message: 'User will be given admin privileges. Make user an Admin?'}"
8>
9Make Admin
10</button>

1methods: {
2    makeAdmin: function(dialog, user) {
3        // Make user admin from the backend
4        /* tellServerToMakeAdmin(user) */
5
6        // When completed, close the dialog
7        /* dialog.close() */
8
9    },
10    doNothing: function() {
11        // Do nothing or some other stuffs
12    }
13}

( new ) A more practical use of ths v-confirm directive with multiple triggers - Solution 2

1// While looping through users
2<button v-for="user in users"
3        :data-user="user"
4        v-confirm="{
5            loader: true,
6            ok: makeAdmin,
7            cancel: doNothing,
8            message: 'User will be given admin privileges. Make user an Admin?'}"
9>
10Make Admin
11</button>

1methods: {
2    makeAdmin: function(dialog) {
3        let button = dialog.node // node is only available if triggered via a directive
4        let user = button.dataset.user
5
6        // Make user admin from the backend
7        /* tellServerToMakeAdmin(user) */
8
9        // When completed, close the dialog
10        /* dialog.close() */
11
12    },
13    doNothing: function() {
14        // Do nothing or some other stuffs
15    }
16}

For v-confirm directive, if an "OK" callback is not provided, the default event would be triggered.

1// Default Behaviour when used on links
2<a href="http://example.com" v-confirm="'This will take you to http://example.com. Proceed with caution'">Go to example.com</a>

Setting a dialog title (new)

You can now set a dialog title by passing your message as an object instead of a string. The message object should contain a title and body

1let message = {
2  title: 'Vuejs Dialog Plugin',
3  body: 'A lightweight, promise based alert, prompt and confirm dialog'
4};
5
6this.$dialog.confirm(message);

Options

1// Parameters and options
2
3let message = "Are you sure?";
4
5let options = {
6    html: false, // set to true if your message contains HTML tags. eg: "Delete <b>Foo</b> ?"
7    loader: false, // set to true if you want the dailog to show a loader after click on "proceed"
8    reverse: false, // switch the button positions (left to right, and vise versa)
9    okText: 'Continue',
10    cancelText: 'Close',
11    animation: 'zoom', // Available: "zoom", "bounce", "fade"
12    type: 'basic', // coming soon: 'soft', 'hard'
13    verification: 'continue', // for hard confirm, user will be prompted to type this to enable the proceed button
14    verificationHelp: 'Type "[+:verification]" below to confirm', // Verification help text. [+:verification] will be matched with 'options.verification' (i.e 'Type "continue" below to confirm')
15    clicksCount: 3, // for soft confirm, user will be asked to click on "proceed" btn 3 times before actually proceeding
16    backdropClose: false, // set to true to close the dialog when clicking outside of the dialog window, i.e. click landing on the mask
17    customClass: '' // Custom class to be injected into the parent node for the current dialog instance
18};
19
20this.$dialog.confirm(message, options)
21	.then(function () {
22	    // This will be triggered when user clicks on proceed
23	})
24	.catch(function () {
25	    // This will be triggered when user clicks on cancel
26	});

Global Configuration

1// You can also set all your defaults at the point of installation.
2// This will be your global configuration
3
4// use VuejsDialog.main.default if including via script tag
5Vue.use(VuejsDialog, {
6  html: true,
7  loader: true,
8  okText: 'Proceed',
9  cancelText: 'Cancel',
10  animation: 'bounce'
11});
12
13// Please note that local configurations will be considered before global configurations.
14// This gives you the flexibility of overriding the global config on individual call.

CSS Override

If you have included the plugin's style and wish to make a few overides, you can do so with basic css, ex:

1.dg-btn--ok {
2  border-color: green;
3}
4
5.dg-btn-loader .dg-circle {
6  background-color: green;
7}

Useful tip for customization

You can use any of the options in your verification help text. Example:

1this.$dialog.confirm($message, {
2  verificationHelp: 'Enter "[+:verification]" below and click on "[+:okText]"',
3  type: 'hard'
4});

More flexibility with Custom components

1/* File: custom-component.vue */
2<template>
3    <div class="custom-view-wrapper">
4        <template v-if=messageHasTitle>
5            <h2 v-if="options.html" class="dg-title" v-html="messageTitle"></h2>
6            <h2 v-else class="dg-title">{{ messageTitle }}</h2>
7        </template>
8        <template v-else>
9            <h2>Share with friends</h2>
10        </template>
11
12        <div v-if="options.html" class="dg-content" v-html="messageBody"></div>
13        <div v-else class="dg-content">{{ messageBody }}</div>
14        <br/>
15
16        <ok-btn @click="handleShare('facebook')" :options="options">Facebook</ok-btn>
17        <ok-btn @click="handleShare('twitter')" :options="options">Twitter</ok-btn>
18        <ok-btn @click="handleShare('googleplus')" :options="options">Google+</ok-btn>
19        <ok-btn @click="handleShare('linkedin')" :options="options">LinkedIn</ok-btn>
20        <cancel-btn @click="handleDismiss()" :options="options">Dismiss</cancel-btn>
21    </div>
22</template>
23
24<script>
25import DialogMixin from 'vuejs-dialog/vuejs-dialog-mixin.min.js'; // Include mixin
26import OkBtn from 'path/to/components/ok-btn.vue';
27import CancelBtn from 'path/to/components/cancel-btn.vue';
28
29export default {
30  mixins: [DialogMixin],
31  methods: {
32    handleShare(platform) {
33      this.proceed(platform); // included in DialogMixin
34    },
35    handleDismiss() {
36      this.cancel(); // included in DialogMixin
37    }
38  },
39  components: { CancelBtn, OkBtn }
40};
41</script>
42
43<style scoped="">
44button {
45  width: 100%;
46  margin-bottom: 10px;
47  float: none;
48}
49</style>

1import Vue from 'vue';
2import CustomView from './path/to/file/custom-component.vue';
3
4const VIEW_NAME = 'my-unique-view-name';
5Vue.dialog.registerComponent(VIEW_NAME, CustomView);
6
7let vm = new Vue({
8  methods: {
9    showCustomView() {
10      // Note: Use confirm instead of alert if you need to handle rejection
11      this.$dialog.alert(trans('messages.html'), {
12        view: VIEW_NAME, // can be set globally too
13        html: true,
14        animation: 'fade',
15        backdropClose: true
16      });
17    }
18  }
19});

... and you get your custom view

Here's a working fiddle for custom component/view

License

MIT

Contributing

• Fork it!
• Create your feature branch: git checkout -b my-new-feature
• Commit your changes: git commit -am 'Add some feature'
• Push to the branch: git push origin my-new-feature
• Submit a pull request :)