@vaadin/date-picker 24.5.0-alpha4 → 24.5.0-alpha6
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 +11 -11
- package/src/vaadin-date-picker-mixin.js +6 -5
- package/src/vaadin-date-picker-overlay-content-mixin.js +8 -3
- package/src/vaadin-month-calendar-mixin.js +8 -6
- package/src/vaadin-month-calendar.js +1 -0
- package/theme/lumo/vaadin-date-picker-overlay-styles.js +0 -3
- package/theme/lumo/vaadin-month-calendar-styles.js +6 -2
- 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.5.0-
|
|
3
|
+
"version": "24.5.0-alpha6",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -36,15 +36,15 @@
|
|
|
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-alpha6",
|
|
40
|
+
"@vaadin/button": "24.5.0-alpha6",
|
|
41
|
+
"@vaadin/component-base": "24.5.0-alpha6",
|
|
42
|
+
"@vaadin/field-base": "24.5.0-alpha6",
|
|
43
|
+
"@vaadin/input-container": "24.5.0-alpha6",
|
|
44
|
+
"@vaadin/overlay": "24.5.0-alpha6",
|
|
45
|
+
"@vaadin/vaadin-lumo-styles": "24.5.0-alpha6",
|
|
46
|
+
"@vaadin/vaadin-material-styles": "24.5.0-alpha6",
|
|
47
|
+
"@vaadin/vaadin-themable-mixin": "24.5.0-alpha6",
|
|
48
48
|
"lit": "^3.0.0"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
@@ -56,5 +56,5 @@
|
|
|
56
56
|
"web-types.json",
|
|
57
57
|
"web-types.lit.json"
|
|
58
58
|
],
|
|
59
|
-
"gitHead": "
|
|
59
|
+
"gitHead": "c5f541dbe961a994730d4c60472ae957bf6b4c12"
|
|
60
60
|
}
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import { hideOthers } from '@vaadin/a11y-base/src/aria-hidden.js';
|
|
7
7
|
import { DelegateFocusMixin } from '@vaadin/a11y-base/src/delegate-focus-mixin.js';
|
|
8
|
+
import { isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js';
|
|
8
9
|
import { KeyboardMixin } from '@vaadin/a11y-base/src/keyboard-mixin.js';
|
|
9
10
|
import { isIOS } from '@vaadin/component-base/src/browser-utils.js';
|
|
10
11
|
import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
|
|
@@ -459,7 +460,7 @@ export const DatePickerMixin = (subclass) =>
|
|
|
459
460
|
_onFocus(event) {
|
|
460
461
|
super._onFocus(event);
|
|
461
462
|
|
|
462
|
-
if (this._noInput) {
|
|
463
|
+
if (this._noInput && !isKeyboardActive()) {
|
|
463
464
|
event.target.blur();
|
|
464
465
|
}
|
|
465
466
|
}
|
|
@@ -735,7 +736,7 @@ export const DatePickerMixin = (subclass) =>
|
|
|
735
736
|
}
|
|
736
737
|
|
|
737
738
|
/** @private */
|
|
738
|
-
// eslint-disable-next-line max-params
|
|
739
|
+
// eslint-disable-next-line @typescript-eslint/max-params
|
|
739
740
|
_isNoInput(inputElement, fullscreen, ios, i18n, opened, autoOpenDisabled) {
|
|
740
741
|
// On fullscreen mode, text input is disabled if auto-open isn't disabled or
|
|
741
742
|
// whenever the dropdown is opened
|
|
@@ -863,7 +864,7 @@ export const DatePickerMixin = (subclass) =>
|
|
|
863
864
|
}
|
|
864
865
|
|
|
865
866
|
/** @private */
|
|
866
|
-
// eslint-disable-next-line max-params
|
|
867
|
+
// eslint-disable-next-line @typescript-eslint/max-params
|
|
867
868
|
__updateOverlayContent(
|
|
868
869
|
overlayContent,
|
|
869
870
|
i18n,
|
|
@@ -960,8 +961,8 @@ export const DatePickerMixin = (subclass) =>
|
|
|
960
961
|
return parsedInitialPosition || dateAllowed(initialPosition, this._minDate, this._maxDate, this.isDateDisabled)
|
|
961
962
|
? initialPosition
|
|
962
963
|
: this._minDate || this._maxDate
|
|
963
|
-
|
|
964
|
-
|
|
964
|
+
? getClosestDate(initialPosition, [this._minDate, this._maxDate])
|
|
965
|
+
: new Date();
|
|
965
966
|
}
|
|
966
967
|
|
|
967
968
|
/**
|
|
@@ -327,7 +327,7 @@ export const DatePickerOverlayContentMixin = (superClass) =>
|
|
|
327
327
|
}
|
|
328
328
|
}
|
|
329
329
|
|
|
330
|
-
// eslint-disable-next-line max-params
|
|
330
|
+
// eslint-disable-next-line @typescript-eslint/max-params
|
|
331
331
|
__updateCalendars(
|
|
332
332
|
calendars,
|
|
333
333
|
i18n,
|
|
@@ -531,7 +531,7 @@ export const DatePickerOverlayContentMixin = (superClass) =>
|
|
|
531
531
|
|
|
532
532
|
/** @private */
|
|
533
533
|
_onTodayTap() {
|
|
534
|
-
const today =
|
|
534
|
+
const today = this._getTodayMidnight();
|
|
535
535
|
|
|
536
536
|
if (Math.abs(this._monthScroller.position - this._differenceInMonths(today, this._originDate)) < 0.001) {
|
|
537
537
|
// Select today only if the month scroller is positioned approximately
|
|
@@ -1040,12 +1040,17 @@ export const DatePickerOverlayContentMixin = (superClass) =>
|
|
|
1040
1040
|
|
|
1041
1041
|
/** @private */
|
|
1042
1042
|
_isTodayAllowed(min, max, isDateDisabled) {
|
|
1043
|
+
return this._dateAllowed(this._getTodayMidnight(), min, max, isDateDisabled);
|
|
1044
|
+
}
|
|
1045
|
+
|
|
1046
|
+
/** @private */
|
|
1047
|
+
_getTodayMidnight() {
|
|
1043
1048
|
const today = new Date();
|
|
1044
1049
|
const todayMidnight = new Date(0, 0);
|
|
1045
1050
|
todayMidnight.setFullYear(today.getFullYear());
|
|
1046
1051
|
todayMidnight.setMonth(today.getMonth());
|
|
1047
1052
|
todayMidnight.setDate(today.getDate());
|
|
1048
|
-
return
|
|
1053
|
+
return todayMidnight;
|
|
1049
1054
|
}
|
|
1050
1055
|
|
|
1051
1056
|
/**
|
|
@@ -199,12 +199,14 @@ export const MonthCalendarMixin = (superClass) =>
|
|
|
199
199
|
const weekDayNamesShort = this._applyFirstDayOfWeek(weekdaysShort, firstDayOfWeek);
|
|
200
200
|
const weekDayNames = this._applyFirstDayOfWeek(weekdays, firstDayOfWeek);
|
|
201
201
|
|
|
202
|
-
return weekDayNames
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
202
|
+
return weekDayNames
|
|
203
|
+
.map((day, index) => {
|
|
204
|
+
return {
|
|
205
|
+
weekDay: day,
|
|
206
|
+
weekDayShort: weekDayNamesShort[index],
|
|
207
|
+
};
|
|
208
|
+
})
|
|
209
|
+
.slice(0, 7);
|
|
208
210
|
}
|
|
209
211
|
|
|
210
212
|
/** @private */
|
|
@@ -107,6 +107,7 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolymerElement)) {
|
|
|
107
107
|
}
|
|
108
108
|
|
|
109
109
|
/** @private */
|
|
110
|
+
// eslint-disable-next-line @typescript-eslint/max-params
|
|
110
111
|
__getDatePart(date, focusedDate, selectedDate, minDate, maxDate, isDateDisabled) {
|
|
111
112
|
const result = ['date'];
|
|
112
113
|
|
|
@@ -102,7 +102,9 @@ registerStyles(
|
|
|
102
102
|
}
|
|
103
103
|
|
|
104
104
|
[part~='date'][part~='focused']::before {
|
|
105
|
-
box-shadow:
|
|
105
|
+
box-shadow:
|
|
106
|
+
0 0 0 1px var(--lumo-base-color),
|
|
107
|
+
0 0 0 calc(var(--_focus-ring-width) + 1px) var(--_focus-ring-color);
|
|
106
108
|
}
|
|
107
109
|
|
|
108
110
|
:host(:not([focused])) [part~='date'][part~='focused']::before {
|
|
@@ -111,7 +113,9 @@ registerStyles(
|
|
|
111
113
|
|
|
112
114
|
@keyframes vaadin-date-picker-month-calendar-focus-date {
|
|
113
115
|
50% {
|
|
114
|
-
box-shadow:
|
|
116
|
+
box-shadow:
|
|
117
|
+
0 0 0 1px var(--lumo-base-color),
|
|
118
|
+
0 0 0 calc(var(--_focus-ring-width) + 1px) transparent;
|
|
115
119
|
}
|
|
116
120
|
}
|
|
117
121
|
|
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-alpha6",
|
|
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-alpha6/#/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-alpha6/#/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-alpha6/#/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-alpha6/#/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-alpha6",
|
|
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-alpha6/#/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-alpha6/#/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-alpha6/#/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-alpha6/#/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
|
{
|