@vaadin/vaadin-text-field - npm Package Compare versions

Comparing version 2.3.5 to 2.3.6

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-text-field",
-  "version": "2.3.5",
+  "version": "2.3.6",
   "main": "vaadin-text-field.js",
@@ -16,0 +16,0 @@ "author": "Vaadin Ltd",

README.md

@@ -133,3 +133,3 @@ [![npm version](https://badge.fury.io/js/%40vaadin%2Fvaadin-text-field.svg)](https://badge.fury.io/js/%40vaadin%2Fvaadin-text-field)
 
-We are using [ESLint](http://eslint.org/) for linting JavaScript code. You can check if your code is following our standards by running `gulp lint`, which will automatically lint all `.js` files as well as JavaScript snippets inside `.html` files.
+We are using [ESLint](http://eslint.org/) for linting JavaScript code. You can check if your code is following our standards by running `npm run lint`, which will automatically lint all `.js` files as well as JavaScript snippets inside `.html` files.
 
@@ -136,0 +136,0 @@

src/vaadin-email-field.js

@@ -34,3 +34,3 @@ /**
   static get version() {
-    return '2.3.5';
+    return '2.3.6';
   }
@@ -37,0 +37,0 @@

src/vaadin-number-field.js

@@ -49,6 +49,6 @@ /**
 
-    <div disabled\$="[[!_allowed(-1, value, min, max)]]" part="decrease-button" on-click="_decreaseValue" on-touchend="_decreaseButtonTouchend" hidden\$="[[!hasControls]]">
+    <div disabled\$="[[!_allowed(-1, value, min, max, step)]]" part="decrease-button" on-click="_decreaseValue" on-touchend="_decreaseButtonTouchend" hidden\$="[[!hasControls]]">
     </div>
 
-    <div disabled\$="[[!_allowed(1, value, min, max)]]" part="increase-button" on-click="_increaseValue" on-touchend="_increaseButtonTouchend" hidden\$="[[!hasControls]]">
+    <div disabled\$="[[!_allowed(1, value, min, max, step)]]" part="increase-button" on-click="_increaseValue" on-touchend="_increaseButtonTouchend" hidden\$="[[!hasControls]]">
     </div>
@@ -81,3 +81,3 @@ </template>
   static get version() {
-    return '2.3.5';
+    return '2.3.6';
   }
@@ -101,4 +101,3 @@
         type: Number,
-        reflectToAttribue: true,
-        observer: '_minChanged'
+        reflectToAttribue: true
       },
@@ -121,3 +120,2 @@
         reflectToAttribue: true,
-        observer: '_stepChanged',
         value: 1
@@ -129,2 +127,8 @@ }
 
+  static get observers() {
+    return [
+      '_stepOrMinChanged(step, min)'
+    ];
+  }
+
   ready() {
@@ -134,2 +138,3 @@ super.ready();
     this.inputElement.type = 'number';
+    this.inputElement.addEventListener('keydown', this.__onKeyDown.bind(this));
     this.inputElement.addEventListener('change', this.__onInputChange.bind(this));
@@ -173,86 +178,115 @@ }
   _decreaseValue() {
-    const currentValueOverMax = this.max != null && this.value != null && this.value != '' && this.value > this.max;
-    if (currentValueOverMax) {
-      this._setValue(this.max);
-    } else {
-      const incrementSign = this._getAllowedIncrementSign(-1);
-
-      if (incrementSign) {
-        this.__add(incrementSign);
-      }
-    }
+    this._incrementValue(-1);
   }
 
   _increaseValue() {
-    const currentValueUnderMin = this.min != null && this.value != null && this.value != '' && this.value < this.min;
+    this._incrementValue(1);
+  }
 
-    if (currentValueUnderMin) {
-      this._setValue(this.min);
-    } else {
-      const incrementSign = this._getAllowedIncrementSign(1);
+  _incrementValue(incr) {
+    if (this.disabled) {
+      return;
+    }
 
-      if (incrementSign) {
-        this.__add(incrementSign);
+    let value = parseFloat(this.value);
+
+    if (!this.value) {
+      if (this.min == 0 && incr < 0 ||
+          this.max == 0 && incr > 0 ||
+          this.max == 0 && this.min == 0) {
+        incr = 0;
+        value = 0;
+      } else if ((this.max == null || this.max >= 0) &&
+                 (this.min == null || this.min <= 0)) {
+        value = 0;
+      } else if (this.min > 0) {
+        value = this.min;
+        if (this.max < 0 && incr < 0) {
+          value = this.max;
+        }
+        incr = 0;
+      } else if (this.max < 0) {
+        value = this.max;
+        if (incr < 0) {
+          incr = 0;
+        } else {
+          // FIXME(yuriy): find a proper solution to make correct step back
+          if (this._getIncrement(1, value - this.step) > this.max) {
+            value -= 2 * this.step;
+          } else {
+            value -= this.step;
+          }
+        }
       }
+    } else if (value < this.min) {
+      incr = 0;
+      value = this.min;
+    } else if (value > this.max) {
+      incr = 0;
+      value = this.max;
     }
-  }
 
-  __add(sign) {
-    const incr = sign * (this.step || 1);
-    // Behave like native number input adjusting to the next exact multiple of step.
-    this._setValue(this._getValue(incr));
+    const newValue = this._getIncrement(incr, value);
+    if (!this.value || incr == 0 || this._incrementIsInsideTheLimits(incr, value)) {
+      this._setValue(newValue);
+    }
   }
 
   _setValue(value) {
-    this.value = this.inputElement.value = value;
+    this.value = this.inputElement.value = parseFloat(value).toFixed(this.__decimals);
     this.dispatchEvent(new CustomEvent('change', {bubbles: true}));
   }
 
-  _getValue(incr) {
-    return (incr + (incr * Math.floor((parseFloat(this.value || 0) / incr).toFixed(1)))).toFixed(this.__decimals);
-  }
+  _getIncrement(incr, currentValue) {
+    let step = this.step || 1,
+      min = this.min || 0;
 
-  _getAllowedIncrementSign(sign) {
-    if (this.disabled) {
-      return false;
-    }
+    // To avoid problems with decimal math, multiplying to operate with integers.
+    const multiplier = Math.max(this._getMultiplier(currentValue),
+      this._getMultiplier(step),
+      this._getMultiplier(min));
 
-    const initialIncr = sign * (this.step || 1);
+    step *= multiplier;
+    currentValue *= multiplier;
+    min *= multiplier;
 
-    if (initialIncr > 0) {
-      const validMin = this.min == null || this._getValue(initialIncr) > this.min;
-      const validMax = this.max == null || this.value < this.max;
+    const margin = (currentValue - min) % step;
 
-      if (validMin && validMax) {
-        return sign;
-      } else if (!validMax) {
-        return false;
-      } else if (!validMin) {
-        return this.min / initialIncr;
-      }
+    if (incr > 0) {
+      return (currentValue - margin + step) / multiplier;
+    } else if (incr < 0) {
+      return (currentValue - (margin || step)) / multiplier;
     } else {
-      const validMin = this.min == null || this.value > this.min;
-      const validMax = this.max == null || this._getValue(initialIncr) < this.max;
+      return currentValue / multiplier;
+    }
+  }
 
-      if (validMin && validMax) {
-        return sign;
-      } else if (!validMin) {
-        return false;
-      } else if (!validMax) {
-        return this.max / (this.step || 1);
+  _getMultiplier(number) {
+    if (!isNaN(number)) {
+      let multiplier = 1;
+      // Increase the multiplier until the float point will disappear
+      while (Math.floor(number * multiplier) !== number * multiplier) {
+        multiplier = multiplier * 10;
       }
+
+      return multiplier;
     }
   }
 
+  _incrementIsInsideTheLimits(incr, value) {
+    if (incr < 0) {
+      return this.min == null || this._getIncrement(incr, value) >= this.min;
+    } else if (incr > 0) {
+      return this.max == null || this._getIncrement(incr, value) <= this.max;
+    } else {
+      return this._getIncrement(incr, value) <= this.max && this._getIncrement(incr, value) >= this.min;
+    }
+  }
+
   _allowed(sign) {
     const incr = sign * (this.step || 1);
-    return !this.disabled && (incr < 0
-      ? this.min == null || this.value > this.min
-      : this.max == null || this.value < this.max);
+    const value = parseFloat(this.value);
+    return !this.value || (!this.disabled && this._incrementIsInsideTheLimits(incr, value));
   }
 
-  _minChanged() {
-    this.inputElement.min = this.min;
-  }
-
   _maxChanged() {
@@ -266,6 +300,4 @@ this.inputElement.max = this.max;
       this.value = '';
-    } else if (!isNaN(parseFloat(this.value)) &&
-      parseFloat(this.value) !== parseFloat(parseFloat(this.value).toFixed(this.__decimals))) {
-      // Validate correct decimals
-      this.value = parseFloat(parseFloat(this.value).toFixed(this.__decimals));
+    } else if (typeof this.value !== 'string') {
+      this.value = String(this.value);
     }
@@ -276,16 +308,24 @@
 
-  __onInputChange() {
-    this.checkValidity() && this.__adjustDecimals();
+  __onKeyDown(e) {
+    if (e.keyCode == 38) {
+      e.preventDefault();
+      this._increaseValue();
+    } else if (e.keyCode == 40) {
+      e.preventDefault();
+      this._decreaseValue();
+    }
   }
 
-  __adjustDecimals() {
-    // when step is not an integer, adjust decimals.
-    this.inputElement.value && (this.value = parseFloat(this.inputElement.value).toFixed(this.__decimals));
+  __onInputChange() {
+    this.checkValidity();
   }
 
-  _stepChanged(step) {
+  _stepOrMinChanged(step, min) {
     this.inputElement.step = step;
+    this.inputElement.min = this.min;
+    const countDecimalPlaces = number => {
+      return number ? String(Math.abs(number)).replace(/^\d*\.?(.*)?$/, '$1').length : 0;
+    };
     // Compute number of dedimals to display in input based on provided step
-    this.__decimals = String(step).replace(/^\d*\.?(.*)?$/, '$1').length;
-    this.__adjustDecimals();
+    this.__decimals = Math.max(countDecimalPlaces(step), countDecimalPlaces(min));
   }
@@ -295,3 +335,3 @@
     // text-field mixin does not check against `min` and `max`
-    if (this.min !== undefined || this.max !== undefined) {
+    if (this.min !== undefined || this.max !== undefined || this.step) {
       this.invalid = !this.inputElement.checkValidity();
@@ -298,0 +338,0 @@ }

src/vaadin-password-field.js

@@ -80,3 +80,3 @@ /**
   static get version() {
-    return '2.3.5';
+    return '2.3.6';
   }
@@ -83,0 +83,0 @@

src/vaadin-text-area.js

@@ -133,3 +133,3 @@ /**
   static get version() {
-    return '2.3.5';
+    return '2.3.6';
   }
@@ -136,0 +136,0 @@

src/vaadin-text-field.js

@@ -106,3 +106,3 @@ /**
   static get version() {
-    return '2.3.5';
+    return '2.3.6';
   }
@@ -109,0 +109,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

92139

increased by1.03%

Lines of code

2096

increased by1.85%

Published versions last year

24

increased by4.35%

No dependency changes