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

package/components/MazDrawer.mjs

@@ -1,196 +1,4 @@
-import { defineComponent as V, ref as S, onMounted as g, watch as N, openBlock as r, createBlock as h, Teleport as T, createVNode as f, Transition as O, withCtx as v, createElementBlock as D, normalizeClass as d, createElementVNode as a, withModifiers as P, mergeProps as K, renderSlot as k, createCommentVNode as L, defineAsyncComponent as B, normalizeStyle as F, createTextVNode as q, toDisplayString as I, unref as z } from "vue";
-import './assets/MazDrawer.css';const A = "--backdrop-present", U = /* @__PURE__ */ V({
-  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: void 0 },
-    backdropContentClass: { default: void 0 }
-  },
-  emits: ["open", "close", "update:model-value", "before-close"],
-  setup(b, { expose: i, emit: c }) {
-    const e = b, t = c;
-    function n() {
-      document.documentElement.classList.add(A);
-    }
-    async function M() {
-      document.querySelector(".m-backdrop.--present") || document.documentElement.classList.remove(A);
-    }
-    const s = S(e.modelValue);
-    function l() {
-      C(!1);
-    }
-    async function C(o) {
-      var p;
-      o || (t("before-close"), await ((p = e.beforeClose) == null ? void 0 : p.call(e))), s.value = o;
-    }
-    function y() {
-      t("open");
-    }
-    function E() {
-      t("update:model-value", !1), t("close"), u();
-    }
-    function $() {
-      e.persistent || l();
-    }
-    function m(o) {
-      !e.noCloseOnEscKey && o.key === "Escape" && !e.persistent && l();
-    }
-    function w() {
-      n(), document.addEventListener("keyup", m, !1);
-    }
-    function u() {
-      document.removeEventListener("keyup", m), M();
-    }
-    return g(() => {
-      e.modelValue ? w() : u();
-    }), N(
-      () => e.modelValue,
-      (o) => {
-        s.value = o, o ? w() : u();
-      }
-    ), i({
-      onBackdropAnimationEnter: y,
-      onBackdropAnimationLeave: E,
-      onBackdropClicked: $,
-      close: l,
-      present: s,
-      toggleModal: C,
-      onKeyPress: m
-    }), (o, p) => (r(), h(T, { to: o.teleportSelector }, [
-      f(O, {
-        appear: "",
-        name: o.transitionName,
-        onAfterEnter: y,
-        onAfterLeave: E
-      }, {
-        default: v(() => [
-          s.value ? (r(), D(
-            "div",
-            {
-              key: 0,
-              class: d(["m-backdrop --present", [o.backdropClass]]),
-              tabindex: "-1",
-              role: "dialog"
-            },
-            [
-              a(
-                "button",
-                {
-                  class: d(["m-backdrop-overlay", { "--disabled": o.persistent }]),
-                  tabindex: "-1",
-                  onClick: P($, ["self"])
-                },
-                null,
-                2
-                /* CLASS */
-              ),
-              a(
-                "div",
-                K({
-                  class: ["m-backdrop-content", o.backdropContentClass]
-                }, o.$attrs, {
-                  role: "document",
-                  tabindex: "0"
-                }),
-                [
-                  k(o.$slots, "default", { close: l })
-                ],
-                16
-                /* FULL_PROPS */
-              )
-            ],
-            2
-            /* CLASS */
-          )) : L("v-if", !0)
-        ]),
-        _: 3
-        /* FORWARDED */
-      }, 8, ["name"])
-    ], 8, ["to"]));
-  }
-}), X = { class: "m-drawer-header__title" }, j = {
-  key: 0,
-  class: "m-drawer-header__close"
-}, G = { class: "m-drawer-body" }, J = /* @__PURE__ */ V({
-  __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(b) {
-    const i = B(() => import("./chunks/MazBtn-BB1FyYWv.mjs").then((e) => e.M)), c = B(() => import("./chunks/x-mark-CnZwVvA7.mjs"));
-    return (e, t) => (r(), h(U, {
-      "backdrop-class": ["m-drawer", `--${e.variant}`, e.backdropClass],
-      style: F({
-        "--maz-drawer-size": e.size
-      }),
-      onClose: t[0] || (t[0] = (n) => e.$emit("close")),
-      onOpen: t[1] || (t[1] = (n) => e.$emit("open")),
-      onBeforeClose: t[2] || (t[2] = (n) => e.$emit("before-close")),
-      "onUpdate:modelValue": t[3] || (t[3] = (n) => e.$emit("update:model-value", n))
-    }, {
-      default: v(({ close: n }) => [
-        a(
-          "div",
-          {
-            class: d(["m-drawer-content-wrap", [`--${e.variant}`]])
-          },
-          [
-            a(
-              "header",
-              {
-                class: d(["m-drawer-header", [e.$slots.title || e.title ? "--between" : "--end"]])
-              },
-              [
-                a("h4", X, [
-                  k(e.$slots, "title", { close: n }, () => [
-                    q(
-                      I(e.title),
-                      1
-                      /* TEXT */
-                    )
-                  ])
-                ]),
-                e.noClose ? L("v-if", !0) : (r(), D("div", j, [
-                  f(z(i), {
-                    size: "sm",
-                    color: "transparent",
-                    onClick: n
-                  }, {
-                    default: v(() => [
-                      f(z(c), { class: "icon maz-text-lg" })
-                    ]),
-                    _: 2
-                    /* DYNAMIC */
-                  }, 1032, ["onClick"])
-                ]))
-              ],
-              2
-              /* CLASS */
-            ),
-            a("div", G, [
-              k(e.$slots, "default", { close: n })
-            ])
-          ],
-          2
-          /* CLASS */
-        )
-      ]),
-      _: 3
-      /* FORWARDED */
-    }, 8, ["backdrop-class", "style"]));
-  }
-});
+import { M as f } from "./chunks/MazDrawer-Bas9dy0D.mjs";
 export {
-  J as default
+  f as default
 };

package/components/MazDropdown.d.ts

@@ -1,9 +1,9 @@
 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, Size } from './types';
 import { type HTMLAttributes } from 'vue';
-export type { Color, Position };
+export type { Color, Position, Size };
 type ItemBase = Record<string, unknown> & {
     label: string;
     class?: unknown;
@@ -77,14 +77,34 @@ export interface MazDropdownProps {
      * If true, the button will have a full width
      */
     block?: boolean;
+    /**
+     * Custom dropdown icon
+     * You can use a string to define the icon name or a Vue component
+     * @default undefined
+     */
+    dropdownIcon?: string | Icon;
+    /**
+     * If true, the dropdown icon will rotate when the dropdown is open
+     * @default true
+     */
+    dropdownIconAnimation?: boolean;
+    /**
+     * Size of the button
+     * @default 'md'
+     */
+    size?: Size;
 }
 declare function __VLS_template(): {
+    attrs: Partial<{}>;
     slots: {
         "screen-reader-description"?(_: {}): any;
         element?(_: {
             isOpen: boolean;
         }): any;
         default?(_: {}): any;
+        "dropdown-icon"?(_: {
+            isOpen: boolean;
+        }): any;
         dropdown?(_: {
             items: MenuItem[];
         }): any;
@@ -119,7 +139,7 @@ declare function __VLS_template(): {
         }): any;
     };
     refs: {};
-    attrs: Partial<{}>;
+    rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import("vue").DefineComponent<MazDropdownProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -130,6 +150,7 @@ declare const __VLS_component: import("vue").DefineComponent<MazDropdownProps, {
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
     style: string | false | import("vue").CSSProperties | import("vue").StyleValue[] | null;
+    size: Size;
     color: Color;
     class: HTMLAttributes["class"];
     id: string;
@@ -137,6 +158,7 @@ declare const __VLS_component: import("vue").DefineComponent<MazDropdownProps, {
     trigger: "click" | "hover" | "both";
     items: MenuItem[];
     screenReaderDescription: string;
+    dropdownIconAnimation: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

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-0r445NfW.mjs";
 export {
-  he as default
+  f as default
 };

package/components/MazDropzone.d.ts

@@ -124,6 +124,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     height: string | number;
     noDestroyOnUnmount: boolean;
 }, {}, {
-    MazSpinner: import("vue").DefineComponent<import("./MazSpinner.vue").MazSpinnerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("./MazSpinner.vue").MazSpinnerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    MazSpinner: import("vue").DefineComponent<import("./MazSpinner.vue").MazSpinnerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("./MazSpinner.vue").MazSpinnerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, SVGSVGElement>;
 }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/components/MazExpandAnimation.d.ts

@@ -10,24 +10,25 @@ export interface Props {
      */
     timingFunction?: string;
 }
-declare let __VLS_typeProps: Props;
+type __VLS_Props = Props;
 type __VLS_PublicProps = {
     modelValue?: boolean;
-} & typeof __VLS_typeProps;
+} & __VLS_Props;
 declare function __VLS_template(): {
+    attrs: Partial<{}>;
     slots: {
         default?(_: {}): any;
     };
     refs: {
         expandAnimationRef: HTMLDivElement;
     };
-    attrs: Partial<{}>;
+    rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (modelValue: boolean) => any;
+    "update:modelValue": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((modelValue: boolean) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {
     duration: string;
     timingFunction: string;