SM: Upgraded src files added.

Author: Steven Morrison

index.html

@@ -42,12 +42,12 @@ <h3 class="category-name">{{ cat.name }}</h3>
         </ul>
 
         <!-- Modal component -->
-        <zaffri-modal v-if="modalVisible" v-bind:data="zaffriModal" v-on:hide_modal_emit="hideModal"></zaffri-modal>
+        <zaffri-modal v-bind:data="modalConfig"></zaffri-modal>
     </section>
 
-    <!-- Modal markup -->
-    <div id="zaffri-modal-template" class="zaffri-modal-template">
-        <div class="zaffri-modal">
+    <!-- Modal Component markup -->
+    <template id="zaffri-modal-template" class="zaffri-modal-template">
+        <div v-if="data.visible" class="zaffri-modal">
 
             <div class="zaffri-modal-body">
                 <header><h3>{{ data.title }}</h3></header>
@@ -59,18 +59,18 @@ <h3 class="category-name">{{ cat.name }}</h3>
                 <div class="zaffri-modal-button-area">
 
                     <div v-if="data.type == 'confirm'">
-                        <button v-on:click="hideModal(true)">{{ data.confirmText }}</button>
-                        <button v-on:click="hideModal(false)">{{ data.cancelText }}</button>
+                        <button @click="closeModal(true)">{{ data.confirmText }}</button>
+                        <button @click="closeModal(false)">{{ data.cancelText }}</button>
                     </div>
 
                     <div v-else>
-                        <button v-on:click="hideModal">{{ data.confirmText }}</button>
+                        <button @click="closeModal">{{ data.confirmText }}</button>
                     </div>
                 </div>
             </div>
 
         </div>
-    </div>
+    </template>
 
     <script src="js/vue.dev.js"></script>
     <script src="js/modal.js"></script>

js/modal.js

@@ -1,6 +1,6 @@
 /* --------------------------------------------------------
 	VueJS - Modal Component
-	Version: 	0.0.1
+	Version: 	0.0.3
 	Author: 	Steven Morrison
 	Website:	www.zaffri.com
 	GitHub:		github.com/Zaffri
@@ -10,8 +10,16 @@ var ZaffriModal = Vue.component('zaffri-modal', {
     template: "#zaffri-modal-template",
     props: ['data'],
     methods: {
-        hideModal: function(action = null) {
-            this.$emit('hide_modal_emit', action);
+        closeModal: function(action = null) {
+            var callbackData = {};
+
+            if(this.data.callbackData != undefined) callbackData = this.data.callbackData;
+            if(this.data.confirmCallback != undefined) this.confirmCallback(action, callbackData);
+
+            this.data.visible = false;
+        },
+        confirmCallback: function(action, callbackData) {
+            this.data.confirmCallback(action, callbackData);
         }
     }
 });