Allow empty fields

package.json

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

src/vue-numeric.vue

@@ -1,13 +1,13 @@
 <template>
   <input
+    v-if="!readOnly"
+    ref="numeric"
+    v-model="amount"
     :placeholder="placeholder"
+    type="tel"
     @blur="onBlurHandler"
     @input="onInputHandler"
     @focus="onFocusHandler"
-    ref="numeric"
-    type="tel"
-    v-model="amount"
-    v-if="!readOnly"
   >
   <span
     v-else
@@ -130,9 +130,14 @@ export default {
      * v-model value.
      */
     value: {
-      type: [Number, String],
-      default: 0,
-      required: true
+      default: '',
+      required: true,
+      type: [String, Number],
+      validator: (value) => {
+        return value === null ||
+               typeof value === 'number' ||
+               typeof value === 'string';
+      }
     },
 
     /**
@@ -266,6 +271,7 @@ export default {
   },
 
   mounted () {
+
     // Set default value props when placeholder undefined.
     if (!this.placeholder) {
       this.process(this.valueNumber)
@@ -283,6 +289,16 @@ export default {
   },
 
   methods: {
+    /**
+     * Test if a value is null, undefined,
+     * or an empty string
+     * @param {Any} value
+     */
+    isNull (val) {
+      if (val === undefined || val === null || val === '') { return true; }
+      return false;
+    },
+
     /**
      * Handle blur event.
      * @param {Object} e
@@ -298,7 +314,7 @@ export default {
      */
     onFocusHandler (e) {
       this.$emit('focus', e)
-      if (this.valueNumber === 0) {
+      if (this.valueNumber === 0 || this.valueNumber === null) {
         this.amount = null
       } else {
         this.amount = accounting.formatMoney(this.valueNumber, {
@@ -334,8 +350,15 @@ export default {
      * @param {Number} value
      */
     update (value) {
-      const fixedValue = accounting.toFixed(value, this.precision)
-      const output = this.outputType.toLowerCase() === 'string' ? fixedValue : Number(fixedValue)
+      var output;
+
+      if (value !== null) {
+        const fixedValue = accounting.toFixed(value, this.precision)
+        output = this.outputType.toLowerCase() === 'string' ? fixedValue : Number(fixedValue)
+      } else {
+        output = null;
+      }
+
       this.$emit('input', output)
     },
 
@@ -345,6 +368,8 @@ export default {
      * @return {String}
      */
     format (value) {
+      // if (value === '' || value === null) { return null; }
+      if (this.isNull(value)) { return null; }
       return accounting.formatMoney(value, {
         symbol: this.currency,
         format: this.symbolPosition,
@@ -361,6 +386,7 @@ export default {
      */
     unformat (value) {
       const toUnformat = typeof value === 'string' && value === '' ? this.emptyValue : value
+      if (toUnformat === null) { return null; }
       return accounting.unformat(toUnformat, this.decimalSeparatorSymbol)
     }
   }

test/specs/vue-numeric.spec.js

@@ -234,6 +234,11 @@ describe('vue-numeric.vue', () => {
     expect(wrapper.data().amount).to.equal('1')
   })
 
+  it('allows a null empty value when the input is empty', () => {
+    const wrapper = mount(VueNumeric, { propsData: { value: '', emptyValue: null }})
+    expect(wrapper.data().amount).to.equal(null)
+  })
+
   it('apply min props value if user input negative value when minus props disabled', () => {
     const component = Vue.extend({
       data: () => ({ total: -200 }),
@@ -256,6 +261,17 @@ describe('vue-numeric.vue', () => {
     expect(wrapper.data().total).to.equal(0)
   })
 
+  it('apply no value if emptyValue is null', () => {
+    const component = Vue.extend({
+      data: () => ({ total: null }),
+      template: '<div><vue-numeric v-model="total" :emptyValue="null"></vue-numeric></div>',
+      components: { VueNumeric }
+    })
+
+    const wrapper = mount(component)
+    expect(wrapper.data().total).to.equal(null)
+  })
+
   it('apply new separator immediately if it is changed', () => {
     const wrapper = mount(VueNumeric, { propsData: { value: 2000, separator: ',' }})
     wrapper.setProps({ separator: '.' })