maz-ui 3.47.2-beta.4 → 3.47.2-beta.5

package/components/MazDropdown.d.ts

@@ -1,7 +1,7 @@
 import type { RouteLocationRaw } from 'vue-router';
 import type { Color } from './MazBtn.vue';
 import type { MazLinkProps } from './MazLink.vue';
-import type { Position } from './types';
+import type { Icon, Position } from './types';
 import { type HTMLAttributes } from 'vue';
 export type { Color, Position };
 type ItemBase = Record<string, unknown> & {
@@ -77,6 +77,7 @@ export interface MazDropdownProps {
      * If true, the button will have a full width
      */
     block?: boolean;
+    dropdownIcon?: string | Icon;
 }
 declare function __VLS_template(): {
     slots: {

package/components/MazDropdown.mjs

@@ -1,327 +1,4 @@
-import { useId as ee, computed as oe, ref as y, nextTick as ne, defineComponent as te, defineAsyncComponent as D, watch as I, withDirectives as T, openBlock as v, createElementBlock as b, unref as a, normalizeClass as $, normalizeStyle as S, createElementVNode as L, withModifiers as E, renderSlot as p, createTextVNode as z, toDisplayString as B, createCommentVNode as O, createVNode as U, mergeProps as A, createSlots as re, withCtx as h, createBlock as N, Transition as le, Fragment as se, renderList as ie, vShow as ae } from "vue";
-import './assets/MazDropdown.css';function ue({
-  componentName: t,
-  providedId: r
-}) {
-  const n = ee();
-  return oe(() => r ?? `${t}-${n}`);
-}
-y("system");
-y("system");
-const w = "__maz-click-outside__";
-function F() {
-  return document.ontouchstart === null ? "touchstart" : "click";
-}
-async function P(t, r) {
-  try {
-    V(t);
-    const n = r.instance, c = r.value, d = typeof c == "function";
-    if (!d)
-      throw new Error("[maz-ui](vClickOutside) the callback should be a function");
-    await ne(), t[w] = (k) => {
-      if ((!t || k.target && !t.contains(k.target)) && c && d)
-        return c.call(n, k);
-    };
-    const C = F();
-    document.addEventListener(C, t[w], { passive: !0 });
-  } catch (n) {
-    console.error("[maz-ui](vClickOutside)", n);
-  }
-}
-function V(t) {
-  try {
-    const r = F();
-    document.removeEventListener(r, t[w], !1), delete t[w];
-  } catch (r) {
-    console.error("[maz-ui](vClickOutside)", r);
-  }
-}
-function ce(t, r) {
-  try {
-    if (r.value === r.oldValue)
-      return;
-    P(t, r);
-  } catch (n) {
-    console.error("[maz-ui](vClickOutside)", n);
-  }
-}
-const de = {
-  mounted: P,
-  updated: ce,
-  unmounted: V
-};
-function fe(t, r) {
-  let n;
-  return function(...c) {
-    clearTimeout(n), n = setTimeout(() => {
-      t.apply(this, c);
-    }, r);
-  };
-}
-const pe = {
-  cancelText: "Cancel",
-  confirmText: "Confirm",
-  cancelButton: {
-    text: "Cancel",
-    color: "danger"
-  },
-  confirmButton: {
-    text: "Confirm",
-    color: "success"
-  }
-};
-y(pe);
-y([]);
-const me = ["id"], ve = ["aria-expanded"], ye = ["id"], ke = ["onClick"], he = /* @__PURE__ */ te({
-  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 }
-  },
-  emits: ["menuitem-clicked", "update:open"],
-  setup(t, { emit: r }) {
-    const n = t, c = r, d = ue({
-      componentName: "MazDropdown",
-      providedId: n.id
-    }), C = D(() => import("./chunks/MazBtn-cDJlUVVY.mjs")), k = D(() => import("./chunks/MazLink-C_3Wya94.mjs")), H = D(() => import("./chunks/chevron-down-BkvtON3b.mjs")), i = y(n.open), s = y(), f = fe((e) => {
-      u(e);
-    }, 200);
-    function R() {
-      i.value && u(!1);
-    }
-    function q() {
-      u(!i.value);
-    }
-    function K() {
-      ["click"].includes(n.trigger) && q();
-    }
-    function Q() {
-      ["hover", "both"].includes(n.trigger) && u(!0);
-    }
-    function j() {
-      ["hover", "both"].includes(n.trigger) && (i.value === !1 ? u(!0) : f(!0));
-    }
-    function G() {
-      ["hover", "both"].includes(n.trigger) && f(!1);
-    }
-    function J() {
-      f(!1);
-    }
-    function u(e) {
-      n.disabled || (i.value = e, c("update:open", e));
-    }
-    function W(e) {
-      return "action" in e;
-    }
-    function X(e) {
-      return "href" in e || "to" in e;
-    }
-    async function Y(e, l) {
-      var o;
-      c("menuitem-clicked", l), await ((o = e.action) == null ? void 0 : o.call(e)), n.noCloseOnClick || g();
-    }
-    function g() {
-      n.noCloseOnClick === !1 && u(!1);
-    }
-    function M(e) {
-      e.key === "Escape" ? (e.preventDefault(), u(!1)) : ["ArrowDown", "ArrowUp"].includes(e.key) ? _(e) : e.key === "Enter" && typeof s.value == "number" && (e.preventDefault(), document.querySelectorAll(`#${d.value} .menuitem`)[s.value].click(), g());
-    }
-    function Z(e) {
-      ["ArrowDown", "ArrowUp", "Enter"].includes(e.key) && i.value === !1 && (e.preventDefault(), u(!0));
-    }
-    function _(e) {
-      var m;
-      e.preventDefault();
-      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 I(
-      () => i.value,
-      (e) => {
-        e ? document.addEventListener("keydown", M) : document.removeEventListener("keydown", M), s.value = void 0;
-      }
-    ), I(
-      () => n.open,
-      (e) => u(e)
-    ), (e, l) => T((v(), b("div", {
-      id: a(d),
-      class: $(["m-dropdown", [n.class, { "--block": e.block }]]),
-      style: S(e.style)
-    }, [
-      L("div", {
-        role: "button",
-        tabindex: "0",
-        class: "m-dropdown__wrapper",
-        "aria-expanded": i.value,
-        "aria-haspopup": "menu",
-        onClick: E(K, ["stop"]),
-        onFocus: Q,
-        onBlur: J,
-        onKeydown: Z,
-        onMouseenter: j,
-        onMouseleave: G
-      }, [
-        e.screenReaderDescription || e.$slots["screen-reader-description"] ? (v(), b("span", {
-          key: 0,
-          id: `${a(d)}-labelspan`,
-          class: "maz-sr-only"
-        }, [
-          p(e.$slots, "screen-reader-description", {}, () => [
-            z(
-              B(e.screenReaderDescription),
-              1
-              /* TEXT */
-            )
-          ])
-        ], 8, ye)) : O("v-if", !0),
-        p(e.$slots, "element", { isOpen: i.value }, () => [
-          U(a(C), A({
-            "aria-labelledby": `${a(d)}-labelspan`,
-            color: e.color,
-            disabled: e.disabled
-          }, e.$attrs, {
-            tabindex: "-1",
-            block: e.block
-          }), re({
-            default: h(() => [
-              p(e.$slots, "default")
-            ]),
-            _: 2
-            /* DYNAMIC */
-          }, [
-            e.noChevron ? void 0 : {
-              name: "right-icon",
-              fn: h(() => [
-                e.noChevron ? O("v-if", !0) : (v(), N(a(H), {
-                  key: 0,
-                  class: $([{ "maz-rotate-180": i.value }, "chevron-icon"])
-                }, null, 8, ["class"]))
-              ]),
-              key: "0"
-            }
-          ]), 1040, ["aria-labelledby", "color", "disabled", "block"])
-        ])
-      ], 40, ve),
-      U(le, {
-        name: "maz-scale-fade",
-        persisted: ""
-      }, {
-        default: h(() => [
-          T(L(
-            "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")
-              }, e.menuPanelClass]]),
-              tabindex: "-1",
-              style: S(e.menuPanelStyle),
-              onFocus: l[0] || (l[0] = (o) => a(f)(!0)),
-              onBlur: l[1] || (l[1] = (o) => a(f)(!1)),
-              onMouseenter: l[2] || (l[2] = (o) => ["hover", "both"].includes(e.trigger) ? a(f)(!0) : void 0),
-              onMouseleave: l[3] || (l[3] = (o) => ["hover", "both"].includes(e.trigger) ? a(f)(!1) : void 0)
-            },
-            [
-              p(e.$slots, "dropdown", { items: e.items }, () => [
-                (v(!0), b(
-                  se,
-                  null,
-                  ie(e.items, (o, m) => p(e.$slots, "menuitem", {
-                    key: m,
-                    item: o
-                  }, () => [
-                    X(o) ? (v(), N(a(k), A({
-                      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": s.value === m
-                        },
-                        o.class
-                      ]],
-                      tabindex: "-1",
-                      onClick: E(g, ["stop"])
-                    }), {
-                      default: h(() => [
-                        p(e.$slots, "menuitem-label", { item: o }, () => [
-                          z(
-                            B(o.label),
-                            1
-                            /* TEXT */
-                          )
-                        ])
-                      ]),
-                      _: 2
-                      /* DYNAMIC */
-                    }, 1040, ["target", "to", "href", "color", "underline-only-hover", "class"])) : W(o) ? (v(), b("button", A({
-                      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: E((x) => Y(o, x), ["stop"])
-                    }), [
-                      p(e.$slots, "menuitem-label", { item: o }, () => [
-                        z(
-                          B(o.label),
-                          1
-                          /* TEXT */
-                        )
-                      ])
-                    ], 16, ke)) : O("v-if", !0)
-                  ])),
-                  128
-                  /* KEYED_FRAGMENT */
-                ))
-              ])
-            ],
-            38
-            /* CLASS, STYLE, NEED_HYDRATION */
-          ), [
-            [ae, i.value]
-          ])
-        ]),
-        _: 3
-        /* FORWARDED */
-      })
-    ], 14, me)), [
-      [a(de), R]
-    ]);
-  }
-});
+import { a as f } from "./chunks/MazDropdown-peYVJsXv.mjs";
 export {
-  he as default
+  f as default
 };

package/components/chunks/{MazBtn-cDJlUVVY.mjs → MazBtn-BJxI5VQw.mjs}

@@ -28,7 +28,7 @@ import '../assets/MazBtn.css';const N = {
     justify: { default: "center" }
   },
   setup(z) {
-    const n = z, b = v(() => import("./MazSpinner-yr9xVdAa.mjs")), c = v(() => import("./MazIcon-BbvBov5G.mjs")), { href: g, to: h } = E(), f = O(), y = o(() => g ? "a" : h ? "router-link" : "button"), j = o(
+    const n = z, b = v(() => import("./MazSpinner-yr9xVdAa.mjs")), c = v(() => import("./MazIcon-Bk4mYF1h.mjs")), { href: g, to: h } = E(), f = O(), y = o(() => g ? "a" : h ? "router-link" : "button"), j = o(
       () => n.pastel ? `--${n.color}-pastel` : n.outline ? `--${n.color}-outline` : `--${n.color}`
     ), m = o(
       () => (n.loading || n.disabled) && y.value === "button"

package/components/chunks/MazDropdown-peYVJsXv.mjs

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

package/components/chunks/MazIcon-Bk4mYF1h.mjs

@@ -0,0 +1,4 @@
+import { _ as f } from "./MazDropdown-peYVJsXv.mjs";
+export {
+  f as default
+};

package/components/chunks/{MazLink-C_3Wya94.mjs → MazLink-Cd4MwIC9.mjs}

@@ -21,7 +21,7 @@ import '../assets/MazLink.css';const y = /* @__PURE__ */ f({
   setup(g) {
     const u = d(
       () => import("./arrow-top-right-on-square-jPmYJ34F.mjs")
-    ), i = d(() => import("./MazIcon-BbvBov5G.mjs"));
+    ), i = d(() => import("./MazIcon-Bk4mYF1h.mjs"));
     return (e, c) => (o(), t(r(e.to ? "router-link" : "a"), s({
       id: e.id,
       class: ["m-link", [

package/nuxt/index.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.0.0"
   },
-  "version": "3.47.2-beta.4",
+  "version": "3.47.2-beta.5",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "maz-ui",
   "type": "module",
-  "version": "3.47.2-beta.4",
+  "version": "3.47.2-beta.5",
   "description": "A standalone components library for Vue.Js 3 & Nuxt.Js 3",
   "author": "Louis Mazel <me@loicmazuel.com>",
   "license": "MIT",

package/types/components/MazDropdown.vue.d.ts

@@ -1,7 +1,7 @@
 import type { RouteLocationRaw } from 'vue-router';
 import type { Color } from './MazBtn.vue';
 import type { MazLinkProps } from './MazLink.vue';
-import type { Position } from './types';
+import type { Icon, Position } from './types';
 import { type HTMLAttributes } from 'vue';
 export type { Color, Position };
 type ItemBase = Record<string, unknown> & {
@@ -77,6 +77,7 @@ export interface MazDropdownProps {
      * If true, the button will have a full width
      */
     block?: boolean;
+    dropdownIcon?: string | Icon;
 }
 declare function __VLS_template(): {
     slots: {