@vaadin/number-field - npm Package Compare versions

Comparing version 24.7.0-alpha2 to 24.7.0-alpha3

package.json

 {
   "name": "@vaadin/number-field",
-  "version": "24.7.0-alpha2",
+  "version": "24.7.0-alpha3",
   "publishConfig": {
@@ -39,14 +39,14 @@ "access": "public"
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.7.0-alpha2",
-    "@vaadin/component-base": "24.7.0-alpha2",
-    "@vaadin/field-base": "24.7.0-alpha2",
-    "@vaadin/input-container": "24.7.0-alpha2",
-    "@vaadin/vaadin-lumo-styles": "24.7.0-alpha2",
-    "@vaadin/vaadin-material-styles": "24.7.0-alpha2",
-    "@vaadin/vaadin-themable-mixin": "24.7.0-alpha2",
+    "@vaadin/a11y-base": "24.7.0-alpha3",
+    "@vaadin/component-base": "24.7.0-alpha3",
+    "@vaadin/field-base": "24.7.0-alpha3",
+    "@vaadin/input-container": "24.7.0-alpha3",
+    "@vaadin/vaadin-lumo-styles": "24.7.0-alpha3",
+    "@vaadin/vaadin-material-styles": "24.7.0-alpha3",
+    "@vaadin/vaadin-themable-mixin": "24.7.0-alpha3",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.7.0-alpha2",
-    "@vaadin/testing-helpers": "^1.0.0",
+    "@vaadin/chai-plugins": "24.7.0-alpha3",
+    "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
@@ -58,3 +58,3 @@ },
   ],
-  "gitHead": "e2523f9b4abc5a9586fb758166f823dc40c399dd"
+  "gitHead": "dd5cfad6c9b54e676f5b10dffba2233775378f40"
 }

src/vaadin-number-field-mixin.js

@@ -7,3 +7,3 @@ /**
 import { getDeepActiveElement } from '@vaadin/a11y-base/src/focus-utils.js';
-import { TooltipController } from '@vaadin/component-base/src/tooltip-controller';
+import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
 import { InputController } from '@vaadin/field-base/src/input-controller.js';
@@ -13,2 +13,11 @@ import { InputFieldMixin } from '@vaadin/field-base/src/input-field-mixin.js';
 
+// [type=number] value returns an empty string for invalid numbers,
+// while valueAsNumber returns NaN for empty strings, which makes
+// invalid and empty values indistinguishable. It's only possible
+// to detect unparsable input by checking the validity.badInput
+// boolean property. This string is used in _inputElementValue
+// as a marker to help Flow detect and clear unparsable values
+// through that property.
+const BAD_INPUT_STRING = 'NaN';
+
 /**
@@ -116,3 +125,3 @@ * A mixin providing common number field functionality.
     get __hasUnparsableValue() {
-      return this.inputElement.validity.badInput;
+      return this._inputElementValue === BAD_INPUT_STRING;
     }
@@ -412,18 +421,2 @@
     /**
-     * Native [type=number] inputs don't update their value
-     * when you are entering input that the browser is unable to parse
-     * e.g. "--5", hence we have to override this method from `InputMixin`
-     * so that, when value is empty, it would additionally check
-     * for bad input based on the native `validity.badInput` property.
-     *
-     * @param {InputEvent} event
-     * @protected
-     * @override
-     */
-    _setHasInputValue(event) {
-      const target = event.composedPath()[0];
-      this._hasInputValue = target.value.length > 0 || this.__hasUnparsableValue;
-    }
-
-    /**
      * Override this method from `InputMixin` to prevent
@@ -534,2 +527,16 @@ * the value change caused by user input from being treated
     }
+
+    /** @override */
+    get _inputElementValue() {
+      if (this.inputElement && this.inputElement.validity.badInput) {
+        return BAD_INPUT_STRING;
+      }
+
+      return super._inputElementValue;
+    }
+
+    /** @override */
+    set _inputElementValue(value) {
+      super._inputElementValue = value;
+    }
   };

web-types.json

 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/number-field",
-  "version": "24.7.0-alpha2",
+  "version": "24.7.0-alpha3",
   "description-markup": "markdown",
@@ -11,3 +11,3 @@ "contributions": {
           "name": "vaadin-number-field",
-          "description": "`<vaadin-number-field>` is an input field web component that only accepts numeric input.\n\n```html\n<vaadin-number-field label=\"Balance\"></vaadin-number-field>\n```\n\n### Styling\n\n`<vaadin-number-field>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha2/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name         | Description\n------------------|-------------------------\n`increase-button` | Increase (\"plus\") button\n`decrease-button` | Decrease (\"minus\") button\n\nNote, the `input-prevented` state attribute is only supported when `allowedCharPattern` is set.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change             | Event\n:------------------------|:------------------\nempty => parsable        | change\nempty => unparsable      | unparsable-change\nparsable => empty        | change\nparsable => parsable     | change\nparsable => unparsable   | change\nunparsable => empty      | unparsable-change\nunparsable => parsable   | change\nunparsable => unparsable | -\n\nNote, there is currently no way to detect unparsable => unparsable changes because the browser\ndoesn't provide access to unparsable values of native [type=number] inputs.",
+          "description": "`<vaadin-number-field>` is an input field web component that only accepts numeric input.\n\n```html\n<vaadin-number-field label=\"Balance\"></vaadin-number-field>\n```\n\n### Styling\n\n`<vaadin-number-field>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha3/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name         | Description\n------------------|-------------------------\n`increase-button` | Increase (\"plus\") button\n`decrease-button` | Decrease (\"minus\") button\n\nNote, the `input-prevented` state attribute is only supported when `allowedCharPattern` is set.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change             | Event\n:------------------------|:------------------\nempty => parsable        | change\nempty => unparsable      | unparsable-change\nparsable => empty        | change\nparsable => parsable     | change\nparsable => unparsable   | change\nunparsable => empty      | unparsable-change\nunparsable => parsable   | change\nunparsable => unparsable | -\n\nNote, there is currently no way to detect unparsable => unparsable changes because the browser\ndoesn't provide access to unparsable values of native [type=number] inputs.",
           "attributes": [
@@ -14,0 +14,0 @@ {

web-types.lit.json

 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/number-field",
-  "version": "24.7.0-alpha2",
+  "version": "24.7.0-alpha3",
   "description-markup": "markdown",
@@ -19,3 +19,3 @@ "framework": "lit",
           "name": "vaadin-number-field",
-          "description": "`<vaadin-number-field>` is an input field web component that only accepts numeric input.\n\n```html\n<vaadin-number-field label=\"Balance\"></vaadin-number-field>\n```\n\n### Styling\n\n`<vaadin-number-field>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha2/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name         | Description\n------------------|-------------------------\n`increase-button` | Increase (\"plus\") button\n`decrease-button` | Decrease (\"minus\") button\n\nNote, the `input-prevented` state attribute is only supported when `allowedCharPattern` is set.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change             | Event\n:------------------------|:------------------\nempty => parsable        | change\nempty => unparsable      | unparsable-change\nparsable => empty        | change\nparsable => parsable     | change\nparsable => unparsable   | change\nunparsable => empty      | unparsable-change\nunparsable => parsable   | change\nunparsable => unparsable | -\n\nNote, there is currently no way to detect unparsable => unparsable changes because the browser\ndoesn't provide access to unparsable values of native [type=number] inputs.",
+          "description": "`<vaadin-number-field>` is an input field web component that only accepts numeric input.\n\n```html\n<vaadin-number-field label=\"Balance\"></vaadin-number-field>\n```\n\n### Styling\n\n`<vaadin-number-field>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha3/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name         | Description\n------------------|-------------------------\n`increase-button` | Increase (\"plus\") button\n`decrease-button` | Decrease (\"minus\") button\n\nNote, the `input-prevented` state attribute is only supported when `allowedCharPattern` is set.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change             | Event\n:------------------------|:------------------\nempty => parsable        | change\nempty => unparsable      | unparsable-change\nparsable => empty        | change\nparsable => parsable     | change\nparsable => unparsable   | change\nunparsable => empty      | unparsable-change\nunparsable => parsable   | change\nunparsable => unparsable | -\n\nNote, there is currently no way to detect unparsable => unparsable changes because the browser\ndoesn't provide access to unparsable values of native [type=number] inputs.",
           "extension": true,
@@ -22,0 +22,0 @@ "attributes": [

No alert changes

Improved metrics

Total package byte prevSize

83872

increased by0.21%

Lines of code

1862

increased by0.22%

Dependency changes

• + Added@vaadin/a11y-base@24.7.0-alpha3(transitive)

• + Added@vaadin/component-base@24.7.0-alpha3(transitive)

• + Added@vaadin/field-base@24.7.0-alpha3(transitive)

• + Added@vaadin/icon@24.7.0-alpha3(transitive)

• + Added@vaadin/input-container@24.7.0-alpha3(transitive)

• + Added@vaadin/vaadin-lumo-styles@24.7.0-alpha3(transitive)

• + Added@vaadin/vaadin-material-styles@24.7.0-alpha3(transitive)

• + Added@vaadin/vaadin-themable-mixin@24.7.0-alpha3(transitive)

• - Removed@vaadin/a11y-base@24.7.0-alpha2(transitive)

• - Removed@vaadin/component-base@24.7.0-alpha2(transitive)

• - Removed@vaadin/field-base@24.7.0-alpha2(transitive)

• - Removed@vaadin/icon@24.7.0-alpha2(transitive)

• - Removed@vaadin/input-container@24.7.0-alpha2(transitive)

• - Removed@vaadin/vaadin-lumo-styles@24.7.0-alpha2(transitive)

• - Removed@vaadin/vaadin-material-styles@24.7.0-alpha2(transitive)

• - Removed@vaadin/vaadin-themable-mixin@24.7.0-alpha2(transitive)

• Updated@vaadin/a11y-base@24.7.0-alpha3

• Updated@vaadin/component-base@24.7.0-alpha3

• Updated@vaadin/field-base@24.7.0-alpha3

• Updated@vaadin/input-container@24.7.0-alpha3

• Updated@vaadin/vaadin-lumo-styles@24.7.0-alpha3

• Updated@vaadin/vaadin-material-styles@24.7.0-alpha3

• Updated@vaadin/vaadin-themable-mixin@24.7.0-alpha3