Vuejs Lightweight Prompt Based On Promise And Confirm Dialog

VUEJS DIALOG PLUGIN is a lightweight, promise-based, prompt, and dialog-based alert.

Important updates

The dialog will always be resolved by an object. (ie a callback to continue will always receive an object).
To use directives, the object returned in (1) above will contain a node.
Styles must be explicitly included as they have been extracted into a separate file.
If the loader is enabled globally, and a dialog is triggered via a callback less route, the loader will ignore clicks on proceeding
Inject a custom class on the parent node.
Ability to record custom shows. This allows for custom logic, custom buttons, etc.
Installable via an HTML script tag.
The library is divided into two parts. The main library is a useful plugin and mixes in custom components.
For this purpose, the new plug-in installation method is slightly different: window.Vue.use (VuejsDialog.main.default).
Mixing can be added to components such as mixins: [VuejsDialog.mixin.default, ... otherMixins].

Must Read: Display Content Confirmation Dialog Alert | Vertical Slide onFocus

How to make use of it:

Install & Download:

$ npm install vuejs-dialog --save

1. Basic Usage inside a vuejs application

// Anywhere in your Vuejs App.

// Trigger an Alert dialog
this.$dialog.alert('Request completed!').then(function(dialog) {
  console.log('Closed');
});

// Trigger a confirmation dialog
this.$dialog
  .confirm('Please confirm to continue')
  .then(function(dialog) {
    console.log('Clicked on proceed');
  })
  .catch(function() {
    console.log('Clicked on cancel');
  });

2. Basic Usage outside a vuejs application

// VuejsDialog Methods are also available on the global vue
// This makes it possible to use the plugin inside a ReactJs application
// or just any javascript application
// Simply include vue, vuejs-dialog, ask vue to use the plugin and that's all:

Vue.dialog.alert('Request completed!').then(function(dialog) {
  console.log('Closed');
});

Vue.dialog
  .confirm('Please confirm to continue')
  .then(function(dialog) {
    console.log('Clicked on proceed');
  })
  .catch(function() {
    console.log('Clicked on cancel');
  });

3. Return value on success

// Whenever a user clicks on proceed,
// the promise returned by the dialog call will be
// resolved with a dialog object with the following shape:


{
    close: function | sometimes | A method that can be used to close the dialog if it's in a loading state
    loading: function | sometimes | A method that can be used to stop the dialog loader
    node: DOMElement | sometimes | A DOM element which the directive was bound to, when triggered via a directive
    data: any | always | Data sent with the positive action. Useful in prompts or custom components where you have multiple proceed buttons
}

// Example:

<button class="btn-danger"
        v-confirm="{
            loader: true,
            ok: okCallback,
            cancel: cancelcallback,
            message: 'Some confirmation message'}"
>

okCallback: function (dialog) {
        dialog.loading(false) // stop the loader (you won't be needing this)
        dialog.close() // stops loader and close the dialog
        dialog.node.className // === "btn-danger"
        dialog.data // === null
}

4. Prompt (collect data from the user)

this.$dialog
  .prompt({
    title: "Let's hear from you",
    body: "What is the most important thing in life?",
  }, {
    promptHelp: 'Type in the box below and click "[+:okText]"'
  })
  .then(dialog => {
    // Triggered when proceed button is clicked
    // Show an alert with the user's input as the message
    this.$dialog.alert(dialog.data || '[empty]')
  })
  .catch(() => {
    // Triggered when dialog is dismissed by user

    console.log('Prompt dismissed');
  });

5. Usage with ajax – Loader enabled

this.$dialog
  .confirm("If you delete this record, it'll be gone forever.", {
    loader: true // default: false - when set to true, the proceed button shows a loader when clicked.
    // And a dialog object will be passed to the then() callback
  })
  .then(dialog => {
    // Triggered when proceed button is clicked

    // dialog.loading(false) // stops the proceed button's loader
    // dialog.loading(true) // starts the proceed button's loader again
    // dialog.close() // stops the loader and close the dialog

    // do some stuff like ajax request.
    setTimeout(() => {
      console.log('Delete action completed ');
      dialog.close();
    }, 2500);
  })
  .catch(() => {
    // Triggered when cancel button is clicked

    console.log('Delete aborted');
  });