Added hideAll for dynamic modals

Author: euvl

CHANGELOG

@@ -11,5 +11,6 @@ modal transition weird stuff was happening)
 * Removed "delay" property - component is relying on modal & overlay transition durations
 * Added naive implementation of focus trap
 * Added source-maps
+* Added `hideAll` for dynamic modals
 * Fix: dialogs not working when componentName is changed
 * Fix: ActiveElement is blurred after before-open is fired - not it is possible to cache document.activeElement

demo/src/App.vue

@@ -206,52 +206,68 @@ export default {
       this.$modal.show(
         {
           template: `
-          <div class="example-modal-content">
-            <h1>This is created inline</h1>
-            <p>{{ text }}</p>
-            <p>Default Property: {{ foo }}</p>
-          </div>
-        `,
-          props: ['text', 'foo']
+              <div class="example-modal-content">
+                <h1>This is created inline</h1>
+                <p>{{ text }}</p>
+                <p>Default Property: {{ foo }}</p>
+              </div>
+            `,
+          props: ['text', 'height']
         },
         {
-          text: 'This text is passed as a property'
+          text: 'This text is passed as a property',
+          height: 'auto'
         }
       )
     },
 
     showDynamicComponentModal() {
+      console.log('Showing one more')
       this.$modal.show(DemoCustomComponent, {
         text: 'This text is passed as a property'
       })
     },
 
     showDynamicComponentModalWithModalParams() {
-      this.$modal.show(
-        {
-          template: `
-          <div class="example-modal-content">
-            <button class="btn" @click="closeByName">Close this using name</button>
-            <button class="btn" @click="closeByEvent">Close this using events</button>
-          </div>
-        `,
-          methods: {
-            closeByName() {
-              this.$modal.hide('dynamic-modal')
-            },
-            closeByEvent() {
-              this.$emit('close')
+      let counter = 0
+
+      const interval = setInterval(() => {
+        if (counter === 5) {
+          clearInterval(interval)
+        } else {
+          counter++
+        }
+
+        const name = `dynamic-modal-${Date.now()}`
+
+        this.$modal.show(
+          {
+            template: `
+              <div class="example-modal-content">
+                <button class="btn" @click="closeByName">Close this using name</button>
+                <button class="btn" @click="closeByEvent">Close this using events</button>
+                <button class="btn" @click="this.$modal.hideAll">Close all dynamic modals</button>
+            </div>
+            `,
+            methods: {
+              closeByName() {
+                this.$modal.hide(name)
+              },
+              closeByEvent() {
+                this.$emit('close')
+              }
             }
+          },
+          null,
+          {
+            height: 'auto',
+            name: name,
+            resizable: true,
+            adaptive: true,
+            draggable: true
           }
-        },
-        null,
-        {
-          name: 'dynamic-modal',
-          resizable: true,
-          adaptive: true,
-          draggable: true
-        }
-      )
+        )
+      }, 2000)
     },
 
     dialogEvent(eventName) {

dist/index.js

@@ -1,5 +1,6 @@
 <template>
-  <component :is="$modal.context.componentName"
+  <component 
+    :is="$modal.context.componentName"
     name="dialog"
     height="auto"
     :classes="['v--modal', 'vue-dialog', this.params.class]"
@@ -11,21 +12,21 @@
     @before-open="beforeOpened"
     @before-close="beforeClosed"
     @opened="$emit('opened', $event)"
-    @closed="$emit('closed', $event)">
+    @closed="$emit('closed', $event)"
+  >
     <div class="dialog-content">
       <div
         class="dialog-c-title"
         v-if="params.title"
-        v-html="params.title || ''"></div>
+        v-html="params.title || ''" />
       <component
         v-if="params.component"
         v-bind="params.props"
-        :is="params.component">
-      </component>
+        :is="params.component" />
       <div
         class="dialog-c-text"
         v-else
-        v-html="params.text || ''"></div>
+        v-html="params.text || ''" />
     </div>
     <div
       class="vue-dialog-buttons"
@@ -37,11 +38,12 @@
         :style="buttonStyle"
         :key="i"
         v-html="button.title"
-        @click.stop="click(i, $event)">
+        @click.stop="click(i, $event)"
+      >
         {{button.title}}
       </button>
     </div>
-    <div v-else class="vue-dialog-buttons-none"></div>
+    <div v-else class="vue-dialog-buttons-none" />
   </component>
 </template>
 <script>

dist/ssr.index.js

@@ -17,6 +17,7 @@
   </div>
 </template>
 <script>
+import Modal from './index'
 import { generateId } from './utils'
 
 const PREFIX = '_dynamic_modal_'
@@ -30,6 +31,11 @@ export default {
   created() {
     this.$root._dynamicContainer = this
   },
+  mounted() {
+    Modal.event.$on('hide-all', () => {
+      this.modals = []
+    })
+  },
   methods: {
     add(component, componentAttrs = {}, modalAttrs = {}, modalListeners = {}) {
       const id = generateId()

dist/ssr.nocss.js

@@ -19,6 +19,10 @@ const UNSUPPORTED_ARGUMENT_ERROR =
   '[vue-js-modal] ' +
   '$modal() received an unsupported argument as a first argument.'
 
+const HIDE_ALL_RESTRICTION_ERROR =
+  '[vue-js-modal] ' +
+  '$modal.hideAll() call will be ignored because dynamic modals are not enabled.'
+
 export const getModalsContainer = (Vue, options, root) => {
   if (!root._dynamicContainer && options.injectModalsContainer) {
     const container = createDivInBody()
@@ -101,6 +105,14 @@ const Plugin = {
         Plugin.event.$emit('toggle', name, false, params)
       },
 
+      hideAll() {
+        if (options.dynamic) {
+          Plugin.event.$emit('hide-all')
+        } else {
+          console.warn(HIDE_ALL_RESTRICTION_ERROR)
+        }
+      },
+
       toggle(name, params) {
         Plugin.event.$emit('toggle', name, undefined, params)
       }