Add Modal

- use this.$modal.show(options) to use in any component

src/App.vue

@@ -4,21 +4,47 @@
       <router-view />
     </frappe-desk>
     <router-view v-else name="setup" />
+    <frappe-modal ref="modal" :show="showModal" v-bind="modalOptions" />
   </div>
 </template>
 
 <script>
+import Vue from 'vue';
+import Observable from 'frappejs/utils/observable';
 import Desk from '@/components/Desk';
+import Modal from '@/components/Modal';
+
+const Bus = new Observable();
+
+Vue.use({
+  // enable use of this.$modal in every component
+  // this also keeps only one modal in the DOM at any time
+  // which is the recommended way by bootstrap
+  install (Vue) {
+    Vue.prototype.$modal = {
+      show(options) {
+        Bus.trigger('showModal', options);
+      },
+
+      hide() {
+        Bus.trigger('hideModal');
+      }
+    }
+  }
+});
 
 export default {
   name: 'App',
   data() {
     return {
-      showDesk: true
+      showDesk: true,
+      showModal: false,
+      modalOptions: {}
     }
   },
   components: {
-    FrappeDesk: Desk
+    FrappeDesk: Desk,
+    FrappeModal: Modal
   },
   async beforeRouteUpdate(to, from, next) {
     const accountingSettings = await frappe.getSingle('AccountingSettings');
@@ -27,6 +53,18 @@ export default {
     } else {
       this.showDesk = true;
     }
+  },
+  mounted() {
+    Bus.on('showModal', (options = {}) => {
+      this.showModal = true;
+      this.modalOptions = options;
+    });
+
+    Bus.on('hideModal', () => {
+      this.showModal = false;
+    });
+
+    window.frappeModal = this.$modal;
   }
 }
 </script>

src/components/Modal.vue

@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <div :class="['modal fade', modalClasses]" :style="{display: show ? 'block' : ''}" id="frappe-modal"
+      tabindex="-1" role="dialog" aria-labelledby="frappe-modal-label" aria-hidden="true"
+    >
+      <div class="modal-dialog" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="frappe-modal-label">{{ title }}</h5>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close" @click="closeModal">
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div class="modal-body">
+            <component :is="body" />
+          </div>
+          <div class="modal-footer">
+            <component :is="footer" />
+            <button type="button" class="btn btn-secondary" @click="closeModal">Close</button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="modal-backdrop show" v-show="show"></div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    show: Boolean,
+    title: {
+      type: String,
+      default: 'Modal Title'
+    },
+    body: {
+      type: Object,
+      default: null
+    },
+    footer: {
+      type: Object,
+      default: null
+    }
+  },
+  computed: {
+    modalClasses() {
+      return {
+        show: this.show
+      }
+    }
+  },
+  methods: {
+    closeModal() {
+      this.$emit('closeModal');
+    }
+  }
+}
+</script>