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

package/components/chunks/MazDrawer-Bas9dy0D.mjs

@@ -0,0 +1,226 @@
+import { defineComponent as L, ref as F, onMounted as I, watch as K, nextTick as M, openBlock as p, createBlock as T, Teleport as U, createVNode as $, Transition as X, withCtx as E, createElementBlock as N, mergeProps as G, createElementVNode as i, normalizeClass as h, withModifiers as H, renderSlot as B, createCommentVNode as P, defineAsyncComponent as D, computed as g, useSlots as J, normalizeStyle as Q, createTextVNode as R, toDisplayString as W, unref as V } from "vue";
+import '../assets/MazDrawer.css';const Y = {
+  role: "dialog",
+  class: "m-backdrop-container",
+  "aria-modal": "true"
+}, Z = { class: "m-backdrop-wrapper" }, j = "--backdrop-present", x = /* @__PURE__ */ L({
+  inheritAttrs: !1,
+  __name: "MazBackdrop",
+  props: {
+    modelValue: { type: Boolean, default: !1 },
+    teleportSelector: { default: "body" },
+    beforeClose: { type: Function, default: void 0 },
+    persistent: { type: Boolean, default: !1 },
+    noCloseOnEscKey: { type: Boolean, default: !1 },
+    transitionName: { default: "backdrop-anim" },
+    backdropClass: { default: () => {
+    } },
+    backdropContentClass: { default: () => {
+    } },
+    contentPadding: { type: Boolean, default: !1 },
+    justify: { default: "none" },
+    align: { default: "none" },
+    variant: {}
+  },
+  emits: ["open", "close", "update:model-value", "before-close"],
+  setup(n, { expose: r, emit: d }) {
+    const l = d;
+    function f() {
+      document.documentElement.classList.add(j);
+    }
+    function v() {
+      document.querySelector(".m-backdrop.--present") || document.documentElement.classList.remove(j);
+    }
+    const c = F(n.modelValue);
+    function u() {
+      t(!1);
+    }
+    async function t(e) {
+      var s;
+      e || (l("before-close"), await ((s = n.beforeClose) == null ? void 0 : s.call(n))), c.value = e;
+    }
+    function o() {
+      l("open");
+    }
+    function a() {
+      l("update:model-value", !1), l("close"), b();
+    }
+    function y() {
+      n.persistent || u();
+    }
+    function k(e) {
+      !n.noCloseOnEscKey && e.key === "Escape" && !n.persistent && u();
+    }
+    function z() {
+      f(), document.addEventListener("keyup", k, !1);
+    }
+    function b() {
+      document.removeEventListener("keyup", k), v();
+    }
+    I(() => {
+      n.modelValue ? z() : b();
+    });
+    let m = null;
+    function q(e) {
+      const s = document.querySelector(e), C = s && Array.from(s.querySelectorAll('a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select')), w = C == null ? void 0 : C.filter((S) => {
+        const A = window.getComputedStyle(S);
+        return A.display !== "none" && A.visibility !== "hidden" && !S.disabled;
+      });
+      return w && w.length > 0 ? w[0] : null;
+    }
+    return K(
+      () => n.modelValue,
+      async (e) => {
+        if (c.value = e, e) {
+          z(), m = document.activeElement, await M();
+          const s = q(".m-backdrop-content");
+          s == null || s.focus();
+        } else
+          b(), await M(), m == null || m.focus();
+      }
+    ), r({
+      onBackdropAnimationEnter: o,
+      onBackdropAnimationLeave: a,
+      onBackdropClicked: y,
+      close: u,
+      present: c,
+      toggleModal: t,
+      onKeyPress: k
+    }), (e, s) => (p(), T(U, { to: e.teleportSelector }, [
+      $(X, {
+        appear: "",
+        name: e.transitionName,
+        onAfterEnter: o,
+        onAfterLeave: a
+      }, {
+        default: E(() => [
+          c.value ? (p(), N(
+            "div",
+            G({
+              key: 0,
+              class: "m-backdrop --present"
+            }, e.$attrs, {
+              class: [e.backdropClass, e.variant && `--variant-${e.variant}`, { "--persistent": e.persistent }]
+            }),
+            [
+              i("div", Y, [
+                i("div", Z, [
+                  i(
+                    "div",
+                    {
+                      class: h(["m-backdrop-content", [e.backdropContentClass, `--justify-${e.justify}`, `--align-${e.align}`, { "--padding": e.contentPadding }]]),
+                      role: "button",
+                      tabindex: "-1",
+                      onClick: H(y, ["self"])
+                    },
+                    [
+                      B(e.$slots, "default", {
+                        close: u,
+                        onBackdropClicked: y
+                      }, void 0, !0)
+                    ],
+                    2
+                    /* CLASS */
+                  )
+                ])
+              ])
+            ],
+            16
+            /* FULL_PROPS */
+          )) : P("v-if", !0)
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 8, ["name"])
+    ], 8, ["to"]));
+  }
+}), O = (n, r) => {
+  const d = n.__vccOpts || n;
+  for (const [l, f] of r)
+    d[l] = f;
+  return d;
+}, _ = /* @__PURE__ */ O(x, [["__scopeId", "data-v-7aa1682e"]]), ee = { class: "m-drawer-header__title" }, te = {
+  key: 0,
+  class: "m-drawer-header__close"
+}, ne = { class: "m-drawer-body" }, oe = /* @__PURE__ */ L({
+  __name: "MazDrawer",
+  props: {
+    title: { default: void 0 },
+    variant: { default: "right" },
+    size: { default: "30rem" },
+    backdropClass: { default: void 0 },
+    noClose: { type: Boolean, default: !1 }
+  },
+  emits: ["before-close", "open", "close", "update:model-value"],
+  setup(n) {
+    const r = n, d = D(() => import("./MazBtn-BS2kvd1Z.mjs")), l = D(() => import("./x-mark-CnZwVvA7.mjs")), f = g(() => r.variant === "left" ? "start" : r.variant === "right" ? "end" : "none"), v = g(() => r.variant === "top" ? "start" : r.variant === "bottom" ? "end" : "none"), c = J(), u = g(() => !!(r.title || c.title));
+    return (t, o) => (p(), T(_, {
+      "backdrop-class": ["m-drawer", t.backdropClass],
+      justify: f.value,
+      align: v.value,
+      variant: "drawer",
+      "transition-name": `drawer-anim-${t.variant}`,
+      onClose: o[0] || (o[0] = (a) => t.$emit("close")),
+      onOpen: o[1] || (o[1] = (a) => t.$emit("open")),
+      onBeforeClose: o[2] || (o[2] = (a) => t.$emit("before-close")),
+      "onUpdate:modelValue": o[3] || (o[3] = (a) => t.$emit("update:model-value", a))
+    }, {
+      default: E(({ close: a }) => [
+        i(
+          "div",
+          {
+            class: h(["m-drawer-content-wrap", [`--${t.variant}`]]),
+            style: Q({
+              "--maz-drawer-size": t.size
+            })
+          },
+          [
+            i(
+              "header",
+              {
+                class: h(["m-drawer-header", [u.value ? "--justify-between" : "--justify-end"]])
+              },
+              [
+                i("h4", ee, [
+                  B(t.$slots, "title", { close: a }, () => [
+                    R(
+                      W(t.title),
+                      1
+                      /* TEXT */
+                    )
+                  ], !0)
+                ]),
+                t.noClose ? P("v-if", !0) : (p(), N("div", te, [
+                  $(V(d), {
+                    size: "sm",
+                    color: "transparent",
+                    onClick: a
+                  }, {
+                    default: E(() => [
+                      $(V(l), { class: "icon maz-text-lg" })
+                    ]),
+                    _: 2
+                    /* DYNAMIC */
+                  }, 1032, ["onClick"])
+                ]))
+              ],
+              2
+              /* CLASS */
+            ),
+            i("div", ne, [
+              B(t.$slots, "default", { close: a }, void 0, !0)
+            ])
+          ],
+          6
+          /* CLASS, STYLE */
+        )
+      ]),
+      _: 3
+      /* FORWARDED */
+    }, 8, ["backdrop-class", "justify", "align", "transition-name"]));
+  }
+}), re = /* @__PURE__ */ O(oe, [["__scopeId", "data-v-f0b7ef9f"]]);
+export {
+  re as M,
+  O as _
+};

package/components/chunks/MazDropdown-0r445NfW.mjs

@@ -0,0 +1,426 @@
+import { computed as M, useId as re, nextTick as Y, inject as le, defineComponent as Z, ref as A, onMounted as se, watchEffect as ie, openBlock as w, createElementBlock as E, mergeProps as I, createCommentVNode as R, defineAsyncComponent as F, watch as K, withDirectives as Q, unref as m, normalizeClass as S, normalizeStyle as X, createElementVNode as J, withModifiers as H, renderSlot as g, createTextVNode as V, toDisplayString as q, createVNode as W, createSlots as ae, withCtx as $, createBlock as D, resolveDynamicComponent as ue, Transition as de, Fragment as ce, renderList as fe, vShow as pe } from "vue";
+import '../assets/MazDropdown.css';function me({
+  componentName: l,
+  providedId: s
+}) {
+  return M(() => s ?? `${l}-${re().replace(/:/g, "")}`);
+}
+const O = "__maz-click-outside__";
+function _() {
+  return document.ontouchstart === null ? "touchstart" : "click";
+}
+async function x(l, s) {
+  try {
+    ee(l);
+    const n = s.instance, f = s.value, p = typeof f == "function";
+    if (!p)
+      throw new Error("[maz-ui](vClickOutside) the callback should be a function");
+    await Y(), l[O] = (h) => {
+      if ((!l || h.target && !l.contains(h.target)) && f && p)
+        return f.call(n, h);
+    };
+    const v = _();
+    document.addEventListener(v, l[O], { passive: !0 });
+  } catch (n) {
+    console.error("[maz-ui](vClickOutside)", n);
+  }
+}
+function ee(l) {
+  try {
+    const s = _();
+    document.removeEventListener(s, l[O], !1), delete l[O];
+  } catch (s) {
+    console.error("[maz-ui](vClickOutside)", s);
+  }
+}
+function ve(l, s) {
+  try {
+    if (s.value === s.oldValue)
+      return;
+    x(l, s);
+  } catch (n) {
+    console.error("[maz-ui](vClickOutside)", n);
+  }
+}
+const ye = {
+  mounted: x,
+  updated: ve,
+  unmounted: ee
+};
+function we(l, s) {
+  let n;
+  return function(...f) {
+    clearTimeout(n), n = setTimeout(() => {
+      l.apply(this, f);
+    }, s);
+  };
+}
+function he(l, s) {
+  const n = le(l, s);
+  if (!n)
+    throw new TypeError(`[maz-ui](injectStrict) Could not resolve ${l.toString()}`);
+  return n;
+}
+const ge = ["innerHTML"], be = /* @__PURE__ */ Z({
+  __name: "MazIcon",
+  props: {
+    /** The source path of the SVG file - e.g: `/icons/home.svg` */
+    src: { type: String, default: void 0 },
+    /** The path of the folder where the SVG files are stored - e.g: `/icons` */
+    path: { type: String, default: void 0 },
+    /** The name of the SVG file - e.g: `home` */
+    name: { type: String, default: void 0 },
+    /** The size of the SVG file - e.g: `1em` */
+    size: { type: String, default: void 0 },
+    /** The title of the SVG file - e.g: `Home` */
+    title: { type: String, default: void 0 },
+    /** The function to transform the source of the SVG file - e.g: `(svg) => svg` */
+    transformSource: {
+      type: Function,
+      default: (l) => l
+    }
+  },
+  emits: ["loaded", "unloaded", "error"],
+  setup(l, { emit: s }) {
+    const n = l, f = s, p = {}, v = A(), h = A();
+    function T() {
+      try {
+        return he("mazIconPath");
+      } catch {
+        return;
+      }
+    }
+    const u = M(() => n.path ?? T()), d = M(() => n.src ? n.src : u.value ? `${u.value}/${n.name}.svg` : `/${n.name}.svg`);
+    se(() => {
+      !n.name && !n.src && console.error('[maz-ui](MazIcon) you should provide "name" or "src" as prop');
+    });
+    function C(t, a) {
+      const i = t.querySelectorAll("title");
+      if (i.length > 0)
+        i[0].textContent = a;
+      else {
+        const r = document.createElementNS("http://www.w3.org/2000/svg", "title");
+        r.textContent = a, t.append(r);
+      }
+    }
+    function y(t) {
+      return Object.keys(t).reduce((a, i) => (t[i] !== !1 && t[i] !== null && t[i] !== void 0 && (a[i] = t[i]), a), {});
+    }
+    function L(t) {
+      const a = {}, i = t.attributes;
+      if (!i)
+        return a;
+      for (let r = i.length - 1; r >= 0; r--)
+        a[i[r].name] = i[r].value;
+      return a;
+    }
+    function B(t) {
+      t.cloneNode(!0);
+      const a = n.transformSource(t);
+      return n.title && C(a, n.title), t.innerHTML;
+    }
+    async function P(t) {
+      p[t] || (p[t] = N(t));
+      try {
+        v.value = await p[t], await Y(), f("loaded", h.value);
+      } catch (a) {
+        v.value && (v.value = void 0, f("unloaded")), delete p[t], f("error", a);
+      }
+    }
+    function N(t) {
+      return new Promise((a, i) => {
+        const r = new XMLHttpRequest();
+        r.open("GET", t, !0), r.addEventListener("load", () => {
+          if (r.status >= 200 && r.status < 400)
+            try {
+              let k = new DOMParser().parseFromString(r.responseText, "text/xml").querySelectorAll("svg")[0];
+              k ? (k = n.transformSource(k), a(k)) : i(new Error('Loaded file is not valid SVG"'));
+            } catch (b) {
+              i(b);
+            }
+          else
+            i(new Error("Error loading SVG"));
+        }), r.addEventListener("error", (b) => i(b)), r.send();
+      });
+    }
+    return ie(() => P(d.value)), (t, a) => v.value ? (w(), E("svg", I({
+      key: 0,
+      ref_key: "svgElem",
+      ref: h,
+      width: "1em",
+      height: "1em"
+    }, {
+      ...L(v.value),
+      ...y(t.$attrs)
+    }, {
+      style: `font-size: ${l.size}`,
+      innerHTML: B(v.value)
+    }), null, 16, ge)) : R("v-if", !0);
+  }
+}), ke = ["id"], ze = ["aria-expanded"], Ce = ["id"], Se = ["onClick"], $e = /* @__PURE__ */ Z({
+  inheritAttrs: !1,
+  __name: "MazDropdown",
+  props: {
+    style: { default: void 0 },
+    class: { default: void 0 },
+    items: { default: () => [] },
+    open: { type: Boolean },
+    id: { default: void 0 },
+    trigger: { default: "both" },
+    color: { default: "transparent" },
+    position: { default: "bottom left" },
+    noCloseOnClick: { type: Boolean },
+    disabled: { type: Boolean },
+    noChevron: { type: Boolean },
+    screenReaderDescription: { default: "Open menu dropdown" },
+    menuPanelClass: {},
+    menuPanelStyle: {},
+    block: { type: Boolean },
+    dropdownIcon: {},
+    dropdownIconAnimation: { type: Boolean, default: !0 },
+    size: { default: "md" }
+  },
+  emits: ["menuitem-clicked", "update:open"],
+  setup(l, { emit: s }) {
+    const n = l, f = s, p = me({
+      componentName: "MazDropdown",
+      providedId: n.id
+    }), v = F(() => import("./MazBtn-oZhhJy09.mjs")), h = F(() => import("./MazLink-tud3eDgU.mjs")), T = F(() => import("./chevron-down-BkvtON3b.mjs")), u = A(n.open), d = A(), C = M(() => n.size === "xl" ? "maz-text-lg" : n.size === "lg" || n.size === "md" || n.size === "sm" ? "maz-text-base" : n.size === "xs" || n.size === "mini" ? "maz-text-sm" : "maz-text-lg"), y = we((e) => {
+      r(e);
+    }, 200);
+    function L() {
+      u.value && r(!1);
+    }
+    function B() {
+      r(!u.value);
+    }
+    function P() {
+      ["click"].includes(n.trigger) && B();
+    }
+    function N() {
+      ["hover", "both"].includes(n.trigger) && r(!0);
+    }
+    function t() {
+      ["hover", "both"].includes(n.trigger) && (u.value === !1 ? r(!0) : y(!0));
+    }
+    function a() {
+      ["hover", "both"].includes(n.trigger) && y(!1);
+    }
+    function i() {
+      y(!1);
+    }
+    function r(e) {
+      n.disabled || (u.value = e, f("update:open", e));
+    }
+    function b(e) {
+      return "action" in e;
+    }
+    function G(e) {
+      return "href" in e || "to" in e;
+    }
+    async function k(e, c) {
+      var o;
+      f("menuitem-clicked", c), await ((o = e.action) == null ? void 0 : o.call(e)), n.noCloseOnClick || U();
+    }
+    function U() {
+      n.noCloseOnClick === !1 && r(!1);
+    }
+    function j(e) {
+      e.key === "Escape" ? (e.preventDefault(), r(!1)) : ["ArrowDown", "ArrowUp"].includes(e.key) ? oe(e) : e.key === "Enter" && typeof d.value == "number" && (e.preventDefault(), document.querySelectorAll(`#${p.value} .menuitem`)[d.value].click(), U());
+    }
+    function ne(e) {
+      ["ArrowDown", "ArrowUp", "Enter"].includes(e.key) && u.value === !1 && (e.preventDefault(), r(!0));
+    }
+    function oe(e) {
+      var z;
+      e.preventDefault();
+      const c = e.key;
+      u.value || r(!0);
+      const o = (z = n.items) == null ? void 0 : z.length;
+      o && (typeof d.value == "number" ? d.value === o - 1 && c === "ArrowDown" ? d.value = 0 : d.value === 0 && c === "ArrowUp" ? d.value = o - 1 : d.value = c === "ArrowDown" ? d.value + 1 : d.value - 1 : d.value = c === "ArrowDown" ? 0 : o - 1);
+    }
+    return K(
+      () => u.value,
+      (e) => {
+        e ? document.addEventListener("keydown", j) : document.removeEventListener("keydown", j), d.value = void 0;
+      }
+    ), K(
+      () => n.open,
+      (e) => r(e)
+    ), (e, c) => Q((w(), E("div", {
+      id: m(p),
+      class: S(["m-dropdown", [n.class, { "--block": e.block }]]),
+      style: X(e.style)
+    }, [
+      J("div", {
+        role: "button",
+        tabindex: "0",
+        class: "m-dropdown__wrapper",
+        "aria-expanded": u.value,
+        "aria-haspopup": "menu",
+        onClick: H(P, ["stop"]),
+        onFocus: N,
+        onBlur: i,
+        onKeydown: ne,
+        onMouseenter: t,
+        onMouseleave: a
+      }, [
+        e.screenReaderDescription || e.$slots["screen-reader-description"] ? (w(), E("span", {
+          key: 0,
+          id: `${m(p)}-labelspan`,
+          class: "maz-sr-only"
+        }, [
+          g(e.$slots, "screen-reader-description", {}, () => [
+            V(
+              q(e.screenReaderDescription),
+              1
+              /* TEXT */
+            )
+          ])
+        ], 8, Ce)) : R("v-if", !0),
+        g(e.$slots, "element", { isOpen: u.value }, () => [
+          W(m(v), I({
+            "aria-labelledby": `${m(p)}-labelspan`,
+            color: e.color,
+            disabled: e.disabled
+          }, e.$attrs, {
+            tabindex: "-1",
+            block: e.block,
+            size: e.size
+          }), ae({
+            default: $(() => [
+              g(e.$slots, "default")
+            ]),
+            _: 2
+            /* DYNAMIC */
+          }, [
+            e.noChevron ? void 0 : {
+              name: "right-icon",
+              fn: $(() => [
+                g(e.$slots, "dropdown-icon", { isOpen: u.value }, () => [
+                  typeof e.dropdownIcon == "string" ? (w(), D(be, {
+                    key: 0,
+                    name: e.dropdownIcon,
+                    class: S([{ "--open": u.value && e.dropdownIconAnimation }, C.value])
+                  }, null, 8, ["name", "class"])) : e.dropdownIcon ? (w(), D(ue(e.dropdownIcon), {
+                    key: 1,
+                    class: S([[{ "--open": u.value && e.dropdownIconAnimation }, C.value], "m-dropdown__icon"])
+                  }, null, 8, ["class"])) : (w(), D(m(T), {
+                    key: 2,
+                    class: S([[{ "--open": u.value && e.dropdownIconAnimation }, C.value], "m-dropdown__icon"])
+                  }, null, 8, ["class"]))
+                ])
+              ]),
+              key: "0"
+            }
+          ]), 1040, ["aria-labelledby", "color", "disabled", "block", "size"])
+        ])
+      ], 40, ze),
+      W(de, {
+        name: "maz-scale-fade",
+        persisted: ""
+      }, {
+        default: $(() => [
+          Q(J(
+            "div",
+            {
+              role: "menu",
+              "aria-label": "Menu",
+              class: S(["menu", [{
+                "--top": e.position.includes("top"),
+                "--left": e.position.includes("left"),
+                "--right": e.position.includes("right"),
+                "--bottom": e.position.includes("bottom")
+              }, e.menuPanelClass]]),
+              tabindex: "-1",
+              style: X(e.menuPanelStyle),
+              onFocus: c[0] || (c[0] = (o) => m(y)(!0)),
+              onBlur: c[1] || (c[1] = (o) => m(y)(!1)),
+              onMouseenter: c[2] || (c[2] = (o) => ["hover", "both"].includes(e.trigger) ? m(y)(!0) : void 0),
+              onMouseleave: c[3] || (c[3] = (o) => ["hover", "both"].includes(e.trigger) ? m(y)(!1) : void 0)
+            },
+            [
+              g(e.$slots, "dropdown", { items: e.items }, () => [
+                (w(!0), E(
+                  ce,
+                  null,
+                  fe(e.items, (o, z) => g(e.$slots, "menuitem", {
+                    key: z,
+                    item: o
+                  }, () => [
+                    G(o) ? (w(), D(m(h), I({
+                      key: 0,
+                      target: o.href ? o.target ?? "_self" : void 0,
+                      to: o.to,
+                      href: o.href,
+                      color: o.color ?? "theme",
+                      ref_for: !0
+                    }, o, {
+                      "underline-only-hover": o.underlineOnlyHover ?? !1,
+                      class: ["menuitem", [
+                        {
+                          "--is-keyboard-selected": d.value === z
+                        },
+                        o.class
+                      ]],
+                      tabindex: "-1",
+                      onClick: H(U, ["stop"])
+                    }), {
+                      default: $(() => [
+                        g(e.$slots, "menuitem-label", { item: o }, () => [
+                          V(
+                            q(o.label),
+                            1
+                            /* TEXT */
+                          )
+                        ])
+                      ]),
+                      _: 2
+                      /* DYNAMIC */
+                    }, 1040, ["target", "to", "href", "color", "underline-only-hover", "class"])) : b(o) ? (w(), E("button", I({
+                      key: 1,
+                      tabindex: "-1",
+                      type: "button",
+                      ref_for: !0
+                    }, o, {
+                      class: ["menuitem menuitem__button", [
+                        {
+                          "--is-keyboard-selected": d.value === z
+                        },
+                        o.class,
+                        `--${o.color ?? "theme"}`
+                      ]],
+                      onClick: H((te) => k(o, te), ["stop"])
+                    }), [
+                      g(e.$slots, "menuitem-label", { item: o }, () => [
+                        V(
+                          q(o.label),
+                          1
+                          /* TEXT */
+                        )
+                      ])
+                    ], 16, Se)) : R("v-if", !0)
+                  ])),
+                  128
+                  /* KEYED_FRAGMENT */
+                ))
+              ])
+            ],
+            38
+            /* CLASS, STYLE, NEED_HYDRATION */
+          ), [
+            [pe, u.value]
+          ])
+        ]),
+        _: 3
+        /* FORWARDED */
+      })
+    ], 14, ke)), [
+      [m(ye), L]
+    ]);
+  }
+});
+export {
+  be as _,
+  $e as a
+};