maz-ui/components/chunks/MazInputNumber.Daeit65q.mjs

A standalone components library for Vue.Js 3 & Nuxt.Js 3

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