Add vue-clickaway to handle outside clicks and replace the overlay

Author: ellerynz

dist/vue-rangedate-picker.js

@@ -95,6 +95,7 @@
     "node": ">= 6.0"
   },
   "dependencies": {
-    "fecha": "^2.3.2"
+    "fecha": "^2.3.2",
+    "vue-clickaway": "^2.2.2"
   }
 }

dist/vue-rangedate-picker.min.js

@@ -1,5 +1,5 @@
 <template>
-  <div class="calendar-root">
+  <div class="calendar-root" v-on-clickaway="hideCalendar">
     <div class="input-date" @click="toggleCalendar()"> {{getDateString(dateRange.start)}} - {{getDateString(dateRange.end)}}</div>
     <div class="calendar" :class="{'calendar-mobile ': isCompact, 'calendar-right-to-left': isRighttoLeft}" v-if="isOpen">
       <div class="calendar-head" v-if="!isCompact">
@@ -57,7 +57,6 @@
       </div>
 
     </div>
-    <div class='overlay' @click="toggleCalendar()" v-if="isOpen"></div>
   </div>
 </template>
 
@@ -282,12 +281,4 @@ li.calendar_days_in-range {
 .cancel-button-hidden {
   display: none;
 }
-
-.overlay {
-  bottom: 0;
-  left: 0;
-  position: fixed;
-  right: 0;
-  top: 0;
-}
 </style>

package-lock.json

@@ -1,4 +1,5 @@
 import fecha from 'fecha'
+import { mixin as clickaway } from 'vue-clickaway'
 
 const defaultConfig = {}
 const defaultI18n = 'ID'
@@ -120,6 +121,7 @@ const defaultPresets = function (i18n = defaultI18n) {
 }
 
 export default {
+  mixins: [clickaway],
   name: 'vue-rangedate-picker',
   props: {
     configs: {
@@ -267,6 +269,15 @@ export default {
     }
   },
   methods: {
+    hideCalendar: function () {
+      if (this.isCompact) {
+        this.showMonth = false
+        return
+      }
+      this.showMonth = false
+      this.isOpen = false
+      return
+    },
     toggleCalendar: function () {
       if (this.isCompact) {
         this.showMonth = !this.showMonth