Merge pull request #174 from JaZo/issue-162

Added extra wrapper div to listen to background click events

src/Modal.vue

@@ -4,26 +4,28 @@
          ref="overlay"
          :class="overlayClass"
          :aria-expanded="visible.toString()"
-         :data-modal="name"
+         :data-modal="name">
-         @mousedown.stop="onBackgroundClick"
+      <div :class="backgroundClickClass"
-         @touchstart.stop="onBackgroundClick">
+           @mousedown.stop="onBackgroundClick"
-      <div class="v--modal-top-right">
+           @touchstart.stop="onBackgroundClick">
-        <slot name="top-right"/>
+        <div class="v--modal-top-right">
-      </div>
+          <slot name="top-right"/>
-      <transition :name="transition">
-        <div v-if="visibility.modal"
-             ref="modal"
-             :class="modalClass"
-             :style="modalStyle"
-             @mousedown.stop
-             @touchstart.stop>
-          <slot/>
-          <resizer v-if="resizable && !isAutoHeight"
-                   :min-width="minWidth"
-                   :min-height="minHeight"
-                   @resize="onModalResize"/>
         </div>
-      </transition>
+        <transition :name="transition">
+          <div v-if="visibility.modal"
+               ref="modal"
+               :class="modalClass"
+               :style="modalStyle"
+               @mousedown.stop
+               @touchstart.stop>
+            <slot/>
+            <resizer v-if="resizable && !isAutoHeight"
+                     :min-width="minWidth"
+                     :min-height="minHeight"
+                     @resize="onModalResize"/>
+          </div>
+        </transition>
+      </div>
     </div>
   </transition>
 </template>
@@ -359,6 +361,12 @@ export default {
         scrollable: this.scrollable && this.isAutoHeight
       }
     },
+    /**
+     * Returns class list for click outside overlay (background click)
+     */
+    backgroundClickClass() {
+      return ['v--modal-background-click']
+    },
     /**
      * Returns class list for modal itself
      */
@@ -656,10 +664,15 @@ export default {
   height: 100%;
   min-height: 100vh;
   overflow-y: auto;
-  padding-bottom: 10px;
   -webkit-overflow-scrolling: touch;
 }
 
+.v--modal-overlay .v--modal-background-click {
+  min-height: 100%;
+  width: 100%;
+  padding-bottom: 10px;
+}
+
 .v--modal-overlay .v--modal-box {
   position: relative;
   overflow: hidden;