add min & max limiter

Author: kevinongko

.gitignore

@@ -1 +1,2 @@
 npm-debug.log
+node_modules

package.json

@@ -1,27 +1,30 @@
 {
-    "name": "vue-numeric",
-    "version": "1.0.2",
-    "description": "Numeric input component based on Vue",
-    "author": "Kevin Ongko",
-    "main": "src/vue-numeric.vue",
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/kevinongko/vue-numeric.git"
-    },
-    "bugs": {
-        "url": "https://github.com/kevinongko/vue-numeric/issues"
-    },
-    "keywords": [
-        "component",
-        "currency",
-        "input",
-        "text",
-        "number",
-        "numeric",
-        "separator",
-        "vue",
-        "vue.js"
-    ],
-    "homepage": "https://github.com/kevinongko/vue-numeric#readme",
-    "license": "MIT"
+  "name": "vue-numeric",
+  "version": "1.0.2",
+  "description": "Numeric input component based on Vue",
+  "author": "Kevin Ongko",
+  "main": "src/vue-numeric.vue",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kevinongko/vue-numeric.git"
+  },
+  "bugs": {
+    "url": "https://github.com/kevinongko/vue-numeric/issues"
+  },
+  "keywords": [
+    "component",
+    "currency",
+    "input",
+    "text",
+    "number",
+    "numeric",
+    "separator",
+    "vue",
+    "vue.js"
+  ],
+  "homepage": "https://github.com/kevinongko/vue-numeric#readme",
+  "license": "MIT",
+  "dependencies": {
+    "lodash": "^4.17.4"
+  }
 }

src/vue-numeric.vue

@@ -1,18 +1,15 @@
 <template>
-  <input type="tel" ref="numeric" :value="value" @input="updateValue(amount)" v-model="amount">
+  <input type="tel" ref="numeric" :value="value" @input="updateValue(amountValue)" v-model="amount">
 </template>
 
 <script>
+import _ from 'lodash'
+
 export default {
 
-  name: 'Vue-Numeric',
+  name: 'vue-numeric',
 
   props: {
-    placeholder: {
-      required: false,
-      type: String
-    },
-
     value: {
       default: 0,
       required: true,
@@ -25,35 +22,69 @@ export default {
       type: String
     },
 
+    min: {
+      required: false,
+      type: Number
+    },
+
+    max: {
+      required: false,
+      type: Number
+    },
+
     separator: {
       default: '',
       required: false,
       type: String
     }
   },
 
-  data () {
-    return {
-      amount: ''
-    }
-  },
+  data: () => ({
+    amount: ''
+  }),
 
-  mounted () {
-    this.updateValue(this.value)
+  computed: {
+    defaultValue () {
+      return _.toNumber(this.value)
+    },
+
+    amountValue () {
+      return _.toNumber(this.amount)
+    }
   },
 
   methods: {
-    updateValue (value) {
-      const number = +value.replace(/[^0-9]+/g, '')
-      this.amount = this.format(number)
-      this.$emit('input', number)
+    checkMinValue (value) {
+      if (this.min) {
+        if (value >= this.min) return true
+        return false
+      }
+      return true
+    },
+
+    checkMaxValue (value) {
+      if (this.max) {
+        if (value <= this.max) return true
+        return false
+      }
+      return true
     },
 
     format (value) {
       const numberWithSeparator = Number(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.format(value)
+        this.$emit('input', value)
+      }
     }
-  }
+  },
 
+  mounted () {
+    this.updateValue(this.defaultValue)
+  }
 }
 </script>