maz-ui 3.40.2 → 3.40.4

package/README.md

@@ -54,7 +54,7 @@ export default defineNuxtConfig({
 
 All options of the module are available [here](https://maz-ui.com/guide/nuxt)
 
-### @mazui/cli
+### @mazui/cli (theme generator)
 
 [Documentation & Commands](https://maz-ui.com/guide/cli)
 

package/components/MazAccordion.mjs

@@ -1,69 +1,74 @@
 import './assets/MazAccordion.css';
-import { defineComponent as b, useCssVars as z, openBlock as v, createBlock as S, TransitionGroup as M, withCtx as y, renderSlot as m, nextTick as k, ref as $, computed as f, onMounted as I, onUnmounted as B, createElementBlock as g, normalizeClass as x, normalizeStyle as w, createElementVNode as p, getCurrentInstance as V, useSlots as O, Fragment as A, renderList as L, unref as _, createVNode as E, withDirectives as T, vShow as D } from "vue";
-const N = /* @__PURE__ */ b({
+import { defineComponent as z, useCssVars as B, openBlock as v, createBlock as I, TransitionGroup as O, withCtx as $, renderSlot as f, nextTick as S, ref as y, computed as g, onMounted as V, onUnmounted as A, createElementBlock as b, normalizeClass as C, normalizeStyle as x, createElementVNode as u, withDirectives as k, vShow as w, getCurrentInstance as L, useSlots as T, Fragment as D, renderList as N, unref as _, createVNode as M } from "vue";
+const j = /* @__PURE__ */ z({
   __name: "MazTransitionExpand",
   props: {
     animationDuration: { default: "300ms" }
   },
   setup(r) {
-    z((t) => ({
+    B((t) => ({
       "26239c6e": t.animationDuration
     }));
-    const i = (t) => {
-      const n = getComputedStyle(t).width;
-      t.style.width = n, t.style.position = "absolute", t.style.visibility = "hidden", t.style.height = "auto", t.style.top = "bottom";
+    const l = (t) => {
+      const a = getComputedStyle(t).width;
+      t.style.width = a, t.style.position = "absolute", t.style.visibility = "hidden", t.style.height = "auto", t.style.top = "bottom";
       const s = getComputedStyle(t).height;
-      t.style.width = "", t.style.position = "", t.style.visibility = "", t.style.height = "0px", getComputedStyle(t).height, k(() => {
+      t.style.width = "", t.style.position = "", t.style.visibility = "", t.style.height = "0px", getComputedStyle(t).height, S(() => {
         t.style.height = s;
       });
-    }, o = (t) => {
+    }, n = (t) => {
       t.style.height = "auto";
     }, d = (t) => {
-      const n = getComputedStyle(t).height;
-      t.style.height = n, getComputedStyle(t).height, k(() => {
+      const a = getComputedStyle(t).height;
+      t.style.height = a, getComputedStyle(t).height, S(() => {
         t.style.height = "0px";
       });
     };
-    return (t, n) => (v(), S(M, {
+    return (t, a) => (v(), I(O, {
       class: "m-transition-expand",
       name: "maz-expand",
       tag: "div",
-      onEnter: n[0] || (n[0] = (s) => i(s)),
-      onAfterEnter: n[1] || (n[1] = (s) => o(s)),
-      onLeave: n[2] || (n[2] = (s) => d(s))
+      onEnter: a[0] || (a[0] = (s) => l(s)),
+      onAfterEnter: a[1] || (a[1] = (s) => n(s)),
+      onLeave: a[2] || (a[2] = (s) => d(s))
     }, {
-      default: y(() => [
-        m(t.$slots, "default", {}, void 0, !0)
+      default: $(() => [
+        f(t.$slots, "default", {}, void 0, !0)
       ]),
       _: 3
       /* FORWARDED */
     }));
   }
-}), C = (r, i) => {
-  const o = r.__vccOpts || r;
-  for (const [d, t] of i)
-    o[d] = t;
-  return o;
-}, j = /* @__PURE__ */ C(N, [["__scopeId", "data-v-49c2af88"]]), U = { class: "inner" }, q = { class: "content" }, F = /* @__PURE__ */ b({
+}), E = (r, l) => {
+  const n = r.__vccOpts || r;
+  for (const [d, t] of l)
+    n[d] = t;
+  return n;
+}, U = /* @__PURE__ */ E(j, [["__scopeId", "data-v-49c2af88"]]), q = { class: "inner" }, F = /* @__PURE__ */ z({
   __name: "MazCardSpotlight",
   props: {
     color: { default: "primary" },
-    noElevation: { type: Boolean, default: !1 }
+    noElevation: { type: Boolean, default: !1 },
+    padding: { type: Boolean, default: !0 },
+    contentClass: { default: void 0 },
+    contentStyle: { default: void 0 },
+    innerOpacity: { default: 0.95 }
   },
   setup(r) {
-    z((l) => ({
-      "4126589a": s.value,
-      "080f395c": n.value
+    B((i) => ({
+      "474a7292": i.innerOpacity,
+      f69a3cbc: s.value
     }));
-    const i = r, o = $(), d = $();
-    function t(l) {
-      var c, h, e;
-      const u = (c = d.value) == null ? void 0 : c.getBoundingClientRect();
-      u && ((e = (h = o.value) == null ? void 0 : h.animate) == null || e.call(
-        h,
+    const l = r, n = y(), d = y(), t = y(!1);
+    function a({ clientX: i, clientY: c }) {
+      var e, m, o;
+      t.value = !0;
+      const p = (e = d.value) == null ? void 0 : e.getBoundingClientRect();
+      p && ((o = (m = n.value) == null ? void 0 : m.animate) == null || o.call(
+        m,
         [
           {
-            transform: `translate(${l.clientX - u.left - u.width / 2}px,${l.clientY - u.top - u.height / 2}px)`
+            transform: `translate(${i - p.left - p.width / 2}px,${c - p.top - p.height / 2}px)`
           }
         ],
         {
@@ -72,36 +77,46 @@ const N = /* @__PURE__ */ b({
         }
       ));
     }
-    const n = f(() => `var(--maz-color-${i.color}-alpha)`), s = f(() => `var(--maz-color-${i.color}-alpha-20)`);
-    return I(() => {
-      window.addEventListener("mousemove", t);
-    }), B(() => {
-      window.removeEventListener("mousemove", t);
-    }), (l, u) => (v(), g(
+    const s = g(() => `var(--maz-color-${l.color}-alpha)`), h = g(() => `var(--maz-color-${l.color}-alpha-20)`);
+    return V(() => {
+      window.addEventListener("mousemove", a);
+    }), A(() => {
+      window.removeEventListener("mousemove", a);
+    }), (i, c) => (v(), b(
       "div",
       {
-        class: x(["m-card", { "maz-elevation": !l.noElevation }]),
-        style: w({ backgroundColor: s.value })
+        class: C(["m-card-spotlight", { "maz-elevation": !i.noElevation }]),
+        style: x({ backgroundColor: h.value })
       },
       [
-        p("div", U, [
-          p("div", q, [
-            m(l.$slots, "default", {}, void 0, !0)
-          ])
+        u("div", q, [
+          u(
+            "div",
+            {
+              class: C(["content", [{ "maz-p-4": i.padding }, i.contentClass]])
+            },
+            [
+              f(i.$slots, "default", {}, void 0, !0)
+            ],
+            2
+            /* CLASS */
+          )
         ]),
-        p(
+        k(u(
           "div",
           {
             ref_key: "blobElement",
-            ref: o,
+            ref: n,
             class: "blob",
-            style: w({ backgroundColor: n.value })
+            style: x({ backgroundColor: s.value })
           },
           null,
           4
           /* STYLE */
-        ),
-        p(
+        ), [
+          [w, t.value]
+        ]),
+        k(u(
           "div",
           {
             ref_key: "fakeblobElement",
@@ -111,19 +126,21 @@ const N = /* @__PURE__ */ b({
           null,
           512
           /* NEED_PATCH */
-        )
+        ), [
+          [w, t.value]
+        ])
       ],
       6
       /* CLASS, STYLE */
     ));
   }
-}), G = /* @__PURE__ */ C(F, [["__scopeId", "data-v-11af6ef3"]]), P = {
+}), G = /* @__PURE__ */ E(F, [["__scopeId", "data-v-14299ed5"]]), P = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "1em",
   height: "1em",
   fill: "none",
   viewBox: "0 0 24 24"
-}, R = /* @__PURE__ */ p(
+}, R = /* @__PURE__ */ u(
   "path",
   {
     stroke: "currentColor",
@@ -138,91 +155,91 @@ const N = /* @__PURE__ */ b({
 ), W = [
   R
 ];
-function X(r, i) {
-  return v(), g("svg", P, [...W]);
+function H(r, l) {
+  return v(), b("svg", P, [...W]);
 }
-const Y = { render: X };
-function H({
+const J = { render: H };
+function K({
   componentName: r,
-  providedId: i
+  providedId: l
 }) {
-  const o = V();
-  return f(() => i ?? `${r}-${o == null ? void 0 : o.uid}`);
+  const n = L();
+  return g(() => l ?? `${r}-${n == null ? void 0 : n.uid}`);
 }
-const J = {
+const Q = {
   class: "m-accordion",
   role: "presentation"
-}, K = ["aria-controls", "aria-expanded", "onClick"], Q = ["id", "aria-labelledby", "aria-hidden"], Z = { class: "maz-p-4" }, tt = /* @__PURE__ */ b({
+}, X = ["aria-controls", "aria-expanded", "onClick"], Y = ["id", "aria-labelledby", "aria-hidden"], Z = { class: "maz-pt-4" }, tt = /* @__PURE__ */ z({
   __name: "MazAccordion",
   props: {
     id: { default: void 0 },
     modelValue: { default: 0 }
   },
   emits: ["update:model-value"],
-  setup(r, { emit: i }) {
-    const o = r, d = i, t = H({
+  setup(r, { emit: l }) {
+    const n = r, d = l, t = K({
       componentName: "MazAccordion",
-      providedId: o.id
-    }), n = O(), s = f(
-      () => Object.keys(n).filter((e) => e.startsWith("title-")).length
-    ), l = $(o.modelValue), u = f({
-      get: () => o.modelValue || l.value,
+      providedId: n.id
+    }), a = T(), s = g(
+      () => Object.keys(a).filter((e) => e.startsWith("title-")).length
+    ), h = y(n.modelValue), i = g({
+      get: () => n.modelValue || h.value,
       set: (e) => {
-        l.value = e, d("update:model-value", e);
+        h.value = e, d("update:model-value", e);
       }
     });
     function c(e) {
-      return u.value === e;
+      return i.value === e;
     }
-    function h(e) {
-      u.value === e ? (l.value = 0, d("update:model-value", 0)) : (l.value = e, d("update:model-value", e));
+    function p(e) {
+      i.value === e ? (h.value = 0, d("update:model-value", 0)) : (h.value = e, d("update:model-value", e));
     }
-    return (e, et) => (v(), g("div", J, [
-      (v(!0), g(
-        A,
+    return (e, m) => (v(), b("div", Q, [
+      (v(!0), b(
+        D,
         null,
-        L(s.value, (a) => (v(), S(
+        N(s.value, (o) => (v(), I(
           G,
           {
-            key: a,
+            key: o,
             class: "spotlight"
           },
           {
-            default: y(() => [
-              p("button", {
+            default: $(() => [
+              u("button", {
                 class: "header",
-                "aria-controls": `step-${a}-${_(t)}`,
-                "aria-expanded": c(a),
-                onClick: (ot) => h(a)
+                "aria-controls": `step-${o}-${_(t)}`,
+                "aria-expanded": c(o),
+                onClick: (et) => p(o)
               }, [
-                m(e.$slots, `title-${a}`, {
-                  isOpen: c(a)
+                f(e.$slots, `title-${o}`, {
+                  isOpen: c(o)
                 }, void 0, !0),
-                E(_(Y), {
-                  class: x(["header-icon", { "--rotate": c(a) }])
+                M(_(J), {
+                  class: C(["header-icon", { "--rotate": c(o) }])
                 }, null, 8, ["class"])
-              ], 8, K),
-              E(
-                j,
+              ], 8, X),
+              M(
+                U,
                 { "animation-duration": "300ms" },
                 {
-                  default: y(() => [
-                    T(p("div", {
-                      id: `step-${a}-${_(t)}`,
+                  default: $(() => [
+                    k(u("div", {
+                      id: `step-${o}-${_(t)}`,
                       role: "region",
-                      "aria-labelledby": `step-${a}-${_(t)}`,
-                      "aria-hidden": !c(a)
+                      "aria-labelledby": `step-${o}-${_(t)}`,
+                      "aria-hidden": !c(o)
                     }, [
-                      p("div", Z, [
-                        m(e.$slots, "content", {
-                          isOpen: c(a)
+                      u("div", Z, [
+                        f(e.$slots, "content", {
+                          isOpen: c(o)
                         }, void 0, !0),
-                        m(e.$slots, `content-${a}`, {
-                          isOpen: c(a)
+                        f(e.$slots, `content-${o}`, {
+                          isOpen: c(o)
                         }, void 0, !0)
                       ])
-                    ], 8, Q), [
-                      [D, c(a)]
+                    ], 8, Y), [
+                      [w, c(o)]
                     ])
                   ]),
                   _: 2
@@ -243,7 +260,7 @@ const J = {
       ))
     ]));
   }
-}), at = /* @__PURE__ */ C(tt, [["__scopeId", "data-v-630c9b2d"]]);
+}), nt = /* @__PURE__ */ E(tt, [["__scopeId", "data-v-7a54c498"]]);
 export {
-  at as default
+  nt as default
 };

package/components/MazAvatar.mjs

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

package/components/MazBottomSheet.mjs

@@ -1,4 +1,4 @@
-import { M as f } from "./chunks/MazBottomSheet-uKxvK85D.mjs";
+import { M as f } from "./chunks/MazBottomSheet-CIlIdn-2.mjs";
 export {
   f as default
 };

package/components/MazBtn.d.ts

@@ -109,7 +109,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     leftIcon: undefined;
     rightIcon: undefined;
     contentClass: undefined;
-    roundedSize: undefined;
+    roundedSize: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
     variant: string;
     size: string;
@@ -119,7 +119,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     leftIcon: undefined;
     rightIcon: undefined;
     contentClass: undefined;
-    roundedSize: undefined;
+    roundedSize: string;
 }>>>, {
     size: Size;
     type: "button" | "reset" | "submit";

package/components/MazBtn.mjs

@@ -1,4 +1,4 @@
-import { M as f } from "./chunks/MazBtn-WxZqpFgw.mjs";
+import { M as f } from "./chunks/MazBtn-Ccvl1ZWv.mjs";
 export {
   f as default
 };

package/components/MazCard.d.ts

@@ -25,7 +25,7 @@ export type Props = {
     elevation?: boolean;
     /** Set radius to card */
     radius?: boolean;
-    /** Set border to card */
+    /** Set border to card (in dark mode, the card is always bordered) */
     bordered?: boolean;
     /** Number of images shown in the gallery */
     imagesShowCount?: number;
@@ -39,8 +39,14 @@ export type Props = {
     noPadding?: boolean;
     /** Hide overflow */
     overflowHidden?: boolean;
-    /** Card can be open and close */
+    /**
+     * @deprecated Use `collapsible` instead
+     */
     collapsable?: boolean;
+    /**
+     * Card can be open and close
+     */
+    collapsible?: boolean;
     /** Card is open by default if `true` */
     collapseOpen?: boolean;
     /** Title of the card in header */

package/components/MazCard.mjs

@@ -1,4 +1,4 @@
-import { M as f } from "./chunks/MazCard-EXkymtQk.mjs";
+import { M as f } from "./chunks/MazCard-DCz1q6wT.mjs";
 export {
   f as default
 };

package/components/MazCardSpotlight.d.ts

@@ -1,20 +1,59 @@
+import { type HTMLAttributes, type StyleValue } from 'vue';
 import type { Color } from './types';
 export type { Color };
 export type Props = {
-    /** The color of the component. */
+    /**
+     * The color of the component.
+     * @default primary
+     */
     color?: Color;
-    /** Remove the elevation of the component. */
+    /**
+     * Remove the elevation of the component
+     * @default false
+     */
     noElevation?: boolean;
+    /**
+     * Add padding to the content
+     * @default true
+     */
+    padding?: boolean;
+    /**
+     * The classes to apply to the content div
+     */
+    contentClass?: HTMLAttributes['class'];
+    /**
+     * Style apply to the content div
+     */
+    contentStyle?: StyleValue;
+    /**
+     * The opacity of the inner div - should be between 0 and 1
+     * When 0 the spotlight is completely visible
+     * When 1 the spotlight is only visible on borders
+     * @default 0.95
+     */
+    innerOpacity?: number;
 };
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
     noElevation: boolean;
     color: string;
+    padding: boolean;
+    contentClass: undefined;
+    contentStyle: undefined;
+    innerOpacity: number;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
     noElevation: boolean;
     color: string;
+    padding: boolean;
+    contentClass: undefined;
+    contentStyle: undefined;
+    innerOpacity: number;
 }>>>, {
     color: Color;
     noElevation: boolean;
+    contentClass: any;
+    padding: boolean;
+    contentStyle: string | false | import("vue").CSSProperties | StyleValue[] | null;
+    innerOpacity: number;
 }, {}>, {
     default?(_: {}): any;
 }>;

package/components/MazCardSpotlight.mjs

@@ -1,25 +1,30 @@
 import './assets/MazCardSpotlight.css';
-import { defineComponent as _, useCssVars as b, ref as f, computed as p, onMounted as h, onUnmounted as k, openBlock as C, createElementBlock as E, normalizeClass as g, normalizeStyle as v, createElementVNode as c, renderSlot as y } from "vue";
-const z = { class: "inner" }, w = { class: "content" }, B = /* @__PURE__ */ _({
+import { defineComponent as g, useCssVars as k, ref as c, computed as m, onMounted as E, onUnmounted as w, openBlock as z, createElementBlock as B, normalizeClass as b, normalizeStyle as h, createElementVNode as i, renderSlot as S, withDirectives as y, vShow as C } from "vue";
+const $ = { class: "inner" }, M = /* @__PURE__ */ g({
   __name: "MazCardSpotlight",
   props: {
     color: { default: "primary" },
-    noElevation: { type: Boolean, default: !1 }
+    noElevation: { type: Boolean, default: !1 },
+    padding: { type: Boolean, default: !0 },
+    contentClass: { default: void 0 },
+    contentStyle: { default: void 0 },
+    innerOpacity: { default: 0.95 }
   },
-  setup(a) {
-    b((e) => ({
-      "4126589a": d.value,
-      "080f395c": i.value
+  setup(l) {
+    k((e) => ({
+      "474a7292": e.innerOpacity,
+      f69a3cbc: u.value
     }));
-    const l = a, t = f(), n = f();
-    function r(e) {
-      var m, s, u;
-      const o = (m = n.value) == null ? void 0 : m.getBoundingClientRect();
-      o && ((u = (s = t.value) == null ? void 0 : s.animate) == null || u.call(
+    const n = l, o = c(), r = c(), t = c(!1);
+    function d({ clientX: e, clientY: p }) {
+      var v, s, f;
+      t.value = !0;
+      const a = (v = r.value) == null ? void 0 : v.getBoundingClientRect();
+      a && ((f = (s = o.value) == null ? void 0 : s.animate) == null || f.call(
         s,
         [
           {
-            transform: `translate(${e.clientX - o.left - o.width / 2}px,${e.clientY - o.top - o.height / 2}px)`
+            transform: `translate(${e - a.left - a.width / 2}px,${p - a.top - a.height / 2}px)`
           }
         ],
         {
@@ -28,57 +33,69 @@ const z = { class: "inner" }, w = { class: "content" }, B = /* @__PURE__ */ _({
         }
       ));
     }
-    const i = p(() => `var(--maz-color-${l.color}-alpha)`), d = p(() => `var(--maz-color-${l.color}-alpha-20)`);
-    return h(() => {
-      window.addEventListener("mousemove", r);
-    }), k(() => {
-      window.removeEventListener("mousemove", r);
-    }), (e, o) => (C(), E(
+    const u = m(() => `var(--maz-color-${n.color}-alpha)`), _ = m(() => `var(--maz-color-${n.color}-alpha-20)`);
+    return E(() => {
+      window.addEventListener("mousemove", d);
+    }), w(() => {
+      window.removeEventListener("mousemove", d);
+    }), (e, p) => (z(), B(
       "div",
       {
-        class: g(["m-card", { "maz-elevation": !e.noElevation }]),
-        style: v({ backgroundColor: d.value })
+        class: b(["m-card-spotlight", { "maz-elevation": !e.noElevation }]),
+        style: h({ backgroundColor: _.value })
       },
       [
-        c("div", z, [
-          c("div", w, [
-            y(e.$slots, "default", {}, void 0, !0)
-          ])
+        i("div", $, [
+          i(
+            "div",
+            {
+              class: b(["content", [{ "maz-p-4": e.padding }, e.contentClass]])
+            },
+            [
+              S(e.$slots, "default", {}, void 0, !0)
+            ],
+            2
+            /* CLASS */
+          )
         ]),
-        c(
+        y(i(
           "div",
           {
             ref_key: "blobElement",
-            ref: t,
+            ref: o,
             class: "blob",
-            style: v({ backgroundColor: i.value })
+            style: h({ backgroundColor: u.value })
           },
           null,
           4
           /* STYLE */
-        ),
-        c(
+        ), [
+          [C, t.value]
+        ]),
+        y(i(
           "div",
           {
             ref_key: "fakeblobElement",
-            ref: n,
+            ref: r,
             class: "fakeblob"
           },
           null,
           512
           /* NEED_PATCH */
-        )
+        ), [
+          [C, t.value]
+        ])
       ],
       6
       /* CLASS, STYLE */
     ));
   }
-}), $ = (a, l) => {
-  const t = a.__vccOpts || a;
-  for (const [n, r] of l)
-    t[n] = r;
-  return t;
-}, S = /* @__PURE__ */ $(B, [["__scopeId", "data-v-11af6ef3"]]);
+}), O = (l, n) => {
+  const o = l.__vccOpts || l;
+  for (const [r, t] of n)
+    o[r] = t;
+  return o;
+}, L = /* @__PURE__ */ O(M, [["__scopeId", "data-v-14299ed5"]]);
 export {
-  S as default
+  L as default
 };

package/components/MazCarousel.mjs

@@ -1,4 +1,4 @@
-import { M as f } from "./chunks/MazCarousel-iKzlrVVy.mjs";
+import { M as f } from "./chunks/MazCarousel-DZZilIAg.mjs";
 export {
   f as default
 };

package/components/MazDialog.mjs

@@ -1,4 +1,4 @@
-import { M as f } from "./chunks/MazDialog-4Th-Xut5.mjs";
+import { M as f } from "./chunks/MazDialog-wPf8YzO5.mjs";
 export {
   f as default
 };

package/components/MazDialogPromise.mjs

@@ -1,4 +1,4 @@
-import { a as o, u as s } from "./chunks/MazDialogPromise-CJsnYYpX.mjs";
+import { a as o, u as s } from "./chunks/MazDialogPromise-C4xTbUi9.mjs";
 export {
   o as default,
   s as useMazDialogPromise