@vaadin/custom-field 23.3.0-alpha4 → 23.3.0-alpha6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/custom-field",
-  "version": "23.3.0-alpha4",
+  "version": "23.3.0-alpha6",
   "publishConfig": {
     "access": "public"
   },
@@ -35,30 +35,30 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "23.3.0-alpha4",
-    "@vaadin/field-base": "23.3.0-alpha4",
-    "@vaadin/vaadin-lumo-styles": "23.3.0-alpha4",
-    "@vaadin/vaadin-material-styles": "23.3.0-alpha4",
-    "@vaadin/vaadin-themable-mixin": "23.3.0-alpha4"
+    "@vaadin/component-base": "23.3.0-alpha6",
+    "@vaadin/field-base": "23.3.0-alpha6",
+    "@vaadin/vaadin-lumo-styles": "23.3.0-alpha6",
+    "@vaadin/vaadin-material-styles": "23.3.0-alpha6",
+    "@vaadin/vaadin-themable-mixin": "23.3.0-alpha6"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/combo-box": "23.3.0-alpha4",
-    "@vaadin/date-picker": "23.3.0-alpha4",
-    "@vaadin/email-field": "23.3.0-alpha4",
-    "@vaadin/form-layout": "23.3.0-alpha4",
-    "@vaadin/number-field": "23.3.0-alpha4",
-    "@vaadin/password-field": "23.3.0-alpha4",
-    "@vaadin/select": "23.3.0-alpha4",
+    "@vaadin/combo-box": "23.3.0-alpha6",
+    "@vaadin/date-picker": "23.3.0-alpha6",
+    "@vaadin/email-field": "23.3.0-alpha6",
+    "@vaadin/form-layout": "23.3.0-alpha6",
+    "@vaadin/number-field": "23.3.0-alpha6",
+    "@vaadin/password-field": "23.3.0-alpha6",
+    "@vaadin/select": "23.3.0-alpha6",
     "@vaadin/testing-helpers": "^0.3.2",
-    "@vaadin/text-area": "23.3.0-alpha4",
-    "@vaadin/text-field": "23.3.0-alpha4",
-    "@vaadin/time-picker": "23.3.0-alpha4",
+    "@vaadin/text-area": "23.3.0-alpha6",
+    "@vaadin/text-field": "23.3.0-alpha6",
+    "@vaadin/time-picker": "23.3.0-alpha6",
     "sinon": "^13.0.2"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "da037c0aa36e4b2874f253967300f6ca1af27315"
+  "gitHead": "796e51380384cfa30282eecbc4e0463038298547"
 }

package/src/vaadin-custom-field.d.ts

@@ -111,6 +111,39 @@ declare class CustomField extends FieldMixin(FocusMixin(KeyboardMixin(ThemableMi
    */
   readonly inputs: HTMLElement[] | undefined;
 
+  /**
+   * A function to format the values of the individual fields contained by
+   * the custom field into a single component value. The function receives
+   * an array of all values of the individual fields in the order of their
+   * presence in the DOM, and must return a single component value.
+   * This function is called each time a value of an internal field is
+   * changed.
+   *
+   * Example:
+   * ```js
+   * customField.formatValue = (fieldValues) => {
+   *   return fieldValues.join("-");
+   * }
+   * ```
+   */
+  formatValue: CustomFieldFormatValueFn | undefined;
+
+  /**
+   * A function to parse the component value into values for the individual
+   * fields contained by the custom field. The function receives the
+   * component value, and must return an array of values for the individual
+   * fields in the order of their presence in the DOM.
+   * The function is called each time the value of the component changes.
+   *
+   * Example:
+   * ```js
+   * customField.parseValue = (componentValue) => {
+   *   return componentValue.split("-");
+   * }
+   * ```
+   */
+  parseValue: CustomFieldParseValueFn | undefined;
+
   /**
    * The object used to localize this component.
    * To change the default localization, replace the entire
@@ -140,6 +173,9 @@ declare class CustomField extends FieldMixin(FocusMixin(KeyboardMixin(ThemableMi
    *   }
    * }
    * ```
+   * @deprecated Since 23.3
+   * Use the [`formatValue`](#/elements/vaadin-custom-field#property-formatValue)
+   * and [`parseValue`](#/elements/vaadin-custom-field#property-parseValue) properties instead
    */
   i18n: CustomFieldI18n;
 
@@ -151,8 +187,10 @@ declare class CustomField extends FieldMixin(FocusMixin(KeyboardMixin(ThemableMi
   /**
    * The value of the field. When wrapping several inputs, it will contain `\t`
    * (Tab character) as a delimiter indicating parts intended to be used as the
-   * corresponding inputs values. Use the [`i18n`](#/elements/vaadin-custom-field#property-i18n)
-   * property to customize this behavior.
+   * corresponding inputs values.
+   * Use the [`formatValue`](#/elements/vaadin-custom-field#property-formatValue)
+   * and [`parseValue`](#/elements/vaadin-custom-field#property-parseValue)
+   * properties to customize this behavior.
    */
   value: string | null | undefined;
 

package/src/vaadin-custom-field.js

@@ -130,8 +130,10 @@ class CustomField extends FieldMixin(FocusMixin(KeyboardMixin(ThemableMixin(Elem
       /**
        * The value of the field. When wrapping several inputs, it will contain `\t`
        * (Tab character) as a delimiter indicating parts intended to be used as the
-       * corresponding inputs values. Use the [`i18n`](#/elements/vaadin-custom-field#property-i18n)
-       * property to customize this behavior.
+       * corresponding inputs values.
+       * Use the [`formatValue`](#/elements/vaadin-custom-field#property-formatValue)
+       * and [`parseValue`](#/elements/vaadin-custom-field#property-parseValue)
+       * properties to customize this behavior.
        */
       value: {
         type: String,
@@ -148,6 +150,45 @@ class CustomField extends FieldMixin(FocusMixin(KeyboardMixin(ThemableMixin(Elem
         readOnly: true,
       },
 
+      /**
+       * A function to format the values of the individual fields contained by
+       * the custom field into a single component value. The function receives
+       * an array of all values of the individual fields in the order of their
+       * presence in the DOM, and must return a single component value.
+       * This function is called each time a value of an internal field is
+       * changed.
+       *
+       * Example:
+       * ```js
+       * customField.formatValue = (fieldValues) => {
+       *   return fieldValues.join("-");
+       * }
+       * ```
+       * @type {!CustomFieldFormatValueFn | undefined}
+       */
+      formatValue: {
+        type: Function,
+      },
+
+      /**
+       * A function to parse the component value into values for the individual
+       * fields contained by the custom field. The function receives the
+       * component value, and must return an array of values for the individual
+       * fields in the order of their presence in the DOM.
+       * The function is called each time the value of the component changes.
+       *
+       * Example:
+       * ```js
+       * customField.parseValue = (componentValue) => {
+       *   return componentValue.split("-");
+       * }
+       * ```
+       * @type {!CustomFieldParseValueFn | undefined}
+       */
+      parseValue: {
+        type: Function,
+      },
+
       /**
        * The object used to localize this component.
        * To change the default localization, replace the entire
@@ -179,6 +220,9 @@ class CustomField extends FieldMixin(FocusMixin(KeyboardMixin(ThemableMixin(Elem
        * ```
        *
        * @type {!CustomFieldI18n}
+       * @deprecated Since 23.3
+       * Use the [`formatValue`](#/elements/vaadin-custom-field#property-formatValue)
+       * and [`parseValue`](#/elements/vaadin-custom-field#property-parseValue) properties instead
        */
       i18n: {
         type: Object,
@@ -324,7 +368,8 @@ class CustomField extends FieldMixin(FocusMixin(KeyboardMixin(ThemableMixin(Elem
   /** @private */
   __setValue() {
     this.__settingValue = true;
-    this.value = this.i18n.formatValue.apply(this, [this.inputs.map((input) => input.value)]);
+    const formatFn = this.formatValue || this.i18n.formatValue;
+    this.value = formatFn.apply(this, [this.inputs.map((input) => input.value)]);
     this.__settingValue = false;
   }
 
@@ -375,7 +420,8 @@ class CustomField extends FieldMixin(FocusMixin(KeyboardMixin(ThemableMixin(Elem
 
     this.__toggleHasValue(value);
 
-    const valuesArray = this.i18n.parseValue(value);
+    const parseFn = this.parseValue || this.i18n.parseValue;
+    const valuesArray = parseFn.apply(this, [value]);
     if (!valuesArray || valuesArray.length === 0) {
       console.warn('Value parser has not provided values array');
       return;

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/custom-field",
-  "version": "23.3.0-alpha4",
+  "version": "23.3.0-alpha6",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -78,7 +78,7 @@
             },
             {
               "name": "value",
-              "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/23.3.0-alpha4/#/elements/vaadin-custom-field#property-i18n)\nproperty to customize this behavior.",
+              "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/23.3.0-alpha6/#/elements/vaadin-custom-field#property-formatValue)\nand [`parseValue`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha6/#/elements/vaadin-custom-field#property-parseValue)\nproperties to customize this behavior.",
               "value": {
                 "type": [
                   "string",
@@ -169,7 +169,7 @@
               },
               {
                 "name": "value",
-                "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/23.3.0-alpha4/#/elements/vaadin-custom-field#property-i18n)\nproperty to customize this behavior.",
+                "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/23.3.0-alpha6/#/elements/vaadin-custom-field#property-formatValue)\nand [`parseValue`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha6/#/elements/vaadin-custom-field#property-parseValue)\nproperties to customize this behavior.",
                 "value": {
                   "type": [
                     "string",
@@ -178,6 +178,26 @@
                   ]
                 }
               },
+              {
+                "name": "formatValue",
+                "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```",
+                "value": {
+                  "type": [
+                    "CustomFieldFormatValueFn",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "parseValue",
+                "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```",
+                "value": {
+                  "type": [
+                    "CustomFieldParseValueFn",
+                    "undefined"
+                  ]
+                }
+              },
               {
                 "name": "i18n",
                 "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```",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/custom-field",
-  "version": "23.3.0-alpha4",
+  "version": "23.3.0-alpha6",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -63,7 +63,21 @@
             },
             {
               "name": ".value",
-              "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/23.3.0-alpha4/#/elements/vaadin-custom-field#property-i18n)\nproperty to customize this behavior.",
+              "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/23.3.0-alpha6/#/elements/vaadin-custom-field#property-formatValue)\nand [`parseValue`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha6/#/elements/vaadin-custom-field#property-parseValue)\nproperties to customize this behavior.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".formatValue",
+              "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```",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".parseValue",
+              "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```",
               "value": {
                 "kind": "expression"
               }