@vaadin/custom-field 23.2.0-alpha2 → 23.2.0-alpha5

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 (5) hide show
  1. package/package.json +26 -20
  2. package/src/vaadin-custom-field.d.ts +10 -2
  3. package/src/vaadin-custom-field.js +4 -1
  4. package/web-types.json +210 -0
  5. package/web-types.lit.json +104 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/custom-field",
3
- "version": "23.2.0-alpha2",
3
+ "version": "23.2.0-alpha5",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -23,7 +23,9 @@
23
23
  "src",
24
24
  "theme",
25
25
  "vaadin-*.d.ts",
26
- "vaadin-*.js"
26
+ "vaadin-*.js",
27
+ "web-types.json",
28
+ "web-types.lit.json"
27
29
  ],
28
30
  "keywords": [
29
31
  "Vaadin",
@@ -33,28 +35,32 @@
33
35
  ],
34
36
  "dependencies": {
35
37
  "@polymer/polymer": "^3.0.0",
36
- "@vaadin/component-base": "23.2.0-alpha2",
37
- "@vaadin/field-base": "23.2.0-alpha2",
38
- "@vaadin/vaadin-lumo-styles": "23.2.0-alpha2",
39
- "@vaadin/vaadin-material-styles": "23.2.0-alpha2",
40
- "@vaadin/vaadin-themable-mixin": "23.2.0-alpha2"
38
+ "@vaadin/component-base": "23.2.0-alpha5",
39
+ "@vaadin/field-base": "23.2.0-alpha5",
40
+ "@vaadin/vaadin-lumo-styles": "23.2.0-alpha5",
41
+ "@vaadin/vaadin-material-styles": "23.2.0-alpha5",
42
+ "@vaadin/vaadin-themable-mixin": "23.2.0-alpha5"
41
43
  },
42
44
  "devDependencies": {
43
45
  "@esm-bundle/chai": "^4.3.4",
44
- "@vaadin/combo-box": "23.2.0-alpha2",
45
- "@vaadin/date-picker": "23.2.0-alpha2",
46
- "@vaadin/email-field": "23.2.0-alpha2",
47
- "@vaadin/form-layout": "23.2.0-alpha2",
48
- "@vaadin/list-box": "23.2.0-alpha2",
49
- "@vaadin/number-field": "23.2.0-alpha2",
50
- "@vaadin/password-field": "23.2.0-alpha2",
51
- "@vaadin/polymer-legacy-adapter": "23.2.0-alpha2",
52
- "@vaadin/select": "23.2.0-alpha2",
46
+ "@vaadin/combo-box": "23.2.0-alpha5",
47
+ "@vaadin/date-picker": "23.2.0-alpha5",
48
+ "@vaadin/email-field": "23.2.0-alpha5",
49
+ "@vaadin/form-layout": "23.2.0-alpha5",
50
+ "@vaadin/list-box": "23.2.0-alpha5",
51
+ "@vaadin/number-field": "23.2.0-alpha5",
52
+ "@vaadin/password-field": "23.2.0-alpha5",
53
+ "@vaadin/polymer-legacy-adapter": "23.2.0-alpha5",
54
+ "@vaadin/select": "23.2.0-alpha5",
53
55
  "@vaadin/testing-helpers": "^0.3.2",
54
- "@vaadin/text-area": "23.2.0-alpha2",
55
- "@vaadin/text-field": "23.2.0-alpha2",
56
- "@vaadin/time-picker": "23.2.0-alpha2",
56
+ "@vaadin/text-area": "23.2.0-alpha5",
57
+ "@vaadin/text-field": "23.2.0-alpha5",
58
+ "@vaadin/time-picker": "23.2.0-alpha5",
57
59
  "sinon": "^13.0.2"
58
60
  },
59
- "gitHead": "c9b8113d0fa9a602f8b9cb915c1826355af2e8df"
61
+ "web-types": [
62
+ "web-types.json",
63
+ "web-types.lit.json"
64
+ ],
65
+ "gitHead": "c6247fd741d61096d75a71feda4a1faf88b6f0ce"
60
66
  }
package/src/vaadin-custom-field.d.ts CHANGED
@@ -35,6 +35,11 @@ export type CustomFieldInvalidChangedEvent = CustomEvent<{ value: boolean }>;
35
35
  */
36
36
  export type CustomFieldValueChangedEvent = CustomEvent<{ value: string }>;
37
37
 
38
+ /**
39
+ * Fired whenever the field is validated.
40
+ */
41
+ export type CustomFieldValidatedEvent = CustomEvent<{ valid: boolean }>;
42
+
38
43
  /**
39
44
  * Fired on Tab keydown triggered from the internal inputs, meaning focus will not leave the inputs.
40
45
  */
@@ -48,6 +53,8 @@ export interface CustomFieldCustomEventMap {
48
53
  'value-changed': CustomFieldValueChangedEvent;
49
54
 
50
55
  'internal-tab': CustomFieldInternalTabEvent;
56
+
57
+ validated: CustomFieldValidatedEvent;
51
58
  }
52
59
 
53
60
  export interface CustomFieldEventMap extends HTMLElementEventMap, CustomFieldCustomEventMap {
@@ -93,6 +100,7 @@ export interface CustomFieldEventMap extends HTMLElementEventMap, CustomFieldCus
93
100
  * @fires {Event} internal-tab - Fired on Tab keydown triggered from the internal inputs, meaning focus will not leave the inputs.
94
101
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
95
102
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
103
+ * @fires {CustomEvent} validated - Fired whenever the field is validated.
96
104
  */
97
105
  declare class CustomField extends FieldMixin(FocusMixin(ThemableMixin(ElementMixin(HTMLElement)))) {
98
106
  /**
@@ -153,13 +161,13 @@ declare class CustomField extends FieldMixin(FocusMixin(ThemableMixin(ElementMix
153
161
  addEventListener<K extends keyof CustomFieldEventMap>(
154
162
  type: K,
155
163
  listener: (this: CustomField, ev: CustomFieldEventMap[K]) => void,
156
- options?: boolean | AddEventListenerOptions,
164
+ options?: AddEventListenerOptions | boolean,
157
165
  ): void;
158
166
 
159
167
  removeEventListener<K extends keyof CustomFieldEventMap>(
160
168
  type: K,
161
169
  listener: (this: CustomField, ev: CustomFieldEventMap[K]) => void,
162
- options?: boolean | EventListenerOptions,
170
+ options?: EventListenerOptions | boolean,
163
171
  ): void;
164
172
  }
165
173
 
package/src/vaadin-custom-field.js CHANGED
@@ -50,6 +50,7 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
50
50
  * @fires {Event} internal-tab - Fired on Tab keydown triggered from the internal inputs, meaning focus will not leave the inputs.
51
51
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
52
52
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
53
+ * @fires {CustomEvent} validated - Fired whenever the field is validated.
53
54
  *
54
55
  * @extends HTMLElement
55
56
  * @mixes FieldMixin
@@ -374,7 +375,9 @@ class CustomField extends FieldMixin(FocusMixin(ThemableMixin(ElementMixin(Polym
374
375
  return;
375
376
  }
376
377
 
377
- this.inputs.forEach((input, id) => (input.value = valuesArray[id]));
378
+ this.inputs.forEach((input, id) => {
379
+ input.value = valuesArray[id];
380
+ });
378
381
  if (oldValue !== undefined) {
379
382
  this.validate();
380
383
  }
package/web-types.json ADDED
@@ -0,0 +1,210 @@
1
+ {
2
+ "$schema": "https://json.schemastore.org/web-types",
3
+ "name": "@vaadin/custom-field",
4
+ "version": "23.2.0-alpha5",
5
+ "description-markup": "markdown",
6
+ "contributions": {
7
+ "html": {
8
+ "elements": [
9
+ {
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`disabled` | Set when the element is disabled | :host\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\nSee [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.",
12
+ "attributes": [
13
+ {
14
+ "name": "label",
15
+ "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
16
+ "value": {
17
+ "type": [
18
+ "string",
19
+ "null",
20
+ "undefined"
21
+ ]
22
+ }
23
+ },
24
+ {
25
+ "name": "invalid",
26
+ "description": "Set to true when the field is invalid.",
27
+ "value": {
28
+ "type": [
29
+ "boolean",
30
+ "null",
31
+ "undefined"
32
+ ]
33
+ }
34
+ },
35
+ {
36
+ "name": "required",
37
+ "description": "Specifies that the user must fill in a value.",
38
+ "value": {
39
+ "type": [
40
+ "boolean",
41
+ "null",
42
+ "undefined"
43
+ ]
44
+ }
45
+ },
46
+ {
47
+ "name": "error-message",
48
+ "description": "Error to show when the field is invalid.",
49
+ "value": {
50
+ "type": [
51
+ "string",
52
+ "null",
53
+ "undefined"
54
+ ]
55
+ }
56
+ },
57
+ {
58
+ "name": "helper-text",
59
+ "description": "String used for the helper text.",
60
+ "value": {
61
+ "type": [
62
+ "string",
63
+ "null",
64
+ "undefined"
65
+ ]
66
+ }
67
+ },
68
+ {
69
+ "name": "name",
70
+ "description": "The name of the control, which is submitted with the form data.",
71
+ "value": {
72
+ "type": [
73
+ "string",
74
+ "null",
75
+ "undefined"
76
+ ]
77
+ }
78
+ },
79
+ {
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.2.0-alpha5/#/elements/vaadin-custom-field#property-i18n)\nproperty to customize this behavior.",
82
+ "value": {
83
+ "type": [
84
+ "string",
85
+ "null",
86
+ "undefined"
87
+ ]
88
+ }
89
+ },
90
+ {
91
+ "name": "theme",
92
+ "description": "The theme variants to apply to the component.",
93
+ "value": {
94
+ "type": [
95
+ "string",
96
+ "null",
97
+ "undefined"
98
+ ]
99
+ }
100
+ }
101
+ ],
102
+ "js": {
103
+ "properties": [
104
+ {
105
+ "name": "label",
106
+ "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
107
+ "value": {
108
+ "type": [
109
+ "string",
110
+ "null",
111
+ "undefined"
112
+ ]
113
+ }
114
+ },
115
+ {
116
+ "name": "invalid",
117
+ "description": "Set to true when the field is invalid.",
118
+ "value": {
119
+ "type": [
120
+ "boolean",
121
+ "null",
122
+ "undefined"
123
+ ]
124
+ }
125
+ },
126
+ {
127
+ "name": "required",
128
+ "description": "Specifies that the user must fill in a value.",
129
+ "value": {
130
+ "type": [
131
+ "boolean",
132
+ "null",
133
+ "undefined"
134
+ ]
135
+ }
136
+ },
137
+ {
138
+ "name": "errorMessage",
139
+ "description": "Error to show when the field is invalid.",
140
+ "value": {
141
+ "type": [
142
+ "string",
143
+ "null",
144
+ "undefined"
145
+ ]
146
+ }
147
+ },
148
+ {
149
+ "name": "helperText",
150
+ "description": "String used for the helper text.",
151
+ "value": {
152
+ "type": [
153
+ "string",
154
+ "null",
155
+ "undefined"
156
+ ]
157
+ }
158
+ },
159
+ {
160
+ "name": "name",
161
+ "description": "The name of the control, which is submitted with the form data.",
162
+ "value": {
163
+ "type": [
164
+ "string",
165
+ "null",
166
+ "undefined"
167
+ ]
168
+ }
169
+ },
170
+ {
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.2.0-alpha5/#/elements/vaadin-custom-field#property-i18n)\nproperty to customize this behavior.",
173
+ "value": {
174
+ "type": [
175
+ "string",
176
+ "null",
177
+ "undefined"
178
+ ]
179
+ }
180
+ },
181
+ {
182
+ "name": "i18n",
183
+ "description": "The object used to localize this component.\nTo change the default localization, replace the entire\n_i18n_ object or just the property you want to modify.\n\nThe object has the following JSON structure:\n\n```\n{\n // A function to format given `Array` as\n // component value. Array is list of all internal values\n // in the order of their presence in the DOM\n // This function is called each time the internal input\n // value is changed.\n formatValue: inputValues => {\n // returns a representation of the given array of values\n // in the form of string with delimiter characters\n },\n\n // A function to parse the given value to an `Array` in the format\n // of the list of all internal values\n // in the order of their presence in the DOM\n // This function is called when value of the\n // custom field is set.\n parseValue: value => {\n // returns the array of values from parsed value string.\n }\n}\n```",
184
+ "value": {
185
+ "type": [
186
+ "CustomFieldI18n"
187
+ ]
188
+ }
189
+ }
190
+ ],
191
+ "events": [
192
+ {
193
+ "name": "validated",
194
+ "description": "Fired whenever the field is validated."
195
+ },
196
+ {
197
+ "name": "change",
198
+ "description": "Fired when the user commits a value change for any of the internal inputs."
199
+ },
200
+ {
201
+ "name": "value-changed",
202
+ "description": "Fired when the `value` property changes."
203
+ }
204
+ ]
205
+ }
206
+ }
207
+ ]
208
+ }
209
+ }
210
+ }
package/web-types.lit.json ADDED
@@ -0,0 +1,104 @@
1
+ {
2
+ "$schema": "https://json.schemastore.org/web-types",
3
+ "name": "@vaadin/custom-field",
4
+ "version": "23.2.0-alpha5",
5
+ "description-markup": "markdown",
6
+ "framework": "lit",
7
+ "framework-config": {
8
+ "enable-when": {
9
+ "node-packages": [
10
+ "lit"
11
+ ]
12
+ }
13
+ },
14
+ "contributions": {
15
+ "html": {
16
+ "elements": [
17
+ {
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`disabled` | Set when the element is disabled | :host\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\nSee [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.",
20
+ "extension": true,
21
+ "attributes": [
22
+ {
23
+ "name": "?invalid",
24
+ "description": "Set to true when the field is invalid.",
25
+ "value": {
26
+ "kind": "expression"
27
+ }
28
+ },
29
+ {
30
+ "name": "?required",
31
+ "description": "Specifies that the user must fill in a value.",
32
+ "value": {
33
+ "kind": "expression"
34
+ }
35
+ },
36
+ {
37
+ "name": ".label",
38
+ "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
39
+ "value": {
40
+ "kind": "expression"
41
+ }
42
+ },
43
+ {
44
+ "name": ".errorMessage",
45
+ "description": "Error to show when the field is invalid.",
46
+ "value": {
47
+ "kind": "expression"
48
+ }
49
+ },
50
+ {
51
+ "name": ".helperText",
52
+ "description": "String used for the helper text.",
53
+ "value": {
54
+ "kind": "expression"
55
+ }
56
+ },
57
+ {
58
+ "name": ".name",
59
+ "description": "The name of the control, which is submitted with the form data.",
60
+ "value": {
61
+ "kind": "expression"
62
+ }
63
+ },
64
+ {
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.2.0-alpha5/#/elements/vaadin-custom-field#property-i18n)\nproperty to customize this behavior.",
67
+ "value": {
68
+ "kind": "expression"
69
+ }
70
+ },
71
+ {
72
+ "name": ".i18n",
73
+ "description": "The object used to localize this component.\nTo change the default localization, replace the entire\n_i18n_ object or just the property you want to modify.\n\nThe object has the following JSON structure:\n\n```\n{\n // A function to format given `Array` as\n // component value. Array is list of all internal values\n // in the order of their presence in the DOM\n // This function is called each time the internal input\n // value is changed.\n formatValue: inputValues => {\n // returns a representation of the given array of values\n // in the form of string with delimiter characters\n },\n\n // A function to parse the given value to an `Array` in the format\n // of the list of all internal values\n // in the order of their presence in the DOM\n // This function is called when value of the\n // custom field is set.\n parseValue: value => {\n // returns the array of values from parsed value string.\n }\n}\n```",
74
+ "value": {
75
+ "kind": "expression"
76
+ }
77
+ },
78
+ {
79
+ "name": "@validated",
80
+ "description": "Fired whenever the field is validated.",
81
+ "value": {
82
+ "kind": "expression"
83
+ }
84
+ },
85
+ {
86
+ "name": "@change",
87
+ "description": "Fired when the user commits a value change for any of the internal inputs.",
88
+ "value": {
89
+ "kind": "expression"
90
+ }
91
+ },
92
+ {
93
+ "name": "@value-changed",
94
+ "description": "Fired when the `value` property changes.",
95
+ "value": {
96
+ "kind": "expression"
97
+ }
98
+ }
99
+ ]
100
+ }
101
+ ]
102
+ }
103
+ }
104
+ }