From 2132e46d15a092aa2f89a6fbfa0f40bdb8ea9aa6 Mon Sep 17 00:00:00 2001 From: Denis Forveille Date: Thu, 12 Sep 2019 09:57:48 -0400 Subject: [PATCH] Added the ".number" modifier. Closes #1 --- README.md | 14 ++++++++++---- dist/directive.js | 19 +++++++++++++++---- package-lock.json | 34 +++++++++++++++++----------------- package.json | 10 +++++----- src/directive.ts | 20 ++++++++++++++++---- 5 files changed, 63 insertions(+), 34 deletions(-) diff --git a/README.md b/README.md index 9ada651..14064e6 100644 --- a/README.md +++ b/README.md @@ -22,10 +22,11 @@ import { mask } from ' @titou10/v-mask' export default { directives: { mask } } -``` -```html + + + ``` **v-mask** may be: @@ -34,8 +35,10 @@ export default { - an "object" with the following attributes: - `mask`: same as above - `unmaskedVar`: name of a variable defined in the "data" section of the component that will receive the "unmasked" text. It may be a structure (eg`"a.bc.d"`), but the first "level" must exists - - `nullIfEmpty`: Set `"unmaskedVar"` to null if the input value is empty. Defaults to **true** - - `tokens`: An array of token objects that will replace the default ones. eg `tokens="[{ 'Y': {pattern: /[0-9]/ }]"` + - `nullIfEmpty` (Defaults to **true** ): Set `"unmaskedVar"` to null if the input value is empty. + - `number` (Defaults to **false**): Try to cast the valof of `"unmaskedVar"` to a numbe (see below) + - `tokens` (Defaults to the default ones below): An array of token objects that will replace the default ones. eg `tokens="[{ 'Y': {pattern: /[0-9]/ }]"` + ### Tokens (From vue-the-mask) @@ -60,6 +63,9 @@ export default { - `time-with-seconds: '##:##:##'` - `postalcode-ca: 'A#A #A#'` +### Modifiers +`.number`: The value set to`unmaskedVar`is typecast as a number. If the value cannot be parsed with parseFloat(), then the original value is returned. + #### Why this package? This package has been created after the`"mask"` property of the`"v-text-field"`component has been removed and I was not able to find another package that allow to **retrieve the masked and unmasked value** of an input text from a directive diff --git a/dist/directive.js b/dist/directive.js index e456bdd..757913a 100644 --- a/dist/directive.js +++ b/dist/directive.js @@ -29,6 +29,7 @@ function getConfig(binding) { mask: 'null', unmaskedVar: null, nullIfEmpty: true, + number: false, tokens: tokens_1["default"] }; if (typeof binding.value === 'string') { @@ -37,6 +38,9 @@ function getConfig(binding) { else { Object.assign(config, binding.value); } + // Capture ".number" modifier + var modifiers = binding.modifiers; + config.number = modifiers && modifiers.number; // Set predefined eventually config.mask = predefined_1["default"](config.mask) || config.mask || ''; return config; @@ -61,13 +65,20 @@ function run(el, eventName, config, vnode) { } // Set unmasked value if (config.unmaskedVar) { - // set null instead of empty if required var ut = utils_1.unmaskText(el.value); if (config.nullIfEmpty && ut.trim().length === 0) { + // Set null instead of empty if required lodash_1.set(vnode.context, config.unmaskedVar, null); } else { - lodash_1.set(vnode.context, config.unmaskedVar, ut); + if (config.number) { + // Convert to number if requested + var vNumber = parseFloat(ut); + lodash_1.set(vnode.context, config.unmaskedVar, isNaN(vNumber) ? ut : vNumber); + } + else { + lodash_1.set(vnode.context, config.unmaskedVar, ut); + } } } // Notify listeners @@ -78,8 +89,8 @@ function bind(el, binding, vnode) { if (binding.value === false) { return; } - el = getInput(el); - run(el, 'input', getConfig(binding), vnode); + var realEl = getInput(el); + run(realEl, 'input', getConfig(binding), vnode); } function componentUpdated(el, binding, vnode, oldVnode) { if (binding.value === false) { diff --git a/package-lock.json b/package-lock.json index 4cf781f..67a4d6f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@titou10/v-mask", - "version": "1.0.3", + "version": "1.0.4", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -25,15 +25,15 @@ } }, "@types/lodash": { - "version": "4.14.137", - "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.137.tgz", - "integrity": "sha512-g4rNK5SRKloO+sUGbuO7aPtwbwzMgjK+bm9BBhLD7jGUiGR7zhwYEhSln/ihgYQBeIJ5j7xjyaYzrWTcu3UotQ==", + "version": "4.14.138", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.138.tgz", + "integrity": "sha512-A4uJgHz4hakwNBdHNPdxOTkYmXNgmUAKLbXZ7PKGslgeV0Mb8P3BlbYfPovExek1qnod4pDfRbxuzcVs3dlFLg==", "dev": true }, "@types/node": { - "version": "12.7.2", - "resolved": "https://registry.npmjs.org/@types/node/-/node-12.7.2.tgz", - "integrity": "sha512-dyYO+f6ihZEtNPDcWNR1fkoTDf3zAK3lAABDze3mz6POyIercH0lEUawUFXlG8xaQZmm1yEBON/4TsYv/laDYg==", + "version": "12.7.5", + "resolved": "https://registry.npmjs.org/@types/node/-/node-12.7.5.tgz", + "integrity": "sha512-9fq4jZVhPNW8r+UYKnxF1e2HkDWOWKM5bC2/7c9wPV835I0aOrVbS/Hw/pWPk2uKrNXQqg9Z959Kz+IYDd5p3w==", "dev": true }, "ansi-styles": { @@ -115,9 +115,9 @@ "dev": true }, "diff": { - "version": "3.5.0", - "resolved": "https://registry.npmjs.org/diff/-/diff-3.5.0.tgz", - "integrity": "sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==", + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.1.tgz", + "integrity": "sha512-s2+XdvhPCOF01LRQBC8hf4vhbVmI2CGS5aZnxLJlT5FtdhPCDFq80q++zK2KlrVorVDdL5BOGZ/VfLrVtYNF+Q==", "dev": true }, "escape-string-regexp": { @@ -283,16 +283,16 @@ "dev": true }, "tslint": { - "version": "5.19.0", - "resolved": "https://registry.npmjs.org/tslint/-/tslint-5.19.0.tgz", - "integrity": "sha512-1LwwtBxfRJZnUvoS9c0uj8XQtAnyhWr9KlNvDIdB+oXyT+VpsOAaEhEgKi1HrZ8rq0ki/AAnbGSv4KM6/AfVZw==", + "version": "5.20.0", + "resolved": "https://registry.npmjs.org/tslint/-/tslint-5.20.0.tgz", + "integrity": "sha512-2vqIvkMHbnx8acMogAERQ/IuINOq6DFqgF8/VDvhEkBqQh/x6SP0Y+OHnKth9/ZcHQSroOZwUQSN18v8KKF0/g==", "dev": true, "requires": { "@babel/code-frame": "^7.0.0", "builtin-modules": "^1.1.1", "chalk": "^2.3.0", "commander": "^2.12.1", - "diff": "^3.2.0", + "diff": "^4.0.1", "glob": "^7.1.1", "js-yaml": "^3.13.1", "minimatch": "^3.0.4", @@ -313,9 +313,9 @@ } }, "typescript": { - "version": "3.5.3", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.5.3.tgz", - "integrity": "sha512-ACzBtm/PhXBDId6a6sDJfroT2pOWt/oOnk4/dElG5G33ZL776N3Y6/6bKZJBFpd+b05F3Ct9qDjMeJmRWtE2/g==", + "version": "3.6.3", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.6.3.tgz", + "integrity": "sha512-N7bceJL1CtRQ2RiG0AQME13ksR7DiuQh/QehubYcghzv20tnh+MQnQIuJddTmsbqYj+dztchykemz0zFzlvdQw==", "dev": true }, "vue": { diff --git a/package.json b/package.json index 5df8c08..600a688 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@titou10/v-mask", "description": "mask directive for vue.js that exposes the unmasked value", - "version": "1.0.3", + "version": "1.0.4", "author": "Denis Forveille ", "license": "MIT", "keywords": [ @@ -31,10 +31,10 @@ "lodash.set": "^4.3.2" }, "devDependencies": { - "@types/lodash": "^4.14.137", - "@types/node": "^12.7.2", - "tslint": "^5.19.0", - "typescript": "^3.5.3", + "@types/lodash": "^4.14.138", + "@types/node": "^12.7.5", + "tslint": "^5.20.0", + "typescript": "^3.6.3", "vue": "^2.6.10" } } diff --git a/src/directive.ts b/src/directive.ts index 1f1546f..3997b39 100644 --- a/src/directive.ts +++ b/src/directive.ts @@ -29,6 +29,7 @@ function getConfig(binding) { mask: 'null', unmaskedVar: null, nullIfEmpty: true, + number: false, tokens }; @@ -38,6 +39,10 @@ function getConfig(binding) { Object.assign(config, binding.value); } + // Capture ".number" modifier + const modifiers = binding.modifiers; + config.number = modifiers && modifiers.number; + // Set predefined eventually config.mask = getPredefined(config.mask) || config.mask || ''; return config; @@ -67,12 +72,19 @@ function run(el , eventName: string, config, vnode) { // Set unmasked value if (config.unmaskedVar) { - // set null instead of empty if required const ut = unmaskText(el.value); + if (config.nullIfEmpty && ut.trim().length === 0) { + // Set null instead of empty if required set(vnode.context, config.unmaskedVar, null); } else { - set(vnode.context, config.unmaskedVar, ut); + if (config.number) { + // Convert to number if requested + const vNumber = parseFloat(ut); + set(vnode.context, config.unmaskedVar, isNaN(vNumber) ? ut : vNumber); + } else { + set(vnode.context, config.unmaskedVar, ut); + } } } @@ -85,8 +97,8 @@ function run(el , eventName: string, config, vnode) { function bind(el, binding, vnode) { if (binding.value === false) { return; } - el = getInput(el); - run(el, 'input', getConfig(binding), vnode); + const realEl = getInput(el); + run(realEl, 'input', getConfig(binding), vnode); } function componentUpdated(el, binding, vnode, oldVnode) {