feat: part 2/3 modal

resources/js/Global/components/Modals/BasicModal.vue

@@ -1,24 +1,30 @@
 <template>
     <v-dialog v-model="modal" :max-width="maxWidth" :width="width" :transition="transition">
-        <slot :modal="modal" :data="data" v-if="modal" ></slot>
+        <slot :modal="modal" :data="data" v-if="modal"></slot>
     </v-dialog>
 </template>
 
 
 <script>
     import {mapGetters} from "vuex";
+
     export default {
         props: {
-            width:{default: null},
+            width: {default: null},
-            maxWidth:{default: null},
+            maxWidth: {default: null},
-            name:{default: null},
+            name: {default: null},
-            transition:{default: 'slide-x-transition'},
+            transition: {default: 'slide-x-transition'},
         },
+        data: () => ({
+            isOpenModal: false,
+        }),
         computed: {
             ...mapGetters("modal", ["isModal", "getModal"]),
             modal: {
                 get() {
-                    return this.isModal(this.modalName);
+                    const isOpen = this.isModal(this.modalName);
+                    this.emitModal(isOpen);
+                    return isOpen;
                 },
                 set(value) {
                     if (!value) {
@@ -33,6 +39,20 @@
                 return this.getModal(this.modalName);
             }
         },
-
+        methods: {
+            emitModal(isOpen) {
+                if (this.isOpenModal && !isOpen) {
+                    this.isOpenModal = false;
+                    this.$emit('close');
+                } else if (!this.isOpenModal && isOpen) {
+                    this.isOpenModal = true;
+                    this.$emit('open', this.data);
+                    this.$parent.modalData = this.data;
+                }
+            }
+        },
+        beforeDestroy() {
+            this.emitModal(false);
+        }
     }
 </script>

resources/js/Global/mixins/global.js

@@ -21,11 +21,18 @@ const global = {
         ...mapActions("modal", [
             "$_dialog",
             "$_helper",
-            "$_openModal",
+            "openModal",
             "$_closeModal"
         ]),
 
+        $_openModal(name, data) {
+            if (typeof name == 'object') {
+                this.openModal(name)
+            } else {
+                this.openModal({...data, ...{name}})
+            }
 
+        },
         $_can,
         $_name,
         $_color,

resources/js/Global/store/modules/modal/actions.js

@@ -2,7 +2,7 @@ import $_can from "@Global/policy/can";
 
 export default {
 
-    $_openModal({ state, rootState }, data) { // data: {name, rel, model, form_data, data, modal_pop_data, type}
+    openModal({ state, rootState }, data) { // data: {name, rel, model, form_data, data, modal_pop_data, type}
         let can = true;
         if (data.can) {
             can = $_can(data.can);
@@ -57,7 +57,7 @@ export default {
 
     $_dialog:({commit, dispatch}, properties) => {
         properties['name'] = 'modal_dialog';
-        dispatch('$_openModal', properties);
+        dispatch('openModal', properties);
 
         commit('SET_DIALOG_TYPE', properties.type);
         commit('SET_DIALOG_PROPERTIES', properties);
@@ -67,6 +67,6 @@ export default {
         let data = {};
         data['name'] = 'modal_helper';
         data['slug'] = slug;
-        dispatch('$_openModal', data);
+        dispatch('openModal', data);
     },
 };