Allow to configure the value set when the input is cleared out (#48)

* Allow to configure the value when the input is empty

* Add empty value tests

Author: tochoromero

README.md

@@ -131,6 +131,12 @@ By default the decimal value is disabled. To use decimals in the value, add the
 <vue-numeric placeholder="only number allowed"></vue-numeric>
 ```
 
+### Value when empty
+By default, when you clean the input the value is set to `0`. You can change this value to fit your needs.
+```vue
+<vue-numeric :empty-value="1"></vue-numeric>
+```
+
 ## Props
 |Props|Description|Required|Type|Default|
 |-----|-----------|--------|----|-------|
@@ -140,6 +146,7 @@ By default the decimal value is disabled. To use decimals in the value, add the
 |min|Minimum value allowed|false|Number|-9007199254740991|
 |minus|Enable/disable negative values|false|Boolean|`false`|
 |placeholder|Input placeholder|false|String|-|
+|empty-value|Value when input is empty|false|Number|0|
 |precision|Number of decimals|false|Number|-|
 |separator|Thousand separator symbol (accepts `space`, `.` or `,`)|false|String|`,`|
 |read-only|Hide input field and show the value as text|false|Boolean|false|

src/vue-numeric.vue

@@ -63,6 +63,15 @@ export default {
       type: String
     },
 
+    /**
+     * Value when the input is empty
+     */
+    emptyValue: {
+      default: '',
+      required: false,
+      type: [Number, String]
+    },
+
     /**
      * Number of decimals.
      * Decimals symbol are the opposite of separator symbol.
@@ -246,7 +255,8 @@ export default {
      * @return {Number}
      */
     unformat (value) {
-      return accounting.unformat(value, this.decimalSeparator)
+      const toUnformat = typeof value === 'string' && value === '' ? this.emptyValue : value
+      return accounting.unformat(toUnformat, this.decimalSeparator)
     }
   },
 

test/specs/vue-numeric.spec.js

@@ -202,6 +202,16 @@ describe('vue-numeric.vue', () => {
     expect(wrapper.data().amount).to.equal('')
   })
 
+  it('sets the value to 0 when no empty value is provided and input is empty', () => {
+    const wrapper = mount(VueNumeric, { propsData: { value: '' }})
+    expect(wrapper.data().amount).to.equal('0')
+  })
+
+  it('uses the provided empty value when input is empty', () => {
+    const wrapper = mount(VueNumeric, { propsData: { value: '', emptyValue: 1 }})
+    expect(wrapper.data().amount).to.equal('1')
+  })
+
   it('apply min props value if user input negative value when minus props disabled', () => {
     const component = Vue.extend({
       data: () => ({ total: -200 }),