@vaadin/date-picker 24.5.0-alpha7 → 24.5.0-alpha9
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/README.md
CHANGED
|
@@ -51,7 +51,7 @@ import '@vaadin/date-picker/src/vaadin-date-picker.js';
|
|
|
51
51
|
|
|
52
52
|
## Contributing
|
|
53
53
|
|
|
54
|
-
Read the [contributing guide](https://vaadin.com/docs/latest/contributing
|
|
54
|
+
Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
|
|
55
55
|
|
|
56
56
|
## License
|
|
57
57
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/date-picker",
|
|
3
|
-
"version": "24.5.0-
|
|
3
|
+
"version": "24.5.0-alpha9",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -36,25 +36,25 @@
|
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
38
|
"@polymer/polymer": "^3.2.0",
|
|
39
|
-
"@vaadin/a11y-base": "24.5.0-
|
|
40
|
-
"@vaadin/button": "24.5.0-
|
|
41
|
-
"@vaadin/component-base": "24.5.0-
|
|
42
|
-
"@vaadin/field-base": "24.5.0-
|
|
43
|
-
"@vaadin/input-container": "24.5.0-
|
|
44
|
-
"@vaadin/overlay": "24.5.0-
|
|
45
|
-
"@vaadin/vaadin-lumo-styles": "24.5.0-
|
|
46
|
-
"@vaadin/vaadin-material-styles": "24.5.0-
|
|
47
|
-
"@vaadin/vaadin-themable-mixin": "24.5.0-
|
|
39
|
+
"@vaadin/a11y-base": "24.5.0-alpha9",
|
|
40
|
+
"@vaadin/button": "24.5.0-alpha9",
|
|
41
|
+
"@vaadin/component-base": "24.5.0-alpha9",
|
|
42
|
+
"@vaadin/field-base": "24.5.0-alpha9",
|
|
43
|
+
"@vaadin/input-container": "24.5.0-alpha9",
|
|
44
|
+
"@vaadin/overlay": "24.5.0-alpha9",
|
|
45
|
+
"@vaadin/vaadin-lumo-styles": "24.5.0-alpha9",
|
|
46
|
+
"@vaadin/vaadin-material-styles": "24.5.0-alpha9",
|
|
47
|
+
"@vaadin/vaadin-themable-mixin": "24.5.0-alpha9",
|
|
48
48
|
"lit": "^3.0.0"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
|
-
"@
|
|
52
|
-
"@vaadin/testing-helpers": "^0.
|
|
53
|
-
"sinon": "^
|
|
51
|
+
"@vaadin/chai-plugins": "24.5.0-alpha9",
|
|
52
|
+
"@vaadin/testing-helpers": "^1.0.0",
|
|
53
|
+
"sinon": "^18.0.0"
|
|
54
54
|
},
|
|
55
55
|
"web-types": [
|
|
56
56
|
"web-types.json",
|
|
57
57
|
"web-types.lit.json"
|
|
58
58
|
],
|
|
59
|
-
"gitHead": "
|
|
59
|
+
"gitHead": "804744762f3bec0a2247c4bbcbbb204dbcd78bc0"
|
|
60
60
|
}
|
|
@@ -567,6 +567,12 @@ export const DatePickerMixin = (subclass) =>
|
|
|
567
567
|
}
|
|
568
568
|
});
|
|
569
569
|
|
|
570
|
+
content.addEventListener('focusout', (event) => {
|
|
571
|
+
if (this._shouldRemoveFocus(event)) {
|
|
572
|
+
this._setFocused(false);
|
|
573
|
+
}
|
|
574
|
+
});
|
|
575
|
+
|
|
570
576
|
// Two-way data binding for `focusedDate` property
|
|
571
577
|
content.addEventListener('focused-date-changed', (e) => {
|
|
572
578
|
this._focusedDate = e.detail.value;
|
|
@@ -650,12 +656,27 @@ export const DatePickerMixin = (subclass) =>
|
|
|
650
656
|
* - when moving focus to the overlay content,
|
|
651
657
|
* - when closing on date click / outside click.
|
|
652
658
|
*
|
|
653
|
-
* @param {
|
|
659
|
+
* @param {FocusEvent} event
|
|
654
660
|
* @return {boolean}
|
|
655
661
|
* @protected
|
|
656
662
|
* @override
|
|
657
663
|
*/
|
|
658
|
-
_shouldRemoveFocus(
|
|
664
|
+
_shouldRemoveFocus(event) {
|
|
665
|
+
// Remove the focused state when clicking outside on a focusable element that is deliberately
|
|
666
|
+
// made targetable with pointer-events: auto, such as the time-picker in the date-time-picker.
|
|
667
|
+
// In this scenario, focus will move straight to that element and the closing overlay won't
|
|
668
|
+
// attempt to restore focus to the input.
|
|
669
|
+
const { relatedTarget } = event;
|
|
670
|
+
if (
|
|
671
|
+
this.opened &&
|
|
672
|
+
relatedTarget !== null &&
|
|
673
|
+
relatedTarget !== document.body &&
|
|
674
|
+
!this.contains(relatedTarget) &&
|
|
675
|
+
!this._overlayContent.contains(relatedTarget)
|
|
676
|
+
) {
|
|
677
|
+
return true;
|
|
678
|
+
}
|
|
679
|
+
|
|
659
680
|
return !this.opened;
|
|
660
681
|
}
|
|
661
682
|
|
|
@@ -213,12 +213,21 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
|
|
|
213
213
|
super.ready();
|
|
214
214
|
|
|
215
215
|
this.addController(
|
|
216
|
-
new InputController(
|
|
217
|
-
this
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
216
|
+
new InputController(
|
|
217
|
+
this,
|
|
218
|
+
(input) => {
|
|
219
|
+
this._setInputElement(input);
|
|
220
|
+
this._setFocusElement(input);
|
|
221
|
+
this.stateTarget = input;
|
|
222
|
+
this.ariaTarget = input;
|
|
223
|
+
},
|
|
224
|
+
{
|
|
225
|
+
// The "search" word is a trick to prevent Safari from enabling AutoFill,
|
|
226
|
+
// which is causing click issues:
|
|
227
|
+
// https://github.com/vaadin/web-components/issues/6817#issuecomment-2268229567
|
|
228
|
+
uniqueIdPrefix: 'search-input',
|
|
229
|
+
},
|
|
230
|
+
),
|
|
222
231
|
);
|
|
223
232
|
this.addController(new LabelledInputController(this.inputElement, this._labelController));
|
|
224
233
|
|
|
@@ -24,7 +24,7 @@ const datePickerOverlay = css`
|
|
|
24
24
|
border-radius: 0 4px 4px;
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
-
:host([dir='
|
|
27
|
+
:host(:not([dir='rtl']):not([fullscreen])[end-aligned]) [part='overlay'],
|
|
28
28
|
:host([dir='rtl']:not([fullscreen])[start-aligned]) [part='overlay'] {
|
|
29
29
|
border-radius: 4px 0 4px 4px;
|
|
30
30
|
}
|
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.5.0-
|
|
4
|
+
"version": "24.5.0-alpha9",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -344,7 +344,7 @@
|
|
|
344
344
|
},
|
|
345
345
|
{
|
|
346
346
|
"name": "vaadin-date-picker",
|
|
347
|
-
"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.5.0-
|
|
347
|
+
"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.5.0-alpha9/#/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.5.0-alpha9/#/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.5.0-alpha9/#/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.5.0-alpha9/#/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/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change | Event\n:------------------------|:------------------\nempty => parsable | change\nempty => unparsable | unparsable-change\nparsable => empty | change\nparsable => parsable | change\nparsable => unparsable | change\nunparsable => empty | unparsable-change\nunparsable => parsable | change\nunparsable => unparsable | unparsable-change",
|
|
348
348
|
"attributes": [
|
|
349
349
|
{
|
|
350
350
|
"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.5.0-
|
|
4
|
+
"version": "24.5.0-alpha9",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -163,7 +163,7 @@
|
|
|
163
163
|
},
|
|
164
164
|
{
|
|
165
165
|
"name": "vaadin-date-picker",
|
|
166
|
-
"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.5.0-
|
|
166
|
+
"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.5.0-alpha9/#/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.5.0-alpha9/#/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.5.0-alpha9/#/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.5.0-alpha9/#/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/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change | Event\n:------------------------|:------------------\nempty => parsable | change\nempty => unparsable | unparsable-change\nparsable => empty | change\nparsable => parsable | change\nparsable => unparsable | change\nunparsable => empty | unparsable-change\nunparsable => parsable | change\nunparsable => unparsable | unparsable-change",
|
|
167
167
|
"extension": true,
|
|
168
168
|
"attributes": [
|
|
169
169
|
{
|