Updated docs about token transform functions

README.md

@@ -117,6 +117,16 @@ Default tokens:
 
 You can add your own tokens by passing them in `maska` directive or `create` method at initialization (see above). **Important**: `pattern` field should be JS *regular expression* (`/[0-9]/`) or *string without delimiters* (`"[0-9]"`).
 
+### Transform function for tokens
+
+While specifying custom tokens you can also add a symbol-transformation behavior such as uppercase, lowercase, or even define a transform function:
+
+``` javascript
+{
+    'T': { pattern: /[0-9]/, transform: (char) => String(Number(char) % 2) } // '1234567890' -> '1010101010'
+}
+```
+
 ## Dynamic masks
 
 To use several masks on single input, pass array instead of string as mask value.

dist/es6/maska.esm.js

@@ -1,6 +1,6 @@
 /*!
- * maska v1.2.0
+ * maska v1.3.0
  * (c) 2019-2020 Alexander Shabunevich
  * Released under the MIT License.
  */
-function t(t,a,s,r=!0){return e(a).length>1?function(t){const a=e(t).sort((t,e)=>t.length-e.length);return function(t,e,s,r=!0){let o=0;for(;o<a.length;){const e=a[o];o++;const u=a[o];if(!(u&&n(t,u,s,!0).length>e.length))return n(t,e,s,r)}return""}}(a)(t,a,s,r):n(t,a,s,r)}function e(t){try{return JSON.parse(t)}catch{return[t]}}function n(t,e,n,s=!0){let r=0,o=0,u="",i="";for(;r<e.length&&o<t.length;){let i=e[r];const l=t[o],c=n[i];if(c&&c.pattern)c.pattern.test(l)&&(u+=a(l,c),r++,s&&e[r]&&!n[e[r]]&&(u+=e[r],r++)),o++;else if(c&&c.repeat){const t=n[e[r-1]];t&&!t.pattern.test(l)?r++:r--}else c&&c.escape&&(r++,i=e[r]),s&&(u+=i),l===i&&o++,r++}for(;s&&r<e.length;){const t=e[r];if(n[t]){i="";break}i+=t,r++}return u+i}function a(t,e){return e.uppercase?t.toLocaleUpperCase():e.lowercase?t.toLocaleLowerCase():t}var s={"#":{pattern:/[0-9]/},X:{pattern:/[0-9a-zA-Z]/},S:{pattern:/[a-zA-Z]/},A:{pattern:/[a-zA-Z]/,uppercase:!0},a:{pattern:/[a-zA-Z]/,lowercase:!0},"!":{escape:!0},"*":{repeat:!0}};function r(t){return t instanceof HTMLInputElement?t:t.querySelector("input")||t}function o(t){return"[object String]"===Object.prototype.toString.call(t)}class u{constructor(t,e={}){if(!t)throw new Error("Maska: no element for mask");if(e.tokens)for(const t in e.tokens)e.tokens[t]={...e.tokens[t]},e.tokens[t].pattern&&o(e.tokens[t].pattern)&&(e.tokens[t].pattern=new RegExp(e.tokens[t].pattern));this._opts={mask:e.mask,tokens:{...s,...e.tokens}},this._el=o(t)?document.querySelectorAll(t):t.length?t:[t],this.init()}init(){for(let t=0;t<this._el.length;t++){const e=r(this._el[t]);!this._opts.mask||e.dataset.mask&&e.dataset.mask===this._opts.mask||(e.dataset.mask=this._opts.mask),this.updateValue(e),e.dataset.maskInited||(e.dataset.maskInited=!0,e.addEventListener("input",t=>this.updateValue(t.target,t)),e.addEventListener("beforeinput",t=>this.beforeInput(t)))}}destroy(){for(let t=0;t<this._el.length;t++){const e=r(this._el[t]);e.removeEventListener("input",t=>this.updateValue(t.target,t)),e.removeEventListener("beforeinput",t=>this.beforeInput(t)),delete e.dataset.mask,delete e.dataset.maskInited}}updateValue(e,n){const a=e.type.match(/^number$/i)&&e.validity.badInput;if(!e.value&&!a||!e.dataset.mask)return;let s=e.selectionEnd;const r=e.value,o=r[s-1];e.value=t(e.value,e.dataset.mask,this._opts.tokens),n&&"insertText"===n.inputType&&s===r.length&&(s=e.value.length),function(t,e,n){for(;e&&e<t.value.length&&t.value.charAt(e-1)!==n;)e++;(t.type&&t.type.match(/^(text|search|password|tel|url)$/i)||!t.type)&&t===document.activeElement&&(t.setSelectionRange(e,e),setTimeout((function(){t.setSelectionRange(e,e)}),0))}(e,s,o),e.value!==r&&e.dispatchEvent(function(t,e=null){const n=document.createEvent("Event");return n.initEvent(t,!0,!0),e&&(n.inputType=e),n}("input",n&&n.inputType||null))}beforeInput(t){t.target.type.match(/^number$/i)&&t.data&&isNaN(t.target.value+t.data)&&t.preventDefault()}}function i(t,e){if(e.value)return e.value&&function(t){return!(o(t.value)&&t.value===t.oldValue||Array.isArray(t.value)&&JSON.stringify(t.value)===JSON.stringify(t.oldValue)||t.value&&t.value.mask&&t.oldValue&&t.oldValue.mask&&t.value.mask===t.oldValue.mask)}(e)?new u(t,function(t){const e={};return t.mask?(e.mask=Array.isArray(t.mask)?JSON.stringify(t.mask):t.mask,e.tokens=t.tokens?{...t.tokens}:{}):e.mask=Array.isArray(t)?JSON.stringify(t):t,e}(e.value)):void 0}function l(t){t.directive("maska",i)}function c(t,e){return new u(t,e)}"undefined"!=typeof window&&window.Vue&&window.Vue.use(l);export default l;export{c as create,t as mask,i as maska,s as tokens};
+function t(t,a,s,r=!0){return e(a).length>1?function(t){const a=e(t).sort((t,e)=>t.length-e.length);return function(t,e,s,r=!0){let o=0;for(;o<a.length;){const e=a[o];o++;const u=a[o];if(!(u&&n(t,u,s,!0).length>e.length))return n(t,e,s,r)}return""}}(a)(t,a,s,r):n(t,a,s,r)}function e(t){try{return JSON.parse(t)}catch{return[t]}}function n(t,e,n,s=!0){let r=0,o=0,u="",i="";for(;r<e.length&&o<t.length;){let i=e[r];const l=t[o],c=n[i];if(c&&c.pattern)c.pattern.test(l)&&(u+=a(l,c),r++,s&&e[r]&&!n[e[r]]&&(u+=e[r],r++)),o++;else if(c&&c.repeat){const t=n[e[r-1]];t&&!t.pattern.test(l)?r++:r--}else c&&c.escape&&(r++,i=e[r]),s&&(u+=i),l===i&&o++,r++}for(;s&&r<e.length;){const t=e[r];if(n[t]){i="";break}i+=t,r++}return u+i}function a(t,e){return e.transform&&(t=e.transform(t)),e.uppercase?t.toLocaleUpperCase():e.lowercase?t.toLocaleLowerCase():t}var s={"#":{pattern:/[0-9]/},X:{pattern:/[0-9a-zA-Z]/},S:{pattern:/[a-zA-Z]/},A:{pattern:/[a-zA-Z]/,uppercase:!0},a:{pattern:/[a-zA-Z]/,lowercase:!0},"!":{escape:!0},"*":{repeat:!0}};function r(t){return t instanceof HTMLInputElement?t:t.querySelector("input")||t}function o(t){return"[object String]"===Object.prototype.toString.call(t)}class u{constructor(t,e={}){if(!t)throw new Error("Maska: no element for mask");if(e.tokens)for(const t in e.tokens)e.tokens[t]={...e.tokens[t]},e.tokens[t].pattern&&o(e.tokens[t].pattern)&&(e.tokens[t].pattern=new RegExp(e.tokens[t].pattern));this._opts={mask:e.mask,tokens:{...s,...e.tokens}},this._el=o(t)?document.querySelectorAll(t):t.length?t:[t],this.init()}init(){for(let t=0;t<this._el.length;t++){const e=r(this._el[t]);!this._opts.mask||e.dataset.mask&&e.dataset.mask===this._opts.mask||(e.dataset.mask=this._opts.mask),this.updateValue(e),e.dataset.maskInited||(e.dataset.maskInited=!0,e.addEventListener("input",t=>this.updateValue(t.target,t)),e.addEventListener("beforeinput",t=>this.beforeInput(t)))}}destroy(){for(let t=0;t<this._el.length;t++){const e=r(this._el[t]);e.removeEventListener("input",t=>this.updateValue(t.target,t)),e.removeEventListener("beforeinput",t=>this.beforeInput(t)),delete e.dataset.mask,delete e.dataset.maskInited}}updateValue(e,n){const a=e.type.match(/^number$/i)&&e.validity.badInput;if(!e.value&&!a||!e.dataset.mask)return;let s=e.selectionEnd;const r=e.value,o=r[s-1];e.value=t(e.value,e.dataset.mask,this._opts.tokens),n&&"insertText"===n.inputType&&s===r.length&&(s=e.value.length),function(t,e,n){for(;e&&e<t.value.length&&t.value.charAt(e-1)!==n;)e++;(t.type?t.type.match(/^(text|search|password|tel|url)$/i):!t.type)&&t===document.activeElement&&(t.setSelectionRange(e,e),setTimeout((function(){t.setSelectionRange(e,e)}),0))}(e,s,o),e.value!==r&&e.dispatchEvent(function(t,e=null){const n=document.createEvent("Event");return n.initEvent(t,!0,!0),e&&(n.inputType=e),n}("input",n&&n.inputType||null))}beforeInput(t){t.target.type.match(/^number$/i)&&t.data&&isNaN(t.target.value+t.data)&&t.preventDefault()}}function i(t,e){if(e.value)return e.value&&function(t){return!(o(t.value)&&t.value===t.oldValue||Array.isArray(t.value)&&JSON.stringify(t.value)===JSON.stringify(t.oldValue)||t.value&&t.value.mask&&t.oldValue&&t.oldValue.mask&&t.value.mask===t.oldValue.mask)}(e)?new u(t,function(t){const e={};return t.mask?(e.mask=Array.isArray(t.mask)?JSON.stringify(t.mask):t.mask,e.tokens=t.tokens?{...t.tokens}:{}):e.mask=Array.isArray(t)?JSON.stringify(t):t,e}(e.value)):void 0}function l(t){t.directive("maska",i)}function c(t,e){return new u(t,e)}"undefined"!=typeof window&&window.Vue&&window.Vue.use(l);export default l;export{c as create,t as mask,i as maska,s as tokens};

dist/es6/maska.js

@@ -1,6 +1,6 @@
 /*!
- * maska v1.2.0
+ * maska v1.3.0
  * (c) 2019-2020 Alexander Shabunevich
  * Released under the MIT License.
  */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).Maska={})}(this,(function(e){"use strict";function t(e,t,s,r=!0){return n(t).length>1?function(e){const t=n(e).sort((e,t)=>e.length-t.length);return function(e,n,s,r=!0){let o=0;for(;o<t.length;){const n=t[o];o++;const i=t[o];if(!(i&&a(e,i,s,!0).length>n.length))return a(e,n,s,r)}return""}}(t)(e,t,s,r):a(e,t,s,r)}function n(e){try{return JSON.parse(e)}catch{return[e]}}function a(e,t,n,a=!0){let r=0,o=0,i="",u="";for(;r<t.length&&o<e.length;){let u=t[r];const l=e[o],c=n[u];if(c&&c.pattern)c.pattern.test(l)&&(i+=s(l,c),r++,a&&t[r]&&!n[t[r]]&&(i+=t[r],r++)),o++;else if(c&&c.repeat){const e=n[t[r-1]];e&&!e.pattern.test(l)?r++:r--}else c&&c.escape&&(r++,u=t[r]),a&&(i+=u),l===u&&o++,r++}for(;a&&r<t.length;){const e=t[r];if(n[e]){u="";break}u+=e,r++}return i+u}function s(e,t){return t.uppercase?e.toLocaleUpperCase():t.lowercase?e.toLocaleLowerCase():e}var r={"#":{pattern:/[0-9]/},X:{pattern:/[0-9a-zA-Z]/},S:{pattern:/[a-zA-Z]/},A:{pattern:/[a-zA-Z]/,uppercase:!0},a:{pattern:/[a-zA-Z]/,lowercase:!0},"!":{escape:!0},"*":{repeat:!0}};function o(e){return e instanceof HTMLInputElement?e:e.querySelector("input")||e}function i(e){return"[object String]"===Object.prototype.toString.call(e)}class u{constructor(e,t={}){if(!e)throw new Error("Maska: no element for mask");if(t.tokens)for(const e in t.tokens)t.tokens[e]={...t.tokens[e]},t.tokens[e].pattern&&i(t.tokens[e].pattern)&&(t.tokens[e].pattern=new RegExp(t.tokens[e].pattern));this._opts={mask:t.mask,tokens:{...r,...t.tokens}},this._el=i(e)?document.querySelectorAll(e):e.length?e:[e],this.init()}init(){for(let e=0;e<this._el.length;e++){const t=o(this._el[e]);!this._opts.mask||t.dataset.mask&&t.dataset.mask===this._opts.mask||(t.dataset.mask=this._opts.mask),this.updateValue(t),t.dataset.maskInited||(t.dataset.maskInited=!0,t.addEventListener("input",e=>this.updateValue(e.target,e)),t.addEventListener("beforeinput",e=>this.beforeInput(e)))}}destroy(){for(let e=0;e<this._el.length;e++){const t=o(this._el[e]);t.removeEventListener("input",e=>this.updateValue(e.target,e)),t.removeEventListener("beforeinput",e=>this.beforeInput(e)),delete t.dataset.mask,delete t.dataset.maskInited}}updateValue(e,n){const a=e.type.match(/^number$/i)&&e.validity.badInput;if(!e.value&&!a||!e.dataset.mask)return;let s=e.selectionEnd;const r=e.value,o=r[s-1];e.value=t(e.value,e.dataset.mask,this._opts.tokens),n&&"insertText"===n.inputType&&s===r.length&&(s=e.value.length),function(e,t,n){for(;t&&t<e.value.length&&e.value.charAt(t-1)!==n;)t++;(e.type&&e.type.match(/^(text|search|password|tel|url)$/i)||!e.type)&&e===document.activeElement&&(e.setSelectionRange(t,t),setTimeout((function(){e.setSelectionRange(t,t)}),0))}(e,s,o),e.value!==r&&e.dispatchEvent(function(e,t=null){const n=document.createEvent("Event");return n.initEvent(e,!0,!0),t&&(n.inputType=t),n}("input",n&&n.inputType||null))}beforeInput(e){e.target.type.match(/^number$/i)&&e.data&&isNaN(e.target.value+e.data)&&e.preventDefault()}}function l(e,t){if(t.value)return t.value&&function(e){return!(i(e.value)&&e.value===e.oldValue||Array.isArray(e.value)&&JSON.stringify(e.value)===JSON.stringify(e.oldValue)||e.value&&e.value.mask&&e.oldValue&&e.oldValue.mask&&e.value.mask===e.oldValue.mask)}(t)?new u(e,function(e){const t={};return e.mask?(t.mask=Array.isArray(e.mask)?JSON.stringify(e.mask):e.mask,t.tokens=e.tokens?{...e.tokens}:{}):t.mask=Array.isArray(e)?JSON.stringify(e):e,t}(t.value)):void 0}function c(e){e.directive("maska",l)}"undefined"!=typeof window&&window.Vue&&window.Vue.use(c),e.create=function(e,t){return new u(e,t)},e.default=c,e.mask=t,e.maska=l,e.tokens=r,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).Maska={})}(this,(function(e){"use strict";function t(e,t,s,r=!0){return n(t).length>1?function(e){const t=n(e).sort((e,t)=>e.length-t.length);return function(e,n,s,r=!0){let o=0;for(;o<t.length;){const n=t[o];o++;const i=t[o];if(!(i&&a(e,i,s,!0).length>n.length))return a(e,n,s,r)}return""}}(t)(e,t,s,r):a(e,t,s,r)}function n(e){try{return JSON.parse(e)}catch{return[e]}}function a(e,t,n,a=!0){let r=0,o=0,i="",u="";for(;r<t.length&&o<e.length;){let u=t[r];const l=e[o],c=n[u];if(c&&c.pattern)c.pattern.test(l)&&(i+=s(l,c),r++,a&&t[r]&&!n[t[r]]&&(i+=t[r],r++)),o++;else if(c&&c.repeat){const e=n[t[r-1]];e&&!e.pattern.test(l)?r++:r--}else c&&c.escape&&(r++,u=t[r]),a&&(i+=u),l===u&&o++,r++}for(;a&&r<t.length;){const e=t[r];if(n[e]){u="";break}u+=e,r++}return i+u}function s(e,t){return t.transform&&(e=t.transform(e)),t.uppercase?e.toLocaleUpperCase():t.lowercase?e.toLocaleLowerCase():e}var r={"#":{pattern:/[0-9]/},X:{pattern:/[0-9a-zA-Z]/},S:{pattern:/[a-zA-Z]/},A:{pattern:/[a-zA-Z]/,uppercase:!0},a:{pattern:/[a-zA-Z]/,lowercase:!0},"!":{escape:!0},"*":{repeat:!0}};function o(e){return e instanceof HTMLInputElement?e:e.querySelector("input")||e}function i(e){return"[object String]"===Object.prototype.toString.call(e)}class u{constructor(e,t={}){if(!e)throw new Error("Maska: no element for mask");if(t.tokens)for(const e in t.tokens)t.tokens[e]={...t.tokens[e]},t.tokens[e].pattern&&i(t.tokens[e].pattern)&&(t.tokens[e].pattern=new RegExp(t.tokens[e].pattern));this._opts={mask:t.mask,tokens:{...r,...t.tokens}},this._el=i(e)?document.querySelectorAll(e):e.length?e:[e],this.init()}init(){for(let e=0;e<this._el.length;e++){const t=o(this._el[e]);!this._opts.mask||t.dataset.mask&&t.dataset.mask===this._opts.mask||(t.dataset.mask=this._opts.mask),this.updateValue(t),t.dataset.maskInited||(t.dataset.maskInited=!0,t.addEventListener("input",e=>this.updateValue(e.target,e)),t.addEventListener("beforeinput",e=>this.beforeInput(e)))}}destroy(){for(let e=0;e<this._el.length;e++){const t=o(this._el[e]);t.removeEventListener("input",e=>this.updateValue(e.target,e)),t.removeEventListener("beforeinput",e=>this.beforeInput(e)),delete t.dataset.mask,delete t.dataset.maskInited}}updateValue(e,n){const a=e.type.match(/^number$/i)&&e.validity.badInput;if(!e.value&&!a||!e.dataset.mask)return;let s=e.selectionEnd;const r=e.value,o=r[s-1];e.value=t(e.value,e.dataset.mask,this._opts.tokens),n&&"insertText"===n.inputType&&s===r.length&&(s=e.value.length),function(e,t,n){for(;t&&t<e.value.length&&e.value.charAt(t-1)!==n;)t++;(e.type?e.type.match(/^(text|search|password|tel|url)$/i):!e.type)&&e===document.activeElement&&(e.setSelectionRange(t,t),setTimeout((function(){e.setSelectionRange(t,t)}),0))}(e,s,o),e.value!==r&&e.dispatchEvent(function(e,t=null){const n=document.createEvent("Event");return n.initEvent(e,!0,!0),t&&(n.inputType=t),n}("input",n&&n.inputType||null))}beforeInput(e){e.target.type.match(/^number$/i)&&e.data&&isNaN(e.target.value+e.data)&&e.preventDefault()}}function l(e,t){if(t.value)return t.value&&function(e){return!(i(e.value)&&e.value===e.oldValue||Array.isArray(e.value)&&JSON.stringify(e.value)===JSON.stringify(e.oldValue)||e.value&&e.value.mask&&e.oldValue&&e.oldValue.mask&&e.value.mask===e.oldValue.mask)}(t)?new u(e,function(e){const t={};return e.mask?(t.mask=Array.isArray(e.mask)?JSON.stringify(e.mask):e.mask,t.tokens=e.tokens?{...e.tokens}:{}):t.mask=Array.isArray(e)?JSON.stringify(e):e,t}(t.value)):void 0}function c(e){e.directive("maska",l)}"undefined"!=typeof window&&window.Vue&&window.Vue.use(c),e.create=function(e,t){return new u(e,t)},e.default=c,e.mask=t,e.maska=l,e.tokens=r,Object.defineProperty(e,"__esModule",{value:!0})}));

dist/es6/maska.umd.js

@@ -1,6 +1,6 @@
 /*!
- * maska v1.2.0
+ * maska v1.3.0
  * (c) 2019-2020 Alexander Shabunevich
  * Released under the MIT License.
  */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).Maska={})}(this,(function(e){"use strict";function t(e,t,s,r=!0){return n(t).length>1?function(e){const t=n(e).sort((e,t)=>e.length-t.length);return function(e,n,s,r=!0){let o=0;for(;o<t.length;){const n=t[o];o++;const i=t[o];if(!(i&&a(e,i,s,!0).length>n.length))return a(e,n,s,r)}return""}}(t)(e,t,s,r):a(e,t,s,r)}function n(e){try{return JSON.parse(e)}catch{return[e]}}function a(e,t,n,a=!0){let r=0,o=0,i="",u="";for(;r<t.length&&o<e.length;){let u=t[r];const l=e[o],c=n[u];if(c&&c.pattern)c.pattern.test(l)&&(i+=s(l,c),r++,a&&t[r]&&!n[t[r]]&&(i+=t[r],r++)),o++;else if(c&&c.repeat){const e=n[t[r-1]];e&&!e.pattern.test(l)?r++:r--}else c&&c.escape&&(r++,u=t[r]),a&&(i+=u),l===u&&o++,r++}for(;a&&r<t.length;){const e=t[r];if(n[e]){u="";break}u+=e,r++}return i+u}function s(e,t){return t.uppercase?e.toLocaleUpperCase():t.lowercase?e.toLocaleLowerCase():e}var r={"#":{pattern:/[0-9]/},X:{pattern:/[0-9a-zA-Z]/},S:{pattern:/[a-zA-Z]/},A:{pattern:/[a-zA-Z]/,uppercase:!0},a:{pattern:/[a-zA-Z]/,lowercase:!0},"!":{escape:!0},"*":{repeat:!0}};function o(e){return e instanceof HTMLInputElement?e:e.querySelector("input")||e}function i(e){return"[object String]"===Object.prototype.toString.call(e)}class u{constructor(e,t={}){if(!e)throw new Error("Maska: no element for mask");if(t.tokens)for(const e in t.tokens)t.tokens[e]={...t.tokens[e]},t.tokens[e].pattern&&i(t.tokens[e].pattern)&&(t.tokens[e].pattern=new RegExp(t.tokens[e].pattern));this._opts={mask:t.mask,tokens:{...r,...t.tokens}},this._el=i(e)?document.querySelectorAll(e):e.length?e:[e],this.init()}init(){for(let e=0;e<this._el.length;e++){const t=o(this._el[e]);!this._opts.mask||t.dataset.mask&&t.dataset.mask===this._opts.mask||(t.dataset.mask=this._opts.mask),this.updateValue(t),t.dataset.maskInited||(t.dataset.maskInited=!0,t.addEventListener("input",e=>this.updateValue(e.target,e)),t.addEventListener("beforeinput",e=>this.beforeInput(e)))}}destroy(){for(let e=0;e<this._el.length;e++){const t=o(this._el[e]);t.removeEventListener("input",e=>this.updateValue(e.target,e)),t.removeEventListener("beforeinput",e=>this.beforeInput(e)),delete t.dataset.mask,delete t.dataset.maskInited}}updateValue(e,n){const a=e.type.match(/^number$/i)&&e.validity.badInput;if(!e.value&&!a||!e.dataset.mask)return;let s=e.selectionEnd;const r=e.value,o=r[s-1];e.value=t(e.value,e.dataset.mask,this._opts.tokens),n&&"insertText"===n.inputType&&s===r.length&&(s=e.value.length),function(e,t,n){for(;t&&t<e.value.length&&e.value.charAt(t-1)!==n;)t++;(e.type&&e.type.match(/^(text|search|password|tel|url)$/i)||!e.type)&&e===document.activeElement&&(e.setSelectionRange(t,t),setTimeout((function(){e.setSelectionRange(t,t)}),0))}(e,s,o),e.value!==r&&e.dispatchEvent(function(e,t=null){const n=document.createEvent("Event");return n.initEvent(e,!0,!0),t&&(n.inputType=t),n}("input",n&&n.inputType||null))}beforeInput(e){e.target.type.match(/^number$/i)&&e.data&&isNaN(e.target.value+e.data)&&e.preventDefault()}}function l(e,t){if(t.value)return t.value&&function(e){return!(i(e.value)&&e.value===e.oldValue||Array.isArray(e.value)&&JSON.stringify(e.value)===JSON.stringify(e.oldValue)||e.value&&e.value.mask&&e.oldValue&&e.oldValue.mask&&e.value.mask===e.oldValue.mask)}(t)?new u(e,function(e){const t={};return e.mask?(t.mask=Array.isArray(e.mask)?JSON.stringify(e.mask):e.mask,t.tokens=e.tokens?{...e.tokens}:{}):t.mask=Array.isArray(e)?JSON.stringify(e):e,t}(t.value)):void 0}function c(e){e.directive("maska",l)}"undefined"!=typeof window&&window.Vue&&window.Vue.use(c),e.create=function(e,t){return new u(e,t)},e.default=c,e.mask=t,e.maska=l,e.tokens=r,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).Maska={})}(this,(function(e){"use strict";function t(e,t,s,r=!0){return n(t).length>1?function(e){const t=n(e).sort((e,t)=>e.length-t.length);return function(e,n,s,r=!0){let o=0;for(;o<t.length;){const n=t[o];o++;const i=t[o];if(!(i&&a(e,i,s,!0).length>n.length))return a(e,n,s,r)}return""}}(t)(e,t,s,r):a(e,t,s,r)}function n(e){try{return JSON.parse(e)}catch{return[e]}}function a(e,t,n,a=!0){let r=0,o=0,i="",u="";for(;r<t.length&&o<e.length;){let u=t[r];const l=e[o],c=n[u];if(c&&c.pattern)c.pattern.test(l)&&(i+=s(l,c),r++,a&&t[r]&&!n[t[r]]&&(i+=t[r],r++)),o++;else if(c&&c.repeat){const e=n[t[r-1]];e&&!e.pattern.test(l)?r++:r--}else c&&c.escape&&(r++,u=t[r]),a&&(i+=u),l===u&&o++,r++}for(;a&&r<t.length;){const e=t[r];if(n[e]){u="";break}u+=e,r++}return i+u}function s(e,t){return t.transform&&(e=t.transform(e)),t.uppercase?e.toLocaleUpperCase():t.lowercase?e.toLocaleLowerCase():e}var r={"#":{pattern:/[0-9]/},X:{pattern:/[0-9a-zA-Z]/},S:{pattern:/[a-zA-Z]/},A:{pattern:/[a-zA-Z]/,uppercase:!0},a:{pattern:/[a-zA-Z]/,lowercase:!0},"!":{escape:!0},"*":{repeat:!0}};function o(e){return e instanceof HTMLInputElement?e:e.querySelector("input")||e}function i(e){return"[object String]"===Object.prototype.toString.call(e)}class u{constructor(e,t={}){if(!e)throw new Error("Maska: no element for mask");if(t.tokens)for(const e in t.tokens)t.tokens[e]={...t.tokens[e]},t.tokens[e].pattern&&i(t.tokens[e].pattern)&&(t.tokens[e].pattern=new RegExp(t.tokens[e].pattern));this._opts={mask:t.mask,tokens:{...r,...t.tokens}},this._el=i(e)?document.querySelectorAll(e):e.length?e:[e],this.init()}init(){for(let e=0;e<this._el.length;e++){const t=o(this._el[e]);!this._opts.mask||t.dataset.mask&&t.dataset.mask===this._opts.mask||(t.dataset.mask=this._opts.mask),this.updateValue(t),t.dataset.maskInited||(t.dataset.maskInited=!0,t.addEventListener("input",e=>this.updateValue(e.target,e)),t.addEventListener("beforeinput",e=>this.beforeInput(e)))}}destroy(){for(let e=0;e<this._el.length;e++){const t=o(this._el[e]);t.removeEventListener("input",e=>this.updateValue(e.target,e)),t.removeEventListener("beforeinput",e=>this.beforeInput(e)),delete t.dataset.mask,delete t.dataset.maskInited}}updateValue(e,n){const a=e.type.match(/^number$/i)&&e.validity.badInput;if(!e.value&&!a||!e.dataset.mask)return;let s=e.selectionEnd;const r=e.value,o=r[s-1];e.value=t(e.value,e.dataset.mask,this._opts.tokens),n&&"insertText"===n.inputType&&s===r.length&&(s=e.value.length),function(e,t,n){for(;t&&t<e.value.length&&e.value.charAt(t-1)!==n;)t++;(e.type?e.type.match(/^(text|search|password|tel|url)$/i):!e.type)&&e===document.activeElement&&(e.setSelectionRange(t,t),setTimeout((function(){e.setSelectionRange(t,t)}),0))}(e,s,o),e.value!==r&&e.dispatchEvent(function(e,t=null){const n=document.createEvent("Event");return n.initEvent(e,!0,!0),t&&(n.inputType=t),n}("input",n&&n.inputType||null))}beforeInput(e){e.target.type.match(/^number$/i)&&e.data&&isNaN(e.target.value+e.data)&&e.preventDefault()}}function l(e,t){if(t.value)return t.value&&function(e){return!(i(e.value)&&e.value===e.oldValue||Array.isArray(e.value)&&JSON.stringify(e.value)===JSON.stringify(e.oldValue)||e.value&&e.value.mask&&e.oldValue&&e.oldValue.mask&&e.value.mask===e.oldValue.mask)}(t)?new u(e,function(e){const t={};return e.mask?(t.mask=Array.isArray(e.mask)?JSON.stringify(e.mask):e.mask,t.tokens=e.tokens?{...e.tokens}:{}):t.mask=Array.isArray(e)?JSON.stringify(e):e,t}(t.value)):void 0}function c(e){e.directive("maska",l)}"undefined"!=typeof window&&window.Vue&&window.Vue.use(c),e.create=function(e,t){return new u(e,t)},e.default=c,e.mask=t,e.maska=l,e.tokens=r,Object.defineProperty(e,"__esModule",{value:!0})}));

docs/index.htm

@@ -43,6 +43,22 @@
                             </div>
                             <p class="help is-family-code">v-maska="{ mask: '!#HHHHHH', tokens: { 'H': { pattern: /[0-9a-fA-F]/, uppercase: true }}}"</p>
                         </div>
+                        <div class="field">
+                            <div class="field-body">
+                                <div class="field">
+                                    <label class="label">Masked input:</label>
+                                    <div class="control">
+                                        <input v-maska="customMask" class="input">
+                                    </div>
+                                </div>
+                                <div class="field">
+                                    <label class="label">mask to apply:</label>
+                                    <div class="control">
+                                        <input class="input" v-model="customMask">
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                     </form>
                 </div>
 
@@ -65,6 +81,13 @@
                                     </div>
                                     <p class="help is-family-code">data-mask="A* A*"</p>
                                 </div>
+                                <div class="field">
+                                    <label class="label">Leet speak (tokens with transform)</label>
+                                    <div class="control">
+                                        <input data-mask="T*" class="transform-masked input">
+                                    </div>
+                                    <p class="help is-family-code">data-mask="T*"</p>
+                                </div>
                                 <div class="field">
                                     <label class="label">All digits</label>
                                     <div class="control">
@@ -88,6 +111,13 @@
                                     </div>
                                     <p class="help is-family-code">data-mask="##/##/####"</p>
                                 </div>
+                                <div class="field">
+                                    <label class="label">Credit card</label>
+                                    <div class="control">
+                                        <input data-mask="#### #### #### ####" class="masked input">
+                                    </div>
+                                    <p class="help is-family-code">data-mask="#### #### #### ####"</p>
+                                </div>
                                 <div class="field">
                                     <label class="label">Hex color (custom tokens)</label>
                                     <div class="control">
@@ -118,7 +148,7 @@
     </section>
 
     <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/maska@1.2.0/dist/maska.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/maska@1.3.0/dist/maska.js"></script>
     <script>
         // vue
         new Vue({
@@ -126,7 +156,8 @@
             data: {
                 phone: '19992345678',
                 dotFormat: false,
-                color: null
+                color: null,
+                customMask: '#*'
             },
 
             computed: {
@@ -136,6 +167,18 @@
             }
         });
 
+        function leetSpeak(char) {
+            const letters = Object.entries({
+                'a': '4', 'b': '8', 'e': '3', 'f': 'ph', 'g': '9', 'i': '1', 'o': '0', 's': '5', 't': '7'
+            }).reduce((acc, [from, to]) => {
+                acc[from] = to
+                acc[from.toLocaleUpperCase()] = to
+                return acc
+            }, {})
+
+            return letters[char] ? letters[char] : char
+        }
+
         // vanilla default
         Maska.create('#vanilla-form .masked');
 
@@ -144,6 +187,10 @@
             tokens: { 'H': { pattern: '[0-9a-fA-F]', uppercase: true }}
         });
 
+        Maska.create('#vanilla-form .transform-masked', {
+            tokens: { 'T': { pattern: '[ 0-9a-zA-Z]', transform: leetSpeak }}
+        });
+
         // vanilla destroy
         var mask = Maska.create('#vanilla-form .unmasked');
         mask.destroy();

package.json

@@ -1,6 +1,6 @@
 {
   "name": "maska",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Simple zero-dependency input mask for Vue.js and vanilla JS",
   "keywords": [
     "mask",