@vaadin/custom-field 23.3.3 → 24.0.0-alpha10
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 +17 -17
- package/src/vaadin-custom-field.d.ts +1 -42
- package/src/vaadin-custom-field.js +23 -52
- package/theme/lumo/vaadin-custom-field-styles.js +1 -1
- package/theme/lumo/vaadin-custom-field.js +1 -1
- package/theme/material/vaadin-custom-field-styles.js +1 -1
- package/theme/material/vaadin-custom-field.js +1 -1
- package/web-types.json +3 -12
- package/web-types.lit.json +2 -9
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/custom-field",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "24.0.0-alpha10",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -35,30 +35,30 @@
|
|
|
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": "24.0.0-alpha10",
|
|
39
|
+
"@vaadin/field-base": "24.0.0-alpha10",
|
|
40
|
+
"@vaadin/vaadin-lumo-styles": "24.0.0-alpha10",
|
|
41
|
+
"@vaadin/vaadin-material-styles": "24.0.0-alpha10",
|
|
42
|
+
"@vaadin/vaadin-themable-mixin": "24.0.0-alpha10"
|
|
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/number-field": "
|
|
51
|
-
"@vaadin/password-field": "
|
|
52
|
-
"@vaadin/select": "
|
|
46
|
+
"@vaadin/combo-box": "24.0.0-alpha10",
|
|
47
|
+
"@vaadin/date-picker": "24.0.0-alpha10",
|
|
48
|
+
"@vaadin/email-field": "24.0.0-alpha10",
|
|
49
|
+
"@vaadin/form-layout": "24.0.0-alpha10",
|
|
50
|
+
"@vaadin/number-field": "24.0.0-alpha10",
|
|
51
|
+
"@vaadin/password-field": "24.0.0-alpha10",
|
|
52
|
+
"@vaadin/select": "24.0.0-alpha10",
|
|
53
53
|
"@vaadin/testing-helpers": "^0.3.2",
|
|
54
|
-
"@vaadin/text-area": "
|
|
55
|
-
"@vaadin/text-field": "
|
|
56
|
-
"@vaadin/time-picker": "
|
|
54
|
+
"@vaadin/text-area": "24.0.0-alpha10",
|
|
55
|
+
"@vaadin/text-field": "24.0.0-alpha10",
|
|
56
|
+
"@vaadin/time-picker": "24.0.0-alpha10",
|
|
57
57
|
"sinon": "^13.0.2"
|
|
58
58
|
},
|
|
59
59
|
"web-types": [
|
|
60
60
|
"web-types.json",
|
|
61
61
|
"web-types.lit.json"
|
|
62
62
|
],
|
|
63
|
-
"gitHead": "
|
|
63
|
+
"gitHead": "2e04534d8b47bcd216f89b5f849bafef1a73b174"
|
|
64
64
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2019 -
|
|
3
|
+
* Copyright (c) 2019 - 2023 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
@@ -13,12 +13,6 @@ export type CustomFieldParseValueFn = (value: string) => unknown[];
|
|
|
13
13
|
|
|
14
14
|
export type CustomFieldFormatValueFn = (inputValues: unknown[]) => string;
|
|
15
15
|
|
|
16
|
-
export interface CustomFieldI18n {
|
|
17
|
-
parseValue: CustomFieldParseValueFn;
|
|
18
|
-
|
|
19
|
-
formatValue: CustomFieldFormatValueFn;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
16
|
/**
|
|
23
17
|
* Fired when the user commits a value change.
|
|
24
18
|
*/
|
|
@@ -144,41 +138,6 @@ declare class CustomField extends FieldMixin(FocusMixin(KeyboardMixin(ThemableMi
|
|
|
144
138
|
*/
|
|
145
139
|
parseValue: CustomFieldParseValueFn | undefined;
|
|
146
140
|
|
|
147
|
-
/**
|
|
148
|
-
* The object used to localize this component.
|
|
149
|
-
* To change the default localization, replace the entire
|
|
150
|
-
* _i18n_ object or just the property you want to modify.
|
|
151
|
-
*
|
|
152
|
-
* The object has the following JSON structure:
|
|
153
|
-
*
|
|
154
|
-
* ```
|
|
155
|
-
* {
|
|
156
|
-
* // A function to format given `Array` as
|
|
157
|
-
* // component value. Array is list of all internal values
|
|
158
|
-
* // in the order of their presence in the DOM
|
|
159
|
-
* // This function is called each time the internal input
|
|
160
|
-
* // value is changed.
|
|
161
|
-
* formatValue: inputValues => {
|
|
162
|
-
* // returns a representation of the given array of values
|
|
163
|
-
* // in the form of string with delimiter characters
|
|
164
|
-
* },
|
|
165
|
-
*
|
|
166
|
-
* // A function to parse the given value to an `Array` in the format
|
|
167
|
-
* // of the list of all internal values
|
|
168
|
-
* // in the order of their presence in the DOM
|
|
169
|
-
* // This function is called when value of the
|
|
170
|
-
* // custom field is set.
|
|
171
|
-
* parseValue: value => {
|
|
172
|
-
* // returns the array of values from parsed value string.
|
|
173
|
-
* }
|
|
174
|
-
* }
|
|
175
|
-
* ```
|
|
176
|
-
* @deprecated Since 23.3
|
|
177
|
-
* Use the [`formatValue`](#/elements/vaadin-custom-field#property-formatValue)
|
|
178
|
-
* and [`parseValue`](#/elements/vaadin-custom-field#property-parseValue) properties instead
|
|
179
|
-
*/
|
|
180
|
-
i18n: CustomFieldI18n;
|
|
181
|
-
|
|
182
141
|
/**
|
|
183
142
|
* The name of the control, which is submitted with the form data.
|
|
184
143
|
*/
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2019 -
|
|
3
|
+
* Copyright (c) 2019 - 2023 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
|
|
@@ -12,6 +12,26 @@ import { TooltipController } from '@vaadin/component-base/src/tooltip-controller
|
|
|
12
12
|
import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
|
|
13
13
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
14
14
|
|
|
15
|
+
/**
|
|
16
|
+
* Default implementation of the parse function that creates individual field
|
|
17
|
+
* values from the single component value.
|
|
18
|
+
* @param value
|
|
19
|
+
* @returns {*}
|
|
20
|
+
*/
|
|
21
|
+
const defaultParseValue = (value) => {
|
|
22
|
+
return value.split('\t');
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
/**
|
|
26
|
+
* Default implementation of the format function that creates a single component
|
|
27
|
+
* value from individual field values.
|
|
28
|
+
* @param inputValues
|
|
29
|
+
* @returns {*}
|
|
30
|
+
*/
|
|
31
|
+
const defaultFormatValue = (inputValues) => {
|
|
32
|
+
return inputValues.join('\t');
|
|
33
|
+
};
|
|
34
|
+
|
|
15
35
|
/**
|
|
16
36
|
* `<vaadin-custom-field>` is a web component for wrapping multiple components as a single field.
|
|
17
37
|
*
|
|
@@ -188,55 +208,6 @@ class CustomField extends FieldMixin(FocusMixin(KeyboardMixin(ThemableMixin(Elem
|
|
|
188
208
|
parseValue: {
|
|
189
209
|
type: Function,
|
|
190
210
|
},
|
|
191
|
-
|
|
192
|
-
/**
|
|
193
|
-
* The object used to localize this component.
|
|
194
|
-
* To change the default localization, replace the entire
|
|
195
|
-
* _i18n_ object or just the property you want to modify.
|
|
196
|
-
*
|
|
197
|
-
* The object has the following JSON structure:
|
|
198
|
-
*
|
|
199
|
-
* ```
|
|
200
|
-
* {
|
|
201
|
-
* // A function to format given `Array` as
|
|
202
|
-
* // component value. Array is list of all internal values
|
|
203
|
-
* // in the order of their presence in the DOM
|
|
204
|
-
* // This function is called each time the internal input
|
|
205
|
-
* // value is changed.
|
|
206
|
-
* formatValue: inputValues => {
|
|
207
|
-
* // returns a representation of the given array of values
|
|
208
|
-
* // in the form of string with delimiter characters
|
|
209
|
-
* },
|
|
210
|
-
*
|
|
211
|
-
* // A function to parse the given value to an `Array` in the format
|
|
212
|
-
* // of the list of all internal values
|
|
213
|
-
* // in the order of their presence in the DOM
|
|
214
|
-
* // This function is called when value of the
|
|
215
|
-
* // custom field is set.
|
|
216
|
-
* parseValue: value => {
|
|
217
|
-
* // returns the array of values from parsed value string.
|
|
218
|
-
* }
|
|
219
|
-
* }
|
|
220
|
-
* ```
|
|
221
|
-
*
|
|
222
|
-
* @type {!CustomFieldI18n}
|
|
223
|
-
* @deprecated Since 23.3
|
|
224
|
-
* Use the [`formatValue`](#/elements/vaadin-custom-field#property-formatValue)
|
|
225
|
-
* and [`parseValue`](#/elements/vaadin-custom-field#property-parseValue) properties instead
|
|
226
|
-
*/
|
|
227
|
-
i18n: {
|
|
228
|
-
type: Object,
|
|
229
|
-
value: () => {
|
|
230
|
-
return {
|
|
231
|
-
parseValue(value) {
|
|
232
|
-
return value.split('\t');
|
|
233
|
-
},
|
|
234
|
-
formatValue(inputValues) {
|
|
235
|
-
return inputValues.join('\t');
|
|
236
|
-
},
|
|
237
|
-
};
|
|
238
|
-
},
|
|
239
|
-
},
|
|
240
211
|
};
|
|
241
212
|
}
|
|
242
213
|
|
|
@@ -368,7 +339,7 @@ class CustomField extends FieldMixin(FocusMixin(KeyboardMixin(ThemableMixin(Elem
|
|
|
368
339
|
/** @private */
|
|
369
340
|
__setValue() {
|
|
370
341
|
this.__settingValue = true;
|
|
371
|
-
const formatFn = this.formatValue ||
|
|
342
|
+
const formatFn = this.formatValue || defaultFormatValue;
|
|
372
343
|
this.value = formatFn.apply(this, [this.inputs.map((input) => input.value)]);
|
|
373
344
|
this.__settingValue = false;
|
|
374
345
|
}
|
|
@@ -420,7 +391,7 @@ class CustomField extends FieldMixin(FocusMixin(KeyboardMixin(ThemableMixin(Elem
|
|
|
420
391
|
|
|
421
392
|
this.__toggleHasValue(value);
|
|
422
393
|
|
|
423
|
-
const parseFn = this.parseValue ||
|
|
394
|
+
const parseFn = this.parseValue || defaultParseValue;
|
|
424
395
|
const valuesArray = parseFn.apply(this, [value]);
|
|
425
396
|
if (!valuesArray || valuesArray.length === 0) {
|
|
426
397
|
console.warn('Value parser has not provided values array');
|
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": "
|
|
4
|
+
"version": "24.0.0-alpha10",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -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.\nUse the [`formatValue`](https://cdn.vaadin.com/vaadin-web-components/
|
|
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.\nUse the [`formatValue`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha10/#/elements/vaadin-custom-field#property-formatValue)\nand [`parseValue`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha10/#/elements/vaadin-custom-field#property-parseValue)\nproperties 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.\nUse the [`formatValue`](https://cdn.vaadin.com/vaadin-web-components/
|
|
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.\nUse the [`formatValue`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha10/#/elements/vaadin-custom-field#property-formatValue)\nand [`parseValue`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha10/#/elements/vaadin-custom-field#property-parseValue)\nproperties to customize this behavior.",
|
|
173
173
|
"value": {
|
|
174
174
|
"type": [
|
|
175
175
|
"string",
|
|
@@ -197,15 +197,6 @@
|
|
|
197
197
|
"undefined"
|
|
198
198
|
]
|
|
199
199
|
}
|
|
200
|
-
},
|
|
201
|
-
{
|
|
202
|
-
"name": "i18n",
|
|
203
|
-
"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```",
|
|
204
|
-
"value": {
|
|
205
|
-
"type": [
|
|
206
|
-
"CustomFieldI18n"
|
|
207
|
-
]
|
|
208
|
-
}
|
|
209
200
|
}
|
|
210
201
|
],
|
|
211
202
|
"events": [
|
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": "
|
|
4
|
+
"version": "24.0.0-alpha10",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -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.\nUse the [`formatValue`](https://cdn.vaadin.com/vaadin-web-components/
|
|
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.\nUse the [`formatValue`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha10/#/elements/vaadin-custom-field#property-formatValue)\nand [`parseValue`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha10/#/elements/vaadin-custom-field#property-parseValue)\nproperties to customize this behavior.",
|
|
67
67
|
"value": {
|
|
68
68
|
"kind": "expression"
|
|
69
69
|
}
|
|
@@ -82,13 +82,6 @@
|
|
|
82
82
|
"kind": "expression"
|
|
83
83
|
}
|
|
84
84
|
},
|
|
85
|
-
{
|
|
86
|
-
"name": ".i18n",
|
|
87
|
-
"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```",
|
|
88
|
-
"value": {
|
|
89
|
-
"kind": "expression"
|
|
90
|
-
}
|
|
91
|
-
},
|
|
92
85
|
{
|
|
93
86
|
"name": "@validated",
|
|
94
87
|
"description": "Fired whenever the field is validated.",
|