From 55e1a4fd150a56def71e7f5fcc149ab77f38bd1f Mon Sep 17 00:00:00 2001 From: joelgraham93 Date: Mon, 26 Apr 2021 12:47:18 +1200 Subject: [PATCH 01/10] add week select plugin --- components/datepicker/src/vwc-datepicker.ts | 11 +++++++++++ components/datepicker/stories/arg-types.js | 6 ++++++ components/datepicker/stories/datepicker.stories.js | 3 +++ 3 files changed, 20 insertions(+) diff --git a/components/datepicker/src/vwc-datepicker.ts b/components/datepicker/src/vwc-datepicker.ts index a7c5ca7a44..614d9da319 100644 --- a/components/datepicker/src/vwc-datepicker.ts +++ b/components/datepicker/src/vwc-datepicker.ts @@ -5,6 +5,7 @@ import { customElement, property, html, CSSResult, query } from 'lit-element'; import { LitFlatpickr } from 'lit-flatpickr'; +import weekSelect from 'flatpickr/dist/plugins/weekSelect/weekSelect'; import { Options } from 'flatpickr/dist/types/options'; import { style as vwcDatepickerStyles } from './vwc-datepicker.css.js'; import { VWCButton } from '@vonage/vwc-button'; @@ -32,6 +33,9 @@ export class VWCDatepicker extends LitFlatpickr { @property({ type: Boolean, reflect: true }) monthPicker = false; + @property({ type: Boolean, reflect: true }) + weekSelect = false; + @property({ type: Boolean, reflect: true }) closeOnSelect = false; @@ -42,6 +46,8 @@ export class VWCDatepicker extends LitFlatpickr { private appendTo: HTMLElement | undefined; + private plugins: Array = []; + constructor() { super(); // override LitFlatpickr to work with [flatpickr change](https://github.com/flatpickr/flatpickr/blame/07cf1b1ba5ec71da511c295f622d60eed3bf3eb7/src/index.ts#L1522) @@ -66,6 +72,10 @@ export class VWCDatepicker extends LitFlatpickr { const menu = this.shadowRoot?.querySelector('vwc-menu'); if (menu) menu.open = false; }; + + if (this.weekSelect) { + this.plugins.push(weekSelect()); + } } // override lit-flatpicker @@ -438,6 +448,7 @@ export class VWCDatepicker extends LitFlatpickr { wrap: this.wrap, // additional config options ...(this.enable && { enable: this.enable }), + ...(this.plugins.length && { plugins: this.plugins }), appendTo: this.appendTo, closeOnSelect: this.closeOnSelect }; diff --git a/components/datepicker/stories/arg-types.js b/components/datepicker/stories/arg-types.js index 5d62feb645..2713ae37ce 100644 --- a/components/datepicker/stories/arg-types.js +++ b/components/datepicker/stories/arg-types.js @@ -11,6 +11,12 @@ export const argTypes = { options: ['single', 'multiple', 'range'] } }, + weekSelect: { + control: { + type: 'inline-radio', + options: { 'true': '', 'false': undefined } + } + }, monthPicker: { control: { type: 'inline-radio', diff --git a/components/datepicker/stories/datepicker.stories.js b/components/datepicker/stories/datepicker.stories.js index 8df4f0ca5d..a809fc6732 100644 --- a/components/datepicker/stories/datepicker.stories.js +++ b/components/datepicker/stories/datepicker.stories.js @@ -25,6 +25,9 @@ Basic.args = { dateFormat: 'Y-m-d', altInput: '', altFormat: 'F j, Y', closeOnSe export const MaxDate = Template.bind({}); MaxDate.args = { dateFormat: 'Y-m-d', MaxDate: 'today', closeOnSelect: '' }; +export const weekSelect = Template.bind({}); +weekSelect.args = { weekSelect: '', closeOnSelect: '' }; + export const MonthPicker = Template.bind({}); MonthPicker.args = { dateFormat: 'F Y', monthPicker: '', closeOnSelect: '' }; From 7ecfc7b0a948d29772b55103a2cc6cb605c8e7bd Mon Sep 17 00:00:00 2001 From: joelgraham93 Date: Mon, 26 Apr 2021 16:03:09 +1200 Subject: [PATCH 02/10] week select style progress --- components/datepicker/src/vwc-datepicker.scss | 59 +++++++++++++++---- .../datepicker/stories/datepicker.stories.js | 2 +- 2 files changed, 49 insertions(+), 12 deletions(-) diff --git a/components/datepicker/src/vwc-datepicker.scss b/components/datepicker/src/vwc-datepicker.scss index 92ee84a264..10ed23da9d 100644 --- a/components/datepicker/src/vwc-datepicker.scss +++ b/components/datepicker/src/vwc-datepicker.scss @@ -92,7 +92,8 @@ vwc-menu { } &:nth-child(7n) { - &.flatpickr-day.inRange { + &.flatpickr-day.inRange, + &.flatpickr-day.week { border-bottom-right-radius: 15px; border-top-right-radius: 15px; box-shadow: -5px 0 0 var(#{scheme-variables.$vvd-color-neutral-20}); @@ -100,7 +101,8 @@ vwc-menu { } &:nth-child(7n + 1) { - &.flatpickr-day.inRange { + &.flatpickr-day.inRange, + &.flatpickr-day.week { border-bottom-left-radius: 15px; border-top-left-radius: 15px; box-shadow: 5px 0 0 var(#{scheme-variables.$vvd-color-neutral-20}); @@ -146,19 +148,12 @@ vwc-menu { } } - &.selected:not(.startRange):not(.endRange) { + &.selected:not(.startRange):not(.endRange):not(.week) { &::before { background-color: var(#{scheme-variables.$vvd-color-announcement}); } } - // &.selected { - // &::before { - // animation-name: none; - // background-color: $black; - // } - // } - &.startRange + .inRange, &.endRange { &::after { @@ -181,7 +176,8 @@ vwc-menu { } &.inRange, - &.inRange.today { + &.inRange.today, + &.week.selected { border-color: var(#{scheme-variables.$vvd-color-neutral-20}); background-color: var(#{scheme-variables.$vvd-color-neutral-20}); box-shadow: -5px 0 0 var(#{scheme-variables.$vvd-color-neutral-20}), @@ -207,6 +203,47 @@ vwc-menu { } } + +//------------ +// week select +//------------ +:host([weekSelect]) { + .flatpickr-calendar.vvd-datepicker .flatpickr-day { + &.inRange { + font-weight: normal; + + &:hover, + &.today:hover { + z-index: 0; + color: var(#{scheme-variables.$vvd-color-on-primary}); + + &::before { + background-color: var(#{scheme-variables.$vvd-color-primary}); + } + } + } + + &.selected { + &::before { + background-color: transparent; + } + + &.week { + color: var(#{scheme-variables.$vvd-color-on-base}); + font-weight: normal; + + &:hover { + color: var(#{scheme-variables.$vvd-color-on-primary}); + } + } + } + + &.today { + z-index: 0; + } + } +} + //-------------- // custom header //-------------- diff --git a/components/datepicker/stories/datepicker.stories.js b/components/datepicker/stories/datepicker.stories.js index a809fc6732..f2500a2df0 100644 --- a/components/datepicker/stories/datepicker.stories.js +++ b/components/datepicker/stories/datepicker.stories.js @@ -26,7 +26,7 @@ export const MaxDate = Template.bind({}); MaxDate.args = { dateFormat: 'Y-m-d', MaxDate: 'today', closeOnSelect: '' }; export const weekSelect = Template.bind({}); -weekSelect.args = { weekSelect: '', closeOnSelect: '' }; +weekSelect.args = { weekSelect: '' }; export const MonthPicker = Template.bind({}); MonthPicker.args = { dateFormat: 'F Y', monthPicker: '', closeOnSelect: '' }; From 94109a6261a14e39b97a6733b70da204ad8318d0 Mon Sep 17 00:00:00 2001 From: joelgraham93 Date: Thu, 29 Apr 2021 15:22:43 +1200 Subject: [PATCH 03/10] highlight selected week day --- components/datepicker/src/vwc-datepicker.scss | 9 +++++++++ components/datepicker/src/vwc-datepicker.ts | 13 +++++++++++++ 2 files changed, 22 insertions(+) diff --git a/components/datepicker/src/vwc-datepicker.scss b/components/datepicker/src/vwc-datepicker.scss index 10ed23da9d..b801318d07 100644 --- a/components/datepicker/src/vwc-datepicker.scss +++ b/components/datepicker/src/vwc-datepicker.scss @@ -236,6 +236,15 @@ vwc-menu { color: var(#{scheme-variables.$vvd-color-on-primary}); } } + + &.vvd-selected-week-day { + z-index: 0; + color: var(#{scheme-variables.$vvd-color-on-announcement}); + + &::before { + background-color: var(#{scheme-variables.$vvd-color-announcement}); + } + } } &.today { diff --git a/components/datepicker/src/vwc-datepicker.ts b/components/datepicker/src/vwc-datepicker.ts index 546584a6c2..d59fa9f377 100644 --- a/components/datepicker/src/vwc-datepicker.ts +++ b/components/datepicker/src/vwc-datepicker.ts @@ -168,6 +168,8 @@ export class VWCDatepicker extends LitFlatpickr { rangeEnd.classList.toggle('vvd-selected', !!endDate); } } + + this.highlightSelectedWeekDay(); } private renderHeader(): void { @@ -235,6 +237,7 @@ export class VWCDatepicker extends LitFlatpickr { this.updateHeaderMonth(); this.updateHeaderYear(); + this.highlightSelectedWeekDay(); } private updateHeaderMonth(): void { @@ -350,6 +353,7 @@ export class VWCDatepicker extends LitFlatpickr { this._instance?.changeMonth(selectedMonth - this._instance.currentMonth); this.updateHeaderMonth(); this.updateHeaderYear(); + this.highlightSelectedWeekDay(); } } @@ -401,6 +405,15 @@ export class VWCDatepicker extends LitFlatpickr { } } + private highlightSelectedWeekDay(): void { + if (this._instance && this.weekSelect) { + const className = 'vvd-selected-week-day'; + const selectedWeekDay = this._instance.calendarContainer.querySelector(`.${className}`); + selectedWeekDay?.classList.remove(className); + this._instance.selectedDateElem?.classList.add(className); + } + } + private disablePrevMonthDays(): void { const prevMonthDays = this._instance?.calendarContainer.querySelectorAll('.prevMonthDay'); prevMonthDays?.forEach((day) => { From 8a54fcd55ad7a8bf054cd91cc683fa73c5683a5c Mon Sep 17 00:00:00 2001 From: joelgraham93 Date: Thu, 29 Apr 2021 16:51:31 +1200 Subject: [PATCH 04/10] remove duplicate arg type --- components/datepicker/stories/arg-types.js | 1 - 1 file changed, 1 deletion(-) diff --git a/components/datepicker/stories/arg-types.js b/components/datepicker/stories/arg-types.js index 2713ae37ce..d87bd646f0 100644 --- a/components/datepicker/stories/arg-types.js +++ b/components/datepicker/stories/arg-types.js @@ -103,6 +103,5 @@ export const argTypes = { }, styles: { table: { disable: true } }, theme: { table: { disable: true } }, - weekSelect: { table: { disable: true } }, clickOpens: { table: { disable: true } } } From 27598db09443716487db3b5de17b5d0fef32a55f Mon Sep 17 00:00:00 2001 From: joelgraham93 Date: Fri, 30 Apr 2021 16:05:00 +1200 Subject: [PATCH 05/10] update week select test --- components/datepicker/src/vwc-datepicker.ts | 4 ++-- components/datepicker/test/datepicker.test.js | 17 +++++++++++++++++ 2 files changed, 19 insertions(+), 2 deletions(-) diff --git a/components/datepicker/src/vwc-datepicker.ts b/components/datepicker/src/vwc-datepicker.ts index d59fa9f377..b4310c4a28 100644 --- a/components/datepicker/src/vwc-datepicker.ts +++ b/components/datepicker/src/vwc-datepicker.ts @@ -5,7 +5,7 @@ import { customElement, property, html, CSSResult, query } from 'lit-element'; import { LitFlatpickr } from 'lit-flatpickr'; -import weekSelect from 'flatpickr/dist/plugins/weekSelect/weekSelect'; +import * as weekSelectPlugin from 'flatpickr/dist/plugins/weekSelect/weekSelect'; import { Options } from 'flatpickr/dist/types/options'; import { style as vwcDatepickerStyles } from './vwc-datepicker.css.js'; import { VWCButton } from '@vonage/vwc-button'; @@ -74,7 +74,7 @@ export class VWCDatepicker extends LitFlatpickr { }; if (this.weekSelect) { - this.plugins.push(weekSelect()); + this.plugins.push(weekSelectPlugin.default()); } } diff --git a/components/datepicker/test/datepicker.test.js b/components/datepicker/test/datepicker.test.js index b71f923217..08e624e709 100644 --- a/components/datepicker/test/datepicker.test.js +++ b/components/datepicker/test/datepicker.test.js @@ -146,4 +146,21 @@ describe('datepicker', () => { expect(customFooter).to.not.exist; }); }); + + it('should have week class when set to weekSelect', async () => { + const [actualElement] = addElement( + textToDomToParent(` + <${COMPONENT_NAME} inline weekSelect> + `) + ); + await actualElement.onReady; + await waitNextTask(); + + actualElement.defaultDate = 'today'; + await waitNextTask(); + + const selectedWeekDay = actualElement._instance.selectedDateElem; + expect(selectedWeekDay).to.exist; + expect(selectedWeekDay.classList.contains('week')); + }); }); From c8a90391727ae10407f1b782fc8ae73f31de2d46 Mon Sep 17 00:00:00 2001 From: joelgraham93 Date: Fri, 30 Apr 2021 16:39:59 +1200 Subject: [PATCH 06/10] improve story --- .../stories/datepicker-week-select.stories.js | 35 +++++++++++++++++++ .../datepicker/stories/datepicker.stories.js | 7 ++-- 2 files changed, 39 insertions(+), 3 deletions(-) create mode 100644 components/datepicker/stories/datepicker-week-select.stories.js diff --git a/components/datepicker/stories/datepicker-week-select.stories.js b/components/datepicker/stories/datepicker-week-select.stories.js new file mode 100644 index 0000000000..59ee9ced1d --- /dev/null +++ b/components/datepicker/stories/datepicker-week-select.stories.js @@ -0,0 +1,35 @@ +import '@vonage/vwc-datepicker'; +import { html } from 'lit-element'; +import { spread } from '@open-wc/lit-helpers'; + +const Template = args => html` + + + + + + + +

+    datepicker.onChange = () => {
+      const weekNumber = datepicker.getSelectedDates()[0]
+        ? datepicker.getConfig().getWeek(datepicker.getSelectedDates()[0])
+        : null;
+
+      console.log(weekNumber);
+    };
+  
+`; + +export const WeekSelect = Template.bind({}); +WeekSelect.args = { weekSelect: '' }; diff --git a/components/datepicker/stories/datepicker.stories.js b/components/datepicker/stories/datepicker.stories.js index f2500a2df0..5578e91543 100644 --- a/components/datepicker/stories/datepicker.stories.js +++ b/components/datepicker/stories/datepicker.stories.js @@ -25,9 +25,6 @@ Basic.args = { dateFormat: 'Y-m-d', altInput: '', altFormat: 'F j, Y', closeOnSe export const MaxDate = Template.bind({}); MaxDate.args = { dateFormat: 'Y-m-d', MaxDate: 'today', closeOnSelect: '' }; -export const weekSelect = Template.bind({}); -weekSelect.args = { weekSelect: '' }; - export const MonthPicker = Template.bind({}); MonthPicker.args = { dateFormat: 'F Y', monthPicker: '', closeOnSelect: '' }; @@ -45,6 +42,10 @@ const InlineTemplate = args => html` Date: Fri, 30 Apr 2021 17:01:25 +1200 Subject: [PATCH 07/10] update test --- components/datepicker/test/datepicker.test.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/components/datepicker/test/datepicker.test.js b/components/datepicker/test/datepicker.test.js index 08e624e709..9044cb400c 100644 --- a/components/datepicker/test/datepicker.test.js +++ b/components/datepicker/test/datepicker.test.js @@ -147,7 +147,7 @@ describe('datepicker', () => { }); }); - it('should have week class when set to weekSelect', async () => { + it('should highlight selected week day when set to weekSelect', async () => { const [actualElement] = addElement( textToDomToParent(` <${COMPONENT_NAME} inline weekSelect> @@ -159,8 +159,10 @@ describe('datepicker', () => { actualElement.defaultDate = 'today'; await waitNextTask(); + actualElement.highlightSelectedWeekDay(); + const selectedWeekDay = actualElement._instance.selectedDateElem; expect(selectedWeekDay).to.exist; - expect(selectedWeekDay.classList.contains('week')); + expect(selectedWeekDay.classList.contains('vvd-selected-week-day')).true; }); }); From 19fd43c6e1333f9e3c5aa34b8070a5de5e1995d4 Mon Sep 17 00:00:00 2001 From: joelgraham93 Date: Mon, 10 May 2021 14:21:12 +1200 Subject: [PATCH 08/10] display next month days --- components/datepicker/src/vwc-datepicker.scss | 6 +----- components/datepicker/src/vwc-datepicker.ts | 9 +++++---- 2 files changed, 6 insertions(+), 9 deletions(-) diff --git a/components/datepicker/src/vwc-datepicker.scss b/components/datepicker/src/vwc-datepicker.scss index 9b06045f9f..20b7b8436b 100644 --- a/components/datepicker/src/vwc-datepicker.scss +++ b/components/datepicker/src/vwc-datepicker.scss @@ -122,17 +122,13 @@ vwc-menu { } &.prevMonthDay, + &.nextMonthDay, &.flatpickr-disabled { color: var(#{scheme-variables.$vvd-color-neutral-50}); cursor: default; pointer-events: none; } - &.nextMonthDay { - height: 0; - visibility: hidden; - } - &:hover, &.startRange, &.endRange, diff --git a/components/datepicker/src/vwc-datepicker.ts b/components/datepicker/src/vwc-datepicker.ts index b4310c4a28..c850ed84e6 100644 --- a/components/datepicker/src/vwc-datepicker.ts +++ b/components/datepicker/src/vwc-datepicker.ts @@ -141,7 +141,7 @@ export class VWCDatepicker extends LitFlatpickr { } this._instance?.mobileInput?.setAttribute('slot', 'formInputElement'); - this.disablePrevMonthDays(); + this.disableAdjacentMonthDays(); } private changeHandler(): void { @@ -414,9 +414,10 @@ export class VWCDatepicker extends LitFlatpickr { } } - private disablePrevMonthDays(): void { - const prevMonthDays = this._instance?.calendarContainer.querySelectorAll('.prevMonthDay'); - prevMonthDays?.forEach((day) => { + private disableAdjacentMonthDays(): void { + const disabledMonthDays = this._instance?.calendarContainer.querySelectorAll('.prevMonthDay, .nextMonthDay'); + + disabledMonthDays?.forEach((day) => { day.setAttribute('aria-disabled', 'true'); }); } From aa2a8c150c8b5488d9385b65b3cad9463253c958 Mon Sep 17 00:00:00 2001 From: joelgraham93 Date: Mon, 10 May 2021 17:19:43 +1200 Subject: [PATCH 09/10] make week select compatible with inline mode --- components/datepicker/src/vwc-datepicker.scss | 10 ++++++++ components/datepicker/src/vwc-datepicker.ts | 25 +++++++++++++++++-- .../stories/datepicker-week-select.stories.js | 9 ++----- 3 files changed, 35 insertions(+), 9 deletions(-) diff --git a/components/datepicker/src/vwc-datepicker.scss b/components/datepicker/src/vwc-datepicker.scss index 20b7b8436b..28368b6ef8 100644 --- a/components/datepicker/src/vwc-datepicker.scss +++ b/components/datepicker/src/vwc-datepicker.scss @@ -303,6 +303,16 @@ vwc-menu { z-index: 0; } } + + .inline { + .flatpickr-day { + &.inRange, + &.week.selected:not(:nth-child(7n)):not(:nth-child(7n + 1)) { + box-shadow: -10px 0 0 var(#{scheme-variables.$vvd-color-neutral-20}), + 10px 0 0 var(#{scheme-variables.$vvd-color-neutral-20}); + } + } + } } //-------------- diff --git a/components/datepicker/src/vwc-datepicker.ts b/components/datepicker/src/vwc-datepicker.ts index c850ed84e6..ed3427c585 100644 --- a/components/datepicker/src/vwc-datepicker.ts +++ b/components/datepicker/src/vwc-datepicker.ts @@ -114,6 +114,8 @@ export class VWCDatepicker extends LitFlatpickr { this.appendTo = this.datepickerWrapper; this.initializeComponent(); this.renderCustomParts(); + this.disableAdjacentMonthDays(); + this.inlineDayClickHandlers(); } private renderCustomParts(): void { @@ -140,8 +142,6 @@ export class VWCDatepicker extends LitFlatpickr { this._instance.altInput.classList.add('vvd-datepicker-alt-input'); } this._instance?.mobileInput?.setAttribute('slot', 'formInputElement'); - - this.disableAdjacentMonthDays(); } private changeHandler(): void { @@ -238,6 +238,7 @@ export class VWCDatepicker extends LitFlatpickr { this.updateHeaderMonth(); this.updateHeaderYear(); this.highlightSelectedWeekDay(); + this.disableAdjacentMonthDays(); } private updateHeaderMonth(): void { @@ -412,6 +413,11 @@ export class VWCDatepicker extends LitFlatpickr { selectedWeekDay?.classList.remove(className); this._instance.selectedDateElem?.classList.add(className); } + + // reset inline day handlers after lit-flatpickr update + if (this.inline && this.weekSelect) { + this.inlineDayClickHandlers(); + } } private disableAdjacentMonthDays(): void { @@ -422,6 +428,21 @@ export class VWCDatepicker extends LitFlatpickr { }); } + private inlineDayClickHandlers(): void { + // inline mode doesn't dispatch change event on day select so trigger changeHandler here + if (this.inline && this.weekSelect) { + const days = this._instance?.calendarContainer.querySelectorAll('.flatpickr-day') as NodeListOf; + + days.forEach((day) => { + day.onclick = () => { + setTimeout(() => { + this.changeHandler(); + }, 0); + }; + }); + } + } + // copied from lit-flatpickr // add additional config options getOptions(): Options { diff --git a/components/datepicker/stories/datepicker-week-select.stories.js b/components/datepicker/stories/datepicker-week-select.stories.js index 59ee9ced1d..ae288d251e 100644 --- a/components/datepicker/stories/datepicker-week-select.stories.js +++ b/components/datepicker/stories/datepicker-week-select.stories.js @@ -3,12 +3,7 @@ import { html } from 'lit-element'; import { spread } from '@open-wc/lit-helpers'; const Template = args => html` - - - - +