vuejs-sui-confirmation

Semantic UI 2.3 confirmation modal with Vue 2

Based on

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

Installation

NPM

// installation via npm
npm install vuejs-dialog
 
// import into project
import Vue from "vue"
import VuejsDialog from "vuejs-dialog"
 
// Tell Vue to install the plugin.
Vue.use(VuejsDialog)

Basic Usage

// Anywhere in your Vuejs App.
 
this.$dialog.confirm('Please confirm to continue')
    .then(function () {
        console.log('Clicked on proceed')
    })
    .catch(function () {
        console.log('Clicked on cancel')
    });

Usage with ajax - Loader enabled

// Anywhere in your Vuejs App.
 
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');
    });

Usage as a directive (new)

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

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

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

methods: {
    makeAdmin: function() {
        // Do stuffs
 
    },
    doNothing: function() {
        // Do nothing or some other stuffs
    }
}

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

// You can use it on links too
<a href="http://example.com" v-confirm="'This will take you to http://example.com. Proceed with caution'">Go to example.com</a>
 

Options

// Parameters and options
 
let message = "Are you sure?";
 
let options = {
    html: false, // set to true if your message contains HTML tags. eg: "Delete <b>Foo</b> ?"
    loader: false, // set to true if you want the dailog to show a loader after click on "proceed"
    reverse: false, // switch the button positions (left to right, and vise versa)
    okText: 'Continue',
    cancelText: 'Close',
    animation: 'zoom', // Available: "zoom", "bounce", "fade"
    type: 'basic', // coming soon: 'soft', 'hard'
    verification: 'continue', // for hard confirm, user will be prompted to type this to enable the proceed button
    clicksCount: 3, // for soft confirm, user will be asked to click on "proceed" btn 3 times before actually proceeding
};
 
this.$dialog.confirm(message, options)
    .then(function () {
        // This will be triggered when user clicks on proceed
    })
    .catch(function () {
        // This will be triggered when user clicks on cancel
    });

Global Configuration

// You can also set all your defaults at the point of installation.
// This will be your global configuration
 
Vue.use(VuejsDialog, {
    html: true,
    loader: true,
    okText: 'Proceed',
    cancelText: 'Cancel',
    animation: 'bounce',
})
 
// Please note that local configurations will be considered before global configurations.
// This gives you the flexibility of overriding the global config on individual call.

License

MIT