Fix bug with duplicate events fired. Closes #15.

Author: Nathan Reyes

CHANGELOG.md

@@ -1,4 +1,5 @@
 ## 0.3.1
+* Fix bug with duplicate events being fired. Closes #15.
 * Fix application of styling for date pickers when not inline. Closes #17.
 
 ## 0.3.0

src/components/Calendar.vue

@@ -225,12 +225,4 @@ export default {
   border: 1px inset
   border-color: #e3e3e3
 
-.c-footer-container
-  // width: 100%
-
-.c-footer
-  display: flex
-  justify-content: center
-  padding: 5px 0
-
 </style>

src/components/DatePicker.vue

@@ -13,7 +13,7 @@
     @drag='dragValue = $event'
     @input='updateValue'
     v-bind='$attrs'
-    v-on='$listeners'
+    v-on='filteredListeners()'
     v-if='isInline'>
   </component>
   <popover
@@ -50,9 +50,8 @@
       :attributes='attributes_'
       :date-validator='dateValidator'
       @drag='dragValue = $event'
-      @input='popoverInput'
       v-bind='$attrs'
-      v-on='$listeners'>
+      v-on='filteredListeners()'>
     </component>
   </popover>
 
@@ -65,7 +64,12 @@ import MultipleDatePicker from './MultipleDatePicker';
 import DateRangePicker from './DateRangePicker';
 import DateInfo from '../utils/dateInfo';
 import defaults from '../utils/defaults';
-import { getDateComps, getNextPage, getMaxPage, blendColors } from '../utils/helpers';
+import {
+  getDateComps,
+  getNextPage,
+  getMaxPage,
+  getLastArrayItem,
+  blendColors } from '../utils/helpers';
 
 export default {
   components: {
@@ -257,43 +261,58 @@ export default {
     toPage_(val) {
       this.$emit('update:toPage', val);
     },
-    dragValue(val) {
-      // Forward drag event
-      this.$emit('drag', val);
-    },
     mode() {
       // Clear value on select mode change
       this.$emit('input', null);
     },
     suggestedInputText(val) {
       this.valueText = val;
     },
+    value() {
+      if (!this.popoverKeepVisibleOnInput) this.popoverForceHidden = true;
+    },
   },
   created() {
     this.assignPageRange();
     this.valueText = this.suggestedInputText;
   },
   methods: {
+    filteredListeners() {
+      // Remove parent listeners that we want to intercept and re-broadcast
+      const listeners = { ...this.$listeners };
+      delete listeners['update:fromPage'];
+      delete listeners['update:toPage'];
+      return listeners;
+    },
     popoverDidDisappear() {
       this.assignPageRange();
     },
     assignPageRange() {
-      if (this.value) {
-        this.fromPage_ = this.value.start ? getDateComps(this.value.start) : getDateComps(this.value);
-        if (this.value.end) this.toPage_ = getMaxPage(getDateComps(this.value.end), getNextPage(this.fromPage_));
+      if (!this.value) return;
+      switch (this.mode) {
+        case 'single':
+          this.fromPage_ = getDateComps(this.value);
+          this.toPage_ = getNextPage(this.fromPage_);
+          break;
+        case 'multiple':
+          if (!this.value.length) return;
+          this.fromPage_ = getDateComps(this.value[0]);
+          this.toPage_ = getMaxPage(getDateComps(getLastArrayItem(this.value)), getNextPage(this.fromPage_));
+          break;
+        case 'range':
+          if (!this.value.start || !this.value.end) return;
+          this.fromPage_ = getDateComps(this.value.start);
+          this.toPage_ = getMaxPage(getDateComps(this.value.end), getNextPage(this.fromPage_));
+          break;
+        default:
       }
     },
-    popoverInput(e) {
-      this.updateValue(e);
-      // if (!this.popoverKeepVisibleOnInput) this.popoverForceHidden = true;
-    },
     updateValue(value = this.valueText) {
       if (typeof value === 'string') {
         this.$emit('input', this.parseValue(value));
       } else {
         this.$emit('input', value);
       }
-      if (!this.popoverKeepVisibleOnInput) this.popoverForceHidden = true;
     },
     parseValue(valueText) {
       let value = null;

src/components/DateRangePicker.vue

@@ -2,10 +2,10 @@
 <calendar
   :dayContentHoverStyle='dayContentHoverStyle_'
   :attributes='attributes_'
-  v-bind='$attrs'
-  v-on='$listeners'
   @daySelect='selectDay'
-  @dayMouseEnter='enterDay'>
+  @dayMouseEnter='enterDay'
+  v-bind='$attrs'
+  v-on='$listeners'>
 </calendar> 
 </template>
 
@@ -99,8 +99,6 @@ export default {
           this.$emit('input', newValue.toRange());
         }
       }
-      // Forward the event
-      this.$emit('daySelect', day);
     },
     enterDay(day) {
       // Make sure drag has been initialized
@@ -121,8 +119,6 @@ export default {
           this.dayContentHoverStyle_ = this.disabledAttribute.contentHoverStyle;
         }
       }
-      // Forward the event
-      this.$emit('dayMouseEnter', day);
     },
     // Ranges can privately have end date earlier than start date
     // This function will correct the order before exposing it to to other components

src/components/MultipleDatePicker.vue

@@ -1,9 +1,9 @@
 <template>
 <calendar
   :attributes='attributes_'
+  @daySelect='selectDay'
   v-bind='$attrs'
-  v-on='$listeners'
-  @daySelect='selectDay'>
+  v-on='$listeners'>
 </calendar>
 </template>
 
@@ -51,8 +51,6 @@ export default {
           this.$emit('input', [...this.value, day.date].sort((a, b) => a.getTime() - b.getTime()));
         }
       }
-      // Forward the event
-      this.$emit('daySelect', day);
     },
   },
 };

src/components/SingleDatePicker.vue

@@ -41,8 +41,6 @@ export default {
       if (this.dateValidator(day.date, 'selectDisabled')) {
         this.$emit('input', (day.date === this.value) ? null : day.date);
       }
-      // Forward the event
-      this.$emit('daySelect', day);
     },
   },
 };