primevue 3.16.2 → 3.18.0

package/inputnumber/InputNumber.vue

@@ -1,19 +1,43 @@
 <template>
     <span :class="containerClass">
-        <INInputText ref="input" class="p-inputnumber-input" role="spinbutton" :id="inputId" :class="inputClass" :style="inputStyle" :value="formattedValue" :aria-valuemin="min" :aria-valuemax="max" :aria-valuenow="modelValue" :disabled="disabled" :readonly="readonly" :placeholder="placeholder" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel"
-            @input="onUserInput" @keydown="onInputKeyDown" @keypress="onInputKeyPress" @paste="onPaste" @click="onInputClick" @focus="onInputFocus" @blur="onInputBlur" v-bind="inputProps"/>
-        <span class="p-inputnumber-button-group" v-if="showButtons && buttonLayout === 'stacked'">
+        <INInputText
+            ref="input"
+            :id="inputId"
+            class="p-inputnumber-input"
+            role="spinbutton"
+            :class="inputClass"
+            :style="inputStyle"
+            :value="formattedValue"
+            :aria-valuemin="min"
+            :aria-valuemax="max"
+            :aria-valuenow="modelValue"
+            :disabled="disabled"
+            :readonly="readonly"
+            :placeholder="placeholder"
+            :aria-labelledby="ariaLabelledby"
+            :aria-label="ariaLabel"
+            @input="onUserInput"
+            @keydown="onInputKeyDown"
+            @keypress="onInputKeyPress"
+            @paste="onPaste"
+            @click="onInputClick"
+            @focus="onInputFocus"
+            @blur="onInputBlur"
+            v-bind="inputProps"
+        />
+        <span v-if="showButtons && buttonLayout === 'stacked'" class="p-inputnumber-button-group">
             <INButton :class="upButtonClass" :icon="incrementButtonIcon" v-on="upButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="incrementButtonProps" />
             <INButton :class="downButtonClass" :icon="decrementButtonIcon" v-on="downButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="decrementButtonProps" />
         </span>
-        <INButton :class="upButtonClass" :icon="incrementButtonIcon" v-on="upButtonListeners" v-if="showButtons && buttonLayout !== 'stacked'" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="incrementButtonProps" />
-        <INButton :class="downButtonClass" :icon="decrementButtonIcon" v-on="downButtonListeners" v-if="showButtons && buttonLayout !== 'stacked'" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="decrementButtonProps" />
+        <INButton v-if="showButtons && buttonLayout !== 'stacked'" :class="upButtonClass" :icon="incrementButtonIcon" v-on="upButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="incrementButtonProps" />
+        <INButton v-if="showButtons && buttonLayout !== 'stacked'" :class="downButtonClass" :icon="decrementButtonIcon" v-on="downButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="decrementButtonProps" />
     </span>
 </template>
 
 <script>
-import InputText from 'primevue/inputtext';
 import Button from 'primevue/button';
+import InputText from 'primevue/inputtext';
+import { DomHandler } from 'primevue/utils';
 
 export default {
     name: 'InputNumber',
@@ -37,19 +61,19 @@ export default {
         },
         incrementButtonClass: {
             type: String,
-            default: null,
+            default: null
         },
         decrementButtonClass: {
             type: String,
-            default: null,
+            default: null
         },
         incrementButtonIcon: {
             type: String,
-            default: 'pi pi-angle-up',
+            default: 'pi pi-angle-up'
         },
         decrementButtonIcon: {
             type: String,
-            default: 'pi pi-angle-down',
+            default: 'pi pi-angle-down'
         },
         locale: {
             type: String,
@@ -119,15 +143,33 @@ export default {
             type: String,
             default: null
         },
-        inputId: null,
-        inputClass: null,
-        inputStyle: null,
-        inputProps: null,
-        incrementButtonProps: null,
-        decrementButtonProps: null,
+        inputId: {
+            type: String,
+            default: null
+        },
+        inputClass: {
+            type: String,
+            default: null
+        },
+        inputStyle: {
+            type: null,
+            default: null
+        },
+        inputProps: {
+            type: null,
+            default: null
+        },
+        incrementButtonProps: {
+            type: null,
+            default: null
+        },
+        decrementButtonProps: {
+            type: null,
+            default: null
+        },
         'aria-labelledby': {
             type: String,
-			default: null
+            default: null
         },
         'aria-label': {
             type: String,
@@ -152,13 +194,13 @@ export default {
         return {
             d_modelValue: this.modelValue,
             focused: false
-        }
+        };
     },
     watch: {
         modelValue(newValue) {
             this.d_modelValue = newValue;
         },
-		locale(newValue, oldValue) {
+        locale(newValue, oldValue) {
             this.updateConstructParser(newValue, oldValue);
         },
         localeMatcher(newValue, oldValue) {
@@ -206,8 +248,9 @@ export default {
         },
         constructParser() {
             this.numberFormat = new Intl.NumberFormat(this.locale, this.getOptions());
-            const numerals = [...new Intl.NumberFormat(this.locale, {useGrouping: false}).format(9876543210)].reverse();
+            const numerals = [...new Intl.NumberFormat(this.locale, { useGrouping: false }).format(9876543210)].reverse();
             const index = new Map(numerals.map((d, i) => [d, i]));
+
             this._numeral = new RegExp(`[${numerals.join('')}]`, 'g');
             this._group = this.getGroupingExpression();
             this._minusSign = this.getMinusSignExpression();
@@ -215,7 +258,7 @@ export default {
             this._decimal = this.getDecimalExpression();
             this._suffix = this.getSuffixExpression();
             this._prefix = this.getPrefixExpression();
-            this._index = d => index.get(d);
+            this._index = (d) => index.get(d);
         },
         updateConstructParser(newValue, oldValue) {
             if (newValue !== oldValue) {
@@ -226,59 +269,64 @@ export default {
             return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
         },
         getDecimalExpression() {
-            const formatter = new Intl.NumberFormat(this.locale, {...this.getOptions(), useGrouping: false});
+            const formatter = new Intl.NumberFormat(this.locale, { ...this.getOptions(), useGrouping: false });
+
             return new RegExp(`[${formatter.format(1.1).replace(this._currency, '').trim().replace(this._numeral, '')}]`, 'g');
         },
         getGroupingExpression() {
-            const formatter = new Intl.NumberFormat(this.locale, {useGrouping: true});
+            const formatter = new Intl.NumberFormat(this.locale, { useGrouping: true });
+
             this.groupChar = formatter.format(1000000).trim().replace(this._numeral, '').charAt(0);
+
             return new RegExp(`[${this.groupChar}]`, 'g');
         },
         getMinusSignExpression() {
-            const formatter = new Intl.NumberFormat(this.locale, {useGrouping: false});
+            const formatter = new Intl.NumberFormat(this.locale, { useGrouping: false });
+
             return new RegExp(`[${formatter.format(-1).trim().replace(this._numeral, '')}]`, 'g');
         },
         getCurrencyExpression() {
             if (this.currency) {
-                const formatter = new Intl.NumberFormat(this.locale, {style: 'currency', currency: this.currency, currencyDisplay: this.currencyDisplay,
-                    minimumFractionDigits: 0, maximumFractionDigits: 0});
+                const formatter = new Intl.NumberFormat(this.locale, { style: 'currency', currency: this.currency, currencyDisplay: this.currencyDisplay, minimumFractionDigits: 0, maximumFractionDigits: 0 });
+
                 return new RegExp(`[${formatter.format(1).replace(/\s/g, '').replace(this._numeral, '').replace(this._group, '')}]`, 'g');
             }
 
-            return new RegExp(`[]`,'g');
+            return new RegExp(`[]`, 'g');
         },
         getPrefixExpression() {
             if (this.prefix) {
                 this.prefixChar = this.prefix;
-            }
-            else {
-                const formatter = new Intl.NumberFormat(this.locale, {style: this.mode, currency: this.currency, currencyDisplay: this.currencyDisplay});
+            } else {
+                const formatter = new Intl.NumberFormat(this.locale, { style: this.mode, currency: this.currency, currencyDisplay: this.currencyDisplay });
+
                 this.prefixChar = formatter.format(1).split('1')[0];
             }
 
-            return new RegExp(`${this.escapeRegExp(this.prefixChar||'')}`, 'g');
+            return new RegExp(`${this.escapeRegExp(this.prefixChar || '')}`, 'g');
         },
         getSuffixExpression() {
             if (this.suffix) {
                 this.suffixChar = this.suffix;
-            }
-            else {
-                const formatter = new Intl.NumberFormat(this.locale, {style: this.mode, currency: this.currency, currencyDisplay: this.currencyDisplay,
-                    minimumFractionDigits: 0, maximumFractionDigits: 0});
+            } else {
+                const formatter = new Intl.NumberFormat(this.locale, { style: this.mode, currency: this.currency, currencyDisplay: this.currencyDisplay, minimumFractionDigits: 0, maximumFractionDigits: 0 });
+
                 this.suffixChar = formatter.format(1).split('1')[1];
             }
 
-            return new RegExp(`${this.escapeRegExp(this.suffixChar||'')}`, 'g');
+            return new RegExp(`${this.escapeRegExp(this.suffixChar || '')}`, 'g');
         },
         formatValue(value) {
             if (value != null) {
-                if (value === '-') { // Minus sign
+                if (value === '-') {
+                    // Minus sign
                     return value;
                 }
 
                 if (this.format) {
                     let formatter = new Intl.NumberFormat(this.locale, this.getOptions());
                     let formattedValue = formatter.format(value);
+
                     if (this.prefix) {
                         formattedValue = this.prefix + formattedValue;
                     }
@@ -297,21 +345,23 @@ export default {
         },
         parseValue(text) {
             let filteredText = text
-                                .replace(this._suffix, '')
-                                .replace(this._prefix, '')
-                                .trim()
-                                .replace(/\s/g, '')
-                                .replace(this._currency, '')
-                                .replace(this._group, '')
-                                .replace(this._minusSign, '-')
-                                .replace(this._decimal, '.')
-                                .replace(this._numeral, this._index);
+                .replace(this._suffix, '')
+                .replace(this._prefix, '')
+                .trim()
+                .replace(/\s/g, '')
+                .replace(this._currency, '')
+                .replace(this._group, '')
+                .replace(this._minusSign, '-')
+                .replace(this._decimal, '.')
+                .replace(this._numeral, this._index);
 
             if (filteredText) {
-                if (filteredText === '-') // Minus sign
+                if (filteredText === '-')
+                    // Minus sign
                     return filteredText;
 
                 let parsedValue = +filteredText;
+
                 return isNaN(parsedValue) ? null : parsedValue;
             }
 
@@ -401,6 +451,7 @@ export default {
             if (this.isSpecialChar) {
                 this.$refs.input.$el.value = this.lastValue;
             }
+
             this.isSpecialChar = false;
         },
         onInputKeyDown(event) {
@@ -409,8 +460,10 @@ export default {
             }
 
             this.lastValue = event.target.value;
+
             if (event.shiftKey || event.altKey) {
                 this.isSpecialChar = true;
+
                 return;
             }
 
@@ -428,27 +481,29 @@ export default {
                 case 38:
                     this.spin(event, 1);
                     event.preventDefault();
-                break;
+                    break;
 
                 //down
                 case 40:
                     this.spin(event, -1);
                     event.preventDefault();
-                break;
+                    break;
 
                 //left
                 case 37:
                     if (!this.isNumeralChar(inputValue.charAt(selectionStart - 1))) {
                         event.preventDefault();
                     }
-                break;
+
+                    break;
 
                 //right
                 case 39:
                     if (!this.isNumeralChar(inputValue.charAt(selectionStart))) {
                         event.preventDefault();
                     }
-                break;
+
+                    break;
 
                 //tab and enter
                 case 9:
@@ -457,7 +512,7 @@ export default {
                     this.$refs.input.$el.value = this.formatValue(newValueStr);
                     this.$refs.input.$el.setAttribute('aria-valuenow', newValueStr);
                     this.updateModel(event, newValueStr);
-                break;
+                    break;
 
                 //backspace
                 case 8: {
@@ -473,33 +528,28 @@ export default {
                             if (this._group.test(deleteChar)) {
                                 this._group.lastIndex = 0;
                                 newValueStr = inputValue.slice(0, selectionStart - 2) + inputValue.slice(selectionStart - 1);
-                            }
-                            else if (this._decimal.test(deleteChar)) {
+                            } else if (this._decimal.test(deleteChar)) {
                                 this._decimal.lastIndex = 0;
 
                                 if (decimalLength) {
                                     this.$refs.input.$el.setSelectionRange(selectionStart - 1, selectionStart - 1);
-                                }
-                                else {
+                                } else {
                                     newValueStr = inputValue.slice(0, selectionStart - 1) + inputValue.slice(selectionStart);
                                 }
-                            }
-                            else if (decimalCharIndex > 0 && selectionStart > decimalCharIndex) {
+                            } else if (decimalCharIndex > 0 && selectionStart > decimalCharIndex) {
                                 const insertedText = this.isDecimalMode() && (this.minFractionDigits || 0) < decimalLength ? '' : '0';
+
                                 newValueStr = inputValue.slice(0, selectionStart - 1) + insertedText + inputValue.slice(selectionStart);
-                            }
-                            else if (decimalCharIndexWithoutPrefix === 1) {
+                            } else if (decimalCharIndexWithoutPrefix === 1) {
                                 newValueStr = inputValue.slice(0, selectionStart - 1) + '0' + inputValue.slice(selectionStart);
                                 newValueStr = this.parseValue(newValueStr) > 0 ? newValueStr : '';
-                            }
-                            else {
+                            } else {
                                 newValueStr = inputValue.slice(0, selectionStart - 1) + inputValue.slice(selectionStart);
                             }
                         }
 
                         this.updateValue(event, newValueStr, null, 'delete-single');
-                    }
-                    else {
+                    } else {
                         newValueStr = this.deleteRange(inputValue, selectionStart, selectionEnd);
                         this.updateValue(event, newValueStr, null, 'delete-range');
                     }
@@ -521,37 +571,33 @@ export default {
                             if (this._group.test(deleteChar)) {
                                 this._group.lastIndex = 0;
                                 newValueStr = inputValue.slice(0, selectionStart) + inputValue.slice(selectionStart + 2);
-                            }
-                            else if (this._decimal.test(deleteChar)) {
+                            } else if (this._decimal.test(deleteChar)) {
                                 this._decimal.lastIndex = 0;
 
                                 if (decimalLength) {
                                     this.$refs.input.$el.setSelectionRange(selectionStart + 1, selectionStart + 1);
-                                }
-                                else {
+                                } else {
                                     newValueStr = inputValue.slice(0, selectionStart) + inputValue.slice(selectionStart + 1);
                                 }
-                            }
-                            else if (decimalCharIndex > 0 && selectionStart > decimalCharIndex) {
+                            } else if (decimalCharIndex > 0 && selectionStart > decimalCharIndex) {
                                 const insertedText = this.isDecimalMode() && (this.minFractionDigits || 0) < decimalLength ? '' : '0';
+
                                 newValueStr = inputValue.slice(0, selectionStart) + insertedText + inputValue.slice(selectionStart + 1);
-                            }
-                            else if (decimalCharIndexWithoutPrefix === 1) {
+                            } else if (decimalCharIndexWithoutPrefix === 1) {
                                 newValueStr = inputValue.slice(0, selectionStart) + '0' + inputValue.slice(selectionStart + 1);
                                 newValueStr = this.parseValue(newValueStr) > 0 ? newValueStr : '';
-                            }
-                            else {
+                            } else {
                                 newValueStr = inputValue.slice(0, selectionStart) + inputValue.slice(selectionStart + 1);
                             }
                         }
 
                         this.updateValue(event, newValueStr, null, 'delete-back-single');
-                    }
-                    else {
+                    } else {
                         newValueStr = this.deleteRange(inputValue, selectionStart, selectionEnd);
                         this.updateValue(event, newValueStr, null, 'delete-range');
                     }
-                break;
+
+                    break;
 
                 //home
                 case 36:
@@ -559,7 +605,8 @@ export default {
                         this.updateModel(event, this.min);
                         event.preventDefault();
                     }
-                break;
+
+                    break;
 
                 //end
                 case 35:
@@ -567,10 +614,11 @@ export default {
                         this.updateModel(event, this.max);
                         event.preventDefault();
                     }
-                break;
+
+                    break;
 
                 default:
-                break;
+                    break;
             }
         },
         onInputKeyPress(event) {
@@ -591,8 +639,10 @@ export default {
         onPaste(event) {
             event.preventDefault();
             let data = (event.clipboardData || window['clipboardData']).getData('Text');
+
             if (data) {
                 let filteredData = this.parseValue(data);
+
                 if (filteredData != null) {
                     this.insert(event, filteredData.toString());
                 }
@@ -604,6 +654,7 @@ export default {
         isMinusSign(char) {
             if (this._minusSign.test(char) || char === '-') {
                 this._minusSign.lastIndex = 0;
+
                 return true;
             }
 
@@ -612,6 +663,7 @@ export default {
         isDecimalSign(char) {
             if (this._decimal.test(char)) {
                 this._decimal.lastIndex = 0;
+
                 return true;
             }
 
@@ -622,29 +674,37 @@ export default {
         },
         getDecimalCharIndexes(val) {
             let decimalCharIndex = val.search(this._decimal);
+
             this._decimal.lastIndex = 0;
 
             const filteredVal = val.replace(this._prefix, '').trim().replace(/\s/g, '').replace(this._currency, '');
             const decimalCharIndexWithoutPrefix = filteredVal.search(this._decimal);
+
             this._decimal.lastIndex = 0;
 
             return { decimalCharIndex, decimalCharIndexWithoutPrefix };
         },
         getCharIndexes(val) {
             const decimalCharIndex = val.search(this._decimal);
+
             this._decimal.lastIndex = 0;
             const minusCharIndex = val.search(this._minusSign);
+
             this._minusSign.lastIndex = 0;
             const suffixCharIndex = val.search(this._suffix);
+
             this._suffix.lastIndex = 0;
             const currencyCharIndex = val.search(this._currency);
+
             this._currency.lastIndex = 0;
 
             return { decimalCharIndex, minusCharIndex, suffixCharIndex, currencyCharIndex };
         },
         insert(event, text, sign = { isDecimalSign: false, isMinusSign: false }) {
             const minusCharIndexOnText = text.search(this._minusSign);
+
             this._minusSign.lastIndex = 0;
+
             if (!this.allowMinusSign() && minusCharIndexOnText !== -1) {
                 return;
             }
@@ -658,39 +718,35 @@ export default {
             if (sign.isMinusSign) {
                 if (selectionStart === 0) {
                     newValueStr = inputValue;
+
                     if (minusCharIndex === -1 || selectionEnd !== 0) {
                         newValueStr = this.insertText(inputValue, text, 0, selectionEnd);
                     }
 
                     this.updateValue(event, newValueStr, text, 'insert');
                 }
-            }
-            else if (sign.isDecimalSign) {
+            } else if (sign.isDecimalSign) {
                 if (decimalCharIndex > 0 && selectionStart === decimalCharIndex) {
                     this.updateValue(event, inputValue, text, 'insert');
-                }
-                else if (decimalCharIndex > selectionStart && decimalCharIndex < selectionEnd) {
+                } else if (decimalCharIndex > selectionStart && decimalCharIndex < selectionEnd) {
                     newValueStr = this.insertText(inputValue, text, selectionStart, selectionEnd);
                     this.updateValue(event, newValueStr, text, 'insert');
-                }
-                else if (decimalCharIndex === -1 && this.maxFractionDigits) {
+                } else if (decimalCharIndex === -1 && this.maxFractionDigits) {
                     newValueStr = this.insertText(inputValue, text, selectionStart, selectionEnd);
                     this.updateValue(event, newValueStr, text, 'insert');
                 }
-            }
-            else {
+            } else {
                 const maxFractionDigits = this.numberFormat.resolvedOptions().maximumFractionDigits;
                 const operation = selectionStart !== selectionEnd ? 'range-insert' : 'insert';
 
                 if (decimalCharIndex > 0 && selectionStart > decimalCharIndex) {
-                    if ((selectionStart + text.length - (decimalCharIndex + 1)) <= maxFractionDigits) {
-                        const charIndex = currencyCharIndex >= selectionStart ? currencyCharIndex - 1 : (suffixCharIndex >= selectionStart ? suffixCharIndex : inputValue.length);
+                    if (selectionStart + text.length - (decimalCharIndex + 1) <= maxFractionDigits) {
+                        const charIndex = currencyCharIndex >= selectionStart ? currencyCharIndex - 1 : suffixCharIndex >= selectionStart ? suffixCharIndex : inputValue.length;
 
                         newValueStr = inputValue.slice(0, selectionStart) + text + inputValue.slice(selectionStart + text.length, charIndex) + inputValue.slice(charIndex);
                         this.updateValue(event, newValueStr, text, operation);
                     }
-                }
-                else {
+                } else {
                     newValueStr = this.insertText(inputValue, text, selectionStart, selectionEnd);
                     this.updateValue(event, newValueStr, text, operation);
                 }
@@ -701,33 +757,27 @@ export default {
 
             if (textSplit.length === 2) {
                 const decimalCharIndex = value.slice(start, end).search(this._decimal);
+
                 this._decimal.lastIndex = 0;
-                return (decimalCharIndex > 0) ? value.slice(0, start) + this.formatValue(text) + value.slice(end) : (value || this.formatValue(text));
-            }
-            else if ((end - start) === value.length) {
+
+                return decimalCharIndex > 0 ? value.slice(0, start) + this.formatValue(text) + value.slice(end) : value || this.formatValue(text);
+            } else if (end - start === value.length) {
                 return this.formatValue(text);
-            }
-            else if (start === 0) {
+            } else if (start === 0) {
                 return text + value.slice(end);
-            }
-            else if (end === value.length) {
+            } else if (end === value.length) {
                 return value.slice(0, start) + text;
-            }
-            else {
+            } else {
                 return value.slice(0, start) + text + value.slice(end);
             }
         },
         deleteRange(value, start, end) {
             let newValueStr;
 
-            if ((end - start) === value.length)
-                newValueStr = '';
-            else if (start === 0)
-                newValueStr = value.slice(end);
-            else if (end === value.length)
-                newValueStr = value.slice(0, start);
-            else
-                newValueStr = value.slice(0, start) + value.slice(end);
+            if (end - start === value.length) newValueStr = '';
+            else if (start === 0) newValueStr = value.slice(end);
+            else if (end === value.length) newValueStr = value.slice(0, start);
+            else newValueStr = value.slice(0, start) + value.slice(end);
 
             return newValueStr;
         },
@@ -739,39 +789,42 @@ export default {
 
             // remove prefix
             let prefixLength = (this.prefixChar || '').length;
+
             inputValue = inputValue.replace(this._prefix, '');
             selectionStart = selectionStart - prefixLength;
 
             let char = inputValue.charAt(selectionStart);
+
             if (this.isNumeralChar(char)) {
                 return selectionStart + prefixLength;
             }
 
             //left
             let i = selectionStart - 1;
+
             while (i >= 0) {
                 char = inputValue.charAt(i);
+
                 if (this.isNumeralChar(char)) {
                     index = i + prefixLength;
                     break;
-                }
-                else {
+                } else {
                     i--;
                 }
             }
 
             if (index !== null) {
                 this.$refs.input.$el.setSelectionRange(index + 1, index + 1);
-            }
-            else {
+            } else {
                 i = selectionStart;
+
                 while (i < valueLength) {
                     char = inputValue.charAt(i);
+
                     if (this.isNumeralChar(char)) {
                         index = i + prefixLength;
                         break;
-                    }
-                    else {
+                    } else {
                         i++;
                     }
                 }
@@ -784,23 +837,26 @@ export default {
             return index || 0;
         },
         onInputClick() {
-            if (!this.readonly) {
+            const currentValue = this.$refs.input.$el.value;
+
+            if (!this.readonly && currentValue !== DomHandler.getSelection()) {
                 this.initCursor();
             }
         },
         isNumeralChar(char) {
             if (char.length === 1 && (this._numeral.test(char) || this._decimal.test(char) || this._group.test(char) || this._minusSign.test(char))) {
                 this.resetRegex();
+
                 return true;
             }
 
             return false;
         },
         resetRegex() {
-            this._numeral.lastIndex =  0;
-            this._decimal.lastIndex =  0;
-            this._group.lastIndex =  0;
-            this._minusSign.lastIndex =  0;
+            this._numeral.lastIndex = 0;
+            this._decimal.lastIndex = 0;
+            this._group.lastIndex = 0;
+            this._minusSign.lastIndex = 0;
         },
         updateValue(event, valueStr, insertedValueStr, operation) {
             let currentValue = this.$refs.input.$el.value;
@@ -816,7 +872,7 @@ export default {
         },
         handleOnInput(event, currentValue, newValue) {
             if (this.isValueChanged(currentValue, newValue)) {
-                this.$emit('input', { originalEvent: event, value: newValue });
+                this.$emit('input', { originalEvent: event, value: newValue, formattedValue: currentValue });
             }
         },
         isValueChanged(currentValue, newValue) {
@@ -825,7 +881,8 @@ export default {
             }
 
             if (newValue != null) {
-                let parsedCurrentValue = (typeof currentValue === 'string') ? this.parseValue(currentValue) : currentValue;
+                let parsedCurrentValue = typeof currentValue === 'string' ? this.parseValue(currentValue) : currentValue;
+
                 return newValue !== parsedCurrentValue;
             }
 
@@ -862,11 +919,12 @@ export default {
                 this.$refs.input.$el.setSelectionRange(0, 0);
                 const index = this.initCursor();
                 const selectionEnd = index + insertedValueStr.length;
+
                 this.$refs.input.$el.setSelectionRange(selectionEnd, selectionEnd);
-            }
-            else {
+            } else {
                 let selectionStart = this.$refs.input.$el.selectionStart;
                 let selectionEnd = this.$refs.input.$el.selectionEnd;
+
                 this.$refs.input.$el.value = newValue;
                 let newLength = newValue.length;
 
@@ -875,24 +933,21 @@ export default {
                     const startValueStr = startValue !== null ? startValue.toString() : '';
                     const startExpr = startValueStr.split('').join(`(${this.groupChar})?`);
                     const sRegex = new RegExp(startExpr, 'g');
+
                     sRegex.test(newValue);
 
                     const tExpr = insertedValueStr.split('').join(`(${this.groupChar})?`);
                     const tRegex = new RegExp(tExpr, 'g');
+
                     tRegex.test(newValue.slice(sRegex.lastIndex));
 
                     selectionEnd = sRegex.lastIndex + tRegex.lastIndex;
                     this.$refs.input.$el.setSelectionRange(selectionEnd, selectionEnd);
-                }
-                else if (newLength === currentLength) {
-                    if (operation === 'insert' || operation === 'delete-back-single')
-                        this.$refs.input.$el.setSelectionRange(selectionEnd + 1, selectionEnd + 1);
-                    else if (operation === 'delete-single')
-                        this.$refs.input.$el.setSelectionRange(selectionEnd - 1, selectionEnd - 1);
-                    else if (operation === 'delete-range' || operation === 'spin')
-                        this.$refs.input.$el.setSelectionRange(selectionEnd, selectionEnd);
-                }
-                else if (operation === 'delete-back-single') {
+                } else if (newLength === currentLength) {
+                    if (operation === 'insert' || operation === 'delete-back-single') this.$refs.input.$el.setSelectionRange(selectionEnd + 1, selectionEnd + 1);
+                    else if (operation === 'delete-single') this.$refs.input.$el.setSelectionRange(selectionEnd - 1, selectionEnd - 1);
+                    else if (operation === 'delete-range' || operation === 'spin') this.$refs.input.$el.setSelectionRange(selectionEnd, selectionEnd);
+                } else if (operation === 'delete-back-single') {
                     let prevChar = inputValue.charAt(selectionEnd - 1);
                     let nextChar = inputValue.charAt(selectionEnd);
                     let diff = currentLength - newLength;
@@ -900,21 +955,19 @@ export default {
 
                     if (isGroupChar && diff === 1) {
                         selectionEnd += 1;
-                    }
-                    else if (!isGroupChar && this.isNumeralChar(prevChar)) {
-                        selectionEnd += (-1 * diff) + 1;
+                    } else if (!isGroupChar && this.isNumeralChar(prevChar)) {
+                        selectionEnd += -1 * diff + 1;
                     }
 
                     this._group.lastIndex = 0;
                     this.$refs.input.$el.setSelectionRange(selectionEnd, selectionEnd);
-                }
-                else if (inputValue === '-' && operation === 'insert') {
+                } else if (inputValue === '-' && operation === 'insert') {
                     this.$refs.input.$el.setSelectionRange(0, 0);
                     const index = this.initCursor();
                     const selectionEnd = index + insertedValueStr.length + 1;
+
                     this.$refs.input.$el.setSelectionRange(selectionEnd, selectionEnd);
-                }
-                else {
+                } else {
                     selectionEnd = selectionEnd + (newLength - currentLength);
                     this.$refs.input.$el.setSelectionRange(selectionEnd, selectionEnd);
                 }
@@ -925,9 +978,14 @@ export default {
         concatValues(val1, val2) {
             if (val1 && val2) {
                 let decimalCharIndex = val2.search(this._decimal);
+
                 this._decimal.lastIndex = 0;
 
-                return decimalCharIndex !== -1 ? (val1.split(this._decimal)[0] + val2.slice(decimalCharIndex)) : val1;
+                if (this.suffixChar) {
+                    return val1.replace(this.suffixChar, '').split(this._decimal)[0] + val2.replace(this.suffixChar, '').slice(decimalCharIndex) + this.suffixChar;
+                } else {
+                    return decimalCharIndex !== -1 ? val1.split(this._decimal)[0] + val2.slice(decimalCharIndex) : val1;
+                }
             }
 
             return val1;
@@ -937,10 +995,7 @@ export default {
                 const valueSplit = value.split(this._decimal);
 
                 if (valueSplit.length === 2) {
-                    return valueSplit[1].replace(this._suffix, '')
-                                .trim()
-                                .replace(/\s/g, '')
-                                .replace(this._currency, '').length;
+                    return valueSplit[1].replace(this._suffix, '').trim().replace(/\s/g, '').replace(this._currency, '').length;
                 }
             }
 
@@ -960,8 +1015,8 @@ export default {
             let input = event.target;
             let newValue = this.validateValue(this.parseValue(input.value));
 
-            this.$emit('blur', { originalEvent: event, value: input.value});
-            
+            this.$emit('blur', { originalEvent: event, value: input.value });
+
             input.value = this.formatValue(newValue);
             input.setAttribute('aria-valuenow', newValue);
             this.updateModel(event, newValue);
@@ -976,52 +1031,64 @@ export default {
         },
         minBoundry() {
             return this.d_modelValue <= this.min;
-        },
+        }
     },
     computed: {
         containerClass() {
-            return ['p-inputnumber p-component p-inputwrapper', {
-                'p-inputwrapper-filled': this.filled,
-                'p-inputwrapper-focus': this.focused,
-                'p-inputnumber-buttons-stacked': this.showButtons && this.buttonLayout === 'stacked',
-                'p-inputnumber-buttons-horizontal': this.showButtons && this.buttonLayout === 'horizontal',
-                'p-inputnumber-buttons-vertical': this.showButtons && this.buttonLayout === 'vertical'
-            }];
-        },
-        
+            return [
+                'p-inputnumber p-component p-inputwrapper',
+                {
+                    'p-inputwrapper-filled': this.filled,
+                    'p-inputwrapper-focus': this.focused,
+                    'p-inputnumber-buttons-stacked': this.showButtons && this.buttonLayout === 'stacked',
+                    'p-inputnumber-buttons-horizontal': this.showButtons && this.buttonLayout === 'horizontal',
+                    'p-inputnumber-buttons-vertical': this.showButtons && this.buttonLayout === 'vertical'
+                }
+            ];
+        },
+
         upButtonClass() {
-            return ['p-inputnumber-button p-inputnumber-button-up', this.incrementButtonClass, {
-                'p-disabled': this.showButtons && this.max !== null && this.maxBoundry()
-            }];
+            return [
+                'p-inputnumber-button p-inputnumber-button-up',
+                this.incrementButtonClass,
+                {
+                    'p-disabled': this.showButtons && this.max !== null && this.maxBoundry()
+                }
+            ];
         },
         downButtonClass() {
-            return ['p-inputnumber-button p-inputnumber-button-down', this.decrementButtonClass, {
-                'p-disabled': this.showButtons && this.min !== null && this.minBoundry()
-            }];
+            return [
+                'p-inputnumber-button p-inputnumber-button-down',
+                this.decrementButtonClass,
+                {
+                    'p-disabled': this.showButtons && this.min !== null && this.minBoundry()
+                }
+            ];
         },
         filled() {
-            return (this.modelValue != null && this.modelValue.toString().length > 0)
+            return this.modelValue != null && this.modelValue.toString().length > 0;
         },
         upButtonListeners() {
             return {
-                mousedown: event => this.onUpButtonMouseDown(event),
-                mouseup: event => this.onUpButtonMouseUp(event),
-                mouseleave: event => this.onUpButtonMouseLeave(event),
-                keydown: event => this.onUpButtonKeyDown(event),
-                keyup: event => this.onUpButtonKeyUp(event)
-            }
+                mousedown: (event) => this.onUpButtonMouseDown(event),
+                mouseup: (event) => this.onUpButtonMouseUp(event),
+                mouseleave: (event) => this.onUpButtonMouseLeave(event),
+                keydown: (event) => this.onUpButtonKeyDown(event),
+                keyup: (event) => this.onUpButtonKeyUp(event)
+            };
         },
         downButtonListeners() {
             return {
-                mousedown: event => this.onDownButtonMouseDown(event),
-                mouseup: event => this.onDownButtonMouseUp(event),
-                mouseleave: event => this.onDownButtonMouseLeave(event),
-                keydown: event => this.onDownButtonKeyDown(event),
-                keyup: event => this.onDownButtonKeyUp(event)
-            }
+                mousedown: (event) => this.onDownButtonMouseDown(event),
+                mouseup: (event) => this.onDownButtonMouseUp(event),
+                mouseleave: (event) => this.onDownButtonMouseLeave(event),
+                keydown: (event) => this.onDownButtonKeyDown(event),
+                keyup: (event) => this.onDownButtonKeyUp(event)
+            };
         },
         formattedValue() {
             const val = !this.modelValue && !this.allowEmpty ? 0 : this.modelValue;
+
             return this.formatValue(val);
         },
         getFormatter() {
@@ -1029,10 +1096,10 @@ export default {
         }
     },
     components: {
-        'INInputText': InputText,
-        'INButton': Button
+        INInputText: InputText,
+        INButton: Button
     }
-}
+};
 </script>
 
 <style>