@vaadin/custom-field 25.2.0-alpha8 → 25.2.0-beta1
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 +198 -0
- package/package.json +20 -20
- package/src/vaadin-custom-field-mixin.js +1 -7
- package/src/vaadin-custom-field.js +0 -9
- package/web-types.json +23 -63
- package/web-types.lit.json +23 -23
package/custom-elements.json
CHANGED
|
@@ -62,6 +62,10 @@
|
|
|
62
62
|
"type": {
|
|
63
63
|
"text": "boolean"
|
|
64
64
|
}
|
|
65
|
+
},
|
|
66
|
+
"inheritedFrom": {
|
|
67
|
+
"name": "ValidateMixin",
|
|
68
|
+
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
65
69
|
}
|
|
66
70
|
},
|
|
67
71
|
{
|
|
@@ -113,6 +117,20 @@
|
|
|
113
117
|
"attribute": "inputs",
|
|
114
118
|
"readonly": true
|
|
115
119
|
},
|
|
120
|
+
{
|
|
121
|
+
"kind": "field",
|
|
122
|
+
"name": "invalid",
|
|
123
|
+
"privacy": "public",
|
|
124
|
+
"type": {
|
|
125
|
+
"text": "boolean"
|
|
126
|
+
},
|
|
127
|
+
"description": "Set to true when the field is invalid.",
|
|
128
|
+
"attribute": "invalid",
|
|
129
|
+
"inheritedFrom": {
|
|
130
|
+
"name": "ValidateMixin",
|
|
131
|
+
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
132
|
+
}
|
|
133
|
+
},
|
|
116
134
|
{
|
|
117
135
|
"kind": "field",
|
|
118
136
|
"name": "label",
|
|
@@ -127,6 +145,20 @@
|
|
|
127
145
|
"package": "@vaadin/field-base/src/label-mixin.js"
|
|
128
146
|
}
|
|
129
147
|
},
|
|
148
|
+
{
|
|
149
|
+
"kind": "field",
|
|
150
|
+
"name": "manualValidation",
|
|
151
|
+
"privacy": "public",
|
|
152
|
+
"type": {
|
|
153
|
+
"text": "boolean"
|
|
154
|
+
},
|
|
155
|
+
"description": "Set to true to enable manual validation mode. This mode disables automatic\nconstraint validation, allowing you to control the validation process yourself.\nYou can still trigger constraint validation manually with the `validate()` method\nor use `checkValidity()` to assess the component's validity without affecting\nthe invalid state. In manual validation mode, you can also manipulate\nthe `invalid` property directly through your application logic without conflicts\nwith the component's internal validation.",
|
|
156
|
+
"attribute": "manual-validation",
|
|
157
|
+
"inheritedFrom": {
|
|
158
|
+
"name": "ValidateMixin",
|
|
159
|
+
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
160
|
+
}
|
|
161
|
+
},
|
|
130
162
|
{
|
|
131
163
|
"kind": "field",
|
|
132
164
|
"name": "name",
|
|
@@ -147,6 +179,34 @@
|
|
|
147
179
|
"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```",
|
|
148
180
|
"attribute": "parse-value"
|
|
149
181
|
},
|
|
182
|
+
{
|
|
183
|
+
"kind": "field",
|
|
184
|
+
"name": "required",
|
|
185
|
+
"privacy": "public",
|
|
186
|
+
"type": {
|
|
187
|
+
"text": "boolean"
|
|
188
|
+
},
|
|
189
|
+
"description": "Specifies that the user must fill in a value.",
|
|
190
|
+
"attribute": "required",
|
|
191
|
+
"inheritedFrom": {
|
|
192
|
+
"name": "ValidateMixin",
|
|
193
|
+
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
194
|
+
}
|
|
195
|
+
},
|
|
196
|
+
{
|
|
197
|
+
"kind": "method",
|
|
198
|
+
"name": "validate",
|
|
199
|
+
"description": "Validates the field and sets the `invalid` property based on the result.\n\nThe method fires a `validated` event with the result of the validation.",
|
|
200
|
+
"return": {
|
|
201
|
+
"type": {
|
|
202
|
+
"text": "boolean"
|
|
203
|
+
}
|
|
204
|
+
},
|
|
205
|
+
"inheritedFrom": {
|
|
206
|
+
"name": "ValidateMixin",
|
|
207
|
+
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
208
|
+
}
|
|
209
|
+
},
|
|
150
210
|
{
|
|
151
211
|
"kind": "field",
|
|
152
212
|
"name": "value",
|
|
@@ -164,6 +224,16 @@
|
|
|
164
224
|
"type": {
|
|
165
225
|
"text": "CustomEvent"
|
|
166
226
|
}
|
|
227
|
+
},
|
|
228
|
+
{
|
|
229
|
+
"name": "validated",
|
|
230
|
+
"type": {
|
|
231
|
+
"text": "CustomEvent"
|
|
232
|
+
},
|
|
233
|
+
"inheritedFrom": {
|
|
234
|
+
"name": "ValidateMixin",
|
|
235
|
+
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
236
|
+
}
|
|
167
237
|
}
|
|
168
238
|
],
|
|
169
239
|
"attributes": [
|
|
@@ -223,6 +293,18 @@
|
|
|
223
293
|
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
224
294
|
}
|
|
225
295
|
},
|
|
296
|
+
{
|
|
297
|
+
"name": "invalid",
|
|
298
|
+
"type": {
|
|
299
|
+
"text": "boolean"
|
|
300
|
+
},
|
|
301
|
+
"description": "Set to true when the field is invalid.",
|
|
302
|
+
"fieldName": "invalid",
|
|
303
|
+
"inheritedFrom": {
|
|
304
|
+
"name": "ValidateMixin",
|
|
305
|
+
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
306
|
+
}
|
|
307
|
+
},
|
|
226
308
|
{
|
|
227
309
|
"name": "label",
|
|
228
310
|
"type": {
|
|
@@ -235,6 +317,18 @@
|
|
|
235
317
|
"package": "@vaadin/field-base/src/label-mixin.js"
|
|
236
318
|
}
|
|
237
319
|
},
|
|
320
|
+
{
|
|
321
|
+
"name": "manual-validation",
|
|
322
|
+
"type": {
|
|
323
|
+
"text": "boolean"
|
|
324
|
+
},
|
|
325
|
+
"description": "Set to true to enable manual validation mode. This mode disables automatic\nconstraint validation, allowing you to control the validation process yourself.\nYou can still trigger constraint validation manually with the `validate()` method\nor use `checkValidity()` to assess the component's validity without affecting\nthe invalid state. In manual validation mode, you can also manipulate\nthe `invalid` property directly through your application logic without conflicts\nwith the component's internal validation.",
|
|
326
|
+
"fieldName": "manualValidation",
|
|
327
|
+
"inheritedFrom": {
|
|
328
|
+
"name": "ValidateMixin",
|
|
329
|
+
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
330
|
+
}
|
|
331
|
+
},
|
|
238
332
|
{
|
|
239
333
|
"name": "name",
|
|
240
334
|
"type": {
|
|
@@ -251,6 +345,18 @@
|
|
|
251
345
|
"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```",
|
|
252
346
|
"fieldName": "parseValue"
|
|
253
347
|
},
|
|
348
|
+
{
|
|
349
|
+
"name": "required",
|
|
350
|
+
"type": {
|
|
351
|
+
"text": "boolean"
|
|
352
|
+
},
|
|
353
|
+
"description": "Specifies that the user must fill in a value.",
|
|
354
|
+
"fieldName": "required",
|
|
355
|
+
"inheritedFrom": {
|
|
356
|
+
"name": "ValidateMixin",
|
|
357
|
+
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
358
|
+
}
|
|
359
|
+
},
|
|
254
360
|
{
|
|
255
361
|
"name": "value",
|
|
256
362
|
"type": {
|
|
@@ -400,6 +506,20 @@
|
|
|
400
506
|
"module": "src/vaadin-custom-field-mixin.js"
|
|
401
507
|
}
|
|
402
508
|
},
|
|
509
|
+
{
|
|
510
|
+
"kind": "field",
|
|
511
|
+
"name": "invalid",
|
|
512
|
+
"privacy": "public",
|
|
513
|
+
"type": {
|
|
514
|
+
"text": "boolean"
|
|
515
|
+
},
|
|
516
|
+
"description": "Set to true when the field is invalid.",
|
|
517
|
+
"attribute": "invalid",
|
|
518
|
+
"inheritedFrom": {
|
|
519
|
+
"name": "ValidateMixin",
|
|
520
|
+
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
521
|
+
}
|
|
522
|
+
},
|
|
403
523
|
{
|
|
404
524
|
"kind": "field",
|
|
405
525
|
"name": "label",
|
|
@@ -414,6 +534,20 @@
|
|
|
414
534
|
"package": "@vaadin/field-base/src/label-mixin.js"
|
|
415
535
|
}
|
|
416
536
|
},
|
|
537
|
+
{
|
|
538
|
+
"kind": "field",
|
|
539
|
+
"name": "manualValidation",
|
|
540
|
+
"privacy": "public",
|
|
541
|
+
"type": {
|
|
542
|
+
"text": "boolean"
|
|
543
|
+
},
|
|
544
|
+
"description": "Set to true to enable manual validation mode. This mode disables automatic\nconstraint validation, allowing you to control the validation process yourself.\nYou can still trigger constraint validation manually with the `validate()` method\nor use `checkValidity()` to assess the component's validity without affecting\nthe invalid state. In manual validation mode, you can also manipulate\nthe `invalid` property directly through your application logic without conflicts\nwith the component's internal validation.",
|
|
545
|
+
"attribute": "manual-validation",
|
|
546
|
+
"inheritedFrom": {
|
|
547
|
+
"name": "ValidateMixin",
|
|
548
|
+
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
549
|
+
}
|
|
550
|
+
},
|
|
417
551
|
{
|
|
418
552
|
"kind": "field",
|
|
419
553
|
"name": "name",
|
|
@@ -442,6 +576,34 @@
|
|
|
442
576
|
"module": "src/vaadin-custom-field-mixin.js"
|
|
443
577
|
}
|
|
444
578
|
},
|
|
579
|
+
{
|
|
580
|
+
"kind": "field",
|
|
581
|
+
"name": "required",
|
|
582
|
+
"privacy": "public",
|
|
583
|
+
"type": {
|
|
584
|
+
"text": "boolean"
|
|
585
|
+
},
|
|
586
|
+
"description": "Specifies that the user must fill in a value.",
|
|
587
|
+
"attribute": "required",
|
|
588
|
+
"inheritedFrom": {
|
|
589
|
+
"name": "ValidateMixin",
|
|
590
|
+
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
591
|
+
}
|
|
592
|
+
},
|
|
593
|
+
{
|
|
594
|
+
"kind": "method",
|
|
595
|
+
"name": "validate",
|
|
596
|
+
"description": "Validates the field and sets the `invalid` property based on the result.\n\nThe method fires a `validated` event with the result of the validation.",
|
|
597
|
+
"return": {
|
|
598
|
+
"type": {
|
|
599
|
+
"text": "boolean"
|
|
600
|
+
}
|
|
601
|
+
},
|
|
602
|
+
"inheritedFrom": {
|
|
603
|
+
"name": "ValidateMixin",
|
|
604
|
+
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
605
|
+
}
|
|
606
|
+
},
|
|
445
607
|
{
|
|
446
608
|
"kind": "field",
|
|
447
609
|
"name": "value",
|
|
@@ -580,6 +742,18 @@
|
|
|
580
742
|
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
581
743
|
}
|
|
582
744
|
},
|
|
745
|
+
{
|
|
746
|
+
"name": "invalid",
|
|
747
|
+
"type": {
|
|
748
|
+
"text": "boolean"
|
|
749
|
+
},
|
|
750
|
+
"description": "Set to true when the field is invalid.",
|
|
751
|
+
"fieldName": "invalid",
|
|
752
|
+
"inheritedFrom": {
|
|
753
|
+
"name": "ValidateMixin",
|
|
754
|
+
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
755
|
+
}
|
|
756
|
+
},
|
|
583
757
|
{
|
|
584
758
|
"name": "label",
|
|
585
759
|
"type": {
|
|
@@ -592,6 +766,18 @@
|
|
|
592
766
|
"package": "@vaadin/field-base/src/label-mixin.js"
|
|
593
767
|
}
|
|
594
768
|
},
|
|
769
|
+
{
|
|
770
|
+
"name": "manual-validation",
|
|
771
|
+
"type": {
|
|
772
|
+
"text": "boolean"
|
|
773
|
+
},
|
|
774
|
+
"description": "Set to true to enable manual validation mode. This mode disables automatic\nconstraint validation, allowing you to control the validation process yourself.\nYou can still trigger constraint validation manually with the `validate()` method\nor use `checkValidity()` to assess the component's validity without affecting\nthe invalid state. In manual validation mode, you can also manipulate\nthe `invalid` property directly through your application logic without conflicts\nwith the component's internal validation.",
|
|
775
|
+
"fieldName": "manualValidation",
|
|
776
|
+
"inheritedFrom": {
|
|
777
|
+
"name": "ValidateMixin",
|
|
778
|
+
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
779
|
+
}
|
|
780
|
+
},
|
|
595
781
|
{
|
|
596
782
|
"name": "name",
|
|
597
783
|
"type": {
|
|
@@ -616,6 +802,18 @@
|
|
|
616
802
|
"module": "src/vaadin-custom-field-mixin.js"
|
|
617
803
|
}
|
|
618
804
|
},
|
|
805
|
+
{
|
|
806
|
+
"name": "required",
|
|
807
|
+
"type": {
|
|
808
|
+
"text": "boolean"
|
|
809
|
+
},
|
|
810
|
+
"description": "Specifies that the user must fill in a value.",
|
|
811
|
+
"fieldName": "required",
|
|
812
|
+
"inheritedFrom": {
|
|
813
|
+
"name": "ValidateMixin",
|
|
814
|
+
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
815
|
+
}
|
|
816
|
+
},
|
|
619
817
|
{
|
|
620
818
|
"name": "value",
|
|
621
819
|
"type": {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/custom-field",
|
|
3
|
-
"version": "25.2.0-
|
|
3
|
+
"version": "25.2.0-beta1",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -35,28 +35,28 @@
|
|
|
35
35
|
],
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
|
-
"@vaadin/a11y-base": "25.2.0-
|
|
39
|
-
"@vaadin/component-base": "25.2.0-
|
|
40
|
-
"@vaadin/field-base": "25.2.0-
|
|
41
|
-
"@vaadin/vaadin-themable-mixin": "25.2.0-
|
|
38
|
+
"@vaadin/a11y-base": "25.2.0-beta1",
|
|
39
|
+
"@vaadin/component-base": "25.2.0-beta1",
|
|
40
|
+
"@vaadin/field-base": "25.2.0-beta1",
|
|
41
|
+
"@vaadin/vaadin-themable-mixin": "25.2.0-beta1",
|
|
42
42
|
"lit": "^3.0.0"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
|
-
"@vaadin/aura": "25.2.0-
|
|
46
|
-
"@vaadin/chai-plugins": "25.2.0-
|
|
47
|
-
"@vaadin/combo-box": "25.2.0-
|
|
48
|
-
"@vaadin/date-picker": "25.2.0-
|
|
49
|
-
"@vaadin/email-field": "25.2.0-
|
|
50
|
-
"@vaadin/form-layout": "25.2.0-
|
|
51
|
-
"@vaadin/number-field": "25.2.0-
|
|
52
|
-
"@vaadin/password-field": "25.2.0-
|
|
53
|
-
"@vaadin/select": "25.2.0-
|
|
54
|
-
"@vaadin/test-runner-commands": "25.2.0-
|
|
45
|
+
"@vaadin/aura": "25.2.0-beta1",
|
|
46
|
+
"@vaadin/chai-plugins": "25.2.0-beta1",
|
|
47
|
+
"@vaadin/combo-box": "25.2.0-beta1",
|
|
48
|
+
"@vaadin/date-picker": "25.2.0-beta1",
|
|
49
|
+
"@vaadin/email-field": "25.2.0-beta1",
|
|
50
|
+
"@vaadin/form-layout": "25.2.0-beta1",
|
|
51
|
+
"@vaadin/number-field": "25.2.0-beta1",
|
|
52
|
+
"@vaadin/password-field": "25.2.0-beta1",
|
|
53
|
+
"@vaadin/select": "25.2.0-beta1",
|
|
54
|
+
"@vaadin/test-runner-commands": "25.2.0-beta1",
|
|
55
55
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
56
|
-
"@vaadin/text-area": "25.2.0-
|
|
57
|
-
"@vaadin/text-field": "25.2.0-
|
|
58
|
-
"@vaadin/time-picker": "25.2.0-
|
|
59
|
-
"@vaadin/vaadin-lumo-styles": "25.2.0-
|
|
56
|
+
"@vaadin/text-area": "25.2.0-beta1",
|
|
57
|
+
"@vaadin/text-field": "25.2.0-beta1",
|
|
58
|
+
"@vaadin/time-picker": "25.2.0-beta1",
|
|
59
|
+
"@vaadin/vaadin-lumo-styles": "25.2.0-beta1",
|
|
60
60
|
"sinon": "^21.0.2"
|
|
61
61
|
},
|
|
62
62
|
"customElements": "custom-elements.json",
|
|
@@ -64,5 +64,5 @@
|
|
|
64
64
|
"web-types.json",
|
|
65
65
|
"web-types.lit.json"
|
|
66
66
|
],
|
|
67
|
-
"gitHead": "
|
|
67
|
+
"gitHead": "471a23f60d1eb725f98a33f62cb9664d9c0a4163"
|
|
68
68
|
}
|
|
@@ -29,12 +29,6 @@ const defaultFormatValue = (inputValues) => {
|
|
|
29
29
|
return inputValues.join('\t');
|
|
30
30
|
};
|
|
31
31
|
|
|
32
|
-
/**
|
|
33
|
-
* @polymerMixin
|
|
34
|
-
* @mixes FieldMixin
|
|
35
|
-
* @mixes FocusMixin
|
|
36
|
-
* @mixes KeyboardMixin
|
|
37
|
-
*/
|
|
38
32
|
export const CustomFieldMixin = (superClass) =>
|
|
39
33
|
class CustomFieldMixin extends FieldMixin(FocusMixin(KeyboardMixin(superClass))) {
|
|
40
34
|
static get properties() {
|
|
@@ -278,7 +272,7 @@ export const CustomFieldMixin = (superClass) =>
|
|
|
278
272
|
/** @private */
|
|
279
273
|
__inputsChanged(inputs, oldInputs) {
|
|
280
274
|
if (inputs.length === 0) {
|
|
281
|
-
if (oldInputs
|
|
275
|
+
if (oldInputs?.length > 0) {
|
|
282
276
|
this.__setValue();
|
|
283
277
|
}
|
|
284
278
|
return;
|
|
@@ -77,9 +77,6 @@ import { CustomFieldMixin } from './vaadin-custom-field-mixin.js';
|
|
|
77
77
|
*
|
|
78
78
|
* @customElement vaadin-custom-field
|
|
79
79
|
* @extends HTMLElement
|
|
80
|
-
* @mixes CustomFieldMixin
|
|
81
|
-
* @mixes ElementMixin
|
|
82
|
-
* @mixes ThemableMixin
|
|
83
80
|
*/
|
|
84
81
|
class CustomField extends CustomFieldMixin(ThemableMixin(ElementMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
|
|
85
82
|
static get is() {
|
|
@@ -115,12 +112,6 @@ class CustomField extends CustomFieldMixin(ThemableMixin(ElementMixin(PolylitMix
|
|
|
115
112
|
<slot name="tooltip"></slot>
|
|
116
113
|
`;
|
|
117
114
|
}
|
|
118
|
-
|
|
119
|
-
/**
|
|
120
|
-
* Fired when the user commits a value change for any of the internal inputs.
|
|
121
|
-
*
|
|
122
|
-
* @event change
|
|
123
|
-
*/
|
|
124
115
|
}
|
|
125
116
|
|
|
126
117
|
defineCustomElement(CustomField);
|
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.2.0-
|
|
4
|
+
"version": "25.2.0-beta1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -15,9 +15,7 @@
|
|
|
15
15
|
"description": "String used to label the component to screen reader users.",
|
|
16
16
|
"value": {
|
|
17
17
|
"type": [
|
|
18
|
-
"string"
|
|
19
|
-
"null",
|
|
20
|
-
"undefined"
|
|
18
|
+
"string"
|
|
21
19
|
]
|
|
22
20
|
}
|
|
23
21
|
},
|
|
@@ -26,9 +24,7 @@
|
|
|
26
24
|
"description": "Id of the element used as label of the component to screen reader users.",
|
|
27
25
|
"value": {
|
|
28
26
|
"type": [
|
|
29
|
-
"string"
|
|
30
|
-
"null",
|
|
31
|
-
"undefined"
|
|
27
|
+
"string"
|
|
32
28
|
]
|
|
33
29
|
}
|
|
34
30
|
},
|
|
@@ -37,9 +33,7 @@
|
|
|
37
33
|
"description": "Error to show when the field is invalid.",
|
|
38
34
|
"value": {
|
|
39
35
|
"type": [
|
|
40
|
-
"string"
|
|
41
|
-
"null",
|
|
42
|
-
"undefined"
|
|
36
|
+
"string"
|
|
43
37
|
]
|
|
44
38
|
}
|
|
45
39
|
},
|
|
@@ -48,9 +42,7 @@
|
|
|
48
42
|
"description": "String used for the helper text.",
|
|
49
43
|
"value": {
|
|
50
44
|
"type": [
|
|
51
|
-
"string"
|
|
52
|
-
"null",
|
|
53
|
-
"undefined"
|
|
45
|
+
"string"
|
|
54
46
|
]
|
|
55
47
|
}
|
|
56
48
|
},
|
|
@@ -59,9 +51,7 @@
|
|
|
59
51
|
"description": "Set to true when the field is invalid.",
|
|
60
52
|
"value": {
|
|
61
53
|
"type": [
|
|
62
|
-
"boolean"
|
|
63
|
-
"null",
|
|
64
|
-
"undefined"
|
|
54
|
+
"boolean"
|
|
65
55
|
]
|
|
66
56
|
}
|
|
67
57
|
},
|
|
@@ -70,9 +60,7 @@
|
|
|
70
60
|
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
|
|
71
61
|
"value": {
|
|
72
62
|
"type": [
|
|
73
|
-
"string"
|
|
74
|
-
"null",
|
|
75
|
-
"undefined"
|
|
63
|
+
"string"
|
|
76
64
|
]
|
|
77
65
|
}
|
|
78
66
|
},
|
|
@@ -81,9 +69,7 @@
|
|
|
81
69
|
"description": "Set to true to enable manual validation mode. This mode disables automatic\nconstraint validation, allowing you to control the validation process yourself.\nYou can still trigger constraint validation manually with the `validate()` method\nor use `checkValidity()` to assess the component's validity without affecting\nthe invalid state. In manual validation mode, you can also manipulate\nthe `invalid` property directly through your application logic without conflicts\nwith the component's internal validation.",
|
|
82
70
|
"value": {
|
|
83
71
|
"type": [
|
|
84
|
-
"boolean"
|
|
85
|
-
"null",
|
|
86
|
-
"undefined"
|
|
72
|
+
"boolean"
|
|
87
73
|
]
|
|
88
74
|
}
|
|
89
75
|
},
|
|
@@ -92,9 +78,7 @@
|
|
|
92
78
|
"description": "The name of the control, which is submitted with the form data.",
|
|
93
79
|
"value": {
|
|
94
80
|
"type": [
|
|
95
|
-
"string"
|
|
96
|
-
"null",
|
|
97
|
-
"undefined"
|
|
81
|
+
"string"
|
|
98
82
|
]
|
|
99
83
|
}
|
|
100
84
|
},
|
|
@@ -103,9 +87,7 @@
|
|
|
103
87
|
"description": "Specifies that the user must fill in a value.",
|
|
104
88
|
"value": {
|
|
105
89
|
"type": [
|
|
106
|
-
"boolean"
|
|
107
|
-
"null",
|
|
108
|
-
"undefined"
|
|
90
|
+
"boolean"
|
|
109
91
|
]
|
|
110
92
|
}
|
|
111
93
|
},
|
|
@@ -122,12 +104,10 @@
|
|
|
122
104
|
},
|
|
123
105
|
{
|
|
124
106
|
"name": "value",
|
|
125
|
-
"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.2.0-
|
|
107
|
+
"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.2.0-beta1/#/elements/vaadin-custom-field#property-formatValue)\nand [`parseValue`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-beta1/#/elements/vaadin-custom-field#property-parseValue)\nproperties to customize this behavior.",
|
|
126
108
|
"value": {
|
|
127
109
|
"type": [
|
|
128
|
-
"string"
|
|
129
|
-
"null",
|
|
130
|
-
"undefined"
|
|
110
|
+
"string"
|
|
131
111
|
]
|
|
132
112
|
}
|
|
133
113
|
}
|
|
@@ -139,9 +119,7 @@
|
|
|
139
119
|
"description": "String used to label the component to screen reader users.",
|
|
140
120
|
"value": {
|
|
141
121
|
"type": [
|
|
142
|
-
"string"
|
|
143
|
-
"null",
|
|
144
|
-
"undefined"
|
|
122
|
+
"string"
|
|
145
123
|
]
|
|
146
124
|
}
|
|
147
125
|
},
|
|
@@ -150,9 +128,7 @@
|
|
|
150
128
|
"description": "Id of the element used as label of the component to screen reader users.",
|
|
151
129
|
"value": {
|
|
152
130
|
"type": [
|
|
153
|
-
"string"
|
|
154
|
-
"null",
|
|
155
|
-
"undefined"
|
|
131
|
+
"string"
|
|
156
132
|
]
|
|
157
133
|
}
|
|
158
134
|
},
|
|
@@ -161,9 +137,7 @@
|
|
|
161
137
|
"description": "Error to show when the field is invalid.",
|
|
162
138
|
"value": {
|
|
163
139
|
"type": [
|
|
164
|
-
"string"
|
|
165
|
-
"null",
|
|
166
|
-
"undefined"
|
|
140
|
+
"string"
|
|
167
141
|
]
|
|
168
142
|
}
|
|
169
143
|
},
|
|
@@ -182,9 +156,7 @@
|
|
|
182
156
|
"description": "String used for the helper text.",
|
|
183
157
|
"value": {
|
|
184
158
|
"type": [
|
|
185
|
-
"string"
|
|
186
|
-
"null",
|
|
187
|
-
"undefined"
|
|
159
|
+
"string"
|
|
188
160
|
]
|
|
189
161
|
}
|
|
190
162
|
},
|
|
@@ -193,9 +165,7 @@
|
|
|
193
165
|
"description": "Set to true when the field is invalid.",
|
|
194
166
|
"value": {
|
|
195
167
|
"type": [
|
|
196
|
-
"boolean"
|
|
197
|
-
"null",
|
|
198
|
-
"undefined"
|
|
168
|
+
"boolean"
|
|
199
169
|
]
|
|
200
170
|
}
|
|
201
171
|
},
|
|
@@ -204,9 +174,7 @@
|
|
|
204
174
|
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
|
|
205
175
|
"value": {
|
|
206
176
|
"type": [
|
|
207
|
-
"string"
|
|
208
|
-
"null",
|
|
209
|
-
"undefined"
|
|
177
|
+
"string"
|
|
210
178
|
]
|
|
211
179
|
}
|
|
212
180
|
},
|
|
@@ -215,9 +183,7 @@
|
|
|
215
183
|
"description": "Set to true to enable manual validation mode. This mode disables automatic\nconstraint validation, allowing you to control the validation process yourself.\nYou can still trigger constraint validation manually with the `validate()` method\nor use `checkValidity()` to assess the component's validity without affecting\nthe invalid state. In manual validation mode, you can also manipulate\nthe `invalid` property directly through your application logic without conflicts\nwith the component's internal validation.",
|
|
216
184
|
"value": {
|
|
217
185
|
"type": [
|
|
218
|
-
"boolean"
|
|
219
|
-
"null",
|
|
220
|
-
"undefined"
|
|
186
|
+
"boolean"
|
|
221
187
|
]
|
|
222
188
|
}
|
|
223
189
|
},
|
|
@@ -226,9 +192,7 @@
|
|
|
226
192
|
"description": "The name of the control, which is submitted with the form data.",
|
|
227
193
|
"value": {
|
|
228
194
|
"type": [
|
|
229
|
-
"string"
|
|
230
|
-
"null",
|
|
231
|
-
"undefined"
|
|
195
|
+
"string"
|
|
232
196
|
]
|
|
233
197
|
}
|
|
234
198
|
},
|
|
@@ -247,20 +211,16 @@
|
|
|
247
211
|
"description": "Specifies that the user must fill in a value.",
|
|
248
212
|
"value": {
|
|
249
213
|
"type": [
|
|
250
|
-
"boolean"
|
|
251
|
-
"null",
|
|
252
|
-
"undefined"
|
|
214
|
+
"boolean"
|
|
253
215
|
]
|
|
254
216
|
}
|
|
255
217
|
},
|
|
256
218
|
{
|
|
257
219
|
"name": "value",
|
|
258
|
-
"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.2.0-
|
|
220
|
+
"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.2.0-beta1/#/elements/vaadin-custom-field#property-formatValue)\nand [`parseValue`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-beta1/#/elements/vaadin-custom-field#property-parseValue)\nproperties to customize this behavior.",
|
|
259
221
|
"value": {
|
|
260
222
|
"type": [
|
|
261
|
-
"string"
|
|
262
|
-
"null",
|
|
263
|
-
"undefined"
|
|
223
|
+
"string"
|
|
264
224
|
]
|
|
265
225
|
}
|
|
266
226
|
}
|
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.2.0-
|
|
4
|
+
"version": "25.2.0-beta1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -19,27 +19,6 @@
|
|
|
19
19
|
"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.",
|
|
20
20
|
"extension": true,
|
|
21
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": "?manualValidation",
|
|
31
|
-
"description": "Set to true to enable manual validation mode. This mode disables automatic\nconstraint validation, allowing you to control the validation process yourself.\nYou can still trigger constraint validation manually with the `validate()` method\nor use `checkValidity()` to assess the component's validity without affecting\nthe invalid state. In manual validation mode, you can also manipulate\nthe `invalid` property directly through your application logic without conflicts\nwith the component's internal validation.",
|
|
32
|
-
"value": {
|
|
33
|
-
"kind": "expression"
|
|
34
|
-
}
|
|
35
|
-
},
|
|
36
|
-
{
|
|
37
|
-
"name": "?required",
|
|
38
|
-
"description": "Specifies that the user must fill in a value.",
|
|
39
|
-
"value": {
|
|
40
|
-
"kind": "expression"
|
|
41
|
-
}
|
|
42
|
-
},
|
|
43
22
|
{
|
|
44
23
|
"name": ".accessibleName",
|
|
45
24
|
"description": "String used to label the component to screen reader users.",
|
|
@@ -75,6 +54,13 @@
|
|
|
75
54
|
"kind": "expression"
|
|
76
55
|
}
|
|
77
56
|
},
|
|
57
|
+
{
|
|
58
|
+
"name": "?invalid",
|
|
59
|
+
"description": "Set to true when the field is invalid.",
|
|
60
|
+
"value": {
|
|
61
|
+
"kind": "expression"
|
|
62
|
+
}
|
|
63
|
+
},
|
|
78
64
|
{
|
|
79
65
|
"name": ".label",
|
|
80
66
|
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
|
|
@@ -82,6 +68,13 @@
|
|
|
82
68
|
"kind": "expression"
|
|
83
69
|
}
|
|
84
70
|
},
|
|
71
|
+
{
|
|
72
|
+
"name": "?manualValidation",
|
|
73
|
+
"description": "Set to true to enable manual validation mode. This mode disables automatic\nconstraint validation, allowing you to control the validation process yourself.\nYou can still trigger constraint validation manually with the `validate()` method\nor use `checkValidity()` to assess the component's validity without affecting\nthe invalid state. In manual validation mode, you can also manipulate\nthe `invalid` property directly through your application logic without conflicts\nwith the component's internal validation.",
|
|
74
|
+
"value": {
|
|
75
|
+
"kind": "expression"
|
|
76
|
+
}
|
|
77
|
+
},
|
|
85
78
|
{
|
|
86
79
|
"name": ".name",
|
|
87
80
|
"description": "The name of the control, which is submitted with the form data.",
|
|
@@ -96,9 +89,16 @@
|
|
|
96
89
|
"kind": "expression"
|
|
97
90
|
}
|
|
98
91
|
},
|
|
92
|
+
{
|
|
93
|
+
"name": "?required",
|
|
94
|
+
"description": "Specifies that the user must fill in a value.",
|
|
95
|
+
"value": {
|
|
96
|
+
"kind": "expression"
|
|
97
|
+
}
|
|
98
|
+
},
|
|
99
99
|
{
|
|
100
100
|
"name": ".value",
|
|
101
|
-
"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.2.0-
|
|
101
|
+
"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.2.0-beta1/#/elements/vaadin-custom-field#property-formatValue)\nand [`parseValue`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-beta1/#/elements/vaadin-custom-field#property-parseValue)\nproperties to customize this behavior.",
|
|
102
102
|
"value": {
|
|
103
103
|
"kind": "expression"
|
|
104
104
|
}
|