From 75fab6759b6e3fd720f5a84f712865a90604d101 Mon Sep 17 00:00:00 2001
From: rkdgusrnrlrl <rkdgusrnrlrl@gmail.com>
Date: Mon, 9 Jul 2018 00:46:08 +0900
Subject: [PATCH] Add modal event click overlay(#14)

---
 src/components/Modal.vue      | 15 ++++++++++++---
 src/examples/ModalExample.vue |  3 +++
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/Modal.vue b/src/components/Modal.vue
index 4d915c2..c003bf3 100644
--- a/src/components/Modal.vue
+++ b/src/components/Modal.vue
@@ -1,7 +1,7 @@
 <template lang="html">
   <!-- Modal -->
-  <div class="modal fade" id="bsModal" tabindex="-1" role="dialog" aria-labelledby="bsModalLabel" data-toggle="modal" data-backdrop="static" data-keyboard="false">
-    <div class="modal-dialog" role="document">
+  <div class="modal fade" id="bsModal" tabindex="-1" role="dialog" aria-labelledby="bsModalLabel" data-toggle="modal" data-backdrop="static" data-keyboard="false" @click="clickOverlay">
+    <div class="modal-dialog" role="document" @click.stop>
       <div class="modal-content">
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
@@ -34,6 +34,7 @@ export default {
       this.confirmAfterHook = args.confirmAfter
       this.cancelBeforeHook = args.cancelBefore
       this.cancelAfterHook = args.cancelAfter
+      this.clickOverlayHook = args.clickOverlay
 
       $('#bsModal').modal('show')
     })
@@ -45,6 +46,10 @@ export default {
       this.cancelAfterHook()
       this.resetProperties()
     })
+
+    $('#bsModal').on('overlay.bs.modal', (e) => {
+      this.clickOverlayHook()
+    })
   },
   data () {
     return {
@@ -56,7 +61,8 @@ export default {
       confirmBeforeHook: () => {},
       confirmAfterHook: () => {},
       cancelBeforeHook: () => {},
-      cancelAfterHook: () => {}
+      cancelAfterHook: () => {},
+      clickOverlayHook: () => {}
     }
   },
   methods: {
@@ -80,6 +86,9 @@ export default {
       this.confirmAfterHook = () => {}
       this.cancelBeforeHook = () => {}
       this.cancelAfterHook = () => {}
+    },
+    clickOverlay: function () {
+      this.clickOverlayHook()
     }
   }
 }
diff --git a/src/examples/ModalExample.vue b/src/examples/ModalExample.vue
index 62bc504..b7e1930 100644
--- a/src/examples/ModalExample.vue
+++ b/src/examples/ModalExample.vue
@@ -34,6 +34,9 @@ export default {
         },
         cancelAfter: () => {
           window.alert('닫기 이후 훅')
+        },
+        clickOverlay: () => {
+          window.alert('오버레이 클릭 훅')
         }
       })
     }