maz-ui/components/MazInputCode.mjs

A standalone components library for Vue.Js 3 & Nuxt.Js 3

import { defineComponent as N, ref as z, watch as M, computed as m, openBlock as g, createElementBlock as v, normalizeClass as h, normalizeStyle as P, createElementVNode as y, Fragment as $, renderList as q, mergeProps as D, toDisplayString as E } from "vue";
import './assets/MazInputCode.DF9-aY4y.css';const F = ["disabled"], K = { class: "m-input-code__wrapper" }, T = ["inputmode", "pattern", "required", "value", "onInput", "onKeydown", "onClick"], O = /* @__PURE__ */ N({
  inheritAttrs: !1,
  __name: "MazInputCode",
  props: {
    style: { default: void 0 },
    class: { default: void 0 },
    modelValue: { default: void 0 },
    codeLength: { default: 4 },
    type: { default: "text" },
    acceptAlpha: { type: Boolean, default: !1 },
    required: { type: Boolean, default: !1 },
    disabled: { type: Boolean, default: !1 },
    error: { type: Boolean, default: !1 },
    success: { type: Boolean, default: !1 },
    warning: { type: Boolean, default: !1 },
    size: { default: "md" },
    color: { default: "primary" },
    hint: {}
  },
  emits: ["update:model-value", "completed"],
  setup(c, { emit: p }) {
    const n = c, d = p, u = z([]), r = z(/* @__PURE__ */ new Map());
    M(
      () => n.modelValue,
      (e, t) => {
        e !== t && (r.value = I());
      },
      { immediate: !0 }
    );
    const f = m({
      get: () => r.value,
      set: (e) => {
        const t = B(e);
        d("update:model-value", t), (t == null ? void 0 : t.toString().length) === n.codeLength && d("completed");
      }
    });
    function I(e = n.modelValue) {
      const t = /* @__PURE__ */ new Map();
      for (const o of Array.from({ length: n.codeLength }, (a, l) => l))
        if (e === void 0)
          t.set(o + 1, void 0);
        else {
          const a = [...e.toString()];
          t.set(o + 1, a[o]);
        }
      return t;
    }
    function L(e, t) {
      var a;
      const o = w((a = e.target) == null ? void 0 : a.value);
      f.value = r.value.set(t, o), o && i(t);
    }
    function B(e) {
      const t = [...e.values()].join("");
      return n.type === "text" ? t : t && !Number.isNaN(Number(t)) ? Number(t) : void 0;
    }
    function w(e) {
      var t;
      return (t = n.acceptAlpha ? e.match(/^[\w.]$/) : e.match(/\d+/g)) == null ? void 0 : t.toString();
    }
    function _(e, t) {
      const o = r.value.get(t);
      if (e.key === "ArrowRight" && i(t), e.key === "ArrowLeft" && i(t - 2), e.key === "Backspace" && !o) {
        const a = t - 1 < 0 ? 0 : t - 1;
        f.value = r.value.set(a, void 0), i(a - 1);
      }
    }
    function A(e) {
      var a;
      const t = (a = e.clipboardData) == null ? void 0 : a.getData("text");
      if (!t)
        return;
      const o = Array.from({ length: n.codeLength }, (l, s) => ({
        index: s + 1,
        value: [...t.toString()][s] ?? void 0
      }));
      for (const { index: l, value: s } of o) {
        const V = s ? w(s) : void 0;
        V && r.value.set(l, V);
      }
      setTimeout(() => {
        const l = k(), s = l >= n.codeLength ? n.codeLength - 1 : l;
        i(s, !1);
      }, 0);
    }
    function k() {
      return [...r.value.values()].filter(Boolean).length;
    }
    function i(e, t = !0) {
      setTimeout(() => {
        const o = u.value[e];
        e + 1 > n.codeLength || !o || (o.focus(), t && b(e));
      }, 0);
    }
    function b(e) {
      const t = u.value[e];
      e + 1 > n.codeLength || !t || t.select();
    }
    const S = m(() => n.error ? "!maz-border-danger" : n.success ? "!maz-border-success" : n.warning ? "!maz-border-warning" : ""), C = m(() => `var(--maz-color-${n.color})`);
    return (e, t) => (g(), v("fieldset", {
      class: h(["m-input-code m-reset-css", [e.size ? `--${e.size}` : void 0, n.class]]),
      disabled: e.disabled,
      style: P([e.style, { "--input-border-color": C.value }])
    }, [
      y("div", K, [
        (g(!0), v(
          $,
          null,
          q(e.codeLength, (o) => (g(), v(
            "div",
            {
              key: o,
              class: h(["input-wrapper", S.value])
            },
            [
              y("input", D({
                ref_for: !0,
                ref: (a) => {
                  u.value[o - 1] = a;
                },
                type: "text",
                minlength: "1",
                maxlength: "1",
                inputmode: e.acceptAlpha ? "text" : "numeric",
                pattern: e.acceptAlpha ? "[a-zA-Z0-9]{1}" : "[0-9]{1}",
                autocomplete: "do-not-autofill",
                required: e.required
              }, e.$attrs, {
                value: f.value.get(o),
                onInput: (a) => L(a, o),
                onKeydown: (a) => _(a, o),
                onClick: (a) => b(o - 1),
                onPaste: A
              }), null, 16, T)
            ],
            2
            /* CLASS */
          ))),
          128
          /* KEYED_FRAGMENT */
        ))
      ]),
      y(
        "span",
        {
          class: h(["m-input-code__hint", {
            "--error": e.error,
            "--success": e.success,
            "--warning": e.warning
          }])
        },
        E(e.hint),
        3
        /* TEXT, CLASS */
      )
    ], 14, F));
  }
}), W = (c, p) => {
  const n = c.__vccOpts || c;
  for (const [d, u] of p)
    n[d] = u;
  return n;
}, R = /* @__PURE__ */ W(O, [["__scopeId", "data-v-dbb4e5e8"]]);
export {
  R as default
};