feat(VDatePicker): mouse events - click/dblclick (#5832)

* feat(VDatePicker): mouse events - click/dblclick/mouseenter/leave fixes #3023 fixes #4884 * removed mouseenter/mouseleave events
vuetifyjs · Dec 14, 2018 · 3139768 · 3139768
1 parent fb42157
commit 3139768
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 8 deletions.
diff --git a/packages/vuetify/src/components/VDatePicker/VDatePicker.js b/packages/vuetify/src/components/VDatePicker/VDatePicker.js
@@ -363,7 +363,9 @@ export default {
         ref: 'table',
         on: {
           input: this.dateClick,
-          tableDate: value => this.tableDate = value
+          tableDate: value => this.tableDate = value,
+          'click:date': value => this.$emit('click:date', value),
+          'dblclick:date': value => this.$emit('dblclick:date', value)
         }
       })
     },
@@ -390,7 +392,9 @@ export default {
         ref: 'table',
         on: {
           input: this.monthClick,
-          tableDate: value => this.tableDate = value
+          tableDate: value => this.tableDate = value,
+          'click:month': value => this.$emit('click:month', value),
+          'dblclick:month': value => this.$emit('dblclick:month', value)
         }
       })
     },

diff --git a/packages/vuetify/src/components/VDatePicker/VDatePickerDateTable.js b/packages/vuetify/src/components/VDatePicker/VDatePickerDateTable.js
@@ -97,7 +97,7 @@ export default {
         const date = `${this.displayedYear}-${pad(this.displayedMonth + 1)}-${pad(day)}`
 
         rows.push(this.$createElement('td', [
-          this.genButton(date, true)
+          this.genButton(date, true, 'date')
         ]))
 
         if (rows.length % (this.showWeek ? 8 : 7) === 0) {

diff --git a/packages/vuetify/src/components/VDatePicker/VDatePickerMonthTable.js b/packages/vuetify/src/components/VDatePicker/VDatePickerMonthTable.js
@@ -38,7 +38,7 @@ export default {
           return this.$createElement('td', {
             key: month
           }, [
-            this.genButton(date, false)
+            this.genButton(date, false, 'month')
           ])
         })
 

diff --git a/packages/vuetify/src/components/VDatePicker/mixins/date-picker-table.js b/packages/vuetify/src/components/VDatePicker/mixins/date-picker-table.js
@@ -76,7 +76,18 @@ export default {
         ...this.themeClasses
       }
     },
-    genButton (value, isFloating) {
+    genButtonEvents (value, isAllowed, mouseEventType) {
+      if (this.disabled) return undefined
+
+      return {
+        click: () => {
+          isAllowed && !this.readonly && this.$emit('input', value)
+          this.$emit(`click:${mouseEventType}`, value)
+        },
+        dblclick: () => this.$emit(`dblclick:${mouseEventType}`, value)
+      }
+    },
+    genButton (value, isFloating, mouseEventType) {
       const isAllowed = isDateAllowed(value, this.min, this.max, this.allowedDates)
       const isSelected = value === this.value || (Array.isArray(this.value) && this.value.indexOf(value) !== -1)
       const isCurrent = value === this.current
@@ -92,9 +103,7 @@ export default {
         domProps: {
           disabled: this.disabled || !isAllowed
         },
-        on: (this.disabled || this.readonly || !isAllowed) ? {} : {
-          click: () => this.$emit('input', value)
-        }
+        on: this.genButtonEvents(value, isAllowed, mouseEventType)
       }), [
         this.$createElement('div', {
           staticClass: 'v-btn__content'

diff --git a/packages/vuetify/test/unit/components/VDatePicker/VDatePicker.date.spec.js b/packages/vuetify/test/unit/components/VDatePicker/VDatePicker.date.spec.js
@@ -551,4 +551,23 @@ test('VDatePicker.js', ({ mount, compileToFunctions }) => {
     expect(change).not.toBeCalled()
     expect(input).not.toBeCalled()
   })
+
+  it('should emit click/dblclick:date event', async () => {
+    const wrapper = mount(VDatePicker, {
+      propsData: {
+        value: '2013-05-20',
+        type: 'date'
+      }
+    })
+
+    const click = jest.fn()
+    wrapper.vm.$on(`click:date`, click)
+    wrapper.find('.v-date-picker-table--date tbody tr+tr td:first-child button')[0].trigger('click')
+    expect(click).toBeCalledWith('2013-05-05')
+
+    const dblclick = jest.fn()
+    wrapper.vm.$on(`dblclick:date`, dblclick)
+    wrapper.find('.v-date-picker-table--date tbody tr+tr td:first-child button')[0].trigger('dblclick')
+    expect(dblclick).toBeCalledWith('2013-05-05')
+  })
 })
diff --git a/packages/vuetify/test/unit/components/VDatePicker/VDatePicker.month.spec.js b/packages/vuetify/test/unit/components/VDatePicker/VDatePicker.month.spec.js
@@ -203,4 +203,23 @@ test('VDatePicker.js', ({ mount, compileToFunctions }) => {
     expect(icons[0].element.textContent).toBe('block')
     expect(icons[1].element.textContent).toBe('check')
   })
+
+  it('should emit click/dblclick:month event', async () => {
+    const wrapper = mount(VDatePicker, {
+      propsData: {
+        value: '2013-05',
+        type: 'month'
+      }
+    })
+
+    const click = jest.fn()
+    wrapper.vm.$on(`click:month`, click)
+    wrapper.find('.v-date-picker-table--month tbody tr+tr td:first-child button')[0].trigger('click')
+    expect(click).toBeCalledWith('2013-04')
+
+    const dblclick = jest.fn()
+    wrapper.vm.$on(`dblclick:month`, dblclick)
+    wrapper.find('.v-date-picker-table--month tbody tr+tr td:first-child button')[0].trigger('dblclick')
+    expect(dblclick).toBeCalledWith('2013-04')
+  })
 })