@vaadin/custom-field 24.0.0-alpha2 → 24.0.0-alpha3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/package.json +17 -17
  2. package/src/vaadin-custom-field.d.ts +29 -32
  3. package/src/vaadin-custom-field.js +58 -41
  4. package/web-types.json +17 -6
  5. 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-alpha2",
3
+ "version": "24.0.0-alpha3",
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-alpha2",
39
- "@vaadin/field-base": "24.0.0-alpha2",
40
- "@vaadin/vaadin-lumo-styles": "24.0.0-alpha2",
41
- "@vaadin/vaadin-material-styles": "24.0.0-alpha2",
42
- "@vaadin/vaadin-themable-mixin": "24.0.0-alpha2"
38
+ "@vaadin/component-base": "24.0.0-alpha3",
39
+ "@vaadin/field-base": "24.0.0-alpha3",
40
+ "@vaadin/vaadin-lumo-styles": "24.0.0-alpha3",
41
+ "@vaadin/vaadin-material-styles": "24.0.0-alpha3",
42
+ "@vaadin/vaadin-themable-mixin": "24.0.0-alpha3"
43
43
  },
44
44
  "devDependencies": {
45
45
  "@esm-bundle/chai": "^4.3.4",
46
- "@vaadin/combo-box": "24.0.0-alpha2",
47
- "@vaadin/date-picker": "24.0.0-alpha2",
48
- "@vaadin/email-field": "24.0.0-alpha2",
49
- "@vaadin/form-layout": "24.0.0-alpha2",
50
- "@vaadin/number-field": "24.0.0-alpha2",
51
- "@vaadin/password-field": "24.0.0-alpha2",
52
- "@vaadin/select": "24.0.0-alpha2",
46
+ "@vaadin/combo-box": "24.0.0-alpha3",
47
+ "@vaadin/date-picker": "24.0.0-alpha3",
48
+ "@vaadin/email-field": "24.0.0-alpha3",
49
+ "@vaadin/form-layout": "24.0.0-alpha3",
50
+ "@vaadin/number-field": "24.0.0-alpha3",
51
+ "@vaadin/password-field": "24.0.0-alpha3",
52
+ "@vaadin/select": "24.0.0-alpha3",
53
53
  "@vaadin/testing-helpers": "^0.3.2",
54
- "@vaadin/text-area": "24.0.0-alpha2",
55
- "@vaadin/text-field": "24.0.0-alpha2",
56
- "@vaadin/time-picker": "24.0.0-alpha2",
54
+ "@vaadin/text-area": "24.0.0-alpha3",
55
+ "@vaadin/text-field": "24.0.0-alpha3",
56
+ "@vaadin/time-picker": "24.0.0-alpha3",
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": "0c16c01a6807e629a84f5a982793afecc1a7ced0"
63
+ "gitHead": "7a013a3c5a56abd61dd4f7773c6ec77c3541bdf2"
64
64
  }
package/src/vaadin-custom-field.d.ts CHANGED
@@ -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
- * The object used to localize this component.
116
- * To change the default localization, replace the entire
117
- * _i18n_ object or just the property you want to modify.
118
- *
119
- * The object has the following JSON structure:
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
- * // A function to format given `Array` as
124
- * // component value. Array is list of all internal values
125
- * // in the order of their presence in the DOM
126
- * // This function is called each time the internal input
127
- * // value is changed.
128
- * formatValue: inputValues => {
129
- * // returns a representation of the given array of values
130
- * // in the form of string with delimiter characters
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
- * // A function to parse the given value to an `Array` in the format
134
- * // of the list of all internal values
135
- * // in the order of their presence in the DOM
136
- * // This function is called when value of the
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
- i18n: CustomFieldI18n;
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. Use the [`i18n`](#/elements/vaadin-custom-field#property-i18n)
155
- * property to customize this behavior.
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
 
package/src/vaadin-custom-field.js CHANGED
@@ -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. Use the [`i18n`](#/elements/vaadin-custom-field#property-i18n)
134
- * property to customize this behavior.
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
- * The object used to localize this component.
153
- * To change the default localization, replace the entire
154
- * _i18n_ object or just the property you want to modify.
155
- *
156
- * The object has the following JSON structure:
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
- * // A function to format given `Array` as
161
- * // component value. Array is list of all internal values
162
- * // in the order of their presence in the DOM
163
- * // This function is called each time the internal input
164
- * // value is changed.
165
- * formatValue: inputValues => {
166
- * // returns a representation of the given array of values
167
- * // in the form of string with delimiter characters
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
- * // A function to parse the given value to an `Array` in the format
171
- * // of the list of all internal values
172
- * // in the order of their presence in the DOM
173
- * // This function is called when value of the
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
- i18n: {
184
- type: Object,
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
- this.value = this.i18n.formatValue.apply(this, [this.inputs.map((input) => input.value)]);
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 valuesArray = this.i18n.parseValue(value);
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-alpha2",
4
+ "version": "24.0.0-alpha3",
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. Use the [`i18n`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha2/#/elements/vaadin-custom-field#property-i18n)\nproperty to customize this behavior.",
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-alpha3/#/elements/vaadin-custom-field#property-formatValue)\nand [`parseValue`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha3/#/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. Use the [`i18n`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha2/#/elements/vaadin-custom-field#property-i18n)\nproperty to customize this behavior.",
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-alpha3/#/elements/vaadin-custom-field#property-formatValue)\nand [`parseValue`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha3/#/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": "i18n",
183
- "description": "The object used to localize this component.\nTo change the default localization, replace the entire\n_i18n_ object or just the property you want to modify.\n\nThe object has the following JSON structure:\n\n```\n{\n // A function to format given `Array` as\n // component value. Array is list of all internal values\n // in the order of their presence in the DOM\n // This function is called each time the internal input\n // value is changed.\n formatValue: inputValues => {\n // returns a representation of the given array of values\n // in the form of string with delimiter characters\n },\n\n // A function to parse the given value to an `Array` in the format\n // of the list of all internal values\n // in the order of their presence in the DOM\n // This function is called when value of the\n // custom field is set.\n parseValue: value => {\n // returns the array of values from parsed value string.\n }\n}\n```",
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
- "CustomFieldI18n"
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-alpha2",
4
+ "version": "24.0.0-alpha3",
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. Use the [`i18n`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha2/#/elements/vaadin-custom-field#property-i18n)\nproperty to customize this behavior.",
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-alpha3/#/elements/vaadin-custom-field#property-formatValue)\nand [`parseValue`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha3/#/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": ".i18n",
73
- "description": "The object used to localize this component.\nTo change the default localization, replace the entire\n_i18n_ object or just the property you want to modify.\n\nThe object has the following JSON structure:\n\n```\n{\n // A function to format given `Array` as\n // component value. Array is list of all internal values\n // in the order of their presence in the DOM\n // This function is called each time the internal input\n // value is changed.\n formatValue: inputValues => {\n // returns a representation of the given array of values\n // in the form of string with delimiter characters\n },\n\n // A function to parse the given value to an `Array` in the format\n // of the list of all internal values\n // in the order of their presence in the DOM\n // This function is called when value of the\n // custom field is set.\n parseValue: value => {\n // returns the array of values from parsed value string.\n }\n}\n```",
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
  }