diff --git a/README.md b/README.md index d1cb3d7..e0052e2 100644 --- a/README.md +++ b/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 diff --git a/src/component.vue b/src/component.vue index e7d06ae..d6be7c3 100644 --- a/src/component.vue +++ b/src/component.vue @@ -2,7 +2,7 @@ @@ -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 { diff --git a/src/directive.js b/src/directive.js index 90c1c38..54b5d95 100644 --- a/src/directive.js +++ b/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) diff --git a/src/options.js b/src/options.js index 2fabe99..0e0f933 100644 --- a/src/options.js +++ b/src/options.js @@ -3,5 +3,6 @@ export default { suffix: '', thousands: ',', decimal: '.', - precision: 2 + precision: 2, + allowBlank: false } diff --git a/src/utils.js b/src/utils.js index c4ec13e..e26cd91 100644 --- a/src/utils.js +++ b/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)) }