@quasar/quasar-ui-qcalendar - npm Package Compare versions

Comparing version 2.3.2 to 2.4.0

package.json

 {
   "name": "@quasar/quasar-ui-qcalendar",
-  "version": "2.3.2",
+  "version": "2.4.0",
   "author": "Jeff Galbraith <[e-mail]>",
@@ -72,3 +72,3 @@ "description": "QCalendar - Day/Month/Week Calendars, Popups, Date Pickers, Schedules, Agendas and Planners for your Quasar Apps",
     "dotenv": "^8.2.0",
-    "eslint": "^7.10.0",
+    "eslint": "^7.11.0",
     "eslint-loader": "^4.0.2",
@@ -82,3 +82,3 @@ "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-vue": "^7.0.1",
-    "jest": "^26.5.2",
+    "jest": "^26.5.3",
     "jest-serializer-vue": "^2.0.2",
@@ -92,5 +92,5 @@ "jest-transform-stub": "^2.0.0",
     "quasar": "^1.14.1",
-    "quasar-json-api": "^1.0.0",
+    "quasar-json-api": "^1.0.1",
     "rimraf": "^3.0.2",
-    "rollup": "^2.28.2",
+    "rollup": "^2.29.0",
     "rollup-plugin-vue": "=5.1.9",
@@ -97,0 +97,0 @@ "uglify-es": "^3.3.9",

src/components/QCalendar.js

@@ -51,3 +51,4 @@ // Mixins
     lastStart: undefined,
-    lastEnd: undefined
+    lastEnd: undefined,
+    emittedValue: ''
   }),
@@ -165,2 +166,4 @@
   beforeMount () {
+    this.emittedValue = this.value
+
     // get start and end dates
@@ -171,3 +174,7 @@ this.__checkChange()
   watch: {
-    __renderProps: '__checkChange'
+    __renderProps: '__checkChange',
+
+    emittedValue (val, oldVal) {
+      this.$emit('input', val)
+    }
   },
@@ -274,3 +281,3 @@
 
-      this.$emit('input', moved.date)
+      this.emittedValue = moved.date
       this.$emit('moved', moved)
@@ -280,3 +287,3 @@ },
     moveToToday () {
-      this.$emit('input', today())
+      this.emittedValue = today()
     },
@@ -377,11 +384,10 @@
         ...this.$listeners,
+        // DEPRECATED in v2.4.0
         'click:date': (timestamp) => {
           if (this.$listeners.input !== undefined) {
-            if (timestamp.date !== undefined) {
-              this.$emit('input', timestamp.date)
+            if (timestamp.date !== undefined && this.emittedValue !== timestamp.date) {
+              this.emittedValue = timestamp.date
             }
-            else if (timestamp.day !== undefined && timestamp.day.date !== undefined) {
-              this.$emit('input', timestamp.day.date)
-            }
           }
+          // Because we highjack this event for input, pass it on to parent
           if (this.$listeners['click:date']) {
@@ -391,2 +397,15 @@ /* eslint-disable-next-line */
           }
+        },
+        // ---
+        'click:date2': ({ scope, event }) => {
+          if (this.$listeners.input !== undefined) {
+            if (scope.timestamp.date !== undefined && this.emittedValue !== scope.timestamp.date) {
+              this.emittedValue = scope.timestamp.date
+            }
+          }
+          // Because we highjack this event for input, pass it on to parent
+          if (this.$listeners['click:date2']) {
+            /* eslint-disable-next-line */
+            this.$emit('click:date2', { scope, event })
+          }
         }
@@ -393,0 +412,0 @@ },

src/components/QCalendarAgenda.js

@@ -140,5 +140,12 @@ // Mixins
         },
-        on: this.getDefaultMouseEventHandlers(':column:head', event => {
-          return { scope, event }
+        // :column:head DEPRECATED in v2.4.0
+        on: this.getDefaultMouseEventHandlers2(':column:head', ':column:header2', (event, eventName) => {
+          if (eventName.indexOf('2') > -1) {
+            return { scope: { column, index: idx }, event }
+          }
+          else {
+            return { scope, event }
+          }
         })
+        // ---
       }), [
@@ -248,5 +255,12 @@ this.noDefaultHeaderText !== true && this.__renderHeadColumn(h, column),
         },
-        on: this.getDefaultMouseEventHandlers(':column', event => {
-          return { scope, event }
+        // :column DEPRECATED in v2.4.0
+        on: this.getDefaultMouseEventHandlers2(':column', ':column2', (event, eventName) => {
+          if (eventName.indexOf('2') > -1) {
+            return { scope: scope, event }
+          }
+          else {
+            return { scope, event }
+          }
         })
+        // ---
       }), [
@@ -304,6 +318,14 @@ slot && slot(scope)
         },
-        on: this.getDefaultMouseEventHandlers(':time', event => {
+        // :time DEPRECATED in v2.4.0
+        on: this.getDefaultMouseEventHandlers2(':time', ':time2', (event, eventName) => {
           const scope = this.getScopeForSlot(this.getTimestampAtEvent(event, day), idx)
-          return { scope, event }
+          if (eventName.indexOf('2') > -1) {
+            scope.index = idx
+            return { scope, event }
+          }
+          else {
+            return { scope, event }
+          }
         })
+        // ---
       }), [
@@ -318,8 +340,3 @@ slot && slot(scope)
       staticClass: 'q-calendar-agenda',
-      class: this.classes,
-      directives: [{
-        modifiers: { quiet: true },
-        name: 'resize',
-        value: this.onResize
-      }]
+      class: this.classes
     }, [
@@ -326,0 +343,0 @@ !this.hideHeader && this.__renderHead(h),

src/components/QCalendarDaily.js

@@ -111,3 +111,6 @@ // Quasar
       return h('div', updateColors(colors.get(color), colors.get(backgroundColor), {
-        staticClass: 'q-calendar-daily__intervals-head q-calendar-daily__intervals-head--text'
+        staticClass: 'q-calendar-daily__intervals-head q-calendar-daily__intervals-head--text',
+        on: this.getDefaultMouseEventHandlers(':interval:header2', event => {
+          return { scope: { days: this.days }, event }
+        })
       }), [
@@ -178,5 +181,9 @@ slot && slot(this.days)
         },
-        on: this.getDefaultMouseEventHandlers(':day', event => {
-          return { scope, event }
-        })
+        on: {
+          // :day DEPRECATED in v2.4.0
+          ...this.getDefaultMouseEventHandlers2(':day', ':day:header2', event => {
+            return { scope, event }
+          })
+          // ---
+        }
       }), [
@@ -236,3 +243,3 @@ headDaySlot !== undefined && headDaySlot(scope),
       const dayBtnSlot = this.$scopedSlots['day-btn']
-      const slotData = { dayLabel, timestamp: day, activeDate }
+      const scope = { dayLabel, timestamp: day, activeDate }
 
@@ -258,3 +265,3 @@ let colors = new Map(), color, backgroundColor
 
-      return dayBtnSlot ? dayBtnSlot(slotData) : h(QBtn, updateColors(colorCurrent !== undefined ? colorCurrent : colors.get(color), colors.get(backgroundColor), {
+      return dayBtnSlot ? dayBtnSlot(scope) : h(QBtn, updateColors(colorCurrent !== undefined ? colorCurrent : colors.get(color), colors.get(backgroundColor), {
         staticClass: 'q-calendar-daily__head-day-label',
@@ -277,8 +284,23 @@ class: [
         },
-        on: this.getMouseEventHandlers({
-          'click:date': { event: 'click', stop: true },
-          'contextmenu:date': { event: 'contextmenu', stop: true, prevent: true, result: false }
-        }, _event => day)
+        on: {
+          // DEPRECATED in v2.4.0
+          ...this.getMouseEventHandlers({
+            'click:date': { event: 'click', stop: true },
+            'contextmenu:date': { event: 'contextmenu', stop: true, prevent: true, result: false },
+            // ---
+            'click:date2': { event: 'click', stop: true },
+            'contextmenu:date2': { event: 'contextmenu', stop: true, prevent: true, result: false }
+          }, (event, eventName) => {
+            if (eventName.indexOf('2') > -1) {
+              return { scope: { timestamp: day }, event }
+            }
+            // DEPRECATED in v2.4.0
+            else {
+              return day
+            }
+            // ---
+          })
+        }
       }), [
-        dayLabelSlot ? dayLabelSlot(slotData) : dayLabel
+        dayLabelSlot ? dayLabelSlot(scope) : dayLabel
       ])
@@ -410,6 +432,10 @@ },
         },
-        on: this.getDefaultMouseEventHandlers(':time', event => {
-          const scope = this.getScopeForSlot(this.getTimestampAtEvent(event, day), idx)
-          return { scope, event }
-        })
+        on: {
+          // :time DEPRECATED in v2.4.0
+          ...this.getDefaultMouseEventHandlers2(':time', ':time2', event => {
+            const scope = this.getScopeForSlot(this.getTimestampAtEvent(event, day), idx)
+            return { scope, event }
+          })
+          // ---
+        }
       }), [
@@ -473,5 +499,15 @@ ...this.__renderDayIntervals(h, dayIndex, idx),
         staticClass: 'q-calendar-daily__intervals-body',
-        on: this.getDefaultMouseEventHandlers(':interval', _event => {
-          return this.getTimestampAtEvent(_event, this.parsedStart)
-        })
+        on: {
+          // :interval DEPRECATED in v2.4.0
+          ...this.getDefaultMouseEventHandlers2(':interval', ':interval2', (event, eventName) => {
+            const timestamp = this.getTimestampAtEvent(event, this.parsedStart)
+            if (eventName.indexOf('2') > -1) {
+              return { scope: { timestamp }, event }
+            }
+            else {
+              return timestamp
+            }
+          })
+          // ---
+        }
       }
@@ -478,0 +514,0 @@

src/components/QCalendarResource.js

@@ -34,4 +34,3 @@ // Quasar
     return {
-      minWidth: '100px',
-      scrollWidth: '0'
+      minWidth: '100px'
     }
@@ -68,8 +67,2 @@ },
   methods: {
-    __getParentWidth () {
-      if (this.$parent && this.$parent.$el) {
-        return this.$parent.$el.getBoundingClientRect().width + 15
-      }
-    },
-
     __renderHeadIntervals (h) {
@@ -103,4 +96,9 @@ return h('div', {
       }
+      let dragOver
+
       return slot ? slot(scope) : h('div', updateColors(colors.get(color), colors.get(backgroundColor), {
         staticClass: 'q-calendar-resource__head-label',
+        class: {
+          'q-calendar-resource__head-label--droppable': dragOver
+        },
         style: {
@@ -111,5 +109,24 @@ maxWidth: width,
         },
-        on: this.getDefaultMouseEventHandlers(':interval', event => {
-          return { interval, index, label, event }
+        domProps: {
+          ondragover: (e) => {
+            if (this.dragOverFunc !== undefined) {
+              dragOver = this.dragOverFunc(e, interval, 'interval', index)
+            }
+          },
+          ondrop: (e) => {
+            if (this.dropFunc !== undefined) {
+              this.dropFunc(e, interval, 'interval', index)
+            }
+          }
+        },
+        // :interval DEPRECATED in v2.4.0
+        on: this.getDefaultMouseEventHandlers2(':interval', ':interval2', (event, eventName) => {
+          if (eventName.indexOf('2') > -1) {
+            return { scope: { timestamp: interval, index, label }, event }
+          }
+          else {
+            return { interval, index, label, event }
+          }
         })
+        // ---
       }), label)
@@ -157,3 +174,7 @@ },
       }
-
+      const scope = {
+        timestamp: this.days[0],
+        resources: this.resources,
+        intervals: this.intervals[0]
+      }
       const intervals = this.intervals
@@ -167,3 +188,6 @@
           height
-        }
+        },
+        on: this.getDefaultMouseEventHandlers(':resource:header2', event => {
+          return { scope, event }
+        })
       }), [
@@ -230,3 +254,3 @@ slot && slot({ date: this.value, intervals })
         this.__renderResourceLabel(h, resource, idx, indentLevel),
-        this.__renderResourceIntervals(h, resource),
+        this.__renderResourceIntervals(h, resource, idx),
         slot && slot({ resource, index: idx })
@@ -267,5 +291,12 @@ ])
         },
-        on: this.getDefaultMouseEventHandlers(':resource', event => {
-          return { resource, index: idx, event }
+        // :resource DEPRECATED in v2.4.0
+        on: this.getDefaultMouseEventHandlers2(':resource', ':resource2', (event, eventName) => {
+          if (eventName.indexOf('2') > -1) {
+            return { scope: { resource, index: idx, intervals: this.intervals }, event }
+          }
+          else {
+            return { resource, index: idx, event }
+          }
         })
+        // ---
       }), [
@@ -303,3 +334,3 @@ slot ? slot(scope) : this.__renderResourceText(h, resource, idx, indentLevel)
 
-    __renderResourceIntervals (h, resource) {
+    __renderResourceIntervals (h, resource, idx) {
       const slot = this.$scopedSlots['resource-intervals']
@@ -312,3 +343,3 @@ const timeStartPosX = this.timeStartPosX,
       }, [
-        this.intervals.map(intervals => intervals.map(interval => this.__renderResourceInterval(h, resource, interval))),
+        this.intervals.map(intervals => intervals.map(interval => this.__renderResourceInterval(h, resource, interval, idx))),
         slot && slot({ resource, intervals, timeStartPosX, timeDurationWidth })
@@ -319,3 +350,3 @@ ])
     // interval related to resource
-    __renderResourceInterval (h, resource, interval) {
+    __renderResourceInterval (h, resource, interval, idx) {
       // called for each interval
@@ -326,4 +357,9 @@ const slot = this.$scopedSlots['resource-interval']
       const height = convertToUnit(this.parsedResourceHeight)
+      let dragOver
+
       return h('div', {
         staticClass: 'q-calendar-resource__resource-interval',
+        class: {
+          'q-calendar-resource__resource-interval--droppable': dragOver
+        },
         style: {
@@ -334,6 +370,27 @@ maxWidth: width,
         },
-        on: this.getDefaultMouseEventHandlers(':time', event => {
+        domProps: {
+          ondragover: (e) => {
+            if (this.dragOverFunc !== undefined) {
+              dragOver = this.dragOverFunc(e, interval, 'resource', resource)
+            }
+          },
+          ondrop: (e) => {
+            if (this.dropFunc !== undefined) {
+              this.dropFunc(e, interval, 'resource', resource)
+            }
+          }
+        },
+        // :time DEPRECATED in v2.4.0
+        on: this.getDefaultMouseEventHandlers2(':time', ':time2', (event, eventName) => {
           const scope = this.getScopeForSlotX(this.getTimestampAtEventX(event, interval))
-          return { scope, resource, event }
+          if (eventName.indexOf('2') > -1) {
+            scope.resource = resource
+            scope.index = idx
+            return { scope, event }
+          }
+          else {
+            return { scope, resource, event }
+          }
         })
+        // ---
       }, [
@@ -350,8 +407,4 @@ slot && slot(slotData)
   render (h) {
-    const maxWidth = convertToUnit(this.__getParentWidth())
     return h('div', {
-      staticClass: 'q-calendar-resource',
-      style: {
-        maxWidth: maxWidth
-      }
+      staticClass: 'q-calendar-resource'
     }, [
@@ -358,0 +411,0 @@ this.__renderBody(h)

src/components/QCalendarScheduler.js

@@ -129,2 +129,6 @@ // Quasar
       }
+      const scope = {
+        days: this.days,
+        resources: this.resources
+      }
 
@@ -135,3 +139,6 @@ return h('div', updateColors(colors.get(color), colors.get(backgroundColor), {
           width
-        }
+        },
+        on: this.getDefaultMouseEventHandlers(':resource:header2', event => {
+          return { scope, event }
+        })
       }), [
@@ -210,5 +217,7 @@ slot && slot(this.days)
         },
-        on: this.getDefaultMouseEventHandlers(':day', event => {
+        // :day DEPRECATED in v2.4.0
+        on: this.getDefaultMouseEventHandlers2(':day', ':day:header2', event => {
           return { scope, event }
         })
+        // ---
       }), [
@@ -265,4 +274,3 @@ headDaySlot !== undefined && headDaySlot(scope),
       const dayBtnSlot = this.$scopedSlots['day-btn']
-      const scope = { timestamp: day, idx }
-      const slotData = Object.assign(scope, { dayLabel, activeDate })
+      const scope = { timestamp: day, index: idx, dayLabel, activeDate }
 
@@ -288,3 +296,3 @@ let colors = new Map(), color, backgroundColor
 
-      return dayBtnSlot ? dayBtnSlot(slotData) : h(QBtn, updateColors(colorCurrent !== undefined ? colorCurrent : colors.get(color), colors.get(backgroundColor), {
+      return dayBtnSlot ? dayBtnSlot(scope) : h(QBtn, updateColors(colorCurrent !== undefined ? colorCurrent : colors.get(color), colors.get(backgroundColor), {
         staticClass: 'q-calendar-scheduler__head-day-label',
@@ -307,8 +315,23 @@ class: [
         },
-        on: this.getMouseEventHandlers({
-          'click:date': { event: 'click', stop: true },
-          'contextmenu:date': { event: 'contextmenu', stop: true, prevent: true, result: false }
-        }, _event => scope)
+        on: {
+          ...this.getMouseEventHandlers({
+            // DEPRECATED in v2.4.0
+            'click:date': { event: 'click', stop: true },
+            'contextmenu:date': { event: 'contextmenu', stop: true, prevent: true, result: false },
+            // ---
+            'click:date2': { event: 'click', stop: true },
+            'contextmenu:date2': { event: 'contextmenu', stop: true, prevent: true, result: false }
+          }, (event, eventName) => {
+            if (eventName.indexOf('2') > -1) {
+              return { scope, event }
+            }
+            // DEPRECATED in v2.4.0
+            else {
+              return scope
+            }
+            // ---
+          })
+        }
       }), [
-        dayLabelSlot ? dayLabelSlot(slotData) : dayLabel
+        dayLabelSlot ? dayLabelSlot(scope) : dayLabel
       ])
@@ -455,7 +478,7 @@ },
       else {
-        return this.days.map((day, index) => this.__renderDay(h, resource, day, index))
+        return this.days.map((day, index) => this.__renderDay(h, resource, day, index, idx))
       }
     },
 
-    __renderDay (h, resource, day, idx) {
+    __renderDay (h, resource, day, idx, resourceIndex) {
       const width = 100 / this.days.length
@@ -490,7 +513,7 @@ let colors = new Map(), color, backgroundColor
       }), [
-        this.__renderDayResource(h, resource, day, idx)
+        this.__renderDayResource(h, resource, day, idx, resourceIndex)
       ])
     },
 
-    __renderDayResource (h, resource, day, idx) {
+    __renderDayResource (h, resource, day, idx, resourceIndex) {
       const styler = this.resourceStyle || this.resourceStyleDefault
@@ -501,3 +524,3 @@ const slot = this.$scopedSlots['scheduler-resource-day']
 
-      const style = styler({ timestamp: day, index: idx, resource })
+      const style = styler({ timestamp: day, index: resourceIndex, resource })
 
@@ -514,3 +537,3 @@ const data = {
             if (this.dragOverFunc !== undefined) {
-              dragOver = this.dragOverFunc(_event, resource, 'resource', idx)
+              dragOver = this.dragOverFunc(_event, resource, 'resource', resourceIndex)
             }
@@ -520,10 +543,12 @@ },
             if (this.dropFunc !== undefined) {
-              this.dropFunc(_event, resource, 'resource', idx)
+              this.dropFunc(_event, resource, 'resource', resourceIndex)
             }
           }
         },
-        on: this.getDefaultMouseEventHandlers(':resource:day', event => {
-          const scope = this.getScopeForSlot(this.getTimestampAtEvent(event, day), idx, resource)
+        // :resource:day DEPRECATED in v2.4.0
+        on: this.getDefaultMouseEventHandlers2(':resource:day', ':resource:day2', event => {
+          const scope = this.getScopeForSlot(this.getTimestampAtEvent(event, day), resourceIndex, resource)
           return { scope, event }
         })
+        // ---
       }
@@ -540,3 +565,4 @@
         resource: resource,
-        index: idx
+        index: idx,
+        days: this.days
       }
@@ -567,5 +593,7 @@ const width = convertToUnit(this.parsedResourceWidth)
         },
-        on: this.getDefaultMouseEventHandlers(':resource', event => {
+        // :resource DEPRECATED in v2.4.0
+        on: this.getDefaultMouseEventHandlers2(':resource', ':resource2', event => {
           return { scope, event }
         })
+        // ---
       }, [
@@ -572,0 +600,0 @@ slot ? slot(scope) : h('div', updateColors(colors.get(color), colors.get(backgroundColor), {

src/components/QCalendarWeekly.js

@@ -60,5 +60,5 @@ // Quasar
     todayWeek () {
-      const today = this.times.today
-      const start = this.getStartOfWeek(today)
-      const end = this.getEndOfWeek(today)
+      const day = this.days[0]
+      const start = this.getStartOfWeek(day)
+      const end = this.getEndOfWeek(day)
 
@@ -68,3 +68,3 @@ return createDayList(
         end,
-        today,
+        day,
         this.weekdaySkips,
@@ -158,2 +158,9 @@ this.disabledBefore,
     __renderWorkWeekHead (h) {
+      const slot = this.$scopedSlots['workweek-header']
+      const scope = {
+        start: this.parsedStart,
+        end: this.parsedEnd,
+        miniMode: this.isMiniMode
+      }
+
       let colors = new Map(), color, backgroundColor
@@ -169,4 +176,7 @@ let updateColors = this.useDefaultTheme
       return h('div', updateColors(colors.get(color), colors.get(backgroundColor), {
-        staticClass: 'q-calendar-weekly__head-workweek'
-      }), '#')
+        staticClass: 'q-calendar-weekly__head-workweek',
+        on: this.getDefaultMouseEventHandlers(':workweek:header2', event => {
+          return { scope, event }
+        })
+      }), (slot ? slot({ scope }) : '#'))
     },
@@ -181,3 +191,2 @@
       const headDaySlot = this.$scopedSlots['head-day']
-      const slotData = { timestamp: day, index, miniMode: this.isMiniMode }
       let colors = new Map(), color, backgroundColor
@@ -191,2 +200,4 @@ let updateColors = this.useDefaultTheme
       }
+      const days = this.days.filter(day2 => day2.weekday === day.weekday)
+      const scope = { timestamp: day, days, index, miniMode: this.isMiniMode }
 
@@ -198,6 +209,9 @@ return h('div', updateColors(colors.get(color), colors.get(backgroundColor), {
           width
-        }
+        },
+        on: this.getDefaultMouseEventHandlers(':day:header2', event => {
+          return { scope, event }
+        })
       }), [
         headDaySlot === undefined && this.__renderHeadDayLabel(h, day, this.shortWeekdayLabel || this.isMiniMode),
-        headDaySlot !== undefined && headDaySlot(slotData)
+        headDaySlot !== undefined && headDaySlot(scope)
       ])
@@ -257,3 +271,3 @@ },
       const workweekLabel = Number(day.workweek).toLocaleString(this.locale)
-      const slotData = { workweekLabel, week, miniMode: this.isMiniMode }
+      const scope = { workweekLabel, week, miniMode: this.isMiniMode }
       const colorCurrent = timestamp && timestamp.current === true ? this.color : undefined
@@ -287,7 +301,8 @@ const height = convertToUnit(this.dayHeight)
         },
-        on: this.getDefaultMouseEventHandlers(':workweek', event => {
-          const scope = slotData
+        // :workweek DEPRECATED in v2.4.0
+        on: this.getDefaultMouseEventHandlers2(':workweek', ':workweek2', event => {
           return { scope, event }
         })
-      }), slot ? slot(slotData) : workweekLabel)
+        // ---
+      }), slot ? slot(scope) : workweekLabel)
     },
@@ -299,3 +314,3 @@
       const slot = this.$scopedSlots.day
-      const slotData = { outside, timestamp: day, miniMode: this.isMiniMode }
+      const scope = { outside, timestamp: day, miniMode: this.isMiniMode }
       const hasMonth = (outside === false && this.days.find(d => d.month === day.month).day === day.day && this.showMonthLabel === true)
@@ -354,6 +369,7 @@
         },
-        on: this.getDefaultMouseEventHandlers(':day', event => {
-          const scope = day
+        // :day DEPRECATED in v2.4.0
+        on: this.getDefaultMouseEventHandlers2(':day', ':day2', event => {
           return { scope, event }
         })
+        // ---
       }), [
@@ -365,3 +381,3 @@ this.__renderDayLabel(h, day),
           staticClass: 'q-calendar-weekly__day--content full-width' + (this.isMiniMode === true ? ' row justify-around' : '')
-        }, slot ? slot(slotData) : '')
+        }, slot ? slot(scope) : '')
       ])
@@ -434,6 +450,21 @@ },
         },
-        on: this.getMouseEventHandlers({
-          'click:date': { event: 'click', stop: true },
-          'contextmenu:date': { event: 'contextmenu', stop: true, prevent: true, result: false }
-        }, _event => day)
+        on: {
+          ...this.getMouseEventHandlers({
+            // DEPRECATED in v2.4.0
+            'click:date': { event: 'click', stop: true },
+            'contextmenu:date': { event: 'contextmenu', stop: true, prevent: true, result: false },
+            // ---
+            'click:date2': { event: 'click', stop: true },
+            'contextmenu:date2': { event: 'contextmenu', stop: true, prevent: true, result: false }
+          }, (event, eventName) => {
+            if (eventName.indexOf('2') > -1) {
+              return { scope: { timestamp: day }, event }
+            }
+            // DEPRECATED in v2.4.0
+            else {
+              return day
+            }
+            // ---
+          })
+        }
       }), [
@@ -440,0 +471,0 @@ dayLabelSlot ? dayLabelSlot(slotData) : dayLabel

src/mixins/mouse.js

@@ -5,2 +5,43 @@ export default {
   methods: {
+
+    getDefaultMouseEventWithSuffix (suffix) {
+      return {
+        ['click' + suffix]: { event: 'click' },
+        ['contextmenu' + suffix]: { event: 'contextmenu', prevent: true, result: false },
+        ['mousedown' + suffix]: { event: 'mousedown' },
+        ['mousemove' + suffix]: { event: 'mousemove' },
+        ['mouseup' + suffix]: { event: 'mouseup' },
+        ['mouseenter' + suffix]: { event: 'mouseenter' },
+        ['mouseleave' + suffix]: { event: 'mouseleave' },
+        ['touchstart' + suffix]: { event: 'touchstart' },
+        ['touchmove' + suffix]: { event: 'touchmove' },
+        ['touchend' + suffix]: { event: 'touchend' }
+      }
+    },
+
+    getDefaultMouseEventHandlers2 (suffix1, suffix2, getEvent) {
+      return this.getMouseEventHandlers({
+        ['click' + suffix1]: { event: 'click' },
+        ['contextmenu' + suffix1]: { event: 'contextmenu', prevent: true, result: false },
+        ['mousedown' + suffix1]: { event: 'mousedown' },
+        ['mousemove' + suffix1]: { event: 'mousemove' },
+        ['mouseup' + suffix1]: { event: 'mouseup' },
+        ['mouseenter' + suffix1]: { event: 'mouseenter' },
+        ['mouseleave' + suffix1]: { event: 'mouseleave' },
+        ['touchstart' + suffix1]: { event: 'touchstart' },
+        ['touchmove' + suffix1]: { event: 'touchmove' },
+        ['touchend' + suffix1]: { event: 'touchend' },
+        ['click' + suffix2]: { event: 'click' },
+        ['contextmenu' + suffix2]: { event: 'contextmenu', prevent: true, result: false },
+        ['mousedown' + suffix2]: { event: 'mousedown' },
+        ['mousemove' + suffix2]: { event: 'mousemove' },
+        ['mouseup' + suffix2]: { event: 'mouseup' },
+        ['mouseenter' + suffix2]: { event: 'mouseenter' },
+        ['mouseleave' + suffix2]: { event: 'mouseleave' },
+        ['touchstart' + suffix2]: { event: 'touchstart' },
+        ['touchmove' + suffix2]: { event: 'touchmove' },
+        ['touchend' + suffix2]: { event: 'touchend' }
+      }, getEvent)
+    },
+
     getDefaultMouseEventHandlers (suffix, getEvent) {
@@ -23,6 +64,6 @@ return this.getMouseEventHandlers({
 
-      for (const event in events) {
-        const eventOptions = events[event]
+      for (const eventName in events) {
+        const eventOptions = events[eventName]
 
-        if (!this.$listeners[event]) continue
+        if (!this.$listeners[eventName]) continue
 
@@ -33,12 +74,12 @@ // https://vuejs.org/v2/guide/render-function.html#Event-amp-Key-Modifiers
 
-        const handler = (e) => {
-          const mouseEvent = e
+        const handler = (event) => {
+          const mouseEvent = event
           if (eventOptions.button === undefined || (mouseEvent.buttons > 0 && mouseEvent.button === eventOptions.button)) {
             if (eventOptions.prevent) {
-              e.preventDefault()
+              mouseEvent.preventDefault()
             }
             if (eventOptions.stop) {
-              e.stopPropagation()
+              mouseEvent.stopPropagation()
             }
-            this.$emit(event, getEvent(e))
+            this.$emit(eventName, getEvent(mouseEvent, eventName))
           }
@@ -45,0 +86,0 @@

src/utils/props.js

@@ -152,3 +152,3 @@ import { validateNumber, validateTimestamp } from './timestamp'
       type: String,
-      default: 'md',
+      default: 'sm',
       validator: v => ['xs', 'sm', 'md', 'lg', 'xl'].includes(v)
@@ -155,0 +155,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

1257744

increased by18.26%

Lines of code

24680

increased by33.02%

No dependency changes