@vaadin/date-time-picker 24.5.0-rc1 → 24.6.0-alpha1
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 +12 -12
- package/src/vaadin-date-time-picker.js +13 -26
- package/web-types.json +5 -5
- package/web-types.lit.json +4 -4
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/date-time-picker",
|
|
3
|
-
"version": "24.
|
|
3
|
+
"version": "24.6.0-alpha1",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -36,18 +36,18 @@
|
|
|
36
36
|
],
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@polymer/polymer": "^3.0.0",
|
|
39
|
-
"@vaadin/a11y-base": "24.
|
|
40
|
-
"@vaadin/component-base": "24.
|
|
41
|
-
"@vaadin/custom-field": "24.
|
|
42
|
-
"@vaadin/date-picker": "24.
|
|
43
|
-
"@vaadin/field-base": "24.
|
|
44
|
-
"@vaadin/time-picker": "24.
|
|
45
|
-
"@vaadin/vaadin-lumo-styles": "24.
|
|
46
|
-
"@vaadin/vaadin-material-styles": "24.
|
|
47
|
-
"@vaadin/vaadin-themable-mixin": "24.
|
|
39
|
+
"@vaadin/a11y-base": "24.6.0-alpha1",
|
|
40
|
+
"@vaadin/component-base": "24.6.0-alpha1",
|
|
41
|
+
"@vaadin/custom-field": "24.6.0-alpha1",
|
|
42
|
+
"@vaadin/date-picker": "24.6.0-alpha1",
|
|
43
|
+
"@vaadin/field-base": "24.6.0-alpha1",
|
|
44
|
+
"@vaadin/time-picker": "24.6.0-alpha1",
|
|
45
|
+
"@vaadin/vaadin-lumo-styles": "24.6.0-alpha1",
|
|
46
|
+
"@vaadin/vaadin-material-styles": "24.6.0-alpha1",
|
|
47
|
+
"@vaadin/vaadin-themable-mixin": "24.6.0-alpha1"
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
|
50
|
-
"@vaadin/chai-plugins": "24.
|
|
50
|
+
"@vaadin/chai-plugins": "24.6.0-alpha1",
|
|
51
51
|
"@vaadin/testing-helpers": "^1.0.0",
|
|
52
52
|
"sinon": "^18.0.0"
|
|
53
53
|
},
|
|
@@ -55,5 +55,5 @@
|
|
|
55
55
|
"web-types.json",
|
|
56
56
|
"web-types.lit.json"
|
|
57
57
|
],
|
|
58
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "ae1fb0e6e7ce925999051c6cc62ba8476264c63f"
|
|
59
59
|
}
|
|
@@ -417,17 +417,14 @@ class DateTimePicker extends FieldMixin(DisabledMixin(FocusMixin(ThemableMixin(E
|
|
|
417
417
|
}
|
|
418
418
|
|
|
419
419
|
/** @private */
|
|
420
|
-
get
|
|
420
|
+
get __pickers() {
|
|
421
421
|
return [this.__datePicker, this.__timePicker];
|
|
422
422
|
}
|
|
423
423
|
|
|
424
424
|
/** @private */
|
|
425
425
|
get __formattedValue() {
|
|
426
|
-
const
|
|
427
|
-
|
|
428
|
-
return [dateValue, timeValue].join('T');
|
|
429
|
-
}
|
|
430
|
-
return '';
|
|
426
|
+
const values = this.__pickers.map((picker) => picker.value);
|
|
427
|
+
return values.every(Boolean) ? values.join('T') : '';
|
|
431
428
|
}
|
|
432
429
|
|
|
433
430
|
/** @protected */
|
|
@@ -724,6 +721,12 @@ class DateTimePicker extends FieldMixin(DisabledMixin(FocusMixin(ThemableMixin(E
|
|
|
724
721
|
if (timePicker) {
|
|
725
722
|
timePicker.required = required;
|
|
726
723
|
}
|
|
724
|
+
|
|
725
|
+
if (this.__oldRequired && !required) {
|
|
726
|
+
this.validate();
|
|
727
|
+
}
|
|
728
|
+
|
|
729
|
+
this.__oldRequired = required;
|
|
727
730
|
}
|
|
728
731
|
|
|
729
732
|
/** @private */
|
|
@@ -876,13 +879,9 @@ class DateTimePicker extends FieldMixin(DisabledMixin(FocusMixin(ThemableMixin(E
|
|
|
876
879
|
* @return {boolean}
|
|
877
880
|
*/
|
|
878
881
|
checkValidity() {
|
|
879
|
-
const
|
|
880
|
-
const
|
|
881
|
-
|
|
882
|
-
if (hasInvalidFields || hasEmptyFields) {
|
|
883
|
-
return false;
|
|
884
|
-
}
|
|
885
|
-
return true;
|
|
882
|
+
const hasInvalidPickers = this.__pickers.some((picker) => !picker.checkValidity());
|
|
883
|
+
const hasEmptyRequiredPickers = this.required && this.__pickers.some((picker) => !picker.value);
|
|
884
|
+
return !hasInvalidPickers && !hasEmptyRequiredPickers;
|
|
886
885
|
}
|
|
887
886
|
|
|
888
887
|
// Copied from vaadin-time-picker
|
|
@@ -1014,21 +1013,9 @@ class DateTimePicker extends FieldMixin(DisabledMixin(FocusMixin(ThemableMixin(E
|
|
|
1014
1013
|
return;
|
|
1015
1014
|
}
|
|
1016
1015
|
|
|
1017
|
-
const value = this.__formattedValue;
|
|
1018
|
-
|
|
1019
|
-
const [date, time] = value.split('T');
|
|
1020
|
-
|
|
1021
1016
|
this.__ignoreInputValueChange = true;
|
|
1022
1017
|
this.__updateTimePickerMinMax();
|
|
1023
|
-
|
|
1024
|
-
if (date && time) {
|
|
1025
|
-
if (value !== this.value) {
|
|
1026
|
-
this.value = value;
|
|
1027
|
-
}
|
|
1028
|
-
} else {
|
|
1029
|
-
this.value = '';
|
|
1030
|
-
}
|
|
1031
|
-
|
|
1018
|
+
this.value = this.__formattedValue;
|
|
1032
1019
|
this.__ignoreInputValueChange = false;
|
|
1033
1020
|
}
|
|
1034
1021
|
|
package/web-types.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/date-time-picker",
|
|
4
|
-
"version": "24.
|
|
4
|
+
"version": "24.6.0-alpha1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
9
|
{
|
|
10
10
|
"name": "vaadin-date-time-picker",
|
|
11
|
-
"description": "`<vaadin-date-time-picker>` is a Web Component providing a date time selection field.\n\n```html\n<vaadin-date-time-picker value=\"2019-09-16T15:00\"></vaadin-date-time-picker>\n```\n```js\ndateTimePicker.value = '2019-09-16T15:00';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The slotted label element wrapper\n`helper-text` | The slotted helper text element wrapper\n`error-message` | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n--------------------|-------------------------------------------|------------\n`disabled` | Set when the element is disabled | :host\n`focused` | Set when the element is focused | :host\n`focus-ring` | Set when the element is keyboard focused | :host\n`readonly` | Set when the element is readonly | :host\n`invalid` | Set when the element is invalid | :host\n`has-label` | Set when the element has a label | :host\n`has-value` | Set when the element has a value | :host\n`has-helper` | Set when the element has helper text | :host\n`has-error-message` | Set when the element has an error message | :host\n\n### Internal components\n\nThe following components are created by `<vaadin-date-time-picker>` and placed in light DOM:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.
|
|
11
|
+
"description": "`<vaadin-date-time-picker>` is a Web Component providing a date time selection field.\n\n```html\n<vaadin-date-time-picker value=\"2019-09-16T15:00\"></vaadin-date-time-picker>\n```\n```js\ndateTimePicker.value = '2019-09-16T15:00';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The slotted label element wrapper\n`helper-text` | The slotted helper text element wrapper\n`error-message` | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n--------------------|-------------------------------------------|------------\n`disabled` | Set when the element is disabled | :host\n`focused` | Set when the element is focused | :host\n`focus-ring` | Set when the element is keyboard focused | :host\n`readonly` | Set when the element is readonly | :host\n`invalid` | Set when the element is invalid | :host\n`has-label` | Set when the element has a label | :host\n`has-value` | Set when the element has a value | :host\n`has-helper` | Set when the element has helper text | :host\n`has-error-message` | Set when the element has an error message | :host\n\n### Internal components\n\nThe following components are created by `<vaadin-date-time-picker>` and placed in light DOM:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.6.0-alpha1/#/elements/vaadin-date-picker).\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.6.0-alpha1/#/elements/vaadin-time-picker).\n\nNote: the `theme` attribute value set on `<vaadin-date-time-picker>` is\npropagated to these components.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "disabled",
|
|
@@ -224,7 +224,7 @@
|
|
|
224
224
|
},
|
|
225
225
|
{
|
|
226
226
|
"name": "overlay-class",
|
|
227
|
-
"description": "A space-delimited list of CSS class names to set on the overlay elements\nof the internal components controlled by the `<vaadin-date-time-picker>`:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.
|
|
227
|
+
"description": "A space-delimited list of CSS class names to set on the overlay elements\nof the internal components controlled by the `<vaadin-date-time-picker>`:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.6.0-alpha1/#/elements/vaadin-date-picker#property-overlayClass)\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.6.0-alpha1/#/elements/vaadin-time-picker#property-overlayClass)",
|
|
228
228
|
"value": {
|
|
229
229
|
"type": [
|
|
230
230
|
"string",
|
|
@@ -461,7 +461,7 @@
|
|
|
461
461
|
},
|
|
462
462
|
{
|
|
463
463
|
"name": "i18n",
|
|
464
|
-
"description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object or just the properties you want to modify.\n\nThe object is a combination of the i18n properties supported by\n[`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.
|
|
464
|
+
"description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object or just the properties you want to modify.\n\nThe object is a combination of the i18n properties supported by\n[`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.6.0-alpha1/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.6.0-alpha1/#/elements/vaadin-time-picker).",
|
|
465
465
|
"value": {
|
|
466
466
|
"type": [
|
|
467
467
|
"DateTimePickerI18n"
|
|
@@ -470,7 +470,7 @@
|
|
|
470
470
|
},
|
|
471
471
|
{
|
|
472
472
|
"name": "overlayClass",
|
|
473
|
-
"description": "A space-delimited list of CSS class names to set on the overlay elements\nof the internal components controlled by the `<vaadin-date-time-picker>`:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.
|
|
473
|
+
"description": "A space-delimited list of CSS class names to set on the overlay elements\nof the internal components controlled by the `<vaadin-date-time-picker>`:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.6.0-alpha1/#/elements/vaadin-date-picker#property-overlayClass)\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.6.0-alpha1/#/elements/vaadin-time-picker#property-overlayClass)",
|
|
474
474
|
"value": {
|
|
475
475
|
"type": [
|
|
476
476
|
"string",
|
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-time-picker",
|
|
4
|
-
"version": "24.
|
|
4
|
+
"version": "24.6.0-alpha1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"elements": [
|
|
17
17
|
{
|
|
18
18
|
"name": "vaadin-date-time-picker",
|
|
19
|
-
"description": "`<vaadin-date-time-picker>` is a Web Component providing a date time selection field.\n\n```html\n<vaadin-date-time-picker value=\"2019-09-16T15:00\"></vaadin-date-time-picker>\n```\n```js\ndateTimePicker.value = '2019-09-16T15:00';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The slotted label element wrapper\n`helper-text` | The slotted helper text element wrapper\n`error-message` | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n--------------------|-------------------------------------------|------------\n`disabled` | Set when the element is disabled | :host\n`focused` | Set when the element is focused | :host\n`focus-ring` | Set when the element is keyboard focused | :host\n`readonly` | Set when the element is readonly | :host\n`invalid` | Set when the element is invalid | :host\n`has-label` | Set when the element has a label | :host\n`has-value` | Set when the element has a value | :host\n`has-helper` | Set when the element has helper text | :host\n`has-error-message` | Set when the element has an error message | :host\n\n### Internal components\n\nThe following components are created by `<vaadin-date-time-picker>` and placed in light DOM:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.
|
|
19
|
+
"description": "`<vaadin-date-time-picker>` is a Web Component providing a date time selection field.\n\n```html\n<vaadin-date-time-picker value=\"2019-09-16T15:00\"></vaadin-date-time-picker>\n```\n```js\ndateTimePicker.value = '2019-09-16T15:00';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The slotted label element wrapper\n`helper-text` | The slotted helper text element wrapper\n`error-message` | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n--------------------|-------------------------------------------|------------\n`disabled` | Set when the element is disabled | :host\n`focused` | Set when the element is focused | :host\n`focus-ring` | Set when the element is keyboard focused | :host\n`readonly` | Set when the element is readonly | :host\n`invalid` | Set when the element is invalid | :host\n`has-label` | Set when the element has a label | :host\n`has-value` | Set when the element has a value | :host\n`has-helper` | Set when the element has helper text | :host\n`has-error-message` | Set when the element has an error message | :host\n\n### Internal components\n\nThe following components are created by `<vaadin-date-time-picker>` and placed in light DOM:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.6.0-alpha1/#/elements/vaadin-date-picker).\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.6.0-alpha1/#/elements/vaadin-time-picker).\n\nNote: the `theme` attribute value set on `<vaadin-date-time-picker>` is\npropagated to these components.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|
|
@@ -161,14 +161,14 @@
|
|
|
161
161
|
},
|
|
162
162
|
{
|
|
163
163
|
"name": ".i18n",
|
|
164
|
-
"description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object or just the properties you want to modify.\n\nThe object is a combination of the i18n properties supported by\n[`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.
|
|
164
|
+
"description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object or just the properties you want to modify.\n\nThe object is a combination of the i18n properties supported by\n[`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.6.0-alpha1/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.6.0-alpha1/#/elements/vaadin-time-picker).",
|
|
165
165
|
"value": {
|
|
166
166
|
"kind": "expression"
|
|
167
167
|
}
|
|
168
168
|
},
|
|
169
169
|
{
|
|
170
170
|
"name": ".overlayClass",
|
|
171
|
-
"description": "A space-delimited list of CSS class names to set on the overlay elements\nof the internal components controlled by the `<vaadin-date-time-picker>`:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.
|
|
171
|
+
"description": "A space-delimited list of CSS class names to set on the overlay elements\nof the internal components controlled by the `<vaadin-date-time-picker>`:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.6.0-alpha1/#/elements/vaadin-date-picker#property-overlayClass)\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.6.0-alpha1/#/elements/vaadin-time-picker#property-overlayClass)",
|
|
172
172
|
"value": {
|
|
173
173
|
"kind": "expression"
|
|
174
174
|
}
|