fix bug and update version

Author: kevinongko

README.md

@@ -1,8 +1,7 @@
 # vue-numeric
 
 [![npm version](https://badge.fury.io/js/vue-numeric.svg)](https://badge.fury.io/js/vue-numeric)
-[![npm](https://img.shields.io/npm/dt/vue-numeric.svg)](https://www.npmjs.com/package/vue-numeric)
-[![npm](https://img.shields.io/npm/l/vue-numeric.svg)](http://opensource.org/licenses/MIT)
+[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](http://opensource.org/licenses/MIT)
 
 Numeric input component based on [Vue](https://vuejs.org/).
 
@@ -29,17 +28,17 @@ import VueNumeric from 'vue-numeric'
 export default {
 
   name: 'App',
-  
+
   components: {
     VueNumeric
   },
-  
+
   data () {
     return {
       price: ''
     }
   }
-  
+
 }
 </script>
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-numeric",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "Numeric input component based on Vue",
   "author": "Kevin Ongko",
   "main": "src/vue-numeric.vue",

src/vue-numeric.vue

@@ -1,33 +1,36 @@
 <template>
-  <input type="tel" ref="numeric" :value="value" @input="updateValue(amountValue)" v-model="amount">
+  <input type="tel" :placeholder="placeholder" ref="numeric" @input="processValue(amountValue)" v-model="amount">
 </template>
 
 <script>
 export default {
-
-  name: 'vue-numeric',
+  name: 'Vue-Numeric',
 
   props: {
-    value: {
-      default: 0,
-      required: true,
+    default: {
+      required: false,
       type: [String, Number]
     },
 
-    currency: {
-      default: '',
+    placeholder: {
       required: false,
       type: String
     },
 
     min: {
       required: false,
-      type: Number
+      type: [String, Number]
     },
 
     max: {
       required: false,
-      type: Number
+      type: [String, Number]
+    },
+
+    currency: {
+      default: '',
+      required: false,
+      type: String
     },
 
     separator: {
@@ -42,51 +45,69 @@ export default {
   }),
 
   computed: {
+    amountValue () {
+      return this.formatToNumber(this.amount)
+    },
+
     defaultValue () {
-      return this.formatToNumber(this.value)
+      if (this.default) return this.formatToNumber(this.default)
+      return 0
     },
 
-    amountValue () {
-      return this.formatToNumber(this.amount)
+    minValue () {
+      return this.formatToNumber(this.min)
+    },
+
+    maxValue () {
+      return this.formatToNumber(this.max)
     }
   },
 
+  mounted () {
+    if (this.default) this.processValue(this.defaultValue)
+  },
+
   methods: {
-    checkMinValue (value) {
-      if (this.min) {
-        if (value >= this.min) return true
-        return false
+    checkMaxValue (value) {
+      if (this.max) {
+        if (value <= this.maxValue) return false
+        return true
       }
-      return true
+      return false
     },
 
-    checkMaxValue (value) {
-      if (this.max) {
-        if (value <= this.max) return true
-        return false
+    checkMinValue (value) {
+      if (this.min) {
+        if (value >= this.minValue) return false
+        return true
       }
-      return true
+      return false
     },
 
     formatToNumber (value) {
-      +value.replace(/[^0-9]+/g, '')
+      return Number(+value.replace(/[^0-9]+/g, ''))
     },
 
     formatToCurrency (value) {
-      const numberWithSeparator = Number(value).toString().replace(/\B(?=(\d{3})+(?!\d))/g, this.separator)
+      const numberWithSeparator = value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, this.separator)
       return this.currency + ' ' + numberWithSeparator
     },
 
-    updateValue (value) {
-      if (this.checkMinValue(value) && this.checkMaxValue(value)) {
-        this.amount = this.formatToCurrency(value)
-        this.$emit('input', value)
+    processValue (value) {
+      if (this.checkMaxValue(value)) {
+        this.updateValue(this.maxValue)
+      } else if (this.checkMinValue(value)) {
+        this.updateValue(this.minValue)
+      } else {
+        this.updateValue(value)
       }
+    },
+
+    updateValue (value) {
+      this.amount = this.formatToCurrency(value)
+      this.$emit('input', value)
     }
-  },
 
-  mounted () {
-    this.updateValue(this.defaultValue)
   }
 }
-</script>
+</script>