Allow to specify the output type for the input event.

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