maz-ui 3.47.1 → 3.47.2-beta.10

package/components/chunks/MazDropdown-CKuIGitT.mjs

@@ -0,0 +1,427 @@
+import { useId as re, computed as M, 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
+}) {
+  const n = re();
+  return M(() => s ?? `${l}-${n}`);
+}
+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-DhSKmF01.mjs")), h = F(() => import("./MazLink-mrqHeBS0.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
+};

package/components/chunks/MazExpandAnimation-Bdf0-L85.mjs

@@ -0,0 +1,54 @@
+import { defineComponent as l, mergeModels as m, useModel as u, ref as s, onMounted as f, onUnmounted as p, openBlock as v, createElementBlock as c, normalizeClass as _, normalizeStyle as x, createElementVNode as E, mergeProps as h, renderSlot as g } from "vue";
+import { _ as M } from "./MazStepper-B3fuhbye.mjs";
+import '../assets/MazExpandAnimation.css';const A = ["aria-hidden"], y = /* @__PURE__ */ l({
+  inheritAttrs: !1,
+  __name: "MazExpandAnimation",
+  props: /* @__PURE__ */ m({
+    duration: { default: "300ms" },
+    timingFunction: { default: "ease-in-out" }
+  }, {
+    modelValue: { type: Boolean },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(d) {
+    const a = u(d, "modelValue"), i = s(!a.value), t = s();
+    function o() {
+      a.value || (i.value = !0);
+    }
+    function r() {
+      a.value && (i.value = !1);
+    }
+    return f(() => {
+      var e, n;
+      (e = t.value) == null || e.addEventListener("transitionstart", o, !1), (n = t.value) == null || n.addEventListener("transitionend", r, !1);
+    }), p(() => {
+      var e, n;
+      (e = t.value) == null || e.removeEventListener("transitionstart", o, !1), (n = t.value) == null || n.removeEventListener("transitionend", r, !1);
+    }), (e, n) => (v(), c("div", {
+      ref_key: "expandAnimationRef",
+      ref: t,
+      class: _(["m-expand-animation", { "m-expand-animation--expanded": a.value }]),
+      "aria-hidden": !a.value,
+      role: "region",
+      style: x([{ "--expand-animation-duration": e.duration, "--expand-animation-timing-function": e.timingFunction }])
+    }, [
+      E(
+        "div",
+        h({ class: "m-expand-animation__inner" }, e.$attrs, {
+          class: {
+            "--overflow-hidden": i.value
+          }
+        }),
+        [
+          g(e.$slots, "default", {}, void 0, !0)
+        ],
+        16
+        /* FULL_PROPS */
+      )
+    ], 14, A));
+  }
+}), V = /* @__PURE__ */ M(y, [["__scopeId", "data-v-3bfdfbc1"]]);
+export {
+  V as default
+};