Add support for a floating point number mode

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tp/tp-number-input",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "",
   "main": "tp-number-input.js",
   "scripts": {

tp-number-input.js

@@ -83,7 +83,7 @@ class TpNumberInput extends FormElement(EventHelpers(DomQuery(LitElement))) {
       // Calculation speed after really long press on one of the buttons.
       superFastInterval: { type: Number },
 
-      // String to add after the number. Use this to show a unit for example.
+      // String to add after the number. Use this to add after the number. Use this to show a unit for example.
       // `13` becomes `13px` for example.
       suffix: { type: String },
 
@@ -98,6 +98,9 @@ class TpNumberInput extends FormElement(EventHelpers(DomQuery(LitElement))) {
       // Most other settings are ignore if the control is in this mode.
       timeMode: { type: Boolean },
 
+      // If true, enables floating point number support. When false (default), maintains strict integer behavior for backward compatibility.
+      floatingPoint: { type: Boolean },
+
       _internValue: { type: String }
     };
   }
@@ -119,6 +122,7 @@ class TpNumberInput extends FormElement(EventHelpers(DomQuery(LitElement))) {
     this.max = Number.MAX_SAFE_INTEGER;
     this.fastInterval = 50;
     this.superFastInterval = 100;
+    this.floatingPoint = false;
     this._isConnected = false
   }
 
@@ -150,6 +154,33 @@ class TpNumberInput extends FormElement(EventHelpers(DomQuery(LitElement))) {
     }
   }
 
+  /**
+   * Parse value based on floatingPoint mode.
+   * Strictly maintains integer behavior when floatingPoint=false for backward compatibility.
+   */
+  _parseValue(val) {
+    if (this.floatingPoint) {
+      return parseFloat(val);
+    }
+    // Maintain exact existing behavior for backward compatibility
+    return parseInt(val, 10);
+  }
+
+  /**
+   * Format floating point value with appropriate precision based on step.
+   */
+  _formatFloatingValue(val) {
+    if (!this.floatingPoint) {
+      return val; // No formatting for integer mode
+    }
+    
+    // Determine decimal places from step
+    const stepStr = this.step.toString();
+    const decimalPlaces = stepStr.includes('.') ? stepStr.split('.')[1].length : 0;
+    
+    return parseFloat(val.toFixed(decimalPlaces));
+  }
+
   _timeModeChanged() {
     if (this.timeMode) {
       this.unlisten(this, 'mousedown', '_onMouseDown');
@@ -159,7 +190,7 @@ class TpNumberInput extends FormElement(EventHelpers(DomQuery(LitElement))) {
   }
 
   _onTap(e) {
-    let val = parseInt(this.value, 10) || 0;
+    let val = this._parseValue(this.value) || 0;
     const op = this._getOperation(e);
 
     if(!op) {
@@ -174,6 +205,11 @@ class TpNumberInput extends FormElement(EventHelpers(DomQuery(LitElement))) {
       } else {
         val -= this.step;
       }
+      
+      // Apply floating point formatting if enabled
+      if (this.floatingPoint) {
+        val = this._formatFloatingValue(val);
+      }
     }
 
     this._updateValue(val);
@@ -295,22 +331,28 @@ class TpNumberInput extends FormElement(EventHelpers(DomQuery(LitElement))) {
     if(this.timeMode) {
       this._timeValueChanged(this.$.input.value);
     } else {
-      this._updateValue(parseInt(this.$.input.value, 10));
+      this._updateValue(this._parseValue(this.$.input.value));
     }
   }
 
   _onKey(e) {
     if (e.keyCode === 13) {
-      this._updateValue(parseInt(this.$.input.value, 10));
+      this._updateValue(this._parseValue(this.$.input.value));
     } else if (e.keyCode === 38) { // Arrow Up
       e.preventDefault();
-      let val = parseInt(this.value, 10) || 0;
+      let val = this._parseValue(this.value) || 0;
       val = Math.min(this.max, val + this.step);
+      if (this.floatingPoint) {
+        val = this._formatFloatingValue(val);
+      }
       this._updateValue(val);
     } else if (e.keyCode === 40) { // Arrow Down
       e.preventDefault();
-      let val = parseInt(this.value, 10) || 0;
+      let val = this._parseValue(this.value) || 0;
       val = Math.max(this.min, val - this.step);
+      if (this.floatingPoint) {
+        val = this._formatFloatingValue(val);
+      }
       this._updateValue(val);
     }
   }
@@ -339,7 +381,7 @@ class TpNumberInput extends FormElement(EventHelpers(DomQuery(LitElement))) {
       return;
     }
   
-    val = parseInt(val, 10);
+    val = this._parseValue(val);
   
     // If val is NaN and an specialMin is defined, then set it.
     // Else set the min value.
@@ -358,6 +400,12 @@ class TpNumberInput extends FormElement(EventHelpers(DomQuery(LitElement))) {
   
     val = Math.min(this.max, val);
     val = Math.max(this.min, val);
+    
+    // Apply floating point formatting if enabled
+    if (this.floatingPoint) {
+      val = this._formatFloatingValue(val);
+    }
+    
     this.value = this.ignoreSuffix ? val : (!!this.suffix ? val + this.suffix : val);
     this.$.input.value = !!this.suffix ? val + this.suffix : val;