#173 Implement dynamic modals functionality

src/ModalsContainer.vue

@@ -0,0 +1,50 @@
+<template>
+    <div id="#modals-container">
+        <modal
+            v-for="modal in modals"
+            :key="modal.id"
+            :name="modal.name"
+            v-bind="modal.config"
+            @closed="remove(modal.id)"
+        >
+            <component :is="modal.component" v-bind="modal.params"></component>
+        </modal>
+    </div>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      uid: 0,
+      modals: []
+    }
+  },
+  created () {
+    this.$modal._setDynamicContainer(this)
+  },
+  methods: {
+    add (modal, params, config) {
+      let id = this.uid++
+      let name = '_dynamic-modal-' + id
+      this.modals.push({
+        id: id,
+        name: name,
+        component: modal,
+        params: params || {},
+        config: config || {}
+      })
+      this.$nextTick(() => {
+        this.$modal.show(name)
+      })
+    },
+    remove (id) {
+      for (let i in this.modals) {
+        if (this.modals[i].id === id) {
+          this.modals.splice(i, 1)
+          return
+        }
+      }
+    }
+  }
+}
+</script>

src/index.js

@@ -1,5 +1,6 @@
 import Modal from './Modal.vue'
 import Dialog from './Dialog.vue'
+import ModalsContainer from './ModalsContainer.vue'
 
 const defaultComponentName = 'modal'
 
@@ -14,14 +15,26 @@ const Plugin = {
 
     this.installed = true
     this.event = new Vue()
+    this.dynamicContainer = null
+
     /**
      * Plugin API
      */
     Vue.prototype.$modal = {
-      show (name, params) {
-        Plugin.event.$emit('toggle', name, true, params)
+      _setDynamicContainer (dynamicContainer) {
+        Plugin.dynamicContainer = dynamicContainer
+      },
+      show (modal, paramsOrProps, params) {
+        if (typeof modal === 'string') {
+          Plugin.event.$emit('toggle', modal, true, paramsOrProps)
+        } else {
+          if (Plugin.dynamicContainer === null) {
+            console.warn('[vue-js-modal] In order to render dynamic modals, a <modals-container> component must be present on the page')
+          } else {
+            Plugin.dynamicContainer.add(modal, paramsOrProps, params)
+          }
+        }
       },
-
       hide (name, params) {
         Plugin.event.$emit('toggle', name, false, params)
       },
@@ -41,6 +54,12 @@ const Plugin = {
     if (options.dialog) {
       Vue.component('v-dialog', Dialog)
     }
+    /**
+     * Registration of <ModalsContainer/> component
+     */
+    if (options.dynamic) {
+      Vue.component('modals-container', ModalsContainer)
+    }
   }
 }