Feature: custom class updated

Author: Godofbrowser

README.md

@@ -15,6 +15,14 @@
 
 [https://godofbrowser.github.io/vuejs-dialog/](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)
+
 ## Installation
 
 #### HTML
@@ -126,7 +134,7 @@ methods: {
 }
 ```
 
-__A more practical use of ths `v-confirm` directive inside a loop__
+__A more practical use of ths `v-confirm` directive inside a loop - Solution 1__
 
 ```html
 // While looping through users
@@ -156,6 +164,41 @@ methods: {
 }
 ```
 
+
+__( new ) A more practical use of ths `v-confirm` directive inside a loop - Solution 2__
+
+```html
+// While looping through users
+<button v-for="user in users"
+        :data-user="user"
+        v-confirm="{
+            loader: true,
+            ok: makeAdmin, 
+            cancel: doNothing, 
+            message: 'User will be given admin privileges. Make user an Admin?'}"
+>
+Make Admin
+</button>
+```
+```javascript
+methods: {
+    makeAdmin: function(dialog) {
+        let button = dialog.node // node is only available if triggered via a directive
+        let user = button.dataset.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.__
 
 ```html
@@ -197,6 +240,7 @@ let options = {
     verificationHelp: 'Type "[+:verification]" below to confirm', // Verification help text. [+:verification] will be matched with 'options.verification' (i.e 'Type "continue" below to confirm')
     clicksCount: 3, // for soft confirm, user will be asked to click on "proceed" btn 3 times before actually proceeding
     backdropClose: false // set to true to close the dialog when clicking outside of the dialog window, i.e. click landing on the mask 
+    customClass: '' // Custom class to be injected into the parent node for the current dialog instance
 };
 
 this.$dialog.confirm(message, options)
@@ -246,11 +290,95 @@ this.$dialog.confirm($message, {
      type: 'hard'
 })
 ```
+## More flexibility with Custom components
+
+```vue
+/* File: custom-component.vue */
+<template>
+    <div class="custom-view-wrapper">
+        <template v-if=messageHasTitle>
+            <h2 v-if="options.html" class="dg-title" v-html="messageTitle"></h2>
+            <h2 v-else class="dg-title">{{ messageTitle }}</h2>
+        </template>
+        <template v-else>
+            <h2>Share with friends</h2>
+        </template>
+
+        <div v-if="options.html" class="dg-content" v-html="messageBody"></div>
+        <div v-else class="dg-content">{{ messageBody }}</div>
+        <br/>
+
+        <ok-btn @click="handleShare('facebook')" :options="options">Facebook</ok-btn>
+        <ok-btn @click="handleShare('twitter')" :options="options">Twitter</ok-btn>
+        <ok-btn @click="handleShare('googleplus')" :options="options">Google+</ok-btn>
+        <ok-btn @click="handleShare('linkedin')" :options="options">LinkedIn</ok-btn>
+        <cancel-btn @click="handleDismiss()" :options="options">Dismiss</cancel-btn>
+    </div>
+</template>
+
+<script>
+    import DialogMixin from 'vuejs-dialog/vuejs-dialog-mixin.min.js' // Include mixin
+    import OkBtn from 'path/to/components/ok-btn.vue'
+    import CancelBtn from 'path/to/components/cancel-btn.vue'
+
+    export default {
+        mixins: [ DialogMixin ],
+        methods: {
+            handleShare(platform) {
+                this.proceed(platform) // included in DialogMixin
+            },
+            handleDismiss() {
+                this.cancel() // included in DialogMixin
+            }
+        },
+        components: { CancelBtn, OkBtn }
+    }
+</script>
+
+<style scoped="">
+    button {
+        width: 100%;
+        margin-bottom: 10px;
+        float: none;
+    }
+</style>
+
+```
+
+```javascript
+import CustomView from './path/to/file/custom-component.vue'
+const VIEW_NAME = 'my-unique-view-name'
+
+let vm = new Vue({
+    created() {
+        this.$dialog.registerComponent(VIEW_NAME, CustomView)
+    },
+    methods: {
+        showCustomView(){
+            this.$dialog.alert(trans('messages.html'), {
+                view: VIEW_NAME, // can be set globally too
+                html: true,
+                animation: 'fade',
+                backdropClose: true
+            })
+        }
+    }
+})
+```
+
+ ... and you get your custom view
+
+
+![Vuejs Dialog Plugin](./src/docs/img/custom-view.png?raw=true "Vuejs Dialog Plugin custom view demo")
 
 # License
 
 [MIT](http://opensource.org/licenses/MIT)
 
 ## Contributing
 
-Let's make it better :)
+* 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 :)