Merge pull request #1 from kevinongko/develop

Develop

Author: kevinongko

.gitignore

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

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,27 +1,27 @@
 {
-    "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.1.0",
+  "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"
 }

src/vue-numeric.vue

@@ -1,21 +1,29 @@
 <template>
-  <input type="tel" ref="numeric" :value="value" @input="updateValue(amount)" v-model="amount">
+  <input type="tel" :placeholder="placeholder" ref="numeric" @input="processValue(amountValue)" v-model="amount">
 </template>
 
 <script>
 export default {
-
   name: 'Vue-Numeric',
 
   props: {
+    default: {
+      required: false,
+      type: [String, Number]
+    },
+
     placeholder: {
       required: false,
       type: String
     },
 
-    value: {
-      default: 0,
-      required: true,
+    min: {
+      required: false,
+      type: [String, Number]
+    },
+
+    max: {
+      required: false,
       type: [String, Number]
     },
 
@@ -32,28 +40,74 @@ export default {
     }
   },
 
-  data () {
-    return {
-      amount: ''
+  data: () => ({
+    amount: ''
+  }),
+
+  computed: {
+    amountValue () {
+      return this.formatToNumber(this.amount)
+    },
+
+    defaultValue () {
+      if (this.default) return this.formatToNumber(this.default)
+      return 0
+    },
+
+    minValue () {
+      return this.formatToNumber(this.min)
+    },
+
+    maxValue () {
+      return this.formatToNumber(this.max)
     }
   },
 
   mounted () {
-    this.updateValue(this.value)
+    if (this.default) this.processValue(this.defaultValue)
   },
 
   methods: {
-    updateValue (value) {
-      const number = +value.replace(/[^0-9]+/g, '')
-      this.amount = this.format(number)
-      this.$emit('input', number)
+    checkMaxValue (value) {
+      if (this.max) {
+        if (value <= this.maxValue) return false
+        return true
+      }
+      return false
+    },
+
+    checkMinValue (value) {
+      if (this.min) {
+        if (value >= this.minValue) return false
+        return true
+      }
+      return false
+    },
+
+    formatToNumber (value) {
+      return Number(+value.replace(/[^0-9]+/g, ''))
     },
 
-    format (value) {
-      const numberWithSeparator = Number(value).toString().replace(/\B(?=(\d{3})+(?!\d))/g, this.separator)
+    formatToCurrency (value) {
+      const numberWithSeparator = value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, this.separator)
       return this.currency + ' ' + numberWithSeparator
+    },
+
+    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)
     }
-  }
 
+  }
 }
-</script>
+</script>