2.2.8

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-numeric",
-  "version": "2.2.7",
+  "version": "2.2.8",
   "description": "Input field component to display currency value based on Vue.",
   "author": "Kevin Ongko",
   "main": "dist/vue-numeric.min.js",
@@ -46,7 +46,7 @@
     "cross-env": "^5.0.5",
     "css-loader": "^0.28.7",
     "eslint": "^4.6.0",
-    "eslint-plugin-vue": "3.13.1",
+    "eslint-plugin-vue": "^4.0.0-beta.0",
     "karma": "^1.7.1",
     "karma-coverage": "^1.1.1",
     "karma-mocha": "^1.3.0",

src/vue-numeric.vue

@@ -9,123 +9,128 @@
     v-model="amount"
     v-if="!readOnly"
   >
-  <span v-else ref="readOnly">{{ amount }}</span>
+  <span
+    v-else
+    ref="readOnly"
+  >{{ amount }}</span>
 </template>
 
 <script>
 import accounting from 'accounting-js'
 
 export default {
-  name: 'vue-numeric',
+  name: 'VueNumeric',
 
   props: {
     /**
      * Currency symbol.
      */
     currency: {
+      type: String,
       default: '',
-      required: false,
-      type: String
+      required: false
     },
 
     /**
      * Maximum value allowed.
      */
     max: {
+      type: Number,
       default: Number.MAX_SAFE_INTEGER || 9007199254740991,
       required: false,
-      type: Number
     },
 
     /**
      * Minimum value allowed.
      */
     min: {
+      type: Number,
       default: Number.MIN_SAFE_INTEGER || -9007199254740991,
-      required: false,
-      type: Number
+      required: false
     },
 
     /**
      * Enable/Disable minus value.
      */
     minus: {
+      type: Boolean,
       default: false,
-      required: false,
-      type: Boolean
+      required: false
     },
 
     /**
      * Input placeholder.
      */
     placeholder: {
-      required: false,
-      type: String
+      type: String,
+      default: '',
+      required: false
     },
 
     /**
      * Value when the input is empty
      */
     emptyValue: {
+      type: [Number, String],
       default: '',
-      required: false,
-      type: [Number, String]
+      required: false
     },
 
     /**
      * Number of decimals.
      * Decimals symbol are the opposite of separator symbol.
      */
     precision: {
-      required: false,
-      type: Number
+      type: Number,
+      default: 0,
+      required: false
     },
 
     /**
      * Thousand separator type.
      * Separator props accept either . or , (default).
      */
     separator: {
+      type: String,
       default: ',',
-      required: false,
-      type: String
+      required: false
     },
 
     /**
      * v-model value.
      */
     value: {
+      type: [Number, String],
       default: 0,
-      required: true,
-      type: [Number, String]
+      required: true
     },
 
     /**
      * Hide input and show value in text only.
      */
     readOnly: {
+      type: Boolean,
       default: false,
-      required: false,
-      type: Boolean
+      required: false
     },
 
     /**
      * Class for the span tag when readOnly props is true.
      */
     readOnlyClass: {
+      type: String,
       default: '',
-      required: false,
-      type: String
+      required: false
     },
 
     /**
      * Position of currency symbol
      * Symbol position props accept either 'suffix' or 'prefix' (default).
      */
     currencySymbolPosition: {
+      type: String,
       default: 'prefix',
-      required: false,
-      type: String
+      required: false
     }
   },
 
@@ -179,6 +184,72 @@ export default {
     }
   },
 
+  watch: {
+    /**
+     * Watch for value change from other input with same v-model.
+     * @param {Number} newValue
+     */
+    valueNumber (newValue) {
+      if (this.$refs.numeric !== document.activeElement) {
+        this.amount = this.format(newValue)
+      }
+    },
+
+    /**
+     * When readOnly is true, replace the span tag class.
+     * @param {Boolean} newValue
+     * @param {Boolean} oldValue
+     */
+    readOnly (newValue, oldValue) {
+      if (oldValue === false && newValue === true) {
+        this.$nextTick(() => {
+          this.$refs.readOnly.className = this.readOnlyClass
+        })
+      }
+    },
+
+    /**
+     * Immediately reflect separator changes
+     */
+    separator () {
+      this.process(this.valueNumber)
+      this.amount = this.format(this.valueNumber)
+    },
+
+    /**
+     * Immediately reflect currency changes
+     */
+    currency () {
+      this.process(this.valueNumber)
+      this.amount = this.format(this.valueNumber)
+    },
+
+    /**
+     * Immediately reflect precision changes
+     */
+    precision () {
+      this.process(this.valueNumber)
+      this.amount = this.format(this.valueNumber)
+    }
+  },
+
+  mounted () {
+    // Set default value props when placeholder undefined.
+    if (!this.placeholder) {
+      this.process(this.valueNumber)
+      this.amount = this.format(this.valueNumber)
+
+      // In case of delayed props value.
+      setTimeout(() => {
+        this.process(this.valueNumber)
+        this.amount = this.format(this.valueNumber)
+      }, 500)
+    }
+
+    // Set read-only span element's class
+    if (this.readOnly) this.$refs.readOnly.className = this.readOnlyClass
+  },
+
   methods: {
     /**
      * Handle blur event.
@@ -258,72 +329,6 @@ export default {
       const toUnformat = typeof value === 'string' && value === '' ? this.emptyValue : value
       return accounting.unformat(toUnformat, this.decimalSeparator)
     }
-  },
-
-  watch: {
-    /**
-     * Watch for value change from other input with same v-model.
-     * @param {Number} newValue
-     */
-    valueNumber (newValue) {
-      if (this.$refs.numeric !== document.activeElement) {
-        this.amount = this.format(newValue)
-      }
-    },
-
-    /**
-     * When readOnly is true, replace the span tag class.
-     * @param {Boolean} newValue
-     * @param {Boolean} oldValue
-     */
-    readOnly (newValue, oldValue) {
-      if (oldValue === false && newValue === true) {
-        this.$nextTick(() => {
-          this.$refs.readOnly.className = this.readOnlyClass
-        })
-      }
-    },
-
-    /**
-     * Immediately reflect separator changes
-     */
-    separator () {
-      this.process(this.valueNumber)
-      this.amount = this.format(this.valueNumber)
-    },
-
-    /**
-     * Immediately reflect currency changes
-     */
-    currency () {
-      this.process(this.valueNumber)
-      this.amount = this.format(this.valueNumber)
-    },
-
-    /**
-     * Immediately reflect precision changes
-     */
-    precision () {
-      this.process(this.valueNumber)
-      this.amount = this.format(this.valueNumber)
-    }
-  },
-
-  mounted () {
-    // Set default value props when placeholder undefined.
-    if (!this.placeholder) {
-      this.process(this.valueNumber)
-      this.amount = this.format(this.valueNumber)
-
-      // In case of delayed props value.
-      setTimeout(() => {
-        this.process(this.valueNumber)
-        this.amount = this.format(this.valueNumber)
-      }, 500)
-    }
-
-    // Set read-only span element's class
-    if (this.readOnly) this.$refs.readOnly.className = this.readOnlyClass
   }
 }
 </script>