maz-ui 3.50.0 → 4.0.0-alpha.2

package/dist/components/MazAvatar.js

@@ -0,0 +1,124 @@
+import { defineComponent as I, defineAsyncComponent as u, computed as i, openBlock as l, createBlock as c, resolveDynamicComponent as L, normalizeStyle as m, normalizeClass as f, withCtx as E, createElementVNode as p, createElementBlock as n, Fragment as M, unref as g, mergeProps as P, createCommentVNode as r, renderSlot as s, toDisplayString as k, createVNode as A } from "vue";
+import { _ as D } from "../chunks/_plugin-vue_export-helper.CHgC5LLL.js";
+import '../assets/MazAvatar.L1UreldR.css';const N = ["tabindex"], R = ["src", "alt", "loading"], V = { class: "m-avatar__initial" }, q = {
+  key: 0,
+  class: "m-avatar__caption"
+}, F = /* @__PURE__ */ I({
+  __name: "MazAvatar",
+  props: {
+    style: {},
+    class: {},
+    src: { default: void 0 },
+    caption: { default: void 0 },
+    href: { default: void 0 },
+    to: { default: void 0 },
+    alt: { default: "avatar image" },
+    target: { default: "_self" },
+    size: { default: void 0 },
+    bordered: { type: Boolean },
+    clickable: { type: Boolean },
+    square: { type: Boolean },
+    noElevation: { type: Boolean },
+    showCaption: { type: Boolean },
+    imageHeightFull: { type: Boolean },
+    noLoader: { type: Boolean },
+    buttonColor: { default: "info" },
+    noClickableIcon: { type: Boolean },
+    letterCount: { default: void 0 },
+    roundedSize: { default: "full" },
+    fallbackSrc: { default: void 0 },
+    noPhoto: { type: Boolean },
+    loading: { default: "intersecting" }
+  },
+  emits: ["click", "intersecting", "loading", "loaded", "error"],
+  setup(b, { emit: y }) {
+    const t = b, v = y, h = u(() => import("./MazLazyImg.js")), C = u(() => import("../chunks/pencil.Cl_0Egfc.js")), z = i(() => t.to ? "RouterLink" : t.href ? "a" : "div"), d = i(() => !!t.to || !!t.href);
+    function S(e, o = t.letterCount) {
+      return e.split(" ").map((B) => B[0]).join("").slice(0, o);
+    }
+    const w = i(() => t.src || !t.src && !t.caption);
+    function $(e) {
+      if (v("error", e.target), t.fallbackSrc && e.target instanceof HTMLImageElement) {
+        const o = new URL(e.target.src), a = new URL(t.fallbackSrc);
+        if (o.href === a.href)
+          return;
+        e.target.src = t.fallbackSrc;
+      }
+    }
+    return (e, o) => (l(), c(L(z.value), {
+      style: m([{ fontSize: e.size }, e.style]),
+      class: f(["m-avatar m-reset-css", [
+        {
+          "--has-link": d.value
+        },
+        t.class
+      ]]),
+      href: e.href,
+      to: e.to,
+      target: d.value ? e.target : void 0
+    }, {
+      default: E(() => [
+        p("div", {
+          class: f(["m-avatar__wrapper", [
+            {
+              "--has-shadow": !e.noElevation,
+              "--bordered": e.bordered,
+              "--clickable": e.clickable,
+              "--has-initial": !e.src && e.caption
+            },
+            `--rounded-${e.square ? "none" : e.roundedSize}`
+          ]]),
+          tabindex: e.clickable ? 0 : -1
+        }, [
+          w.value ? (l(), n(M, { key: 0 }, [
+            e.loading === "intersecting" ? (l(), c(g(h), P({ key: 0 }, e.$attrs, {
+              class: "m-avatar__picture maz-w-full maz-max-w-full",
+              src: e.src,
+              alt: e.alt,
+              "no-photo": e.noPhoto,
+              "image-height-full": "",
+              "no-loader": e.noLoader,
+              "fallback-src": e.fallbackSrc,
+              onClick: o[0] || (o[0] = (a) => e.clickable ? e.$emit("click", a) : null),
+              onError: o[1] || (o[1] = (a) => e.$emit("error", a)),
+              onLoaded: o[2] || (o[2] = (a) => e.$emit("loaded", a)),
+              onLoading: o[3] || (o[3] = (a) => e.$emit("loading", a)),
+              onIntersecting: o[4] || (o[4] = (a) => e.$emit("intersecting", a))
+            }), null, 16, ["src", "alt", "no-photo", "no-loader", "fallback-src"])) : (l(), n("img", {
+              key: 1,
+              class: "m-avatar__picture maz-w-full maz-max-w-full",
+              src: e.src ?? e.fallbackSrc,
+              alt: e.alt,
+              loading: e.loading,
+              onError: $
+            }, null, 40, R))
+          ], 64)) : r("", !0),
+          e.caption && !e.src ? s(e.$slots, "round-text", { key: 1 }, () => [
+            p("span", V, k(S(e.caption)), 1)
+          ], !0) : r("", !0),
+          e.clickable ? (l(), n("button", {
+            key: 2,
+            type: "button",
+            tabindex: "-1",
+            class: "m-avatar__button",
+            style: m({
+              backgroundColor: e.src ? `var(--maz-color-${e.buttonColor}-alpha)` : `var(--maz-color-${e.buttonColor})`
+            }),
+            onClick: o[5] || (o[5] = (a) => e.$emit("click", a))
+          }, [
+            e.noClickableIcon ? r("", !0) : s(e.$slots, "icon", { key: 0 }, () => [
+              A(g(C), { class: "m-avatar__button__icon" })
+            ], !0)
+          ], 4)) : r("", !0)
+        ], 10, N),
+        s(e.$slots, "caption", {}, () => [
+          e.showCaption && e.caption ? (l(), n("p", q, k(e.caption), 1)) : r("", !0)
+        ], !0)
+      ]),
+      _: 3
+    }, 8, ["style", "class", "href", "to", "target"]));
+  }
+}), G = /* @__PURE__ */ D(F, [["__scopeId", "data-v-ba997cf5"]]);
+export {
+  G as default
+};

package/dist/components/MazBackdrop.js

@@ -0,0 +1,128 @@
+import { defineComponent as L, ref as P, onMounted as V, watch as D, nextTick as C, openBlock as E, createBlock as M, Teleport as N, createVNode as T, Transition as $, withCtx as O, createElementBlock as j, mergeProps as q, createElementVNode as f, normalizeClass as z, withModifiers as F, renderSlot as K, createCommentVNode as I } from "vue";
+import { _ as G } from "../chunks/_plugin-vue_export-helper.CHgC5LLL.js";
+import '../assets/MazBackdrop.C72SNI28.css';const H = {
+  role: "dialog",
+  class: "m-backdrop-container",
+  "aria-modal": "true"
+}, J = { class: "m-backdrop-wrapper" }, g = "--backdrop-present", Q = /* @__PURE__ */ L({
+  inheritAttrs: !1,
+  __name: "MazBackdrop",
+  props: {
+    modelValue: { type: Boolean, default: !1 },
+    teleportSelector: { default: "body" },
+    beforeClose: { type: Function, default: void 0 },
+    persistent: { type: Boolean, default: !1 },
+    noCloseOnEscKey: { type: Boolean, default: !1 },
+    transitionName: { default: "backdrop-anim" },
+    backdropClass: { default: () => {
+    } },
+    backdropContentClass: { default: () => {
+    } },
+    contentPadding: { type: Boolean, default: !1 },
+    justify: { default: "none" },
+    align: { default: "none" },
+    variant: {}
+  },
+  emits: ["open", "close", "update:model-value", "before-close"],
+  setup(o, { expose: B, emit: h }) {
+    const n = h;
+    function A() {
+      document.documentElement.classList.add(g);
+    }
+    function w() {
+      document.querySelector(".m-backdrop.--present") || document.documentElement.classList.remove(g);
+    }
+    const a = P(o.modelValue);
+    function s() {
+      m(!1);
+    }
+    async function m(e) {
+      var t;
+      e || (n("before-close"), await ((t = o.beforeClose) == null ? void 0 : t.call(o))), a.value = e;
+    }
+    function p() {
+      n("open");
+    }
+    function k() {
+      n("update:model-value", !1), n("close"), c();
+    }
+    function d() {
+      o.persistent || s();
+    }
+    function r(e) {
+      !o.noCloseOnEscKey && e.key === "Escape" && !o.persistent && s();
+    }
+    function v() {
+      A(), document.addEventListener("keyup", r, !1);
+    }
+    function c() {
+      document.removeEventListener("keyup", r), w();
+    }
+    V(() => {
+      o.modelValue ? v() : c();
+    });
+    let l = null;
+    function S(e) {
+      const t = document.querySelector(e), i = t && Array.from(t.querySelectorAll('a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select')), u = i == null ? void 0 : i.filter((y) => {
+        const b = window.getComputedStyle(y);
+        return b.display !== "none" && b.visibility !== "hidden" && !y.disabled;
+      });
+      return u && u.length > 0 ? u[0] : null;
+    }
+    return D(
+      () => o.modelValue,
+      async (e) => {
+        if (a.value = e, e) {
+          v(), l = document.activeElement, await C();
+          const t = S(".m-backdrop-content");
+          t == null || t.focus();
+        } else
+          c(), await C(), l == null || l.focus();
+      }
+    ), B({
+      onBackdropAnimationEnter: p,
+      onBackdropAnimationLeave: k,
+      onBackdropClicked: d,
+      close: s,
+      present: a,
+      toggleModal: m,
+      onKeyPress: r
+    }), (e, t) => (E(), M(N, { to: e.teleportSelector }, [
+      T($, {
+        appear: "",
+        name: e.transitionName,
+        onAfterEnter: p,
+        onAfterLeave: k
+      }, {
+        default: O(() => [
+          a.value ? (E(), j("div", q({
+            key: 0,
+            class: "m-backdrop --present m-reset-css"
+          }, e.$attrs, {
+            class: [e.backdropClass, e.variant && `--variant-${e.variant}`, { "--persistent": e.persistent }]
+          }), [
+            f("div", H, [
+              f("div", J, [
+                f("div", {
+                  class: z(["m-backdrop-content", [e.backdropContentClass, `--justify-${e.justify}`, `--align-${e.align}`, { "--padding": e.contentPadding }]]),
+                  role: "button",
+                  tabindex: "-1",
+                  onClick: F(d, ["self"])
+                }, [
+                  K(e.$slots, "default", {
+                    close: s,
+                    onBackdropClicked: d
+                  }, void 0, !0)
+                ], 2)
+              ])
+            ])
+          ], 16)) : I("", !0)
+        ]),
+        _: 3
+      }, 8, ["name"])
+    ], 8, ["to"]));
+  }
+}), X = /* @__PURE__ */ G(Q, [["__scopeId", "data-v-f2ffa088"]]);
+export {
+  X as default
+};

package/dist/components/MazBadge.js

@@ -0,0 +1,28 @@
+import { defineComponent as o, openBlock as a, createElementBlock as l, normalizeClass as t, normalizeStyle as r, renderSlot as s } from "vue";
+import { _ as n } from "../chunks/_plugin-vue_export-helper.CHgC5LLL.js";
+import '../assets/MazBadge.RMWNkgZL.css';const d = /* @__PURE__ */ o({
+  __name: "MazBadge",
+  props: {
+    color: { default: "primary" },
+    size: { default: "0.8em" },
+    nowrap: { type: Boolean, default: !1 },
+    outline: { type: Boolean, default: !1 },
+    pastel: { type: Boolean, default: !1 },
+    roundedSize: { default: "md" }
+  },
+  setup(p) {
+    return (e, u) => (a(), l("span", {
+      class: t(["m-badge m-reset-css", [
+        `--${e.color}`,
+        { "--outline": e.outline, "--pastel": e.pastel, "--nowrap": e.nowrap },
+        `--rounded-${e.roundedSize}`
+      ]]),
+      style: r({ fontSize: e.size })
+    }, [
+      s(e.$slots, "default", {}, void 0, !0)
+    ], 6));
+  }
+}), m = /* @__PURE__ */ n(d, [["__scopeId", "data-v-7471360e"]]);
+export {
+  m as default
+};

package/dist/components/MazBottomSheet.js

@@ -0,0 +1,53 @@
+import { defineComponent as u, defineAsyncComponent as n, openBlock as a, createBlock as s, withCtx as l, createElementVNode as c, normalizeClass as f, renderSlot as C, unref as m, createVNode as B, createCommentVNode as v } from "vue";
+import k from "./MazBackdrop.js";
+import { _ as z } from "../chunks/_plugin-vue_export-helper.CHgC5LLL.js";
+import '../assets/MazBottomSheet.Dqr-kpLb.css';const _ = /* @__PURE__ */ u({
+  __name: "MazBottomSheet",
+  props: {
+    modelValue: { type: Boolean },
+    noClose: { type: Boolean },
+    noPadding: { type: Boolean }
+  },
+  emits: ["update:model-value", "open", "close"],
+  setup(b, { emit: d }) {
+    const r = d, i = n(() => import("./MazBtn.js")), p = n(() => import("../chunks/x-mark.DTWA3lfG.js"));
+    return (o, t) => (a(), s(k, {
+      "model-value": o.modelValue,
+      "transition-name": "bottom-sheet-anim",
+      "backdrop-class": "--bottom-sheet",
+      "content-padding": !1,
+      align: "end",
+      justify: "none",
+      variant: "bottom-sheet",
+      onClose: t[0] || (t[0] = (e) => o.$emit("close", e)),
+      onOpen: t[1] || (t[1] = (e) => o.$emit("open", e)),
+      "onUpdate:modelValue": t[2] || (t[2] = (e) => r("update:model-value", e))
+    }, {
+      default: l(({ close: e }) => [
+        c("div", {
+          class: f(["m-bottom-sheet__container", {
+            "--no-padding": o.noPadding
+          }])
+        }, [
+          C(o.$slots, "default", { close: e }, void 0, !0),
+          o.noClose ? v("", !0) : (a(), s(m(i), {
+            key: 0,
+            size: "sm",
+            class: "m-bottom-sheet__close",
+            color: "transparent",
+            onClick: e
+          }, {
+            default: l(() => [
+              B(m(p), { class: "maz-text-lg" })
+            ]),
+            _: 2
+          }, 1032, ["onClick"]))
+        ], 2)
+      ]),
+      _: 3
+    }, 8, ["model-value"]));
+  }
+}), M = /* @__PURE__ */ z(_, [["__scopeId", "data-v-7668c29f"]]);
+export {
+  M as default
+};

package/dist/components/MazBtn.js

@@ -0,0 +1,102 @@
+import { defineComponent as C, defineAsyncComponent as m, useAttrs as $, computed as o, openBlock as t, createBlock as l, resolveDynamicComponent as r, normalizeClass as a, normalizeStyle as S, withCtx as j, renderSlot as i, unref as u, createCommentVNode as d, createElementBlock as M, createVNode as E } from "vue";
+import { _ as F } from "../chunks/_plugin-vue_export-helper.CHgC5LLL.js";
+import '../assets/MazBtn.7QWd6o3M.css';const O = {
+  key: 0,
+  class: "m-btn-loader-container"
+}, A = /* @__PURE__ */ C({
+  __name: "MazBtn",
+  props: {
+    variant: { default: "button" },
+    size: { default: "md" },
+    color: { default: "primary" },
+    type: { default: "button" },
+    rounded: { type: Boolean },
+    roundedSize: { default: "lg" },
+    noRounded: { type: Boolean },
+    outline: { type: Boolean },
+    pastel: { type: Boolean },
+    block: { type: Boolean },
+    noUnderline: { type: Boolean },
+    loading: { type: Boolean },
+    disabled: { type: Boolean },
+    fab: { type: Boolean },
+    icon: { type: [String, Function, Object], default: void 0 },
+    leftIcon: { type: [String, Function, Object], default: void 0 },
+    rightIcon: { type: [String, Function, Object], default: void 0 },
+    noPadding: { type: Boolean },
+    noElevation: { type: Boolean },
+    justify: { default: "center" }
+  },
+  setup(y) {
+    const n = y, c = m(() => import("./MazIcon.js")), v = m(() => import("./MazSpinner.js")), { href: b, to: z } = $(), f = o(() => b ? "a" : z ? "router-link" : "button"), g = o(() => n.pastel ? `--${n.color}-pastel` : n.outline ? `--${n.color}-outline` : `--${n.color}`), p = o(
+      () => (n.loading || n.disabled) && f.value === "button"
+    ), B = o(() => p.value ? "--cursor-default" : "--cursor-pointer"), k = o(() => `--is-${n.variant}`), I = o(() => n.loading && n.variant === "button"), h = o(() => f.value === "button" ? n.type : void 0), s = o(() => n.size === "xl" ? "maz-text-3xl" : n.size === "lg" ? "maz-text-2xl" : n.size === "md" ? "maz-text-xl" : n.size === "sm" ? "maz-text-lg" : n.size === "xs" ? "maz-text-base" : n.size === "mini" ? "maz-text-sm" : "maz-text-xl");
+    return (e, D) => (t(), l(r(f.value), {
+      disabled: p.value || void 0,
+      class: a(["m-btn m-reset-css", [
+        `--${e.size}`,
+        !e.fab && !e.rounded && e.roundedSize && `--rounded-${e.roundedSize}`,
+        g.value,
+        B.value,
+        k.value,
+        {
+          "--block": e.block,
+          "--no-underline": e.noUnderline,
+          "--fab": e.fab,
+          "--loading": e.loading,
+          "--disabled": p.value,
+          "--rounded": e.rounded,
+          "--no-rounded": e.noRounded,
+          "--no-padding": e.noPadding,
+          "--no-elevation": e.noElevation
+        }
+      ]]),
+      style: S([`--justify: ${e.justify}`]),
+      type: h.value
+    }, {
+      default: j(() => [
+        i(e.$slots, "left-icon", {}, () => [
+          typeof e.leftIcon == "string" ? (t(), l(u(c), {
+            key: 0,
+            name: e.leftIcon,
+            class: a([s.value])
+          }, null, 8, ["name", "class"])) : e.leftIcon ? (t(), l(r(e.leftIcon), {
+            key: 1,
+            class: a([s.value])
+          }, null, 8, ["class"])) : d("", !0)
+        ], !0),
+        i(e.$slots, "icon", {}, () => [
+          typeof e.icon == "string" ? (t(), l(u(c), {
+            key: 0,
+            name: e.icon,
+            class: a([s.value])
+          }, null, 8, ["name", "class"])) : e.icon ? (t(), l(r(e.icon), {
+            key: 1,
+            class: a([s.value])
+          }, null, 8, ["class"])) : d("", !0)
+        ], !0),
+        i(e.$slots, "default", {}, void 0, !0),
+        i(e.$slots, "right-icon", {}, () => [
+          typeof e.rightIcon == "string" ? (t(), l(u(c), {
+            key: 0,
+            name: e.rightIcon,
+            class: a([s.value])
+          }, null, 8, ["name", "class"])) : e.rightIcon ? (t(), l(r(e.rightIcon), {
+            key: 1,
+            class: a([s.value])
+          }, null, 8, ["class"])) : d("", !0)
+        ], !0),
+        I.value ? (t(), M("div", O, [
+          E(u(v), {
+            size: "2em",
+            color: e.color
+          }, null, 8, ["color"])
+        ])) : d("", !0)
+      ]),
+      _: 3
+    }, 8, ["disabled", "class", "style", "type"]));
+  }
+}), R = /* @__PURE__ */ F(A, [["__scopeId", "data-v-db145b2a"]]);
+export {
+  R as default
+};

package/dist/components/MazCard.js

@@ -0,0 +1,173 @@
+import { defineComponent as A, defineAsyncComponent as m, useSlots as H, computed as r, ref as N, watch as T, openBlock as a, createElementBlock as n, normalizeClass as u, createBlock as p, resolveDynamicComponent as g, withModifiers as b, withCtx as c, renderSlot as i, createTextVNode as j, toDisplayString as E, createCommentVNode as s, unref as v, createVNode as w, mergeProps as P, createElementVNode as k, withDirectives as W, vShow as I } from "vue";
+import { _ as R } from "../chunks/_plugin-vue_export-helper.CHgC5LLL.js";
+import '../assets/MazCard.Cod9pIM4.css';const G = {
+  key: 0,
+  class: "m-card__gallery__wrapper"
+}, L = { class: "maz-min-w-0 maz-flex-1" }, q = {
+  key: 0,
+  class: "m-card__title"
+}, F = {
+  key: 1,
+  class: "m-card__subtitle"
+}, J = {
+  key: 2,
+  class: "m-card__content"
+}, K = {
+  key: 2,
+  class: "m-card__actions maz-flex maz-p-2"
+}, Q = /* @__PURE__ */ A({
+  __name: "MazCard",
+  props: {
+    images: { default: void 0 },
+    orientation: { default: "column" },
+    href: { default: void 0 },
+    to: { default: void 0 },
+    hrefTarget: { default: "_self" },
+    footerAlign: { default: "right" },
+    galleryWidth: { default: 200 },
+    galleryHeight: { default: 150 },
+    zoom: { type: Boolean },
+    elevation: { type: Boolean, default: !0 },
+    radius: { type: Boolean, default: !0 },
+    bordered: { type: Boolean },
+    imagesShowCount: { default: 3 },
+    noRemaining: { type: Boolean, default: !0 },
+    scale: { type: Boolean, default: !0 },
+    wrapperClass: { default: void 0 },
+    noPadding: { type: Boolean },
+    overflowHidden: { type: Boolean },
+    collapsable: { type: Boolean },
+    collapsible: { type: Boolean },
+    collapseOpen: { type: Boolean },
+    header: { default: void 0 },
+    block: { type: Boolean }
+  },
+  setup(C) {
+    const o = C, $ = m(() => import("./MazBtn.js")), _ = m(() => import("./MazGallery.js")), B = m(() => import("./MazTransitionExpand.js")), S = m(() => import("../chunks/chevron-down.CWWH3GZ1.js")), M = H(), t = r(() => o.collapsible || o.collapsable), l = N(t.value ? o.collapseOpen : !0), z = r(() => o.href || o.to);
+    T(
+      () => o.collapseOpen,
+      (e) => {
+        t.value && (l.value = e);
+      }
+    );
+    const y = r(() => ({
+      is: o.href ? "a" : o.to ? "router-link" : "div",
+      ...o.href && { href: o.href },
+      ...o.to && { to: o.to },
+      target: o.hrefTarget
+    })), h = r(() => ["column", "column-reverse"].includes(o.orientation)), f = r(() => {
+      const e = /* @__PURE__ */ new Set(["default", "title", "subtitle", "content"]);
+      return Object.keys(M).some((d) => e.has(d));
+    }), D = r(() => f.value ? o.galleryWidth : "100%"), O = r(
+      () => o.footerAlign === "right" ? "maz-text-end" : "maz-text-start"
+    );
+    return (e, d) => (a(), n("div", {
+      class: u(["m-card m-reset-css", [
+        {
+          "m-card--linked": z.value,
+          "m-card--no-scale": !e.scale,
+          "maz-elevation": e.elevation,
+          "--block": e.block,
+          "maz-overflow-hidden": e.overflowHidden || !l.value,
+          "maz-rounded": e.radius,
+          "maz-border maz-border-solid maz-border-color-light": e.bordered
+        }
+      ]])
+    }, [
+      e.$slots.header || e.header || t.value ? (a(), p(g(t.value ? "button" : "div"), {
+        key: 0,
+        class: u(["m-card__header maz-border-b maz-border-solid", [
+          l.value ? "maz-rounded-t maz-border-color-light" : "maz-border-transparent",
+          { "--is-collapsible": t.value },
+          { "maz-justify-end": (!e.$slots.header || !e.header) && t.value },
+          { "maz-justify-between": e.$slots.header || e.header }
+        ]]),
+        tabindex: "-1",
+        onClick: d[1] || (d[1] = b((V) => t.value ? l.value = !l.value : void 0, ["stop"]))
+      }, {
+        default: c(() => [
+          e.$slots.header || e.header ? i(e.$slots, "header", { key: 0 }, () => [
+            j(E(e.header), 1)
+          ], !0) : s("", !0),
+          t.value ? (a(), p(v($), {
+            key: 1,
+            color: "transparent",
+            class: "maz-ml-2 maz-text-sm",
+            size: "xs",
+            onClick: d[0] || (d[0] = b((V) => l.value = !l.value, ["stop"]))
+          }, {
+            default: c(() => [
+              w(v(S), {
+                class: u([{ "--is-open": l.value }, "m-card__collapse-icon maz-text-xl"])
+              }, null, 8, ["class"])
+            ]),
+            _: 1
+          })) : s("", !0)
+        ]),
+        _: 3
+      }, 8, ["class"])) : s("", !0),
+      (a(), p(g(y.value.is), P(y.value, {
+        class: ["m-card__wrapper", [`m-card__wrapper--${e.orientation}`, { "m-card__link": z.value }]]
+      }), {
+        default: c(() => [
+          e.images ? (a(), n("div", G, [
+            w(v(_), {
+              "no-radius": !e.radius,
+              width: D.value,
+              height: e.galleryHeight,
+              "images-shown-count": e.imagesShowCount,
+              images: e.images,
+              "no-zoom": !e.zoom,
+              "no-width": h.value,
+              "no-height": !h.value && f.value,
+              "no-remaining": e.noRemaining,
+              class: "m-card__gallery maz-flex-1"
+            }, null, 8, ["no-radius", "width", "height", "images-shown-count", "images", "no-zoom", "no-width", "no-height", "no-remaining"])
+          ])) : s("", !0),
+          k("div", L, [
+            (a(), p(g(t.value ? v(B) : "div"), { class: "maz-h-full" }, {
+              default: c(() => [
+                W(k("div", {
+                  class: u([[e.wrapperClass, { "maz-p-4": !e.noPadding && !t.value }], "m-card__content__wrapper maz-h-full"])
+                }, [
+                  i(e.$slots, "default", {}, () => [
+                    e.$slots.title ? (a(), n("div", q, [
+                      i(e.$slots, "title", {}, void 0, !0)
+                    ])) : s("", !0),
+                    e.$slots.subtitle ? (a(), n("div", F, [
+                      i(e.$slots, "subtitle", {}, void 0, !0)
+                    ])) : s("", !0),
+                    e.$slots.content ? (a(), n("div", J, [
+                      i(e.$slots, "content", {}, void 0, !0)
+                    ])) : s("", !0)
+                  ], !0)
+                ], 2), [
+                  [I, l.value]
+                ])
+              ]),
+              _: 3
+            }))
+          ])
+        ]),
+        _: 3
+      }, 16, ["class"])),
+      e.$slots.footer ? (a(), n("div", {
+        key: 1,
+        class: u(["m-card__footer maz-overflow-x-auto maz-p-3", [
+          {
+            "maz-border-t maz-border-color-light": h.value && f.value
+          },
+          O.value
+        ]])
+      }, [
+        i(e.$slots, "footer", {}, void 0, !0)
+      ], 2)) : s("", !0),
+      e.$slots.actions ? (a(), n("div", K, [
+        i(e.$slots, "actions", {}, void 0, !0)
+      ])) : s("", !0)
+    ], 2));
+  }
+}), Y = /* @__PURE__ */ R(Q, [["__scopeId", "data-v-2d55f280"]]);
+export {
+  Y as default
+};

package/dist/components/MazCardSpotlight.js

@@ -0,0 +1,68 @@
+import { defineComponent as E, ref as n, computed as m, onMounted as _, onUnmounted as k, openBlock as w, createElementBlock as z, normalizeClass as f, normalizeStyle as v, createElementVNode as a, renderSlot as B, withDirectives as b, vShow as h } from "vue";
+import { _ as S } from "../chunks/_plugin-vue_export-helper.CHgC5LLL.js";
+import '../assets/MazCardSpotlight.DuZac0w4.css';const $ = { class: "inner" }, M = /* @__PURE__ */ E({
+  __name: "MazCardSpotlight",
+  props: {
+    color: { default: "primary" },
+    noElevation: { type: Boolean, default: !1 },
+    padding: { type: Boolean, default: !0 },
+    contentClass: { default: void 0 },
+    contentStyle: { type: [Boolean, null, String, Object, Array], default: void 0 },
+    innerOpacity: { default: 0.95 }
+  },
+  setup(y) {
+    const r = y, s = n(), i = n(), l = n(!1);
+    function c({ clientX: e, clientY: d }) {
+      var u, t, p;
+      l.value = !0;
+      const o = (u = i.value) == null ? void 0 : u.getBoundingClientRect();
+      o && ((p = (t = s.value) == null ? void 0 : t.animate) == null || p.call(
+        t,
+        [
+          {
+            transform: `translate(${e - o.left - o.width / 2}px,${d - o.top - o.height / 2}px)`
+          }
+        ],
+        {
+          duration: 300,
+          fill: "forwards"
+        }
+      ));
+    }
+    const g = m(() => `var(--maz-color-${r.color}-alpha)`), C = m(() => `var(--maz-color-${r.color}-alpha-20)`);
+    return _(() => {
+      window.addEventListener("mousemove", c);
+    }), k(() => {
+      window.removeEventListener("mousemove", c);
+    }), (e, d) => (w(), z("div", {
+      class: f(["m-card-spotlight m-reset-css", { "maz-elevation": !e.noElevation }]),
+      style: v({ backgroundColor: C.value, "--inner-opacity": e.innerOpacity })
+    }, [
+      a("div", $, [
+        a("div", {
+          class: f(["content", [{ "maz-p-4": e.padding }, e.contentClass]])
+        }, [
+          B(e.$slots, "default", {}, void 0, !0)
+        ], 2)
+      ]),
+      b(a("div", {
+        ref_key: "blobElement",
+        ref: s,
+        class: "blob",
+        style: v({ backgroundColor: g.value })
+      }, null, 4), [
+        [h, l.value]
+      ]),
+      b(a("div", {
+        ref_key: "fakeblobElement",
+        ref: i,
+        class: "fakeblob"
+      }, null, 512), [
+        [h, l.value]
+      ])
+    ], 6));
+  }
+}), V = /* @__PURE__ */ S(M, [["__scopeId", "data-v-23212ba3"]]);
+export {
+  V as default
+};