Refactor modals so they work when nested in other components and fix BaseForm so it doesn't repeat ModalMixin logic

js/components/forms/base_form.js

@@ -8,6 +8,7 @@ import MultiStepModalForm from './multi_step_modal_form'
 import multicheckboxinput from '../multi_checkbox_input'
 import checkboxinput from '../checkbox_input'
 import levelofwarrant from '../levelofwarrant'
+import Modal from '../../mixins/modal'
 
 export default {
   name: 'base-form',
@@ -19,36 +20,7 @@ export default {
     multicheckboxinput,
     checkboxinput,
     levelofwarrant,
+    Modal,
   },
-  mixins: [FormMixin],
-  methods: {
-    closeModal: function(name) {
-      this.activeModal = null
-      this.$root.$emit('modalOpen', false)
-      if (this.$root.allyHandler) this.$root.allyHandler.disengage()
-    },
-
-    openModal: function(name) {
-      this.$root.activeModal = name
-      this.$root.$emit('modalOpen', true)
-      const idSelector = `#${this.$root.modalId}`
-
-      this.$root.allyHandler = ally.maintain.disabled({
-        filter: idSelector,
-      })
-    },
-  },
-  data: function() {
-    return {
-      activeModal: null,
-      allyHandler: null,
-    }
-  },
-  computed: {
-    modalId: function() {
-      return !!this.$root.activeModal
-        ? `modal--${this.$root.activeModal}`
-        : null
-    },
-  },
+  mixins: [FormMixin, Modal],
 }

js/index.js

@@ -73,9 +73,10 @@ const app = new Vue({
   },
 
   mounted: function() {
-    this.$on('modalOpen', isOpen => {
-      if (isOpen) {
+    this.$on('modalOpen', data => {
+      if (data['isOpen']) {
         document.body.className += ' modal-open'
+        this.activeModal = data['name']
       } else {
         document.body.className = document.body.className.replace(
           ' modal-open',

js/mixins/modal.js

@@ -10,7 +10,7 @@ export default {
 
     openModal: function(name) {
       this.activeModal = name
-      this.$emit('modalOpen', true)
+      this.$root.$emit('modalOpen', { isOpen: true, name: name })
       const idSelector = `#${this.modalId}`
 
       this.allyHandler = ally.maintain.disabled({