Skip to content

Commit 71ce9d1

Browse files
Felipe Langpaodb
Felipe Lang
authored and
paodb
committed
migrate to Vaadin 24
1 parent 6d58bcf commit 71ce9d1

File tree

6 files changed

+194
-66
lines changed

6 files changed

+194
-66
lines changed

‎package.json‎

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@vaadin-component-factory/vcf-date-range-picker",
3-
"version": "4.9.3",
3+
"version": "5.0.0",
44
"description": "Polymer element providing a date range selection field with scrollable month calendar",
55
"main": "vcf-date-range-picker.js",
66
"repository": {
@@ -33,28 +33,29 @@
3333
"@polymer/iron-a11y-keys-behavior": "^3.0.0",
3434
"@polymer/iron-media-query": "^3.0.0",
3535
"@polymer/iron-resizable-behavior": "^3.0.1",
36-
"@polymer/polymer": "^3.2.0",
37-
"@vaadin/button": "^23.0.7",
36+
"@polymer/polymer": "^3.3.0",
37+
"@vaadin/button": "^24.2.0",
38+
"@vaadin/component-base": "^24.2.0",
39+
"@vaadin/form-layout": "^24.2.0",
40+
"@vaadin/overlay": "^24.2.0",
41+
"@vaadin/polymer-legacy-adapter": "^24.2.2",
42+
"@vaadin/text-field": "^24.2.0",
3843
"@vaadin/vaadin-control-state-mixin": "^21.0.5",
39-
"@vaadin/component-base": "^23.0.7",
40-
"@vaadin/vaadin-lumo-styles": "^23.0.7",
41-
"@vaadin/vaadin-material-styles": "^23.0.7",
42-
"@vaadin/vaadin-overlay": "^23.0.7",
43-
"@vaadin/text-field": "^23.0.7",
44-
"@vaadin/vaadin-themable-mixin": "^23.0.7",
45-
"@vaadin/form-layout": "^23.0.7"
44+
"@vaadin/vaadin-lumo-styles": "^24.2.0",
45+
"@vaadin/vaadin-material-styles": "^24.2.0",
46+
"@vaadin/vaadin-themable-mixin": "^24.2.0"
4647
},
4748
"devDependencies": {
4849
"@polymer/iron-component-page": "^4.0.0",
50+
"@polymer/iron-demo-helpers": "^3.0.0-pre.19",
4951
"@polymer/iron-form": "^3.0.0",
5052
"@polymer/iron-icon": "^3.0.1",
5153
"@polymer/iron-icons": "^3.0.1",
5254
"@polymer/iron-input": "^3.0.1",
5355
"@polymer/iron-test-helpers": "^3.0.0",
54-
"@vaadin/custom-field": "^23.0.7",
55-
"@polymer/iron-demo-helpers": "^3.0.0-pre.19",
56-
"@vaadin/icons": "^23.0.7",
57-
"@vaadin/dialog": "^23.0.7",
56+
"@vaadin/custom-field": "^24.2.0",
57+
"@vaadin/dialog": "^24.2.0",
58+
"@vaadin/icons": "^24.2.0",
5859
"sugar": "^2.0.0",
5960
"wct-browser-legacy": "^1.0.1"
6061
},

‎src/vcf-date-range-picker-mixin.js‎

Lines changed: 154 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,20 @@
11
import { IronA11yKeysBehavior } from '@polymer/iron-a11y-keys-behavior/iron-a11y-keys-behavior.js';
2-
import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
32
import { dateAllowed, dateEquals, extractDateParts, getClosestDate } from './vcf-date-range-picker-helper.js';
43
import { addListener } from '@polymer/polymer/lib/utils/gestures.js';
5-
import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
4+
import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
5+
import { MediaQueryController } from '@vaadin/component-base/src/media-query-controller.js';
6+
import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
7+
import { InputConstraintsMixin } from '@vaadin/field-base/src/input-constraints-mixin.js';
8+
import { VirtualKeyboardController } from '@vaadin/field-base/src/virtual-keyboard-controller.js';
9+
import { DelegateFocusMixin } from '@vaadin/a11y-base/src/delegate-focus-mixin.js';
10+
import { KeyboardMixin } from '@vaadin/a11y-base/src/keyboard-mixin.js';
611

712
/**
813
* @polymerMixin
914
*/
1015
export const DateRangePickerMixin = (subclass) =>
11-
class VaadinDatePickerMixin extends mixinBehaviors([IronResizableBehavior], subclass) {
16+
class VaadinDatePickerMixin extends OverlayClassMixin(
17+
ControllerMixin(DelegateFocusMixin(InputConstraintsMixin(KeyboardMixin(subclass)))),) {
1218
static get properties() {
1319
return {
1420
/**
@@ -121,6 +127,7 @@ export const DateRangePickerMixin = (subclass) =>
121127
* @protected
122128
*/
123129
_fullscreen: {
130+
type: Boolean,
124131
value: false,
125132
observer: '_fullscreenChanged'
126133
},
@@ -358,6 +365,12 @@ export const DateRangePickerMixin = (subclass) =>
358365
/** @private */
359366
_focusOverlayOnOpen: Boolean,
360367

368+
/** @private */
369+
_overlayContent: {
370+
type: Object,
371+
sync: true,
372+
},
373+
361374
/** @protected */
362375
_overlayInitialized: Boolean
363376
};
@@ -369,17 +382,79 @@ export const DateRangePickerMixin = (subclass) =>
369382
'_selectedStartDateChanged(_selectedStartDate, i18n.formatDate)',
370383
'_selectedEndDateChanged(_selectedEndDate, i18n.formatDate)',
371384
'_focusedDateChanged(_focusedDate, i18n.formatDate)',
372-
'_announceFocusedDate(_focusedDate, opened, _ignoreAnnounce)'
385+
'_announceFocusedDate(_focusedDate, opened, _ignoreAnnounce)',
386+
'__updateOverlayContent(_overlayContent, i18n, label, _minDate, _maxDate, _focusedDate, showWeekNumbers, _selectedStartDate, _selectedEndDate, _selectingStartDate, hideSidePanel)',
387+
'__updateOverlayContentTheme(_overlayContent, _theme)',
388+
'__updateOverlayContentFullScreen(_overlayContent, _fullscreen)',
373389
];
374390
}
391+
392+
/** @private */
393+
// eslint-disable-next-line max-params
394+
__updateOverlayContent(overlayContent, i18n, label, minDate, maxDate, focusedDate, showWeekNumbers, _selectedStartDate, _selectedEndDate, selectingStartDate, hideSidePanel) {
395+
if (overlayContent) {
396+
overlayContent.i18n = i18n;
397+
overlayContent.label = label;
398+
overlayContent.minDate = minDate;
399+
overlayContent.maxDate = maxDate;
400+
overlayContent.focusedDate = focusedDate;
401+
overlayContent.showWeekNumbers = showWeekNumbers;
402+
overlayContent.selectedStartDate = _selectedStartDate;
403+
overlayContent.selectedEndDate = _selectedEndDate;
404+
overlayContent.selectingStartDate = selectingStartDate;
405+
overlayContent.hideSidePanel = hideSidePanel;
406+
}
407+
}
375408

376-
/** @protected */
377-
ready() {
378-
super.ready();
409+
/** @private */
410+
__updateOverlayContentTheme(overlayContent, theme) {
411+
if (overlayContent) {
412+
if (theme) {
413+
overlayContent.setAttribute('theme', theme);
414+
} else {
415+
overlayContent.removeAttribute('theme');
416+
}
417+
}
418+
}
419+
420+
/** @private */
421+
__updateOverlayContentFullScreen(overlayContent, fullscreen) {
422+
if (overlayContent) {
423+
overlayContent.toggleAttribute('fullscreen', fullscreen);
424+
}
425+
}
426+
427+
constructor() {
428+
super();
429+
430+
this._boundOnClick = this._onClick.bind(this)
379431
this._boundOnScroll = this._onScroll.bind(this);
380432
this._boundFocus = this._focus.bind(this);
381433
this._boundUpdateAlignmentAndPosition = this._updateAlignmentAndPosition.bind(this);
382434

435+
this._boundOverlayRenderer = this._overlayRenderer.bind(this);
436+
}
437+
438+
/** @protected */
439+
ready() {
440+
super.ready();
441+
442+
// new stuff from v24
443+
this.addController(
444+
new MediaQueryController(this._fullscreenMediaQuery, (matches) => {
445+
this._fullscreen = matches;
446+
}),
447+
);
448+
449+
this.addController(new VirtualKeyboardController(this));
450+
451+
const overlay = this.$.overlay;
452+
this._overlayElement = overlay;
453+
454+
overlay.renderer = this._boundOverlayRenderer;
455+
456+
// new stuff from v24
457+
383458
const isClearButton = e => {
384459
const path = e.composedPath();
385460
// FIX: Just using inputStartElement, but don't know what to do
@@ -536,6 +611,52 @@ export const DateRangePickerMixin = (subclass) =>
536611
}
537612
}
538613

614+
/** @private */
615+
_overlayRenderer(root) {
616+
if (root.firstChild) {
617+
return;
618+
}
619+
620+
// Create and store document content element
621+
const content = document.createElement('vcf-date-range-picker-overlay-content');
622+
root.appendChild(content);
623+
624+
this._overlayContent = content;
625+
626+
this._initOverlay();
627+
628+
this._updateAlignmentAndPosition();
629+
630+
content.addEventListener('close', () => {
631+
this._close();
632+
});
633+
634+
content.addEventListener('focus-input', this._focusAndSelect.bind(this));
635+
636+
// User confirmed selected date by clicking the calendar.
637+
content.addEventListener('date-tap', e => this._closeOnTap(e));
638+
639+
// Two-way data binding for `selectedStartDate` property
640+
content.addEventListener('selected-start-date-changed', (e) => {
641+
this._selectedStartDate = e.detail.value;
642+
});
643+
644+
// Two-way data binding for `selectedEndDate` property
645+
content.addEventListener('selected-end-date-changed', (e) => {
646+
this._selectedEndDate = e.detail.value;
647+
});
648+
649+
// Two-way data binding for `selectedEndDate` property
650+
content.addEventListener('selecting-start-date-changed', (e) => {
651+
this._selectingStartDate = e.detail.value;
652+
});
653+
654+
// Two-way data binding for `focusedDate` property
655+
content.addEventListener('focused-date-changed', (e) => {
656+
this._focusedDate = e.detail.value;
657+
});
658+
}
659+
539660
/**
540661
* @return {HTMLElement}
541662
* @protected
@@ -613,14 +734,9 @@ export const DateRangePickerMixin = (subclass) =>
613734
/** @private */
614735
_openedChanged(opened) {
615736
this._selectingStartDate = true;
616-
if (opened && !this._overlayInitialized) {
617-
this._initOverlay();
618-
}
619-
if (this._overlayInitialized) {
620-
this.$.overlay.opened = opened;
621-
}
622-
if (opened) {
623-
this._updateAlignmentAndPosition();
737+
738+
if (this.inputElement) {
739+
this.inputElement.setAttribute('aria-expanded', opened);
624740
}
625741
}
626742

@@ -1101,6 +1217,29 @@ export const DateRangePickerMixin = (subclass) =>
11011217
}
11021218
}
11031219

1220+
/**
1221+
* @param {Event} event
1222+
* @private
1223+
*/
1224+
_onClick(event) {
1225+
// Clear button click is handled in separate listener
1226+
// but bubbles to the host, so we need to ignore it.
1227+
if (!this._isClearButton(event)) {
1228+
this._onHostClick(event);
1229+
}
1230+
}
1231+
1232+
/**
1233+
* @param {Event} event
1234+
* @private
1235+
*/
1236+
_onHostClick(event) {
1237+
if (!this.autoOpenDisabled || this._noInput) {
1238+
event.preventDefault();
1239+
this.open();
1240+
}
1241+
}
1242+
11041243
/**
11051244
* Keyboard Navigation
11061245
* @private
@@ -1322,11 +1461,6 @@ export const DateRangePickerMixin = (subclass) =>
13221461
}
13231462
}
13241463

1325-
/** @private */
1326-
get _overlayContent() {
1327-
return this.$.overlay.content.querySelector('#overlay-content');
1328-
}
1329-
13301464
/**
13311465
* Fired when the user commits a value change.
13321466
*

‎src/vcf-date-range-picker-overlay.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import { OverlayElement } from '@vaadin/vaadin-overlay/src/vaadin-overlay.js';
2-
import { DisableUpgradeMixin } from '@polymer/polymer/lib/mixins/disable-upgrade-mixin.js';
1+
import { Overlay } from '@vaadin/overlay/src/vaadin-overlay.js';
2+
import { PositionMixin } from '@vaadin/overlay/src/vaadin-overlay-position-mixin.js';
3+
import './vcf-date-range-picker-overlay-content.js';
34

45
/**
56
* The overlay element.
@@ -11,14 +12,15 @@ import { DisableUpgradeMixin } from '@polymer/polymer/lib/mixins/disable-upgrade
1112
*
1213
* See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
1314
*
14-
* @extends Vaadin.OverlayElement
15+
* @extends Vaadin.Overlay
1516
* @memberof Vaadin
1617
* @private
1718
*/
18-
class DateRangePickerOverlayElement extends DisableUpgradeMixin(OverlayElement) {
19+
class DateRangePickerOverlayElement extends PositionMixin(Overlay) {
1920
static get is() {
2021
return 'vcf-date-range-picker-overlay';
2122
}
23+
2224
}
2325

2426
customElements.define(DateRangePickerOverlayElement.is, DateRangePickerOverlayElement);

‎src/vcf-date-range-picker.js‎

Lines changed: 13 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import '@polymer/iron-media-query/iron-media-query.js';
44
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
55
import { ControlStateMixin } from '@vaadin/vaadin-control-state-mixin/vaadin-control-state-mixin.js';
66
import './vcf-date-range-picker-overlay.js';
7-
import './vcf-date-range-picker-overlay-content.js';
7+
88
import { DateRangePickerMixin } from './vcf-date-range-picker-mixin.js';
99
import './vcf-date-range-picker-text-field.js';
1010
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
@@ -208,30 +208,12 @@ import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
208208
<vcf-date-range-picker-overlay
209209
id="overlay"
210210
fullscreen$="[[_fullscreen]]"
211+
opened="{{opened}}"
211212
theme$="[[__getOverlayTheme(theme, _overlayInitialized)]]"
212213
on-vaadin-overlay-open="_onOverlayOpened"
213214
on-vaadin-overlay-close="_onOverlayClosed"
214215
disable-upgrade>
215-
<template>
216-
<vcf-date-range-picker-overlay-content
217-
id="overlay-content" i18n="[[i18n]]"
218-
fullscreen$="[[_fullscreen]]"
219-
label="[[label]]"
220-
selected-start-date="{{_selectedStartDate}}"
221-
selected-end-date="{{_selectedEndDate}}"
222-
selecting-start-date="{{_selectingStartDate}}"
223-
hide-side-panel="{{hideSidePanel}}"
224-
slot="dropdown-content"
225-
focused-date="{{_focusedDate}}"
226-
show-week-numbers="[[showWeekNumbers]]"
227-
min-date="[[_minDate]]"
228-
max-date="[[_maxDate]]"
229-
role="dialog"
230-
on-date-tap="_closeOnTap"
231-
part="overlay-content"
232-
theme$="[[__getOverlayTheme(theme, _overlayInitialized)]]">
233-
</vcf-date-range-picker-overlay-content>
234-
</template>
216+
235217
</vcf-date-range-picker-overlay>
236218
<div style="display:none">
237219
<slot name="presets"></slot>
@@ -248,7 +230,7 @@ import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
248230
}
249231

250232
static get version() {
251-
return '4.4.1';
233+
return '5.0.0';
252234
}
253235

254236
static get properties() {
@@ -401,6 +383,15 @@ import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
401383
this._classNamesForDates = newJson;
402384
}
403385

386+
// Workaround https://github.com/vaadin/web-components/issues/2855
387+
/** @protected */
388+
_openedChanged(opened) {
389+
super._openedChanged(opened);
390+
391+
this.$.overlay.positionTarget = this.shadowRoot.querySelector('[part="input-field"]');
392+
this.$.overlay.noVerticalOverlap = true;
393+
}
394+
404395
/** @private */
405396
_onVaadinOverlayClose(e) {
406397
if (this._openedWithFocusRing && this.hasAttribute('focused')) {

0 commit comments

Comments
 (0)