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)
}
}