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>