update parent component value on input

Author: kevinongko

README.md

@@ -6,15 +6,14 @@
 
 Input field component to display currency value based on [Vue](https://vuejs.org/).
 
-``Works with Vue 2.*``
+`Works with Vue 2.*`
 
 ## Installation
 
 ```sh
 $ npm install vue-numeric --save
 ```
 
-
 ## Usage
 
 ![screen shot 2016-12-08 at 2 19 31 pm](https://cloud.githubusercontent.com/assets/15880638/21001265/f2322438-bd51-11e6-8985-f31a45702484.png)
@@ -65,7 +64,7 @@ Limit minimum and maximum input by using `min, max` props.
 ```
 
 ### Disable/enable minus value
-- `minus` default to `true`.
+- `minus` default to `false`.
 
 ```vue
 <vue-numeric v-bind:minus="false"></vue-numeric>
@@ -101,7 +100,7 @@ By default the decimal value is disabled, to use decimal value add `precision` p
 |default|Input default value|false|Number, String|-|
 |max|Maximum value allowed|false|Number, String|-|
 |min|Minimum value allowed|false|Number, String|0|
-|minus|Enable/disable minus value|false|Boolean|true|
+|minus|Enable/disable minus value|false|Boolean|false|
 |placeholder|Input placeholder|false|String|-|
 |precision|Number of decimals|false|Number, String|-|
 |separator|Thousand separator type ( accept either `.` or `,` )|false|String|,|

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-numeric",
-  "version": "1.3.3",
+  "version": "1.4.0",
   "description": "Input field component to display currency value based on Vue.",
   "author": "Kevin Ongko",
   "main": "src/vue-numeric.vue",

src/vue-numeric.vue

@@ -1,5 +1,14 @@
 <template>
-  <input type="tel" :value="value" v-model="amount" ref="numeric" :placeholder="placeholder" @blur="processValue(amountValue)" @focus="formatValueToNumberType">
+  <input
+    :placeholder="placeholder"
+    :value="value"
+    @blur="formatValue(amountValue)"
+    @input="processValue(amountValue)"
+    @focus="convertValueToNumberType"
+    ref="numeric"
+    type="tel"
+    v-model="amount"
+  >
 </template>
 
 <script>
@@ -47,7 +56,7 @@ export default {
      * Enable/Disable minus value.
      */
     minus: {
-      default: true,
+      default: false,
       required: false,
       type: Boolean
     },
@@ -209,21 +218,29 @@ export default {
     },
 
     /**
-     * Apply value to component.
-     * @param {Number} value
+     * Format value using symbol and separator.
      */
-    updateValue (value) {
-      this.amount = accounting.formatMoney(value, {
+    formatValue () {
+      this.amount = accounting.formatMoney(this.value, {
         symbol: this.currency + ' ',
         precision: Number(this.precision),
         decimal: this.decimalSeparator,
         thousand: this.thousandSeparator
       })
+    },
 
+    /**
+     * Update parent component model value.
+     * @param {Number} value
+     */
+    updateValue (value) {
       this.$emit('input', Number(accounting.toFixed(value, this.precision)))
     },
 
-    formatValueToNumberType () {
+    /**
+     * Remove symbol and separator on focus.
+     */
+    convertValueToNumberType () {
       this.amount = this.value
     }
   },