@vaadin/date-picker 25.3.0-alpha7 → 25.3.0-dev.1fa5a51482
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/custom-elements.json +231 -1
- package/package.json +13 -13
- package/src/styles/vaadin-date-picker-overlay-content-base-styles.js +12 -0
- package/src/vaadin-date-metadata-controller.d.ts +75 -0
- package/src/vaadin-date-metadata-controller.js +254 -0
- package/src/vaadin-date-picker-mixin.d.ts +60 -0
- package/src/vaadin-date-picker-mixin.js +170 -2
- package/src/vaadin-date-picker-overlay-content-mixin.js +131 -3
- package/src/vaadin-date-picker-overlay-content.js +5 -1
- package/src/vaadin-date-picker-overlay.js +1 -0
- package/src/vaadin-date-picker-year.js +1 -0
- package/src/vaadin-date-picker.d.ts +11 -1
- package/src/vaadin-date-picker.js +8 -0
- package/src/vaadin-month-calendar-mixin.js +51 -2
- package/src/vaadin-month-calendar.js +1 -0
- package/web-types.json +14 -5
- package/web-types.lit.json +9 -2
package/custom-elements.json
CHANGED
|
@@ -17,6 +17,163 @@
|
|
|
17
17
|
}
|
|
18
18
|
]
|
|
19
19
|
},
|
|
20
|
+
{
|
|
21
|
+
"kind": "javascript-module",
|
|
22
|
+
"path": "src/vaadin-date-metadata-controller.js",
|
|
23
|
+
"declarations": [
|
|
24
|
+
{
|
|
25
|
+
"kind": "class",
|
|
26
|
+
"description": "A reactive controller that resolves the metadata (disabled state, custom part\nnames, ...) for the dates shown by the date-picker's `dateMetadataProvider`.\nIt calls the provider once for a range of months (never one date at a time),\ncaches the resolved months so scrolling back and forth does not re-fetch them,\nand prefetches a buffer of months around the requested range. While any\nrequest is in flight, #loading is `true` so the overlay can show a\nspinner.\n\nThe provider may return an array synchronously or a `Promise`, so results\nfrom a server (Flow) or a remote availability service can be awaited. Each\nreturned entry is a `DatePickerDate` extended with metadata fields, e.g.\n`{ year, month, day, disabled: true, part: 'busy' }`.",
|
|
27
|
+
"name": "DateMetadataController",
|
|
28
|
+
"members": [
|
|
29
|
+
{
|
|
30
|
+
"kind": "method",
|
|
31
|
+
"name": "ensureRangeLoaded",
|
|
32
|
+
"parameters": [
|
|
33
|
+
{
|
|
34
|
+
"name": "startDate",
|
|
35
|
+
"type": {
|
|
36
|
+
"text": "Date"
|
|
37
|
+
}
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
"name": "endDate",
|
|
41
|
+
"type": {
|
|
42
|
+
"text": "Date"
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
],
|
|
46
|
+
"description": "Ensures the provider has been consulted for the inclusive range between the\ngiven dates, expanded by a prefetch buffer of months on each side. Months\nthat are already loaded or in flight are skipped, and consecutive missing\nmonths are grouped into a single provider call."
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
"kind": "method",
|
|
50
|
+
"name": "getMetadata",
|
|
51
|
+
"parameters": [
|
|
52
|
+
{
|
|
53
|
+
"name": "date",
|
|
54
|
+
"type": {
|
|
55
|
+
"text": "Date"
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
],
|
|
59
|
+
"description": "The metadata resolved for the given date, or `undefined` when the date has\nno metadata or its month has not been resolved yet.",
|
|
60
|
+
"return": {
|
|
61
|
+
"type": {
|
|
62
|
+
"text": "object | undefined"
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
"kind": "field",
|
|
68
|
+
"name": "host",
|
|
69
|
+
"default": "host"
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
"kind": "method",
|
|
73
|
+
"name": "hostDisconnected"
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
"kind": "method",
|
|
77
|
+
"name": "isDateBlocked",
|
|
78
|
+
"parameters": [
|
|
79
|
+
{
|
|
80
|
+
"name": "date",
|
|
81
|
+
"type": {
|
|
82
|
+
"text": "Date"
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
],
|
|
86
|
+
"description": "Whether the given date cannot be selected yet: it is disabled by the\nprovider, or its month has not been resolved so its state is still unknown.\nReturns `false` when no provider is set. Used to block selection and to\nrender dates as non-selectable while their month is loading.",
|
|
87
|
+
"return": {
|
|
88
|
+
"type": {
|
|
89
|
+
"text": "boolean"
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
"kind": "method",
|
|
95
|
+
"name": "isDateDisabled",
|
|
96
|
+
"parameters": [
|
|
97
|
+
{
|
|
98
|
+
"name": "date",
|
|
99
|
+
"type": {
|
|
100
|
+
"text": "Date"
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
],
|
|
104
|
+
"description": "Whether the given date is disabled by the provider. Only returns `true` for\ndates in an already-resolved month.",
|
|
105
|
+
"return": {
|
|
106
|
+
"type": {
|
|
107
|
+
"text": "boolean"
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
"kind": "method",
|
|
113
|
+
"name": "isMonthLoaded",
|
|
114
|
+
"parameters": [
|
|
115
|
+
{
|
|
116
|
+
"name": "date",
|
|
117
|
+
"type": {
|
|
118
|
+
"text": "Date"
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
],
|
|
122
|
+
"description": "Whether the month containing the given date has been fully resolved.",
|
|
123
|
+
"return": {
|
|
124
|
+
"type": {
|
|
125
|
+
"text": "boolean"
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
},
|
|
129
|
+
{
|
|
130
|
+
"kind": "field",
|
|
131
|
+
"name": "loading",
|
|
132
|
+
"description": "Whether any month range is currently being fetched.",
|
|
133
|
+
"return": {
|
|
134
|
+
"type": {
|
|
135
|
+
"text": "boolean"
|
|
136
|
+
}
|
|
137
|
+
},
|
|
138
|
+
"readonly": true
|
|
139
|
+
},
|
|
140
|
+
{
|
|
141
|
+
"kind": "field",
|
|
142
|
+
"name": "provider",
|
|
143
|
+
"type": {
|
|
144
|
+
"text": "null"
|
|
145
|
+
},
|
|
146
|
+
"default": "null"
|
|
147
|
+
},
|
|
148
|
+
{
|
|
149
|
+
"kind": "method",
|
|
150
|
+
"name": "reset",
|
|
151
|
+
"description": "Clears the cache and invalidates any in-flight requests."
|
|
152
|
+
},
|
|
153
|
+
{
|
|
154
|
+
"kind": "method",
|
|
155
|
+
"name": "setProvider",
|
|
156
|
+
"parameters": [
|
|
157
|
+
{
|
|
158
|
+
"name": "provider"
|
|
159
|
+
}
|
|
160
|
+
],
|
|
161
|
+
"description": "Sets the provider function and clears the cache. Passing the same provider\nagain is a no-op, so the cache survives unrelated re-renders — callers\nshould therefore keep a stable provider reference rather than passing a new\nfunction on every update, which would otherwise reset the cache and\nre-fetch every visible range."
|
|
162
|
+
}
|
|
163
|
+
]
|
|
164
|
+
}
|
|
165
|
+
],
|
|
166
|
+
"exports": [
|
|
167
|
+
{
|
|
168
|
+
"kind": "js",
|
|
169
|
+
"name": "DateMetadataController",
|
|
170
|
+
"declaration": {
|
|
171
|
+
"name": "DateMetadataController",
|
|
172
|
+
"module": "src/vaadin-date-metadata-controller.js"
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
]
|
|
176
|
+
},
|
|
20
177
|
{
|
|
21
178
|
"kind": "javascript-module",
|
|
22
179
|
"path": "src/vaadin-date-picker-helper.js",
|
|
@@ -494,11 +651,26 @@
|
|
|
494
651
|
"package": "@vaadin/field-base/src/input-mixin.js"
|
|
495
652
|
}
|
|
496
653
|
},
|
|
654
|
+
{
|
|
655
|
+
"kind": "method",
|
|
656
|
+
"name": "clearCache",
|
|
657
|
+
"description": "Clears the cached date metadata and reloads it from `dateMetadataProvider`. Call this when\nthe data behind the provider has changed (for example a date became booked) so the calendar\nreflects it, without having to replace the provider function.\n\nThe visible range is reloaded when the overlay is open, and the selected value is\nre-validated once its month resolves."
|
|
658
|
+
},
|
|
497
659
|
{
|
|
498
660
|
"kind": "method",
|
|
499
661
|
"name": "close",
|
|
500
662
|
"description": "Closes the dropdown."
|
|
501
663
|
},
|
|
664
|
+
{
|
|
665
|
+
"kind": "field",
|
|
666
|
+
"name": "dateMetadataProvider",
|
|
667
|
+
"privacy": "public",
|
|
668
|
+
"type": {
|
|
669
|
+
"text": "function(DatePickerDateRange): Array<DatePickerDateMetadata> | Promise<Array<DatePickerDateMetadata>> | undefined"
|
|
670
|
+
},
|
|
671
|
+
"description": "A batch function that fetches metadata for a range of dates the calendar is about to\nrender. It receives a `DatePickerDateRange` object (`{ start, end }` of `DatePickerDate`)\nand returns, or resolves with, an array of metadata objects — a `DatePickerDate` extended\nwith metadata fields such as `disabled` and custom `part` names, e.g.\n`{ year, month, day, disabled: true, part: 'busy' }` — for the dates that have metadata\nwithin that range.\n\nUnlike `isDateDisabled`, which is called once per date, this function is called for a\nrange of dates at a time, and again as the calendar renders further dates. The size of\nthe range is decided by the calendar and may span multiple months. It may return a\n`Promise`, in which case the affected dates render in a non-selectable pending state\nuntil it resolves.\n\n`disabled` from the metadata is combined with `min`, `max` and `isDateDisabled`: a date\nis disabled if it is out of the min/max range, or `isDateDisabled` returns `true`, or its\nmetadata marks it disabled. `part` names are added to the date cell's `part` attribute so\na theme can style specific dates via `::part()`.\n\nBoth `disabled` and `part` are returned by this one function, rather than by separate\ngenerators, so a single backend query (for example in Flow) can answer both at once\ninstead of being split into two passes over the same data.\n\nKeep a stable reference to the function. Assigning a new function resets the internal\ncache and re-fetches every visible range. To reload after the underlying data changes\nwhile keeping the same function, call `clearCache()`.",
|
|
672
|
+
"attribute": "date-metadata-provider"
|
|
673
|
+
},
|
|
502
674
|
{
|
|
503
675
|
"kind": "field",
|
|
504
676
|
"name": "disabled",
|
|
@@ -895,6 +1067,16 @@
|
|
|
895
1067
|
},
|
|
896
1068
|
"attribute": "calendars"
|
|
897
1069
|
},
|
|
1070
|
+
{
|
|
1071
|
+
"kind": "field",
|
|
1072
|
+
"name": "dateMetadataProvider",
|
|
1073
|
+
"privacy": "public",
|
|
1074
|
+
"type": {
|
|
1075
|
+
"text": "function(DatePickerDateRange): Array<DatePickerDateMetadata> | Promise<Array<DatePickerDateMetadata>> | undefined"
|
|
1076
|
+
},
|
|
1077
|
+
"description": "A batch function that fetches metadata (disabled state, custom part names, ...) for a\nrange of dates the calendar is about to render. Returns, or resolves with, an array of\n`DatePickerDateMetadata` objects.",
|
|
1078
|
+
"attribute": "date-metadata-provider"
|
|
1079
|
+
},
|
|
898
1080
|
{
|
|
899
1081
|
"kind": "field",
|
|
900
1082
|
"name": "enteredDate",
|
|
@@ -982,6 +1164,16 @@
|
|
|
982
1164
|
"description": "Input label",
|
|
983
1165
|
"attribute": "label"
|
|
984
1166
|
},
|
|
1167
|
+
{
|
|
1168
|
+
"kind": "field",
|
|
1169
|
+
"name": "loading",
|
|
1170
|
+
"privacy": "public",
|
|
1171
|
+
"type": {
|
|
1172
|
+
"text": "boolean"
|
|
1173
|
+
},
|
|
1174
|
+
"description": "Reflected while data is being loaded, so the overlay can show a loading spinner.\nCurrently set while the date metadata provider is resolving.",
|
|
1175
|
+
"attribute": "loading"
|
|
1176
|
+
},
|
|
985
1177
|
{
|
|
986
1178
|
"kind": "field",
|
|
987
1179
|
"name": "maxDate",
|
|
@@ -1125,6 +1317,14 @@
|
|
|
1125
1317
|
"description": "Input label",
|
|
1126
1318
|
"fieldName": "label"
|
|
1127
1319
|
},
|
|
1320
|
+
{
|
|
1321
|
+
"name": "loading",
|
|
1322
|
+
"type": {
|
|
1323
|
+
"text": "boolean"
|
|
1324
|
+
},
|
|
1325
|
+
"description": "Reflected while data is being loaded, so the overlay can show a loading spinner.\nCurrently set while the date metadata provider is resolving.",
|
|
1326
|
+
"fieldName": "loading"
|
|
1327
|
+
},
|
|
1128
1328
|
{
|
|
1129
1329
|
"name": "scroll-duration",
|
|
1130
1330
|
"type": {
|
|
@@ -1683,7 +1883,7 @@
|
|
|
1683
1883
|
"declarations": [
|
|
1684
1884
|
{
|
|
1685
1885
|
"kind": "class",
|
|
1686
|
-
"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\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\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The label element\n`input-field` | The element that wraps prefix, value and buttons\n`field-button` | Set on both clear and toggle buttons\n`clear-button` | The clear button\n`error-message` | The error message element\n`helper-text` | The helper text element wrapper\n`required-indicator` | The `required` state indicator element\n`toggle-button` | The toggle button\n`backdrop` | Backdrop of the overlay\n`overlay` | The overlay container\n`content` | The overlay content\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------------|---------------------------------\n`disabled` | Set when the element is disabled\n`has-value` | Set when the element has a value\n`has-label` | Set when the element has a label\n`has-helper` | Set when the element has helper text or slot\n`has-error-message` | Set when the element has an error message\n`has-tooltip` | Set when the element has a slotted tooltip\n`invalid` | Set when the element is invalid\n`focused` | Set when the element is focused\n`focus-ring` | Set when the element is keyboard focused\n`readonly` | Set when the element is readonly\n`opened` | Set when the overlay is opened\n`week-numbers` | Set when week numbers are shown in the calendar\n\n### Internal components\n\nIn addition to `<vaadin-date-picker>` itself, the following internal\ncomponents are themable:\n\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\nIn order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`years-toggle-button` | Fullscreen mode years scroller toggle\n`toolbar` | Toolbar 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`past` | Date element corresponding to the date in the past\n`future` | Date element corresponding to the date in the future\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\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",
|
|
1886
|
+
"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\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\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The label element\n`input-field` | The element that wraps prefix, value and buttons\n`field-button` | Set on both clear and toggle buttons\n`clear-button` | The clear button\n`error-message` | The error message element\n`helper-text` | The helper text element wrapper\n`required-indicator` | The `required` state indicator element\n`toggle-button` | The toggle button\n`backdrop` | Backdrop of the overlay\n`overlay` | The overlay container\n`content` | The overlay content\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------------|---------------------------------\n`disabled` | Set when the element is disabled\n`has-value` | Set when the element has a value\n`has-label` | Set when the element has a label\n`has-helper` | Set when the element has helper text or slot\n`has-error-message` | Set when the element has an error message\n`has-tooltip` | Set when the element has a slotted tooltip\n`invalid` | Set when the element is invalid\n`focused` | Set when the element is focused\n`focus-ring` | Set when the element is keyboard focused\n`readonly` | Set when the element is readonly\n`opened` | Set when the overlay is opened\n`week-numbers` | Set when week numbers are shown in the calendar\n\n### Internal components\n\nIn addition to `<vaadin-date-picker>` itself, the following internal\ncomponents are themable:\n\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\nIn order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`years-toggle-button` | Fullscreen mode years scroller toggle\n`toolbar` | Toolbar with slotted buttons\n`loader` | Loading spinner shown while data is being loaded, for example while the disabled dates provider resolves\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`loading` | Set while data is being loaded, for example while the disabled dates provider resolves\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`pending` | Date element in a month whose date metadata provider result is still loading\n`focused` | Focused date element\n`selected` | Selected date element\n`today` | Date element corresponding to the current day\n`past` | Date element corresponding to the date in the past\n`future` | Date element corresponding to the date in the future\n\nCustom part names returned per date by `dateMetadataProvider` (the `part` metadata field) are\nalso added to the matching date elements, so specific dates can be styled with\n`vaadin-month-calendar::part(<name>)`.\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\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",
|
|
1687
1887
|
"name": "DatePicker",
|
|
1688
1888
|
"members": [
|
|
1689
1889
|
{
|
|
@@ -1807,6 +2007,15 @@
|
|
|
1807
2007
|
"package": "@vaadin/field-base/src/clear-button-mixin.js"
|
|
1808
2008
|
}
|
|
1809
2009
|
},
|
|
2010
|
+
{
|
|
2011
|
+
"kind": "method",
|
|
2012
|
+
"name": "clearCache",
|
|
2013
|
+
"description": "Clears the cached date metadata and reloads it from `dateMetadataProvider`. Call this when\nthe data behind the provider has changed (for example a date became booked) so the calendar\nreflects it, without having to replace the provider function.\n\nThe visible range is reloaded when the overlay is open, and the selected value is\nre-validated once its month resolves.",
|
|
2014
|
+
"inheritedFrom": {
|
|
2015
|
+
"name": "DatePickerMixin",
|
|
2016
|
+
"module": "src/vaadin-date-picker-mixin.js"
|
|
2017
|
+
}
|
|
2018
|
+
},
|
|
1810
2019
|
{
|
|
1811
2020
|
"kind": "method",
|
|
1812
2021
|
"name": "close",
|
|
@@ -1816,6 +2025,20 @@
|
|
|
1816
2025
|
"module": "src/vaadin-date-picker-mixin.js"
|
|
1817
2026
|
}
|
|
1818
2027
|
},
|
|
2028
|
+
{
|
|
2029
|
+
"kind": "field",
|
|
2030
|
+
"name": "dateMetadataProvider",
|
|
2031
|
+
"privacy": "public",
|
|
2032
|
+
"type": {
|
|
2033
|
+
"text": "function(DatePickerDateRange): Array<DatePickerDateMetadata> | Promise<Array<DatePickerDateMetadata>> | undefined"
|
|
2034
|
+
},
|
|
2035
|
+
"description": "A batch function that fetches metadata for a range of dates the calendar is about to\nrender. It receives a `DatePickerDateRange` object (`{ start, end }` of `DatePickerDate`)\nand returns, or resolves with, an array of metadata objects — a `DatePickerDate` extended\nwith metadata fields such as `disabled` and custom `part` names, e.g.\n`{ year, month, day, disabled: true, part: 'busy' }` — for the dates that have metadata\nwithin that range.\n\nUnlike `isDateDisabled`, which is called once per date, this function is called for a\nrange of dates at a time, and again as the calendar renders further dates. The size of\nthe range is decided by the calendar and may span multiple months. It may return a\n`Promise`, in which case the affected dates render in a non-selectable pending state\nuntil it resolves.\n\n`disabled` from the metadata is combined with `min`, `max` and `isDateDisabled`: a date\nis disabled if it is out of the min/max range, or `isDateDisabled` returns `true`, or its\nmetadata marks it disabled. `part` names are added to the date cell's `part` attribute so\na theme can style specific dates via `::part()`.\n\nBoth `disabled` and `part` are returned by this one function, rather than by separate\ngenerators, so a single backend query (for example in Flow) can answer both at once\ninstead of being split into two passes over the same data.\n\nKeep a stable reference to the function. Assigning a new function resets the internal\ncache and re-fetches every visible range. To reload after the underlying data changes\nwhile keeping the same function, call `clearCache()`.",
|
|
2036
|
+
"attribute": "date-metadata-provider",
|
|
2037
|
+
"inheritedFrom": {
|
|
2038
|
+
"name": "DatePickerMixin",
|
|
2039
|
+
"module": "src/vaadin-date-picker-mixin.js"
|
|
2040
|
+
}
|
|
2041
|
+
},
|
|
1819
2042
|
{
|
|
1820
2043
|
"kind": "field",
|
|
1821
2044
|
"name": "disabled",
|
|
@@ -2447,6 +2670,13 @@
|
|
|
2447
2670
|
"module": "src/vaadin-date-picker-mixin.js"
|
|
2448
2671
|
}
|
|
2449
2672
|
},
|
|
2673
|
+
{
|
|
2674
|
+
"type": {
|
|
2675
|
+
"text": "string"
|
|
2676
|
+
},
|
|
2677
|
+
"description": "The theme variants to apply to the component.",
|
|
2678
|
+
"name": "theme"
|
|
2679
|
+
},
|
|
2450
2680
|
{
|
|
2451
2681
|
"name": "title",
|
|
2452
2682
|
"type": {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/date-picker",
|
|
3
|
-
"version": "25.3.0-
|
|
3
|
+
"version": "25.3.0-dev.1fa5a51482",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -35,21 +35,21 @@
|
|
|
35
35
|
],
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
|
-
"@vaadin/a11y-base": "25.3.0-
|
|
39
|
-
"@vaadin/button": "25.3.0-
|
|
40
|
-
"@vaadin/component-base": "25.3.0-
|
|
41
|
-
"@vaadin/field-base": "25.3.0-
|
|
42
|
-
"@vaadin/input-container": "25.3.0-
|
|
43
|
-
"@vaadin/overlay": "25.3.0-
|
|
44
|
-
"@vaadin/vaadin-themable-mixin": "25.3.0-
|
|
38
|
+
"@vaadin/a11y-base": "25.3.0-dev.1fa5a51482",
|
|
39
|
+
"@vaadin/button": "25.3.0-dev.1fa5a51482",
|
|
40
|
+
"@vaadin/component-base": "25.3.0-dev.1fa5a51482",
|
|
41
|
+
"@vaadin/field-base": "25.3.0-dev.1fa5a51482",
|
|
42
|
+
"@vaadin/input-container": "25.3.0-dev.1fa5a51482",
|
|
43
|
+
"@vaadin/overlay": "25.3.0-dev.1fa5a51482",
|
|
44
|
+
"@vaadin/vaadin-themable-mixin": "25.3.0-dev.1fa5a51482",
|
|
45
45
|
"lit": "^3.0.0"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
|
-
"@vaadin/aura": "25.3.0-
|
|
49
|
-
"@vaadin/chai-plugins": "25.3.0-
|
|
50
|
-
"@vaadin/test-runner-commands": "25.3.0-
|
|
48
|
+
"@vaadin/aura": "25.3.0-dev.1fa5a51482",
|
|
49
|
+
"@vaadin/chai-plugins": "25.3.0-dev.1fa5a51482",
|
|
50
|
+
"@vaadin/test-runner-commands": "25.3.0-dev.1fa5a51482",
|
|
51
51
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
52
|
-
"@vaadin/vaadin-lumo-styles": "25.3.0-
|
|
52
|
+
"@vaadin/vaadin-lumo-styles": "25.3.0-dev.1fa5a51482",
|
|
53
53
|
"sinon": "^22.0.0"
|
|
54
54
|
},
|
|
55
55
|
"customElements": "custom-elements.json",
|
|
@@ -57,5 +57,5 @@
|
|
|
57
57
|
"web-types.json",
|
|
58
58
|
"web-types.lit.json"
|
|
59
59
|
],
|
|
60
|
-
"gitHead": "
|
|
60
|
+
"gitHead": "1cd5964b758ffbce3ddb6248a1997f55f8e0ebf6"
|
|
61
61
|
}
|
|
@@ -17,6 +17,7 @@ export const overlayContentStyles = css`
|
|
|
17
17
|
height: 100%;
|
|
18
18
|
outline: none;
|
|
19
19
|
overflow: hidden;
|
|
20
|
+
position: relative;
|
|
20
21
|
}
|
|
21
22
|
|
|
22
23
|
:host([desktop]) {
|
|
@@ -49,6 +50,17 @@ export const overlayContentStyles = css`
|
|
|
49
50
|
display: none !important;
|
|
50
51
|
}
|
|
51
52
|
|
|
53
|
+
/* Loading spinner shown while data is being loaded (currently while the disabled dates provider
|
|
54
|
+
resolves). Positioned over the month scroller, which paints its own transformed layers, so
|
|
55
|
+
grid stacking is not enough. */
|
|
56
|
+
[part='loader'] {
|
|
57
|
+
position: absolute;
|
|
58
|
+
z-index: 1;
|
|
59
|
+
inset-block-start: var(--vaadin-date-picker-month-header-font-size, 0.9375rem);
|
|
60
|
+
inset-inline: 0;
|
|
61
|
+
margin-inline: auto;
|
|
62
|
+
}
|
|
63
|
+
|
|
52
64
|
::slotted([slot='months']) {
|
|
53
65
|
--vaadin-infinite-scroller-item-height: round(
|
|
54
66
|
var(--vaadin-date-picker-month-header-font-size, 0.9375rem) + 0.75rem +
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright (c) 2016 - 2026 Vaadin Ltd.
|
|
4
|
+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
+
*/
|
|
6
|
+
import type { ReactiveController, ReactiveControllerHost } from 'lit';
|
|
7
|
+
import type { DatePickerDateMetadata, DatePickerDateRange } from './vaadin-date-picker-mixin.js';
|
|
8
|
+
|
|
9
|
+
export type DateMetadataProvider = (
|
|
10
|
+
range: DatePickerDateRange,
|
|
11
|
+
) => DatePickerDateMetadata[] | Promise<DatePickerDateMetadata[]>;
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* A reactive controller that resolves the metadata (disabled state, custom part
|
|
15
|
+
* names, ...) for the dates shown by the date-picker's `dateMetadataProvider`.
|
|
16
|
+
* It calls the provider once for a range of months, caches the resolved months
|
|
17
|
+
* so scrolling back and forth does not re-fetch, and prefetches a buffer of
|
|
18
|
+
* months around the requested range.
|
|
19
|
+
*/
|
|
20
|
+
export declare class DateMetadataController implements ReactiveController {
|
|
21
|
+
constructor(host: ReactiveControllerHost, onChange: () => void);
|
|
22
|
+
|
|
23
|
+
/**
|
|
24
|
+
* The provider function, or `null` when none is set.
|
|
25
|
+
*/
|
|
26
|
+
provider: DateMetadataProvider | null;
|
|
27
|
+
|
|
28
|
+
/**
|
|
29
|
+
* Whether any month range is currently being fetched.
|
|
30
|
+
*/
|
|
31
|
+
readonly loading: boolean;
|
|
32
|
+
|
|
33
|
+
hostDisconnected(): void;
|
|
34
|
+
|
|
35
|
+
/**
|
|
36
|
+
* Sets the provider function and clears the cache. Passing the same provider
|
|
37
|
+
* again is a no-op. Callers should keep a stable provider reference.
|
|
38
|
+
*/
|
|
39
|
+
setProvider(provider: DateMetadataProvider | null | undefined): void;
|
|
40
|
+
|
|
41
|
+
/**
|
|
42
|
+
* Clears the cache and invalidates any in-flight requests.
|
|
43
|
+
*/
|
|
44
|
+
reset(): void;
|
|
45
|
+
|
|
46
|
+
/**
|
|
47
|
+
* Whether the month containing the given date has been fully resolved.
|
|
48
|
+
*/
|
|
49
|
+
isMonthLoaded(date: Date): boolean;
|
|
50
|
+
|
|
51
|
+
/**
|
|
52
|
+
* The metadata resolved for the given date, or `undefined` when the date has
|
|
53
|
+
* no metadata or its month has not been resolved yet.
|
|
54
|
+
*/
|
|
55
|
+
getMetadata(date: Date): DatePickerDateMetadata | undefined;
|
|
56
|
+
|
|
57
|
+
/**
|
|
58
|
+
* Whether the given date is disabled by the provider. Only returns `true` for
|
|
59
|
+
* dates in an already-resolved month.
|
|
60
|
+
*/
|
|
61
|
+
isDateDisabled(date: Date): boolean;
|
|
62
|
+
|
|
63
|
+
/**
|
|
64
|
+
* Whether the given date cannot be selected yet: it is disabled by the
|
|
65
|
+
* provider, or its month has not been resolved. Returns `false` when no
|
|
66
|
+
* provider is set.
|
|
67
|
+
*/
|
|
68
|
+
isDateBlocked(date: Date): boolean;
|
|
69
|
+
|
|
70
|
+
/**
|
|
71
|
+
* Ensures the provider has been consulted for the inclusive range between the
|
|
72
|
+
* given dates, expanded by a prefetch buffer of months on each side.
|
|
73
|
+
*/
|
|
74
|
+
ensureRangeLoaded(startDate: Date, endDate: Date): void;
|
|
75
|
+
}
|