maz-ui 3.47.2-beta.2 → 3.47.2-beta.21

package/components/chunks/MazInput-C9Qh4Gt3.mjs

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