Fix event collision (Closes #82). Fix date formatting bug in Safari.

Author: Nathan Reyes

CHANGELOG.md

@@ -1,3 +1,8 @@
+# v0.7.2
+## Bug Fixes
+* Fix event collision when using render functions. Closes #82.
+* Fix date formatting bug in Safari.
+
 # v0.7.1
 ## Bug Fixes
 * Fix setup crash when not manually specifying a locale

docs/components/date-picker/examples/ExDatePicker.vue

@@ -16,7 +16,11 @@
     :popover-visibility='popoverVisibility'
     :popover-direction='popoverDirection'
     :popover-align='popoverAlign'
-    v-model='selectedValue'>
+    v-model='selectedValue'
+    @drag='dragValue = $event'
+    :available-dates='availableDates'
+    @input='input'
+    >
   </v-date-picker>
 </template>
 
@@ -37,6 +41,8 @@ export default {
   },
   data() {
     return {
+      dragValue: null,
+      availableDates: null,
       fromPage: null,
       toPage: null,
       selectedValue: new Date(),
@@ -46,6 +52,28 @@ export default {
       },
     };
   },
+  watch: {
+  	dragValue(val, oldVal) {
+    	if (!val) {
+      	this.availableDates = null;
+      } else if (val && !oldVal) {
+      	this.availableDates = {
+        	start: this.addDays(val.start, -2),
+          end: this.addDays(val.start, 2)
+        }
+      }
+    }
+  },
+  methods: {
+    addDays(date, days) {
+      const result = new Date(date);
+      result.setDate(result.getDate() + days);
+      return result;
+    },
+    input() {
+      alert('input');
+    }
+  }
 };
 </script>
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "v-calendar",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "description": "A clean and extendable plugin for building simple attributed calendars in Vue.js.",
   "keywords": [
     "vue",

src/components/Calendar.vue

@@ -3,6 +3,7 @@ import CalendarPane from './CalendarPane';
 import Tag from './Tag';
 import AttributeStore from '../utils/attributeStore';
 import defaults from '../utils/defaults';
+import { mergeListeners } from '@/mixins';
 import {
   todayComps,
   pageIsEqualToPage,
@@ -16,25 +17,25 @@ import {
 import '../styles/lib.sass';
 
 export default {
+  mixins: [mergeListeners],
   render(h) {
     const getPaneComponent = position => h(CalendarPane, {
       attrs: {
+        ...this.$attrs,
         position,
         page: position < 2 ? this.fromPage_ : this.toPage_,
         minPage: position < 2 ? this.minPage : this.minToPage,
         maxPage: position < 2 ? this.maxFromPage : this.maxPage,
         styles: this.themeStyles_,
         attributes: this.attributes_,
-        ...this.$attrs,
       },
-      on: {
+      on: this.mergeListeners({
         titleclick: this.titleClick,
         'update:page': (val) => {
           if (position < 2) this.fromPage_ = val;
           else this.toPage_ = val;
         },
-        ...this.$listeners,
-      },
+      }),
       slots: this.$slots,
       scopedSlots: this.$scopedSlots,
     });

src/components/DatePicker.vue

@@ -11,13 +11,16 @@ import { addDays } from '@/utils/dateInfo';
 import { pageIsBetweenPages } from '@/utils/helpers';
 import { isString, isFunction, isObject, isArray } from '@/utils/typeCheckers';
 import { format, parse } from '@/utils/fecha';
+import { mergeListeners } from '@/mixins';
 
 export default {
+  mixins: [mergeListeners],
   render(h) {
     const getPickerComponent = asSlot => h(
       this.componentName,
       {
         attrs: {
+          ...this.$attrs,
           value: this.value,
           isRequired: this.isRequired,
           selectAttribute: this.selectAttribute_,
@@ -26,14 +29,12 @@ export default {
           fromPage: this.fromPage_,
           toPage: this.toPage_,
           themeStyles: this.themeStyles_,
-          ...this.$attrs,
         },
-        on: {
+        on: this.mergeListeners({
           'update:fromPage': val => this.fromPage_ = val,
           'update:toPage': val => this.toPage_ = val,
           drag: val => this.dragValue = val,
-          ...this.filteredListeners(),
-        },
+        }, this.filteredListeners()),
         slots: this.$slots,
         scopedSlots: this.$scopedSlots,
         ...(asSlot && {

src/components/DateRangePicker.vue

@@ -1,20 +1,21 @@
 <script>
 import Calendar from './Calendar';
 import { rangeNormalizer } from '../utils/pickerProfiles';
+import { mergeListeners } from '@/mixins';
 
 export default {
+  mixins: [mergeListeners],
   render(h) {
     return h(Calendar, {
       attrs: {
+        ...this.$attrs,
         attributes: this.attributes_,
         themeStyles: this.themeStyles_,
-        ...this.$attrs,
       },
-      on: {
+      on: this.mergeListeners({
         dayclick: this.clickDay,
         daymouseenter: this.enterDay,
-        ...this.$listeners,
-      },
+      }),
       slots: this.$slots,
       scopedSlots: this.$scopedSlots,
     });

src/components/MultipleDatePicker.vue

@@ -1,18 +1,19 @@
 <script>
 import Calendar from './Calendar';
 import { multipleHasValue, singleValuesAreEqual, multipleNormalizer } from '../utils/pickerProfiles';
+import { mergeListeners } from '@/mixins';
 
 export default {
+  mixins: [mergeListeners],
   render(h) {
     return h(Calendar, {
       attrs: {
-        attributes: this.attributes_,
         ...this.$attrs,
+        attributes: this.attributes_,
       },
-      on: {
+      on: this.mergeListeners({
         dayclick: this.clickDay,
-        ...this.$listeners,
-      },
+      }),
       slots: this.$slots,
       scopedSlots: this.$scopedSlots,
     });

src/components/SingleDatePicker.vue

@@ -1,18 +1,19 @@
 <script>
 import Calendar from './Calendar';
 import { singleHasValue, singleValuesAreEqual } from '../utils/pickerProfiles';
+import { mergeListeners } from '@/mixins';
 
 export default {
+  mixins: [mergeListeners],
   render(h) {
     return h(Calendar, {
       attrs: {
-        attributes: this.attributes_,
         ...this.$attrs,
+        attributes: this.attributes_,
       },
-      on: {
+      on: this.mergeListeners({
         dayclick: this.clickDay,
-        ...this.$listeners,
-      },
+      }),
       slots: this.$slots,
       scopedSlots: this.$scopedSlots,
     });

src/mixins/index.js

@@ -0,0 +1,10 @@
+export const mergeListeners = {
+  methods: {
+    mergeListeners(sourceListeners, targetListeners = this.$listeners) {
+      return Object.keys(sourceListeners).reduce((existing, event) => {
+        existing[event] = existing[event] ? [existing[event], sourceListeners[event]] : sourceListeners[event];
+        return existing;
+      }, { ...targetListeners });
+    },
+  },
+};