Merge pull request #182 from NoelDeMartin/dynamic-modals

Close dynamic modals programmatically

README.md

@@ -177,6 +177,19 @@ this.$modal.show(MyComponent, {
 })
 ```
 
+Other than defining the `name` modal parameter, it's also possible to close dynamic modals emitting a `'close'` event:
+
+```javascript
+this.$modal.show({
+  template: `
+    <div>
+      <p>Close using this button:</p>
+      <button @click="$emit('close')">Close</button>
+    </div>
+  `
+})
+```
+
 For more examples please take a look at [vue-js-modal.yev.io](http://vue-js-modal.yev.io).
 
 ### SSR

demo/client_side_rendering/src/App.vue

@@ -225,7 +225,7 @@ export default {
     showDynamicRuntimeModal () {
       this.$modal.show({
         template: `
-          <div>
+          <div class="example-modal-content">
             <h1>This is created inline</h1>
             <p>{{ text }}</p>
           </div>
@@ -243,9 +243,19 @@ export default {
     },
 
     showDynamicComponentModalWithModalParams () {
-      this.$modal.show(CustomComponentModal, {
-        text: 'This text is passed as a property'
-      }, {
+      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'); },
+        }
+      }, null, {
+        name: 'dynamic-modal',
         resizable: true,
         adaptive: true,
         draggable: true,

demo/client_side_rendering/src/components/CustomComponentModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="example-modal-content">
     <h1>This is a custom component</h1>
     <p>{{ text }}</p>
   </div>

src/ModalsContainer.vue

@@ -3,11 +3,14 @@
         <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>
+            <component
+              :is="modal.component"
+              v-bind="modal.params"
+              @close="$modal.hide(modal.config.name)"
+            ></component>
         </modal>
     </div>
 </template>
@@ -25,16 +28,18 @@ export default {
   methods: {
     add (modal, params, config) {
       let id = this.uid++
-      let name = '_dynamic-modal-' + id
+      config = config ? Object.assign({}, config) : {};
+      if (!config.name) {
+        config.name = '_dynamic-modal-' + id;
+      }
       this.modals.push({
         id: id,
-        name: name,
         component: modal,
         params: params || {},
-        config: config || {}
+        config: config
       })
       this.$nextTick(() => {
-        this.$modal.show(name)
+        this.$modal.show(config.name)
       })
     },
     remove (id) {