@vaadin/date-picker 25.3.0-alpha9 → 25.3.0-beta2
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 +12 -12
- package/package.json +13 -13
- package/src/styles/vaadin-month-calendar-base-styles.js +3 -0
- package/src/vaadin-date-metadata-controller.d.ts +2 -2
- package/src/vaadin-date-metadata-controller.js +13 -21
- package/src/vaadin-date-picker-helper.d.ts +127 -13
- package/src/vaadin-date-picker-helper.js +30 -11
- package/src/vaadin-date-picker-mixin.d.ts +48 -38
- package/src/vaadin-date-picker-mixin.js +41 -29
- package/src/vaadin-date-picker-overlay-content-mixin.js +2 -0
- package/src/vaadin-date-picker.d.ts +63 -6
- package/src/vaadin-date-picker.js +63 -6
- package/src/vaadin-infinite-scroller.js +19 -6
- package/web-types.json +4 -4
- package/web-types.lit.json +4 -4
|
@@ -19,24 +19,28 @@ export interface DatePickerDate {
|
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
/**
|
|
22
|
-
* A range of dates
|
|
23
|
-
*
|
|
22
|
+
* A range of dates that `dateMetadataProvider` is asked about.
|
|
23
|
+
* It can span several months and always covers whole months.
|
|
24
24
|
*/
|
|
25
25
|
export interface DatePickerDateRange {
|
|
26
26
|
/**
|
|
27
|
-
* The first date of the range (inclusive).
|
|
27
|
+
* The first date of the range (inclusive), as an ISO 8601 date.
|
|
28
28
|
*/
|
|
29
|
-
start:
|
|
29
|
+
start: string;
|
|
30
30
|
/**
|
|
31
|
-
* The last date of the range (inclusive).
|
|
31
|
+
* The last date of the range (inclusive), as an ISO 8601 date.
|
|
32
32
|
*/
|
|
33
|
-
end:
|
|
33
|
+
end: string;
|
|
34
34
|
}
|
|
35
35
|
|
|
36
36
|
/**
|
|
37
|
-
* Metadata
|
|
37
|
+
* Metadata for a single date, returned by `dateMetadataProvider`.
|
|
38
38
|
*/
|
|
39
|
-
export interface DatePickerDateMetadata
|
|
39
|
+
export interface DatePickerDateMetadata {
|
|
40
|
+
/**
|
|
41
|
+
* The date the metadata applies to in ISO 8601 format.
|
|
42
|
+
*/
|
|
43
|
+
date: string;
|
|
40
44
|
/**
|
|
41
45
|
* Whether the date cannot be selected.
|
|
42
46
|
*/
|
|
@@ -49,8 +53,9 @@ export interface DatePickerDateMetadata extends DatePickerDate {
|
|
|
49
53
|
}
|
|
50
54
|
|
|
51
55
|
/**
|
|
52
|
-
* A function called with the range of dates the calendar is about to
|
|
53
|
-
*
|
|
56
|
+
* A function called with the range of dates the calendar is about to render, returning
|
|
57
|
+
* the metadata for the dates in that range. It can return a `Promise` to load the metadata
|
|
58
|
+
* asynchronously, and `null` or `undefined` when no date in the range has metadata.
|
|
54
59
|
*/
|
|
55
60
|
export type DatePickerDateMetadataProvider = (
|
|
56
61
|
range: DatePickerDateRange,
|
|
@@ -280,44 +285,49 @@ export declare class DatePickerMixinClass {
|
|
|
280
285
|
* A function to be used to determine whether the user can select a given date.
|
|
281
286
|
* Receives a `DatePickerDate` object of the date to be selected and should return a
|
|
282
287
|
* boolean.
|
|
288
|
+
*
|
|
289
|
+
* The function is called once per date and has to answer synchronously. Use
|
|
290
|
+
* `dateMetadataProvider` when the answer has to be loaded first, or when dates also need
|
|
291
|
+
* custom part names. A date is disabled when either of the two disables it.
|
|
283
292
|
*/
|
|
284
293
|
isDateDisabled: (date: DatePickerDate) => boolean;
|
|
285
294
|
|
|
286
295
|
/**
|
|
287
|
-
* A
|
|
288
|
-
*
|
|
289
|
-
* `
|
|
290
|
-
*
|
|
291
|
-
*
|
|
292
|
-
*
|
|
296
|
+
* A function that provides metadata for the dates the calendar is about to render: whether they
|
|
297
|
+
* are disabled, and CSS `part` names for styling from outside using the `::part()` selector.
|
|
298
|
+
* Unlike `isDateDisabled`, which is called once per date, the metadata provider is called for
|
|
299
|
+
* a range of dates at a time, and again as the calendar renders further dates.
|
|
300
|
+
*
|
|
301
|
+
* It receives a `DatePickerDateRange` and returns an array of `DatePickerDateMetadata` objects
|
|
302
|
+
* for the dates in that range that have metadata. It can return a `Promise` to load the metadata
|
|
303
|
+
* asynchronously, and `null` or `undefined` when no date in the range has metadata.
|
|
293
304
|
*
|
|
294
|
-
*
|
|
295
|
-
* dates at a time, and again as the calendar renders further dates. The size of the range is
|
|
296
|
-
* decided by the calendar and may span several months, and may include months it already has
|
|
297
|
-
* metadata for, whose entries are then ignored.
|
|
305
|
+
* The returned array has the following structure:
|
|
298
306
|
*
|
|
299
|
-
*
|
|
300
|
-
*
|
|
301
|
-
*
|
|
302
|
-
*
|
|
303
|
-
*
|
|
307
|
+
* ```js
|
|
308
|
+
* [
|
|
309
|
+
* // The date is an ISO 8601 string.
|
|
310
|
+
* { date: '2026-01-01', disabled: true },
|
|
311
|
+
*
|
|
312
|
+
* // Adds a custom part name to the date.
|
|
313
|
+
* { date: '2026-01-02', part: 'busy' },
|
|
314
|
+
* ]
|
|
315
|
+
* ```
|
|
304
316
|
*
|
|
305
|
-
*
|
|
306
|
-
*
|
|
307
|
-
*
|
|
308
|
-
*
|
|
317
|
+
* A date is disabled if its metadata marks it disabled, or `isDateDisabled` returns `true`, or
|
|
318
|
+
* it is outside `min` and `max`. Disabled dates are not selectable, and typing a disabled date in
|
|
319
|
+
* the field makes it invalid. The provider does not affect which date is focused when opening the
|
|
320
|
+
* overlay. Use `initialPosition` property to provide a selectable date.
|
|
309
321
|
*
|
|
310
|
-
*
|
|
311
|
-
*
|
|
312
|
-
*
|
|
322
|
+
* While a returned `Promise` is pending, the dates it covers are not disabled yet and render with
|
|
323
|
+
* the `loading` part. If the function throws or rejects, corresponding dates are requested again
|
|
324
|
+
* the next time the user navigates.
|
|
313
325
|
*
|
|
314
|
-
*
|
|
315
|
-
*
|
|
316
|
-
* by spaces. Do not use built-in names like `disabled` and `selected`.
|
|
326
|
+
* The provider is used for validation also when the overlay is closed. Date is considered valid
|
|
327
|
+
* while the provider is pending, and is re-validated again after the metadata is loaded.
|
|
317
328
|
*
|
|
318
|
-
* Keep a stable reference to the function
|
|
319
|
-
*
|
|
320
|
-
* behind it changed, call `clearCache()`.
|
|
329
|
+
* Keep a stable reference to the function: assigning a new one clears the cache and re-fetches
|
|
330
|
+
* visible range. Call `clearCache()` to re-fetch when the data behind the same function changed.
|
|
321
331
|
*/
|
|
322
332
|
dateMetadataProvider: DatePickerDateMetadataProvider | null | undefined;
|
|
323
333
|
|
|
@@ -63,7 +63,7 @@ export const datePickerI18nDefaults = Object.freeze({
|
|
|
63
63
|
date = parseInt(parts[1]);
|
|
64
64
|
year = parseInt(parts[2]);
|
|
65
65
|
if (parts[2].length < 3 && year >= 0) {
|
|
66
|
-
const usedReferenceDate =
|
|
66
|
+
const usedReferenceDate = parseDate(this.referenceDate) || new Date();
|
|
67
67
|
year = getAdjustedYear(usedReferenceDate, year, month, date);
|
|
68
68
|
}
|
|
69
69
|
} else if (parts.length === 2) {
|
|
@@ -206,6 +206,10 @@ export const DatePickerMixin = (subclass) =>
|
|
|
206
206
|
* Receives a `DatePickerDate` object of the date to be selected and should return a
|
|
207
207
|
* boolean.
|
|
208
208
|
*
|
|
209
|
+
* The function is called once per date and has to answer synchronously. Use
|
|
210
|
+
* `dateMetadataProvider` when the answer has to be loaded first, or when dates also need
|
|
211
|
+
* custom part names. A date is disabled when either of the two disables it.
|
|
212
|
+
*
|
|
209
213
|
* @type {function(DatePickerDate): boolean | undefined}
|
|
210
214
|
*/
|
|
211
215
|
isDateDisabled: {
|
|
@@ -213,40 +217,41 @@ export const DatePickerMixin = (subclass) =>
|
|
|
213
217
|
},
|
|
214
218
|
|
|
215
219
|
/**
|
|
216
|
-
* A
|
|
217
|
-
*
|
|
218
|
-
* `
|
|
219
|
-
*
|
|
220
|
-
*
|
|
221
|
-
*
|
|
220
|
+
* A function that provides metadata for the dates the calendar is about to render: whether they
|
|
221
|
+
* are disabled, and CSS `part` names for styling from outside using the `::part()` selector.
|
|
222
|
+
* Unlike `isDateDisabled`, which is called once per date, the metadata provider is called for
|
|
223
|
+
* a range of dates at a time, and again as the calendar renders further dates.
|
|
224
|
+
*
|
|
225
|
+
* It receives a `DatePickerDateRange` and returns an array of `DatePickerDateMetadata` objects
|
|
226
|
+
* for the dates in that range that have metadata. It can return a `Promise` to load the metadata
|
|
227
|
+
* asynchronously, and `null` or `undefined` when no date in the range has metadata.
|
|
228
|
+
*
|
|
229
|
+
* The returned array has the following structure:
|
|
222
230
|
*
|
|
223
|
-
*
|
|
224
|
-
*
|
|
225
|
-
*
|
|
226
|
-
*
|
|
231
|
+
* ```js
|
|
232
|
+
* [
|
|
233
|
+
* // The date is an ISO 8601 string.
|
|
234
|
+
* { date: '2026-01-01', disabled: true },
|
|
227
235
|
*
|
|
228
|
-
*
|
|
229
|
-
*
|
|
230
|
-
*
|
|
231
|
-
*
|
|
232
|
-
* and the affected months are requested again the next time the user navigates.
|
|
236
|
+
* // Adds a custom part name to the date.
|
|
237
|
+
* { date: '2026-01-02', part: 'busy' },
|
|
238
|
+
* ]
|
|
239
|
+
* ```
|
|
233
240
|
*
|
|
234
|
-
*
|
|
235
|
-
*
|
|
236
|
-
*
|
|
237
|
-
*
|
|
241
|
+
* A date is disabled if its metadata marks it disabled, or `isDateDisabled` returns `true`, or
|
|
242
|
+
* it is outside `min` and `max`. Disabled dates are not selectable, and typing a disabled date in
|
|
243
|
+
* the field makes it invalid. The provider does not affect which date is focused when opening the
|
|
244
|
+
* overlay. Use `initialPosition` property to provide a selectable date.
|
|
238
245
|
*
|
|
239
|
-
*
|
|
240
|
-
*
|
|
241
|
-
* the
|
|
246
|
+
* While a returned `Promise` is pending, the dates it covers are not disabled yet and render with
|
|
247
|
+
* the `loading` part. If the function throws or rejects, corresponding dates are requested again
|
|
248
|
+
* the next time the user navigates.
|
|
242
249
|
*
|
|
243
|
-
*
|
|
244
|
-
*
|
|
245
|
-
* separated by spaces. Do not use built-in names like `disabled` and `selected`.
|
|
250
|
+
* The provider is used for validation also when the overlay is closed. Date is considered valid
|
|
251
|
+
* while the provider is pending, and is re-validated again after the metadata is loaded.
|
|
246
252
|
*
|
|
247
|
-
* Keep a stable reference to the function
|
|
248
|
-
*
|
|
249
|
-
* data behind it changed, call `clearCache()`.
|
|
253
|
+
* Keep a stable reference to the function: assigning a new one clears the cache and re-fetches
|
|
254
|
+
* visible range. Call `clearCache()` to re-fetch when the data behind the same function changed.
|
|
250
255
|
*
|
|
251
256
|
* @type {DatePickerDateMetadataProvider | null | undefined}
|
|
252
257
|
*/
|
|
@@ -454,7 +459,10 @@ export const DatePickerMixin = (subclass) =>
|
|
|
454
459
|
super._onFocus(event);
|
|
455
460
|
|
|
456
461
|
if (this._noInput && !isKeyboardActive()) {
|
|
462
|
+
// Blur to hide the virtual keyboard, but do not validate.
|
|
463
|
+
this.__ignoreInternalBlur = true;
|
|
457
464
|
event.target.blur();
|
|
465
|
+
this.__ignoreInternalBlur = false;
|
|
458
466
|
}
|
|
459
467
|
}
|
|
460
468
|
|
|
@@ -465,6 +473,10 @@ export const DatePickerMixin = (subclass) =>
|
|
|
465
473
|
_onBlur(event) {
|
|
466
474
|
super._onBlur(event);
|
|
467
475
|
|
|
476
|
+
if (this.__ignoreInternalBlur) {
|
|
477
|
+
return;
|
|
478
|
+
}
|
|
479
|
+
|
|
468
480
|
if (!this.opened) {
|
|
469
481
|
this.__commitParsedOrFocusedDate();
|
|
470
482
|
|
|
@@ -78,12 +78,6 @@ export interface DatePickerEventMap extends HTMLElementEventMap, DatePickerCusto
|
|
|
78
78
|
*
|
|
79
79
|
* ### Styling
|
|
80
80
|
*
|
|
81
|
-
* The following custom properties are available for styling:
|
|
82
|
-
*
|
|
83
|
-
* Custom property | Description | Default
|
|
84
|
-
* -------------------------------|----------------------------|---------
|
|
85
|
-
* `--vaadin-field-default-width` | Default width of the field | `12em`
|
|
86
|
-
*
|
|
87
81
|
* The following shadow DOM parts are available for styling:
|
|
88
82
|
*
|
|
89
83
|
* Part name | Description
|
|
@@ -117,6 +111,69 @@ export interface DatePickerEventMap extends HTMLElementEventMap, DatePickerCusto
|
|
|
117
111
|
* `opened` | Set when the overlay is opened
|
|
118
112
|
* `week-numbers` | Set when week numbers are shown in the calendar
|
|
119
113
|
*
|
|
114
|
+
* The following custom CSS properties are available for styling:
|
|
115
|
+
*
|
|
116
|
+
* Custom CSS property |
|
|
117
|
+
* :----------------------------------------------------------|
|
|
118
|
+
* | `--vaadin-date-picker-date-border-radius` |
|
|
119
|
+
* | `--vaadin-date-picker-date-disabled-color` |
|
|
120
|
+
* | `--vaadin-date-picker-date-height` |
|
|
121
|
+
* | `--vaadin-date-picker-date-selected-background` |
|
|
122
|
+
* | `--vaadin-date-picker-date-selected-color` |
|
|
123
|
+
* | `--vaadin-date-picker-date-today-color` |
|
|
124
|
+
* | `--vaadin-date-picker-date-width` |
|
|
125
|
+
* | `--vaadin-date-picker-month-header-color` |
|
|
126
|
+
* | `--vaadin-date-picker-month-header-font-size` |
|
|
127
|
+
* | `--vaadin-date-picker-month-header-font-weight` |
|
|
128
|
+
* | `--vaadin-date-picker-month-padding` |
|
|
129
|
+
* | `--vaadin-date-picker-overlay-max-height` |
|
|
130
|
+
* | `--vaadin-date-picker-overlay-width` |
|
|
131
|
+
* | `--vaadin-date-picker-toolbar-padding` |
|
|
132
|
+
* | `--vaadin-date-picker-week-divider-color` |
|
|
133
|
+
* | `--vaadin-date-picker-week-number-color` |
|
|
134
|
+
* | `--vaadin-date-picker-week-number-font-size` |
|
|
135
|
+
* | `--vaadin-date-picker-weekday-color` |
|
|
136
|
+
* | `--vaadin-date-picker-weekday-font-size` |
|
|
137
|
+
* | `--vaadin-date-picker-weekday-font-weight` |
|
|
138
|
+
* | `--vaadin-date-picker-year-scroller-background` |
|
|
139
|
+
* | `--vaadin-date-picker-year-scroller-border-color` |
|
|
140
|
+
* | `--vaadin-date-picker-year-scroller-current-year-color` |
|
|
141
|
+
* | `--vaadin-date-picker-year-scroller-width` |
|
|
142
|
+
* | `--vaadin-field-default-width` |
|
|
143
|
+
* | `--vaadin-input-field-background` |
|
|
144
|
+
* | `--vaadin-input-field-border-color` |
|
|
145
|
+
* | `--vaadin-input-field-border-radius` |
|
|
146
|
+
* | `--vaadin-input-field-border-width` |
|
|
147
|
+
* | `--vaadin-input-field-bottom-end-radius` |
|
|
148
|
+
* | `--vaadin-input-field-bottom-start-radius` |
|
|
149
|
+
* | `--vaadin-input-field-button-text-color` |
|
|
150
|
+
* | `--vaadin-input-field-container-gap` |
|
|
151
|
+
* | `--vaadin-input-field-disabled-background` |
|
|
152
|
+
* | `--vaadin-input-field-disabled-text-color` |
|
|
153
|
+
* | `--vaadin-input-field-error-color` |
|
|
154
|
+
* | `--vaadin-input-field-error-font-size` |
|
|
155
|
+
* | `--vaadin-input-field-error-font-weight` |
|
|
156
|
+
* | `--vaadin-input-field-error-line-height` |
|
|
157
|
+
* | `--vaadin-input-field-gap` |
|
|
158
|
+
* | `--vaadin-input-field-helper-color` |
|
|
159
|
+
* | `--vaadin-input-field-helper-font-size` |
|
|
160
|
+
* | `--vaadin-input-field-helper-font-weight` |
|
|
161
|
+
* | `--vaadin-input-field-helper-line-height` |
|
|
162
|
+
* | `--vaadin-input-field-label-color` |
|
|
163
|
+
* | `--vaadin-input-field-label-font-size` |
|
|
164
|
+
* | `--vaadin-input-field-label-font-weight` |
|
|
165
|
+
* | `--vaadin-input-field-label-line-height` |
|
|
166
|
+
* | `--vaadin-input-field-padding` |
|
|
167
|
+
* | `--vaadin-input-field-placeholder-color` |
|
|
168
|
+
* | `--vaadin-input-field-required-indicator` |
|
|
169
|
+
* | `--vaadin-input-field-required-indicator-color` |
|
|
170
|
+
* | `--vaadin-input-field-top-end-radius` |
|
|
171
|
+
* | `--vaadin-input-field-top-start-radius` |
|
|
172
|
+
* | `--vaadin-input-field-value-color` |
|
|
173
|
+
* | `--vaadin-input-field-value-font-size` |
|
|
174
|
+
* | `--vaadin-input-field-value-font-weight` |
|
|
175
|
+
* | `--vaadin-input-field-value-line-height` |
|
|
176
|
+
*
|
|
120
177
|
* ### Internal components
|
|
121
178
|
*
|
|
122
179
|
* In addition to `<vaadin-date-picker>` itself, the following internal
|
|
@@ -36,12 +36,6 @@ import { DatePickerMixin } from './vaadin-date-picker-mixin.js';
|
|
|
36
36
|
*
|
|
37
37
|
* ### Styling
|
|
38
38
|
*
|
|
39
|
-
* The following custom properties are available for styling:
|
|
40
|
-
*
|
|
41
|
-
* Custom property | Description | Default
|
|
42
|
-
* -------------------------------|----------------------------|---------
|
|
43
|
-
* `--vaadin-field-default-width` | Default width of the field | `12em`
|
|
44
|
-
*
|
|
45
39
|
* The following shadow DOM parts are available for styling:
|
|
46
40
|
*
|
|
47
41
|
* Part name | Description
|
|
@@ -75,6 +69,69 @@ import { DatePickerMixin } from './vaadin-date-picker-mixin.js';
|
|
|
75
69
|
* `opened` | Set when the overlay is opened
|
|
76
70
|
* `week-numbers` | Set when week numbers are shown in the calendar
|
|
77
71
|
*
|
|
72
|
+
* The following custom CSS properties are available for styling:
|
|
73
|
+
*
|
|
74
|
+
* Custom CSS property |
|
|
75
|
+
* :----------------------------------------------------------|
|
|
76
|
+
* | `--vaadin-date-picker-date-border-radius` |
|
|
77
|
+
* | `--vaadin-date-picker-date-disabled-color` |
|
|
78
|
+
* | `--vaadin-date-picker-date-height` |
|
|
79
|
+
* | `--vaadin-date-picker-date-selected-background` |
|
|
80
|
+
* | `--vaadin-date-picker-date-selected-color` |
|
|
81
|
+
* | `--vaadin-date-picker-date-today-color` |
|
|
82
|
+
* | `--vaadin-date-picker-date-width` |
|
|
83
|
+
* | `--vaadin-date-picker-month-header-color` |
|
|
84
|
+
* | `--vaadin-date-picker-month-header-font-size` |
|
|
85
|
+
* | `--vaadin-date-picker-month-header-font-weight` |
|
|
86
|
+
* | `--vaadin-date-picker-month-padding` |
|
|
87
|
+
* | `--vaadin-date-picker-overlay-max-height` |
|
|
88
|
+
* | `--vaadin-date-picker-overlay-width` |
|
|
89
|
+
* | `--vaadin-date-picker-toolbar-padding` |
|
|
90
|
+
* | `--vaadin-date-picker-week-divider-color` |
|
|
91
|
+
* | `--vaadin-date-picker-week-number-color` |
|
|
92
|
+
* | `--vaadin-date-picker-week-number-font-size` |
|
|
93
|
+
* | `--vaadin-date-picker-weekday-color` |
|
|
94
|
+
* | `--vaadin-date-picker-weekday-font-size` |
|
|
95
|
+
* | `--vaadin-date-picker-weekday-font-weight` |
|
|
96
|
+
* | `--vaadin-date-picker-year-scroller-background` |
|
|
97
|
+
* | `--vaadin-date-picker-year-scroller-border-color` |
|
|
98
|
+
* | `--vaadin-date-picker-year-scroller-current-year-color` |
|
|
99
|
+
* | `--vaadin-date-picker-year-scroller-width` |
|
|
100
|
+
* | `--vaadin-field-default-width` |
|
|
101
|
+
* | `--vaadin-input-field-background` |
|
|
102
|
+
* | `--vaadin-input-field-border-color` |
|
|
103
|
+
* | `--vaadin-input-field-border-radius` |
|
|
104
|
+
* | `--vaadin-input-field-border-width` |
|
|
105
|
+
* | `--vaadin-input-field-bottom-end-radius` |
|
|
106
|
+
* | `--vaadin-input-field-bottom-start-radius` |
|
|
107
|
+
* | `--vaadin-input-field-button-text-color` |
|
|
108
|
+
* | `--vaadin-input-field-container-gap` |
|
|
109
|
+
* | `--vaadin-input-field-disabled-background` |
|
|
110
|
+
* | `--vaadin-input-field-disabled-text-color` |
|
|
111
|
+
* | `--vaadin-input-field-error-color` |
|
|
112
|
+
* | `--vaadin-input-field-error-font-size` |
|
|
113
|
+
* | `--vaadin-input-field-error-font-weight` |
|
|
114
|
+
* | `--vaadin-input-field-error-line-height` |
|
|
115
|
+
* | `--vaadin-input-field-gap` |
|
|
116
|
+
* | `--vaadin-input-field-helper-color` |
|
|
117
|
+
* | `--vaadin-input-field-helper-font-size` |
|
|
118
|
+
* | `--vaadin-input-field-helper-font-weight` |
|
|
119
|
+
* | `--vaadin-input-field-helper-line-height` |
|
|
120
|
+
* | `--vaadin-input-field-label-color` |
|
|
121
|
+
* | `--vaadin-input-field-label-font-size` |
|
|
122
|
+
* | `--vaadin-input-field-label-font-weight` |
|
|
123
|
+
* | `--vaadin-input-field-label-line-height` |
|
|
124
|
+
* | `--vaadin-input-field-padding` |
|
|
125
|
+
* | `--vaadin-input-field-placeholder-color` |
|
|
126
|
+
* | `--vaadin-input-field-required-indicator` |
|
|
127
|
+
* | `--vaadin-input-field-required-indicator-color` |
|
|
128
|
+
* | `--vaadin-input-field-top-end-radius` |
|
|
129
|
+
* | `--vaadin-input-field-top-start-radius` |
|
|
130
|
+
* | `--vaadin-input-field-value-color` |
|
|
131
|
+
* | `--vaadin-input-field-value-font-size` |
|
|
132
|
+
* | `--vaadin-input-field-value-font-weight` |
|
|
133
|
+
* | `--vaadin-input-field-value-line-height` |
|
|
134
|
+
*
|
|
78
135
|
* ### Internal components
|
|
79
136
|
*
|
|
80
137
|
* In addition to `<vaadin-date-picker>` itself, the following internal
|
|
@@ -37,6 +37,10 @@ template.innerHTML = `
|
|
|
37
37
|
box-sizing: border-box;
|
|
38
38
|
top: var(--vaadin-infinite-scroller-buffer-offset, 0);
|
|
39
39
|
}
|
|
40
|
+
|
|
41
|
+
::slotted(div) {
|
|
42
|
+
height: var(--vaadin-infinite-scroller-item-height);
|
|
43
|
+
}
|
|
40
44
|
</style>
|
|
41
45
|
|
|
42
46
|
<div id="scroller" tabindex="-1">
|
|
@@ -149,7 +153,7 @@ export class InfiniteScroller extends HTMLElement {
|
|
|
149
153
|
this.$.scroller.scrollTop = this.itemHeight * (index - this._firstIndex) + this._buffers[0].translateY;
|
|
150
154
|
} else {
|
|
151
155
|
this._initialIndex = ~~index;
|
|
152
|
-
this.
|
|
156
|
+
this.reset();
|
|
153
157
|
this._scrollDisabled = true;
|
|
154
158
|
this.$.scroller.scrollTop += (index % 1) * this.itemHeight;
|
|
155
159
|
this._scrollDisabled = false;
|
|
@@ -235,7 +239,7 @@ export class InfiniteScroller extends HTMLElement {
|
|
|
235
239
|
});
|
|
236
240
|
|
|
237
241
|
if (!this._buffers[0].translateY) {
|
|
238
|
-
this.
|
|
242
|
+
this.reset();
|
|
239
243
|
}
|
|
240
244
|
|
|
241
245
|
this._initDone = true;
|
|
@@ -262,7 +266,7 @@ export class InfiniteScroller extends HTMLElement {
|
|
|
262
266
|
if (scrollTop < this._bufferHeight || scrollTop > this._initialScroll * 2 - this._bufferHeight) {
|
|
263
267
|
// Scrolled near the end/beginning of the scrollable area -> reset.
|
|
264
268
|
this._initialIndex = ~~this.position;
|
|
265
|
-
this.
|
|
269
|
+
this.reset();
|
|
266
270
|
}
|
|
267
271
|
|
|
268
272
|
// Check if we scrolled enough to translate the buffer positions.
|
|
@@ -288,8 +292,18 @@ export class InfiniteScroller extends HTMLElement {
|
|
|
288
292
|
});
|
|
289
293
|
}
|
|
290
294
|
|
|
291
|
-
/**
|
|
292
|
-
|
|
295
|
+
/**
|
|
296
|
+
* Resets the scroller to the last starting index, and re-measures the
|
|
297
|
+
* item height in case the computed value of the CSS custom property
|
|
298
|
+
* has changed.
|
|
299
|
+
*/
|
|
300
|
+
reset() {
|
|
301
|
+
if (!this._activated || !this.isConnected) {
|
|
302
|
+
return;
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
this._itemHeightVal = null;
|
|
306
|
+
|
|
293
307
|
this._scrollDisabled = true;
|
|
294
308
|
this.$.scroller.scrollTop = this._initialScroll;
|
|
295
309
|
this._buffers[0].translateY = this._initialScroll - this._bufferHeight;
|
|
@@ -314,7 +328,6 @@ export class InfiniteScroller extends HTMLElement {
|
|
|
314
328
|
this._buffers.forEach((buffer) => {
|
|
315
329
|
for (let i = 0; i < this.bufferSize; i++) {
|
|
316
330
|
const itemWrapper = document.createElement('div');
|
|
317
|
-
itemWrapper.style.height = `${this.itemHeight}px`;
|
|
318
331
|
itemWrapper.instance = {};
|
|
319
332
|
|
|
320
333
|
const slotName = `vaadin-infinite-scroller-item-content-${generateUniqueId()}`;
|
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-picker",
|
|
4
|
-
"version": "25.3.0-
|
|
4
|
+
"version": "25.3.0-beta2",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
9
|
{
|
|
10
10
|
"name": "vaadin-date-picker",
|
|
11
|
-
"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
|
|
11
|
+
"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 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\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:----------------------------------------------------------|\n| `--vaadin-date-picker-date-border-radius` |\n| `--vaadin-date-picker-date-disabled-color` |\n| `--vaadin-date-picker-date-height` |\n| `--vaadin-date-picker-date-selected-background` |\n| `--vaadin-date-picker-date-selected-color` |\n| `--vaadin-date-picker-date-today-color` |\n| `--vaadin-date-picker-date-width` |\n| `--vaadin-date-picker-month-header-color` |\n| `--vaadin-date-picker-month-header-font-size` |\n| `--vaadin-date-picker-month-header-font-weight` |\n| `--vaadin-date-picker-month-padding` |\n| `--vaadin-date-picker-overlay-max-height` |\n| `--vaadin-date-picker-overlay-width` |\n| `--vaadin-date-picker-toolbar-padding` |\n| `--vaadin-date-picker-week-divider-color` |\n| `--vaadin-date-picker-week-number-color` |\n| `--vaadin-date-picker-week-number-font-size` |\n| `--vaadin-date-picker-weekday-color` |\n| `--vaadin-date-picker-weekday-font-size` |\n| `--vaadin-date-picker-weekday-font-weight` |\n| `--vaadin-date-picker-year-scroller-background` |\n| `--vaadin-date-picker-year-scroller-border-color` |\n| `--vaadin-date-picker-year-scroller-current-year-color` |\n| `--vaadin-date-picker-year-scroller-width` |\n| `--vaadin-field-default-width` |\n| `--vaadin-input-field-background` |\n| `--vaadin-input-field-border-color` |\n| `--vaadin-input-field-border-radius` |\n| `--vaadin-input-field-border-width` |\n| `--vaadin-input-field-bottom-end-radius` |\n| `--vaadin-input-field-bottom-start-radius` |\n| `--vaadin-input-field-button-text-color` |\n| `--vaadin-input-field-container-gap` |\n| `--vaadin-input-field-disabled-background` |\n| `--vaadin-input-field-disabled-text-color` |\n| `--vaadin-input-field-error-color` |\n| `--vaadin-input-field-error-font-size` |\n| `--vaadin-input-field-error-font-weight` |\n| `--vaadin-input-field-error-line-height` |\n| `--vaadin-input-field-gap` |\n| `--vaadin-input-field-helper-color` |\n| `--vaadin-input-field-helper-font-size` |\n| `--vaadin-input-field-helper-font-weight` |\n| `--vaadin-input-field-helper-line-height` |\n| `--vaadin-input-field-label-color` |\n| `--vaadin-input-field-label-font-size` |\n| `--vaadin-input-field-label-font-weight` |\n| `--vaadin-input-field-label-line-height` |\n| `--vaadin-input-field-padding` |\n| `--vaadin-input-field-placeholder-color` |\n| `--vaadin-input-field-required-indicator` |\n| `--vaadin-input-field-required-indicator-color` |\n| `--vaadin-input-field-top-end-radius` |\n| `--vaadin-input-field-top-start-radius` |\n| `--vaadin-input-field-value-color` |\n| `--vaadin-input-field-value-font-size` |\n| `--vaadin-input-field-value-font-weight` |\n| `--vaadin-input-field-value-line-height` |\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 the date metadata provider is resolving\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 the date metadata provider is resolving\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`loading` | Date element in a month whose metadata is currently being fetched\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",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "accessible-description-ref",
|
|
@@ -321,7 +321,7 @@
|
|
|
321
321
|
},
|
|
322
322
|
{
|
|
323
323
|
"name": "dateMetadataProvider",
|
|
324
|
-
"description": "A
|
|
324
|
+
"description": "A function that provides metadata for the dates the calendar is about to render: whether they\nare disabled, and CSS `part` names for styling from outside using the `::part()` selector.\nUnlike `isDateDisabled`, which is called once per date, the metadata provider is called for\na range of dates at a time, and again as the calendar renders further dates.\n\nIt receives a `DatePickerDateRange` and returns an array of `DatePickerDateMetadata` objects\nfor the dates in that range that have metadata. It can return a `Promise` to load the metadata\nasynchronously, and `null` or `undefined` when no date in the range has metadata.\n\nThe returned array has the following structure:\n\n```js\n[\n // The date is an ISO 8601 string.\n { date: '2026-01-01', disabled: true },\n\n // Adds a custom part name to the date.\n { date: '2026-01-02', part: 'busy' },\n]\n```\n\nA date is disabled if its metadata marks it disabled, or `isDateDisabled` returns `true`, or\nit is outside `min` and `max`. Disabled dates are not selectable, and typing a disabled date in\nthe field makes it invalid. The provider does not affect which date is focused when opening the\noverlay. Use `initialPosition` property to provide a selectable date.\n\nWhile a returned `Promise` is pending, the dates it covers are not disabled yet and render with\nthe `loading` part. If the function throws or rejects, corresponding dates are requested again\nthe next time the user navigates.\n\nThe provider is used for validation also when the overlay is closed. Date is considered valid\nwhile the provider is pending, and is re-validated again after the metadata is loaded.\n\nKeep a stable reference to the function: assigning a new one clears the cache and re-fetches\nvisible range. Call `clearCache()` to re-fetch when the data behind the same function changed.",
|
|
325
325
|
"value": {
|
|
326
326
|
"type": [
|
|
327
327
|
"DatePickerDateMetadataProvider",
|
|
@@ -386,7 +386,7 @@
|
|
|
386
386
|
},
|
|
387
387
|
{
|
|
388
388
|
"name": "isDateDisabled",
|
|
389
|
-
"description": "A function to be used to determine whether the user can select a given date.\nReceives a `DatePickerDate` object of the date to be selected and should return a\nboolean.",
|
|
389
|
+
"description": "A function to be used to determine whether the user can select a given date.\nReceives a `DatePickerDate` object of the date to be selected and should return a\nboolean.\n\nThe function is called once per date and has to answer synchronously. Use\n`dateMetadataProvider` when the answer has to be loaded first, or when dates also need\ncustom part names. A date is disabled when either of the two disables it.",
|
|
390
390
|
"value": {
|
|
391
391
|
"type": [
|
|
392
392
|
"function DatePickerDate: boolean",
|