@vaadin/date-picker 24.0.0-rc2 → 24.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +10 -10
- package/src/vaadin-date-picker-light.js +10 -9
- package/src/vaadin-date-picker-mixin.js +52 -24
- package/web-types.json +2 -2
- package/web-types.lit.json +2 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/date-picker",
|
|
3
|
-
"version": "24.0.
|
|
3
|
+
"version": "24.0.1",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -36,14 +36,14 @@
|
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
38
|
"@polymer/polymer": "^3.2.0",
|
|
39
|
-
"@vaadin/button": "24.0.
|
|
40
|
-
"@vaadin/component-base": "24.0.
|
|
41
|
-
"@vaadin/field-base": "24.0.
|
|
42
|
-
"@vaadin/input-container": "24.0.
|
|
43
|
-
"@vaadin/overlay": "24.0.
|
|
44
|
-
"@vaadin/vaadin-lumo-styles": "24.0.
|
|
45
|
-
"@vaadin/vaadin-material-styles": "24.0.
|
|
46
|
-
"@vaadin/vaadin-themable-mixin": "24.0.
|
|
39
|
+
"@vaadin/button": "~24.0.1",
|
|
40
|
+
"@vaadin/component-base": "~24.0.1",
|
|
41
|
+
"@vaadin/field-base": "~24.0.1",
|
|
42
|
+
"@vaadin/input-container": "~24.0.1",
|
|
43
|
+
"@vaadin/overlay": "~24.0.1",
|
|
44
|
+
"@vaadin/vaadin-lumo-styles": "~24.0.1",
|
|
45
|
+
"@vaadin/vaadin-material-styles": "~24.0.1",
|
|
46
|
+
"@vaadin/vaadin-themable-mixin": "~24.0.1"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
49
|
"@esm-bundle/chai": "^4.3.4",
|
|
@@ -54,5 +54,5 @@
|
|
|
54
54
|
"web-types.json",
|
|
55
55
|
"web-types.lit.json"
|
|
56
56
|
],
|
|
57
|
-
"gitHead": "
|
|
57
|
+
"gitHead": "41f02b2407a3587da78bce6f0753027ff96f16d8"
|
|
58
58
|
}
|
|
@@ -96,15 +96,16 @@ class DatePickerLight extends ThemableMixin(DatePickerMixin(ValidateMixin(Polyme
|
|
|
96
96
|
};
|
|
97
97
|
}
|
|
98
98
|
|
|
99
|
-
/**
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
99
|
+
/**
|
|
100
|
+
* This method from InputMixin is overridden to make
|
|
101
|
+
* the input element value property customizable.
|
|
102
|
+
*
|
|
103
|
+
* @protected
|
|
104
|
+
* @override
|
|
105
|
+
* @return {string}
|
|
106
|
+
*/
|
|
107
|
+
get _inputElementValueProperty() {
|
|
108
|
+
return dashToCamelCase(this.attrForValue);
|
|
108
109
|
}
|
|
109
110
|
|
|
110
111
|
/** @protected */
|
|
@@ -327,6 +327,20 @@ export const DatePickerMixin = (subclass) =>
|
|
|
327
327
|
|
|
328
328
|
/** @private */
|
|
329
329
|
_overlayContent: Object,
|
|
330
|
+
|
|
331
|
+
/**
|
|
332
|
+
* In date-picker, unlike other components extending `InputMixin`,
|
|
333
|
+
* the property indicates true only if the input has been entered by the user.
|
|
334
|
+
* In the case of programmatic changes, the property is reset to false.
|
|
335
|
+
* Read more about why this workaround is needed:
|
|
336
|
+
* https://github.com/vaadin/web-components/issues/5639
|
|
337
|
+
*
|
|
338
|
+
* @protected
|
|
339
|
+
* @override
|
|
340
|
+
*/
|
|
341
|
+
_hasInputValue: {
|
|
342
|
+
type: Boolean,
|
|
343
|
+
},
|
|
330
344
|
};
|
|
331
345
|
}
|
|
332
346
|
|
|
@@ -352,6 +366,30 @@ export const DatePickerMixin = (subclass) =>
|
|
|
352
366
|
this._boundOverlayRenderer = this._overlayRenderer.bind(this);
|
|
353
367
|
}
|
|
354
368
|
|
|
369
|
+
/**
|
|
370
|
+
* @override
|
|
371
|
+
* @protected
|
|
372
|
+
*/
|
|
373
|
+
get _inputElementValue() {
|
|
374
|
+
return super._inputElementValue;
|
|
375
|
+
}
|
|
376
|
+
|
|
377
|
+
/**
|
|
378
|
+
* The setter is overridden to reset the `_hasInputValue` property
|
|
379
|
+
* to false when the input element's value is updated programmatically.
|
|
380
|
+
* In date-picker, `_hasInputValue` is supposed to indicate true only
|
|
381
|
+
* if the input has been entered by the user.
|
|
382
|
+
* Read more about why this workaround is needed:
|
|
383
|
+
* https://github.com/vaadin/web-components/issues/5639
|
|
384
|
+
*
|
|
385
|
+
* @override
|
|
386
|
+
* @protected
|
|
387
|
+
*/
|
|
388
|
+
set _inputElementValue(value) {
|
|
389
|
+
super._inputElementValue = value;
|
|
390
|
+
this._hasInputValue = false;
|
|
391
|
+
}
|
|
392
|
+
|
|
355
393
|
/**
|
|
356
394
|
* Override a getter from `InputControlMixin` to make it optional
|
|
357
395
|
* and to prevent warning when a clear button is missing,
|
|
@@ -372,18 +410,6 @@ export const DatePickerMixin = (subclass) =>
|
|
|
372
410
|
return null;
|
|
373
411
|
}
|
|
374
412
|
|
|
375
|
-
/** @protected */
|
|
376
|
-
get _inputValue() {
|
|
377
|
-
return this.inputElement ? this.inputElement.value : undefined;
|
|
378
|
-
}
|
|
379
|
-
|
|
380
|
-
/** @protected */
|
|
381
|
-
set _inputValue(value) {
|
|
382
|
-
if (this.inputElement) {
|
|
383
|
-
this.inputElement.value = value;
|
|
384
|
-
}
|
|
385
|
-
}
|
|
386
|
-
|
|
387
413
|
/**
|
|
388
414
|
* Override an event listener from `DelegateFocusMixin`
|
|
389
415
|
* @protected
|
|
@@ -410,7 +436,7 @@ export const DatePickerMixin = (subclass) =>
|
|
|
410
436
|
|
|
411
437
|
this.validate();
|
|
412
438
|
|
|
413
|
-
if (this.
|
|
439
|
+
if (this._inputElementValue === '' && this.value !== '') {
|
|
414
440
|
this.value = '';
|
|
415
441
|
}
|
|
416
442
|
}
|
|
@@ -508,9 +534,10 @@ export const DatePickerMixin = (subclass) =>
|
|
|
508
534
|
this._close();
|
|
509
535
|
});
|
|
510
536
|
|
|
511
|
-
// User confirmed selected date by pressing Enter or Today.
|
|
537
|
+
// User confirmed selected date by pressing Enter, Space, or Today.
|
|
512
538
|
content.addEventListener('date-selected', (e) => {
|
|
513
|
-
|
|
539
|
+
// Reset if a date is deselected.
|
|
540
|
+
this.__userConfirmedDate = !!e.detail.date;
|
|
514
541
|
|
|
515
542
|
this._selectDate(e.detail.date);
|
|
516
543
|
});
|
|
@@ -537,9 +564,10 @@ export const DatePickerMixin = (subclass) =>
|
|
|
537
564
|
* @return {boolean} True if the value is valid
|
|
538
565
|
*/
|
|
539
566
|
checkValidity() {
|
|
567
|
+
const inputValue = this._inputElementValue;
|
|
540
568
|
const inputValid =
|
|
541
|
-
!
|
|
542
|
-
(!!this._selectedDate &&
|
|
569
|
+
!inputValue ||
|
|
570
|
+
(!!this._selectedDate && inputValue === this._getFormattedDate(this.i18n.formatDate, this._selectedDate));
|
|
543
571
|
const minMaxValid = !this._selectedDate || dateAllowed(this._selectedDate, this._minDate, this._maxDate);
|
|
544
572
|
|
|
545
573
|
let inputValidity = true;
|
|
@@ -845,7 +873,7 @@ export const DatePickerMixin = (subclass) =>
|
|
|
845
873
|
// Select the parsed input or focused date
|
|
846
874
|
this._ignoreFocusedDateChange = true;
|
|
847
875
|
if (this.i18n.parseDate) {
|
|
848
|
-
const inputValue = this.
|
|
876
|
+
const inputValue = this._inputElementValue || '';
|
|
849
877
|
const parsedDate = this._getParsedDate(inputValue);
|
|
850
878
|
|
|
851
879
|
if (this._isValidDate(parsedDate)) {
|
|
@@ -900,12 +928,12 @@ export const DatePickerMixin = (subclass) =>
|
|
|
900
928
|
/** @private */
|
|
901
929
|
_focusAndSelect() {
|
|
902
930
|
this._focus();
|
|
903
|
-
this._setSelectionRange(0, this.
|
|
931
|
+
this._setSelectionRange(0, this._inputElementValue.length);
|
|
904
932
|
}
|
|
905
933
|
|
|
906
934
|
/** @private */
|
|
907
935
|
_applyInputValue(date) {
|
|
908
|
-
this.
|
|
936
|
+
this._inputElementValue = date ? this._getFormattedDate(this.i18n.formatDate, date) : '';
|
|
909
937
|
}
|
|
910
938
|
|
|
911
939
|
/** @private */
|
|
@@ -933,7 +961,7 @@ export const DatePickerMixin = (subclass) =>
|
|
|
933
961
|
_onChange(event) {
|
|
934
962
|
// For change event on the native <input> blur, after the input is cleared,
|
|
935
963
|
// we schedule change event to be dispatched on date-picker blur.
|
|
936
|
-
if (this.
|
|
964
|
+
if (this._inputElementValue === '') {
|
|
937
965
|
this.__dispatchChange = true;
|
|
938
966
|
}
|
|
939
967
|
|
|
@@ -970,8 +998,8 @@ export const DatePickerMixin = (subclass) =>
|
|
|
970
998
|
*/
|
|
971
999
|
_onClearButtonClick(event) {
|
|
972
1000
|
event.preventDefault();
|
|
1001
|
+
this._inputElementValue = '';
|
|
973
1002
|
this.value = '';
|
|
974
|
-
this._inputValue = '';
|
|
975
1003
|
this.validate();
|
|
976
1004
|
this.dispatchEvent(new CustomEvent('change', { bubbles: true }));
|
|
977
1005
|
}
|
|
@@ -1085,7 +1113,7 @@ export const DatePickerMixin = (subclass) =>
|
|
|
1085
1113
|
}
|
|
1086
1114
|
|
|
1087
1115
|
/** @private */
|
|
1088
|
-
_getParsedDate(inputValue = this.
|
|
1116
|
+
_getParsedDate(inputValue = this._inputElementValue) {
|
|
1089
1117
|
const dateObject = this.i18n.parseDate && this.i18n.parseDate(inputValue);
|
|
1090
1118
|
const parsedDate = dateObject && parseDate(`${dateObject.year}-${dateObject.month + 1}-${dateObject.day}`);
|
|
1091
1119
|
return parsedDate;
|
|
@@ -1109,7 +1137,7 @@ export const DatePickerMixin = (subclass) =>
|
|
|
1109
1137
|
|
|
1110
1138
|
/** @private */
|
|
1111
1139
|
_userInputValueChanged() {
|
|
1112
|
-
if (this.
|
|
1140
|
+
if (this._inputElementValue) {
|
|
1113
1141
|
const parsedDate = this._getParsedDate();
|
|
1114
1142
|
|
|
1115
1143
|
if (this._isValidDate(parsedDate)) {
|
package/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/date-picker",
|
|
4
|
-
"version": "24.0.
|
|
4
|
+
"version": "24.0.1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -334,7 +334,7 @@
|
|
|
334
334
|
},
|
|
335
335
|
{
|
|
336
336
|
"name": "vaadin-date-picker",
|
|
337
|
-
"description": "`<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.\n\n```html\n<vaadin-date-picker label=\"Birthday\"></vaadin-date-picker>\n```\n```js\ndatePicker.value = '2016-03-02';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\n`<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.0.
|
|
337
|
+
"description": "`<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.\n\n```html\n<vaadin-date-picker label=\"Birthday\"></vaadin-date-picker>\n```\n```js\ndatePicker.value = '2016-03-02';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\n`<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.0.1/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name | Description\n----------------------|--------------------\n`toggle-button` | Toggle button\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description | Part name\n-----------|--------------------------------------------------|-----------\n`opened` | Set when the date selector overlay is opened | :host\n\nIf you want to replace the default `<input>` and its container with a custom implementation to get full control\nover the input field, consider using the [`<vaadin-date-picker-light>`](https://cdn.vaadin.com/vaadin-web-components/24.0.1/#/elements/vaadin-date-picker-light) element.\n\n### Internal components\n\nIn addition to `<vaadin-date-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-date-picker-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.0.1/#/elements/vaadin-overlay).\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-date-picker-month-scroller>`\n- `<vaadin-date-picker-year-scroller>`\n- `<vaadin-date-picker-year>`\n- `<vaadin-month-calendar>`\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.0.1/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nIn order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`overlay-header` | Fullscreen mode header\n`label` | Fullscreen mode value/label\n`clear-button` | Fullscreen mode clear button\n`toggle-button` | Fullscreen mode toggle button\n`years-toggle-button` | Fullscreen mode years scroller toggle\n`toolbar` | Footer bar with slotted buttons\n\nThe following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:\n\nAttribute | Description\n----------------|-------------------------------------------------\n`desktop` | Set when the overlay content is in desktop mode\n`fullscreen` | Set when the overlay content is in fullscreen mode\n`years-visible` | Set when the year scroller is visible in fullscreen mode\n\nIn order to style the month calendar, use `<vaadin-month-calendar>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`month-header` | Month title\n`weekdays` | Weekday container\n`weekday` | Weekday element\n`week-numbers` | Week numbers container\n`week-number` | Week number element\n`date` | Date element\n`disabled` | Disabled date element\n`focused` | Focused date element\n`selected` | Selected date element\n`today` | Date element corresponding to the current day\n\nIn order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`year-number` | Year number\n`year-separator` | Year separator\n\nNote: the `theme` attribute value set on `<vaadin-date-picker>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
|
|
338
338
|
"attributes": [
|
|
339
339
|
{
|
|
340
340
|
"name": "disabled",
|
package/web-types.lit.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/date-picker",
|
|
4
|
-
"version": "24.0.
|
|
4
|
+
"version": "24.0.1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -156,7 +156,7 @@
|
|
|
156
156
|
},
|
|
157
157
|
{
|
|
158
158
|
"name": "vaadin-date-picker",
|
|
159
|
-
"description": "`<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.\n\n```html\n<vaadin-date-picker label=\"Birthday\"></vaadin-date-picker>\n```\n```js\ndatePicker.value = '2016-03-02';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\n`<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.0.
|
|
159
|
+
"description": "`<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.\n\n```html\n<vaadin-date-picker label=\"Birthday\"></vaadin-date-picker>\n```\n```js\ndatePicker.value = '2016-03-02';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\n`<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.0.1/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name | Description\n----------------------|--------------------\n`toggle-button` | Toggle button\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description | Part name\n-----------|--------------------------------------------------|-----------\n`opened` | Set when the date selector overlay is opened | :host\n\nIf you want to replace the default `<input>` and its container with a custom implementation to get full control\nover the input field, consider using the [`<vaadin-date-picker-light>`](https://cdn.vaadin.com/vaadin-web-components/24.0.1/#/elements/vaadin-date-picker-light) element.\n\n### Internal components\n\nIn addition to `<vaadin-date-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-date-picker-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.0.1/#/elements/vaadin-overlay).\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-date-picker-month-scroller>`\n- `<vaadin-date-picker-year-scroller>`\n- `<vaadin-date-picker-year>`\n- `<vaadin-month-calendar>`\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.0.1/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nIn order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`overlay-header` | Fullscreen mode header\n`label` | Fullscreen mode value/label\n`clear-button` | Fullscreen mode clear button\n`toggle-button` | Fullscreen mode toggle button\n`years-toggle-button` | Fullscreen mode years scroller toggle\n`toolbar` | Footer bar with slotted buttons\n\nThe following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:\n\nAttribute | Description\n----------------|-------------------------------------------------\n`desktop` | Set when the overlay content is in desktop mode\n`fullscreen` | Set when the overlay content is in fullscreen mode\n`years-visible` | Set when the year scroller is visible in fullscreen mode\n\nIn order to style the month calendar, use `<vaadin-month-calendar>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`month-header` | Month title\n`weekdays` | Weekday container\n`weekday` | Weekday element\n`week-numbers` | Week numbers container\n`week-number` | Week number element\n`date` | Date element\n`disabled` | Disabled date element\n`focused` | Focused date element\n`selected` | Selected date element\n`today` | Date element corresponding to the current day\n\nIn order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`year-number` | Year number\n`year-separator` | Year separator\n\nNote: the `theme` attribute value set on `<vaadin-date-picker>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
|
|
160
160
|
"extension": true,
|
|
161
161
|
"attributes": [
|
|
162
162
|
{
|