Support min/max limits

README.md

@@ -10,6 +10,7 @@
 - Component or Directive flavors
 - Accept copy/paste
 - Editable
+- Min/Max Range.
 
 For other types of mask, use [vue-the-mask](https://vuejs-tips.github.io/vue-the-mask)
 
@@ -49,7 +50,9 @@ Vue.use(money, {precision: 4})
           prefix: 'R$ ',
           suffix: ' #',
           precision: 2,
-          masked: false
+          masked: false,
+          min: 0,
+          max: 10000
         }
       }
     }
@@ -79,7 +82,7 @@ Must use `vmodel.lazy` to bind works properly.
           prefix: 'R$ ',
           suffix: ' #',
           precision: 2,
-          masked: false /* doesn't work with directive */
+          masked: false /* doesn't work with directive */,
         }
       }
     },
@@ -99,6 +102,8 @@ Must use `vmodel.lazy` to bind works properly.
 | prefix    | false    | String  | ""      | Currency symbol followed by a Space, like "R$ "         |
 | suffix    | false    | String  | ""      | Percentage for example: " %"                            |
 | masked    | false    | Boolean | false   | If the component output should include the mask or not  |
+| min       | false    | Number  | null    | Limit min value, when null no limit                     |
+| max       | false    | Number  | null    | Limit max value, when null no limit                     |
 
 ### References
 

src/component.vue

@@ -2,7 +2,7 @@
   <input type="tel"
          :value="formattedValue"
          @change="change"
-         v-money="{precision, decimal, thousands, prefix, suffix}"
+         v-money="{precision, decimal, thousands, prefix, suffix, min, max}"
          class="v-money" />
 </template>
 
@@ -42,6 +42,14 @@ export default {
     suffix: {
       type: String,
       default: () => defaults.suffix
+    },
+    min: {
+      type: Number,
+      default: () => defaults.min
+    },
+    max: {
+      type: Number,
+      default: () => defaults.max
     }
   },
 
@@ -67,6 +75,12 @@ export default {
 
   methods: {
     change (evt) {
+        var unMaskedValue = unformat(evt.target.value, this.precision)
+        if (this.min !== null && unMaskedValue < this.min) {
+            evt.target.value = format(this.min, this.$props)
+        } else if (this.max !== null && unMaskedValue > this.max) {
+            evt.target.value = format(this.max, this.$props)
+        }
       this.$emit('input', this.masked ? evt.target.value : unformat(evt.target.value, this.precision))
     }
   }

src/docs/docs.vue

@@ -75,6 +75,21 @@
     <div class="column col-2 col-sm-3">
       <input class="form-input" type="text" id="thousands" v-model="config.thousands" />
     </div>
+
+    <div class="column col-2 col-sm-3">
+      <label class="form-label" for="thousands">Min</label>
+    </div>
+    <div class="column col-2 col-sm-3">
+      <input class="form-input" type="number" id="minValue" v-model.number="config.min" />
+    </div>
+
+    <div class="column col-2 col-sm-3">
+      <label class="form-label" for="thousands">Max</label>
+    </div>
+    <div class="column col-2 col-sm-3">
+      <input class="form-input" type="number" id="maxValue" v-model.number="config.max" />
+    </div>
+
     <div class="column col-4 col-sm-5">
       <div class="form-group">
         <label class="form-checkbox">
@@ -113,7 +128,7 @@ export default {
       price: 1234.5,
       priceDirective: 5432.1,
       priceVuetify: 6789.10,
-      config: {decimal: ',', thousands: '.', prefix: 'R$ ', suffix: ' #', precision: 2, masked: false}
+      config: {decimal: ',', thousands: '.', prefix: 'R$ ', suffix: ' #', precision: 2, masked: false, min: 0, max: 100}
     }
   }
 }

src/options.js

@@ -3,5 +3,7 @@ export default {
   suffix: '',
   thousands: ',',
   decimal: '.',
-  precision: 2
+  precision: 2,
+  min: null,
+  max: null
 }