@vaadin/date-picker 23.2.0-beta2 → 23.2.0-beta3
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 +10 -10
- package/src/vaadin-date-picker-mixin.d.ts +2 -0
- package/src/vaadin-date-picker-mixin.js +9 -19
- package/web-types.json +2 -2
- package/web-types.lit.json +2 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/date-picker",
|
|
3
|
-
"version": "23.2.0-
|
|
3
|
+
"version": "23.2.0-beta3",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -36,14 +36,14 @@
|
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
38
|
"@polymer/polymer": "^3.2.0",
|
|
39
|
-
"@vaadin/button": "23.2.0-
|
|
40
|
-
"@vaadin/component-base": "23.2.0-
|
|
41
|
-
"@vaadin/field-base": "23.2.0-
|
|
42
|
-
"@vaadin/input-container": "23.2.0-
|
|
43
|
-
"@vaadin/vaadin-lumo-styles": "23.2.0-
|
|
44
|
-
"@vaadin/vaadin-material-styles": "23.2.0-
|
|
45
|
-
"@vaadin/vaadin-overlay": "23.2.0-
|
|
46
|
-
"@vaadin/vaadin-themable-mixin": "23.2.0-
|
|
39
|
+
"@vaadin/button": "23.2.0-beta3",
|
|
40
|
+
"@vaadin/component-base": "23.2.0-beta3",
|
|
41
|
+
"@vaadin/field-base": "23.2.0-beta3",
|
|
42
|
+
"@vaadin/input-container": "23.2.0-beta3",
|
|
43
|
+
"@vaadin/vaadin-lumo-styles": "23.2.0-beta3",
|
|
44
|
+
"@vaadin/vaadin-material-styles": "23.2.0-beta3",
|
|
45
|
+
"@vaadin/vaadin-overlay": "23.2.0-beta3",
|
|
46
|
+
"@vaadin/vaadin-themable-mixin": "23.2.0-beta3"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
49
|
"@esm-bundle/chai": "^4.3.4",
|
|
@@ -54,5 +54,5 @@
|
|
|
54
54
|
"web-types.json",
|
|
55
55
|
"web-types.lit.json"
|
|
56
56
|
],
|
|
57
|
-
"gitHead": "
|
|
57
|
+
"gitHead": "3389e7d2dd4c94c6354817d4dc8c8d2db48c7137"
|
|
58
58
|
}
|
|
@@ -8,6 +8,7 @@ import type { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mix
|
|
|
8
8
|
import type { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
|
|
9
9
|
import type { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
|
|
10
10
|
import type { DelegateFocusMixinClass } from '@vaadin/field-base/src/delegate-focus-mixin.js';
|
|
11
|
+
import type { InputConstraintsMixinClass } from '@vaadin/field-base/src/input-constraints-mixin.js';
|
|
11
12
|
import type { InputMixinClass } from '@vaadin/field-base/src/input-mixin.js';
|
|
12
13
|
|
|
13
14
|
export interface DatePickerDate {
|
|
@@ -37,6 +38,7 @@ export declare function DatePickerMixin<T extends Constructor<HTMLElement>>(
|
|
|
37
38
|
Constructor<DelegateFocusMixinClass> &
|
|
38
39
|
Constructor<DisabledMixinClass> &
|
|
39
40
|
Constructor<FocusMixinClass> &
|
|
41
|
+
Constructor<InputConstraintsMixinClass> &
|
|
40
42
|
Constructor<InputMixinClass> &
|
|
41
43
|
Constructor<KeyboardMixinClass> &
|
|
42
44
|
T;
|
|
@@ -8,7 +8,7 @@ import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js'
|
|
|
8
8
|
import { KeyboardMixin } from '@vaadin/component-base/src/keyboard-mixin.js';
|
|
9
9
|
import { MediaQueryController } from '@vaadin/component-base/src/media-query-controller.js';
|
|
10
10
|
import { DelegateFocusMixin } from '@vaadin/field-base/src/delegate-focus-mixin.js';
|
|
11
|
-
import {
|
|
11
|
+
import { InputConstraintsMixin } from '@vaadin/field-base/src/input-constraints-mixin.js';
|
|
12
12
|
import { VirtualKeyboardController } from '@vaadin/field-base/src/virtual-keyboard-controller.js';
|
|
13
13
|
import { dateAllowed, dateEquals, extractDateParts, getClosestDate } from './vaadin-date-picker-helper.js';
|
|
14
14
|
|
|
@@ -17,7 +17,9 @@ import { dateAllowed, dateEquals, extractDateParts, getClosestDate } from './vaa
|
|
|
17
17
|
* @param {function(new:HTMLElement)} subclass
|
|
18
18
|
*/
|
|
19
19
|
export const DatePickerMixin = (subclass) =>
|
|
20
|
-
class VaadinDatePickerMixin extends ControllerMixin(
|
|
20
|
+
class VaadinDatePickerMixin extends ControllerMixin(
|
|
21
|
+
DelegateFocusMixin(InputConstraintsMixin(KeyboardMixin(subclass))),
|
|
22
|
+
) {
|
|
21
23
|
static get properties() {
|
|
22
24
|
return {
|
|
23
25
|
/**
|
|
@@ -278,7 +280,6 @@ export const DatePickerMixin = (subclass) =>
|
|
|
278
280
|
*/
|
|
279
281
|
_minDate: {
|
|
280
282
|
type: Date,
|
|
281
|
-
observer: '__minDateChanged',
|
|
282
283
|
computed: '__computeMinOrMaxDate(min)',
|
|
283
284
|
},
|
|
284
285
|
|
|
@@ -289,7 +290,6 @@ export const DatePickerMixin = (subclass) =>
|
|
|
289
290
|
*/
|
|
290
291
|
_maxDate: {
|
|
291
292
|
type: Date,
|
|
292
|
-
observer: '__maxDateChanged',
|
|
293
293
|
computed: '__computeMinOrMaxDate(max)',
|
|
294
294
|
},
|
|
295
295
|
|
|
@@ -320,6 +320,10 @@ export const DatePickerMixin = (subclass) =>
|
|
|
320
320
|
];
|
|
321
321
|
}
|
|
322
322
|
|
|
323
|
+
static get constraints() {
|
|
324
|
+
return [...super.constraints, 'min', 'max'];
|
|
325
|
+
}
|
|
326
|
+
|
|
323
327
|
/**
|
|
324
328
|
* Override a getter from `InputControlMixin` to make it optional
|
|
325
329
|
* and to prevent warning when a clear button is missing,
|
|
@@ -755,21 +759,7 @@ export const DatePickerMixin = (subclass) =>
|
|
|
755
759
|
this._selectedDate = null;
|
|
756
760
|
}
|
|
757
761
|
|
|
758
|
-
this._toggleHasValue(
|
|
759
|
-
}
|
|
760
|
-
|
|
761
|
-
/** @private */
|
|
762
|
-
__minDateChanged() {
|
|
763
|
-
if (this.value) {
|
|
764
|
-
this.validate();
|
|
765
|
-
}
|
|
766
|
-
}
|
|
767
|
-
|
|
768
|
-
/** @private */
|
|
769
|
-
__maxDateChanged() {
|
|
770
|
-
if (this.value) {
|
|
771
|
-
this.validate();
|
|
772
|
-
}
|
|
762
|
+
this._toggleHasValue(this._hasValue);
|
|
773
763
|
}
|
|
774
764
|
|
|
775
765
|
/** @protected */
|
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": "23.2.0-
|
|
4
|
+
"version": "23.2.0-beta3",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -216,7 +216,7 @@
|
|
|
216
216
|
},
|
|
217
217
|
{
|
|
218
218
|
"name": "vaadin-date-picker",
|
|
219
|
-
"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/23.2.0-
|
|
219
|
+
"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/23.2.0-beta3/#/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`overlay-content` | The overlay element\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`today` | Set on the date corresponding to the current day | date\n`selected` | Set on the selected date | date\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/23.2.0-beta3/#/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/23.2.0-beta3/#/elements/vaadin-overlay).\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-month-calendar>`\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/23.2.0-beta3/#/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`months` | Months scroller\n`years` | Years scroller\n`toolbar` | Footer bar with buttons\n`today-button` | Today button\n`cancel-button` | Cancel button\n`month` | Month calendar\n`year-number` | Year number\n`year-separator` | Year separator\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\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/ds/customization/styling-components) documentation.",
|
|
220
220
|
"attributes": [
|
|
221
221
|
{
|
|
222
222
|
"name": "disabled",
|
package/web-types.lit.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/date-picker",
|
|
4
|
-
"version": "23.2.0-
|
|
4
|
+
"version": "23.2.0-beta3",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -107,7 +107,7 @@
|
|
|
107
107
|
},
|
|
108
108
|
{
|
|
109
109
|
"name": "vaadin-date-picker",
|
|
110
|
-
"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/23.2.0-
|
|
110
|
+
"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/23.2.0-beta3/#/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`overlay-content` | The overlay element\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`today` | Set on the date corresponding to the current day | date\n`selected` | Set on the selected date | date\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/23.2.0-beta3/#/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/23.2.0-beta3/#/elements/vaadin-overlay).\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-month-calendar>`\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/23.2.0-beta3/#/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`months` | Months scroller\n`years` | Years scroller\n`toolbar` | Footer bar with buttons\n`today-button` | Today button\n`cancel-button` | Cancel button\n`month` | Month calendar\n`year-number` | Year number\n`year-separator` | Year separator\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\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/ds/customization/styling-components) documentation.",
|
|
111
111
|
"extension": true,
|
|
112
112
|
"attributes": [
|
|
113
113
|
{
|