#173 Implement dynamic modals functionality

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)
+    }
   }
 }