From 8314c182ee0e89aeab3eead66af7ac8c6cea780f Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Sat, 18 Apr 2020 13:11:58 +0300
Subject: [PATCH] Initiated InputNumber

---
 src/AppMenu.vue                            |   1 +
 src/components/inputnumber/InputNumber.vue | 729 +++++++++++++++++++++
 src/main.js                                |   6 +-
 src/router.js                              |   5 +
 src/views/inputnumber/InputNumberDemo.vue  | 151 +++++
 src/views/inputnumber/InputNumberDoc.vue   |  89 +++
 6 files changed, 979 insertions(+), 2 deletions(-)
 create mode 100644 src/components/inputnumber/InputNumber.vue
 create mode 100644 src/views/inputnumber/InputNumberDemo.vue
 create mode 100644 src/views/inputnumber/InputNumberDoc.vue

diff --git a/src/AppMenu.vue b/src/AppMenu.vue
index 7e6e0fc54..c36e2c9ae 100644
--- a/src/AppMenu.vue
+++ b/src/AppMenu.vue
@@ -15,6 +15,7 @@
                 <router-link to="/editor">Editor</router-link>
                 <router-link to="/inputgroup">InputGroup</router-link>
                 <router-link to="/inputmask">InputMask</router-link>
+                <router-link to="/inputnumber">InputNumber</router-link>
                 <router-link to="/inputswitch">InputSwitch</router-link>
                 <router-link to="/inputtext">InputText</router-link>
                 <router-link to="/listbox">Listbox</router-link>
diff --git a/src/components/inputnumber/InputNumber.vue b/src/components/inputnumber/InputNumber.vue
new file mode 100644
index 000000000..57d0e91a7
--- /dev/null
+++ b/src/components/inputnumber/InputNumber.vue
@@ -0,0 +1,729 @@
+<template>
+    <span :class="containerClass">
+        <INInputText ref="input" class="p-inputnumber-input" v-bind="$attrs" v-on="listeners" :aria-valumin="min" :aria-valuemax="max" :aria-labelledby="ariaLabelledBy" />
+        <span class="p-inputnumber-button-group" v-if="showButtons && buttonLayout === 'stacked'">
+            <Button :class="upButtonClass" icon="incrementButtonIcon" v-on="upButtonListeners" :disabled="$attrs.disabled" />
+            <Button :class="downButtonClass" icon="decrementButtonIcon" v-on="downButtonListeners" :disabled="$attrs.disabled" />
+        </span>
+        <INButton :class="upButtonClass" icon="incrementButtonIcon" v-on="upButtonListeners" v-if="showButtons && buttonLayout !== 'stacked'" :disabled="$attrs.disabled" />
+        <INButton :class="downButtonClass" icon="decrementButtonIcon" v-on="downButtonListeners" v-if="showButtons && buttonLayout !== 'stacked'" :disabled="$attrs.disabled" />
+    </span>
+</template>
+
+<script>
+import InputText from '../inputtext/InputText';
+import Button from '../button/Button';
+
+export default {
+    inheritAttrs: false,
+    props: {
+        value: {
+            type: Number,
+            default: null
+        },
+        format: {
+            type: Boolean,
+            default: true
+        },
+        showButtons: {
+            type: Boolean,
+            default: false
+        },
+        buttonLayout: {
+            type: String,
+            default: 'stacked'
+        },
+        incrementButtonClass: {
+            type: String,
+            default: null,
+        },
+        decrementButtonClass: {
+            type: String,
+            default: null,
+        },
+        incrementButtonIcon: {
+            type: String,
+            default: 'pi pi-caret-up',
+        },
+        decrementButtonIcon: {
+            type: String,
+            default: 'pi pi-caret-down',
+        },
+        locale: {
+            type: String,
+            default: undefined
+        },
+        localeMatcher: {
+            type: String,
+            default: undefined
+        },
+        mode: {
+            type: String,
+            default: 'decimal'
+        },
+        suffix: {
+            type: String,
+            default: null
+        },
+        prefix: {
+            type: String,
+            default: null
+        },
+        currency: {
+            type: String,
+            default: undefined
+        },
+        currencyDisplay: {
+            type: String,
+            default: undefined
+        },
+        useGrouping: {
+            type: Boolean,
+            default: true
+        },
+        minFractionDigits: {
+            type: Number,
+            default: undefined
+        },
+        maxFractionDigits: {
+            type: Number,
+            default: undefined
+        },
+        min: {
+            type: Number,
+            default: null
+        },
+        max: {
+            type: Number,
+            default: null
+        },
+        step: {
+            type: Number,
+            default: null
+        },
+        ariaLabelledBy: {
+            type: String,
+            default: null
+        }
+    },
+    numberFormat: null,
+    _numeral: null,
+    _decimal: null,
+    _group: null,
+    _minusSign: null,
+    _currency: null,
+    _suffix: null,
+    _prefix: null,
+    _index: null,
+    isSpecialChar: null,
+    timer: null,
+    watch: {
+        value(newValue) {
+            const formattedValue = this.formatValue(newValue);
+            if (this.$refs.input.$el.value !== formattedValue) {
+                this.$refs.input.$el.value = formattedValue;
+                this.$refs.input.$el.setAttribute('aria-valuenow', this.props.value);
+            }
+        }
+    },
+    created() {
+        this.numberFormat = new Intl.NumberFormat(this.locale, this.getOptions());
+        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._decimal = this.getDecimalExpression();
+        this._group = this.getGroupingExpression();
+        this._minusSign = this.getMinusSignExpression();
+        this._currency = this.getCurrencyExpression();
+        this._suffix = new RegExp(`[${this.suffix||''}]`, 'g');
+        this._prefix = new RegExp(`[${this.prefix||''}]`, 'g');
+        this._index = d => index.get(d);
+    },
+    mounted() {
+        this.$refs.input.$el.value = this.formatValue(this.value);
+        this.$refs.input.$el.setAttribute('aria-valuenow', this.value);
+    },
+    methods: {
+        getOptions() {
+            return {
+                localeMatcher: this.localeMatcher,
+                style: this.mode,
+                currency: this.currency,
+                currencyDisplay: this.currencyDisplay,
+                useGrouping: this.useGrouping,
+                minimumFractionDigits: this.minFractionDigits,
+                maximumFractionDigits: this.maxFractionDigits
+            };
+        },
+        getDecimalExpression() {
+            const formatter = new Intl.NumberFormat(this.locale, {useGrouping: false});
+            return new RegExp(`[${formatter.format(1.1).trim().replace(this._numeral, '')}]`, 'g');
+        },
+        getGroupingExpression() {
+            const formatter = new Intl.NumberFormat(this.locale, {useGrouping: true});
+            return new RegExp(`[${formatter.format(1000).trim().replace(this._numeral, '')}]`, 'g');
+        },
+        getMinusSignExpression() {
+            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});
+                return new RegExp(`[${formatter.format(1).replace(/\s/g, '').replace(this._numeral, '').replace(this._decimal, '').replace(this._group, '')}]`, 'g');
+            }
+
+            return new RegExp(`[]`,'g');
+        },
+        formatValue(value) {
+            if (value != null) {
+                if (this.format) {
+                    let formatter = new Intl.NumberFormat(this.locale, this.getOptions());
+                    let formattedValue = formatter.format(value);
+                    if (this.prefix) {
+                        formattedValue = this.prefix + formattedValue;
+                    }
+
+                    if (this.suffix) {
+                        formattedValue = formattedValue + this.suffix;
+                    }
+
+                    return formattedValue;
+                }
+
+                return value;
+            }
+
+            return '';
+        },
+        parseValue(text) {
+            let filteredText = text.trim()
+                                .replace(/\s/g, '')
+                                .replace(this._currency, '')
+                                .replace(this._group, '')
+                                .replace(this._suffix, '')
+                                .replace(this._prefix, '')
+                                .replace(this._minusSign, '-')
+                                .replace(this._decimal, '.')
+                                .replace(this._numeral, this._index);
+
+            if (filteredText) {
+                let parsedValue = +filteredText;
+                return isNaN(parsedValue) ? null : parsedValue;
+            }
+
+            return null;
+        },
+        repeat(event, interval, dir) {
+            let i = interval || 500;
+
+            this.clearTimer();
+            this.timer = setTimeout(() => {
+                this.repeat(event, 40, dir);
+            }, i);
+
+            this.spin(event, dir);
+        },
+        spin(event, dir) {
+            let step = this.step * dir;
+            let currentValue = this.value || 0;
+            let newValue = currentValue + step;
+
+            if (this.min !== null && newValue < this.min) {
+                newValue = this.min;
+            }
+
+            if (this.max !== null && newValue > this.max) {
+                newValue = this.max;
+            }
+
+            this.updateInput(newValue, 'spin');
+            this.updateModel(event, newValue);
+        },
+        onUpButtonMouseDown(event) {
+            this.$refs.input.$el.focus();
+            this.repeat(event, null, 1);
+            event.preventDefault();
+        },
+        onUpButtonMouseUp() {
+            this.clearTimer();
+        },
+        onUpButtonMouseLeave() {
+            this.clearTimer();
+        },
+        onUpButtonKeyUp() {
+            this.clearTimer();
+        },
+        onUpButtonKeyDown(event) {
+            if (event.keyCode === 32 || event.keyCode === 13) {
+                this.repeat(event, null, 1);
+            }
+        },
+        onDownButtonMouseDown(event) {
+            this.$refs.input.$el.focus();
+            this.repeat(event, null, -1);
+            event.preventDefault();
+        },
+        onDownButtonMouseUp() {
+            this.clearTimer();
+        },
+        onDownButtonMouseLeave() {
+            this.clearTimer();
+        },
+        onDownButtonKeyUp() {
+            this.clearTimer();
+        },
+        onDownButtonKeyDown(event) {
+            if (event.keyCode === 32 || event.keyCode === 13) {
+                this.repeat(event, null, -1);
+            }
+        },
+        onInput(event) {
+            debugger;
+            if (this.isSpecialChar) {
+                event.target.value = this.lastValue;
+            }
+            this.isSpecialChar = false;
+        },
+        onInputKeyDown(event) {
+            this.lastValue = event.target.value;
+            if (event.shiftKey || event.altKey) {
+                this.isSpecialChar = true;
+                return;
+            }
+
+            let selectionStart = event.target.selectionStart;
+            let selectionEnd = event.target.selectionEnd;
+            let inputValue = event.target.value;
+
+            if (event.altKey) {
+                event.preventDefault();
+            }
+
+            switch (event.which) {
+                //up
+                case 38:
+                    this.spin(event, 1);
+                    event.preventDefault();
+                break;
+
+                //down
+                case 40:
+                    this.spin(event, -1);
+                    event.preventDefault();
+                break;
+
+                //left
+                case 37:
+                    if (!this.isNumeralChar(inputValue.charAt(selectionStart - 1))) {
+                        event.preventDefault();
+                    }
+                break;
+
+                //right
+                case 39:
+                    if (!this.isNumeralChar(inputValue.charAt(selectionStart))) {
+                        event.preventDefault();
+                    }
+                break;
+
+                //backspace
+                case 8: {
+                    event.preventDefault();
+                    let newValueStr = null;
+
+                    if (selectionStart === selectionEnd) {
+                        let deleteChar = inputValue.charAt(selectionStart - 1);
+                        let decimalCharIndex = inputValue.search(this._decimal);
+                        this._decimal.lastIndex = 0;
+
+                        if (this.isNumeralChar(deleteChar)) {
+                            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)) {
+                                this._decimal.lastIndex = 0;
+                                this.$refs.input.$el.setSelectionRange(selectionStart - 1, selectionStart - 1);
+                            }
+                            else if (decimalCharIndex > 0 && selectionStart > decimalCharIndex) {
+                                newValueStr = inputValue.slice(0, selectionStart - 1) + '0' + inputValue.slice(selectionStart);
+                            }
+                            else {
+                                newValueStr = inputValue.slice(0, selectionStart - 1) + inputValue.slice(selectionStart);
+                            }
+                        }
+
+                        if (newValueStr != null) {
+                            this.updateValue(event, newValueStr, 'delete-single');
+                        }
+                    }
+                    else {
+                        newValueStr = this.deleteRange(inputValue, selectionStart, selectionEnd);
+                        this.updateValue(event, newValueStr, 'delete-range');
+                    }
+
+                    break;
+                }
+
+                default:
+                break;
+            }
+        },
+        onInputKeyPress(event) {
+            event.preventDefault();
+            let code = event.which || event.keyCode;
+            let char = String.fromCharCode(code);
+
+            if ((48 <= code && code <= 57) || this.isMinusSign(char)) {
+                this.insert(event, char);
+            }
+        },
+        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());
+                }
+            }
+        },
+        isMinusSign(char) {
+            if (this._minusSign.test(char)) {
+                this._minusSign.lastIndex = 0;
+                return true;
+            }
+
+            return false;
+        },
+        insert(event, text) {
+            let selectionStart = this.$refs.input.$el.selectionStart;
+            let selectionEnd = this.$refs.input.$el.selectionEnd;
+            let inputValue = this.$refs.input.$el.value.trim();
+            let maxFractionDigits = this.numberFormat.resolvedOptions().maximumFractionDigits;
+            let newValueStr;
+            let decimalCharIndex = inputValue.search(this._decimal);
+            this._decimal.lastIndex = 0;
+
+            if (decimalCharIndex > 0 && selectionStart > decimalCharIndex) {
+                if ((selectionStart + text.length - (decimalCharIndex + 1)) <= maxFractionDigits) {
+                    newValueStr = inputValue.slice(0, selectionStart) + text + inputValue.slice(selectionStart + text.length);
+                    this.updateValue(event, newValueStr, 'insert');
+                }
+            }
+            else {
+                newValueStr = this.insertText(inputValue, text, selectionStart, selectionEnd);
+                this.updateValue(event, newValueStr, 'insert');
+            }
+        },
+        insertText(value, text, start, end) {
+            let newValueStr;
+
+            if ((end - start) === value.length)
+                newValueStr = text;
+            else if (start === 0)
+                newValueStr = text + value.slice(end);
+            else if (end === value.length)
+                newValueStr = value.slice(0, start) + text;
+            else
+                newValueStr = value.slice(0, start) + text + value.slice(end);
+
+            return newValueStr;
+        },
+        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);
+
+            return newValueStr;
+        },
+        initCursor() {
+            let selectionStart = this.$refs.input.$el.selectionStart;
+            let inputValue = this.$refs.input.$el.value;
+            let valueLength = inputValue.length;
+            let index = null;
+
+            let char = inputValue.charAt(selectionStart);
+            if (this.isNumeralChar(char)) {
+                return;
+            }
+
+            //left
+            let i = selectionStart - 1;
+            while (i >= 0) {
+                char = inputValue.charAt(i);
+                if (this.isNumeralChar(char)) {
+                    index = i;
+                    break;
+                }
+                else {
+                    i--;
+                }
+            }
+
+            if (index !== null) {
+                this.$refs.input.$el.setSelectionRange(index + 1, index + 1);
+            }
+            else {
+                i = selectionStart + 1;
+                while (i < valueLength) {
+                    char = inputValue.charAt(i);
+                    if (this.isNumeralChar(char)) {
+                        index = i;
+                        break;
+                    }
+                    else {
+                        i++;
+                    }
+                }
+
+                if (index !== null) {
+                    this.$refs.input.$el.setSelectionRange(index, index);
+                }
+            }
+        },
+        onInputClick() {
+            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;
+        },
+        updateValue(event, valueStr, operation) {
+            if (valueStr != null) {
+                let newValue = this.parseValue(valueStr);
+                let valid = this.isWithinRange(newValue);
+
+                if (valid) {
+                    this.updateInput(newValue, operation);
+                    this.updateModel(event, newValue);
+                }
+            }
+        },
+        isWithinRange(value) {
+            return value == null || ((this.min == null || value > this.min) && (this.max == null || value < this.max));
+        },
+        updateInput(value, operation) {
+            let currentLength = this.$refs.input.$el.value.length;
+
+            if (currentLength === 0) {
+                this.$refs.input.$el.value = this.formatValue(value);
+                this.$refs.input.$el.setSelectionRange(0, 0);
+                this.initCursor();
+                this.$refs.input.$el.setSelectionRange(this.$refs.input.$el.selectionStart + 1, this.$refs.input.$el.selectionStart + 1);
+            }
+            else {
+                let selectionStart = this.$refs.input.$el.selectionEnd;
+                let selectionEnd = this.$refs.input.$el.selectionEnd;
+                this.$refs.input.$el.value = this.formatValue(value);
+                let newLength = this.$refs.input.$el.value.length;
+
+                if (newLength === currentLength) {
+                    if (operation === 'insert')
+                        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')
+                        this.$refs.input.$el.setSelectionRange(selectionStart, selectionStart);
+                    else if (operation === 'spin')
+                        this.$refs.input.$el.setSelectionRange(selectionStart, selectionEnd);
+                }
+                else {
+                    selectionEnd = selectionEnd + (newLength - currentLength);
+                    this.$refs.input.$el.setSelectionRange(selectionEnd, selectionEnd);
+                }
+            }
+
+            this.$refs.input.$el.setAttribute('aria-valuenow', value);
+        },
+        updateModel(event, value) {
+            this.$emit('input', value);
+        },
+        onInputFocus(event) {
+            this.focused = true;
+            this.$emit('blur', event);
+        },
+        onInputBlur(event) {
+            this.focused = false;
+            this.$emit('blur', event);
+        },
+        clearTimer() {
+            if (this.timer) {
+                clearInterval(this.timer);
+            }
+        }
+    },
+    computed: {
+        containerClass() {
+            return ['p-inputnumber p-component', {
+                'p-inputwrapper-filled': this.filled,
+                'p-inputwrapper-focus': this.focused,
+                'p-inputnumber-buttons-stacked': this.buttonLayout === 'stacked',
+                'p-inputnumber-buttons-horizontal': this.buttonLayout === 'horizontal',
+                'p-inputnumber-buttons-vertical': this.buttonLayout === 'vertical'
+            }];
+        },
+        upButtonClass() {
+            return ['p-inputnumber-button p-inputnumber-button-up', this.incrementButtonClass];
+        },
+        downButtonClass() {
+            return ['p-inputnumber-button p-inputnumber-button-down', this.decrementButtonClass];
+        },
+        filled() {
+            return (this.value != null && this.value.toString().length > 0)
+        },
+        listeners() {
+            return {
+                ...this.$listeners,
+                input: event => this.onInput(event),
+                keydown: event => this.onInputKeyDown(event),
+                keypress: event => this.onInputKeyPress(event),
+                paste: event => this.onPaste(event),
+                click: event => this.onInputClick(event),
+                focus: event => this.onInputFocus(event),
+                blur: event => this.onInputBlur(event)
+            };
+        },
+        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)
+            }
+        },
+        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)
+            }
+        }
+    },
+    components: {
+        'INInputText': InputText,
+        'INButton': Button
+    }
+}
+</script>
+
+<style>
+.p-inputnumber {
+    display: inline-flex;
+}
+
+.p-inputnumber-button-up,
+.p-inputnumber-button-down {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+}
+
+.p-inputnumber-input {
+    flex: 1 1 auto;
+}
+
+.p-inputnumber-buttons-stacked .p-inputnumber-button-up {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.p-inputnumber-buttons-stacked .p-inputnumber-input {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.p-inputnumber-buttons-stacked .p-inputnumber-button-down {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.p-inputnumber-buttons-stacked .p-inputnumber-button-group {
+    display: flex;
+    flex-direction: column;
+}
+
+.p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-inputnumber-button {
+    flex: 1 1 auto;
+}
+
+.p-inputnumber-buttons-horizontal .p-inputnumber-button-up {
+    order: 3;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.p-inputnumber-buttons-horizontal .p-inputnumber-input {
+    order: 2;
+    border-radius: 0;
+}
+
+.p-inputnumber-buttons-horizontal .p-inputnumber-button-down {
+    order: 1;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.p-inputnumber-buttons-vertical {
+    flex-direction: column;
+}
+
+.p-inputnumber-buttons-vertical .p-inputnumber-button-up {
+    order: 1;
+    flex: 1 1 auto;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    width: auto;
+}
+
+.p-inputnumber-buttons-vertical .p-inputnumber-input {
+    order: 2;
+    border-radius: 0;
+    text-align: center;
+}
+
+.p-inputnumber-buttons-vertical .p-inputnumber-button-down {
+    order: 3;
+    flex: 1 1 auto;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    width: auto;
+}
+
+.p-fluid .p-inputnumber {
+    width: 100%;
+}
+
+.p-fluid .p-inputnumber .p-inputnumber-input {
+    width: 1%;
+}
+
+.p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input,
+.p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-button {
+    width: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index fc34dee14..82b01110d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -28,6 +28,8 @@ import Fieldset from './components/fieldset/Fieldset';
 import FileUpload from './components/fileupload/FileUpload';
 import FullCalendar from './components/fullcalendar/FullCalendar';
 import Inplace from './components/inplace/Inplace';
+import InputMask from './components/inputmask/InputMask';
+import InputNumber from './components/inputnumber/InputNumber';
 import InputSwitch from './components/inputswitch/InputSwitch';
 import InputText from './components/inputtext/InputText';
 import Listbox from './components/listbox/Listbox';
@@ -69,7 +71,6 @@ import Toolbar from './components/toolbar/Toolbar';
 import Tooltip from './components/tooltip/Tooltip';
 import ToggleButton from './components/togglebutton/ToggleButton';
 import TriStateCheckbox from './components/tristatecheckbox/TriStateCheckbox';
-import InputMask from './components/inputmask/InputMask';
 import ValidationMessage from './components/validationmessage/ValidationMessage';
 import Galleria from './components/galleria/Galleria';
 
@@ -117,6 +118,8 @@ Vue.component('Fieldset', Fieldset);
 Vue.component('FileUpload', FileUpload);
 Vue.component('FullCalendar', FullCalendar);
 Vue.component('Inplace', Inplace);
+Vue.component('InputMask', InputMask);
+Vue.component('InputNumber', InputNumber);
 Vue.component('InputSwitch', InputSwitch);
 Vue.component('InputText', InputText);
 Vue.component('Listbox', Listbox);
@@ -156,7 +159,6 @@ Vue.component('ToggleButton', ToggleButton);
 Vue.component('Tree', Tree);
 Vue.component('TreeTable', TreeTable);
 Vue.component('TriStateCheckbox', TriStateCheckbox);
-Vue.component('InputMask', InputMask);
 Vue.component('ValidationMessage', ValidationMessage);
 Vue.component('Galleria', Galleria);
 
diff --git a/src/router.js b/src/router.js
index 396cb9c80..d2c6b77bb 100644
--- a/src/router.js
+++ b/src/router.js
@@ -315,6 +315,11 @@ export default new Router({
 			path: '/inputmask',
 			name: 'inputmask',
 			component: () => import('./views/inputmask/InputMaskDemo.vue')
+        },
+        {
+			path: '/inputnumber',
+			name: 'inputnumber',
+			component: () => import('./views/inputnumber/InputNumberDemo.vue')
 		},
 		{
 			path: '/listbox',
diff --git a/src/views/inputnumber/InputNumberDemo.vue b/src/views/inputnumber/InputNumberDemo.vue
new file mode 100644
index 000000000..cab9f169c
--- /dev/null
+++ b/src/views/inputnumber/InputNumberDemo.vue
@@ -0,0 +1,151 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>InputNumber</h1>
+                <p>InputNumber is an input component to provide numerical input.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <h3>Numerals</h3>
+            <div class="p-grid p-fluid">
+                <div class="p-col-12 p-md-3">
+                    Integer Only
+                    <InputNumber v-model="value1" />
+                </div>
+                <div class="p-col-12 p-md-3">
+                    Without Grouping
+                    <InputNumber v-model="value2" mode="decimal" :useGrouping="false" />
+                </div>
+                <div class="p-col-12 p-md-3">
+                    Min-Max Fraction Digits
+                    <InputNumber v-model="value3" mode="decimal" :minFractionDigits="2" :maxFractionDigits="5" />
+                </div>
+                <div class="p-col-12 p-md-3">
+                    Min-Max Boundaries
+                    <InputNumber v-model="value4" mode="decimal" :min="0" :max="100" />
+                </div>
+
+                <div class="p-col-12 p-md-3">
+                    User Locale
+                    <InputNumber v-model="value5" mode="decimal" :minFractionDigits="2" />
+                </div>
+                <div class="p-col-12 p-md-3">
+                    United State Locale
+                    <InputNumber v-model="value6" mode="decimal" locale="en-US" :minFractionDigits="2" />
+                </div>
+                <div class="p-col-12 p-md-3">
+                    German Locale
+                    <InputNumber v-model="value7" mode="decimal" locale="de-DE" :minFractionDigits="2"/>
+                </div>
+                <div class="p-col-12 p-md-3">
+                    Indian Locale
+                    <InputNumber v-model="value8" mode="decimal" locale="en-IN" :minFractionDigits="2" />
+                </div>
+            </div>
+
+            <h3>Currency</h3>
+            <div class="p-grid p-fluid">
+                <div class="p-col-12 p-md-3">
+                    United States
+                    <InputNumber v-model="value9" mode="currency" currency="USD" locale="en-US" />
+                </div>
+                <div class="p-col-12 p-md-3">
+                    Germany
+                    <InputNumber v-model="value10" mode="currency" currency="EUR" locale="de-DE" />
+                </div>
+                <div class="p-col-12 p-md-3">
+                    India
+                    <InputNumber v-model="value11" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" />
+                </div>
+                <div class="p-col-12 p-md-3">
+                    Japan
+                    <InputNumber v-model="value12" mode="currency" currency="JPY" locale="jp-JP" />
+                </div>
+            </div>
+
+            <h3>Prefix and Suffix</h3>
+            <div class="p-grid p-fluid">
+                <div class="p-col-12 p-md-3">
+                    Mile
+                    <InputNumber v-model="value13" suffix=" mi" />
+                </div>
+                <div class="p-col-12 p-md-3">
+                    Percent
+                    <InputNumber v-model="value14" prefix="%" />
+                </div>
+                <div class="p-col-12 p-md-3">
+                    Expiry
+                    <InputNumber v-model="value15" prefix="Expires in " suffix=" days" />
+                </div>
+                <div class="p-col-12 p-md-3">
+                    Temperature
+                    <InputNumber v-model="value16" prefix="&uarr; " suffix="℃" :min="0" :max="40" />
+                </div>
+            </div>
+
+            <h3>Buttons</h3>
+            <div class="p-grid p-fluid">
+                <div class="p-col-12 p-md-3">
+                    Stacked
+                    <InputNumber v-model="value17" showButtons mode="currency" currency="USD" />
+                </div>
+                <div class="p-col-12 p-md-3">
+                    Horizontal with Step
+                    <InputNumber v-model="value18" showButtons buttonLayout="horizontal" spinnerMode="horizontal" :step="0.25"
+                        decrementButtonclass="p-button-danger" incrementButtonclass="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" mode="currency" currency="EUR" />
+                </div>
+                <div class="p-col-12 p-md-3">
+                    <div>Vertical</div>
+                    <InputNumber v-model="value19" mode="decimal" showButtons buttonLayout="vertical" spinnerMode="vertical"
+                        decrementButtonclass="p-button-secondary" incrementButtonclass="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" />
+                </div>
+                <div class="p-col-12 p-md-3">
+                    Min-Max Boundaries
+                    <InputNumber v-model="value20" mode="decimal" showButtons :min="0" :max="100" />
+                </div>
+            </div>
+        </div>
+
+        <InputNumberDoc />
+    </div>
+</template>
+
+<script>
+import InputNumberDoc from './InputNumberDoc';
+
+export default {
+    data() {
+        return {
+            value1: 42723,
+            value2: 58151,
+            value3: 2351.35,
+            value4: 50,
+            value5: 151351,
+            value6: 115744,
+            value7: 635524,
+            value8: 732762,
+            value9: 1500,
+            value10: 2500,
+            value11: 4250,
+            value12: 5002,
+            value13: 20,
+            value14: 50,
+            value15: 10,
+            value16: 20,
+            value17: 20,
+            value18: 10.50,
+            value19: 25,
+            value20: 50
+        }
+    },
+	components: {
+		'InputNumberDoc': InputNumberDoc
+	}
+}
+</script>
+
+<style>
+
+</style>
diff --git a/src/views/inputnumber/InputNumberDoc.vue b/src/views/inputnumber/InputNumberDoc.vue
new file mode 100644
index 000000000..1ae3de385
--- /dev/null
+++ b/src/views/inputnumber/InputNumberDoc.vue
@@ -0,0 +1,89 @@
+<template>
+	<div class="content-section documentation">
+		<TabView>
+			<TabPanel header="Documentation">
+				<h3>Import</h3>
+<CodeHighlight lang="javascript">
+import InputText from 'primevue/inputtext';
+</CodeHighlight>
+
+				<h3>Getting Started</h3>
+				<p>A model can be bound using the standard v-model directive.</p>
+<CodeHighlight>
+&lt;InputText type="text" v-model="value" /&gt;
+</CodeHighlight>
+
+				<h3>Float Label</h3>
+				<p>A floating label is implemented by wrapping the input and the label inside a container having <i>.p-float-label</i> style class.</p>
+<CodeHighlight>
+&lt;span class="p-float-label"&gt;
+	&lt;InputText id="username" type="text" v-model="value" /&gt;
+	&lt;label for="username"&gt;Username&lt;/label&gt;
+&lt;/span&gt;
+</CodeHighlight>
+
+				<h3>Properties</h3>
+				<p>InputText passes any valid attribute to the underlying input element.</p>
+
+                <h3>Events</h3>
+                <p>Any valid event such as focus, blur and input are passed to the underlying input element.</p>
+
+				<h3>Styling</h3>
+				<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+				<div class="doc-tablewrapper">
+					<table class="doc-table">
+						<thead>
+						<tr>
+							<th>Name</th>
+							<th>Element</th>
+						</tr>
+						</thead>
+						<tbody>
+						<tr>
+							<td>p-inputtext</td>
+							<td>Input element</td>
+						</tr>
+						</tbody>
+					</table>
+				</div>
+
+				<h3>Dependencies</h3>
+				<p>None.</p>
+			</TabPanel>
+
+			<TabPanel header="Source">
+				<a href="https://github.com/primefaces/primevue/tree/master/src/views/inputtext" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+					<span>View on GitHub</span>
+				</a>
+<CodeHighlight>
+<template v-pre>
+&lt;h3&gt;Basic&lt;/h3&gt;
+&lt;InputText type="text" v-model="value1" /&gt;
+&lt;span :style="{marginLeft: '.5em'}"&gt;{{value1}}&lt;/span&gt;
+
+&lt;h3&gt;Floating Label&lt;/h3&gt;
+&lt;span class="p-float-label"&gt;
+    &lt;InputText id="username" type="text" v-model="value2" /&gt;
+    &lt;label for="username"&gt;Username&lt;/label&gt;
+&lt;/span&gt;
+
+&lt;h3&gt;Disabled&lt;/h3&gt;
+&lt;InputText type="text" v-model="value3" disabled /&gt;
+</template>
+</CodeHighlight>
+
+<CodeHighlight lang="javascript">
+export default {
+	data() {
+		return {
+			value1: '',
+			value2: '',
+			value3: 'PrimeVue'
+		}
+	}
+}
+</CodeHighlight>
+			</TabPanel>
+		</TabView>
+	</div>
+</template>
\ No newline at end of file