Feature: Ability to set dialog title

Author: Godofbrowser

README.md

@@ -89,18 +89,17 @@ this.$dialog.confirm("If you delete this record, it'll be gone forever.", {
     });
 ```
 
-## Usage as a directive (new)
+## Usage as a directive
 
-If you don't pass a message, the global/default message would be used.
+__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.
+// Note: If "loader" is set to true, the makeAdmin callback will receive a "dialog" object
+// Which is useful for closing the dialog when transaction is complete.
 <button v-confirm="{ok: makeAdmin, cancel: doNothing, message: 'User will be given admin privileges. Make user an Admin?'}">Make Admin</button>
 ```
 ```javascript
@@ -115,15 +114,59 @@ methods: {
 }
 ```
 
+__A more practical use of ths `v-confirm` directive inside a loop__
+
+```html
+// While looping through users
+<button v-for="user in users"
+        v-confirm="{
+            loader: true,
+            ok: dialog => makeAdmin(dialog, user), 
+            cancel: doNothing, 
+            message: 'User will be given admin privileges. Make user an Admin?'}"
+>
+Make Admin
+</button>
+```
+```javascript
+methods: {
+    makeAdmin: function(dialog, user) {
+        // Make user admin from the backend
+        /* tellServerToMakeAdmin(user) */
+        
+        // When completed, close the dialog
+        /* dialog.close() */
+        
+    },
+    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.
+__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
+// Default Behaviour when used on links
 <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`
+
+```javascript
+let message = {
+    title: 'Vuejs Dialog Plugin',
+    body: 'A lightweight, promise based alert, prompt and confirm dialog'
+}
+
+this.$dialog.confirm(message)
+```
+
+
 ### Options
 ```javascript
 // Parameters and options

dist/vuejs-dialog.min.js

@@ -9,9 +9,14 @@
                 <div class="dg-content-cont dg-content-cont--floating">
                     <div class="dg-main-content">
 
-                        <div class="dg-content-body">
-                            <div v-if="options.html" class="dg-content" v-html="options.message"></div>
-                            <div v-else="" class="dg-content">{{ options.message }}</div>
+                        <div :class="['dg-content-body', {'dg-content-body--has-title': messageHasTitle}]">
+                            <template v-if="messageHasTitle">
+                                <h6 v-if="options.html" class="dg-title" v-html="messageTitle"></h6>
+                                <h6 v-else="" class="dg-title">{{ messageTitle }}</h6>
+                            </template>
+
+                            <div v-if="options.html" class="dg-content" v-html="messageBody"></div>
+                            <div v-else="" class="dg-content">{{ messageBody }}</div>
 
                             <form v-if="isHardConfirm || isPrompt"
                                   class="dg-form"
@@ -56,6 +61,9 @@
     import CancelBtn from './cancel-btn.vue'
     import {DIALOG_TYPES, ANIMATION_TYPES, CONFIRM_TYPES} from '../js/constants'
 
+    import MessageMixin from '../js/mixins/message-mixin'
+    import ButtonMixin from '../js/mixins/btn-mixin'
+
     export default {
         data: function () {
             return {
@@ -100,38 +108,12 @@
             isPrompt(){
                 return (this.options.window === DIALOG_TYPES.PROMPT)
             },
-            cancelBtnDisabled(){
-                return (this.options.window === DIALOG_TYPES.ALERT)
-            },
-            okBtnDisabled(){
-                return (this.options.window === DIALOG_TYPES.CONFIRM)
-                    && (this.options.type === CONFIRM_TYPES.HARD)
-                    && (this.input !== this.options.verification)
-            },
-            leftBtnEnabled(){
-                return (this.cancelBtnDisabled === false) || (this.options.reverse === true)
-            },
-            rightBtnEnabled(){
-                return (this.cancelBtnDisabled === false) || (this.options.reverse === false)
-            },
             leftBtnComponent(){
                 return (this.options.reverse === false) ? 'cancel-btn' : 'ok-btn'
             },
             rightBtnComponent(){
                 return (this.options.reverse === true) ? 'cancel-btn' : 'ok-btn'
             },
-            leftBtnFocus(){
-                return !this.isHardConfirm && (this.options.reverse === true)
-            },
-            rightBtnFocus(){
-                return !this.isHardConfirm && (this.options.reverse === false)
-            },
-            leftBtnText(){
-                return this.options.reverse ? this.options.okText : this.options.cancelText
-            },
-            rightBtnText(){
-                return this.options.reverse ? this.options.cancelText : this.options.okText
-            },
             hardConfirmHelpText() {
                 return this.options.verificationHelp
                     .replace(/\[\+:(\w+)]/g, (match, $1) => {
@@ -197,6 +179,7 @@
                 this.cancelBtnDisabled ? this.proceed() : this.cancel()
             }
         },
+        mixins: [MessageMixin, ButtonMixin],
         components: {CancelBtn, OkBtn}
     }
 </script>

dist/vuejs-dialog.min.js.map

@@ -28,7 +28,7 @@
         watch: {
             'dialogsARR': {
                 handler (dialogs) {
-                    let clsName = 'dg-no-scroll'
+                    let clsName = 'dg-open'
                     const body = document.getElementsByTagName('body')[0]
 
                     if (!body) {

docs/js/vuejs-dialog.min.js

@@ -1,5 +1,11 @@
 //@import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,700');
 
+body.dg-open {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
 .dg-container * {
   box-sizing: border-box;
 }
@@ -49,6 +55,12 @@
   line-height: 1.3em;
 }
 
+.dg-title {
+  margin: 0 0 10px 0;
+  padding: 0;
+  font-size: 18px;
+}
+
 .dg-content-body {
   border-bottom: 2px solid #E1E6EA;
   padding-bottom: 15px;
@@ -135,6 +147,12 @@
   clear: both;
 }
 
+.dg-content-body--has-title {
+  .dg-content {
+    font-size: 14px;
+  }
+}
+
 .dg-container--has-input {
   .dg-main-content {
     max-width: 450px;
@@ -164,9 +182,3 @@
     padding: 0 10px 10px;
   }
 }
-
-.dg-no-scroll {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}