@vaadin/custom-field 25.1.0-alpha6 → 25.1.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/custom-elements.json +606 -0
- package/package.json +22 -20
- package/src/vaadin-custom-field.js +1 -1
- package/web-types.json +3 -3
- package/web-types.lit.json +2 -2
|
@@ -0,0 +1,606 @@
|
|
|
1
|
+
{
|
|
2
|
+
"schemaVersion": "1.0.0",
|
|
3
|
+
"readme": "",
|
|
4
|
+
"modules": [
|
|
5
|
+
{
|
|
6
|
+
"kind": "javascript-module",
|
|
7
|
+
"path": "vaadin-custom-field.js",
|
|
8
|
+
"declarations": [],
|
|
9
|
+
"exports": [
|
|
10
|
+
{
|
|
11
|
+
"kind": "js",
|
|
12
|
+
"name": "*",
|
|
13
|
+
"declaration": {
|
|
14
|
+
"name": "*",
|
|
15
|
+
"module": "src/vaadin-custom-field.js"
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
]
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
"kind": "javascript-module",
|
|
22
|
+
"path": "src/vaadin-custom-field-mixin.js",
|
|
23
|
+
"declarations": [
|
|
24
|
+
{
|
|
25
|
+
"kind": "mixin",
|
|
26
|
+
"description": "",
|
|
27
|
+
"name": "CustomFieldMixin",
|
|
28
|
+
"members": [
|
|
29
|
+
{
|
|
30
|
+
"kind": "field",
|
|
31
|
+
"name": "accessibleName",
|
|
32
|
+
"privacy": "public",
|
|
33
|
+
"type": {
|
|
34
|
+
"text": "string"
|
|
35
|
+
},
|
|
36
|
+
"description": "String used to label the component to screen reader users.",
|
|
37
|
+
"attribute": "accessible-name",
|
|
38
|
+
"inheritedFrom": {
|
|
39
|
+
"name": "FieldMixin",
|
|
40
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"kind": "field",
|
|
45
|
+
"name": "accessibleNameRef",
|
|
46
|
+
"privacy": "public",
|
|
47
|
+
"type": {
|
|
48
|
+
"text": "string"
|
|
49
|
+
},
|
|
50
|
+
"description": "Id of the element used as label of the component to screen reader users.",
|
|
51
|
+
"attribute": "accessible-name-ref",
|
|
52
|
+
"inheritedFrom": {
|
|
53
|
+
"name": "FieldMixin",
|
|
54
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"kind": "method",
|
|
59
|
+
"name": "checkValidity",
|
|
60
|
+
"description": "Returns true if the current inputs values satisfy all constraints (if any).",
|
|
61
|
+
"return": {
|
|
62
|
+
"type": {
|
|
63
|
+
"text": "boolean"
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"kind": "field",
|
|
69
|
+
"name": "errorMessage",
|
|
70
|
+
"privacy": "public",
|
|
71
|
+
"type": {
|
|
72
|
+
"text": "string"
|
|
73
|
+
},
|
|
74
|
+
"description": "Error to show when the field is invalid.",
|
|
75
|
+
"attribute": "error-message",
|
|
76
|
+
"inheritedFrom": {
|
|
77
|
+
"name": "FieldMixin",
|
|
78
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
79
|
+
}
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
"kind": "field",
|
|
83
|
+
"name": "formatValue",
|
|
84
|
+
"privacy": "public",
|
|
85
|
+
"type": {
|
|
86
|
+
"text": "!CustomFieldFormatValueFn | undefined"
|
|
87
|
+
},
|
|
88
|
+
"description": "A function to format the values of the individual fields contained by\nthe custom field into a single component value. The function receives\nan array of all values of the individual fields in the order of their\npresence in the DOM, and must return a single component value.\nThis function is called each time a value of an internal field is\nchanged.\n\nExample:\n```js\ncustomField.formatValue = (fieldValues) => {\n return fieldValues.join(\"-\");\n}\n```",
|
|
89
|
+
"attribute": "format-value"
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
"kind": "field",
|
|
93
|
+
"name": "helperText",
|
|
94
|
+
"privacy": "public",
|
|
95
|
+
"type": {
|
|
96
|
+
"text": "string"
|
|
97
|
+
},
|
|
98
|
+
"description": "String used for the helper text.",
|
|
99
|
+
"attribute": "helper-text",
|
|
100
|
+
"inheritedFrom": {
|
|
101
|
+
"name": "FieldMixin",
|
|
102
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
103
|
+
}
|
|
104
|
+
},
|
|
105
|
+
{
|
|
106
|
+
"kind": "field",
|
|
107
|
+
"name": "inputs",
|
|
108
|
+
"privacy": "public",
|
|
109
|
+
"type": {
|
|
110
|
+
"text": "!Array<!HTMLElement> | undefined"
|
|
111
|
+
},
|
|
112
|
+
"description": "Array of available input nodes",
|
|
113
|
+
"attribute": "inputs"
|
|
114
|
+
},
|
|
115
|
+
{
|
|
116
|
+
"kind": "field",
|
|
117
|
+
"name": "label",
|
|
118
|
+
"privacy": "public",
|
|
119
|
+
"type": {
|
|
120
|
+
"text": "string"
|
|
121
|
+
},
|
|
122
|
+
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
|
|
123
|
+
"attribute": "label",
|
|
124
|
+
"inheritedFrom": {
|
|
125
|
+
"name": "LabelMixin",
|
|
126
|
+
"package": "@vaadin/field-base/src/label-mixin.js"
|
|
127
|
+
}
|
|
128
|
+
},
|
|
129
|
+
{
|
|
130
|
+
"kind": "field",
|
|
131
|
+
"name": "name",
|
|
132
|
+
"privacy": "public",
|
|
133
|
+
"description": "The name of the control, which is submitted with the form data.",
|
|
134
|
+
"attribute": "name"
|
|
135
|
+
},
|
|
136
|
+
{
|
|
137
|
+
"kind": "field",
|
|
138
|
+
"name": "parseValue",
|
|
139
|
+
"privacy": "public",
|
|
140
|
+
"type": {
|
|
141
|
+
"text": "!CustomFieldParseValueFn | undefined"
|
|
142
|
+
},
|
|
143
|
+
"description": "A function to parse the component value into values for the individual\nfields contained by the custom field. The function receives the\ncomponent value, and must return an array of values for the individual\nfields in the order of their presence in the DOM.\nThe function is called each time the value of the component changes.\n\nExample:\n```js\ncustomField.parseValue = (componentValue) => {\n return componentValue.split(\"-\");\n}\n```",
|
|
144
|
+
"attribute": "parse-value"
|
|
145
|
+
},
|
|
146
|
+
{
|
|
147
|
+
"kind": "field",
|
|
148
|
+
"name": "value",
|
|
149
|
+
"privacy": "public",
|
|
150
|
+
"type": {
|
|
151
|
+
"text": "string"
|
|
152
|
+
},
|
|
153
|
+
"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.\nUse the [`formatValue`](#/elements/vaadin-custom-field#property-formatValue)\nand [`parseValue`](#/elements/vaadin-custom-field#property-parseValue)\nproperties to customize this behavior.",
|
|
154
|
+
"attribute": "value"
|
|
155
|
+
}
|
|
156
|
+
],
|
|
157
|
+
"events": [
|
|
158
|
+
{
|
|
159
|
+
"name": "change",
|
|
160
|
+
"type": {
|
|
161
|
+
"text": "CustomEvent"
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
],
|
|
165
|
+
"attributes": [
|
|
166
|
+
{
|
|
167
|
+
"name": "accessible-name",
|
|
168
|
+
"type": {
|
|
169
|
+
"text": "string"
|
|
170
|
+
},
|
|
171
|
+
"description": "String used to label the component to screen reader users.",
|
|
172
|
+
"fieldName": "accessibleName",
|
|
173
|
+
"inheritedFrom": {
|
|
174
|
+
"name": "FieldMixin",
|
|
175
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
176
|
+
}
|
|
177
|
+
},
|
|
178
|
+
{
|
|
179
|
+
"name": "accessible-name-ref",
|
|
180
|
+
"type": {
|
|
181
|
+
"text": "string"
|
|
182
|
+
},
|
|
183
|
+
"description": "Id of the element used as label of the component to screen reader users.",
|
|
184
|
+
"fieldName": "accessibleNameRef",
|
|
185
|
+
"inheritedFrom": {
|
|
186
|
+
"name": "FieldMixin",
|
|
187
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
188
|
+
}
|
|
189
|
+
},
|
|
190
|
+
{
|
|
191
|
+
"name": "error-message",
|
|
192
|
+
"type": {
|
|
193
|
+
"text": "string"
|
|
194
|
+
},
|
|
195
|
+
"description": "Error to show when the field is invalid.",
|
|
196
|
+
"fieldName": "errorMessage",
|
|
197
|
+
"inheritedFrom": {
|
|
198
|
+
"name": "FieldMixin",
|
|
199
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
200
|
+
}
|
|
201
|
+
},
|
|
202
|
+
{
|
|
203
|
+
"name": "format-value",
|
|
204
|
+
"type": {
|
|
205
|
+
"text": "!CustomFieldFormatValueFn | undefined"
|
|
206
|
+
},
|
|
207
|
+
"description": "A function to format the values of the individual fields contained by\nthe custom field into a single component value. The function receives\nan array of all values of the individual fields in the order of their\npresence in the DOM, and must return a single component value.\nThis function is called each time a value of an internal field is\nchanged.\n\nExample:\n```js\ncustomField.formatValue = (fieldValues) => {\n return fieldValues.join(\"-\");\n}\n```",
|
|
208
|
+
"fieldName": "formatValue"
|
|
209
|
+
},
|
|
210
|
+
{
|
|
211
|
+
"name": "helper-text",
|
|
212
|
+
"type": {
|
|
213
|
+
"text": "string"
|
|
214
|
+
},
|
|
215
|
+
"description": "String used for the helper text.",
|
|
216
|
+
"fieldName": "helperText",
|
|
217
|
+
"inheritedFrom": {
|
|
218
|
+
"name": "FieldMixin",
|
|
219
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
220
|
+
}
|
|
221
|
+
},
|
|
222
|
+
{
|
|
223
|
+
"name": "label",
|
|
224
|
+
"type": {
|
|
225
|
+
"text": "string"
|
|
226
|
+
},
|
|
227
|
+
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
|
|
228
|
+
"fieldName": "label",
|
|
229
|
+
"inheritedFrom": {
|
|
230
|
+
"name": "LabelMixin",
|
|
231
|
+
"package": "@vaadin/field-base/src/label-mixin.js"
|
|
232
|
+
}
|
|
233
|
+
},
|
|
234
|
+
{
|
|
235
|
+
"name": "name",
|
|
236
|
+
"description": "The name of the control, which is submitted with the form data.",
|
|
237
|
+
"fieldName": "name"
|
|
238
|
+
},
|
|
239
|
+
{
|
|
240
|
+
"name": "parse-value",
|
|
241
|
+
"type": {
|
|
242
|
+
"text": "!CustomFieldParseValueFn | undefined"
|
|
243
|
+
},
|
|
244
|
+
"description": "A function to parse the component value into values for the individual\nfields contained by the custom field. The function receives the\ncomponent value, and must return an array of values for the individual\nfields in the order of their presence in the DOM.\nThe function is called each time the value of the component changes.\n\nExample:\n```js\ncustomField.parseValue = (componentValue) => {\n return componentValue.split(\"-\");\n}\n```",
|
|
245
|
+
"fieldName": "parseValue"
|
|
246
|
+
},
|
|
247
|
+
{
|
|
248
|
+
"name": "value",
|
|
249
|
+
"type": {
|
|
250
|
+
"text": "string"
|
|
251
|
+
},
|
|
252
|
+
"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.\nUse the [`formatValue`](#/elements/vaadin-custom-field#property-formatValue)\nand [`parseValue`](#/elements/vaadin-custom-field#property-parseValue)\nproperties to customize this behavior.",
|
|
253
|
+
"fieldName": "value"
|
|
254
|
+
}
|
|
255
|
+
],
|
|
256
|
+
"mixins": [
|
|
257
|
+
{
|
|
258
|
+
"name": "FieldMixin",
|
|
259
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
260
|
+
},
|
|
261
|
+
{
|
|
262
|
+
"name": "FocusMixin",
|
|
263
|
+
"package": "@vaadin/a11y-base/src/focus-mixin.js"
|
|
264
|
+
},
|
|
265
|
+
{
|
|
266
|
+
"name": "KeyboardMixin",
|
|
267
|
+
"package": "@vaadin/a11y-base/src/keyboard-mixin.js"
|
|
268
|
+
}
|
|
269
|
+
],
|
|
270
|
+
"parameters": [
|
|
271
|
+
{
|
|
272
|
+
"name": "superClass"
|
|
273
|
+
}
|
|
274
|
+
]
|
|
275
|
+
}
|
|
276
|
+
],
|
|
277
|
+
"exports": [
|
|
278
|
+
{
|
|
279
|
+
"kind": "js",
|
|
280
|
+
"name": "CustomFieldMixin",
|
|
281
|
+
"declaration": {
|
|
282
|
+
"name": "CustomFieldMixin",
|
|
283
|
+
"module": "src/vaadin-custom-field-mixin.js"
|
|
284
|
+
}
|
|
285
|
+
}
|
|
286
|
+
]
|
|
287
|
+
},
|
|
288
|
+
{
|
|
289
|
+
"kind": "javascript-module",
|
|
290
|
+
"path": "src/vaadin-custom-field.js",
|
|
291
|
+
"declarations": [
|
|
292
|
+
{
|
|
293
|
+
"kind": "class",
|
|
294
|
+
"description": "`<vaadin-custom-field>` is a web component for wrapping multiple components as a single field.\n\n```html\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`input-fields` | The slotted input elements wrapper\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n--------------------|--------------------------------\n`invalid` | Set when the element is invalid\n`focused` | Set when the element is focused\n`has-label` | Set when the element has a label\n`has-value` | Set when the element has a value\n`has-helper` | Set when the element has helper text\n`has-error-message` | Set when the element has an error message\n`has-tooltip` | Set when the element has a slotted tooltip\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\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-input-field-error-color` |\n| `--vaadin-input-field-error-font-size` |\n| `--vaadin-input-field-error-font-weight` |\n| `--vaadin-input-field-error-line-height` |\n| `--vaadin-input-field-label-color` |\n| `--vaadin-input-field-label-font-size` |\n| `--vaadin-input-field-label-font-weight` |\n| `--vaadin-input-field-label-line-height` |\n| `--vaadin-input-field-helper-color` |\n| `--vaadin-input-field-helper-font-size` |\n| `--vaadin-input-field-helper-font-weight` |\n| `--vaadin-input-field-helper-line-height` |\n| `--vaadin-input-field-required-indicator-color` |\n| `--vaadin-input-field-required-indicator` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
295
|
+
"name": "CustomField",
|
|
296
|
+
"members": [
|
|
297
|
+
{
|
|
298
|
+
"kind": "field",
|
|
299
|
+
"name": "accessibleName",
|
|
300
|
+
"privacy": "public",
|
|
301
|
+
"type": {
|
|
302
|
+
"text": "string"
|
|
303
|
+
},
|
|
304
|
+
"description": "String used to label the component to screen reader users.",
|
|
305
|
+
"attribute": "accessible-name",
|
|
306
|
+
"inheritedFrom": {
|
|
307
|
+
"name": "FieldMixin",
|
|
308
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
309
|
+
}
|
|
310
|
+
},
|
|
311
|
+
{
|
|
312
|
+
"kind": "field",
|
|
313
|
+
"name": "accessibleNameRef",
|
|
314
|
+
"privacy": "public",
|
|
315
|
+
"type": {
|
|
316
|
+
"text": "string"
|
|
317
|
+
},
|
|
318
|
+
"description": "Id of the element used as label of the component to screen reader users.",
|
|
319
|
+
"attribute": "accessible-name-ref",
|
|
320
|
+
"inheritedFrom": {
|
|
321
|
+
"name": "FieldMixin",
|
|
322
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
323
|
+
}
|
|
324
|
+
},
|
|
325
|
+
{
|
|
326
|
+
"kind": "method",
|
|
327
|
+
"name": "checkValidity",
|
|
328
|
+
"description": "Returns true if the current inputs values satisfy all constraints (if any).",
|
|
329
|
+
"return": {
|
|
330
|
+
"type": {
|
|
331
|
+
"text": "boolean"
|
|
332
|
+
}
|
|
333
|
+
},
|
|
334
|
+
"inheritedFrom": {
|
|
335
|
+
"name": "CustomFieldMixin",
|
|
336
|
+
"module": "src/vaadin-custom-field-mixin.js"
|
|
337
|
+
}
|
|
338
|
+
},
|
|
339
|
+
{
|
|
340
|
+
"kind": "field",
|
|
341
|
+
"name": "errorMessage",
|
|
342
|
+
"privacy": "public",
|
|
343
|
+
"type": {
|
|
344
|
+
"text": "string"
|
|
345
|
+
},
|
|
346
|
+
"description": "Error to show when the field is invalid.",
|
|
347
|
+
"attribute": "error-message",
|
|
348
|
+
"inheritedFrom": {
|
|
349
|
+
"name": "FieldMixin",
|
|
350
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
351
|
+
}
|
|
352
|
+
},
|
|
353
|
+
{
|
|
354
|
+
"kind": "field",
|
|
355
|
+
"name": "formatValue",
|
|
356
|
+
"privacy": "public",
|
|
357
|
+
"type": {
|
|
358
|
+
"text": "!CustomFieldFormatValueFn | undefined"
|
|
359
|
+
},
|
|
360
|
+
"description": "A function to format the values of the individual fields contained by\nthe custom field into a single component value. The function receives\nan array of all values of the individual fields in the order of their\npresence in the DOM, and must return a single component value.\nThis function is called each time a value of an internal field is\nchanged.\n\nExample:\n```js\ncustomField.formatValue = (fieldValues) => {\n return fieldValues.join(\"-\");\n}\n```",
|
|
361
|
+
"attribute": "format-value",
|
|
362
|
+
"inheritedFrom": {
|
|
363
|
+
"name": "CustomFieldMixin",
|
|
364
|
+
"module": "src/vaadin-custom-field-mixin.js"
|
|
365
|
+
}
|
|
366
|
+
},
|
|
367
|
+
{
|
|
368
|
+
"kind": "field",
|
|
369
|
+
"name": "helperText",
|
|
370
|
+
"privacy": "public",
|
|
371
|
+
"type": {
|
|
372
|
+
"text": "string"
|
|
373
|
+
},
|
|
374
|
+
"description": "String used for the helper text.",
|
|
375
|
+
"attribute": "helper-text",
|
|
376
|
+
"inheritedFrom": {
|
|
377
|
+
"name": "FieldMixin",
|
|
378
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
379
|
+
}
|
|
380
|
+
},
|
|
381
|
+
{
|
|
382
|
+
"kind": "field",
|
|
383
|
+
"name": "inputs",
|
|
384
|
+
"privacy": "public",
|
|
385
|
+
"type": {
|
|
386
|
+
"text": "!Array<!HTMLElement> | undefined"
|
|
387
|
+
},
|
|
388
|
+
"description": "Array of available input nodes",
|
|
389
|
+
"attribute": "inputs",
|
|
390
|
+
"inheritedFrom": {
|
|
391
|
+
"name": "CustomFieldMixin",
|
|
392
|
+
"module": "src/vaadin-custom-field-mixin.js"
|
|
393
|
+
}
|
|
394
|
+
},
|
|
395
|
+
{
|
|
396
|
+
"kind": "field",
|
|
397
|
+
"name": "name",
|
|
398
|
+
"privacy": "public",
|
|
399
|
+
"description": "The name of the control, which is submitted with the form data.",
|
|
400
|
+
"attribute": "name",
|
|
401
|
+
"inheritedFrom": {
|
|
402
|
+
"name": "CustomFieldMixin",
|
|
403
|
+
"module": "src/vaadin-custom-field-mixin.js"
|
|
404
|
+
}
|
|
405
|
+
},
|
|
406
|
+
{
|
|
407
|
+
"kind": "field",
|
|
408
|
+
"name": "parseValue",
|
|
409
|
+
"privacy": "public",
|
|
410
|
+
"type": {
|
|
411
|
+
"text": "!CustomFieldParseValueFn | undefined"
|
|
412
|
+
},
|
|
413
|
+
"description": "A function to parse the component value into values for the individual\nfields contained by the custom field. The function receives the\ncomponent value, and must return an array of values for the individual\nfields in the order of their presence in the DOM.\nThe function is called each time the value of the component changes.\n\nExample:\n```js\ncustomField.parseValue = (componentValue) => {\n return componentValue.split(\"-\");\n}\n```",
|
|
414
|
+
"attribute": "parse-value",
|
|
415
|
+
"inheritedFrom": {
|
|
416
|
+
"name": "CustomFieldMixin",
|
|
417
|
+
"module": "src/vaadin-custom-field-mixin.js"
|
|
418
|
+
}
|
|
419
|
+
},
|
|
420
|
+
{
|
|
421
|
+
"kind": "field",
|
|
422
|
+
"name": "value",
|
|
423
|
+
"privacy": "public",
|
|
424
|
+
"type": {
|
|
425
|
+
"text": "string"
|
|
426
|
+
},
|
|
427
|
+
"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.\nUse the [`formatValue`](#/elements/vaadin-custom-field#property-formatValue)\nand [`parseValue`](#/elements/vaadin-custom-field#property-parseValue)\nproperties to customize this behavior.",
|
|
428
|
+
"attribute": "value",
|
|
429
|
+
"inheritedFrom": {
|
|
430
|
+
"name": "CustomFieldMixin",
|
|
431
|
+
"module": "src/vaadin-custom-field-mixin.js"
|
|
432
|
+
}
|
|
433
|
+
}
|
|
434
|
+
],
|
|
435
|
+
"events": [
|
|
436
|
+
{
|
|
437
|
+
"name": "change",
|
|
438
|
+
"type": {
|
|
439
|
+
"text": "CustomEvent"
|
|
440
|
+
},
|
|
441
|
+
"description": "Fired when the user commits a value change for any of the internal inputs.",
|
|
442
|
+
"inheritedFrom": {
|
|
443
|
+
"name": "CustomFieldMixin",
|
|
444
|
+
"module": "src/vaadin-custom-field-mixin.js"
|
|
445
|
+
}
|
|
446
|
+
},
|
|
447
|
+
{
|
|
448
|
+
"type": {
|
|
449
|
+
"text": "CustomEvent"
|
|
450
|
+
},
|
|
451
|
+
"description": "Fired when the `invalid` property changes.",
|
|
452
|
+
"name": "invalid-changed"
|
|
453
|
+
},
|
|
454
|
+
{
|
|
455
|
+
"type": {
|
|
456
|
+
"text": "CustomEvent"
|
|
457
|
+
},
|
|
458
|
+
"description": "Fired whenever the field is validated.",
|
|
459
|
+
"name": "validated"
|
|
460
|
+
},
|
|
461
|
+
{
|
|
462
|
+
"type": {
|
|
463
|
+
"text": "CustomEvent"
|
|
464
|
+
},
|
|
465
|
+
"description": "Fired when the `value` property changes.",
|
|
466
|
+
"name": "value-changed"
|
|
467
|
+
}
|
|
468
|
+
],
|
|
469
|
+
"mixins": [
|
|
470
|
+
{
|
|
471
|
+
"name": "CustomFieldMixin",
|
|
472
|
+
"module": "src/vaadin-custom-field-mixin.js"
|
|
473
|
+
},
|
|
474
|
+
{
|
|
475
|
+
"name": "ThemableMixin",
|
|
476
|
+
"package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
|
|
477
|
+
},
|
|
478
|
+
{
|
|
479
|
+
"name": "ElementMixin",
|
|
480
|
+
"package": "@vaadin/component-base/src/element-mixin.js"
|
|
481
|
+
},
|
|
482
|
+
{
|
|
483
|
+
"name": "PolylitMixin",
|
|
484
|
+
"package": "@vaadin/component-base/src/polylit-mixin.js"
|
|
485
|
+
},
|
|
486
|
+
{
|
|
487
|
+
"name": "LumoInjectionMixin",
|
|
488
|
+
"package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
|
|
489
|
+
}
|
|
490
|
+
],
|
|
491
|
+
"superclass": {
|
|
492
|
+
"name": "LitElement",
|
|
493
|
+
"package": "lit"
|
|
494
|
+
},
|
|
495
|
+
"tagName": "vaadin-custom-field",
|
|
496
|
+
"customElement": true,
|
|
497
|
+
"attributes": [
|
|
498
|
+
{
|
|
499
|
+
"name": "accessible-name",
|
|
500
|
+
"type": {
|
|
501
|
+
"text": "string"
|
|
502
|
+
},
|
|
503
|
+
"description": "String used to label the component to screen reader users.",
|
|
504
|
+
"fieldName": "accessibleName",
|
|
505
|
+
"inheritedFrom": {
|
|
506
|
+
"name": "FieldMixin",
|
|
507
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
508
|
+
}
|
|
509
|
+
},
|
|
510
|
+
{
|
|
511
|
+
"name": "accessible-name-ref",
|
|
512
|
+
"type": {
|
|
513
|
+
"text": "string"
|
|
514
|
+
},
|
|
515
|
+
"description": "Id of the element used as label of the component to screen reader users.",
|
|
516
|
+
"fieldName": "accessibleNameRef",
|
|
517
|
+
"inheritedFrom": {
|
|
518
|
+
"name": "FieldMixin",
|
|
519
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
520
|
+
}
|
|
521
|
+
},
|
|
522
|
+
{
|
|
523
|
+
"name": "error-message",
|
|
524
|
+
"type": {
|
|
525
|
+
"text": "string"
|
|
526
|
+
},
|
|
527
|
+
"description": "Error to show when the field is invalid.",
|
|
528
|
+
"fieldName": "errorMessage",
|
|
529
|
+
"inheritedFrom": {
|
|
530
|
+
"name": "FieldMixin",
|
|
531
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
532
|
+
}
|
|
533
|
+
},
|
|
534
|
+
{
|
|
535
|
+
"name": "format-value",
|
|
536
|
+
"type": {
|
|
537
|
+
"text": "!CustomFieldFormatValueFn | undefined"
|
|
538
|
+
},
|
|
539
|
+
"description": "A function to format the values of the individual fields contained by\nthe custom field into a single component value. The function receives\nan array of all values of the individual fields in the order of their\npresence in the DOM, and must return a single component value.\nThis function is called each time a value of an internal field is\nchanged.\n\nExample:\n```js\ncustomField.formatValue = (fieldValues) => {\n return fieldValues.join(\"-\");\n}\n```",
|
|
540
|
+
"fieldName": "formatValue",
|
|
541
|
+
"inheritedFrom": {
|
|
542
|
+
"name": "CustomFieldMixin",
|
|
543
|
+
"module": "src/vaadin-custom-field-mixin.js"
|
|
544
|
+
}
|
|
545
|
+
},
|
|
546
|
+
{
|
|
547
|
+
"name": "helper-text",
|
|
548
|
+
"type": {
|
|
549
|
+
"text": "string"
|
|
550
|
+
},
|
|
551
|
+
"description": "String used for the helper text.",
|
|
552
|
+
"fieldName": "helperText",
|
|
553
|
+
"inheritedFrom": {
|
|
554
|
+
"name": "FieldMixin",
|
|
555
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
556
|
+
}
|
|
557
|
+
},
|
|
558
|
+
{
|
|
559
|
+
"name": "name",
|
|
560
|
+
"description": "The name of the control, which is submitted with the form data.",
|
|
561
|
+
"fieldName": "name",
|
|
562
|
+
"inheritedFrom": {
|
|
563
|
+
"name": "CustomFieldMixin",
|
|
564
|
+
"module": "src/vaadin-custom-field-mixin.js"
|
|
565
|
+
}
|
|
566
|
+
},
|
|
567
|
+
{
|
|
568
|
+
"name": "parse-value",
|
|
569
|
+
"type": {
|
|
570
|
+
"text": "!CustomFieldParseValueFn | undefined"
|
|
571
|
+
},
|
|
572
|
+
"description": "A function to parse the component value into values for the individual\nfields contained by the custom field. The function receives the\ncomponent value, and must return an array of values for the individual\nfields in the order of their presence in the DOM.\nThe function is called each time the value of the component changes.\n\nExample:\n```js\ncustomField.parseValue = (componentValue) => {\n return componentValue.split(\"-\");\n}\n```",
|
|
573
|
+
"fieldName": "parseValue",
|
|
574
|
+
"inheritedFrom": {
|
|
575
|
+
"name": "CustomFieldMixin",
|
|
576
|
+
"module": "src/vaadin-custom-field-mixin.js"
|
|
577
|
+
}
|
|
578
|
+
},
|
|
579
|
+
{
|
|
580
|
+
"name": "value",
|
|
581
|
+
"type": {
|
|
582
|
+
"text": "string"
|
|
583
|
+
},
|
|
584
|
+
"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.\nUse the [`formatValue`](#/elements/vaadin-custom-field#property-formatValue)\nand [`parseValue`](#/elements/vaadin-custom-field#property-parseValue)\nproperties to customize this behavior.",
|
|
585
|
+
"fieldName": "value",
|
|
586
|
+
"inheritedFrom": {
|
|
587
|
+
"name": "CustomFieldMixin",
|
|
588
|
+
"module": "src/vaadin-custom-field-mixin.js"
|
|
589
|
+
}
|
|
590
|
+
}
|
|
591
|
+
]
|
|
592
|
+
}
|
|
593
|
+
],
|
|
594
|
+
"exports": [
|
|
595
|
+
{
|
|
596
|
+
"kind": "js",
|
|
597
|
+
"name": "CustomField",
|
|
598
|
+
"declaration": {
|
|
599
|
+
"name": "CustomField",
|
|
600
|
+
"module": "src/vaadin-custom-field.js"
|
|
601
|
+
}
|
|
602
|
+
}
|
|
603
|
+
]
|
|
604
|
+
}
|
|
605
|
+
]
|
|
606
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/custom-field",
|
|
3
|
-
"version": "25.1.0-
|
|
3
|
+
"version": "25.1.0-alpha8",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -23,6 +23,7 @@
|
|
|
23
23
|
"src",
|
|
24
24
|
"vaadin-*.d.ts",
|
|
25
25
|
"vaadin-*.js",
|
|
26
|
+
"custom-elements.json",
|
|
26
27
|
"web-types.json",
|
|
27
28
|
"web-types.lit.json"
|
|
28
29
|
],
|
|
@@ -34,33 +35,34 @@
|
|
|
34
35
|
],
|
|
35
36
|
"dependencies": {
|
|
36
37
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
37
|
-
"@vaadin/a11y-base": "25.1.0-
|
|
38
|
-
"@vaadin/component-base": "25.1.0-
|
|
39
|
-
"@vaadin/field-base": "25.1.0-
|
|
40
|
-
"@vaadin/vaadin-themable-mixin": "25.1.0-
|
|
38
|
+
"@vaadin/a11y-base": "25.1.0-alpha8",
|
|
39
|
+
"@vaadin/component-base": "25.1.0-alpha8",
|
|
40
|
+
"@vaadin/field-base": "25.1.0-alpha8",
|
|
41
|
+
"@vaadin/vaadin-themable-mixin": "25.1.0-alpha8",
|
|
41
42
|
"lit": "^3.0.0"
|
|
42
43
|
},
|
|
43
44
|
"devDependencies": {
|
|
44
|
-
"@vaadin/aura": "25.1.0-
|
|
45
|
-
"@vaadin/chai-plugins": "25.1.0-
|
|
46
|
-
"@vaadin/combo-box": "25.1.0-
|
|
47
|
-
"@vaadin/date-picker": "25.1.0-
|
|
48
|
-
"@vaadin/email-field": "25.1.0-
|
|
49
|
-
"@vaadin/form-layout": "25.1.0-
|
|
50
|
-
"@vaadin/number-field": "25.1.0-
|
|
51
|
-
"@vaadin/password-field": "25.1.0-
|
|
52
|
-
"@vaadin/select": "25.1.0-
|
|
53
|
-
"@vaadin/test-runner-commands": "25.1.0-
|
|
45
|
+
"@vaadin/aura": "25.1.0-alpha8",
|
|
46
|
+
"@vaadin/chai-plugins": "25.1.0-alpha8",
|
|
47
|
+
"@vaadin/combo-box": "25.1.0-alpha8",
|
|
48
|
+
"@vaadin/date-picker": "25.1.0-alpha8",
|
|
49
|
+
"@vaadin/email-field": "25.1.0-alpha8",
|
|
50
|
+
"@vaadin/form-layout": "25.1.0-alpha8",
|
|
51
|
+
"@vaadin/number-field": "25.1.0-alpha8",
|
|
52
|
+
"@vaadin/password-field": "25.1.0-alpha8",
|
|
53
|
+
"@vaadin/select": "25.1.0-alpha8",
|
|
54
|
+
"@vaadin/test-runner-commands": "25.1.0-alpha8",
|
|
54
55
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
55
|
-
"@vaadin/text-area": "25.1.0-
|
|
56
|
-
"@vaadin/text-field": "25.1.0-
|
|
57
|
-
"@vaadin/time-picker": "25.1.0-
|
|
58
|
-
"@vaadin/vaadin-lumo-styles": "25.1.0-
|
|
56
|
+
"@vaadin/text-area": "25.1.0-alpha8",
|
|
57
|
+
"@vaadin/text-field": "25.1.0-alpha8",
|
|
58
|
+
"@vaadin/time-picker": "25.1.0-alpha8",
|
|
59
|
+
"@vaadin/vaadin-lumo-styles": "25.1.0-alpha8",
|
|
59
60
|
"sinon": "^21.0.0"
|
|
60
61
|
},
|
|
62
|
+
"customElements": "custom-elements.json",
|
|
61
63
|
"web-types": [
|
|
62
64
|
"web-types.json",
|
|
63
65
|
"web-types.lit.json"
|
|
64
66
|
],
|
|
65
|
-
"gitHead": "
|
|
67
|
+
"gitHead": "810590c9c7682a9326c9352df795b5ea4891a71f"
|
|
66
68
|
}
|
|
@@ -75,7 +75,7 @@ import { CustomFieldMixin } from './vaadin-custom-field-mixin.js';
|
|
|
75
75
|
* @fires {CustomEvent} value-changed - Fired when the `value` property changes.
|
|
76
76
|
* @fires {CustomEvent} validated - Fired whenever the field is validated.
|
|
77
77
|
*
|
|
78
|
-
* @customElement
|
|
78
|
+
* @customElement vaadin-custom-field
|
|
79
79
|
* @extends HTMLElement
|
|
80
80
|
* @mixes CustomFieldMixin
|
|
81
81
|
* @mixes ElementMixin
|
package/web-types.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": "25.1.0-
|
|
4
|
+
"version": "25.1.0-alpha8",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -111,7 +111,7 @@
|
|
|
111
111
|
},
|
|
112
112
|
{
|
|
113
113
|
"name": "value",
|
|
114
|
-
"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.\nUse the [`formatValue`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-
|
|
114
|
+
"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.\nUse the [`formatValue`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-alpha8/#/elements/vaadin-custom-field#property-formatValue)\nand [`parseValue`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-alpha8/#/elements/vaadin-custom-field#property-parseValue)\nproperties to customize this behavior.",
|
|
115
115
|
"value": {
|
|
116
116
|
"type": [
|
|
117
117
|
"string",
|
|
@@ -235,7 +235,7 @@
|
|
|
235
235
|
},
|
|
236
236
|
{
|
|
237
237
|
"name": "value",
|
|
238
|
-
"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.\nUse the [`formatValue`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-
|
|
238
|
+
"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.\nUse the [`formatValue`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-alpha8/#/elements/vaadin-custom-field#property-formatValue)\nand [`parseValue`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-alpha8/#/elements/vaadin-custom-field#property-parseValue)\nproperties to customize this behavior.",
|
|
239
239
|
"value": {
|
|
240
240
|
"type": [
|
|
241
241
|
"string",
|
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": "25.1.0-
|
|
4
|
+
"version": "25.1.0-alpha8",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
},
|
|
85
85
|
{
|
|
86
86
|
"name": ".value",
|
|
87
|
-
"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.\nUse the [`formatValue`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-
|
|
87
|
+
"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.\nUse the [`formatValue`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-alpha8/#/elements/vaadin-custom-field#property-formatValue)\nand [`parseValue`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-alpha8/#/elements/vaadin-custom-field#property-parseValue)\nproperties to customize this behavior.",
|
|
88
88
|
"value": {
|
|
89
89
|
"kind": "expression"
|
|
90
90
|
}
|