maz-ui 3.46.1-beta.4 → 3.46.1-beta.6

package/components/chunks/MazInput-AcA93-8Q.mjs

@@ -0,0 +1,291 @@
+import { defineComponent as Q, defineAsyncComponent as d, ref as h, onMounted as W, computed as r, useSlots as X, openBlock as n, createElementBlock as f, normalizeClass as z, normalizeStyle as Y, createElementVNode as g, createCommentVNode as o, renderSlot as k, createBlock as u, unref as i, resolveDynamicComponent as C, withDirectives as Z, mergeProps as x, toHandlers as _, vModelDynamic as ee, createTextVNode as te, toDisplayString as oe, withModifiers as ne, withCtx as V, createVNode as S } from "vue";
+import { u as ae } from "./useInstanceUniqId-DW9jO1Sz.mjs";
+import { _ as le } from "./MazTable-QwG-Kh88.mjs";
+import '../assets/MazInput.css';function re(v, y) {
+  let t;
+  return function(...l) {
+    clearTimeout(t), t = setTimeout(() => {
+      v.apply(this, l);
+    }, y);
+  };
+}
+const ie = {
+  key: 0,
+  class: "m-input-wrapper-left"
+}, ue = { class: "m-input-wrapper-input" }, se = ["id", "type", "name", "inputmode", "placeholder", "aria-label", "disabled", "readonly", "required"], de = { key: 0 }, fe = {
+  key: 1,
+  class: "m-input-wrapper-right"
+}, ce = /* @__PURE__ */ Q({
+  inheritAttrs: !1,
+  __name: "MazInput",
+  props: {
+    style: { default: void 0 },
+    class: { default: void 0 },
+    modelValue: { default: void 0 },
+    placeholder: { default: void 0 },
+    label: { default: void 0 },
+    name: { default: void 0 },
+    color: { default: "primary" },
+    type: { default: "text" },
+    required: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    readonly: { type: Boolean, default: !1 },
+    id: { default: void 0 },
+    error: { type: Boolean, default: !1 },
+    success: { type: Boolean, default: !1 },
+    warning: { type: Boolean, default: !1 },
+    hint: { default: void 0 },
+    inputClasses: { default: void 0 },
+    noBorder: { type: Boolean, default: !1 },
+    noRadius: { type: Boolean, default: !1 },
+    inputmode: { default: "text" },
+    size: { default: "md" },
+    debounce: { type: [Boolean, Number], default: !1 },
+    debounceDelay: { default: 500 },
+    validButton: { type: Boolean, default: !1 },
+    validButtonLoading: { type: Boolean, default: !1 },
+    autoFocus: { type: Boolean, default: !1 },
+    borderActive: { type: Boolean, default: !1 },
+    leftIcon: { type: [String, Function, Object], default: void 0 },
+    rightIcon: { type: [String, Function, Object], default: void 0 },
+    roundedSize: { default: void 0 },
+    block: { type: Boolean }
+  },
+  emits: ["update:model-value", "focus", "blur", "click", "change", "input"],
+  setup(v, { emit: y }) {
+    const t = v, l = y, I = d(() => import("./MazBtn-BXvObcWn.mjs")), B = d(() => import("./MazIcon-DjMuw8Bz.mjs")), M = d(() => import("./eye-slash-BoO00xzs.mjs")), q = d(() => import("./eye-f8zAUc30.mjs")), T = d(() => import("./check-C9Q_W85g.mjs")), c = h(!1), s = h(!1), w = h(), D = ae({
+      componentName: "MazInput",
+      providedId: t.id
+    });
+    W(() => {
+      var e;
+      t.autoFocus && ((e = w.value) == null || e.focus());
+    });
+    const $ = r(() => t.type === "password"), E = r(() => c.value ? "text" : t.type), N = r(() => {
+      if (!t.noBorder) {
+        if (t.error)
+          return "maz-border-danger";
+        if (t.success)
+          return "maz-border-success";
+        if (t.warning)
+          return "maz-border-warning";
+        if (s.value || t.borderActive) {
+          if (t.color === "black")
+            return "maz-border-black";
+          if (t.color === "danger")
+            return "maz-border-danger";
+          if (t.color === "info")
+            return "maz-border-info";
+          if (t.color === "primary")
+            return "maz-border-primary";
+          if (t.color === "secondary")
+            return "maz-border-secondary";
+          if (t.color === "success")
+            return "maz-border-success";
+          if (t.color === "warning")
+            return "maz-border-warning";
+          if (t.color === "white")
+            return "maz-border-white";
+        }
+        return "--default-border";
+      }
+    }), b = X(), P = r(() => {
+      const { required: e, placeholder: a } = t;
+      if (a)
+        return e ? `${a} *` : a;
+    }), A = r(() => p.value !== void 0 && p.value !== ""), F = re(
+      (e) => {
+        l("update:model-value", e);
+      },
+      typeof t.debounce == "number" ? t.debounce : t.debounceDelay ?? 500
+    );
+    function L(e) {
+      if (t.debounce)
+        return F(e);
+      l("update:model-value", e);
+    }
+    const p = r({
+      get: () => t.modelValue,
+      set: (e) => L(e)
+    }), R = r(() => (!!t.label || !!t.hint) && (s.value || !!A.value || !!t.placeholder || ["date", "month", "week"].includes(t.type))), O = r(() => !!t.label || !!t.hint);
+    function U() {
+      return !!b["right-icon"] || $.value || !!b["valid-button"] || t.validButton || !!t.rightIcon;
+    }
+    function j() {
+      return !!b["left-icon"] || !!t.leftIcon;
+    }
+    function H(e) {
+      l("focus", e), s.value = !0;
+    }
+    function G(e) {
+      l("blur", e), s.value = !1;
+    }
+    function J(e) {
+      return l("change", e);
+    }
+    function K(e) {
+      return l("input", e);
+    }
+    return (e, a) => (n(), f(
+      "div",
+      {
+        class: z(["m-input", [
+          {
+            "--is-focused": s.value || e.borderActive,
+            "--should-up": R.value,
+            "--has-label": O.value,
+            "--is-disabled": e.disabled,
+            "--is-readonly": e.readonly,
+            "--has-z-2": e.error || e.warning || e.success,
+            "--has-state": e.error || e.warning || e.success,
+            "--block": e.block
+          },
+          t.class,
+          `--${e.color}`,
+          `--${e.size}`
+        ]]),
+        style: Y(e.style)
+      },
+      [
+        g(
+          "div",
+          {
+            class: z(["m-input-wrapper", [
+              e.inputClasses,
+              N.value,
+              e.roundedSize ? `--rounded-${e.roundedSize}` : { "maz-rounded": !e.noRadius }
+            ]])
+          },
+          [
+            j() ? (n(), f("div", ie, [
+              o(`
+          @slot left-icon - The icon to display on the left of the input
+        `),
+              e.$slots["left-icon"] || e.leftIcon ? k(e.$slots, "left-icon", { key: 0 }, () => [
+                typeof e.leftIcon == "string" ? (n(), u(i(B), {
+                  key: 0,
+                  name: e.leftIcon,
+                  class: "maz-text-xl maz-text-muted"
+                }, null, 8, ["name"])) : e.leftIcon ? (n(), u(C(e.leftIcon), {
+                  key: 1,
+                  class: "maz-text-xl maz-text-muted"
+                })) : o("v-if", !0)
+              ], !0) : o("v-if", !0)
+            ])) : o("v-if", !0),
+            g("div", ue, [
+              Z(g("input", x({
+                id: i(D),
+                ref_key: "input",
+                ref: w,
+                "onUpdate:modelValue": a[0] || (a[0] = (m) => p.value = m),
+                type: E.value,
+                name: e.name
+              }, e.$attrs, {
+                inputmode: e.inputmode,
+                placeholder: P.value,
+                "aria-label": e.label || e.placeholder,
+                disabled: e.disabled,
+                readonly: e.readonly,
+                required: e.required,
+                class: "m-input-input"
+              }, _({
+                blur: G,
+                focus: H,
+                change: J,
+                input: K
+              }, !0), {
+                onClick: a[1] || (a[1] = (m) => e.$emit("click", m))
+              }), null, 16, se), [
+                [ee, p.value]
+              ]),
+              e.label || e.hint ? (n(), f(
+                "span",
+                {
+                  key: 0,
+                  class: z(["m-input-label", [
+                    {
+                      "maz-text-danger-600": e.error,
+                      "maz-text-success-600": e.success,
+                      "maz-text-warning-600": e.warning
+                    }
+                  ]])
+                },
+                [
+                  te(
+                    oe(e.hint || e.label) + " ",
+                    1
+                    /* TEXT */
+                  ),
+                  e.required ? (n(), f("sup", de, "*")) : o("v-if", !0)
+                ],
+                2
+                /* CLASS */
+              )) : o("v-if", !0)
+            ]),
+            U() ? (n(), f("div", fe, [
+              o(`
+          @slot right-icon - The icon to display on the right of the input
+        `),
+              e.$slots["right-icon"] || e.rightIcon ? k(e.$slots, "right-icon", { key: 0 }, () => [
+                typeof e.rightIcon == "string" ? (n(), u(i(B), {
+                  key: 0,
+                  name: e.rightIcon,
+                  class: "maz-text-xl maz-text-muted"
+                }, null, 8, ["name"])) : e.rightIcon ? (n(), u(C(e.rightIcon), {
+                  key: 1,
+                  class: "maz-text-xl maz-text-muted"
+                })) : o("v-if", !0)
+              ], !0) : o("v-if", !0),
+              $.value ? (n(), u(i(I), {
+                key: 1,
+                color: "transparent",
+                tabindex: "-1",
+                size: "mini",
+                onClick: a[2] || (a[2] = ne((m) => c.value = !c.value, ["stop"]))
+              }, {
+                default: V(() => [
+                  c.value ? (n(), u(i(M), {
+                    key: 0,
+                    class: "maz-text-xl maz-text-muted"
+                  })) : (n(), u(i(q), {
+                    key: 1,
+                    class: "maz-text-xl maz-text-muted"
+                  }))
+                ]),
+                _: 1
+                /* STABLE */
+              })) : o("v-if", !0),
+              o(`
+          @slot valid-button - Replace the valid button by your own
+        `),
+              e.$slots["valid-button"] || e.validButton ? k(e.$slots, "valid-button", { key: 2 }, () => [
+                S(i(I), {
+                  color: "transparent",
+                  disabled: e.disabled,
+                  tabindex: "-1",
+                  loading: e.validButtonLoading,
+                  class: "m-input-valid-button",
+                  size: "mini",
+                  type: "submit"
+                }, {
+                  default: V(() => [
+                    S(i(T), { class: "maz-text-2xl maz-text-normal" })
+                  ]),
+                  _: 1
+                  /* STABLE */
+                }, 8, ["disabled", "loading"])
+              ], !0) : o("v-if", !0)
+            ])) : o("v-if", !0)
+          ],
+          2
+          /* CLASS */
+        )
+      ],
+      6
+      /* CLASS, STYLE */
+    ));
+  }
+}), ye = /* @__PURE__ */ le(ce, [["__scopeId", "data-v-b3e1e126"]]);
+export {
+  ye as default
+};

package/components/chunks/{MazInput-fbdOvhry.mjs → MazInput-Dnwxraz4.mjs}

@@ -58,7 +58,7 @@ const ie = {
   },
   emits: ["update:model-value", "focus", "blur", "click", "change", "input"],
   setup(i, { emit: u }) {
-    const t = i, a = u, m = f(() => import("./MazBtn-BkT-9nbu.mjs")), B = f(() => import("./MazIcon-BDGxCy9M.mjs")), M = f(() => import("./eye-slash-BoO00xzs.mjs")), q = f(() => import("./eye-f8zAUc30.mjs")), T = f(() => import("./check-BmubdHc_.mjs")), v = z(!1), c = z(!1), w = z(), D = le({
+    const t = i, a = u, m = f(() => import("./MazBtn-C4xZC-A2.mjs")), B = f(() => import("./MazIcon-BbvBov5G.mjs")), M = f(() => import("./eye-slash-BoO00xzs.mjs")), q = f(() => import("./eye-f8zAUc30.mjs")), T = f(() => import("./check-BmubdHc_.mjs")), v = z(!1), c = z(!1), w = z(), D = le({
       componentName: "MazInput",
       providedId: t.id
     });