maz-ui 3.28.8 → 3.29.0

package/components/MazInputCode.d.ts

@@ -0,0 +1,153 @@
+import { type PropType } from 'vue';
+import type { Color } from './types';
+export type { Color } from './types';
+declare const _default: import("vue").DefineComponent<{
+    style: {
+        type: PropType<import("vue").StyleValue>;
+        default: undefined;
+    };
+    class: {
+        type: PropType<any>;
+        default: undefined;
+    };
+    /** Is v-model */
+    modelValue: {
+        type: PropType<string | number>;
+        default: undefined;
+    };
+    /** Choose the length of the code */
+    codeLength: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** Is the returned type (number works only when accept-alpha is not enable) */
+    type: {
+        type: PropType<"number" | "text">;
+        default: string;
+    };
+    /** Turn it to true to accept alpha charac */
+    acceptAlpha: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** make inputs required */
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** make inputs required */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** When is `true` the input has the error style (danger color) */
+    error: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** When is `true` the input has the success style (success color) */
+    success: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** When is `true` the input has the warning style (warning color) */
+    warning: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Predefined size of component */
+    size: {
+        type: PropType<"sm" | "md" | "lg">;
+        default: string;
+    };
+    /** Color of component */
+    color: {
+        type: PropType<Color>;
+        default: string;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:model-value": (...args: any[]) => void;
+    completed: (...args: any[]) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    style: {
+        type: PropType<import("vue").StyleValue>;
+        default: undefined;
+    };
+    class: {
+        type: PropType<any>;
+        default: undefined;
+    };
+    /** Is v-model */
+    modelValue: {
+        type: PropType<string | number>;
+        default: undefined;
+    };
+    /** Choose the length of the code */
+    codeLength: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** Is the returned type (number works only when accept-alpha is not enable) */
+    type: {
+        type: PropType<"number" | "text">;
+        default: string;
+    };
+    /** Turn it to true to accept alpha charac */
+    acceptAlpha: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** make inputs required */
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** make inputs required */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** When is `true` the input has the error style (danger color) */
+    error: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** When is `true` the input has the success style (success color) */
+    success: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** When is `true` the input has the warning style (warning color) */
+    warning: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Predefined size of component */
+    size: {
+        type: PropType<"sm" | "md" | "lg">;
+        default: string;
+    };
+    /** Color of component */
+    color: {
+        type: PropType<Color>;
+        default: string;
+    };
+}>> & {
+    "onUpdate:model-value"?: ((...args: any[]) => any) | undefined;
+    onCompleted?: ((...args: any[]) => any) | undefined;
+}, {
+    success: boolean;
+    warning: boolean;
+    size: "sm" | "md" | "lg";
+    color: Color;
+    type: "number" | "text";
+    style: import("vue").StyleValue;
+    class: any;
+    disabled: boolean;
+    required: boolean;
+    error: boolean;
+    modelValue: string | number;
+    codeLength: number;
+    acceptAlpha: boolean;
+}, {}>;
+export default _default;

package/components/MazInputCode.mjs

@@ -0,0 +1,189 @@
+import "./assets/MazInputCode.css";
+import { defineComponent as N, useCssVars as C, ref as b, watch as k, computed as m, openBlock as g, createElementBlock as v, normalizeClass as V, normalizeStyle as M, Fragment as P, renderList as j, createCommentVNode as q, createElementVNode as O, mergeProps as $ } from "vue";
+const D = ["disabled"], E = ["inputmode", "pattern", "required", "value", "onInput", "onKeydown"], F = /* @__PURE__ */ N({
+  inheritAttrs: !1,
+  __name: "MazInputCode",
+  props: {
+    style: {
+      type: [String, Array, Object],
+      default: void 0
+    },
+    class: {
+      type: [String, Array, Object],
+      default: void 0
+    },
+    /** Is v-model */
+    modelValue: {
+      type: [String, Number],
+      default: void 0
+    },
+    /** Choose the length of the code */
+    codeLength: { type: Number, default: 4 },
+    /** Is the returned type (number works only when accept-alpha is not enable) */
+    type: {
+      type: String,
+      default: "text"
+    },
+    /** Turn it to true to accept alpha charac */
+    acceptAlpha: { type: Boolean, default: !1 },
+    /** make inputs required */
+    required: { type: Boolean, default: !1 },
+    /** make inputs required */
+    disabled: { type: Boolean, default: !1 },
+    /** When is `true` the input has the error style (danger color) */
+    error: { type: Boolean, default: !1 },
+    /** When is `true` the input has the success style (success color) */
+    success: { type: Boolean, default: !1 },
+    /** When is `true` the input has the warning style (warning color) */
+    warning: { type: Boolean, default: !1 },
+    /** Predefined size of component */
+    size: {
+      type: String,
+      default: "md"
+    },
+    /** Color of component */
+    color: {
+      type: String,
+      default: "primary"
+    }
+  },
+  emits: [
+    /**
+     * update the model
+     */
+    "update:model-value",
+    /**
+     * Emitted when all inputs are set.
+     */
+    "completed"
+  ],
+  setup(l, { emit: d }) {
+    C((t) => ({
+      "6bdbc0e0": L.value
+    }));
+    const a = l, c = d, i = b([]), r = b(/* @__PURE__ */ new Map());
+    k(
+      () => a.modelValue,
+      (t, e) => {
+        t !== e && (r.value = x());
+      },
+      { immediate: !0 }
+    );
+    const f = m({
+      get: () => r.value,
+      set: (t) => {
+        const e = I(t);
+        c("update:model-value", e), (e == null ? void 0 : e.toString().length) === a.codeLength && c("completed");
+      }
+    });
+    function x(t = a.modelValue) {
+      const e = /* @__PURE__ */ new Map();
+      for (const n of Array.from({ length: a.codeLength }, (o, u) => u))
+        if (t === void 0)
+          e.set(n + 1, void 0);
+        else {
+          const o = [...t.toString()];
+          e.set(n + 1, o[n]);
+        }
+      return e;
+    }
+    function z(t, e) {
+      var o;
+      const n = y((o = t.target) == null ? void 0 : o.value);
+      f.value = r.value.set(e, n), n && p(e);
+    }
+    function I(t) {
+      const e = [...t.values()].join("");
+      return a.type === "text" ? e : e && !Number.isNaN(Number(e)) ? Number(e) : void 0;
+    }
+    function y(t) {
+      var e;
+      return (e = a.acceptAlpha ? t.match(/^[\w.]$/i) : t.match(/\d+/g)) == null ? void 0 : e.toString();
+    }
+    function S(t, e) {
+      const n = r.value.get(e);
+      if (t.key === "Backspace" && !n) {
+        const o = e - 1 < 0 ? 0 : e - 1;
+        f.value = r.value.set(o, void 0), p(o - 1);
+      }
+    }
+    function w(t) {
+      var o;
+      const e = (o = t.clipboardData) == null ? void 0 : o.getData("text");
+      if (!e)
+        return;
+      const n = Array.from({ length: a.codeLength }, (u, s) => ({
+        index: s + 1,
+        value: [...e.toString()][s] ?? void 0
+      }));
+      for (const { index: u, value: s } of n) {
+        const h = s ? y(s) : void 0;
+        h && r.value.set(u, h);
+      }
+      setTimeout(() => {
+        const u = A(), s = u >= a.codeLength ? a.codeLength - 1 : u;
+        p(s, !1);
+      }, 0);
+    }
+    function A() {
+      return [...r.value.values()].filter(Boolean).length;
+    }
+    function p(t, e = !0) {
+      setTimeout(() => {
+        const n = i.value[t];
+        t + 1 > a.codeLength || !n || (n.focus(), e && n.select());
+      }, 0);
+    }
+    const B = m(() => a.error ? "!maz-border-danger" : a.success ? "!maz-border-success" : a.warning ? "!maz-border-warning" : ""), L = m(() => `var(--maz-color-${a.color})`);
+    return (t, e) => (g(), v("fieldset", {
+      class: V(["m-input-code", [l.size ? `--${l.size}` : void 0]]),
+      disabled: l.disabled,
+      style: M(l.style)
+    }, [
+      (g(!0), v(
+        P,
+        null,
+        j(l.codeLength, (n) => (g(), v(
+          "div",
+          {
+            key: n,
+            class: V(["input-wrapper", B.value])
+          },
+          [
+            q(" eslint-disable-next-line vuejs-accessibility/form-control-has-label "),
+            O("input", $({
+              ref_for: !0,
+              ref: (o) => {
+                i.value[n - 1] = o;
+              },
+              type: "text",
+              minlength: "1",
+              maxlength: "1",
+              inputmode: l.acceptAlpha ? "text" : "numeric",
+              pattern: l.acceptAlpha ? "[a-zA-Z0-9]{1}" : "[0-9]{1}",
+              autocomplete: "do-not-autofill",
+              required: l.required
+            }, t.$attrs, {
+              value: f.value.get(n),
+              onInput: (o) => z(o, n),
+              onKeydown: (o) => S(o, n),
+              onPaste: w
+            }), null, 16, E)
+          ],
+          2
+          /* CLASS */
+        ))),
+        128
+        /* KEYED_FRAGMENT */
+      ))
+    ], 14, D));
+  }
+}), K = (l, d) => {
+  const a = l.__vccOpts || l;
+  for (const [c, i] of d)
+    a[c] = i;
+  return a;
+}, W = /* @__PURE__ */ K(F, [["__scopeId", "data-v-4e98f6f7"]]);
+export {
+  W as default
+};

package/components/MazInputTags.mjs

@@ -1,4 +1,4 @@
-import { M as f } from "./chunks/MazInputTags-kDTfYnsu.mjs";
+import { M as f } from "./chunks/MazInputTags-NVpcRBJU.mjs";
 export {
   f as default
 };

package/components/MazTabsBar.mjs

@@ -17,7 +17,7 @@ const j = ["disabled", "onClick"], U = /* @__PURE__ */ $({
   },
   setup(a) {
     const { currentTab: t, updateCurrentTab: o } = R("maz-tabs");
-    function u(e) {
+    function c(e) {
       o(e), n.persistent && z(e);
     }
     const n = a, _ = b(), p = b([]);
@@ -27,7 +27,7 @@ const j = ["disabled", "onClick"], U = /* @__PURE__ */ $({
     }) {
       p.value[r] = e && "$el" in e ? e.$el : e;
     }
-    const c = y(
+    const u = y(
       () => n.items.map((e) => ({
         label: typeof e == "string" ? e : e.label,
         disabled: typeof e == "string" ? !1 : e.disabled ?? !1
@@ -46,8 +46,8 @@ const j = ["disabled", "onClick"], U = /* @__PURE__ */ $({
       return r ? {} : t.value === e ? "color: var(--maz-color-text)" : "color: var(--maz-color-muted)";
     }
     B(() => {
-      (t.value < 1 || t.value > c.value.length) && console.error(
-        `[maz-ui](MazTabsBar) The model-value should be between 1 and ${c.value.length}`
+      (t.value < 1 || t.value > u.value.length) && console.error(
+        `[maz-ui](MazTabsBar) The model-value should be between 1 and ${u.value.length}`
       );
     });
     function S() {
@@ -59,7 +59,7 @@ const j = ["disabled", "onClick"], U = /* @__PURE__ */ $({
       r.searchParams.set(n.queryParam, String(e)), window.history.replaceState({}, document.title, r.toString());
     }
     return M(async () => {
-      n.persistent && o(S() ?? t.value ?? 1);
+      n.persistent && o(S() || t.value || 1);
     }), (e, r) => (f(), d(
       "div",
       {
@@ -83,14 +83,14 @@ const j = ["disabled", "onClick"], U = /* @__PURE__ */ $({
         (f(!0), d(
           C,
           null,
-          q(c.value, ({ label: i, disabled: l }, s) => (f(), d("button", {
+          q(u.value, ({ label: i, disabled: l }, s) => (f(), d("button", {
             key: s,
             ref_for: !0,
             ref: (m) => g({ mazBtn: m, index: s }),
             class: v([{ "--active": E(t) === s, "--disabled": l }, "m-tabs-bar__item"]),
             disabled: l,
             style: h(w(s + 1, l)),
-            onClick: (m) => l ? void 0 : u(s + 1)
+            onClick: (m) => l ? void 0 : c(s + 1)
           }, L(i), 15, j))),
           128
           /* KEYED_FRAGMENT */
@@ -102,10 +102,10 @@ const j = ["disabled", "onClick"], U = /* @__PURE__ */ $({
   }
 }), V = (a, t) => {
   const o = a.__vccOpts || a;
-  for (const [u, n] of t)
-    o[u] = n;
+  for (const [c, n] of t)
+    o[c] = n;
   return o;
-}, H = /* @__PURE__ */ V(U, [["__scopeId", "data-v-3fd30089"]]);
+}, H = /* @__PURE__ */ V(U, [["__scopeId", "data-v-25e7a5dc"]]);
 export {
   H as default
 };