From 16fbac776af24316402c2cefa457634670832bb1 Mon Sep 17 00:00:00 2001 From: Mark Thompson Date: Fri, 6 Aug 2021 14:18:02 +0200 Subject: [PATCH 01/54] feat(dateinput): Convert span to button --- src/components/DateInput.vue | 21 ++++++++++---------- src/styles/style.scss | 21 ++++++++++++-------- test/unit/specs/DateInput/typedDates.spec.js | 2 +- 3 files changed, 25 insertions(+), 19 deletions(-) diff --git a/src/components/DateInput.vue b/src/components/DateInput.vue index 3b5ce840..a44e02f7 100644 --- a/src/components/DateInput.vue +++ b/src/components/DateInput.vue @@ -2,13 +2,12 @@
- @@ -19,7 +18,7 @@ - + - @@ -59,7 +60,7 @@ - +
diff --git a/src/styles/style.scss b/src/styles/style.scss index a472509c..9995b4ed 100755 --- a/src/styles/style.scss +++ b/src/styles/style.scss @@ -6,10 +6,6 @@ position: relative; text-align: left; box-sizing: border-box; - - .calendar-btn-disabled { - cursor: not-allowed; - } } .vdp-datepicker__calendar { @@ -36,6 +32,15 @@ position: static; } + button { + background: inherit; + text-align: center; + + &:disabled { + color: #ddd; + } + } + header { display: flex; justify-content: space-between; @@ -261,11 +266,11 @@ .vdp-datepicker__clear-button, .vdp-datepicker__calendar-button { - cursor: pointer; + border: none; font-style: normal; - &.disabled { - color: #999; - cursor: default; + &.input-group-prepend, + &.input-group-append { + padding: 0; } } diff --git a/test/unit/specs/DateInput/typedDates.spec.js b/test/unit/specs/DateInput/typedDates.spec.js index 48621484..69e47964 100755 --- a/test/unit/specs/DateInput/typedDates.spec.js +++ b/test/unit/specs/DateInput/typedDates.spec.js @@ -185,7 +185,7 @@ describe('Datepicker mount', () => { }) const input = wrapper.find('input') - const calendarButton = wrapper.find('span.vdp-datepicker__calendar-button') + const calendarButton = wrapper.find('.vdp-datepicker__calendar-button') await input.trigger('focus') expect(wrapper.vm.isOpen).toBeTruthy() From 36192b230fc60229927d667f3f3076256773b81e Mon Sep 17 00:00:00 2001 From: Mark Thompson Date: Fri, 6 Aug 2021 12:21:43 +0200 Subject: [PATCH 02/54] feat(pickers): Extract UpButton.vue & convert span to button --- src/components/Datepicker.vue | 1 + src/components/PickerDay.vue | 15 +++--- src/components/PickerHeader.vue | 20 ++++--- src/components/PickerMonth.vue | 15 +++--- src/components/PickerYear.vue | 8 +-- src/components/UpButton.vue | 22 ++++++++ src/mixins/pickerMixin.vue | 4 ++ src/styles/style.scss | 53 +++++++++---------- .../specs/Datepicker/restrictedViews.spec.js | 6 +-- test/unit/specs/PickerDay/pickerDay.spec.js | 2 +- .../specs/PickerMonth/pickerMonth.spec.js | 2 +- 11 files changed, 94 insertions(+), 54 deletions(-) create mode 100644 src/components/UpButton.vue diff --git a/src/components/Datepicker.vue b/src/components/Datepicker.vue index 89075f49..4f6eebe3 100644 --- a/src/components/Datepicker.vue +++ b/src/components/Datepicker.vue @@ -63,6 +63,7 @@ - {{ pageTitleDay }} - + @@ -55,10 +57,11 @@ import pickerMixin from '~/mixins/pickerMixin.vue' import DisabledDate from '~/utils/DisabledDate' import HighlightedDate from '~/utils/HighlightedDate' import PickerCells from './PickerCells.vue' +import UpButton from './UpButton.vue' export default { name: 'PickerDay', - components: { PickerCells }, + components: { PickerCells, UpButton }, mixins: [pickerMixin], props: { dayCellContent: { diff --git a/src/components/PickerHeader.vue b/src/components/PickerHeader.vue index 949837a1..443d8326 100644 --- a/src/components/PickerHeader.vue +++ b/src/components/PickerHeader.vue @@ -1,24 +1,28 @@ @@ -26,6 +30,10 @@ export default { name: 'PickerHeader', props: { + bootstrapStyling: { + type: Boolean, + default: false, + }, isNextDisabled: { type: Boolean, required: true, diff --git a/src/components/PickerMonth.vue b/src/components/PickerMonth.vue index 60011a82..4b08ee3e 100644 --- a/src/components/PickerMonth.vue +++ b/src/components/PickerMonth.vue @@ -4,19 +4,21 @@ - {{ pageTitleMonth }} - + @@ -43,10 +45,11 @@ import pickerMixin from '~/mixins/pickerMixin.vue' import DisabledDate from '~/utils/DisabledDate' import PickerCells from './PickerCells.vue' +import UpButton from './UpButton.vue' export default { name: 'PickerMonth', - components: { PickerCells }, + components: { PickerCells, UpButton }, mixins: [pickerMixin], computed: { /** diff --git a/src/components/PickerYear.vue b/src/components/PickerYear.vue index e0fc9da6..ec25299c 100644 --- a/src/components/PickerYear.vue +++ b/src/components/PickerYear.vue @@ -4,15 +4,16 @@ - + {{ pageTitleYear }} - + @@ -39,10 +40,11 @@ import pickerMixin from '~/mixins/pickerMixin.vue' import DisabledDate from '~/utils/DisabledDate' import PickerCells from './PickerCells.vue' +import UpButton from './UpButton.vue' export default { name: 'PickerYear', - components: { PickerCells }, + components: { PickerCells, UpButton }, mixins: [pickerMixin], props: { yearRange: { diff --git a/src/components/UpButton.vue b/src/components/UpButton.vue new file mode 100644 index 00000000..29bdc7f0 --- /dev/null +++ b/src/components/UpButton.vue @@ -0,0 +1,22 @@ + + + diff --git a/src/mixins/pickerMixin.vue b/src/mixins/pickerMixin.vue index c56f9fcd..bb5c3778 100644 --- a/src/mixins/pickerMixin.vue +++ b/src/mixins/pickerMixin.vue @@ -7,6 +7,10 @@ export default { components: { PickerHeader }, inheritAttrs: false, props: { + bootstrapStyling: { + type: Boolean, + default: false, + }, disabledDates: { type: Object, default() { diff --git a/src/styles/style.scss b/src/styles/style.scss index 9995b4ed..340ab9b1 100755 --- a/src/styles/style.scss +++ b/src/styles/style.scss @@ -43,13 +43,20 @@ header { display: flex; + height: 40px; justify-content: space-between; - line-height: 40px; - span { - display: inline-block; - text-align: center; - width: 71.42857142857143%; + button { + border: none; + + &:hover:not(:disabled) { + background: #eee; + } + + &.vdp-datepicker__up { + color: #000; + flex-grow: 5; + } } .prev, @@ -59,6 +66,7 @@ width: 14.285714285714286%; .default { + display: flex; text-indent: -10000px; &:after { @@ -82,9 +90,13 @@ border-right: 10px solid #000; margin-left: -5px; } + } - &.disabled:after { - border-right: 10px solid #ddd; + &:disabled { + .default { + &:after { + border-right: 10px solid #ddd; + } } } } @@ -95,33 +107,18 @@ border-left: 10px solid #000; margin-left: 5px; } - - &.disabled:after { - border-left: 10px solid #ddd; - } } - } - - .prev:not(.disabled), - .next:not(.disabled), - .up:not(.disabled) { - cursor: pointer; - &:hover { - background: #eee; + &:disabled { + .default { + &:after { + border-left: 10px solid #ddd; + } + } } } } - .disabled { - color: #ddd; - cursor: default; - - //&.selected { - // color: #104756; - //} - } - .cell { border: 1px solid transparent; display: inline-block; diff --git a/test/unit/specs/Datepicker/restrictedViews.spec.js b/test/unit/specs/Datepicker/restrictedViews.spec.js index d9d6f767..d825a199 100755 --- a/test/unit/specs/Datepicker/restrictedViews.spec.js +++ b/test/unit/specs/Datepicker/restrictedViews.spec.js @@ -62,12 +62,12 @@ describe('Datepicker with restricted views', () => { expect(wrapper.vm.allowedToShowView('month')).toEqual(true) expect(wrapper.vm.picker).toBe('PickerDay') - let upButton = wrapper.find('.day__month_btn') + let upButton = wrapper.find('.vdp-datepicker__up') await upButton.trigger('click') expect(wrapper.vm.picker).toBe('PickerMonth') - upButton = wrapper.find('.month__year_btn') - expect(upButton.element.tabIndex).toBe(-1) + upButton = wrapper.find('.vdp-datepicker__up') + expect(upButton.element.disabled).toBe(true) await wrapper.setProps({ minimumView: 'month', diff --git a/test/unit/specs/PickerDay/pickerDay.spec.js b/test/unit/specs/PickerDay/pickerDay.spec.js index c9bcaba7..9801f247 100755 --- a/test/unit/specs/PickerDay/pickerDay.spec.js +++ b/test/unit/specs/PickerDay/pickerDay.spec.js @@ -64,7 +64,7 @@ describe('PickerDay', () => { }) it('emits set-view event with `month` when the up button is clicked', async () => { - const upButton = wrapper.find('.day__month_btn') + const upButton = wrapper.find('.vdp-datepicker__up') await upButton.trigger('click') expect(wrapper.emitted('set-view')[0][0]).toBe('month') }) diff --git a/test/unit/specs/PickerMonth/pickerMonth.spec.js b/test/unit/specs/PickerMonth/pickerMonth.spec.js index 697fbd28..dc57e5df 100755 --- a/test/unit/specs/PickerMonth/pickerMonth.spec.js +++ b/test/unit/specs/PickerMonth/pickerMonth.spec.js @@ -56,7 +56,7 @@ describe('PickerMonth', () => { }) it('emits set-view event with `year` when the up button is clicked', async () => { - const upButton = wrapper.find('.month__year_btn') + const upButton = wrapper.find('.vdp-datepicker__up') await upButton.trigger('click') expect(wrapper.emitted('set-view')[0][0]).toBe('year') }) From 8bb136dc71f0ad0d7820dd9634bd4b88e8f6c783 Mon Sep 17 00:00:00 2001 From: Mark Thompson Date: Fri, 6 Aug 2021 12:28:52 +0200 Subject: [PATCH 03/54] feat(pickercells): Convert span to button --- src/components/PickerCells.vue | 11 +++++++++-- src/components/PickerDay.vue | 1 + src/components/PickerMonth.vue | 1 + src/components/PickerYear.vue | 1 + src/styles/style.scss | 1 - test/unit/specs/PickerDay/pickerDay.spec.js | 8 ++++---- 6 files changed, 16 insertions(+), 7 deletions(-) diff --git a/src/components/PickerCells.vue b/src/components/PickerCells.vue index 448015b0..e0411b2e 100644 --- a/src/components/PickerCells.vue +++ b/src/components/PickerCells.vue @@ -1,13 +1,15 @@ @@ -15,6 +17,10 @@ export default { name: 'PickerCells', props: { + bootstrapStyling: { + type: Boolean, + default: false, + }, cells: { type: Array, required: true, @@ -40,6 +46,7 @@ export default { 'cell', this.view, { + 'btn': this.bootstrapStyling, 'disabled': cell.isDisabled, 'highlight-start': cell.isHighlightStart, 'highlight-end': cell.isHighlightEnd, diff --git a/src/components/PickerDay.vue b/src/components/PickerDay.vue index 5dac4b61..80cd84d0 100644 --- a/src/components/PickerDay.vue +++ b/src/components/PickerDay.vue @@ -35,6 +35,7 @@ ref="cells" :key="pageTitleDay" v-slot="{ cell }" + :bootstrap-styling="bootstrapStyling" :cells="cells" :show-edge-dates="showEdgeDates" view="day" diff --git a/src/components/PickerMonth.vue b/src/components/PickerMonth.vue index 4b08ee3e..87e4b018 100644 --- a/src/components/PickerMonth.vue +++ b/src/components/PickerMonth.vue @@ -28,6 +28,7 @@ ref="cells" :key="pageTitleMonth" v-slot="{ cell }" + :bootstrap-styling="bootstrapStyling" :cells="cells" view="month" @select="select($event)" diff --git a/src/components/PickerYear.vue b/src/components/PickerYear.vue index ec25299c..f6d1b22e 100644 --- a/src/components/PickerYear.vue +++ b/src/components/PickerYear.vue @@ -23,6 +23,7 @@ ref="cells" :key="pageTitleYear" v-slot="{ cell }" + :bootstrap-styling="bootstrapStyling" :cells="cells" view="year" @select="select($event)" diff --git a/src/styles/style.scss b/src/styles/style.scss index 340ab9b1..e6c118a7 100755 --- a/src/styles/style.scss +++ b/src/styles/style.scss @@ -123,7 +123,6 @@ border: 1px solid transparent; display: inline-block; height: 40px; - line-height: 40px; padding: 0 5px; text-align: center; vertical-align: middle; diff --git a/test/unit/specs/PickerDay/pickerDay.spec.js b/test/unit/specs/PickerDay/pickerDay.spec.js index 9801f247..5b89f975 100755 --- a/test/unit/specs/PickerDay/pickerDay.spec.js +++ b/test/unit/specs/PickerDay/pickerDay.spec.js @@ -70,7 +70,7 @@ describe('PickerDay', () => { }) it('displays edge dates by default', () => { - const cells = wrapper.findAll('.day') + const cells = wrapper.findAll('button.cell') const firstCell = cells.at(0) const lastCell = cells.at(34) @@ -83,7 +83,7 @@ describe('PickerDay', () => { showEdgeDates: false, }) - const cells = wrapper.findAll('.day') + const cells = wrapper.findAll('button.cell') const firstCell = cells.at(0) const lastCell = cells.at(34) @@ -92,7 +92,7 @@ describe('PickerDay', () => { }) it('selects an edge date from the previous month', async () => { - const cells = wrapper.findAll('.day') + const cells = wrapper.findAll('button.cell') const firstCell = cells.at(0) await firstCell.trigger('click') @@ -101,7 +101,7 @@ describe('PickerDay', () => { }) it('selects an edge date from the next month', async () => { - const cells = wrapper.findAll('.day') + const cells = wrapper.findAll('button.cell') const lastCell = cells.at(34) await lastCell.trigger('click') From 49d5f38fe8e8f69c4f913e5d6f3ac3b412e695cc Mon Sep 17 00:00:00 2001 From: Mark Thompson Date: Fri, 6 Aug 2021 14:24:35 +0200 Subject: [PATCH 04/54] feat(datepicker): Remove superfluous selected-disabled event --- docs/guide/Events/README.md | 1 - src/components/Datepicker.vue | 7 ------- src/mixins/pickerMixin.vue | 7 +------ test/unit/specs/Datepicker/Datepicker.spec.js | 5 ----- test/unit/specs/PickerDay/disabledDates.spec.js | 10 ---------- test/unit/specs/PickerMonth/disabledMonths.spec.js | 5 ----- test/unit/specs/PickerYear/disabledYears.spec.js | 5 ----- 7 files changed, 1 insertion(+), 39 deletions(-) diff --git a/docs/guide/Events/README.md b/docs/guide/Events/README.md index 58e16020..1daddada 100755 --- a/docs/guide/Events/README.md +++ b/docs/guide/Events/README.md @@ -12,6 +12,5 @@ These events are emitted on actions in the datepicker | input | Date\|null | Input value has been modified | | opened | | The picker has been opened | | selected | Date\|null | A date has been selected | -| selected-disabled | Object | A disabled date has been selected | | blur | | Input blur event | | focus | | Input focus event | diff --git a/src/components/Datepicker.vue b/src/components/Datepicker.vue index 4f6eebe3..be579215 100644 --- a/src/components/Datepicker.vue +++ b/src/components/Datepicker.vue @@ -83,7 +83,6 @@ :year-range="yearPickerRange" @page-change="handlePageChange" @select="handleSelect" - @select-disabled="handleSelectDisabled" @set-transition-name="setTransitionName($event)" @set-view="setView" > @@ -378,12 +377,6 @@ export default { this.selectDate(cell.timestamp) this.close() }, - /** - * Emit a 'selected-disabled' event - */ - handleSelectDisabled(cell) { - this.$emit('selected-disabled', cell) - }, /** * Set the date from a 'typed-date' event * @param {Date} date diff --git a/src/mixins/pickerMixin.vue b/src/mixins/pickerMixin.vue index bb5c3778..fa66dea7 100644 --- a/src/mixins/pickerMixin.vue +++ b/src/mixins/pickerMixin.vue @@ -98,15 +98,10 @@ export default { this.$emit('page-change', pageDate) }, /** - * Determines which transition to use (for edge dates) and emits a 'select' or 'select-disabled' event + * Determines which transition to use (for edge dates) and emits a 'select' event * @param {Object} cell */ select(cell) { - if (cell.isDisabled) { - this.$emit('select-disabled', cell) - return - } - if (cell.isPreviousMonth) { this.$emit('set-transition-name', -1) } diff --git a/test/unit/specs/Datepicker/Datepicker.spec.js b/test/unit/specs/Datepicker/Datepicker.spec.js index 45e7c14b..cad4a362 100755 --- a/test/unit/specs/Datepicker/Datepicker.spec.js +++ b/test/unit/specs/Datepicker/Datepicker.spec.js @@ -170,11 +170,6 @@ describe('Datepicker shallowMounted', () => { expect(wrapper.vm.isOpen).toEqual(false) }) - it('emits `selected-disabled` on selecting a disabled cell', () => { - wrapper.vm.handleSelectDisabled({ isDisabled: true }) - expect(wrapper.emitted('selected-disabled')).toBeTruthy() - }) - it('can select a day', () => { const dateTemp = new Date(2016, 9, 1) wrapper.vm.setView('day') diff --git a/test/unit/specs/PickerDay/disabledDates.spec.js b/test/unit/specs/PickerDay/disabledDates.spec.js index 37f62776..3bd49e19 100755 --- a/test/unit/specs/PickerDay/disabledDates.spec.js +++ b/test/unit/specs/PickerDay/disabledDates.spec.js @@ -28,11 +28,6 @@ describe('PickerDay: disabled', () => { expect(wrapper.vm.isDisabledDate(new Date(2026, 9, 2))).toEqual(true) }) - it('does not select a disabled date', () => { - wrapper.vm.select({ isDisabled: true }) - expect(wrapper.emitted('select')).toBeFalsy() - }) - it('sets `isNextDisabled` and `isPreviousDisabled` correctly', () => { expect(wrapper.vm.isNextDisabled).toBeTruthy() expect(wrapper.vm.isPreviousDisabled).toBeTruthy() @@ -114,11 +109,6 @@ describe('PickerDay: disabled', () => { expect(wrapper.vm.isDisabledDate(new Date(2016, 9, 11))).toEqual(false) }) - it('emits a select-disabled event for a disabled date', () => { - wrapper.vm.select({ isDisabled: true }) - expect(wrapper.emitted('select-disabled')).toBeTruthy() - }) - it('closes without warning when disabledDates is undefined', async () => { await wrapper.setProps({ disabledDates: undefined, diff --git a/test/unit/specs/PickerMonth/disabledMonths.spec.js b/test/unit/specs/PickerMonth/disabledMonths.spec.js index d40cfd4a..65cc7e74 100755 --- a/test/unit/specs/PickerMonth/disabledMonths.spec.js +++ b/test/unit/specs/PickerMonth/disabledMonths.spec.js @@ -24,11 +24,6 @@ describe('PickerMonth', () => { wrapper.destroy() }) - it("can't select a disabled month", () => { - wrapper.vm.select({ isDisabled: true }) - expect(wrapper.emitted('select')).toBeFalsy() - }) - it('detects a disabled month when the `to` year is in the past', async () => { await wrapper.setProps({ disabledDates: { diff --git a/test/unit/specs/PickerYear/disabledYears.spec.js b/test/unit/specs/PickerYear/disabledYears.spec.js index 2b5e900e..3c18dbd1 100755 --- a/test/unit/specs/PickerYear/disabledYears.spec.js +++ b/test/unit/specs/PickerYear/disabledYears.spec.js @@ -24,11 +24,6 @@ describe('PickerYear', () => { wrapper.destroy() }) - it("can't select a disabled year", () => { - wrapper.vm.select({ isDisabled: true }) - expect(wrapper.emitted('select')).toBeFalsy() - }) - it("can't navigate to a disabled year", () => { wrapper.vm.changePage(-1) expect(wrapper.emitted('changed-decade')).toBeFalsy() From 4e910e220dcae02ae3b7fcd470d1db4f44e2f0b6 Mon Sep 17 00:00:00 2001 From: Mark Thompson Date: Sun, 1 Aug 2021 22:01:27 +0200 Subject: [PATCH 05/54] feat(pickers): Let pickers know the open date --- src/components/Datepicker.vue | 16 ++++++++++++++++ src/components/PickerCells.vue | 1 + src/components/PickerDay.vue | 2 ++ src/components/PickerMonth.vue | 4 ++++ src/components/PickerYear.vue | 8 ++++++-- src/mixins/pickerMixin.vue | 13 +++++++++++++ 6 files changed, 42 insertions(+), 2 deletions(-) diff --git a/src/components/Datepicker.vue b/src/components/Datepicker.vue index be579215..7d342427 100644 --- a/src/components/Datepicker.vue +++ b/src/components/Datepicker.vue @@ -71,6 +71,8 @@ :highlighted="highlighted" :is-rtl="isRtl" :is-up-disabled="isUpDisabled" + :is-minimum-view="isMinimumView" + :open-date="computedOpenDate" :page-date="pageDate" :selected-date="selectedDate" :show-edge-dates="showEdgeDates" @@ -243,12 +245,26 @@ export default { computedInitialView() { return this.initialView || this.minimumView }, + computedOpenDate() { + // If `openDate` is not set, open on today's date + const openDate = this.openDate + ? new Date(this.openDate) + : this.utils.getNewDateObject() + + // If the `minimum-view` is `month` or `year`, convert `openDate` accordingly + return this.minimumView === 'day' + ? openDate + : new Date(this.utils.setDate(openDate, 1)) + }, isInline() { return !!this.inline }, isOpen() { return this.view !== '' }, + isMinimumView() { + return this.view === this.minimumView + }, isRtl() { return this.translation.rtl }, diff --git a/src/components/PickerCells.vue b/src/components/PickerCells.vue index e0411b2e..611768e1 100644 --- a/src/components/PickerCells.vue +++ b/src/components/PickerCells.vue @@ -52,6 +52,7 @@ export default { 'highlight-end': cell.isHighlightEnd, 'highlighted': cell.isHighlighted, 'muted': cell.isPreviousMonth || cell.isNextMonth, + 'open': cell.isOpenDate, 'sat': cell.isSaturday, 'sun': cell.isSunday, 'selected': this.showEdgeDates diff --git a/src/components/PickerDay.vue b/src/components/PickerDay.vue index 80cd84d0..3967d2e2 100644 --- a/src/components/PickerDay.vue +++ b/src/components/PickerDay.vue @@ -335,6 +335,8 @@ export default { isHighlighted: this.isHighlightedDate(dObj), isHighlightStart: this.isHighlightStart(dObj), isHighlightEnd: this.isHighlightEnd(dObj), + isOpenDate: + this.openDate && this.utils.compareDates(dObj, this.openDate), isToday: this.utils.compareDates(dObj, new Date()), isWeekend: isSaturday || isSunday, isSaturday, diff --git a/src/components/PickerMonth.vue b/src/components/PickerMonth.vue index 87e4b018..e3cc57a1 100644 --- a/src/components/PickerMonth.vue +++ b/src/components/PickerMonth.vue @@ -76,6 +76,10 @@ export default { month: this.utils.getMonthName(i, this.translation.months), timestamp: dObj.valueOf(), isDisabled: this.isDisabledMonth(dObj), + isOpenDate: + this.isMinimumView && + this.openDate && + this.utils.compareDates(dObj, this.openDate), isSelected: this.isSelectedMonth(dObj), }) this.utils.setMonth(dObj, this.utils.getMonth(dObj) + 1) diff --git a/src/components/PickerYear.vue b/src/components/PickerYear.vue index f6d1b22e..c848b174 100644 --- a/src/components/PickerYear.vue +++ b/src/components/PickerYear.vue @@ -58,7 +58,7 @@ export default { * Sets an array with all years to show this decade (or yearRange) * @return {Array} */ - // eslint-disable-next-line max-statements + // eslint-disable-next-line complexity,max-statements cells() { const d = this.pageDate const years = [] @@ -79,8 +79,12 @@ export default { years.push({ year: this.utils.getFullYear(dObj), timestamp: dObj.valueOf(), - isSelected: this.isSelectedYear(dObj), isDisabled: this.isDisabledYear(dObj), + isOpenDate: + this.isMinimumView && + this.openDate && + this.utils.compareDates(dObj, this.openDate), + isSelected: this.isSelectedYear(dObj), }) this.utils.setFullYear(dObj, this.utils.getFullYear(dObj) + 1) } diff --git a/src/mixins/pickerMixin.vue b/src/mixins/pickerMixin.vue index fa66dea7..ce0e20af 100644 --- a/src/mixins/pickerMixin.vue +++ b/src/mixins/pickerMixin.vue @@ -25,6 +25,19 @@ export default { type: Boolean, default: false, }, + isMinimumView: { + type: Boolean, + default: true, + }, + openDate: { + type: [String, Date, Number], + default: null, + validator: (val) => + val === null || + val instanceof Date || + typeof val === 'string' || + typeof val === 'number', + }, pageDate: { type: Date, default: null, From a5b7e1b6daf64decec7f43e672b84a68f8f4a995 Mon Sep 17 00:00:00 2001 From: Mark Thompson Date: Sun, 25 Jul 2021 21:26:39 +0200 Subject: [PATCH 06/54] feat(pickers): Let pickerMonth/Year know today's date --- src/components/PickerMonth.vue | 5 +++++ src/components/PickerYear.vue | 5 +++++ 2 files changed, 10 insertions(+) diff --git a/src/components/PickerMonth.vue b/src/components/PickerMonth.vue index e3cc57a1..f4b643cc 100644 --- a/src/components/PickerMonth.vue +++ b/src/components/PickerMonth.vue @@ -71,6 +71,10 @@ export default { d.getMinutes(), ) + const todayMonth = new Date( + this.utils.setDate(this.utils.getNewDateObject(), 1), + ) + for (let i = 0; i < 12; i += 1) { months.push({ month: this.utils.getMonthName(i, this.translation.months), @@ -81,6 +85,7 @@ export default { this.openDate && this.utils.compareDates(dObj, this.openDate), isSelected: this.isSelectedMonth(dObj), + isToday: this.utils.compareDates(dObj, todayMonth), }) this.utils.setMonth(dObj, this.utils.getMonth(dObj) + 1) } diff --git a/src/components/PickerYear.vue b/src/components/PickerYear.vue index c848b174..d8959b4f 100644 --- a/src/components/PickerYear.vue +++ b/src/components/PickerYear.vue @@ -75,6 +75,10 @@ export default { d.getHours(), d.getMinutes(), ) + const todayYear = new Date( + this.utils.setDate(this.utils.getNewDateObject(), 1), + ) + for (let i = 0; i < this.yearRange; i += 1) { years.push({ year: this.utils.getFullYear(dObj), @@ -85,6 +89,7 @@ export default { this.openDate && this.utils.compareDates(dObj, this.openDate), isSelected: this.isSelectedYear(dObj), + isToday: this.utils.compareDates(dObj, todayYear), }) this.utils.setFullYear(dObj, this.utils.getFullYear(dObj) + 1) } From c2586963a1ff0bd9ee9fda235ca56c6d7306fa7e Mon Sep 17 00:00:00 2001 From: Mark Thompson Date: Fri, 6 Aug 2021 14:34:24 +0200 Subject: [PATCH 07/54] test(e2e): Add data-test attributes --- example-e2e/index.html | 2 +- example/index.html | 2 +- src/components/DateInput.vue | 3 +++ src/components/Datepicker.vue | 1 + src/components/PickerCells.vue | 4 +++- src/components/PickerHeader.vue | 2 ++ src/components/UpButton.vue | 1 + test/unit/specs/DateInput/DateInput.spec.js | 2 +- test/unit/specs/DateInput/typedDates.spec.js | 2 +- test/unit/specs/Datepicker/Datepicker.spec.js | 4 ++-- 10 files changed, 16 insertions(+), 7 deletions(-) diff --git a/example-e2e/index.html b/example-e2e/index.html index 1f853748..e1340901 100755 --- a/example-e2e/index.html +++ b/example-e2e/index.html @@ -5,7 +5,7 @@ Vue.js Datepicker - +
diff --git a/example/index.html b/example/index.html index 77e02b30..9beeec35 100755 --- a/example/index.html +++ b/example/index.html @@ -4,7 +4,7 @@ Vue.js Datepicker - +
diff --git a/src/components/DateInput.vue b/src/components/DateInput.vue index a44e02f7..7b938b23 100644 --- a/src/components/DateInput.vue +++ b/src/components/DateInput.vue @@ -6,6 +6,7 @@ v-if="calendarButton" class="vdp-datepicker__calendar-button" :class="{ 'btn input-group-prepend': bootstrapStyling }" + data-test-calendar-button :disabled="disabled" type="button" @click="toggle" @@ -27,6 +28,7 @@ :autofocus="autofocus" :class="computedInputClass" :clear-button="clearButton" + data-test-input :disabled="disabled" :maxlength="maxlength" :name="name" @@ -49,6 +51,7 @@ v-if="clearButton && selectedDate" class="vdp-datepicker__clear-button" :class="{ 'btn input-group-append': bootstrapStyling }" + data-test-clear-button :disabled="disabled" type="button" @click="clearDate" diff --git a/src/components/Datepicker.vue b/src/components/Datepicker.vue index 7d342427..16c18176 100644 --- a/src/components/Datepicker.vue +++ b/src/components/Datepicker.vue @@ -56,6 +56,7 @@ ref="datepicker" class="vdp-datepicker__calendar" :class="pickerClasses" + data-test-calendar @mousedown.prevent > diff --git a/src/components/PickerCells.vue b/src/components/PickerCells.vue index 611768e1..5f28af18 100644 --- a/src/components/PickerCells.vue +++ b/src/components/PickerCells.vue @@ -1,9 +1,11 @@