maz-ui 3.46.0 → 3.46.1-beta.1

package/components/MazAvatar.d.ts

@@ -1,6 +1,11 @@
+import type { HTMLAttributes } from 'vue';
 import type { Color } from './types';
 export type { Color };
 export interface Props {
+    /** The style of the component */
+    style?: HTMLAttributes['style'];
+    /** The class of the component */
+    class?: HTMLAttributes['class'];
     /** The source of the image */
     src?: string | null;
     /** The caption of the avatar */
@@ -44,6 +49,12 @@ export interface Props {
     fallbackSrc?: string;
     /** Load the fallback image by default */
     noPhoto?: boolean;
+    /**
+     * The loading strategy of the image - lazy, eager or intersecting
+     * @default 'intersecting'
+     * @values `'lazy' | 'eager' | 'intersecting'`
+     */
+    loading?: 'lazy' | 'eager' | 'intersecting';
 }
 declare function __VLS_template(): {
     slots: {
@@ -72,6 +83,7 @@ declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {},
     size: string;
     src: string | null;
     roundedSize: "none" | "sm" | "md" | "lg" | "xl" | "full";
+    loading: "lazy" | "eager" | "intersecting";
     href: string;
     to: string | Record<string, unknown>;
     target: string;

package/components/MazAvatar.mjs

@@ -1,4 +1,4 @@
-import { M as f } from "./chunks/MazAvatar-DVjTbmNj.mjs";
+import { M as f } from "./chunks/MazAvatar-BXZpFUaZ.mjs";
 export {
   f as default
 };

package/components/MazDropdown.d.ts

@@ -1,16 +1,29 @@
 import type { RouteLocationRaw } from 'vue-router';
 import type { Color } from './MazBtn.vue';
+import type { Props as MazLinkProps } from './MazLink.vue';
 import type { Position } from './types';
 import { type HTMLAttributes } from 'vue';
 export type { Color, Position };
-export type MenuItem = {
+type ItemBase = Record<string, unknown> & {
     label: string;
-    action?: () => unknown;
+    class?: unknown;
+    color?: Color;
+};
+type LinkItem = ItemBase & MazLinkProps & {
     target?: string;
     href?: string;
     to?: RouteLocationRaw;
-    class?: unknown;
-} & Record<string, unknown>;
+};
+type ActionItem = ItemBase & {
+    action?: () => unknown;
+};
+export type MenuItem = (LinkItem & {
+    action?: never;
+}) | (ActionItem & {
+    href?: never;
+    to?: never;
+    target?: never;
+});
 export interface Props {
     style?: HTMLAttributes['style'];
     class?: HTMLAttributes['class'];
@@ -61,13 +74,30 @@ declare function __VLS_template(): {
             item: MenuItem;
         }): any;
         "menuitem-label"?(_: {
-            item: MenuItem;
-        }): any;
-        "menuitem-label"?(_: {
-            item: MenuItem;
+            item: Record<string, unknown> & {
+                label: string;
+                class?: unknown;
+                color?: Color;
+            } & MazLinkProps & {
+                target?: string;
+                href?: string;
+                to?: RouteLocationRaw;
+            } & {
+                action?: never;
+            };
         }): any;
         "menuitem-label"?(_: {
-            item: MenuItem;
+            item: Record<string, unknown> & {
+                label: string;
+                class?: unknown;
+                color?: Color;
+            } & {
+                action?: () => unknown;
+            } & {
+                href?: never;
+                to?: never;
+                target?: never;
+            };
         }): any;
     };
     refs: {};

package/components/MazDropdown.mjs

@@ -1,64 +1,64 @@
-import { computed as Y, getCurrentInstance as Z, nextTick as x, defineComponent as ee, defineAsyncComponent as A, ref as I, watch as L, resolveComponent as oe, withDirectives as T, openBlock as v, createElementBlock as h, unref as u, normalizeClass as k, normalizeStyle as ne, createElementVNode as C, withModifiers as D, renderSlot as p, createTextVNode as E, toDisplayString as $, createCommentVNode as b, createVNode as U, mergeProps as te, withCtx as B, createBlock as N, Transition as le, Fragment as S, renderList as se, vShow as re } from "vue";
+import { computed as ee, getCurrentInstance as oe, nextTick as ne, defineComponent as te, defineAsyncComponent as E, ref as L, watch as T, withDirectives as U, openBlock as v, createElementBlock as w, unref as a, normalizeClass as $, normalizeStyle as re, createElementVNode as h, withModifiers as z, renderSlot as f, createTextVNode as M, toDisplayString as A, createCommentVNode as p, createVNode as N, mergeProps as B, withCtx as O, createBlock as S, Transition as le, Fragment as F, renderList as se, vShow as ie } from "vue";
 import './assets/MazDropdown.css';function ae({
   componentName: t,
-  providedId: l
+  providedId: r
 }) {
-  return Y(() => {
+  return ee(() => {
     var n;
-    return l ?? `${t}-${(n = Z()) == null ? void 0 : n.uid}`;
+    return r ?? `${t}-${(n = oe()) == null ? void 0 : n.uid}`;
   });
 }
-const M = "__maz-click-outside__";
-function F() {
+const g = "__maz-click-outside__";
+function V() {
   return document.ontouchstart === null ? "touchstart" : "click";
 }
-async function V(t, l) {
+async function q(t, r) {
   try {
-    R(t);
-    const n = l.instance, c = l.value, w = typeof c == "function";
-    if (!w)
+    H(t);
+    const n = r.instance, d = r.value, k = typeof d == "function";
+    if (!k)
       throw new Error("[maz-ui](vClickOutside) the callback should be a function");
-    await x(), t[M] = (f) => {
-      if ((!t || f.target && !t.contains(f.target)) && c && w)
-        return c.call(n, f);
+    await ne(), t[g] = (b) => {
+      if ((!t || b.target && !t.contains(b.target)) && d && k)
+        return d.call(n, b);
     };
-    const z = F();
-    document.addEventListener(z, t[M], { passive: !0 });
+    const C = V();
+    document.addEventListener(C, t[g], { passive: !0 });
   } catch (n) {
     console.error("[maz-ui](vClickOutside)", n);
   }
 }
-function R(t) {
+function H(t) {
   try {
-    const l = F();
-    document.removeEventListener(l, t[M], !1), delete t[M];
-  } catch (l) {
-    console.error("[maz-ui](vClickOutside)", l);
+    const r = V();
+    document.removeEventListener(r, t[g], !1), delete t[g];
+  } catch (r) {
+    console.error("[maz-ui](vClickOutside)", r);
   }
 }
-function ie(t, l) {
+function ue(t, r) {
   try {
-    if (l.value === l.oldValue)
+    if (r.value === r.oldValue)
       return;
-    V(t, l);
+    q(t, r);
   } catch (n) {
     console.error("[maz-ui](vClickOutside)", n);
   }
 }
-const ue = {
-  mounted: V,
-  updated: ie,
-  unmounted: R
+const de = {
+  mounted: q,
+  updated: ue,
+  unmounted: H
 };
-function de(t, l) {
+function ce(t, r) {
   let n;
-  return function(...c) {
+  return function(...d) {
     clearTimeout(n), n = setTimeout(() => {
-      t.apply(this, c);
-    }, l);
+      t.apply(this, d);
+    }, r);
   };
 }
-const ce = ["id"], fe = ["aria-expanded"], pe = ["id"], me = { class: "button-span" }, ve = ["target", "href"], be = ["onClick"], ye = /* @__PURE__ */ ee({
+const fe = ["id"], pe = ["aria-expanded"], me = ["id"], ve = { class: "button-span" }, be = ["onClick"], ye = /* @__PURE__ */ te({
   inheritAttrs: !1,
   __name: "MazDropdown",
   props: {
@@ -76,252 +76,242 @@ const ce = ["id"], fe = ["aria-expanded"], pe = ["id"], me = { class: "button-sp
     screenReaderDescription: { default: "Open menu dropdown" }
   },
   emits: ["menuitem-clicked", "update:open"],
-  setup(t, { emit: l }) {
-    const n = t, c = l, w = A(() => import("./chunks/MazBtn-C-RDq3T0.mjs").then((e) => e.M)), z = A(() => import("./chunks/chevron-down-BkvtON3b.mjs")), f = ae({
+  setup(t, { emit: r }) {
+    const n = t, d = r, k = E(() => import("./chunks/MazBtn-qFUqOv5D.mjs")), C = E(() => import("./chunks/MazLink-CJ1canOj.mjs")), b = E(() => import("./chunks/chevron-down-BkvtON3b.mjs")), y = ae({
       componentName: "MazDropdown",
       providedId: n.id
-    }), a = I(n.open), r = I(), m = de((e) => {
-      i(e);
+    }), i = L(n.open), s = L(), c = ce((e) => {
+      u(e);
     }, 200);
-    function q() {
-      a.value && i(!1);
-    }
-    function H() {
-      i(!a.value);
+    function R() {
+      i.value && u(!1);
     }
     function _() {
-      ["click"].includes(n.trigger) && H();
+      u(!i.value);
     }
     function j() {
-      ["hover", "both"].includes(n.trigger) && i(!0);
+      ["click"].includes(n.trigger) && _();
     }
     function K() {
-      ["hover", "both"].includes(n.trigger) && (a.value === !1 ? i(!0) : m(!0));
+      ["hover", "both"].includes(n.trigger) && u(!0);
     }
     function P() {
-      ["hover", "both"].includes(n.trigger) && m(!1);
+      ["hover", "both"].includes(n.trigger) && (i.value === !1 ? u(!0) : c(!0));
     }
     function Q() {
-      m(!1);
-    }
-    function i(e) {
-      n.disabled || (a.value = e, c("update:open", e));
+      ["hover", "both"].includes(n.trigger) && c(!1);
     }
-    async function G(e, s) {
-      var d;
-      c("menuitem-clicked", s), await ((d = e.action) == null ? void 0 : d.call(e)), n.noCloseOnClick || y();
+    function G() {
+      c(!1);
     }
-    function y() {
-      n.noCloseOnClick === !1 && i(!1);
-    }
-    function O(e) {
-      e.key === "Escape" ? (e.preventDefault(), i(!1)) : ["ArrowDown", "ArrowUp"].includes(e.key) ? W(e) : e.key === "Enter" && typeof r.value == "number" && (e.preventDefault(), document.querySelectorAll(`#${f.value} .menuitem`)[r.value].click(), y());
+    function u(e) {
+      n.disabled || (i.value = e, d("update:open", e));
     }
     function J(e) {
-      ["ArrowDown", "ArrowUp", "Enter"].includes(e.key) && a.value === !1 && (e.preventDefault(), i(!0));
+      return "action" in e;
     }
     function W(e) {
+      return "href" in e || "to" in e;
+    }
+    async function X(e, l) {
       var o;
+      d("menuitem-clicked", l), await ((o = e.action) == null ? void 0 : o.call(e)), n.noCloseOnClick || D();
+    }
+    function D() {
+      n.noCloseOnClick === !1 && u(!1);
+    }
+    function I(e) {
+      e.key === "Escape" ? (e.preventDefault(), u(!1)) : ["ArrowDown", "ArrowUp"].includes(e.key) ? Z(e) : e.key === "Enter" && typeof s.value == "number" && (e.preventDefault(), document.querySelectorAll(`#${y.value} .menuitem`)[s.value].click(), D());
+    }
+    function Y(e) {
+      ["ArrowDown", "ArrowUp", "Enter"].includes(e.key) && i.value === !1 && (e.preventDefault(), u(!0));
+    }
+    function Z(e) {
+      var m;
       e.preventDefault();
-      const s = e.key;
-      a.value || i(!0);
-      const d = (o = n.items) == null ? void 0 : o.length;
-      d && (typeof r.value == "number" ? r.value === d - 1 && s === "ArrowDown" ? r.value = 0 : r.value === 0 && s === "ArrowUp" ? r.value = d - 1 : r.value = s === "ArrowDown" ? r.value + 1 : r.value - 1 : r.value = s === "ArrowDown" ? 0 : d - 1);
+      const l = e.key;
+      i.value || u(!0);
+      const o = (m = n.items) == null ? void 0 : m.length;
+      o && (typeof s.value == "number" ? s.value === o - 1 && l === "ArrowDown" ? s.value = 0 : s.value === 0 && l === "ArrowUp" ? s.value = o - 1 : s.value = l === "ArrowDown" ? s.value + 1 : s.value - 1 : s.value = l === "ArrowDown" ? 0 : o - 1);
     }
-    return L(
-      () => a.value,
+    return T(
+      () => i.value,
       (e) => {
-        e ? document.addEventListener("keydown", O) : document.removeEventListener("keydown", O), r.value = void 0;
+        e ? document.addEventListener("keydown", I) : document.removeEventListener("keydown", I), s.value = void 0;
       }
-    ), L(
+    ), T(
       () => n.open,
-      (e) => i(e)
-    ), (e, s) => {
-      const d = oe("RouterLink");
-      return T((v(), h("div", {
-        id: u(f),
-        class: k(["m-dropdown", [n.class]]),
-        style: ne(e.style)
+      (e) => u(e)
+    ), (e, l) => U((v(), w("div", {
+      id: a(y),
+      class: $(["m-dropdown", [n.class]]),
+      style: re(e.style)
+    }, [
+      h("div", {
+        role: "button",
+        tabindex: "0",
+        class: "m-dropdown__wrapper",
+        "aria-expanded": i.value,
+        "aria-haspopup": "menu",
+        onClick: z(j, ["stop"]),
+        onFocus: K,
+        onBlur: G,
+        onKeydown: Y,
+        onMouseenter: P,
+        onMouseleave: Q
       }, [
-        C("div", {
-          role: "button",
-          tabindex: "0",
-          class: "m-dropdown__wrapper",
-          "aria-expanded": a.value,
-          "aria-haspopup": "menu",
-          onClick: D(_, ["stop"]),
-          onFocus: j,
-          onBlur: Q,
-          onKeydown: J,
-          onMouseenter: K,
-          onMouseleave: P
+        h("span", {
+          id: `${a(y)}-labelspan`,
+          class: "maz-sr-only"
         }, [
-          C("span", {
-            id: `${u(f)}-labelspan`,
-            class: "maz-sr-only"
-          }, [
-            p(e.$slots, "screen-reader-description", {}, () => [
-              E(
-                $(e.screenReaderDescription),
-                1
-                /* TEXT */
-              )
-            ])
-          ], 8, pe),
-          b(`
+          f(e.$slots, "screen-reader-description", {}, () => [
+            M(
+              A(e.screenReaderDescription),
+              1
+              /* TEXT */
+            )
+          ])
+        ], 8, me),
+        p(`
         @slot Custom Element
           @binding {Boolen} is-open close function
           @default \`<MazBtn />\`
       `),
-          p(e.$slots, "element", { isOpen: a.value }, () => [
-            U(u(w), te({
-              color: e.color,
-              disabled: e.disabled,
-              "aria-labelledby": `${u(f)}-labelspan`
-            }, e.$attrs, { tabindex: "-1" }), {
-              default: B(() => [
-                C("span", me, [
-                  b(" @slot Button text "),
-                  p(e.$slots, "default"),
-                  e.noChevron ? b("v-if", !0) : (v(), N(u(z), {
-                    key: 0,
-                    class: k([{ "maz-rotate-180": a.value }, "chevron-icon"])
-                  }, null, 8, ["class"]))
-                ]),
-                b(" @slot Menu Label ")
+        f(e.$slots, "element", { isOpen: i.value }, () => [
+          N(a(k), B({
+            color: e.color,
+            disabled: e.disabled,
+            "aria-labelledby": `${a(y)}-labelspan`
+          }, e.$attrs, { tabindex: "-1" }), {
+            default: O(() => [
+              h("span", ve, [
+                p(" @slot Button text "),
+                f(e.$slots, "default"),
+                e.noChevron ? p("v-if", !0) : (v(), S(a(b), {
+                  key: 0,
+                  class: $([{ "maz-rotate-180": i.value }, "chevron-icon"])
+                }, null, 8, ["class"]))
               ]),
-              _: 3
-              /* FORWARDED */
-            }, 16, ["color", "disabled", "aria-labelledby"])
-          ])
-        ], 40, fe),
-        U(le, {
-          name: "maz-scale-fade",
-          persisted: ""
-        }, {
-          default: B(() => [
-            T(C(
-              "div",
-              {
-                role: "menu",
-                "aria-label": "Menu",
-                class: k(["menu", {
-                  "--top": e.position.includes("top"),
-                  "--left": e.position.includes("left"),
-                  "--right": e.position.includes("right"),
-                  "--bottom": e.position.includes("bottom")
-                }]),
-                tabindex: "-1",
-                onFocus: s[0] || (s[0] = (o) => u(m)(!0)),
-                onBlur: s[1] || (s[1] = (o) => u(m)(!1)),
-                onMouseenter: s[2] || (s[2] = (o) => ["hover", "both"].includes(e.trigger) ? u(m)(!0) : void 0),
-                onMouseleave: s[3] || (s[3] = (o) => ["hover", "both"].includes(e.trigger) ? u(m)(!1) : void 0)
-              },
-              [
-                b(`
+              p(" @slot Menu Label ")
+            ]),
+            _: 3
+            /* FORWARDED */
+          }, 16, ["color", "disabled", "aria-labelledby"])
+        ])
+      ], 40, pe),
+      N(le, {
+        name: "maz-scale-fade",
+        persisted: ""
+      }, {
+        default: O(() => [
+          U(h(
+            "div",
+            {
+              role: "menu",
+              "aria-label": "Menu",
+              class: $(["menu", {
+                "--top": e.position.includes("top"),
+                "--left": e.position.includes("left"),
+                "--right": e.position.includes("right"),
+                "--bottom": e.position.includes("bottom")
+              }]),
+              tabindex: "-1",
+              onFocus: l[0] || (l[0] = (o) => a(c)(!0)),
+              onBlur: l[1] || (l[1] = (o) => a(c)(!1)),
+              onMouseenter: l[2] || (l[2] = (o) => ["hover", "both"].includes(e.trigger) ? a(c)(!0) : void 0),
+              onMouseleave: l[3] || (l[3] = (o) => ["hover", "both"].includes(e.trigger) ? a(c)(!1) : void 0)
+            },
+            [
+              p(`
           @slot Custom dropdown panel
             @binding {Array} items - items prop data
         `),
-                p(e.$slots, "dropdown", { items: e.items }, () => [
-                  (v(!0), h(
-                    S,
-                    null,
-                    se(e.items, (o, g) => (v(), h(
-                      S,
-                      { key: g },
-                      [
-                        b(`
+              f(e.$slots, "dropdown", { items: e.items }, () => [
+                (v(!0), w(
+                  F,
+                  null,
+                  se(e.items, (o, m) => (v(), w(
+                    F,
+                    { key: m },
+                    [
+                      p(`
               @slot Custom menu item
                 @binding {Object} item - menu item
             `),
-                        p(e.$slots, "menuitem", { item: o }, () => [
-                          o.to ? (v(), N(d, {
-                            key: 0,
-                            target: o.href ? o.target ?? "_self" : void 0,
-                            to: o.to,
-                            class: k(["menuitem", [
-                              {
-                                "--is-keyboard-selected": r.value === g
-                              },
-                              o.class
-                            ]]),
-                            tabindex: "-1",
-                            onClick: D(y, ["stop"])
-                          }, {
-                            default: B(() => [
-                              p(e.$slots, "menuitem-label", { item: o }, () => [
-                                E(
-                                  $(o.label),
-                                  1
-                                  /* TEXT */
-                                )
-                              ])
-                            ]),
-                            _: 2
-                            /* DYNAMIC */
-                          }, 1032, ["target", "to", "class"])) : o.href ? (v(), h("a", {
-                            key: 1,
-                            target: o.href ? o.target ?? "_self" : void 0,
-                            href: o.href,
-                            tabindex: "-1",
-                            class: k(["menuitem", [
-                              {
-                                "--is-keyboard-selected": r.value === g
-                              },
-                              o.class
-                            ]]),
-                            onClick: D(y, ["stop"])
-                          }, [
-                            p(e.$slots, "menuitem-label", { item: o }, () => [
-                              E(
-                                $(o.label),
-                                1
-                                /* TEXT */
-                              )
-                            ])
-                          ], 10, ve)) : o.action ? (v(), h("button", {
-                            key: 2,
-                            tabindex: "-1",
-                            type: "button",
-                            class: k(["menuitem", [
-                              {
-                                "--is-keyboard-selected": r.value === g
-                              },
-                              o.class
-                            ]]),
-                            onClick: D((X) => o.action ? G(o, X) : y(), ["stop"])
-                          }, [
-                            p(e.$slots, "menuitem-label", { item: o }, () => [
-                              E(
-                                $(o.label),
+                      f(e.$slots, "menuitem", { item: o }, () => [
+                        W(o) ? (v(), S(a(C), B({
+                          key: 0,
+                          target: o.href ? o.target ?? "_self" : void 0,
+                          to: o.to,
+                          href: o.href,
+                          color: o.color ?? "theme",
+                          ref_for: !0
+                        }, o, {
+                          class: ["menuitem", [
+                            {
+                              "--is-keyboard-selected": s.value === m
+                            },
+                            o.class
+                          ]],
+                          tabindex: "-1",
+                          onClick: z(D, ["stop"])
+                        }), {
+                          default: O(() => [
+                            f(e.$slots, "menuitem-label", { item: o }, () => [
+                              M(
+                                A(o.label),
                                 1
                                 /* TEXT */
                               )
                             ])
-                          ], 10, be)) : b("v-if", !0)
-                        ])
-                      ],
-                      64
-                      /* STABLE_FRAGMENT */
-                    ))),
-                    128
-                    /* KEYED_FRAGMENT */
-                  ))
-                ])
-              ],
-              34
-              /* CLASS, NEED_HYDRATION */
-            ), [
-              [re, a.value]
-            ])
-          ]),
-          _: 3
-          /* FORWARDED */
-        })
-      ], 14, ce)), [
-        [u(ue), q]
-      ]);
-    };
+                          ]),
+                          _: 2
+                          /* DYNAMIC */
+                        }, 1040, ["target", "to", "href", "color", "class"])) : J(o) ? (v(), w("button", B({
+                          key: 1,
+                          tabindex: "-1",
+                          type: "button",
+                          ref_for: !0
+                        }, o, {
+                          class: ["menuitem menuitem__button", [
+                            {
+                              "--is-keyboard-selected": s.value === m
+                            },
+                            o.class,
+                            `--${o.color ?? "theme"}`
+                          ]],
+                          onClick: z((x) => X(o, x), ["stop"])
+                        }), [
+                          f(e.$slots, "menuitem-label", { item: o }, () => [
+                            M(
+                              A(o.label),
+                              1
+                              /* TEXT */
+                            )
+                          ])
+                        ], 16, be)) : p("v-if", !0)
+                      ])
+                    ],
+                    64
+                    /* STABLE_FRAGMENT */
+                  ))),
+                  128
+                  /* KEYED_FRAGMENT */
+                ))
+              ])
+            ],
+            34
+            /* CLASS, NEED_HYDRATION */
+          ), [
+            [ie, i.value]
+          ])
+        ]),
+        _: 3
+        /* FORWARDED */
+      })
+    ], 14, fe)), [
+      [a(de), R]
+    ]);
   }
 });
 export {