diff --git a/README.md b/README.md index de637f9..eb7a2fb 100644 --- a/README.md +++ b/README.md @@ -109,6 +109,7 @@ By default the decimal value is disabled, to use decimal value add `precision` p |separator|Thousand separator type ( accept either `.` or `,` )|false|String|,| |read-only|Hide input field and show the value in text|false|Boolean|false| |read-only-class|Class for read-only element|false|String|''| +|format-input|Enable/disable formatting on input|false|Boolean|false| ## License diff --git a/spec/vue_numeric.spec.js b/spec/vue_numeric.spec.js index 0bcad99..d220bf3 100644 --- a/spec/vue_numeric.spec.js +++ b/spec/vue_numeric.spec.js @@ -189,4 +189,64 @@ describe('vue-numeric', () => { done() }) }) + + it('Updates value using format-input prop', done => { + const vm = new Vue({ + el, + data () { + return { + total: 0 + } + }, + template: '
', + components: { VueNumeric } + }).$mount() + + vm.total = 3000 + + Vue.nextTick(() => { + expect(vm.$el.firstChild.value.trim()).toEqual('3,000') + done() + }) + }) + + it('Updates value using format-input prop with decimal', done => { + const vm = new Vue({ + el, + data () { + return { + total: 0 + } + }, + template: '
', + components: { VueNumeric } + }).$mount() + + vm.total = 3000.50 + + Vue.nextTick(() => { + expect(vm.$el.firstChild.value.trim()).toEqual('3,000.50') + done() + }) + }) + + it('Updates value using format-input prop with decimal separator \',\' and currency', done => { + const vm = new Vue({ + el, + data () { + return { + total: 0 + } + }, + template: '
', + components: { VueNumeric } + }).$mount() + + vm.total = 3000.50 + + Vue.nextTick(() => { + expect(vm.$el.firstChild.value.trim()).toEqual('$ 3.000,50') + done() + }) + }) }) diff --git a/src/vue-numeric.vue b/src/vue-numeric.vue index 0b3365c..587b227 100644 --- a/src/vue-numeric.vue +++ b/src/vue-numeric.vue @@ -2,9 +2,9 @@ 0) { + let value = this.amount.replace(/[^0-9]/g, '') + + if (value === '') { + return this.minValue + } + + let decimalSeparatorPosition = value.length - this.precision + return Number(value.slice(0, decimalSeparatorPosition) + '.' + value.slice(decimalSeparatorPosition, value.length)) + } + return this.formatToNumber(this.amount) }, @@ -230,13 +250,18 @@ export default { } else { this.updateValue(value) } + + if (this.formatInput) { + this.formatValue(this.amountValue) + } }, /** * Format value using symbol and separator. + * @param {Number} value */ - formatValue () { - this.amount = accounting.formatMoney(this.numberValue, { + formatValue (value) { + this.amount = accounting.formatMoney(value, { symbol: this.currency + ' ', precision: Number(this.precision), decimal: this.decimalSeparator, @@ -271,6 +296,15 @@ export default { */ convertToNumber (value) { this.amount = this.numberToString(value) + }, + + /** + * Check the format-input props is enable or not + */ + focus () { + if (!this.formatInput) { + this.convertToNumber(this.numberValue) + } } }, @@ -309,7 +343,7 @@ export default { // Check default value from parent v-model. if (this.value) { this.processValue(this.formatToNumber(this.value)) - this.formatValue(this.value) + this.formatValue(this.formatToNumber(this.value)) } // Set read-only span element's class @@ -320,7 +354,7 @@ export default { // In case of delayed v-model new value. setTimeout(() => { this.processValue(this.formatToNumber(this.value)) - this.formatValue(this.value) + this.formatValue(this.formatToNumber(this.value)) }, 500) } }