From 75ac5598fe6d62c2f9ce66cb8dc4f962a10c0e63 Mon Sep 17 00:00:00 2001
From: Noel De Martin <noeldemartin@gmail.com>
Date: Wed, 21 Feb 2018 16:42:01 +0100
Subject: [PATCH 1/2] #178 Close dynamic modals programmatically

---
 README.md                                      | 13 +++++++++++++
 demo/client_side_rendering/src/App.vue         | 18 ++++++++++++++----
 .../src/components/CustomComponentModal.vue    |  2 +-
 src/ModalsContainer.vue                        | 15 ++++++++++-----
 4 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index c767b0d..7ff0730 100644
--- a/README.md
+++ b/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
diff --git a/demo/client_side_rendering/src/App.vue b/demo/client_side_rendering/src/App.vue
index b49fcc5..74dec9d 100644
--- a/demo/client_side_rendering/src/App.vue
+++ b/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,
diff --git a/demo/client_side_rendering/src/components/CustomComponentModal.vue b/demo/client_side_rendering/src/components/CustomComponentModal.vue
index ac4b322..d0c3d11 100644
--- a/demo/client_side_rendering/src/components/CustomComponentModal.vue
+++ b/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>
diff --git a/src/ModalsContainer.vue b/src/ModalsContainer.vue
index 479dedd..b721f7c 100644
--- a/src/ModalsContainer.vue
+++ b/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 || {};
+      if (!config.name) {
+        config.name = '_dynamic-modal-' + id;
+      }
       this.modals.push({
         id: id,
-        name: name,
         component: modal,
         params: params || {},
         config: config || {}
       })
       this.$nextTick(() => {
-        this.$modal.show(name)
+        this.$modal.show(config.name)
       })
     },
     remove (id) {

From e7554fa50287353adeb030547974f90b1e320977 Mon Sep 17 00:00:00 2001
From: Noel De Martin <noeldemartin@gmail.com>
Date: Thu, 22 Feb 2018 08:32:18 +0100
Subject: [PATCH 2/2] #178 Clone config argument in modals container to prevent
 mutating user-supplied arguments

---
 src/ModalsContainer.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ModalsContainer.vue b/src/ModalsContainer.vue
index b721f7c..36591f2 100644
--- a/src/ModalsContainer.vue
+++ b/src/ModalsContainer.vue
@@ -28,7 +28,7 @@ export default {
   methods: {
     add (modal, params, config) {
       let id = this.uid++
-      config = config || {};
+      config = config ? Object.assign({}, config) : {};
       if (!config.name) {
         config.name = '_dynamic-modal-' + id;
       }
@@ -36,7 +36,7 @@ export default {
         id: id,
         component: modal,
         params: params || {},
-        config: config || {}
+        config: config
       })
       this.$nextTick(() => {
         this.$modal.show(config.name)