feat: Add min and max value options vuejs-tips#36

README.md

@@ -8,7 +8,8 @@
 - Component or Directive flavors
 - Accept copy/paste
 - Editable
-- Built-in `money` filter
+- Built-in `money` filter (https://github.com/vuejs-tips/v-money/pull/30)
+- Min / Max Limits (https://github.com/vuejs-tips/v-money/pull/36)
 
 ## Usage
 
@@ -57,7 +58,9 @@ Vue.directive('money', VMoney)
           prefix: 'R$ ',
           suffix: ' #',
           precision: 2,
-          masked: false
+          masked: false, /* doesn't work with directive */
+          min: 0,
+          max: 1000
         }
       }
     }
@@ -87,7 +90,9 @@ Must use `v-model.lazy` to bind works properly.
           prefix: 'R$ ',
           suffix: ' #',
           precision: 2,
-          masked: false /* doesn't work with directive */
+          masked: false, /* doesn't work with directive */
+          min: 0,
+          max: 1000
         }
       }
     },
@@ -108,6 +113,8 @@ Must use `v-model.lazy` to bind works properly.
 | suffix     | false    | String  | ""      | Percentage for example: " %"                            |
 | masked     | false    | Boolean | false   | If the component output should include the mask or not  |
 | allowBlank | false    | Boolean | false   | If the field can start blank and be cleared out by user |
+| min       | false    | Number  | Number.MIN_SAFE_INTEGER | The min value allowed                                   |
+| max       | false    | Number  | Number.MAX_SAFE_INTEGER | The max value allowed                                   |
 
 ### References
 
@@ -116,3 +123,7 @@ Must use `v-model.lazy` to bind works properly.
 - http://www.xe.com/symbols.php
 - https://github.com/kevinongko/vue-numeric
 - https://github.com/plentz/jquery-maskmoney
+- https://github.com/vuejs-tips/v-money/pull/51
+- https://github.com/vuejs-tips/v-money/pull/66
+- https://github.com/vuejs-tips/v-money/pull/55
+- https://github.com/vuejs-tips/v-money/pull/82

src/component.vue

@@ -2,7 +2,7 @@
   <input type="tel"
          :value="formattedValue"
          v-on="listeners"
-         v-money="{precision, decimal, thousands, prefix, suffix, allowBlank}"
+         v-money="{precision, decimal, thousands, prefix, suffix, allowBlank, min, max}"
          class="v-money" />
 </template>
 
@@ -46,7 +46,15 @@ export default {
     allowBlank: {
       type: Boolean,
       default: () => defaults.allowBlank
-    }
+    },
+    min: {
+      type: Number,
+      default: () => defaults.min
+    },
+    max: {
+      type: Number,
+      default: () => defaults.max
+    },
   },
 
   directives: {money},

src/docs/docs.vue

@@ -85,6 +85,19 @@
     </div>
   </div>
 
+  <div class="column col-2 col-sm-3">
+    <label class="form-label" for="min">Min</label>
+  </div>
+  <div class="column col-2 col-sm-3">
+    <input class="form-input" type="number" id="min" v-model="config.min" />
+  </div>
+  <div class="column col-2 col-sm-3">
+    <label class="form-label" for="max">Max</label>
+  </div>
+  <div class="column col-2 col-sm-3">
+    <input class="form-input" type="number" id="max" v-model="config.max" />
+  </div>
+
   <hr />
 
   <h3>Features</h3>
@@ -100,27 +113,36 @@
 </template>
 
 <script>
-import Vue from 'vue'
-import money from '../index'
-import vuetify from 'vuetify'
+import Vue from "vue";
+import money from "../index";
+import vuetify from "vuetify";
 
-Vue.use(money)
-Vue.use(vuetify)
+Vue.use(money);
+Vue.use(vuetify);
 
 export default {
-  data () {
+  data() {
     return {
       price: 1234.5,
       priceDirective: 5432.1,
-      priceVuetify: 6789.10,
-      config: {decimal: ',', thousands: '.', prefix: 'R$ ', suffix: ' #', precision: 2, masked: false}
-    }
+      priceVuetify: 6789.1,
+      config: {
+        decimal: ",",
+        thousands: ".",
+        prefix: "R$ ",
+        suffix: " #",
+        precision: 2,
+        masked: false,
+        min: 0,
+        max: 100000
+      }
+    };
   }
-}
+};
 </script>
 
 <style lang="css">
-@import url('https://cdnjs.cloudflare.com/ajax/libs/spectre.css/0.2.14/spectre.min.css');
+@import url("https://cdnjs.cloudflare.com/ajax/libs/spectre.css/0.2.14/spectre.min.css");
 .v-money {
   text-align: right;
 }
@@ -135,9 +157,9 @@ body {
   background-color: white;
   border-radius: 4px;
   margin-top: 20px;
-  -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);
-  -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);
-  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);
+  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
+  -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
+  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
 }
 figure {
   text-align: center;

src/options.js

@@ -4,5 +4,7 @@ export default {
   thousands: ',',
   decimal: '.',
   precision: 2,
-  allowBlank: false
+  allowBlank: false,
+  min: Number.MIN_SAFE_INTEGER,
+  max: Number.MAX_SAFE_INTEGER
 }

src/utils.js

@@ -8,6 +8,13 @@ function format (input, opt = defaults) {
   if (!isNaN(input)) {
     input = Number(input).toFixed(fixed(opt.precision))
   }
+
+  if (input > opt.max) {
+      input = opt.max
+  } else if (input < opt.min) {
+      input = opt.min
+  }
+
   var negative = input.indexOf('-') >= 0 ? '-' : ''
 
   var numbers = onlyNumbers(input)