Implement step prop

Author: krystalcampioni

README.md

@@ -27,6 +27,7 @@ export default {
 <NumberInputSpinner
   :min="0"
   :max="10"
+  :step="2"
   :inputClass="your-css-class"
   :buttonClass="your-other-css-class"
   :integerOnly="true"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-number-input-spinner",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A Vue number spinner component that only allows the user to type in numbers",
   "author": "krystalcampioni <[email protected]>",
   "license": "MIT",

src/App.vue

@@ -1,10 +1,7 @@
 <template>
   <div id="app" style="text-align: center; padding: 10vw; max-width: 960px; width: 90vw">
     <div>
-      <NumberInputSpinner
-        :max="10"
-        :min="-10"
-      />
+      <NumberInputSpinner />
     </div>
   </div>
 </template>

src/components/NumberInputSpinner.vue

@@ -33,6 +33,10 @@ export default {
             default: 10,
             type: Number
         },
+        step: {
+          default: 1,
+          type: Number
+        },
         inputClass: {
           default: 'vnis__input',
           type: String
@@ -48,9 +52,9 @@ export default {
     },
 
     methods: {
-        increaseNumber() { this.numericValue++; },
+        increaseNumber() { this.numericValue += this.step; },
 
-        decreaseNumber() { this.numericValue--; },
+        decreaseNumber() { this.numericValue -= this.step; },
 
         isInteger(evt) {
             evt = (evt) ? evt : window.event;
@@ -68,7 +72,6 @@ export default {
            evt = (evt) ? evt : window.event;
            var charCode = (evt.which) ? evt.which : evt.keyCode;
 
-           console.log(charCode)
            if ((charCode > 31 && (charCode < 48 || charCode > 57)) && charCode !== 46) {
                evt.preventDefault();
            }