@vaadin/custom-field 24.0.0-alpha1 → 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 +30 -33
- package/src/vaadin-custom-field.js +59 -42
- 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 +17 -6
- package/web-types.lit.json +11 -4
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/custom-field",
|
|
3
|
-
"version": "24.0.0-
|
|
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": "24.0.0-
|
|
39
|
-
"@vaadin/field-base": "24.0.0-
|
|
40
|
-
"@vaadin/vaadin-lumo-styles": "24.0.0-
|
|
41
|
-
"@vaadin/vaadin-material-styles": "24.0.0-
|
|
42
|
-
"@vaadin/vaadin-themable-mixin": "24.0.0-
|
|
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": "24.0.0-
|
|
47
|
-
"@vaadin/date-picker": "24.0.0-
|
|
48
|
-
"@vaadin/email-field": "24.0.0-
|
|
49
|
-
"@vaadin/form-layout": "24.0.0-
|
|
50
|
-
"@vaadin/number-field": "24.0.0-
|
|
51
|
-
"@vaadin/password-field": "24.0.0-
|
|
52
|
-
"@vaadin/select": "24.0.0-
|
|
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": "24.0.0-
|
|
55
|
-
"@vaadin/text-field": "24.0.0-
|
|
56
|
-
"@vaadin/time-picker": "24.0.0-
|
|
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
|
*/
|
|
@@ -112,36 +106,37 @@ declare class CustomField extends FieldMixin(FocusMixin(KeyboardMixin(ThemableMi
|
|
|
112
106
|
readonly inputs: HTMLElement[] | undefined;
|
|
113
107
|
|
|
114
108
|
/**
|
|
115
|
-
*
|
|
116
|
-
*
|
|
117
|
-
*
|
|
118
|
-
*
|
|
119
|
-
*
|
|
109
|
+
* A function to format the values of the individual fields contained by
|
|
110
|
+
* the custom field into a single component value. The function receives
|
|
111
|
+
* an array of all values of the individual fields in the order of their
|
|
112
|
+
* presence in the DOM, and must return a single component value.
|
|
113
|
+
* This function is called each time a value of an internal field is
|
|
114
|
+
* changed.
|
|
120
115
|
*
|
|
116
|
+
* Example:
|
|
117
|
+
* ```js
|
|
118
|
+
* customField.formatValue = (fieldValues) => {
|
|
119
|
+
* return fieldValues.join("-");
|
|
120
|
+
* }
|
|
121
121
|
* ```
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
*
|
|
127
|
-
*
|
|
128
|
-
*
|
|
129
|
-
*
|
|
130
|
-
*
|
|
131
|
-
* },
|
|
122
|
+
*/
|
|
123
|
+
formatValue: CustomFieldFormatValueFn | undefined;
|
|
124
|
+
|
|
125
|
+
/**
|
|
126
|
+
* A function to parse the component value into values for the individual
|
|
127
|
+
* fields contained by the custom field. The function receives the
|
|
128
|
+
* component value, and must return an array of values for the individual
|
|
129
|
+
* fields in the order of their presence in the DOM.
|
|
130
|
+
* The function is called each time the value of the component changes.
|
|
132
131
|
*
|
|
133
|
-
*
|
|
134
|
-
*
|
|
135
|
-
*
|
|
136
|
-
*
|
|
137
|
-
* // custom field is set.
|
|
138
|
-
* parseValue: value => {
|
|
139
|
-
* // returns the array of values from parsed value string.
|
|
140
|
-
* }
|
|
132
|
+
* Example:
|
|
133
|
+
* ```js
|
|
134
|
+
* customField.parseValue = (componentValue) => {
|
|
135
|
+
* return componentValue.split("-");
|
|
141
136
|
* }
|
|
142
137
|
* ```
|
|
143
138
|
*/
|
|
144
|
-
|
|
139
|
+
parseValue: CustomFieldParseValueFn | undefined;
|
|
145
140
|
|
|
146
141
|
/**
|
|
147
142
|
* The name of the control, which is submitted with the form data.
|
|
@@ -151,8 +146,10 @@ declare class CustomField extends FieldMixin(FocusMixin(KeyboardMixin(ThemableMi
|
|
|
151
146
|
/**
|
|
152
147
|
* The value of the field. When wrapping several inputs, it will contain `\t`
|
|
153
148
|
* (Tab character) as a delimiter indicating parts intended to be used as the
|
|
154
|
-
* corresponding inputs values.
|
|
155
|
-
*
|
|
149
|
+
* corresponding inputs values.
|
|
150
|
+
* Use the [`formatValue`](#/elements/vaadin-custom-field#property-formatValue)
|
|
151
|
+
* and [`parseValue`](#/elements/vaadin-custom-field#property-parseValue)
|
|
152
|
+
* properties to customize this behavior.
|
|
156
153
|
*/
|
|
157
154
|
value: string | null | undefined;
|
|
158
155
|
|
|
@@ -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
|
*
|
|
@@ -130,8 +150,10 @@ class CustomField extends FieldMixin(FocusMixin(KeyboardMixin(ThemableMixin(Elem
|
|
|
130
150
|
/**
|
|
131
151
|
* The value of the field. When wrapping several inputs, it will contain `\t`
|
|
132
152
|
* (Tab character) as a delimiter indicating parts intended to be used as the
|
|
133
|
-
* corresponding inputs values.
|
|
134
|
-
*
|
|
153
|
+
* corresponding inputs values.
|
|
154
|
+
* Use the [`formatValue`](#/elements/vaadin-custom-field#property-formatValue)
|
|
155
|
+
* and [`parseValue`](#/elements/vaadin-custom-field#property-parseValue)
|
|
156
|
+
* properties to customize this behavior.
|
|
135
157
|
*/
|
|
136
158
|
value: {
|
|
137
159
|
type: String,
|
|
@@ -149,49 +171,42 @@ class CustomField extends FieldMixin(FocusMixin(KeyboardMixin(ThemableMixin(Elem
|
|
|
149
171
|
},
|
|
150
172
|
|
|
151
173
|
/**
|
|
152
|
-
*
|
|
153
|
-
*
|
|
154
|
-
*
|
|
155
|
-
*
|
|
156
|
-
*
|
|
174
|
+
* A function to format the values of the individual fields contained by
|
|
175
|
+
* the custom field into a single component value. The function receives
|
|
176
|
+
* an array of all values of the individual fields in the order of their
|
|
177
|
+
* presence in the DOM, and must return a single component value.
|
|
178
|
+
* This function is called each time a value of an internal field is
|
|
179
|
+
* changed.
|
|
157
180
|
*
|
|
181
|
+
* Example:
|
|
182
|
+
* ```js
|
|
183
|
+
* customField.formatValue = (fieldValues) => {
|
|
184
|
+
* return fieldValues.join("-");
|
|
185
|
+
* }
|
|
158
186
|
* ```
|
|
159
|
-
* {
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
*
|
|
167
|
-
*
|
|
168
|
-
*
|
|
187
|
+
* @type {!CustomFieldFormatValueFn | undefined}
|
|
188
|
+
*/
|
|
189
|
+
formatValue: {
|
|
190
|
+
type: Function,
|
|
191
|
+
},
|
|
192
|
+
|
|
193
|
+
/**
|
|
194
|
+
* A function to parse the component value into values for the individual
|
|
195
|
+
* fields contained by the custom field. The function receives the
|
|
196
|
+
* component value, and must return an array of values for the individual
|
|
197
|
+
* fields in the order of their presence in the DOM.
|
|
198
|
+
* The function is called each time the value of the component changes.
|
|
169
199
|
*
|
|
170
|
-
*
|
|
171
|
-
*
|
|
172
|
-
*
|
|
173
|
-
*
|
|
174
|
-
* // custom field is set.
|
|
175
|
-
* parseValue: value => {
|
|
176
|
-
* // returns the array of values from parsed value string.
|
|
177
|
-
* }
|
|
200
|
+
* Example:
|
|
201
|
+
* ```js
|
|
202
|
+
* customField.parseValue = (componentValue) => {
|
|
203
|
+
* return componentValue.split("-");
|
|
178
204
|
* }
|
|
179
205
|
* ```
|
|
180
|
-
*
|
|
181
|
-
* @type {!CustomFieldI18n}
|
|
206
|
+
* @type {!CustomFieldParseValueFn | undefined}
|
|
182
207
|
*/
|
|
183
|
-
|
|
184
|
-
type:
|
|
185
|
-
value: () => {
|
|
186
|
-
return {
|
|
187
|
-
parseValue(value) {
|
|
188
|
-
return value.split('\t');
|
|
189
|
-
},
|
|
190
|
-
formatValue(inputValues) {
|
|
191
|
-
return inputValues.join('\t');
|
|
192
|
-
},
|
|
193
|
-
};
|
|
194
|
-
},
|
|
208
|
+
parseValue: {
|
|
209
|
+
type: Function,
|
|
195
210
|
},
|
|
196
211
|
};
|
|
197
212
|
}
|
|
@@ -324,7 +339,8 @@ class CustomField extends FieldMixin(FocusMixin(KeyboardMixin(ThemableMixin(Elem
|
|
|
324
339
|
/** @private */
|
|
325
340
|
__setValue() {
|
|
326
341
|
this.__settingValue = true;
|
|
327
|
-
|
|
342
|
+
const formatFn = this.formatValue || defaultFormatValue;
|
|
343
|
+
this.value = formatFn.apply(this, [this.inputs.map((input) => input.value)]);
|
|
328
344
|
this.__settingValue = false;
|
|
329
345
|
}
|
|
330
346
|
|
|
@@ -375,7 +391,8 @@ class CustomField extends FieldMixin(FocusMixin(KeyboardMixin(ThemableMixin(Elem
|
|
|
375
391
|
|
|
376
392
|
this.__toggleHasValue(value);
|
|
377
393
|
|
|
378
|
-
const
|
|
394
|
+
const parseFn = this.parseValue || defaultParseValue;
|
|
395
|
+
const valuesArray = parseFn.apply(this, [value]);
|
|
379
396
|
if (!valuesArray || valuesArray.length === 0) {
|
|
380
397
|
console.warn('Value parser has not provided values array');
|
|
381
398
|
return;
|
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": "24.0.0-
|
|
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
|
|
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
|
|
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",
|
|
@@ -179,11 +179,22 @@
|
|
|
179
179
|
}
|
|
180
180
|
},
|
|
181
181
|
{
|
|
182
|
-
"name": "
|
|
183
|
-
"description": "
|
|
182
|
+
"name": "formatValue",
|
|
183
|
+
"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```",
|
|
184
184
|
"value": {
|
|
185
185
|
"type": [
|
|
186
|
-
"
|
|
186
|
+
"CustomFieldFormatValueFn",
|
|
187
|
+
"undefined"
|
|
188
|
+
]
|
|
189
|
+
}
|
|
190
|
+
},
|
|
191
|
+
{
|
|
192
|
+
"name": "parseValue",
|
|
193
|
+
"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```",
|
|
194
|
+
"value": {
|
|
195
|
+
"type": [
|
|
196
|
+
"CustomFieldParseValueFn",
|
|
197
|
+
"undefined"
|
|
187
198
|
]
|
|
188
199
|
}
|
|
189
200
|
}
|
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": "24.0.0-
|
|
4
|
+
"version": "24.0.0-alpha10",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -63,14 +63,21 @@
|
|
|
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
|
|
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
|
}
|
|
70
70
|
},
|
|
71
71
|
{
|
|
72
|
-
"name": ".
|
|
73
|
-
"description": "
|
|
72
|
+
"name": ".formatValue",
|
|
73
|
+
"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```",
|
|
74
|
+
"value": {
|
|
75
|
+
"kind": "expression"
|
|
76
|
+
}
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
"name": ".parseValue",
|
|
80
|
+
"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```",
|
|
74
81
|
"value": {
|
|
75
82
|
"kind": "expression"
|
|
76
83
|
}
|