@vaadin/date-time-picker 22.0.0-alpha9 → 22.0.0

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.
Files changed (6) hide show
  1. package/README.md +24 -25
  2. package/package.json +11 -11
  3. package/src/vaadin-date-time-picker.d.ts +19 -12
  4. package/src/vaadin-date-time-picker.js +27 -17
  5. package/theme/lumo/vaadin-date-time-picker-styles.js +4 -4
  6. package/theme/material/vaadin-date-time-picker-styles.js +4 -4
package/README.md CHANGED
@@ -1,54 +1,52 @@
1
- # <vaadin-date-time-picker>
1
+ # @vaadin/date-time-picker
2
2
 
3
- [<vaadin-date-time-picker>](https://vaadin.com/components/vaadin-date-time-picker) is a Web Component providing a date and time selection field which includes a scrollable month calendar view, part of the [Vaadin components](https://vaadin.com/components).
3
+ An input field web component for selecting both a date and a time.
4
4
 
5
- [Live Demo ↗](https://vaadin.com/components/vaadin-date-time-picker/html-examples)
6
- |
7
- [API documentation ↗](https://vaadin.com/components/vaadin-date-time-picker/html-api)
5
+ [Documentation + Live Demo ↗](https://vaadin.com/docs/latest/ds/components/date-time-picker)
8
6
 
9
7
  [![npm version](https://badgen.net/npm/v/@vaadin/date-time-picker)](https://www.npmjs.com/package/@vaadin/date-time-picker)
10
- [![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-date-time-picker)
11
8
  [![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
12
9
 
13
10
  ```html
14
11
  <vaadin-date-time-picker></vaadin-date-time-picker>
15
12
  ```
16
13
 
17
- [<img src="https://raw.githubusercontent.com/vaadin/vaadin-date-time-picker/master/screenshot.png" width="200" alt="Screenshot of vaadin-date-time-picker">](https://vaadin.com/components/vaadin-date-time-picker)
18
-
19
14
  ## Installation
20
15
 
21
- Install `vaadin-date-time-picker`:
16
+ Install the component:
22
17
 
23
18
  ```sh
24
- npm i @vaadin/date-time-picker --save
19
+ npm i @vaadin/date-time-picker
25
20
  ```
26
21
 
27
- Once installed, import it in your application:
22
+ Once installed, import the component in your application:
28
23
 
29
24
  ```js
30
- import '@vaadin/date-time-picker/vaadin-date-time-picker.js';
25
+ import '@vaadin/date-time-picker';
31
26
  ```
32
27
 
33
- ## Getting started
34
-
35
- Vaadin components use the Lumo theme by default.
36
-
37
- To use the Material theme, import the correspondent file from the `theme/material` folder.
28
+ ## Themes
38
29
 
39
- ## Entry points
30
+ Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/ds/customization/using-themes), Lumo and Material.
31
+ The [main entrypoint](https://github.com/vaadin/web-components/blob/master/packages/date-time-picker/vaadin-date-time-picker.js) of the package uses the Lumo theme.
40
32
 
41
- - The component with the Lumo theme:
33
+ To use the Material theme, import the component from the `theme/material` folder:
42
34
 
43
- `theme/lumo/vaadin-date-time-picker.js`
35
+ ```js
36
+ import '@vaadin/date-time-picker/theme/material/vaadin-date-time-picker.js';
37
+ ```
44
38
 
45
- - The component with the Material theme:
39
+ You can also import the Lumo version of the component explicitly:
46
40
 
47
- `theme/material/vaadin-date-time-picker.js`
41
+ ```js
42
+ import '@vaadin/date-time-picker/theme/lumo/vaadin-date-time-picker.js';
43
+ ```
48
44
 
49
- - Alias for `theme/lumo/vaadin-date-time-picker.js`:
45
+ Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:
50
46
 
51
- `vaadin-date-time-picker.js`
47
+ ```js
48
+ import '@vaadin/date-time-picker/src/vaadin-date-time-picker.js';
49
+ ```
52
50
 
53
51
  ## Contributing
54
52
 
@@ -58,4 +56,5 @@ Read the [contributing guide](https://vaadin.com/docs/latest/guide/contributing/
58
56
 
59
57
  Apache License 2.0
60
58
 
61
- Vaadin collects development time usage statistics to improve this product. For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.
59
+ Vaadin collects usage statistics at development time to improve this product.
60
+ For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/date-time-picker",
3
- "version": "22.0.0-alpha9",
3
+ "version": "22.0.0",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -33,19 +33,19 @@
33
33
  ],
34
34
  "dependencies": {
35
35
  "@polymer/polymer": "^3.0.0",
36
- "@vaadin/component-base": "22.0.0-alpha9",
37
- "@vaadin/custom-field": "22.0.0-alpha9",
38
- "@vaadin/date-picker": "22.0.0-alpha9",
39
- "@vaadin/field-base": "22.0.0-alpha9",
40
- "@vaadin/time-picker": "22.0.0-alpha9",
41
- "@vaadin/vaadin-lumo-styles": "22.0.0-alpha9",
42
- "@vaadin/vaadin-material-styles": "22.0.0-alpha9",
43
- "@vaadin/vaadin-themable-mixin": "22.0.0-alpha9"
36
+ "@vaadin/component-base": "^22.0.0",
37
+ "@vaadin/custom-field": "^22.0.0",
38
+ "@vaadin/date-picker": "^22.0.0",
39
+ "@vaadin/field-base": "^22.0.0",
40
+ "@vaadin/time-picker": "^22.0.0",
41
+ "@vaadin/vaadin-lumo-styles": "^22.0.0",
42
+ "@vaadin/vaadin-material-styles": "^22.0.0",
43
+ "@vaadin/vaadin-themable-mixin": "^22.0.0"
44
44
  },
45
45
  "devDependencies": {
46
46
  "@esm-bundle/chai": "^4.3.4",
47
- "@vaadin/testing-helpers": "^0.3.0",
47
+ "@vaadin/testing-helpers": "^0.3.2",
48
48
  "sinon": "^9.2.1"
49
49
  },
50
- "gitHead": "6e8c899dc65918f97e3c0acb2076122c4b2ef274"
50
+ "gitHead": "b668e9b1a975227fbe34beb70d1cd5b03dce2348"
51
51
  }
package/src/vaadin-date-time-picker.d.ts CHANGED
@@ -3,11 +3,11 @@
3
3
  * Copyright (c) 2021 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
- import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
7
6
  import { DisabledMixin } from '@vaadin/component-base/src/disabled-mixin.js';
7
+ import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
8
8
  import { SlotMixin } from '@vaadin/component-base/src/slot-mixin.js';
9
- import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
10
9
  import { DatePickerI18n } from '@vaadin/date-picker/src/vaadin-date-picker.js';
10
+ import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
11
11
  import { TimePickerI18n } from '@vaadin/time-picker/src/vaadin-time-picker.js';
12
12
  import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
13
13
 
@@ -48,19 +48,24 @@ export interface DateTimePickerEventMap extends DateTimePickerCustomEventMap, HT
48
48
  *
49
49
  * The following shadow DOM parts are available for styling:
50
50
  *
51
- * Part name | Description | Theme for Element
52
- * ----------|-------------|------------------
53
- * `date` | Date picker element | vaadin-date-time-picker
54
- * `time` | Time picker element | vaadin-date-time-picker
51
+ * Part name | Description
52
+ * ---------------------|----------------
53
+ * `label` | The slotted label element wrapper
54
+ * `helper-text` | The slotted helper text element wrapper
55
+ * `error-message` | The slotted error message element wrapper
56
+ * `required-indicator` | The `required` state indicator element
55
57
  *
56
58
  * The following state attributes are available for styling:
57
59
  *
58
- * Attribute | Description | Part name
59
- * ----------|-------------|----------
60
- * `disabled` | Set when the element is disabled | :host
61
- * `readonly` | Set when the element is read-only | :host
62
- *
63
- * See [ThemableMixin – Stylable Shadow Parts](https://github.com/vaadin/vaadin-themable-mixin#stylable-shadow-parts)
60
+ * Attribute | Description | Part name
61
+ * --------------------|-------------------------------------------|------------
62
+ * `disabled` | Set when the element is disabled | :host
63
+ * `readonly` | Set when the element is readonly | :host
64
+ * `invalid` | Set when the element is invalid | :host
65
+ * `has-label` | Set when the element has a label | :host
66
+ * `has-value` | Set when the element has a value | :host
67
+ * `has-helper` | Set when the element has helper text | :host
68
+ * `has-error-message` | Set when the element has an error message | :host
64
69
  *
65
70
  * ### Internal components
66
71
  *
@@ -73,6 +78,8 @@ export interface DateTimePickerEventMap extends DateTimePickerCustomEventMap, HT
73
78
  * Note: the `theme` attribute value set on `<vaadin-date-time-picker>` is
74
79
  * propagated to the internal components listed above.
75
80
  *
81
+ * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
82
+ *
76
83
  * @fires {Event} change - Fired when the user commits a value change.
77
84
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
78
85
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
package/src/vaadin-date-time-picker.js CHANGED
@@ -3,17 +3,16 @@
3
3
  * Copyright (c) 2021 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
- import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
7
- import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
6
+ import './vaadin-date-time-picker-date-picker.js';
7
+ import './vaadin-date-time-picker-time-picker.js';
8
+ import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
8
9
  import { DisabledMixin } from '@vaadin/component-base/src/disabled-mixin.js';
10
+ import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
9
11
  import { SlotMixin } from '@vaadin/component-base/src/slot-mixin.js';
12
+ import { dateEquals } from '@vaadin/date-picker/src/vaadin-date-picker-helper.js';
10
13
  import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
11
14
  import { inputFieldShared } from '@vaadin/field-base/src/styles/input-field-shared-styles.js';
12
- import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
13
- import { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
14
- import { dateEquals } from '@vaadin/date-picker/src/vaadin-date-picker-helper.js';
15
- import './vaadin-date-time-picker-date-picker.js';
16
- import './vaadin-date-time-picker-time-picker.js';
15
+ import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
17
16
 
18
17
  registerStyles('vaadin-date-time-picker', inputFieldShared, { moduleId: 'vaadin-date-time-picker' });
19
18
 
@@ -59,19 +58,24 @@ const timePickerI18nProps = Object.keys(timePickerI18nDefaults);
59
58
  *
60
59
  * The following shadow DOM parts are available for styling:
61
60
  *
62
- * Part name | Description | Theme for Element
63
- * ----------|-------------|------------------
64
- * `date` | Date picker element | vaadin-date-time-picker
65
- * `time` | Time picker element | vaadin-date-time-picker
61
+ * Part name | Description
62
+ * ---------------------|----------------
63
+ * `label` | The slotted label element wrapper
64
+ * `helper-text` | The slotted helper text element wrapper
65
+ * `error-message` | The slotted error message element wrapper
66
+ * `required-indicator` | The `required` state indicator element
66
67
  *
67
68
  * The following state attributes are available for styling:
68
69
  *
69
- * Attribute | Description | Part name
70
- * ----------|-------------|----------
71
- * `disabled` | Set when the element is disabled | :host
72
- * `readonly` | Set when the element is read-only | :host
73
- *
74
- * See [ThemableMixin – Stylable Shadow Parts](https://github.com/vaadin/vaadin-themable-mixin#stylable-shadow-parts)
70
+ * Attribute | Description | Part name
71
+ * --------------------|-------------------------------------------|------------
72
+ * `disabled` | Set when the element is disabled | :host
73
+ * `readonly` | Set when the element is readonly | :host
74
+ * `invalid` | Set when the element is invalid | :host
75
+ * `has-label` | Set when the element has a label | :host
76
+ * `has-value` | Set when the element has a value | :host
77
+ * `has-helper` | Set when the element has helper text | :host
78
+ * `has-error-message` | Set when the element has an error message | :host
75
79
  *
76
80
  * ### Internal components
77
81
  *
@@ -84,6 +88,8 @@ const timePickerI18nProps = Object.keys(timePickerI18nDefaults);
84
88
  * Note: the `theme` attribute value set on `<vaadin-date-time-picker>` is
85
89
  * propagated to the internal components listed above.
86
90
  *
91
+ * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
92
+ *
87
93
  * @fires {Event} change - Fired when the user commits a value change.
88
94
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
89
95
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
@@ -393,6 +399,10 @@ class DateTimePicker extends FieldMixin(SlotMixin(DisabledMixin(ThemableMixin(El
393
399
  if (this.autofocus && !this.disabled) {
394
400
  window.requestAnimationFrame(() => this.focus());
395
401
  }
402
+
403
+ this.setAttribute('role', 'group');
404
+
405
+ this.ariaTarget = this;
396
406
  }
397
407
 
398
408
  /** @private */
package/theme/lumo/vaadin-date-time-picker-styles.js CHANGED
@@ -1,9 +1,9 @@
1
- import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
2
- import { helper } from '@vaadin/vaadin-lumo-styles/mixins/helper.js';
3
- import { requiredField } from '@vaadin/vaadin-lumo-styles/mixins/required-field.js';
4
- import { customField } from '@vaadin/custom-field/theme/lumo/vaadin-custom-field-styles.js';
5
1
  import '@vaadin/date-picker/theme/lumo/vaadin-date-picker.js';
6
2
  import '@vaadin/time-picker/theme/lumo/vaadin-time-picker.js';
3
+ import { customField } from '@vaadin/custom-field/theme/lumo/vaadin-custom-field-styles.js';
4
+ import { helper } from '@vaadin/vaadin-lumo-styles/mixins/helper.js';
5
+ import { requiredField } from '@vaadin/vaadin-lumo-styles/mixins/required-field.js';
6
+ import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
7
7
 
8
8
  registerStyles('vaadin-date-time-picker', [requiredField, helper, customField], {
9
9
  moduleId: 'lumo-date-time-picker'
package/theme/material/vaadin-date-time-picker-styles.js CHANGED
@@ -1,9 +1,9 @@
1
- import { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
2
- import { helper } from '@vaadin/vaadin-material-styles/mixins/helper.js';
3
- import { requiredField } from '@vaadin/vaadin-material-styles/mixins/required-field.js';
4
- import { customField } from '@vaadin/custom-field/theme/material/vaadin-custom-field-styles.js';
5
1
  import '@vaadin/date-picker/theme/material/vaadin-date-picker.js';
6
2
  import '@vaadin/time-picker/theme/material/vaadin-time-picker.js';
3
+ import { customField } from '@vaadin/custom-field/theme/material/vaadin-custom-field-styles.js';
4
+ import { helper } from '@vaadin/vaadin-material-styles/mixins/helper.js';
5
+ import { requiredField } from '@vaadin/vaadin-material-styles/mixins/required-field.js';
6
+ import { registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
7
7
 
8
8
  registerStyles('vaadin-date-time-picker', [requiredField, helper, customField], {
9
9
  moduleId: 'material-date-time-picker'