@mekari/pixel3-mask 0.1.0

package/dist/index.js

@@ -0,0 +1,503 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Mask: () => Mask,
+  MaskInput: () => MaskInput,
+  defineMaskOptions: () => defineMaskOptions,
+  tokens: () => tokens,
+  vMask: () => vMask
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/tokens.ts
+var tokens = {
+  "#": {
+    pattern: /[0-9]/
+  },
+  "S": {
+    pattern: /[a-zA-Z]/
+  },
+  "X": {
+    pattern: /[a-zA-Z0-9]/
+  },
+  "A": {
+    pattern: /[A-Z]/
+  },
+  "a": {
+    pattern: /[a-z]/
+  }
+};
+
+// src/number.ts
+var prepare = /* @__PURE__ */ __name((input, group, decimal) => input.replaceAll(group, "").replace(decimal, ".").replace("..", ".").replace(/[^.\d]/g, ""), "prepare");
+var createFormatter = /* @__PURE__ */ __name((min, max, opts) => {
+  var _a, _b;
+  return new Intl.NumberFormat((_b = (_a = opts.number) == null ? void 0 : _a.locale) != null ? _b : "en", {
+    minimumFractionDigits: min,
+    maximumFractionDigits: max,
+    roundingMode: "trunc"
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  });
+}, "createFormatter");
+var processNumber = /* @__PURE__ */ __name((value, masked = true, opts) => {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const sign = ((_a = opts.number) == null ? void 0 : _a.unsigned) !== true && value.startsWith("-") ? "-" : "";
+  const fraction = (_c = (_b = opts.number) == null ? void 0 : _b.fraction) != null ? _c : 0;
+  let formatter = createFormatter(0, fraction, opts);
+  const parts = formatter.formatToParts(1000.12);
+  const group = (_e = (_d = parts.find((part) => part.type === "group")) == null ? void 0 : _d.value) != null ? _e : " ";
+  const decimal = (_g = (_f = parts.find((part) => part.type === "decimal")) == null ? void 0 : _f.value) != null ? _g : ".";
+  const float = prepare(value, group, decimal);
+  if (Number.isNaN(parseFloat(float)))
+    return sign;
+  const floatParts = float.split(".");
+  if (floatParts[1] != null && floatParts[1].length >= 1) {
+    const min = floatParts[1].length <= fraction ? floatParts[1].length : fraction;
+    formatter = createFormatter(min, fraction, opts);
+  }
+  let result = formatter.format(parseFloat(float));
+  if (!masked) {
+    result = prepare(result, group, decimal);
+  } else if (fraction > 0 && float.endsWith(".") && !float.slice(0, -1).includes(".")) {
+    result += decimal;
+  }
+  return sign + result;
+}, "processNumber");
+
+// src/mask.ts
+var _Mask = class _Mask {
+  constructor(defaults = {}) {
+    __publicField(this, "opts", {});
+    __publicField(this, "memo", /* @__PURE__ */ new Map());
+    var _a;
+    const opts = {
+      ...defaults
+    };
+    if (opts.tokens != null) {
+      opts.tokens = opts.tokensReplace ? {
+        ...opts.tokens
+      } : {
+        ...tokens,
+        ...opts.tokens
+      };
+      for (const token of Object.values(opts.tokens)) {
+        if (typeof token.pattern === "string") {
+          token.pattern = new RegExp(token.pattern);
+        }
+      }
+    } else {
+      opts.tokens = tokens;
+    }
+    if (Array.isArray(opts.mask)) {
+      if (opts.mask.length > 1) {
+        opts.mask = [...opts.mask].sort((a, b) => a.length - b.length);
+      } else {
+        opts.mask = (_a = opts.mask[0]) != null ? _a : "";
+      }
+    }
+    if (opts.mask === "") {
+      opts.mask = null;
+    }
+    this.opts = opts;
+  }
+  masked(value) {
+    return this.process(String(value), this.findMask(String(value)));
+  }
+  unmasked(value) {
+    return this.process(String(value), this.findMask(String(value)), false);
+  }
+  isEager() {
+    return this.opts.eager === true;
+  }
+  isReversed() {
+    return this.opts.reversed === true;
+  }
+  completed(value) {
+    const mask = this.findMask(String(value));
+    if (this.opts.mask == null || mask == null)
+      return false;
+    const length = this.process(String(value), mask).length;
+    if (typeof this.opts.mask === "string") {
+      return length >= this.opts.mask.length;
+    }
+    return length >= mask.length;
+  }
+  findMask(value) {
+    var _a, _b;
+    const mask = this.opts.mask;
+    if (mask == null) {
+      return null;
+    } else if (typeof mask === "string") {
+      return mask;
+    } else if (typeof mask === "function") {
+      return mask(value);
+    }
+    const l = this.process(value, (_a = mask.slice(-1).pop()) != null ? _a : "", false);
+    return (_b = mask.find((el) => this.process(value, el, false).length >= l.length)) != null ? _b : "";
+  }
+  escapeMask(maskRaw) {
+    const chars = [];
+    const escaped = [];
+    maskRaw.split("").forEach((ch, i) => {
+      if (ch === "!" && maskRaw[i - 1] !== "!") {
+        escaped.push(i - escaped.length);
+      } else {
+        chars.push(ch);
+      }
+    });
+    return {
+      mask: chars.join(""),
+      escaped
+    };
+  }
+  process(value, maskRaw, masked = true) {
+    if (this.opts.number != null)
+      return processNumber(value, masked, this.opts);
+    if (maskRaw == null)
+      return value;
+    const memoKey = `v=${value},mr=${maskRaw},m=${masked ? 1 : 0}`;
+    if (this.memo.has(memoKey))
+      return this.memo.get(memoKey);
+    const {
+      mask,
+      escaped
+    } = this.escapeMask(maskRaw);
+    const result = [];
+    const tokens2 = this.opts.tokens != null ? this.opts.tokens : {};
+    const offset = this.isReversed() ? -1 : 1;
+    const method = this.isReversed() ? "unshift" : "push";
+    const lastMaskChar = this.isReversed() ? 0 : mask.length - 1;
+    const check = this.isReversed() ? () => m > -1 && v > -1 : () => m < mask.length && v < value.length;
+    const notLastMaskChar = /* @__PURE__ */ __name((m2) => !this.isReversed() && m2 <= lastMaskChar || this.isReversed() && m2 >= lastMaskChar, "notLastMaskChar");
+    let lastRawMaskChar;
+    let repeatedPos = -1;
+    let m = this.isReversed() ? mask.length - 1 : 0;
+    let v = this.isReversed() ? value.length - 1 : 0;
+    let multipleMatched = false;
+    while (check()) {
+      const maskChar = mask.charAt(m);
+      const token = tokens2[maskChar];
+      const valueChar = (token == null ? void 0 : token.transform) != null ? token.transform(value.charAt(v)) : value.charAt(v);
+      if (!escaped.includes(m) && token != null) {
+        if (valueChar.match(token.pattern) != null) {
+          result[method](valueChar);
+          if (token.repeated) {
+            if (repeatedPos === -1) {
+              repeatedPos = m;
+            } else if (m === lastMaskChar && m !== repeatedPos) {
+              m = repeatedPos - offset;
+            }
+            if (lastMaskChar === repeatedPos) {
+              m -= offset;
+            }
+          } else if (token.multiple) {
+            multipleMatched = true;
+            m -= offset;
+          }
+          m += offset;
+        } else if (token.multiple) {
+          if (multipleMatched) {
+            m += offset;
+            v -= offset;
+            multipleMatched = false;
+          } else {
+          }
+        } else if (valueChar === lastRawMaskChar) {
+          lastRawMaskChar = void 0;
+        } else if (token.optional) {
+          m += offset;
+          v -= offset;
+        } else {
+        }
+        v += offset;
+      } else {
+        if (masked && !this.isEager()) {
+          result[method](maskChar);
+        }
+        if (valueChar === maskChar && !this.isEager()) {
+          v += offset;
+        } else {
+          lastRawMaskChar = maskChar;
+        }
+        if (!this.isEager()) {
+          m += offset;
+        }
+      }
+      if (this.isEager()) {
+        while (notLastMaskChar(m) && (tokens2[mask.charAt(m)] == null || escaped.includes(m))) {
+          if (masked) {
+            result[method](mask.charAt(m));
+            if (value.charAt(v) === mask.charAt(m)) {
+              m += offset;
+              v += offset;
+              continue;
+            }
+          } else if (mask.charAt(m) === value.charAt(v)) {
+            v += offset;
+          }
+          m += offset;
+        }
+      }
+    }
+    this.memo.set(memoKey, result.join(""));
+    return this.memo.get(memoKey);
+  }
+};
+__name(_Mask, "Mask");
+var Mask = _Mask;
+
+// src/parser.ts
+var parseJson = /* @__PURE__ */ __name((value) => JSON.parse(value.replaceAll("'", '"')), "parseJson");
+var parseInput = /* @__PURE__ */ __name((input, defaults = {}) => {
+  const opts = {
+    ...defaults
+  };
+  if (input.dataset.maska != null && input.dataset.maska !== "") {
+    opts.mask = parseMask(input.dataset.maska);
+  }
+  if (input.dataset.maskaEager != null) {
+    opts.eager = parseBool(input.dataset.maskaEager);
+  }
+  if (input.dataset.maskaReversed != null) {
+    opts.reversed = parseBool(input.dataset.maskaReversed);
+  }
+  if (input.dataset.maskaTokensReplace != null) {
+    opts.tokensReplace = parseBool(input.dataset.maskaTokensReplace);
+  }
+  if (input.dataset.maskaTokens != null) {
+    opts.tokens = parseTokens(input.dataset.maskaTokens);
+  }
+  const number = {};
+  if (input.dataset.maskaNumberLocale != null) {
+    number.locale = input.dataset.maskaNumberLocale;
+  }
+  if (input.dataset.maskaNumberFraction != null) {
+    number.fraction = parseInt(input.dataset.maskaNumberFraction);
+  }
+  if (input.dataset.maskaNumberUnsigned != null) {
+    number.unsigned = parseBool(input.dataset.maskaNumberUnsigned);
+  }
+  if (input.dataset.maskaNumber != null || Object.values(number).length > 0) {
+    opts.number = number;
+  }
+  return opts;
+}, "parseInput");
+var parseBool = /* @__PURE__ */ __name((value) => value !== "" ? Boolean(JSON.parse(value)) : true, "parseBool");
+var parseMask = /* @__PURE__ */ __name((value) => value.startsWith("[") && value.endsWith("]") ? parseJson(value) : value, "parseMask");
+var parseTokens = /* @__PURE__ */ __name((value) => {
+  if (value.startsWith("{") && value.endsWith("}")) {
+    return parseJson(value);
+  }
+  const tokens2 = {};
+  value.split("|").forEach((token) => {
+    const parts = token.split(":");
+    tokens2[parts[0]] = {
+      pattern: new RegExp(parts[1]),
+      optional: parts[2] === "optional",
+      multiple: parts[2] === "multiple",
+      repeated: parts[2] === "repeated"
+    };
+  });
+  return tokens2;
+}, "parseTokens");
+
+// src/input.ts
+var _MaskInput = class _MaskInput {
+  constructor(target, options = {}) {
+    this.options = options;
+    __publicField(this, "items", /* @__PURE__ */ new Map());
+    __publicField(this, "eventAbortController");
+    __publicField(this, "onInput", /* @__PURE__ */ __name((e) => {
+      if (e instanceof CustomEvent && e.type === "input" && !e.isTrusted && !e.bubbles) {
+        return;
+      }
+      const input = e.target;
+      const mask = this.items.get(input);
+      const isDelete = "inputType" in e && e.inputType.startsWith("delete");
+      const isEager = mask.isEager();
+      const value = isDelete && isEager && mask.unmasked(input.value) === "" ? "" : input.value;
+      this.fixCursor(input, isDelete, () => this.setValue(input, value));
+    }, "onInput"));
+    this.eventAbortController = new AbortController();
+    this.init(this.getInputs(target));
+  }
+  update(options = {}) {
+    this.options = {
+      ...options
+    };
+    this.init(Array.from(this.items.keys()));
+  }
+  updateValue(input) {
+    if (input.value !== "" && input.value !== this.processInput(input).masked) {
+      this.setValue(input, input.value);
+    }
+  }
+  destroy() {
+    this.eventAbortController.abort();
+    this.items.clear();
+  }
+  init(inputs) {
+    const defaults = this.getOptions(this.options);
+    for (const input of inputs) {
+      if (!this.items.has(input)) {
+        const {
+          signal
+        } = this.eventAbortController;
+        input.addEventListener("input", this.onInput, {
+          capture: true,
+          signal
+        });
+      }
+      const mask = new Mask(parseInput(input, defaults));
+      this.items.set(input, mask);
+      queueMicrotask(() => this.updateValue(input));
+      if (input.selectionStart === null && mask.isEager()) {
+        console.warn("Mask: input of `%s` type is not supported", input.type);
+      }
+    }
+  }
+  getInputs(target) {
+    if (typeof target === "string") {
+      return Array.from(document.querySelectorAll(target));
+    }
+    return "length" in target ? Array.from(target) : [target];
+  }
+  getOptions(options) {
+    const {
+      onUpdate,
+      preProcess,
+      postProcess,
+      ...opts
+    } = options;
+    return opts;
+  }
+  fixCursor(input, isDelete, closure) {
+    const pos = input.selectionStart;
+    const value = input.value;
+    closure();
+    if (pos === null || pos === value.length && !isDelete)
+      return;
+    const valueNew = input.value;
+    const leftPart = value.slice(0, pos);
+    const leftPartNew = valueNew.slice(0, pos);
+    const unmasked = this.processInput(input, leftPart).unmasked;
+    const unmaskedNew = this.processInput(input, leftPartNew).unmasked;
+    let posFixed = pos;
+    if (leftPart !== leftPartNew) {
+      posFixed += isDelete ? valueNew.length - value.length : unmasked.length - unmaskedNew.length;
+    }
+    input.setSelectionRange(posFixed, posFixed);
+  }
+  setValue(input, value) {
+    const detail = this.processInput(input, value);
+    input.value = detail.masked;
+    if (this.options.onUpdate != null) {
+      if (Array.isArray(this.options.onUpdate)) {
+        this.options.onUpdate.forEach((f) => f(detail));
+      } else {
+        this.options.onUpdate(detail);
+      }
+    }
+    input.dispatchEvent(new CustomEvent("maska", {
+      detail
+    }));
+    input.dispatchEvent(new CustomEvent("input", {
+      detail: detail.masked
+    }));
+  }
+  processInput(input, value) {
+    const mask = this.items.get(input);
+    let valueNew = value != null ? value : input.value;
+    if (this.options.preProcess != null) {
+      valueNew = this.options.preProcess(valueNew);
+    }
+    let masked = mask.masked(valueNew);
+    if (this.options.postProcess != null) {
+      masked = this.options.postProcess(masked);
+    }
+    return {
+      masked,
+      unmasked: mask.unmasked(valueNew),
+      completed: mask.completed(valueNew)
+    };
+  }
+};
+__name(_MaskInput, "MaskInput");
+var MaskInput = _MaskInput;
+
+// src/directive.ts
+var masks = /* @__PURE__ */ new WeakMap();
+var setArg = /* @__PURE__ */ __name((binding, value) => {
+  if (binding.arg == null || binding.instance == null)
+    return;
+  const isComposition = "setup" in binding.instance.$.type;
+  if (binding.arg in binding.instance) {
+    binding.instance[binding.arg] = value;
+  } else if (isComposition) {
+    console.warn("Mask: please expose `%s` using defineExpose", binding.arg);
+  }
+}, "setArg");
+var vMask = /* @__PURE__ */ __name((el, binding) => {
+  var _a;
+  const input = el instanceof HTMLInputElement ? el : el.querySelector("input");
+  if (input == null || (input == null ? void 0 : input.type) === "file")
+    return;
+  let opts = {};
+  if (binding.value != null) {
+    opts = typeof binding.value === "string" ? {
+      mask: binding.value
+    } : {
+      ...binding.value
+    };
+  }
+  if (binding.arg != null) {
+    const updateArg = /* @__PURE__ */ __name((detail) => {
+      const value = binding.modifiers.unmasked ? detail.unmasked : binding.modifiers.completed ? detail.completed : detail.masked;
+      setArg(binding, value);
+    }, "updateArg");
+    opts.onUpdate = opts.onUpdate == null ? updateArg : Array.isArray(opts.onUpdate) ? [...opts.onUpdate, updateArg] : [opts.onUpdate, updateArg];
+  }
+  if (masks.has(input)) {
+    (_a = masks.get(input)) == null ? void 0 : _a.update(opts);
+  } else {
+    masks.set(input, new MaskInput(input, opts));
+  }
+}, "vMask");
+
+// src/index.ts
+var defineMaskOptions = /* @__PURE__ */ __name((options) => {
+  return options;
+}, "defineMaskOptions");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Mask,
+  MaskInput,
+  defineMaskOptions,
+  tokens,
+  vMask
+});

package/dist/index.mjs

@@ -0,0 +1,29 @@
+import {
+  vMask
+} from "./chunk-T4KAZ3CC.mjs";
+import {
+  MaskInput
+} from "./chunk-GPEHQJAT.mjs";
+import {
+  Mask
+} from "./chunk-YR2EYYGF.mjs";
+import "./chunk-SPWFCSFT.mjs";
+import "./chunk-MAURZ3LV.mjs";
+import {
+  tokens
+} from "./chunk-5TJYDLDA.mjs";
+import {
+  __name
+} from "./chunk-VYPKVKAE.mjs";
+
+// src/index.ts
+var defineMaskOptions = /* @__PURE__ */ __name((options) => {
+  return options;
+}, "defineMaskOptions");
+export {
+  Mask,
+  MaskInput,
+  defineMaskOptions,
+  tokens,
+  vMask
+};

package/dist/input.d.mts

@@ -0,0 +1,33 @@
+import { MaskOptions, Mask } from './mask.mjs';
+import './tokens.mjs';
+
+type MaskUpdateHandler = (detail: MaskDetail) => void;
+type MaskTarget = string | NodeListOf<HTMLInputElement> | HTMLInputElement;
+interface MaskInputOptions extends MaskOptions {
+    onUpdate?: MaskUpdateHandler | MaskUpdateHandler[];
+    preProcess?: (value: string) => string;
+    postProcess?: (value: string) => string;
+}
+interface MaskDetail {
+    masked: string;
+    unmasked: string;
+    completed: boolean;
+}
+declare class MaskInput {
+    private options;
+    readonly items: Map<HTMLInputElement, Mask>;
+    private readonly eventAbortController;
+    constructor(target: MaskTarget, options?: MaskInputOptions);
+    update(options?: MaskInputOptions): void;
+    updateValue(input: HTMLInputElement): void;
+    destroy(): void;
+    private init;
+    private getInputs;
+    private getOptions;
+    private readonly onInput;
+    private fixCursor;
+    private setValue;
+    private processInput;
+}
+
+export { MaskDetail, MaskInput, MaskInputOptions };

package/dist/input.d.ts

@@ -0,0 +1,33 @@
+import { MaskOptions, Mask } from './mask.js';
+import './tokens.js';
+
+type MaskUpdateHandler = (detail: MaskDetail) => void;
+type MaskTarget = string | NodeListOf<HTMLInputElement> | HTMLInputElement;
+interface MaskInputOptions extends MaskOptions {
+    onUpdate?: MaskUpdateHandler | MaskUpdateHandler[];
+    preProcess?: (value: string) => string;
+    postProcess?: (value: string) => string;
+}
+interface MaskDetail {
+    masked: string;
+    unmasked: string;
+    completed: boolean;
+}
+declare class MaskInput {
+    private options;
+    readonly items: Map<HTMLInputElement, Mask>;
+    private readonly eventAbortController;
+    constructor(target: MaskTarget, options?: MaskInputOptions);
+    update(options?: MaskInputOptions): void;
+    updateValue(input: HTMLInputElement): void;
+    destroy(): void;
+    private init;
+    private getInputs;
+    private getOptions;
+    private readonly onInput;
+    private fixCursor;
+    private setValue;
+    private processInput;
+}
+
+export { MaskDetail, MaskInput, MaskInputOptions };