feat: Add allowBlank option vuejs-tips#51

README.md

@@ -102,14 +102,15 @@ Must use `v-model.lazy` to bind works properly.
 
 ## Properties
 
-| property  | Required | Type    | Default | Description                                             |
-|-----------|----------|---------|---------|---------------------------------------------------------|
-| precision | **true** | Number  | 2       | How many decimal places                                 |
-| decimal   | false    | String  | "."     | Decimal separator                                       |
-| thousands | false    | String  | ","     | Thousands separator                                     |
-| 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  |
+| property   | Required | Type    | Default | Description                                             |
+|------------|----------|---------|---------|---------------------------------------------------------|
+| precision  | **true** | Number  | 2       | How many decimal places                                 |
+| decimal    | false    | String  | "."     | Decimal separator                                       |
+| thousands  | false    | String  | ","     | Thousands separator                                     |
+| 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  |
+| allowBlank | false    | Boolean | false   | If the field can start blank and be cleared out by user |
 
 ### References
 

src/component.vue

@@ -2,7 +2,7 @@
   <input type="tel"
          :value="formattedValue"
          v-on="listeners"
-         v-money="{precision, decimal, thousands, prefix, suffix}"
+         v-money="{precision, decimal, thousands, prefix, suffix, allowBlank}"
          class="v-money" />
 </template>
 
@@ -42,6 +42,10 @@ export default {
     suffix: {
       type: String,
       default: () => defaults.suffix
+    },
+    allowBlank: {
+      type: Boolean,
+      default: () => defaults.allowBlank
     }
   },
 
@@ -52,7 +56,7 @@ export default {
       formattedValue: ''
     }
   },
-  
+
   computed: {
     listeners: {
       return {

src/directive.js

@@ -1,4 +1,4 @@
-import {format, setCursor, event} from './utils'
+import {format, unformat, setCursor, event} from './utils'
 import assign from './assign'
 import defaults from './options'
 
@@ -16,6 +16,15 @@ export default function (el, binding) {
     }
   }
 
+  el.onkeydown = function (e) {
+    var backspacePressed = e.which == 8 || e.which == 46
+    var atEndPosition = (el.value.length - el.selectionEnd) === 0
+    if (opt.allowBlank && backspacePressed && atEndPosition && (unformat(el.value, 0) === 0)) {
+      el.value = ''
+      el.dispatchEvent(event('change')) // v-model.lazy
+    }
+  }
+
   el.oninput = function () {
     var positionFromEnd = el.value.length - el.selectionEnd
     el.value = format(el.value, opt)

src/options.js

@@ -3,5 +3,6 @@ export default {
   suffix: '',
   thousands: ',',
   decimal: '.',
-  precision: 2
+  precision: 2,
+  allowBlank: false
 }

src/utils.js

@@ -1,6 +1,10 @@
 import defaults from './options'
 
 function format (input, opt = defaults) {
+  if (opt.allowBlank && input == '') {
+    return ''
+  }
+
   if (!isNaN(input)) {
     input = Number(input).toFixed(fixed(opt.precision))
   }