diff --git a/package.json b/package.json index 63f048f..28f1326 100644 --- a/package.json +++ b/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": { diff --git a/tp-number-input.js b/tp-number-input.js index fde76a4..d7e4a13 100644 --- a/tp-number-input.js +++ b/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;