2.2.6

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-numeric",
-  "version": "2.2.5",
+  "version": "2.2.6",
   "description": "Input field component to display currency value based on Vue.",
   "author": "Kevin Ongko",
   "main": "dist/vue-numeric.min.js",

src/vue-numeric.vue

@@ -173,6 +173,7 @@ export default {
   methods: {
     /**
      * Handle blur event.
+     * @param {Object} e
      */
     onBlurHandler (e) {
       this.$emit('blur', e)
@@ -181,16 +182,21 @@ export default {
 
     /**
      * Handle focus event.
+     * @param {Object} e
      */
     onFocusHandler (e) {
       this.$emit('focus', e)
-      this.amount = accounting.formatMoney(this.valueNumber, {
-        symbol: '',
-        format: '%v',
-        thousand: '',
-        decimal: this.decimalSeparator,
-        precision: Number(this.precision)
-      })
+      if (this.valueNumber === 0) {
+        this.amount = null
+      } else {
+        this.amount = accounting.formatMoney(this.valueNumber, {
+          symbol: '',
+          format: '%v',
+          thousand: '',
+          decimal: this.decimalSeparator,
+          precision: Number(this.precision)
+        })
+      }
     },
 
     /**

test/specs/vue-numeric.spec.js

@@ -6,11 +6,6 @@ import VueNumeric from '@/vue-numeric'
 import sinon from 'sinon'
 
 describe('vue-numeric.vue', () => {
-  it('has name', () => {
-    const wrapper = mount(VueNumeric, { propsData: { value: 0 } })
-    expect(wrapper.name()).to.equal('vue-numeric')
-  })
-
   it('Use default decimal separator', () => {
     const wrapper = mount(VueNumeric, { propsData: { value: 2000 }})
     expect(wrapper.data().amount).to.equal('2,000')
@@ -177,6 +172,12 @@ describe('vue-numeric.vue', () => {
     expect(wrapper.data().amount).to.equal('2,000')
   })
 
+  it('clear the field if zero value', () => {
+    const wrapper = mount(VueNumeric, {propsData: { value: 0, separator: '.', precision: 2 }})
+    wrapper.trigger('focus')
+    expect(wrapper.data().amount).to.equal(null)
+  })
+
   it('remove thousand separator and symbol on focus with , decimal', () => {
     const wrapper = mount(VueNumeric, {propsData: { value: 2000.21, separator: '.', precision: 2 }})
     wrapper.trigger('focus')
@@ -224,13 +225,13 @@ describe('vue-numeric.vue', () => {
   })
 
   it('apply new separator immediately if it is changed', () => {
-    const wrapper = mount(VueNumeric, { propsData: { value: 2000, separator: ',' } })
+    const wrapper = mount(VueNumeric, { propsData: { value: 2000, separator: ',' }})
     wrapper.setProps({ separator: '.' })
     expect(wrapper.data().amount).to.equal('2.000')
   })
 
   it('apply new currency prop immediately if it is changed', () => {
-    const wrapper = mount(VueNumeric, { propsData: { value: 0, currency: '$' } })
+    const wrapper = mount(VueNumeric, { propsData: { value: 0, currency: '$' }})
     wrapper.setProps({ currency: 'USD' })
     expect(wrapper.data().amount).to.equal('USD 0')
   })