maz-ui 3.47.2-beta.0 → 3.47.2-beta.11

package/components/chunks/MazInput-HLPtw5QK.mjs

@@ -0,0 +1,313 @@
+import { defineComponent as W, defineAsyncComponent as f, ref as h, onMounted as X, computed as i, useSlots as Y, openBlock as o, createElementBlock as s, normalizeClass as p, normalizeStyle as Z, unref as l, toDisplayString as g, createCommentVNode as a, createElementVNode as k, renderSlot as I, createBlock as u, resolveDynamicComponent as S, withDirectives as x, mergeProps as _, toHandlers as ee, vModelDynamic as te, createTextVNode as oe, withModifiers as ae, withCtx as L, createVNode as M } from "vue";
+import { u as ne, _ as le } from "./MazChecklist-DaozZlNb.mjs";
+import '../assets/MazInput.css';function re(b, y) {
+  let t;
+  return function(...r) {
+    clearTimeout(t), t = setTimeout(() => {
+      b.apply(this, r);
+    }, y);
+  };
+}
+const ie = ["for"], se = {
+  key: 0,
+  class: "m-input-wrapper-left"
+}, ue = ["id", "type", "name", "inputmode", "placeholder", "aria-label", "disabled", "readonly", "required"], de = { key: 0 }, fe = {
+  key: 1,
+  class: "m-input-wrapper-right"
+}, pe = /* @__PURE__ */ W({
+  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 },
+    topLabel: {},
+    assistiveText: {},
+    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(b, { emit: y }) {
+    const t = b, r = y, w = f(() => import("./MazBtn-BSgCMRt0.mjs")), B = f(() => import("./MazIcon-_hN-Kivn.mjs")), T = f(() => import("./eye-slash-BoO00xzs.mjs")), q = f(() => import("./eye-f8zAUc30.mjs")), D = f(() => import("./MazChecklist-DaozZlNb.mjs").then((e) => e.c)), c = h(!1), d = h(!1), $ = h(), C = ne({
+      componentName: "MazInput",
+      providedId: t.id
+    });
+    X(() => {
+      var e;
+      t.autoFocus && ((e = $.value) == null || e.focus());
+    });
+    const V = i(() => t.type === "password"), E = i(() => c.value ? "text" : t.type), N = i(() => {
+      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 (d.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";
+      }
+    }), z = Y(), P = i(() => {
+      const { required: e, placeholder: n } = t;
+      if (n)
+        return e ? `${n} *` : n;
+    }), A = i(() => m.value !== void 0 && m.value !== ""), F = re(
+      (e) => {
+        r("update:model-value", e);
+      },
+      typeof t.debounce == "number" ? t.debounce : t.debounceDelay ?? 500
+    );
+    function O(e) {
+      if (t.debounce)
+        return F(e);
+      r("update:model-value", e);
+    }
+    const m = i({
+      get: () => t.modelValue,
+      set: (e) => O(e)
+    }), R = i(() => (!!t.label || !!t.hint) && (d.value || !!A.value || !!t.placeholder || ["date", "month", "week"].includes(t.type))), U = i(() => !!t.label || !!t.hint);
+    function j() {
+      return !!z["right-icon"] || V.value || !!z["valid-button"] || t.validButton || !!t.rightIcon;
+    }
+    function H() {
+      return !!z["left-icon"] || !!t.leftIcon;
+    }
+    function G(e) {
+      r("focus", e), d.value = !0;
+    }
+    function J(e) {
+      r("blur", e), d.value = !1;
+    }
+    function K(e) {
+      return r("change", e);
+    }
+    function Q(e) {
+      return r("input", e);
+    }
+    return (e, n) => (o(), s(
+      "div",
+      {
+        class: p(["m-input", [
+          {
+            "--is-focused": d.value || e.borderActive,
+            "--should-up": R.value,
+            "--has-label": U.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}`
+        ]]),
+        style: Z(e.style)
+      },
+      [
+        e.topLabel ? (o(), s("label", {
+          key: 0,
+          for: l(C),
+          class: "m-input-top-label"
+        }, g(e.topLabel), 9, ie)) : a("v-if", !0),
+        k(
+          "div",
+          {
+            class: p(["m-input-wrapper", [
+              e.inputClasses,
+              N.value,
+              e.roundedSize ? `--rounded-${e.roundedSize}` : { "maz-rounded": !e.noRadius },
+              { "--block": e.block }
+            ]])
+          },
+          [
+            H() ? (o(), s("div", se, [
+              e.$slots["left-icon"] || e.leftIcon ? I(e.$slots, "left-icon", { key: 0 }, () => [
+                typeof e.leftIcon == "string" ? (o(), u(l(B), {
+                  key: 0,
+                  name: e.leftIcon,
+                  class: "maz-text-xl maz-text-muted"
+                }, null, 8, ["name"])) : e.leftIcon ? (o(), u(S(e.leftIcon), {
+                  key: 1,
+                  class: "maz-text-xl maz-text-muted"
+                })) : a("v-if", !0)
+              ], !0) : a("v-if", !0)
+            ])) : a("v-if", !0),
+            k(
+              "div",
+              {
+                class: p(["m-input-wrapper-input", [`--${e.size}`, { "--top-label": !!e.topLabel }]])
+              },
+              [
+                x(k("input", _({
+                  id: l(C),
+                  ref_key: "input",
+                  ref: $,
+                  "onUpdate:modelValue": n[0] || (n[0] = (v) => m.value = v),
+                  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"
+                }, ee({
+                  blur: J,
+                  focus: G,
+                  change: K,
+                  input: Q
+                }, !0), {
+                  onClick: n[1] || (n[1] = (v) => e.$emit("click", v))
+                }), null, 16, ue), [
+                  [te, m.value]
+                ]),
+                e.label || e.hint ? (o(), s(
+                  "span",
+                  {
+                    key: 0,
+                    class: p(["m-input-label", [
+                      {
+                        "maz-text-danger-600": e.error,
+                        "maz-text-success-600": e.success,
+                        "maz-text-warning-600": e.warning
+                      }
+                    ]])
+                  },
+                  [
+                    oe(
+                      g(e.hint || e.label) + " ",
+                      1
+                      /* TEXT */
+                    ),
+                    e.required ? (o(), s("sup", de, "*")) : a("v-if", !0)
+                  ],
+                  2
+                  /* CLASS */
+                )) : a("v-if", !0)
+              ],
+              2
+              /* CLASS */
+            ),
+            j() ? (o(), s("div", fe, [
+              e.$slots["right-icon"] || e.rightIcon ? I(e.$slots, "right-icon", { key: 0 }, () => [
+                typeof e.rightIcon == "string" ? (o(), u(l(B), {
+                  key: 0,
+                  name: e.rightIcon,
+                  class: "maz-text-xl maz-text-muted"
+                }, null, 8, ["name"])) : e.rightIcon ? (o(), u(S(e.rightIcon), {
+                  key: 1,
+                  class: "maz-text-xl maz-text-muted"
+                })) : a("v-if", !0)
+              ], !0) : a("v-if", !0),
+              V.value ? (o(), u(l(w), {
+                key: 1,
+                color: "transparent",
+                tabindex: "-1",
+                size: "mini",
+                onClick: n[2] || (n[2] = ae((v) => c.value = !c.value, ["stop"]))
+              }, {
+                default: L(() => [
+                  c.value ? (o(), u(l(T), {
+                    key: 0,
+                    class: "maz-text-xl maz-text-muted"
+                  })) : (o(), u(l(q), {
+                    key: 1,
+                    class: "maz-text-xl maz-text-muted"
+                  }))
+                ]),
+                _: 1
+                /* STABLE */
+              })) : a("v-if", !0),
+              e.$slots["valid-button"] || e.validButton ? I(e.$slots, "valid-button", { key: 2 }, () => [
+                M(l(w), {
+                  color: "transparent",
+                  disabled: e.disabled,
+                  tabindex: "-1",
+                  loading: e.validButtonLoading,
+                  class: "m-input-valid-button",
+                  size: "mini",
+                  type: "submit"
+                }, {
+                  default: L(() => [
+                    M(l(D), { class: "maz-text-2xl maz-text-normal" })
+                  ]),
+                  _: 1
+                  /* STABLE */
+                }, 8, ["disabled", "loading"])
+              ], !0) : a("v-if", !0)
+            ])) : a("v-if", !0)
+          ],
+          2
+          /* CLASS */
+        ),
+        e.assistiveText ? (o(), s(
+          "div",
+          {
+            key: 1,
+            class: p(["m-input-bottom-text", [
+              {
+                "maz-text-danger-600": e.error,
+                "maz-text-success-600": e.success,
+                "maz-text-warning-600": e.warning,
+                "maz-text-muted": !e.error && !e.success && !e.warning
+              }
+            ]])
+          },
+          g(e.assistiveText),
+          3
+          /* TEXT, CLASS */
+        )) : a("v-if", !0)
+      ],
+      6
+      /* CLASS, STYLE */
+    ));
+  }
+}), ve = /* @__PURE__ */ le(pe, [["__scopeId", "data-v-2cfe0ca2"]]);
+export {
+  ve as default
+};