Kebab-case event names

README.md

@@ -153,17 +153,19 @@ Inline always open version
 
 These events are emitted on actions in the datepicker
 
-| Event             | Output     | Description                          |
-|-------------------|------------|--------------------------------------|
-| opened            |            | The picker is opened                 |
-| closed            |            | The picker is closed                 |
-| selected          | Date\|null | A date has been selected             |
-| selectedDisabled  | Object     | A disabled date has been selected    |
-| input             | Date\|null | Input value has been modified        |
-| cleared           |            | Selected date has been cleared       |
-| changedMonth      | Object     | Month page has been changed          |
-| changedYear       | Object     | Year page has been changed           |
-| changedDecade     | Object     | Decade page has been changed         |
+| Event              | Output     | Description                          |
+|--------------------|------------|--------------------------------------|
+| opened             |            | The picker is opened                 |
+| closed             |            | The picker is closed                 |
+| selected           | Date\|null | A date has been selected             |
+| selected-disabled  | Object     | A disabled date has been selected    |
+| input              | Date\|null | Input value has been modified        |
+| cleared            |            | Selected date has been cleared       |
+| changed-month      | Object     | Month page has been changed          |
+| changed-year       | Object     | Year page has been changed           |
+| changed-decade     | Object     | Decade page has been changed         |
+
+NB. The old camel case event names may be deprecated as they do not adhere to [Vue's guidelines](https://vuejs.org/v2/guide/components-custom-events.html#Event-Names).
 
 
 ## Date formatting

src/components/Datepicker.vue

@@ -48,10 +48,10 @@
       :mondayFirst="mondayFirst"
       :dayCellContent="dayCellContent"
       :use-utc="useUtc"
-      @changedMonth="handleChangedMonthFromDayPicker"
+      @changed-month="handleChangedMonthFromDayPicker"
       @selectDate="selectDate"
       @showMonthCalendar="showMonthCalendar"
-      @selectedDisabled="selectDisabledDate">
+      @selected-disabled="selectDisabledDate">
       <slot name="beforeCalendarHeader" slot="beforeCalendarHeader"></slot>
     </picker-day>
 
@@ -70,7 +70,7 @@
       :use-utc="useUtc"
       @selectMonth="selectMonth"
       @showYearCalendar="showYearCalendar"
-      @changedYear="setPageDate">
+      @changed-year="setPageDate">
       <slot name="beforeCalendarHeader" slot="beforeCalendarHeader"></slot>
     </picker-month>
 
@@ -88,7 +88,7 @@
       :isRtl="isRtl"
       :use-utc="useUtc"
       @selectYear="selectYear"
-      @changedDecade="setPageDate">
+      @changed-decade="setPageDate">
       <slot name="beforeCalendarHeader" slot="beforeCalendarHeader"></slot>
     </picker-year>
   </div>
@@ -357,6 +357,7 @@ export default {
      * @param {Object} date
      */
     selectDisabledDate (date) {
+      this.$emit('selected-disabled', date)
       this.$emit('selectedDisabled', date)
     },
     /**
@@ -366,6 +367,7 @@ export default {
       const date = new Date(month.timestamp)
       if (this.allowedToShowView('day')) {
         this.setPageDate(date)
+        this.$emit('changed-month', month)
         this.$emit('changedMonth', month)
         this.showDayCalendar()
       } else {
@@ -379,6 +381,7 @@ export default {
       const date = new Date(year.timestamp)
       if (this.allowedToShowView('month')) {
         this.setPageDate(date)
+        this.$emit('changed-year', year)
         this.$emit('changedYear', year)
         this.showMonthCalendar()
       } else {
@@ -420,6 +423,7 @@ export default {
      */
     handleChangedMonthFromDayPicker (date) {
       this.setPageDate(date)
+      this.$emit('changed-month', date)
       this.$emit('changedMonth', date)
     },
     /**

src/components/PickerDay.vue

@@ -157,6 +157,7 @@ export default {
   methods: {
     selectDate (date) {
       if (date.isDisabled) {
+        this.$emit('selected-disabled', date)
         this.$emit('selectedDisabled', date)
         return false
       }
@@ -181,6 +182,7 @@ export default {
     changeMonth (incrementBy) {
       let date = this.pageDate
       this.utils.setMonth(date, this.utils.getMonth(date) + incrementBy)
+      this.$emit('changed-month', date)
       this.$emit('changedMonth', date)
     },
     /**

src/components/PickerMonth.vue

@@ -105,6 +105,7 @@ export default {
     changeYear (incrementBy) {
       let date = this.pageDate
       this.utils.setFullYear(date, this.utils.getFullYear(date) + incrementBy)
+      this.$emit('changed-year', date)
       this.$emit('changedYear', date)
     },
     /**

src/components/PickerYear.vue

@@ -100,6 +100,7 @@ export default {
     changeYear (incrementBy) {
       let date = this.pageDate
       this.utils.setFullYear(date, this.utils.getFullYear(date) + incrementBy)
+      this.$emit('changed-decade', date)
       this.$emit('changedDecade', date)
     },
     previousDecade () {

test/unit/specs/Datepicker/Datepicker.spec.js

@@ -99,10 +99,10 @@ describe('Datepicker mounted', () => {
     expect(wrapper.vm.isOpen).toEqual(false)
   })
 
-  it('should emit selectedDisabled on a disabled timestamp', () => {
+  it('should emit selected-disabled on a disabled timestamp', () => {
     const date = new Date(2016, 9, 1)
     wrapper.vm.selectDisabledDate({timestamp: date.getTime()})
-    expect(wrapper.emitted().selectedDisabled).toBeTruthy()
+    expect(wrapper.emitted('selected-disabled')).toBeTruthy()
   })
 
   it('can select a day', () => {
@@ -117,17 +117,17 @@ describe('Datepicker mounted', () => {
   it('can select a month', () => {
     const date = new Date(2016, 9, 9)
     wrapper.vm.selectMonth({timestamp: date.getTime()})
-    expect(wrapper.emitted().changedMonth).toBeTruthy()
-    expect(wrapper.emitted().changedMonth[0][0].timestamp).toEqual(date.getTime())
+    expect(wrapper.emitted('changed-month')).toBeTruthy()
+    expect(wrapper.emitted('changed-month')[0][0].timestamp).toEqual(date.getTime())
     expect(new Date(wrapper.vm.pageTimestamp).getMonth()).toEqual(date.getMonth())
     expect(wrapper.vm.showDayView).toEqual(true)
   })
 
   it('can select a year', () => {
     const date = new Date(2018, 9, 9)
     wrapper.vm.selectYear({timestamp: date.getTime()})
-    expect(wrapper.emitted().changedYear).toBeTruthy()
-    expect(wrapper.emitted().changedYear[0][0].timestamp).toEqual(date.getTime())
+    expect(wrapper.emitted('changed-year')).toBeTruthy()
+    expect(wrapper.emitted('changed-year')[0][0].timestamp).toEqual(date.getTime())
     expect(new Date(wrapper.vm.pageTimestamp).getFullYear()).toEqual(date.getFullYear())
     expect(wrapper.vm.showMonthView).toEqual(true)
   })
@@ -207,10 +207,10 @@ describe('Datepicker mounted', () => {
     })
   })
 
-  it('should emit changedMonth on a month change received from PickerDay', () => {
+  it('should emit changed-month on a month change received from PickerDay', () => {
     const date = new Date(2016, 9, 1)
     wrapper.vm.handleChangedMonthFromDayPicker({timestamp: date.getTime()})
-    expect(wrapper.emitted().changedMonth).toBeTruthy()
+    expect(wrapper.emitted('changed-month')).toBeTruthy()
   })
 })
 

test/unit/specs/PickerDay/changeMonths.spec.js

@@ -17,13 +17,13 @@ describe('PickerDay: changing months', () => {
 
   it('can set the next month', () => {
     wrapper.vm.nextMonth()
-    expect(wrapper.emitted().changedMonth).toBeTruthy()
-    expect(wrapper.emitted().changedMonth[0][0].getMonth()).toEqual(2)
+    expect(wrapper.emitted('changed-month')).toBeTruthy()
+    expect(wrapper.emitted('changed-month')[0][0].getMonth()).toEqual(2)
   })
 
   it('can set the previous month', () => {
     wrapper.vm.previousMonth()
-    expect(wrapper.emitted().changedMonth).toBeTruthy()
-    expect(wrapper.emitted().changedMonth[0][0].getMonth()).toEqual(0)
+    expect(wrapper.emitted('changed-month')).toBeTruthy()
+    expect(wrapper.emitted('changed-month')[0][0].getMonth()).toEqual(0)
   })
 })

test/unit/specs/PickerDay/disabledDates.spec.js

@@ -107,8 +107,8 @@ describe('PickerDay: disabled', () => {
     expect(wrapper.vm.isDisabledDate(new Date(2016, 9, 11))).toEqual(false)
   })
 
-  it('should emit a selectedDisabled event for a disabled date', () => {
+  it('should emit a selected-disabled event for a disabled date', () => {
     expect(wrapper.vm.selectDate({isDisabled: true})).toEqual(false)
-    expect(wrapper.emitted().selectedDisabled).toBeTruthy()
+    expect(wrapper.emitted('selected-disabled')).toBeTruthy()
   })
 })

test/unit/specs/PickerMonth/pickerMonth.spec.js

@@ -26,12 +26,12 @@ describe('PickerMonth', () => {
 
   it('can set the next year', () => {
     wrapper.vm.nextYear()
-    expect(wrapper.emitted().changedYear[0][0].getFullYear()).toEqual(2019)
+    expect(wrapper.emitted('changed-year')[0][0].getFullYear()).toEqual(2019)
   })
 
   it('can set the previous year', () => {
     wrapper.vm.previousYear()
-    expect(wrapper.emitted().changedYear[0][0].getFullYear()).toEqual(2017)
+    expect(wrapper.emitted('changed-year')[0][0].getFullYear()).toEqual(2017)
   })
 
   it('emits date on selection', () => {

test/unit/specs/PickerYear/pickerYear.spec.js

@@ -26,12 +26,12 @@ describe('PickerYear', () => {
 
   it('can set the next decade', () => {
     wrapper.vm.nextDecade()
-    expect(wrapper.emitted().changedDecade).toBeTruthy()
+    expect(wrapper.emitted('changed-decade')).toBeTruthy()
   })
 
   it('can set the previous decade', () => {
     wrapper.vm.previousDecade()
-    expect(wrapper.emitted().changedDecade).toBeTruthy()
+    expect(wrapper.emitted('changed-decade')).toBeTruthy()
   })
 
   it('formats the decade range', () => {