@vaadin/custom-field 23.2.0 → 23.3.0-alpha1
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 +19 -19
- package/src/vaadin-custom-field.d.ts +3 -6
- package/src/vaadin-custom-field.js +13 -1
- package/web-types.json +8 -4
- package/web-types.lit.json +10 -3
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/custom-field",
|
|
3
|
-
"version": "23.
|
|
3
|
+
"version": "23.3.0-alpha1",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -35,32 +35,32 @@
|
|
|
35
35
|
],
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@polymer/polymer": "^3.0.0",
|
|
38
|
-
"@vaadin/component-base": "
|
|
39
|
-
"@vaadin/field-base": "
|
|
40
|
-
"@vaadin/vaadin-lumo-styles": "
|
|
41
|
-
"@vaadin/vaadin-material-styles": "
|
|
42
|
-
"@vaadin/vaadin-themable-mixin": "
|
|
38
|
+
"@vaadin/component-base": "23.3.0-alpha1",
|
|
39
|
+
"@vaadin/field-base": "23.3.0-alpha1",
|
|
40
|
+
"@vaadin/vaadin-lumo-styles": "23.3.0-alpha1",
|
|
41
|
+
"@vaadin/vaadin-material-styles": "23.3.0-alpha1",
|
|
42
|
+
"@vaadin/vaadin-themable-mixin": "23.3.0-alpha1"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"@esm-bundle/chai": "^4.3.4",
|
|
46
|
-
"@vaadin/combo-box": "
|
|
47
|
-
"@vaadin/date-picker": "
|
|
48
|
-
"@vaadin/email-field": "
|
|
49
|
-
"@vaadin/form-layout": "
|
|
50
|
-
"@vaadin/list-box": "
|
|
51
|
-
"@vaadin/number-field": "
|
|
52
|
-
"@vaadin/password-field": "
|
|
53
|
-
"@vaadin/polymer-legacy-adapter": "
|
|
54
|
-
"@vaadin/select": "
|
|
46
|
+
"@vaadin/combo-box": "23.3.0-alpha1",
|
|
47
|
+
"@vaadin/date-picker": "23.3.0-alpha1",
|
|
48
|
+
"@vaadin/email-field": "23.3.0-alpha1",
|
|
49
|
+
"@vaadin/form-layout": "23.3.0-alpha1",
|
|
50
|
+
"@vaadin/list-box": "23.3.0-alpha1",
|
|
51
|
+
"@vaadin/number-field": "23.3.0-alpha1",
|
|
52
|
+
"@vaadin/password-field": "23.3.0-alpha1",
|
|
53
|
+
"@vaadin/polymer-legacy-adapter": "23.3.0-alpha1",
|
|
54
|
+
"@vaadin/select": "23.3.0-alpha1",
|
|
55
55
|
"@vaadin/testing-helpers": "^0.3.2",
|
|
56
|
-
"@vaadin/text-area": "
|
|
57
|
-
"@vaadin/text-field": "
|
|
58
|
-
"@vaadin/time-picker": "
|
|
56
|
+
"@vaadin/text-area": "23.3.0-alpha1",
|
|
57
|
+
"@vaadin/text-field": "23.3.0-alpha1",
|
|
58
|
+
"@vaadin/time-picker": "23.3.0-alpha1",
|
|
59
59
|
"sinon": "^13.0.2"
|
|
60
60
|
},
|
|
61
61
|
"web-types": [
|
|
62
62
|
"web-types.json",
|
|
63
63
|
"web-types.lit.json"
|
|
64
64
|
],
|
|
65
|
-
"gitHead": "
|
|
65
|
+
"gitHead": "beabc527d4b1274eb798ff701d406fed45cfe638"
|
|
66
66
|
}
|
|
@@ -87,7 +87,6 @@ export interface CustomFieldEventMap extends HTMLElementEventMap, CustomFieldCus
|
|
|
87
87
|
*
|
|
88
88
|
* Attribute | Description | Part name
|
|
89
89
|
* --------------------|-------------------------------------------|------------
|
|
90
|
-
* `disabled` | Set when the element is disabled | :host
|
|
91
90
|
* `invalid` | Set when the element is invalid | :host
|
|
92
91
|
* `focused` | Set when the element is focused | :host
|
|
93
92
|
* `has-label` | Set when the element has a label | :host
|
|
@@ -95,6 +94,9 @@ export interface CustomFieldEventMap extends HTMLElementEventMap, CustomFieldCus
|
|
|
95
94
|
* `has-helper` | Set when the element has helper text | :host
|
|
96
95
|
* `has-error-message` | Set when the element has an error message | :host
|
|
97
96
|
*
|
|
97
|
+
* You may also manually set `disabled` or `readonly` attribute on this component to make the label
|
|
98
|
+
* part look visually the same as on a `<vaadin-text-field>` when it is disabled or readonly.
|
|
99
|
+
*
|
|
98
100
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
|
|
99
101
|
*
|
|
100
102
|
* @fires {Event} change - Fired when the user commits a value change for any of the internal inputs.
|
|
@@ -154,11 +156,6 @@ declare class CustomField extends FieldMixin(FocusMixin(KeyboardMixin(ThemableMi
|
|
|
154
156
|
*/
|
|
155
157
|
value: string | null | undefined;
|
|
156
158
|
|
|
157
|
-
/**
|
|
158
|
-
* Returns true if the current inputs values satisfy all constraints (if any).
|
|
159
|
-
*/
|
|
160
|
-
checkValidity(): boolean;
|
|
161
|
-
|
|
162
159
|
addEventListener<K extends keyof CustomFieldEventMap>(
|
|
163
160
|
type: K,
|
|
164
161
|
listener: (this: CustomField, ev: CustomFieldEventMap[K]) => void,
|
|
@@ -8,6 +8,7 @@ import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
|
|
|
8
8
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
9
9
|
import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
|
|
10
10
|
import { KeyboardMixin } from '@vaadin/component-base/src/keyboard-mixin.js';
|
|
11
|
+
import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
|
|
11
12
|
import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
|
|
12
13
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
13
14
|
|
|
@@ -36,7 +37,6 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
|
|
|
36
37
|
*
|
|
37
38
|
* Attribute | Description | Part name
|
|
38
39
|
* --------------------|-------------------------------------------|------------
|
|
39
|
-
* `disabled` | Set when the element is disabled | :host
|
|
40
40
|
* `invalid` | Set when the element is invalid | :host
|
|
41
41
|
* `focused` | Set when the element is focused | :host
|
|
42
42
|
* `has-label` | Set when the element has a label | :host
|
|
@@ -44,6 +44,9 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
|
|
|
44
44
|
* `has-helper` | Set when the element has helper text | :host
|
|
45
45
|
* `has-error-message` | Set when the element has an error message | :host
|
|
46
46
|
*
|
|
47
|
+
* You may also manually set `disabled` or `readonly` attribute on this component to make the label
|
|
48
|
+
* part look visually the same as on a `<vaadin-text-field>` when it is disabled or readonly.
|
|
49
|
+
*
|
|
47
50
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
|
|
48
51
|
*
|
|
49
52
|
* @fires {Event} change - Fired when the user commits a value change for any of the internal inputs.
|
|
@@ -112,6 +115,8 @@ class CustomField extends FieldMixin(FocusMixin(KeyboardMixin(ThemableMixin(Elem
|
|
|
112
115
|
<slot name="error-message"></slot>
|
|
113
116
|
</div>
|
|
114
117
|
</div>
|
|
118
|
+
|
|
119
|
+
<slot name="tooltip"></slot>
|
|
115
120
|
`;
|
|
116
121
|
}
|
|
117
122
|
|
|
@@ -222,6 +227,13 @@ class CustomField extends FieldMixin(FocusMixin(KeyboardMixin(ThemableMixin(Elem
|
|
|
222
227
|
this.__observer = new FlattenedNodesObserver(this.$.slot, () => {
|
|
223
228
|
this.__setInputsFromSlot();
|
|
224
229
|
});
|
|
230
|
+
|
|
231
|
+
this._tooltipController = new TooltipController(this);
|
|
232
|
+
this.addController(this._tooltipController);
|
|
233
|
+
this._tooltipController.setShouldShow((target) => {
|
|
234
|
+
const inputs = target.inputs || [];
|
|
235
|
+
return !inputs.some((el) => el.opened);
|
|
236
|
+
});
|
|
225
237
|
}
|
|
226
238
|
|
|
227
239
|
/** @protected */
|
package/web-types.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/custom-field",
|
|
4
|
-
"version": "23.
|
|
4
|
+
"version": "23.3.0-alpha1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
9
|
{
|
|
10
10
|
"name": "vaadin-custom-field",
|
|
11
|
-
"description": "`<vaadin-custom-field>` is a web component for wrapping multiple components as a single field.\n\n```\n<vaadin-custom-field label=\"Appointment time\">\n <vaadin-date-picker></vaadin-date-picker>\n <vaadin-time-picker></vaadin-time-picker>\n</vaadin-custom-field>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The slotted label element wrapper\n`helper-text` | The slotted helper text element wrapper\n`error-message` | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n--------------------|-------------------------------------------|------------\n`
|
|
11
|
+
"description": "`<vaadin-custom-field>` is a web component for wrapping multiple components as a single field.\n\n```\n<vaadin-custom-field label=\"Appointment time\">\n <vaadin-date-picker></vaadin-date-picker>\n <vaadin-time-picker></vaadin-time-picker>\n</vaadin-custom-field>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The slotted label element wrapper\n`helper-text` | The slotted helper text element wrapper\n`error-message` | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n--------------------|-------------------------------------------|------------\n`invalid` | Set when the element is invalid | :host\n`focused` | Set when the element is focused | :host\n`has-label` | Set when the element has a label | :host\n`has-value` | Set when the element has a value | :host\n`has-helper` | Set when the element has helper text | :host\n`has-error-message` | Set when the element has an error message | :host\n\nYou may also manually set `disabled` or `readonly` attribute on this component to make the label\npart look visually the same as on a `<vaadin-text-field>` when it is disabled or readonly.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "label",
|
|
@@ -78,7 +78,7 @@
|
|
|
78
78
|
},
|
|
79
79
|
{
|
|
80
80
|
"name": "value",
|
|
81
|
-
"description": "The value of the field. When wrapping several inputs, it will contain `\\t`\n(Tab character) as a delimiter indicating parts intended to be used as the\ncorresponding inputs values. Use the [`i18n`](https://cdn.vaadin.com/vaadin-web-components/23.
|
|
81
|
+
"description": "The value of the field. When wrapping several inputs, it will contain `\\t`\n(Tab character) as a delimiter indicating parts intended to be used as the\ncorresponding inputs values. Use the [`i18n`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha1/#/elements/vaadin-custom-field#property-i18n)\nproperty to customize this behavior.",
|
|
82
82
|
"value": {
|
|
83
83
|
"type": [
|
|
84
84
|
"string",
|
|
@@ -169,7 +169,7 @@
|
|
|
169
169
|
},
|
|
170
170
|
{
|
|
171
171
|
"name": "value",
|
|
172
|
-
"description": "The value of the field. When wrapping several inputs, it will contain `\\t`\n(Tab character) as a delimiter indicating parts intended to be used as the\ncorresponding inputs values. Use the [`i18n`](https://cdn.vaadin.com/vaadin-web-components/23.
|
|
172
|
+
"description": "The value of the field. When wrapping several inputs, it will contain `\\t`\n(Tab character) as a delimiter indicating parts intended to be used as the\ncorresponding inputs values. Use the [`i18n`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha1/#/elements/vaadin-custom-field#property-i18n)\nproperty to customize this behavior.",
|
|
173
173
|
"value": {
|
|
174
174
|
"type": [
|
|
175
175
|
"string",
|
|
@@ -200,6 +200,10 @@
|
|
|
200
200
|
{
|
|
201
201
|
"name": "value-changed",
|
|
202
202
|
"description": "Fired when the `value` property changes."
|
|
203
|
+
},
|
|
204
|
+
{
|
|
205
|
+
"name": "invalid-changed",
|
|
206
|
+
"description": "Fired when the `invalid` property changes."
|
|
203
207
|
}
|
|
204
208
|
]
|
|
205
209
|
}
|
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/custom-field",
|
|
4
|
-
"version": "23.
|
|
4
|
+
"version": "23.3.0-alpha1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"elements": [
|
|
17
17
|
{
|
|
18
18
|
"name": "vaadin-custom-field",
|
|
19
|
-
"description": "`<vaadin-custom-field>` is a web component for wrapping multiple components as a single field.\n\n```\n<vaadin-custom-field label=\"Appointment time\">\n <vaadin-date-picker></vaadin-date-picker>\n <vaadin-time-picker></vaadin-time-picker>\n</vaadin-custom-field>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The slotted label element wrapper\n`helper-text` | The slotted helper text element wrapper\n`error-message` | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n--------------------|-------------------------------------------|------------\n`
|
|
19
|
+
"description": "`<vaadin-custom-field>` is a web component for wrapping multiple components as a single field.\n\n```\n<vaadin-custom-field label=\"Appointment time\">\n <vaadin-date-picker></vaadin-date-picker>\n <vaadin-time-picker></vaadin-time-picker>\n</vaadin-custom-field>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The slotted label element wrapper\n`helper-text` | The slotted helper text element wrapper\n`error-message` | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n--------------------|-------------------------------------------|------------\n`invalid` | Set when the element is invalid | :host\n`focused` | Set when the element is focused | :host\n`has-label` | Set when the element has a label | :host\n`has-value` | Set when the element has a value | :host\n`has-helper` | Set when the element has helper text | :host\n`has-error-message` | Set when the element has an error message | :host\n\nYou may also manually set `disabled` or `readonly` attribute on this component to make the label\npart look visually the same as on a `<vaadin-text-field>` when it is disabled or readonly.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
},
|
|
64
64
|
{
|
|
65
65
|
"name": ".value",
|
|
66
|
-
"description": "The value of the field. When wrapping several inputs, it will contain `\\t`\n(Tab character) as a delimiter indicating parts intended to be used as the\ncorresponding inputs values. Use the [`i18n`](https://cdn.vaadin.com/vaadin-web-components/23.
|
|
66
|
+
"description": "The value of the field. When wrapping several inputs, it will contain `\\t`\n(Tab character) as a delimiter indicating parts intended to be used as the\ncorresponding inputs values. Use the [`i18n`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha1/#/elements/vaadin-custom-field#property-i18n)\nproperty to customize this behavior.",
|
|
67
67
|
"value": {
|
|
68
68
|
"kind": "expression"
|
|
69
69
|
}
|
|
@@ -95,6 +95,13 @@
|
|
|
95
95
|
"value": {
|
|
96
96
|
"kind": "expression"
|
|
97
97
|
}
|
|
98
|
+
},
|
|
99
|
+
{
|
|
100
|
+
"name": "@invalid-changed",
|
|
101
|
+
"description": "Fired when the `invalid` property changes.",
|
|
102
|
+
"value": {
|
|
103
|
+
"kind": "expression"
|
|
104
|
+
}
|
|
98
105
|
}
|
|
99
106
|
]
|
|
100
107
|
}
|