Added v-confirm directive.

Godofbrowser · Godofbrowser · commit e3aab2037ae0 · 2017-09-05T00:10:29.000+01:00
diff --git a/README.md b/README.md
@@ -70,6 +70,42 @@ this.$dialog.confirm("If you delete this record, it'll be gone forever.", {
     });
 ```
 
+## Usage as a directive (new)
+
+If you don't pass a message, the global/default message would be used.
+```html
+<button type="submit" v-confirm="">submit</button>
+```
+
+
+```html
+// 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>
+```
+```javascript
+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.
+
+```html
+// 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
 ```javascript
 // Parameters and options
 
@@ -95,7 +131,7 @@ this.$dialog.confirm(message, options)
 	    // This will be triggered when user clicks on cancel
 	});
 ```
-
+### Global Configuration
 ```javascript
 // You can also set all your defaults at the oint of installation.
 // This will be your global configuration
diff --git a/dist/vuejs-dialog.min.js b/dist/vuejs-dialog.min.js
diff --git a/dist/vuejs-dialog.min.js.map b/dist/vuejs-dialog.min.js.map
diff --git a/docs/app.main.css b/docs/app.main.css
@@ -1,9 +1 @@
-/* reset */
-* {
-  box-sizing: border-box; }
-
-body {
-  margin: 0;
-  padding: 0; }
-
-/* header */
+*{box-sizing:border-box}body{margin:0;padding:0}.page-title{border-bottom:2px solid #0096d9}
diff --git a/docs/app.main.js b/docs/app.main.js
diff --git a/docs/index.html b/docs/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <title>VueJs Plugin usage example</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<link href="app.main.css?6b138ee33d23ac1b91c1" rel="stylesheet"></head>
+<link href="app.main.css?4c2bab1f9ccdd0470ea4" rel="stylesheet"></head>
 <body>
 <div id="app"></div>
 
@@ -21,5 +21,5 @@
     ga('send', 'pageview');
 
 </script>
-<script type="text/javascript" src="app.main.js?6b138ee33d23ac1b91c1"></script></body>
+<script type="text/javascript" src="app.main.js?4c2bab1f9ccdd0470ea4"></script></body>
 </html>
diff --git a/src/docs/components/app.vue b/src/docs/components/app.vue
@@ -1,36 +1,73 @@
 <template>
     <div style="max-width: 350px; margin:auto; font-family: 'Noto Sans', sans-serif; text-align: center">
-        <h1>Vuejs-Dialog Plugin Examples</h1>
-
-        <h3>
-            <button @click="showAlertDialog()">Alert Dialog - one button</button>
-        </h3>
-
-        <h3>
-            <button @click="showHtmlDialog()">Html Dialog - style/format content</button>
-        </h3>
-
-        <h3>
-            <button @click="showBasicDialog()">Basic confirm - close instantly</button>
-        </h3>
-
-        <h3>
-            <button @click="showLoadingDialog()">Loading Dialog - Useful with ajax</button>
-        </h3>
-
-        <h3>
-            <button @click="showReversedDialog()">Reversed Dialog - switch buttons</button>
-        </h3>
-
-        <h3>
-            <button @click="showAnimationFadeDialog()">Fade Dialog - Animation</button>
-        </h3>
-
-        <h3>
-            <button @click="showAnimationBounceDialog()">Bounce Dialog - Animation</button>
-        </h3>
-
-
+        <h1 class="page-title">Vuejs-Dialog Plugin Examples</h1>
+
+        <section>
+            <h2>Usage as a method</h2>
+            <hr/>
+            <h4>
+                <button @click="showAlertDialog()">Alert Dialog - one button</button>
+            </h4>
+
+            <h4>
+                <button @click="showHtmlDialog()">Html Dialog - style/format content</button>
+            </h4>
+
+            <h4>
+                <button @click="showBasicDialog()">Basic confirm - close instantly</button>
+            </h4>
+
+            <h4>
+                <button @click="showLoadingDialog()">Loading Dialog - Useful with ajax</button>
+            </h4>
+
+            <h4>
+                <button @click="showReversedDialog()">Reversed Dialog - switch buttons</button>
+            </h4>
+
+            <h4>
+                <button @click="showAnimationFadeDialog()">Fade Dialog - Animation</button>
+            </h4>
+
+            <h4>
+                <button @click="showAnimationBounceDialog()">Bounce Dialog - Animation</button>
+            </h4>
+        </section>
+
+        <section>
+            <h2>Usage as a directive</h2>
+            <hr/>
+
+            <h4>
+                <a href="http://example.com" v-confirm="'This will take you to http://example.com. Proceed with caution'">Go to example.com</a>
+            </h4>
+
+            <h4>
+                <button v-confirm="`This is a message`">
+                    Give it a string v-confirm="This is a message"
+                </button>
+            </h4>
+
+            <h4>
+                <button v-confirm="{
+                message: 'This dialog was also triggered using a v-confirm directive. It has both OK and CANCEL callback',
+                 ok: clickOkHandler,
+                 cancel: clickCancelHandler}"
+                >
+                    Give it an object v-confirm="messageAndCallback"
+                </button>
+            </h4>
+
+            <h4>
+                <form @submit.prevent="submitDemo1Form()">
+                    <fieldset>
+                        <input v-model="forms.demo1.name" type="text" name="name" placeholder="Your name"/>
+                        <button type="reset" v-confirm="'Changes would be discarded. Reset this form?'">Reset</button>
+                        <button type="submit" v-confirm="'Submit this form?'">submit</button>
+                    </fieldset>
+                </form>
+            </h4>
+        </section>
 
         <notifications position="bottom left"></notifications>
     </div>
@@ -40,10 +77,24 @@
     import trans from '../js/translations'
 
     export default {
+        data(){
+            return {
+                forms: {
+                    demo1: {
+                        name: null
+                    }
+                }
+            }
+        },
         mounted(){
             console.log('mounted app')
         },
         methods: {
+            submitDemo1Form(){
+                let msg = "Form Submited. Your Name: "
+                msg += this.forms.demo1.name || 'The name field is empty'
+                this.$notify(msg)
+            },
             showAlertDialog(){
                 this.$dialog.alert(trans('messages.alert'))
             },
@@ -98,12 +149,20 @@
                 }).catch(() => {
                     this.$notify({text: trans('messages.loading_canceled')})
                 })
+            },
+            clickOkHandler(){
+                this.$notify({type: 'success', text: trans('messages.click_continue')})
+            },
+            clickCancelHandler(){
+                this.$notify({type: 'error', text: trans('messages.click_cancel')})
             }
         }
     }
 </script>
 
 <style>
+    @import "../scss/app.scss";
+
     .vue-notification {
         padding: 10px;
         margin: 15px;
diff --git a/src/docs/js/app.js b/src/docs/js/app.js
@@ -2,10 +2,16 @@
 
 import Vue from "vue"
 import Notification from 'vue-notification'
+import VuejsDialog from 'vuejs-dialog'
 import AppComponent from '../components/app.vue'
 
 Vue.use(Notification)
 
+// Install VuejsDialog
+Vue.use(VuejsDialog, {
+    message: 'Please confirm action'
+})
+
 let App = Vue.extend(AppComponent)
 
 window.vm = new App()
diff --git a/src/docs/scss/app.scss b/src/docs/scss/app.scss
@@ -4,8 +4,11 @@
 }
 
 body {
-   margin: 0;
-   padding: 0;
- }
+  margin: 0;
+  padding: 0;
+}
 
 /* header */
+.page-title {
+  border-bottom: 2px solid #0096D9;
+}
diff --git a/src/plugin/index.js b/src/plugin/index.js
@@ -2,6 +2,7 @@
 
 import DialogComponent from './components/dialog.vue'
 import {DIALOG_TYPES, DEFAULT_OPTIONS} from './js/constants'
+import directives from './js/directives'
 import {mergeObjs} from './js/utilities'
 
 let Plugin = function(Vue, globalOptions = {}){
@@ -42,6 +43,8 @@ Plugin.prototype.open = function(type, localOptions = {}){
 }
 
 Plugin.install = function (Vue, options) {
+    directives(Vue)
+
 	Vue.dialog = new Plugin(Vue, options)
 
 	Object.defineProperties(Vue.prototype, {
@@ -51,6 +54,7 @@ Plugin.install = function (Vue, options) {
 			}
 		}
 	})
+
 }
 
 export default Plugin
diff --git a/src/plugin/js/directives.js b/src/plugin/js/directives.js
@@ -0,0 +1,81 @@
+// Directives
+
+import {noop} from './utilities'
+
+export default function (Vue) {
+    let Directives = function (Vue) {
+        this.Vue = Vue
+        this.registerConfirm()
+    }
+
+    Directives.prototype.registerConfirm = function () {
+        const _this = this
+
+        const clickHandler = function (event, el, binding, vnode) {
+            event.preventDefault()
+            event.stopImmediatePropagation()
+
+            let confirmMessage = (function () {
+                if (binding.value && binding.value.message) {
+                    return binding.value.message
+                }
+                return typeof binding.value === 'string' ? binding.value : null
+            })()
+
+            let thenCallback = (function () {
+                if (binding.value && binding.value.ok) {
+                    return binding.value.ok
+                } else {
+                    return () => {
+                        el.removeEventListener('click', el.VuejsDialog.confirmHandler, true)
+
+                        _this.Vue.nextTick(() => {
+                            (function (node) {
+                                if (document.createEvent) {
+                                    let evt = document.createEvent('MouseEvents');
+                                    evt.initEvent('click', true, false);
+                                    node.dispatchEvent(evt);
+                                } else if (document.createEventObject) {
+                                    node.fireEvent('onclick');
+                                } else if (typeof node.onclick === 'function') {
+                                    node.onclick();
+                                }
+                            })(el)
+
+                            el.addEventListener('click', el.VuejsDialog.confirmHandler, true)
+                        })
+                    }
+                }
+            })()
+
+            let catchCallback = (function () {
+                if (binding.value && binding.value.cancel) {
+                    return binding.value.cancel
+                }
+                return noop
+            })()
+
+            _this.Vue.dialog.confirm(confirmMessage).then(thenCallback).catch(catchCallback)
+        }
+
+        this.Vue.directive('confirm', {
+            bind (el, binding, vnode) {
+                if (el.VuejsDialog === undefined)
+                    el.VuejsDialog = {}
+
+                el.VuejsDialog.confirmHandler = function clickEventHandler(event) {
+                    clickHandler(event, el, binding, vnode)
+                }
+
+                el.addEventListener('click', el.VuejsDialog.confirmHandler, true)
+            },
+            unbind (el) {
+                el.removeEventListener('click', el.VuejsDialog.confirmHandler, true)
+            }
+        })
+
+
+    }
+
+    new Directives(Vue)
+}
diff --git a/src/plugin/js/utilities.js b/src/plugin/js/utilities.js
@@ -1,5 +1,7 @@
 // utilities
 
+export const noop = () => {}
+
 export const cloneObj = function (obj) {
     return Object.assign({}, obj)
 }
diff --git a/src/plugin/styles/default.css b/src/plugin/styles/default.css
@@ -68,6 +68,7 @@
 	text-align: center;
 	text-decoration: none;
 	cursor: pointer;
+	outline: none;
 	-webkit-appearance: none;
 	-moz-appearance: none;
 	appearance: none;

Original file line number	Diff line number	Diff line change
`@@ -2,6 +2,7 @@`
`2`	`2`
`3`	`3`	`import DialogComponent from './components/dialog.vue'`
`4`	`4`	`import {DIALOG_TYPES, DEFAULT_OPTIONS} from './js/constants'`
	`5`	`+import directives from './js/directives'`
`5`	`6`	`import {mergeObjs} from './js/utilities'`
`6`	`7`
`7`	`8`	`let Plugin = function(Vue, globalOptions = {}){`
`@@ -42,6 +43,8 @@ Plugin.prototype.open = function(type, localOptions = {}){`
`42`	`43`	`}`
`43`	`44`
`44`	`45`	`Plugin.install = function (Vue, options) {`
	`46`	`+ directives(Vue)`
	`47`	`+`
`45`	`48`	`Vue.dialog = new Plugin(Vue, options)`
`46`	`49`
`47`	`50`	`Object.defineProperties(Vue.prototype, {`
`@@ -51,6 +54,7 @@ Plugin.install = function (Vue, options) {`
`51`	`54`	`}`
`52`	`55`	`}`
`53`	`56`	`})`
	`57`	`+`
`54`	`58`	`}`
`55`	`59`
`56`	`60`	`export default Plugin`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,7 @@`
`1`	`1`	`// utilities`
`2`	`2`
	`3`	`+export const noop = () => {}`
	`4`	`+`
`3`	`5`	`export const cloneObj = function (obj) {`
`4`	`6`	`return Object.assign({}, obj)`
`5`	`7`	`}`