Allow to specify the output type for the input event. (#52)

Supported values are String and Number (default)

Author: tochoromero

README.md

@@ -137,6 +137,13 @@ By default, when you clean the input the value is set to `0`. You can change thi
 <vue-numeric :empty-value="1"></vue-numeric>
 ```
 
+### Output Type
+By default the value emitted for the input event is of type `Number`. However you may choose to get a `String` instead
+by setting the property `output-type` to `String`.
+```vue
+<vue-numeric output-type="String"></vue-numeric>
+```  
+
 ## Props
 |Props|Description|Required|Type|Default|
 |-----|-----------|--------|----|-------|
@@ -147,6 +154,7 @@ By default, when you clean the input the value is set to `0`. You can change thi
 |minus|Enable/disable negative values|false|Boolean|`false`|
 |placeholder|Input placeholder|false|String|-|
 |empty-value|Value when input is empty|false|Number|0|
+|output-type|Output Type for input event|false|String|`String`|
 |precision|Number of decimals|false|Number|-|
 |separator|Thousand separator symbol (accepts `space`, `.` or `,`)|false|String|`,`|
 |decimal-separator|Custom decimal separator|false|String|-|

src/vue-numeric.vue

@@ -116,6 +116,16 @@ export default {
       type: String
     },
 
+    /**
+      * The output type used for v-model.
+      * It can either be String or Number (default).
+      */
+    outputType: {
+      required: false,
+        type: String,
+        default: 'Number'
+    },
+
     /**
      * v-model value.
      */
@@ -324,7 +334,9 @@ export default {
      * @param {Number} value
      */
     update (value) {
-      this.$emit('input', Number(accounting.toFixed(value, this.precision)))
+      const fixedValue = accounting.toFixed(value, this.precision)
+      const output = this.outputType.toLowerCase() === 'string' ? fixedValue : Number(fixedValue)
+      this.$emit('input', output)
     },
 
     /**

test/specs/vue-numeric.spec.js

@@ -56,6 +56,28 @@ describe('vue-numeric.vue', () => {
     expect(wrapper.data().amount).to.equal('$ 20.000,4')
   })
 
+  it('outputs Number type by default', () => {
+    const component = Vue.extend({
+      data: () => ({ total: 100 }),
+      template: '<div><vue-numeric v-model="total" :min="1" :max="100"></vue-numeric></div>',
+      components: { VueNumeric }
+    })
+
+    const wrapper = mount(component)
+    expect(typeof wrapper.data().total).to.equal('number')
+  })
+
+  it('outputs String if specified', () => {
+    const component = Vue.extend({
+        data: () => ({ total: 100 }),
+        template: '<div><vue-numeric v-model="total" outputType="String" :min="1" :max="100"></vue-numeric></div>',
+        components: { VueNumeric }
+    })
+
+    const wrapper = mount(component)
+    expect(typeof wrapper.data().total).to.equal('string')
+  })
+
   it('is <span> tag in read-only mode', () => {
     const wrapper = mount(VueNumeric, { propsData: { value: 2000, currency: '$', readOnly: true, readOnlyClass: 'test-class' }})
     wrapper.update()