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) {