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

package/components/chunks/MazInputNumber-DgjOMiOt.mjs

@@ -0,0 +1,600 @@
+import { openBlock as a, createElementBlock as v, createElementVNode as M, defineComponent as L, defineAsyncComponent as I, useAttrs as ne, computed as i, createBlock as m, resolveDynamicComponent as C, normalizeClass as f, normalizeStyle as A, withCtx as N, renderSlot as w, unref as d, createCommentVNode as s, createVNode as S, useId as oe, ref as P, onMounted as le, useSlots as ae, toDisplayString as E, withDirectives as re, mergeProps as U, toHandlers as ie, vModelDynamic as se, createTextVNode as ue, withModifiers as D, withKeys as q } from "vue";
+import '../assets/MazInputNumber.css';function R(p, l) {
+  let t;
+  return function(...u) {
+    clearTimeout(t), t = setTimeout(() => {
+      p.apply(this, u);
+    }, l);
+  };
+}
+const de = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  fill: "none",
+  viewBox: "0 0 24 24"
+};
+function me(p, l) {
+  return a(), v("svg", de, l[0] || (l[0] = [
+    M(
+      "path",
+      {
+        stroke: "currentColor",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        "stroke-width": "1.5",
+        d: "M5 12h14"
+      },
+      null,
+      -1
+      /* HOISTED */
+    )
+  ]));
+}
+const pe = { render: me }, fe = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  fill: "none",
+  viewBox: "0 0 24 24"
+};
+function ce(p, l) {
+  return a(), v("svg", fe, l[0] || (l[0] = [
+    M(
+      "path",
+      {
+        stroke: "currentColor",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        "stroke-width": "1.5",
+        d: "M12 4.5v15m7.5-7.5h-15"
+      },
+      null,
+      -1
+      /* HOISTED */
+    )
+  ]));
+}
+const ve = { render: ce }, be = {
+  key: 0,
+  class: "m-btn-loader-container"
+}, ye = /* @__PURE__ */ L({
+  __name: "MazBtn",
+  props: {
+    variant: { default: "button" },
+    size: { default: "md" },
+    color: { default: "primary" },
+    type: { default: "button" },
+    rounded: { type: Boolean },
+    roundedSize: { default: "lg" },
+    noRounded: { type: Boolean },
+    outline: { type: Boolean },
+    pastel: { type: Boolean },
+    block: { type: Boolean },
+    noUnderline: { type: Boolean },
+    loading: { type: Boolean },
+    disabled: { type: Boolean },
+    fab: { type: Boolean },
+    icon: { type: [String, Function, Object], default: void 0 },
+    leftIcon: { type: [String, Function, Object], default: void 0 },
+    rightIcon: { type: [String, Function, Object], default: void 0 },
+    noPadding: { type: Boolean },
+    noElevation: { type: Boolean },
+    justify: { default: "center" }
+  },
+  setup(p) {
+    const l = p, t = I(() => import("./MazSpinner-B5JChIrj.mjs")), u = I(() => import("./MazIcon-_hN-Kivn.mjs")), { href: r, to: $ } = ne(), h = i(() => r ? "a" : $ ? "router-link" : "button"), V = i(() => l.pastel ? `--${l.color}-pastel` : l.outline ? `--${l.color}-outline` : `--${l.color}`), g = i(
+      () => (l.loading || l.disabled) && h.value === "button"
+    ), z = i(() => g.value ? "--cursor-default" : "--cursor-pointer"), b = i(() => `--is-${l.variant}`), k = i(() => l.loading && l.variant === "button"), B = i(() => h.value === "button" ? l.type : void 0), n = i(() => l.size === "xl" ? "maz-text-3xl" : l.size === "lg" ? "maz-text-2xl" : l.size === "md" ? "maz-text-xl" : l.size === "sm" ? "maz-text-lg" : l.size === "xs" ? "maz-text-base" : l.size === "mini" ? "maz-text-sm" : "maz-text-xl");
+    return (o, c) => (a(), m(C(h.value), {
+      disabled: g.value || void 0,
+      class: f(["m-btn", [
+        `--${o.size}`,
+        !o.fab && !o.rounded && o.roundedSize && `--rounded-${o.roundedSize}`,
+        V.value,
+        z.value,
+        b.value,
+        {
+          "--block": o.block,
+          "--no-underline": o.noUnderline,
+          "--fab": o.fab,
+          "--loading": o.loading,
+          "--disabled": g.value,
+          "--rounded": o.rounded,
+          "--no-rounded": o.noRounded,
+          "--no-padding": o.noPadding,
+          "--no-elevation": o.noElevation
+        }
+      ]]),
+      style: A([`--justify: ${o.justify}`]),
+      type: B.value
+    }, {
+      default: N(() => [
+        w(o.$slots, "left-icon", {}, () => [
+          typeof o.leftIcon == "string" ? (a(), m(d(u), {
+            key: 0,
+            name: o.leftIcon,
+            class: f([n.value])
+          }, null, 8, ["name", "class"])) : o.leftIcon ? (a(), m(C(o.leftIcon), {
+            key: 1,
+            class: f([n.value])
+          }, null, 8, ["class"])) : s("v-if", !0)
+        ], !0),
+        w(o.$slots, "icon", {}, () => [
+          typeof o.icon == "string" ? (a(), m(d(u), {
+            key: 0,
+            name: o.icon,
+            class: f([n.value])
+          }, null, 8, ["name", "class"])) : o.icon ? (a(), m(C(o.icon), {
+            key: 1,
+            class: f([n.value])
+          }, null, 8, ["class"])) : s("v-if", !0)
+        ], !0),
+        w(o.$slots, "default", {}, void 0, !0),
+        w(o.$slots, "right-icon", {}, () => [
+          typeof o.rightIcon == "string" ? (a(), m(d(u), {
+            key: 0,
+            name: o.rightIcon,
+            class: f([n.value])
+          }, null, 8, ["name", "class"])) : o.rightIcon ? (a(), m(C(o.rightIcon), {
+            key: 1,
+            class: f([n.value])
+          }, null, 8, ["class"])) : s("v-if", !0)
+        ], !0),
+        k.value ? (a(), v("div", be, [
+          S(d(t), {
+            size: "2em",
+            color: o.color
+          }, null, 8, ["color"])
+        ])) : s("v-if", !0)
+      ]),
+      _: 3
+      /* FORWARDED */
+    }, 8, ["disabled", "class", "style", "type"]));
+  }
+}), K = (p, l) => {
+  const t = p.__vccOpts || p;
+  for (const [u, r] of l)
+    t[u] = r;
+  return t;
+}, O = /* @__PURE__ */ K(ye, [["__scopeId", "data-v-bee684ff"]]), ge = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: O
+}, Symbol.toStringTag, { value: "Module" }));
+function ze({
+  componentName: p,
+  providedId: l
+}) {
+  return i(() => l ?? `${p}-${oe().replace(/:/g, "")}`);
+}
+const he = ["for"], ke = {
+  key: 0,
+  class: "m-input-wrapper-left"
+}, Be = ["id", "name", "placeholder", "aria-label", "type", "inputmode", "disabled", "readonly", "autocomplete", "required"], Ie = { key: 0 }, we = {
+  key: 1,
+  class: "m-input-wrapper-right"
+}, $e = /* @__PURE__ */ L({
+  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(p, { emit: l }) {
+    const t = p, u = l, r = I(() => Promise.resolve().then(() => ge)), $ = I(() => import("./MazIcon-_hN-Kivn.mjs")), h = I(() => import("./eye-slash-BoO00xzs.mjs")), V = I(() => import("./eye-f8zAUc30.mjs")), g = I(() => import("./check-BmubdHc_.mjs")), z = P(!1), b = P(!1), k = P(), B = ze({
+      componentName: "MazInput",
+      providedId: t.id
+    });
+    le(() => {
+      var e;
+      t.autoFocus && ((e = k.value) == null || e.focus());
+    });
+    const n = i(() => t.type === "password"), o = i(() => z.value ? "text" : t.type), c = 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 (b.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";
+      }
+    }), j = ae(), Y = i(() => {
+      const { required: e, placeholder: y } = t;
+      if (y)
+        return e ? `${y} *` : y;
+    }), G = i(() => T.value !== void 0 && T.value !== ""), H = R(
+      (e) => {
+        u("update:model-value", e);
+      },
+      typeof t.debounce == "number" ? t.debounce : t.debounceDelay ?? 500
+    );
+    function J(e) {
+      if (t.debounce)
+        return H(e);
+      u("update:model-value", e);
+    }
+    const T = i({
+      get: () => t.modelValue,
+      set: (e) => J(e)
+    }), Q = i(() => (!!t.label || !!t.hint) && (b.value || !!G.value || !!t.placeholder || ["date", "month", "week"].includes(t.type))), W = i(() => !!t.label || !!t.hint);
+    function X() {
+      return !!j["right-icon"] || n.value || !!j["valid-button"] || t.validButton || !!t.rightIcon;
+    }
+    function Z() {
+      return !!j["left-icon"] || !!t.leftIcon;
+    }
+    function x(e) {
+      u("focus", e), b.value = !0;
+    }
+    function _(e) {
+      u("blur", e), b.value = !1;
+    }
+    function ee(e) {
+      return u("change", e);
+    }
+    function te(e) {
+      return u("input", e);
+    }
+    return (e, y) => (a(), v(
+      "div",
+      {
+        class: f(["m-input", [
+          {
+            "--is-focused": b.value || e.borderActive,
+            "--should-up": Q.value,
+            "--has-label": W.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: A(e.style)
+      },
+      [
+        e.topLabel ? (a(), v("label", {
+          key: 0,
+          for: d(B),
+          class: "m-input-top-label"
+        }, E(e.topLabel), 9, he)) : s("v-if", !0),
+        M(
+          "div",
+          {
+            class: f(["m-input-wrapper", [
+              e.inputClasses,
+              c.value,
+              e.roundedSize ? `--rounded-${e.roundedSize}` : { "maz-rounded": !e.noRadius },
+              { "--block": e.block }
+            ]])
+          },
+          [
+            Z() ? (a(), v("div", ke, [
+              e.$slots["left-icon"] || e.leftIcon ? w(e.$slots, "left-icon", { key: 0 }, () => [
+                typeof e.leftIcon == "string" ? (a(), m(d($), {
+                  key: 0,
+                  name: e.leftIcon,
+                  class: "maz-text-xl maz-text-muted"
+                }, null, 8, ["name"])) : e.leftIcon ? (a(), m(C(e.leftIcon), {
+                  key: 1,
+                  class: "maz-text-xl maz-text-muted"
+                })) : s("v-if", !0)
+              ], !0) : s("v-if", !0)
+            ])) : s("v-if", !0),
+            M(
+              "div",
+              {
+                class: f(["m-input-wrapper-input", [`--${e.size}`, { "--top-label": !!e.topLabel }]])
+              },
+              [
+                re(M("input", U({ id: d(B) }, e.$attrs, {
+                  ref_key: "input",
+                  ref: k,
+                  "onUpdate:modelValue": y[0] || (y[0] = (F) => T.value = F),
+                  name: e.name,
+                  placeholder: Y.value,
+                  "aria-label": e.label || e.placeholder,
+                  type: o.value,
+                  inputmode: e.inputmode,
+                  disabled: e.disabled,
+                  readonly: e.readonly,
+                  autocomplete: e.autocomplete,
+                  required: e.required,
+                  class: "m-input-input"
+                }, ie({
+                  blur: _,
+                  focus: x,
+                  change: ee,
+                  input: te
+                }, !0), {
+                  onClick: y[1] || (y[1] = (F) => e.$emit("click", F))
+                }), null, 16, Be), [
+                  [se, T.value]
+                ]),
+                e.label || e.hint ? (a(), v(
+                  "span",
+                  {
+                    key: 0,
+                    class: f(["m-input-label", [
+                      {
+                        "maz-text-danger-600": e.error,
+                        "maz-text-success-600": e.success,
+                        "maz-text-warning-600": e.warning
+                      }
+                    ]])
+                  },
+                  [
+                    ue(
+                      E(e.hint || e.label) + " ",
+                      1
+                      /* TEXT */
+                    ),
+                    e.required ? (a(), v("sup", Ie, "*")) : s("v-if", !0)
+                  ],
+                  2
+                  /* CLASS */
+                )) : s("v-if", !0)
+              ],
+              2
+              /* CLASS */
+            ),
+            X() ? (a(), v("div", we, [
+              e.$slots["right-icon"] || e.rightIcon ? w(e.$slots, "right-icon", { key: 0 }, () => [
+                typeof e.rightIcon == "string" ? (a(), m(d($), {
+                  key: 0,
+                  name: e.rightIcon,
+                  class: "maz-text-xl maz-text-muted"
+                }, null, 8, ["name"])) : e.rightIcon ? (a(), m(C(e.rightIcon), {
+                  key: 1,
+                  class: "maz-text-xl maz-text-muted"
+                })) : s("v-if", !0)
+              ], !0) : s("v-if", !0),
+              n.value ? (a(), m(d(r), {
+                key: 1,
+                color: "transparent",
+                tabindex: "-1",
+                size: "mini",
+                onClick: y[2] || (y[2] = D((F) => z.value = !z.value, ["stop"]))
+              }, {
+                default: N(() => [
+                  z.value ? (a(), m(d(h), {
+                    key: 0,
+                    class: "maz-text-xl maz-text-muted"
+                  })) : (a(), m(d(V), {
+                    key: 1,
+                    class: "maz-text-xl maz-text-muted"
+                  }))
+                ]),
+                _: 1
+                /* STABLE */
+              })) : s("v-if", !0),
+              e.$slots["valid-button"] || e.validButton ? w(e.$slots, "valid-button", { key: 2 }, () => [
+                S(d(r), {
+                  color: "transparent",
+                  disabled: e.disabled,
+                  tabindex: "-1",
+                  loading: e.validButtonLoading,
+                  class: "m-input-valid-button",
+                  size: "mini",
+                  type: "submit"
+                }, {
+                  default: N(() => [
+                    S(d(g), { class: "maz-text-2xl maz-text-normal" })
+                  ]),
+                  _: 1
+                  /* STABLE */
+                }, 8, ["disabled", "loading"])
+              ], !0) : s("v-if", !0)
+            ])) : s("v-if", !0)
+          ],
+          2
+          /* CLASS */
+        ),
+        e.assistiveText ? (a(), v(
+          "div",
+          {
+            key: 1,
+            class: f(["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
+              }
+            ]])
+          },
+          E(e.assistiveText),
+          3
+          /* TEXT, CLASS */
+        )) : s("v-if", !0)
+      ],
+      6
+      /* CLASS, STYLE */
+    ));
+  }
+}), Ce = /* @__PURE__ */ K($e, [["__scopeId", "data-v-1443c13f"]]), Ve = /* @__PURE__ */ L({
+  inheritAttrs: !1,
+  __name: "MazInputNumber",
+  props: {
+    style: { default: void 0 },
+    class: { default: void 0 },
+    modelValue: { default: void 0 },
+    disabled: { type: Boolean, default: !1 },
+    max: { default: Number.POSITIVE_INFINITY },
+    min: { default: Number.NEGATIVE_INFINITY },
+    step: { default: 1 },
+    size: { default: "md" },
+    noButtons: { type: Boolean, default: !1 },
+    textCenter: { type: Boolean, default: !0 },
+    inputmode: { default: "numeric" },
+    block: { type: Boolean },
+    error: { type: Boolean },
+    hint: {},
+    success: { type: Boolean },
+    warning: { type: Boolean }
+  },
+  emits: ["update:model-value", "focus", "blur", "click", "change"],
+  setup(p, { emit: l }) {
+    const t = p, u = l, r = i({
+      get: () => t.modelValue,
+      set: (n) => g(n)
+    });
+    function $(n) {
+      return Math.round(n / t.step) * t.step;
+    }
+    function h(n) {
+      if (typeof n == "number")
+        return n <= t.min ? t.min : n >= t.max ? t.max : $(n);
+    }
+    const V = R((n) => g(n), 300);
+    function g(n) {
+      n = h(n), r.value !== n && u("update:model-value", n);
+    }
+    g(r.value);
+    const z = i(() => t.modelValue && t.modelValue >= t.max), b = i(() => t.modelValue && t.modelValue <= t.min);
+    function k() {
+      if (!(t.disabled || z.value)) {
+        if ((r.value === void 0 || r.value === null) && Number.isFinite(t.min)) {
+          r.value = t.min;
+          return;
+        }
+        r.value = (r.value ?? 0) + 1 * t.step;
+      }
+    }
+    function B() {
+      if (!(t.disabled || b.value)) {
+        if ((r.value === void 0 || r.value === null) && Number.isFinite(t.min)) {
+          r.value = t.min;
+          return;
+        }
+        r.value = (r.value ?? 0) - 1 * t.step;
+      }
+    }
+    return (n, o) => (a(), v(
+      "div",
+      {
+        class: f(["m-input-number", [`m-input-number--${n.size}`, t.class, { "--block": n.block }]]),
+        style: A(n.style)
+      },
+      [
+        n.noButtons ? s("v-if", !0) : (a(), m(O, {
+          key: 0,
+          color: "transparent",
+          size: n.size,
+          tabindex: "-1",
+          class: "m-input-number__button m-input-number__decrement-button",
+          disabled: b.value || n.disabled,
+          onClick: B
+        }, {
+          default: N(() => [
+            S(d(pe), { class: "m-input-number__button__icon" })
+          ]),
+          _: 1
+          /* STABLE */
+        }, 8, ["size", "disabled"])),
+        S(Ce, U({
+          "model-value": r.value,
+          type: "number",
+          class: ["m-input-number__input", { "--no-buttons": n.noButtons, "--text-center": n.textCenter }],
+          disabled: n.disabled,
+          min: n.min,
+          max: n.max,
+          step: n.step,
+          error: n.error,
+          success: n.success,
+          warning: n.warning,
+          hint: n.hint
+        }, n.$attrs, {
+          inputmode: n.inputmode,
+          size: n.size,
+          block: "",
+          onKeydown: [
+            q(D(k, ["prevent"]), ["up"]),
+            q(D(B, ["prevent"]), ["down"])
+          ],
+          onFocus: o[0] || (o[0] = (c) => n.$emit("focus", c)),
+          onChange: o[1] || (o[1] = (c) => n.$emit("change", c)),
+          onBlur: o[2] || (o[2] = (c) => n.$emit("blur", c)),
+          onClick: o[3] || (o[3] = (c) => n.$emit("click", c)),
+          "onUpdate:modelValue": o[4] || (o[4] = (c) => d(V)(c))
+        }), null, 16, ["model-value", "class", "disabled", "min", "max", "step", "error", "success", "warning", "hint", "inputmode", "size", "onKeydown"]),
+        n.noButtons ? s("v-if", !0) : (a(), m(O, {
+          key: 1,
+          color: "transparent",
+          "no-shadow": "",
+          tabindex: "-1",
+          size: n.size,
+          class: "m-input-number__button m-input-number__increment-button",
+          disabled: z.value || n.disabled,
+          onClick: k
+        }, {
+          default: N(() => [
+            S(d(ve), { class: "m-input-number__button__icon" })
+          ]),
+          _: 1
+          /* STABLE */
+        }, 8, ["size", "disabled"]))
+      ],
+      6
+      /* CLASS, STYLE */
+    ));
+  }
+});
+export {
+  K as _,
+  Ve as a
+};