Added the ".number" modifier. Closes #1

Author: Denis Forveille

README.md

@@ -22,10 +22,11 @@ import { mask } from ' @titou10/v-mask'
 export default {
   directives: { mask }
 }
-```
-```html
 <v-text-field v-model="..." v-mask="{mask:'A##', unmaskedVar: 'myVar'}" />
 <v-text-field v-model="..." v-mask="'A#'" />
+<v-text-field v-model="..." v-mask.number="{mask:'##', unmaskedVar: 'myVar'}" />
+<v-text-field v-model="..." v-mask="{mask:'##', unmaskedVar: 'myVar', number: true}" />
+
 ```
 
 **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
 

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

package-lock.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 <[email protected]>",
   "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"
   }
 }

package.json

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