@alpinejs/mask - npm Package Compare versions

Comparing version 3.15.8 to 3.15.9

builds/module.js

@@ -1,5 +0,5 @@
-import mask, { stripDown } from '../src/index.js'
+import mask, { formatInput } from '../src/index.js'
 
 export default mask
 
-export { mask, stripDown }
+export { mask, formatInput }

dist/cdn.js

@@ -30,7 +30,18 @@ (() => {
         if (el._x_model) {
-          if (el._x_model.get() === el.value)
-            return;
-          if (el._x_model.get() === null && el.value === "")
-            return;
-          el._x_model.set(el.value);
+          if (el._x_model.get() !== el.value) {
+            if (!(el._x_model.get() === null && el.value === "")) {
+              el._x_model.set(el.value);
+            }
+          }
+          let updater = el._x_forceModelUpdate;
+          el._x_forceModelUpdate = (value2) => {
+            value2 = String(value2);
+            let template = templateFn(value2);
+            if (template && template !== "false") {
+              value2 = formatInput(template, value2);
+            }
+            lastInputValue = value2;
+            updater(value2);
+            el._x_model.set(value2);
+          };
         }
@@ -58,3 +69,3 @@ });
         let setInput = () => {
-          lastInputValue = el2.value = formatInput(input, template);
+          lastInputValue = el2.value = formatInput(template, input);
         };
@@ -69,9 +80,2 @@ if (shouldRestoreCursor) {
       }
-      function formatInput(input, template) {
-        if (input === "")
-          return "";
-        let strippedDownInput = stripDown(template, input);
-        let rebuiltInput = buildUp(template, strippedDownInput);
-        return rebuiltInput;
-      }
     }).before("model");
@@ -84,61 +88,35 @@ }
     let beforeLeftOfCursorBeforeFormatting = unformattedValue.slice(0, cursorPosition);
-    let newPosition = buildUp(
+    let newPosition = formatInput(
       template,
-      stripDown(
-        template,
-        beforeLeftOfCursorBeforeFormatting
-      )
+      beforeLeftOfCursorBeforeFormatting
     ).length;
     el.setSelectionRange(newPosition, newPosition);
   }
-  function stripDown(template, input) {
-    let inputToBeStripped = input;
+  var regexes = {
+    "9": /[0-9]/,
+    "a": /[a-zA-Z]/,
+    "*": /[a-zA-Z0-9]/
+  };
+  function formatInput(template, input) {
+    let templateMark = 0;
+    let inputMark = 0;
     let output = "";
-    let regexes = {
-      "9": /[0-9]/,
-      "a": /[a-zA-Z]/,
-      "*": /[a-zA-Z0-9]/
-    };
-    let wildcardTemplate = "";
-    for (let i = 0; i < template.length; i++) {
-      if (["9", "a", "*"].includes(template[i])) {
-        wildcardTemplate += template[i];
-        continue;
-      }
-      for (let j = 0; j < inputToBeStripped.length; j++) {
-        if (inputToBeStripped[j] === template[i]) {
-          inputToBeStripped = inputToBeStripped.slice(0, j) + inputToBeStripped.slice(j + 1);
-          break;
+    while (templateMark < template.length && inputMark < input.length) {
+      let templateChar = template[templateMark];
+      let inputChar = input[inputMark];
+      if (templateChar in regexes) {
+        if (regexes[templateChar].test(inputChar)) {
+          output += inputChar;
+          templateMark++;
         }
+        inputMark++;
+      } else {
+        output += templateChar;
+        templateMark++;
+        if (templateChar === input[inputMark])
+          inputMark++;
       }
     }
-    for (let i = 0; i < wildcardTemplate.length; i++) {
-      let found = false;
-      for (let j = 0; j < inputToBeStripped.length; j++) {
-        if (regexes[wildcardTemplate[i]].test(inputToBeStripped[j])) {
-          output += inputToBeStripped[j];
-          inputToBeStripped = inputToBeStripped.slice(0, j) + inputToBeStripped.slice(j + 1);
-          found = true;
-          break;
-        }
-      }
-      if (!found)
-        break;
-    }
     return output;
   }
-  function buildUp(template, input) {
-    let clean = Array.from(input);
-    let output = "";
-    for (let i = 0; i < template.length; i++) {
-      if (!["9", "a", "*"].includes(template[i])) {
-        output += template[i];
-        continue;
-      }
-      if (clean.length === 0)
-        break;
-      output += clean.shift();
-    }
-    return output;
-  }
   function formatMoney(input, delimiter = ".", thousands, precision = 2) {
@@ -145,0 +123,0 @@ if (input === "-")

dist/cdn.min.js

@@ -1,1 +0,1 @@
-(()=>{function b(n){n.directive("mask",(e,{value:t,expression:u},{effect:f,evaluateLater:a,cleanup:r})=>{let l=()=>u,o="";queueMicrotask(()=>{if(["function","dynamic"].includes(t)){let i=a(u);f(()=>{l=d=>{let g;return n.dontAutoEvaluateFunctions(()=>{i(c=>{g=typeof c=="function"?c(d):c},{scope:{$input:d,$money:w.bind({el:e})}})}),g},s(e,!1)})}else s(e,!1);if(e._x_model){if(e._x_model.get()===e.value||e._x_model.get()===null&&e.value==="")return;e._x_model.set(e.value)}});let p=new AbortController;r(()=>{p.abort()}),e.addEventListener("input",()=>s(e),{signal:p.signal,capture:!0}),e.addEventListener("blur",()=>s(e,!1),{signal:p.signal});function s(i,d=!0){let g=i.value,c=l(g);if(!c||c==="false")return!1;if(o.length-i.value.length===1)return o=i.value;let v=()=>{o=i.value=h(g,c)};d?k(i,c,()=>{v()}):v()}function h(i,d){if(i==="")return"";let g=m(d,i);return x(d,g)}}).before("model")}function k(n,e,t){let u=n.selectionStart,f=n.value;t();let a=f.slice(0,u),r=x(e,m(e,a)).length;n.setSelectionRange(r,r)}function m(n,e){let t=e,u="",f={9:/[0-9]/,a:/[a-zA-Z]/,"*":/[a-zA-Z0-9]/},a="";for(let r=0;r<n.length;r++){if(["9","a","*"].includes(n[r])){a+=n[r];continue}for(let l=0;l<t.length;l++)if(t[l]===n[r]){t=t.slice(0,l)+t.slice(l+1);break}}for(let r=0;r<a.length;r++){let l=!1;for(let o=0;o<t.length;o++)if(f[a[r]].test(t[o])){u+=t[o],t=t.slice(0,o)+t.slice(o+1),l=!0;break}if(!l)break}return u}function x(n,e){let t=Array.from(e),u="";for(let f=0;f<n.length;f++){if(!["9","a","*"].includes(n[f])){u+=n[f];continue}if(t.length===0)break;u+=t.shift()}return u}function w(n,e=".",t,u=2){if(n==="-")return"-";if(/^\D+$/.test(n))return"9";t==null&&(t=e===","?".":",");let f=(o,p)=>{let s="",h=0;for(let i=o.length-1;i>=0;i--)o[i]!==p&&(h===3?(s=o[i]+p+s,h=0):s=o[i]+s,h++);return s},a=n.startsWith("-")?"-":"",r=n.replaceAll(new RegExp(`[^0-9\\${e}]`,"g"),""),l=Array.from({length:r.split(e)[0].length}).fill("9").join("");return l=`${a}${f(l,t)}`,u>0&&n.includes(e)&&(l+=`${e}`+"9".repeat(u)),queueMicrotask(()=>{this.el.value.endsWith(e)||this.el.value[this.el.selectionStart-1]===e&&this.el.setSelectionRange(this.el.selectionStart-1,this.el.selectionStart-1)}),l}document.addEventListener("alpine:init",()=>{window.Alpine.plugin(b)});})();
+(()=>{function x(n){n.directive("mask",(e,{value:l,expression:r},{effect:s,evaluateLater:i,cleanup:u})=>{let p=()=>r,f="";queueMicrotask(()=>{if(["function","dynamic"].includes(l)){let o=i(r);s(()=>{p=t=>{let c;return n.dontAutoEvaluateFunctions(()=>{o(d=>{c=typeof d=="function"?d(t):d},{scope:{$input:t,$money:M.bind({el:e})}})}),c},a(e,!1)})}else a(e,!1);if(e._x_model){e._x_model.get()!==e.value&&(e._x_model.get()===null&&e.value===""||e._x_model.set(e.value));let o=e._x_forceModelUpdate;e._x_forceModelUpdate=t=>{t=String(t);let c=p(t);c&&c!=="false"&&(t=m(c,t)),f=t,o(t),e._x_model.set(t)}}});let g=new AbortController;u(()=>{g.abort()}),e.addEventListener("input",()=>a(e),{signal:g.signal,capture:!0}),e.addEventListener("blur",()=>a(e,!1),{signal:g.signal});function a(o,t=!0){let c=o.value,d=p(c);if(!d||d==="false")return!1;if(f.length-o.value.length===1)return f=o.value;let h=()=>{f=o.value=m(d,c)};t?v(o,d,()=>{h()}):h()}}).before("model")}function v(n,e,l){let r=n.selectionStart,s=n.value;l();let i=s.slice(0,r),u=m(e,i).length;n.setSelectionRange(u,u)}var _={9:/[0-9]/,a:/[a-zA-Z]/,"*":/[a-zA-Z0-9]/};function m(n,e){let l=0,r=0,s="";for(;l<n.length&&r<e.length;){let i=n[l],u=e[r];i in _?(_[i].test(u)&&(s+=u,l++),r++):(s+=i,l++,i===e[r]&&r++)}return s}function M(n,e=".",l,r=2){if(n==="-")return"-";if(/^\D+$/.test(n))return"9";l==null&&(l=e===","?".":",");let s=(f,g)=>{let a="",o=0;for(let t=f.length-1;t>=0;t--)f[t]!==g&&(o===3?(a=f[t]+g+a,o=0):a=f[t]+a,o++);return a},i=n.startsWith("-")?"-":"",u=n.replaceAll(new RegExp(`[^0-9\\${e}]`,"g"),""),p=Array.from({length:u.split(e)[0].length}).fill("9").join("");return p=`${i}${s(p,l)}`,r>0&&n.includes(e)&&(p+=`${e}`+"9".repeat(r)),queueMicrotask(()=>{this.el.value.endsWith(e)||this.el.value[this.el.selectionStart-1]===e&&this.el.setSelectionRange(this.el.selectionStart-1,this.el.selectionStart-1)}),p}document.addEventListener("alpine:init",()=>{window.Alpine.plugin(x)});})();

dist/module.cjs.js

@@ -23,4 +23,4 @@ var __defProp = Object.defineProperty;
   default: () => module_default,
-  mask: () => src_default,
-  stripDown: () => stripDown
+  formatInput: () => formatInput,
+  mask: () => src_default
 });
@@ -57,7 +57,18 @@ module.exports = __toCommonJS(module_exports);
       if (el._x_model) {
-        if (el._x_model.get() === el.value)
-          return;
-        if (el._x_model.get() === null && el.value === "")
-          return;
-        el._x_model.set(el.value);
+        if (el._x_model.get() !== el.value) {
+          if (!(el._x_model.get() === null && el.value === "")) {
+            el._x_model.set(el.value);
+          }
+        }
+        let updater = el._x_forceModelUpdate;
+        el._x_forceModelUpdate = (value2) => {
+          value2 = String(value2);
+          let template = templateFn(value2);
+          if (template && template !== "false") {
+            value2 = formatInput(template, value2);
+          }
+          lastInputValue = value2;
+          updater(value2);
+          el._x_model.set(value2);
+        };
       }
@@ -85,3 +96,3 @@ });
       let setInput = () => {
-        lastInputValue = el2.value = formatInput(input, template);
+        lastInputValue = el2.value = formatInput(template, input);
       };
@@ -96,9 +107,2 @@ if (shouldRestoreCursor) {
     }
-    function formatInput(input, template) {
-      if (input === "")
-        return "";
-      let strippedDownInput = stripDown(template, input);
-      let rebuiltInput = buildUp(template, strippedDownInput);
-      return rebuiltInput;
-    }
   }).before("model");
@@ -111,61 +115,35 @@ }
   let beforeLeftOfCursorBeforeFormatting = unformattedValue.slice(0, cursorPosition);
-  let newPosition = buildUp(
+  let newPosition = formatInput(
     template,
-    stripDown(
-      template,
-      beforeLeftOfCursorBeforeFormatting
-    )
+    beforeLeftOfCursorBeforeFormatting
   ).length;
   el.setSelectionRange(newPosition, newPosition);
 }
-function stripDown(template, input) {
-  let inputToBeStripped = input;
+var regexes = {
+  "9": /[0-9]/,
+  "a": /[a-zA-Z]/,
+  "*": /[a-zA-Z0-9]/
+};
+function formatInput(template, input) {
+  let templateMark = 0;
+  let inputMark = 0;
   let output = "";
-  let regexes = {
-    "9": /[0-9]/,
-    "a": /[a-zA-Z]/,
-    "*": /[a-zA-Z0-9]/
-  };
-  let wildcardTemplate = "";
-  for (let i = 0; i < template.length; i++) {
-    if (["9", "a", "*"].includes(template[i])) {
-      wildcardTemplate += template[i];
-      continue;
-    }
-    for (let j = 0; j < inputToBeStripped.length; j++) {
-      if (inputToBeStripped[j] === template[i]) {
-        inputToBeStripped = inputToBeStripped.slice(0, j) + inputToBeStripped.slice(j + 1);
-        break;
+  while (templateMark < template.length && inputMark < input.length) {
+    let templateChar = template[templateMark];
+    let inputChar = input[inputMark];
+    if (templateChar in regexes) {
+      if (regexes[templateChar].test(inputChar)) {
+        output += inputChar;
+        templateMark++;
       }
+      inputMark++;
+    } else {
+      output += templateChar;
+      templateMark++;
+      if (templateChar === input[inputMark])
+        inputMark++;
     }
   }
-  for (let i = 0; i < wildcardTemplate.length; i++) {
-    let found = false;
-    for (let j = 0; j < inputToBeStripped.length; j++) {
-      if (regexes[wildcardTemplate[i]].test(inputToBeStripped[j])) {
-        output += inputToBeStripped[j];
-        inputToBeStripped = inputToBeStripped.slice(0, j) + inputToBeStripped.slice(j + 1);
-        found = true;
-        break;
-      }
-    }
-    if (!found)
-      break;
-  }
   return output;
 }
-function buildUp(template, input) {
-  let clean = Array.from(input);
-  let output = "";
-  for (let i = 0; i < template.length; i++) {
-    if (!["9", "a", "*"].includes(template[i])) {
-      output += template[i];
-      continue;
-    }
-    if (clean.length === 0)
-      break;
-    output += clean.shift();
-  }
-  return output;
-}
 function formatMoney(input, delimiter = ".", thousands, precision = 2) {
@@ -215,4 +193,4 @@ if (input === "-")
 0 && (module.exports = {
-  mask,
-  stripDown
+  formatInput,
+  mask
 });

dist/module.esm.js

@@ -29,7 +29,18 @@ // packages/mask/src/index.js
       if (el._x_model) {
-        if (el._x_model.get() === el.value)
-          return;
-        if (el._x_model.get() === null && el.value === "")
-          return;
-        el._x_model.set(el.value);
+        if (el._x_model.get() !== el.value) {
+          if (!(el._x_model.get() === null && el.value === "")) {
+            el._x_model.set(el.value);
+          }
+        }
+        let updater = el._x_forceModelUpdate;
+        el._x_forceModelUpdate = (value2) => {
+          value2 = String(value2);
+          let template = templateFn(value2);
+          if (template && template !== "false") {
+            value2 = formatInput(template, value2);
+          }
+          lastInputValue = value2;
+          updater(value2);
+          el._x_model.set(value2);
+        };
       }
@@ -57,3 +68,3 @@ });
       let setInput = () => {
-        lastInputValue = el2.value = formatInput(input, template);
+        lastInputValue = el2.value = formatInput(template, input);
       };
@@ -68,9 +79,2 @@ if (shouldRestoreCursor) {
     }
-    function formatInput(input, template) {
-      if (input === "")
-        return "";
-      let strippedDownInput = stripDown(template, input);
-      let rebuiltInput = buildUp(template, strippedDownInput);
-      return rebuiltInput;
-    }
   }).before("model");
@@ -83,61 +87,35 @@ }
   let beforeLeftOfCursorBeforeFormatting = unformattedValue.slice(0, cursorPosition);
-  let newPosition = buildUp(
+  let newPosition = formatInput(
     template,
-    stripDown(
-      template,
-      beforeLeftOfCursorBeforeFormatting
-    )
+    beforeLeftOfCursorBeforeFormatting
   ).length;
   el.setSelectionRange(newPosition, newPosition);
 }
-function stripDown(template, input) {
-  let inputToBeStripped = input;
+var regexes = {
+  "9": /[0-9]/,
+  "a": /[a-zA-Z]/,
+  "*": /[a-zA-Z0-9]/
+};
+function formatInput(template, input) {
+  let templateMark = 0;
+  let inputMark = 0;
   let output = "";
-  let regexes = {
-    "9": /[0-9]/,
-    "a": /[a-zA-Z]/,
-    "*": /[a-zA-Z0-9]/
-  };
-  let wildcardTemplate = "";
-  for (let i = 0; i < template.length; i++) {
-    if (["9", "a", "*"].includes(template[i])) {
-      wildcardTemplate += template[i];
-      continue;
-    }
-    for (let j = 0; j < inputToBeStripped.length; j++) {
-      if (inputToBeStripped[j] === template[i]) {
-        inputToBeStripped = inputToBeStripped.slice(0, j) + inputToBeStripped.slice(j + 1);
-        break;
+  while (templateMark < template.length && inputMark < input.length) {
+    let templateChar = template[templateMark];
+    let inputChar = input[inputMark];
+    if (templateChar in regexes) {
+      if (regexes[templateChar].test(inputChar)) {
+        output += inputChar;
+        templateMark++;
       }
+      inputMark++;
+    } else {
+      output += templateChar;
+      templateMark++;
+      if (templateChar === input[inputMark])
+        inputMark++;
     }
   }
-  for (let i = 0; i < wildcardTemplate.length; i++) {
-    let found = false;
-    for (let j = 0; j < inputToBeStripped.length; j++) {
-      if (regexes[wildcardTemplate[i]].test(inputToBeStripped[j])) {
-        output += inputToBeStripped[j];
-        inputToBeStripped = inputToBeStripped.slice(0, j) + inputToBeStripped.slice(j + 1);
-        found = true;
-        break;
-      }
-    }
-    if (!found)
-      break;
-  }
   return output;
 }
-function buildUp(template, input) {
-  let clean = Array.from(input);
-  let output = "";
-  for (let i = 0; i < template.length; i++) {
-    if (!["9", "a", "*"].includes(template[i])) {
-      output += template[i];
-      continue;
-    }
-    if (clean.length === 0)
-      break;
-    output += clean.shift();
-  }
-  return output;
-}
 function formatMoney(input, delimiter = ".", thousands, precision = 2) {
@@ -187,4 +165,4 @@ if (input === "-")
   module_default as default,
-  src_default as mask,
-  stripDown
+  formatInput,
+  src_default as mask
 };

package.json

 {
     "name": "@alpinejs/mask",
-    "version": "3.15.8",
+    "version": "3.15.9",
     "description": "An Alpine plugin for input masking",
@@ -5,0 +5,0 @@ "homepage": "https://alpinejs.dev/plugins/mask",

src/index.js

@@ -45,9 +45,21 @@
                 // If the x-model value is the same, don't override it as that will trigger updates...
-                if (el._x_model.get() === el.value) return
+                if (el._x_model.get() !== el.value) {
+                    // If the x-model value is `null` and the input value is an empty
+                    // string, don't override it as that will trigger updates...
+                    if (!(el._x_model.get() === null && el.value === '')) {
+                        el._x_model.set(el.value)
+                    }
+                }
 
-                // If the x-model value is `null` and the input value is an empty 
-                // string, don't override it as that will trigger updates...
-                if (el._x_model.get() === null && el.value === '') return
-
-                el._x_model.set(el.value)
+                let updater = el._x_forceModelUpdate
+                el._x_forceModelUpdate = (value) => {
+                    value = String(value)
+                    let template = templateFn(value)
+                    if (template && template !== 'false') {
+                        value = formatInput(template, value)
+                    }
+                    lastInputValue = value
+                    updater(value)
+                    el._x_model.set(value)
+                }
             }
@@ -87,3 +99,3 @@ })
             let setInput = () => {
-                lastInputValue = el.value = formatInput(input, template)
+                lastInputValue = el.value = formatInput(template,input)
             }
@@ -102,12 +114,2 @@
         }
-
-        function formatInput(input, template) {
-            // Let empty inputs be empty inputs.
-            if (input === '') return ''
-
-            let strippedDownInput = stripDown(template, input)
-            let rebuiltInput = buildUp(template, strippedDownInput)
-
-            return rebuiltInput
-        }
     }).before('model')
@@ -124,6 +126,4 @@ }
 
-    let newPosition = buildUp(
-        template, stripDown(
+    let newPosition = formatInput(
             template, beforeLeftOfCursorBeforeFormatting
-        )
     ).length
@@ -134,43 +134,35 @@
 
-export function stripDown(template, input) {
-    let inputToBeStripped = input
+let regexes = {
+    '9': /[0-9]/,
+    'a': /[a-zA-Z]/,
+    '*': /[a-zA-Z0-9]/,
+}
+
+export function formatInput(template, input) {
+    let templateMark = 0
+    let inputMark = 0
     let output = ''
-    let regexes = {
-        '9': /[0-9]/,
-        'a': /[a-zA-Z]/,
-        '*': /[a-zA-Z0-9]/,
-    }
 
-    let wildcardTemplate = ''
+    // Walk the template and input chars simultaneously one by one...
+    while (templateMark < template.length && inputMark < input.length) {
+        let templateChar = template[templateMark]
+        let inputChar = input[inputMark]
 
-    // Strip away non wildcard template characters.
-    for (let i = 0; i < template.length; i++) {
-        if (['9', 'a', '*'].includes(template[i])) {
-            wildcardTemplate += template[i]
-            continue;
-        }
+        // We've encountered a template placeholder...
+        if (templateChar in regexes) {
+            // If the input is "allowed" based on the placeholder...
+            if (regexes[templateChar].test(inputChar)) {
+                output += inputChar
 
-        for (let j = 0; j < inputToBeStripped.length; j++) {
-            if (inputToBeStripped[j] === template[i]) {
-                inputToBeStripped = inputToBeStripped.slice(0, j) + inputToBeStripped.slice(j+1)
-
-                break;
+                templateMark++
             }
-        }
-    }
 
-    for (let i = 0; i < wildcardTemplate.length; i++) {
-        let found = false
+            inputMark++
+        } else { // We've encountered a template literal...
+            output += templateChar
 
-        for (let j = 0; j < inputToBeStripped.length; j++) {
-            if (regexes[wildcardTemplate[i]].test(inputToBeStripped[j])) {
-                output += inputToBeStripped[j]
-                inputToBeStripped = inputToBeStripped.slice(0, j) + inputToBeStripped.slice(j+1)
+            templateMark++
 
-                found = true
-                break;
-            }
+            if (templateChar === input[inputMark]) inputMark++
         }
-
-        if (! found) break;
     }
@@ -181,20 +173,2 @@
 
-export function buildUp(template, input) {
-    let clean = Array.from(input)
-    let output = ''
-
-    for (let i = 0; i < template.length; i++) {
-        if (! ['9', 'a', '*'].includes(template[i])) {
-            output += template[i]
-            continue;
-        }
-
-        if (clean.length === 0) break;
-
-        output += clean.shift()
-    }
-
-    return output
-}
-
 export function formatMoney(input, delimiter = '.', thousands, precision = 2) {
@@ -201,0 +175,0 @@ if (input === '-') return '-'

No alert changes

Worsened metrics

Total package byte prevSize

29057

-7.89%

Lines of code

702

-10.57%

No dependency changes