diff --git a/README.md b/README.md index afd6e5cc..8db07ccf 100644 --- a/README.md +++ b/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 diff --git a/src/components/Datepicker.vue b/src/components/Datepicker.vue index 67055bef..05483822 100644 --- a/src/components/Datepicker.vue +++ b/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"> @@ -70,7 +70,7 @@ :use-utc="useUtc" @selectMonth="selectMonth" @showYearCalendar="showYearCalendar" - @changedYear="setPageDate"> + @changed-year="setPageDate"> @@ -88,7 +88,7 @@ :isRtl="isRtl" :use-utc="useUtc" @selectYear="selectYear" - @changedDecade="setPageDate"> + @changed-decade="setPageDate"> @@ -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) }, /** diff --git a/src/components/PickerDay.vue b/src/components/PickerDay.vue index 819d0633..9334e655 100644 --- a/src/components/PickerDay.vue +++ b/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) }, /** diff --git a/src/components/PickerMonth.vue b/src/components/PickerMonth.vue index a1bd64d4..18fe6c04 100644 --- a/src/components/PickerMonth.vue +++ b/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) }, /** diff --git a/src/components/PickerYear.vue b/src/components/PickerYear.vue index 2060106e..ac6e1345 100644 --- a/src/components/PickerYear.vue +++ b/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 () { diff --git a/test/unit/specs/Datepicker/Datepicker.spec.js b/test/unit/specs/Datepicker/Datepicker.spec.js index df080e7e..ae4046ec 100644 --- a/test/unit/specs/Datepicker/Datepicker.spec.js +++ b/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,8 +117,8 @@ 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) }) @@ -126,8 +126,8 @@ describe('Datepicker mounted', () => { 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() }) }) diff --git a/test/unit/specs/PickerDay/changeMonths.spec.js b/test/unit/specs/PickerDay/changeMonths.spec.js index 57170dc4..4bcbeb68 100644 --- a/test/unit/specs/PickerDay/changeMonths.spec.js +++ b/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) }) }) diff --git a/test/unit/specs/PickerDay/disabledDates.spec.js b/test/unit/specs/PickerDay/disabledDates.spec.js index 8ed6b3e7..e58dae72 100644 --- a/test/unit/specs/PickerDay/disabledDates.spec.js +++ b/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() }) }) diff --git a/test/unit/specs/PickerMonth/pickerMonth.spec.js b/test/unit/specs/PickerMonth/pickerMonth.spec.js index 985bc428..bc3c7995 100644 --- a/test/unit/specs/PickerMonth/pickerMonth.spec.js +++ b/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', () => { diff --git a/test/unit/specs/PickerYear/pickerYear.spec.js b/test/unit/specs/PickerYear/pickerYear.spec.js index a3c05d8d..a9d0f0da 100644 --- a/test/unit/specs/PickerYear/pickerYear.spec.js +++ b/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', () => {