@vaadin/date-picker 24.6.0-alpha7 → 24.6.0-alpha8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +12 -12
- package/src/vaadin-date-picker-mixin.js +64 -69
- package/web-types.json +46 -2
- package/web-types.lit.json +16 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/date-picker",
|
|
3
|
-
"version": "24.6.0-
|
|
3
|
+
"version": "24.6.0-alpha8",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -36,19 +36,19 @@
|
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
38
|
"@polymer/polymer": "^3.2.0",
|
|
39
|
-
"@vaadin/a11y-base": "24.6.0-
|
|
40
|
-
"@vaadin/button": "24.6.0-
|
|
41
|
-
"@vaadin/component-base": "24.6.0-
|
|
42
|
-
"@vaadin/field-base": "24.6.0-
|
|
43
|
-
"@vaadin/input-container": "24.6.0-
|
|
44
|
-
"@vaadin/overlay": "24.6.0-
|
|
45
|
-
"@vaadin/vaadin-lumo-styles": "24.6.0-
|
|
46
|
-
"@vaadin/vaadin-material-styles": "24.6.0-
|
|
47
|
-
"@vaadin/vaadin-themable-mixin": "24.6.0-
|
|
39
|
+
"@vaadin/a11y-base": "24.6.0-alpha8",
|
|
40
|
+
"@vaadin/button": "24.6.0-alpha8",
|
|
41
|
+
"@vaadin/component-base": "24.6.0-alpha8",
|
|
42
|
+
"@vaadin/field-base": "24.6.0-alpha8",
|
|
43
|
+
"@vaadin/input-container": "24.6.0-alpha8",
|
|
44
|
+
"@vaadin/overlay": "24.6.0-alpha8",
|
|
45
|
+
"@vaadin/vaadin-lumo-styles": "24.6.0-alpha8",
|
|
46
|
+
"@vaadin/vaadin-material-styles": "24.6.0-alpha8",
|
|
47
|
+
"@vaadin/vaadin-themable-mixin": "24.6.0-alpha8",
|
|
48
48
|
"lit": "^3.0.0"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
|
-
"@vaadin/chai-plugins": "24.6.0-
|
|
51
|
+
"@vaadin/chai-plugins": "24.6.0-alpha8",
|
|
52
52
|
"@vaadin/testing-helpers": "^1.0.0",
|
|
53
53
|
"sinon": "^18.0.0"
|
|
54
54
|
},
|
|
@@ -56,5 +56,5 @@
|
|
|
56
56
|
"web-types.json",
|
|
57
57
|
"web-types.lit.json"
|
|
58
58
|
],
|
|
59
|
-
"gitHead": "
|
|
59
|
+
"gitHead": "a11e1510c4caa08775b202714f5fc1198c22132a"
|
|
60
60
|
}
|
|
@@ -23,6 +23,62 @@ import {
|
|
|
23
23
|
parseDate,
|
|
24
24
|
} from './vaadin-date-picker-helper.js';
|
|
25
25
|
|
|
26
|
+
export const datePickerI18nDefaults = Object.freeze({
|
|
27
|
+
monthNames: [
|
|
28
|
+
'January',
|
|
29
|
+
'February',
|
|
30
|
+
'March',
|
|
31
|
+
'April',
|
|
32
|
+
'May',
|
|
33
|
+
'June',
|
|
34
|
+
'July',
|
|
35
|
+
'August',
|
|
36
|
+
'September',
|
|
37
|
+
'October',
|
|
38
|
+
'November',
|
|
39
|
+
'December',
|
|
40
|
+
],
|
|
41
|
+
weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
|
|
42
|
+
weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
|
|
43
|
+
firstDayOfWeek: 0,
|
|
44
|
+
today: 'Today',
|
|
45
|
+
cancel: 'Cancel',
|
|
46
|
+
referenceDate: '',
|
|
47
|
+
formatDate(d) {
|
|
48
|
+
const yearStr = String(d.year).replace(/\d+/u, (y) => '0000'.substr(y.length) + y);
|
|
49
|
+
return [d.month + 1, d.day, yearStr].join('/');
|
|
50
|
+
},
|
|
51
|
+
parseDate(text) {
|
|
52
|
+
const parts = text.split('/');
|
|
53
|
+
const today = new Date();
|
|
54
|
+
let date,
|
|
55
|
+
month = today.getMonth(),
|
|
56
|
+
year = today.getFullYear();
|
|
57
|
+
|
|
58
|
+
if (parts.length === 3) {
|
|
59
|
+
month = parseInt(parts[0]) - 1;
|
|
60
|
+
date = parseInt(parts[1]);
|
|
61
|
+
year = parseInt(parts[2]);
|
|
62
|
+
if (parts[2].length < 3 && year >= 0) {
|
|
63
|
+
const usedReferenceDate = this.referenceDate ? parseDate(this.referenceDate) : new Date();
|
|
64
|
+
year = getAdjustedYear(usedReferenceDate, year, month, date);
|
|
65
|
+
}
|
|
66
|
+
} else if (parts.length === 2) {
|
|
67
|
+
month = parseInt(parts[0]) - 1;
|
|
68
|
+
date = parseInt(parts[1]);
|
|
69
|
+
} else if (parts.length === 1) {
|
|
70
|
+
date = parseInt(parts[0]);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
if (date !== undefined) {
|
|
74
|
+
return { day: date, month, year };
|
|
75
|
+
}
|
|
76
|
+
},
|
|
77
|
+
formatTitle: (monthName, fullYear) => {
|
|
78
|
+
return `${monthName} ${fullYear}`;
|
|
79
|
+
},
|
|
80
|
+
});
|
|
81
|
+
|
|
26
82
|
/**
|
|
27
83
|
* @polymerMixin
|
|
28
84
|
* @mixes ControllerMixin
|
|
@@ -217,63 +273,7 @@ export const DatePickerMixin = (subclass) =>
|
|
|
217
273
|
i18n: {
|
|
218
274
|
type: Object,
|
|
219
275
|
sync: true,
|
|
220
|
-
value: () => {
|
|
221
|
-
return {
|
|
222
|
-
monthNames: [
|
|
223
|
-
'January',
|
|
224
|
-
'February',
|
|
225
|
-
'March',
|
|
226
|
-
'April',
|
|
227
|
-
'May',
|
|
228
|
-
'June',
|
|
229
|
-
'July',
|
|
230
|
-
'August',
|
|
231
|
-
'September',
|
|
232
|
-
'October',
|
|
233
|
-
'November',
|
|
234
|
-
'December',
|
|
235
|
-
],
|
|
236
|
-
weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
|
|
237
|
-
weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
|
|
238
|
-
firstDayOfWeek: 0,
|
|
239
|
-
today: 'Today',
|
|
240
|
-
cancel: 'Cancel',
|
|
241
|
-
referenceDate: '',
|
|
242
|
-
formatDate(d) {
|
|
243
|
-
const yearStr = String(d.year).replace(/\d+/u, (y) => '0000'.substr(y.length) + y);
|
|
244
|
-
return [d.month + 1, d.day, yearStr].join('/');
|
|
245
|
-
},
|
|
246
|
-
parseDate(text) {
|
|
247
|
-
const parts = text.split('/');
|
|
248
|
-
const today = new Date();
|
|
249
|
-
let date,
|
|
250
|
-
month = today.getMonth(),
|
|
251
|
-
year = today.getFullYear();
|
|
252
|
-
|
|
253
|
-
if (parts.length === 3) {
|
|
254
|
-
month = parseInt(parts[0]) - 1;
|
|
255
|
-
date = parseInt(parts[1]);
|
|
256
|
-
year = parseInt(parts[2]);
|
|
257
|
-
if (parts[2].length < 3 && year >= 0) {
|
|
258
|
-
const usedReferenceDate = this.referenceDate ? parseDate(this.referenceDate) : new Date();
|
|
259
|
-
year = getAdjustedYear(usedReferenceDate, year, month, date);
|
|
260
|
-
}
|
|
261
|
-
} else if (parts.length === 2) {
|
|
262
|
-
month = parseInt(parts[0]) - 1;
|
|
263
|
-
date = parseInt(parts[1]);
|
|
264
|
-
} else if (parts.length === 1) {
|
|
265
|
-
date = parseInt(parts[0]);
|
|
266
|
-
}
|
|
267
|
-
|
|
268
|
-
if (date !== undefined) {
|
|
269
|
-
return { day: date, month, year };
|
|
270
|
-
}
|
|
271
|
-
},
|
|
272
|
-
formatTitle: (monthName, fullYear) => {
|
|
273
|
-
return `${monthName} ${fullYear}`;
|
|
274
|
-
},
|
|
275
|
-
};
|
|
276
|
-
},
|
|
276
|
+
value: () => ({ ...datePickerI18nDefaults }),
|
|
277
277
|
},
|
|
278
278
|
|
|
279
279
|
/**
|
|
@@ -479,7 +479,7 @@ export const DatePickerMixin = (subclass) =>
|
|
|
479
479
|
// Do not validate when focusout is caused by document
|
|
480
480
|
// losing focus, which happens on browser tab switch.
|
|
481
481
|
if (document.hasFocus()) {
|
|
482
|
-
this.
|
|
482
|
+
this._requestValidation();
|
|
483
483
|
}
|
|
484
484
|
}
|
|
485
485
|
}
|
|
@@ -624,13 +624,8 @@ export const DatePickerMixin = (subclass) =>
|
|
|
624
624
|
!this._selectedDate || dateAllowed(this._selectedDate, this._minDate, this._maxDate, this.isDateDisabled);
|
|
625
625
|
|
|
626
626
|
let inputValidity = true;
|
|
627
|
-
if (this.inputElement) {
|
|
628
|
-
|
|
629
|
-
inputValidity = this.inputElement.checkValidity();
|
|
630
|
-
} else if (this.inputElement.validate) {
|
|
631
|
-
// Iron-form-elements have the validate API
|
|
632
|
-
inputValidity = this.inputElement.validate();
|
|
633
|
-
}
|
|
627
|
+
if (this.inputElement && this.inputElement.checkValidity) {
|
|
628
|
+
inputValidity = this.inputElement.checkValidity();
|
|
634
629
|
}
|
|
635
630
|
|
|
636
631
|
return inputValid && isDateValid && inputValidity;
|
|
@@ -717,10 +712,10 @@ export const DatePickerMixin = (subclass) =>
|
|
|
717
712
|
const unparsableValue = this.__unparsableValue;
|
|
718
713
|
|
|
719
714
|
if (this.__committedValue !== this.value) {
|
|
720
|
-
this.
|
|
715
|
+
this._requestValidation();
|
|
721
716
|
this.dispatchEvent(new CustomEvent('change', { bubbles: true }));
|
|
722
717
|
} else if (this.__committedUnparsableValue !== unparsableValue) {
|
|
723
|
-
this.
|
|
718
|
+
this._requestValidation();
|
|
724
719
|
this.dispatchEvent(new CustomEvent('unparsable-change'));
|
|
725
720
|
}
|
|
726
721
|
|
|
@@ -849,7 +844,7 @@ export const DatePickerMixin = (subclass) =>
|
|
|
849
844
|
|
|
850
845
|
if (oldValue !== undefined) {
|
|
851
846
|
// Validate only if `value` changes after initialization.
|
|
852
|
-
this.
|
|
847
|
+
this._requestValidation();
|
|
853
848
|
}
|
|
854
849
|
}
|
|
855
850
|
} else {
|
|
@@ -1015,7 +1010,7 @@ export const DatePickerMixin = (subclass) =>
|
|
|
1015
1010
|
// Needed in case the value was not changed: open and close dropdown,
|
|
1016
1011
|
// especially on outside click. On Esc key press, do not validate.
|
|
1017
1012
|
if (!this.value && !this._keyboardActive) {
|
|
1018
|
-
this.
|
|
1013
|
+
this._requestValidation();
|
|
1019
1014
|
}
|
|
1020
1015
|
}
|
|
1021
1016
|
|
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.6.0-
|
|
4
|
+
"version": "24.6.0-alpha8",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -52,6 +52,17 @@
|
|
|
52
52
|
]
|
|
53
53
|
}
|
|
54
54
|
},
|
|
55
|
+
{
|
|
56
|
+
"name": "manual-validation",
|
|
57
|
+
"description": "Set to true to enable manual validation mode. This mode disables automatic\nconstraint validation, allowing you to control the validation process yourself.\nYou can still trigger constraint validation manually with the `validate()` method\nor use `checkValidity()` to assess the component's validity without affecting\nthe invalid state. In manual validation mode, you can also manipulate\nthe `invalid` property directly through your application logic without conflicts\nwith the component's internal validation.",
|
|
58
|
+
"value": {
|
|
59
|
+
"type": [
|
|
60
|
+
"boolean",
|
|
61
|
+
"null",
|
|
62
|
+
"undefined"
|
|
63
|
+
]
|
|
64
|
+
}
|
|
65
|
+
},
|
|
55
66
|
{
|
|
56
67
|
"name": "required",
|
|
57
68
|
"description": "Specifies that the user must fill in a value.",
|
|
@@ -203,6 +214,17 @@
|
|
|
203
214
|
]
|
|
204
215
|
}
|
|
205
216
|
},
|
|
217
|
+
{
|
|
218
|
+
"name": "manualValidation",
|
|
219
|
+
"description": "Set to true to enable manual validation mode. This mode disables automatic\nconstraint validation, allowing you to control the validation process yourself.\nYou can still trigger constraint validation manually with the `validate()` method\nor use `checkValidity()` to assess the component's validity without affecting\nthe invalid state. In manual validation mode, you can also manipulate\nthe `invalid` property directly through your application logic without conflicts\nwith the component's internal validation.",
|
|
220
|
+
"value": {
|
|
221
|
+
"type": [
|
|
222
|
+
"boolean",
|
|
223
|
+
"null",
|
|
224
|
+
"undefined"
|
|
225
|
+
]
|
|
226
|
+
}
|
|
227
|
+
},
|
|
206
228
|
{
|
|
207
229
|
"name": "required",
|
|
208
230
|
"description": "Specifies that the user must fill in a value.",
|
|
@@ -344,7 +366,7 @@
|
|
|
344
366
|
},
|
|
345
367
|
{
|
|
346
368
|
"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.6.0-
|
|
369
|
+
"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.6.0-alpha8/#/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.6.0-alpha8/#/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.6.0-alpha8/#/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.6.0-alpha8/#/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`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\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
370
|
"attributes": [
|
|
349
371
|
{
|
|
350
372
|
"name": "disabled",
|
|
@@ -390,6 +412,17 @@
|
|
|
390
412
|
]
|
|
391
413
|
}
|
|
392
414
|
},
|
|
415
|
+
{
|
|
416
|
+
"name": "manual-validation",
|
|
417
|
+
"description": "Set to true to enable manual validation mode. This mode disables automatic\nconstraint validation, allowing you to control the validation process yourself.\nYou can still trigger constraint validation manually with the `validate()` method\nor use `checkValidity()` to assess the component's validity without affecting\nthe invalid state. In manual validation mode, you can also manipulate\nthe `invalid` property directly through your application logic without conflicts\nwith the component's internal validation.",
|
|
418
|
+
"value": {
|
|
419
|
+
"type": [
|
|
420
|
+
"boolean",
|
|
421
|
+
"null",
|
|
422
|
+
"undefined"
|
|
423
|
+
]
|
|
424
|
+
}
|
|
425
|
+
},
|
|
393
426
|
{
|
|
394
427
|
"name": "required",
|
|
395
428
|
"description": "Specifies that the user must fill in a value.",
|
|
@@ -664,6 +697,17 @@
|
|
|
664
697
|
]
|
|
665
698
|
}
|
|
666
699
|
},
|
|
700
|
+
{
|
|
701
|
+
"name": "manualValidation",
|
|
702
|
+
"description": "Set to true to enable manual validation mode. This mode disables automatic\nconstraint validation, allowing you to control the validation process yourself.\nYou can still trigger constraint validation manually with the `validate()` method\nor use `checkValidity()` to assess the component's validity without affecting\nthe invalid state. In manual validation mode, you can also manipulate\nthe `invalid` property directly through your application logic without conflicts\nwith the component's internal validation.",
|
|
703
|
+
"value": {
|
|
704
|
+
"type": [
|
|
705
|
+
"boolean",
|
|
706
|
+
"null",
|
|
707
|
+
"undefined"
|
|
708
|
+
]
|
|
709
|
+
}
|
|
710
|
+
},
|
|
667
711
|
{
|
|
668
712
|
"name": "required",
|
|
669
713
|
"description": "Specifies that the user must fill in a value.",
|
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.6.0-
|
|
4
|
+
"version": "24.6.0-alpha8",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -40,6 +40,13 @@
|
|
|
40
40
|
"kind": "expression"
|
|
41
41
|
}
|
|
42
42
|
},
|
|
43
|
+
{
|
|
44
|
+
"name": "?manualValidation",
|
|
45
|
+
"description": "Set to true to enable manual validation mode. This mode disables automatic\nconstraint validation, allowing you to control the validation process yourself.\nYou can still trigger constraint validation manually with the `validate()` method\nor use `checkValidity()` to assess the component's validity without affecting\nthe invalid state. In manual validation mode, you can also manipulate\nthe `invalid` property directly through your application logic without conflicts\nwith the component's internal validation.",
|
|
46
|
+
"value": {
|
|
47
|
+
"kind": "expression"
|
|
48
|
+
}
|
|
49
|
+
},
|
|
43
50
|
{
|
|
44
51
|
"name": "?required",
|
|
45
52
|
"description": "Specifies that the user must fill in a value.",
|
|
@@ -163,7 +170,7 @@
|
|
|
163
170
|
},
|
|
164
171
|
{
|
|
165
172
|
"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.6.0-
|
|
173
|
+
"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.6.0-alpha8/#/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.6.0-alpha8/#/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.6.0-alpha8/#/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.6.0-alpha8/#/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`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\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
174
|
"extension": true,
|
|
168
175
|
"attributes": [
|
|
169
176
|
{
|
|
@@ -187,6 +194,13 @@
|
|
|
187
194
|
"kind": "expression"
|
|
188
195
|
}
|
|
189
196
|
},
|
|
197
|
+
{
|
|
198
|
+
"name": "?manualValidation",
|
|
199
|
+
"description": "Set to true to enable manual validation mode. This mode disables automatic\nconstraint validation, allowing you to control the validation process yourself.\nYou can still trigger constraint validation manually with the `validate()` method\nor use `checkValidity()` to assess the component's validity without affecting\nthe invalid state. In manual validation mode, you can also manipulate\nthe `invalid` property directly through your application logic without conflicts\nwith the component's internal validation.",
|
|
200
|
+
"value": {
|
|
201
|
+
"kind": "expression"
|
|
202
|
+
}
|
|
203
|
+
},
|
|
190
204
|
{
|
|
191
205
|
"name": "?required",
|
|
192
206
|
"description": "Specifies that the user must fill in a value.",
|