maz-ui 3.47.1 → 3.47.2-beta.10

package/components/chunks/{MazGallery-BKL7gfrz.mjs → MazGallery-BooLoRWi.mjs}

@@ -1,21 +1,34 @@
-import '../assets/MazGallery.css';var ye = Object.defineProperty;
-var be = (o, e, t) => e in o ? ye(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
-var f = (o, e, t) => be(o, typeof e != "symbol" ? e + "" : e, t);
-import { createVNode as x, render as B, defineComponent as oe, defineAsyncComponent as _, ref as y, computed as E, watch as Ae, onMounted as Ie, onBeforeUnmount as Ee, openBlock as b, createElementBlock as A, withModifiers as S, withKeys as Le, withDirectives as R, unref as L, vShow as we, createCommentVNode as O, createElementVNode as P, normalizeClass as F, useCssVars as Ce, onBeforeMount as ze, normalizeStyle as ee, Fragment as te, renderList as se, toDisplayString as xe } from "vue";
-import { _ as ae } from "./MazCard-CfkvpcGL.mjs";
+import '../assets/MazGallery.css';var Ae = Object.defineProperty;
+var Ie = (o, e, t) => e in o ? Ae(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
+var g = (o, e, t) => Ie(o, typeof e != "symbol" ? e + "" : e, t);
+import { createVNode as z, render as M, defineComponent as re, defineAsyncComponent as N, ref as p, reactive as Ee, computed as C, watch as we, onMounted as Ce, onBeforeUnmount as Le, openBlock as b, createElementBlock as A, withModifiers as O, withKeys as xe, unref as w, createCommentVNode as S, createElementVNode as k, normalizeClass as R, withDirectives as T, vShow as ze, onBeforeMount as ke, normalizeStyle as se, Fragment as ne, renderList as oe, toDisplayString as Pe } from "vue";
+import { _ as ie } from "./MazCard-XBaeDZkg.mjs";
 function Oe(o, e) {
   let t = e == null ? void 0 : e.element;
   function s() {
-    t && B(null, t);
+    t && M(null, t);
   }
-  const r = { ...e == null ? void 0 : e.props, destroy: s }, l = x(
+  const r = { ...e == null ? void 0 : e.props, destroy: s }, l = z(
     o,
     r,
     e == null ? void 0 : e.children
   );
-  return e != null && e.app ? (l.appContext = e.app._context, t ? B(l, t) : typeof document < "u" && (t = document.createElement("div"), B(l, t))) : (t = t ?? document.body, B(l, t)), { vNode: l, destroy: s, el: t };
+  return e != null && e.app ? (l.appContext = e.app._context, t ? M(l, t) : typeof document < "u" && (t = document.createElement("div"), M(l, t))) : (t = t ?? document.body, M(l, t)), { vNode: l, destroy: s, el: t };
 }
-const Pe = ["onKeypress"], Se = { class: "m-fullscreen-img-scroller" }, ke = ["src", "alt"], He = /* @__PURE__ */ oe({
+function Se(o, e, t) {
+  const s = {
+    maxAttempts: 20,
+    interval: 100,
+    ...t
+  };
+  let r = 0;
+  function l() {
+    const u = o();
+    u != null ? s.expectedValue !== void 0 && u !== s.expectedValue ? r < s.maxAttempts ? (r++, setTimeout(l, s.interval)) : console.warn(s.errorMessage || `[maz-ui](checkAvailability) Nothing found after ${s.maxAttempts} attempts for ref ${u}`) : e(u) : r < s.maxAttempts ? (r++, setTimeout(l, s.interval)) : console.warn(s.errorMessage || `[maz-ui](checkAvailability) Nothing found or expected value after ${s.maxAttempts} attempts for ref ${u}`);
+  }
+  l();
+}
+const He = ["onKeypress"], $e = { class: "m-fullscreen-img-scroller" }, Be = ["src", "alt"], Me = /* @__PURE__ */ re({
   __name: "MazFullscreenImg",
   props: {
     src: {},
@@ -33,200 +46,229 @@ const Pe = ["onKeypress"], Se = { class: "m-fullscreen-img-scroller" }, ke = ["s
   },
   emits: ["close", "previous", "next", "before-close"],
   setup(o, { emit: e }) {
-    const t = o, s = e, r = _(() => import("./MazSpinner-DwSGm0-X.mjs")), l = _(() => import("./x-mark-CnZwVvA7.mjs")), p = _(() => import("./chevron-left-BqVOLRdC.mjs")), g = y(!1), C = y(!1), w = y(!1), m = y(!1), d = y(!1), c = y(t.clickedElement), u = E(() => t.clickedElement.getBoundingClientRect()), re = E(
-      () => u.value.height < u.value.width
-    ), W = y(t.src), Z = y(t.alt), j = y(), z = y(), ie = E(() => d.value ? "--is-zoomed maz-cursor-zoom-out" : "maz-cursor-zoom-in");
-    function le() {
-      g.value = !0, C.value = !1, w.value = !0;
+    const t = o, s = e, r = N(() => import("./MazSpinner-9M_EGMpy.mjs")), l = N(() => import("./x-mark-CnZwVvA7.mjs")), u = N(() => import("./chevron-left-BqVOLRdC.mjs")), y = p(!1), x = p(!1), L = p(!1), h = p(!1), m = p(!1), c = Ee({
+      running: !1,
+      ended: !1
+    }), d = p(t.clickedElement), le = C(() => t.clickedElement.getBoundingClientRect()), H = p(), D = p(t.src), q = p(t.alt), j = p(), v = p(), $ = p(!0), ce = C(() => ({
+      "--is-zoomed": m.value,
+      "--invisible": $.value,
+      "--absolute": !m.value
+    }));
+    function ue() {
+      var n, a;
+      v.value && (H.value = ((n = v.value) == null ? void 0 : n.naturalWidth) > ((a = v.value) == null ? void 0 : a.naturalHeight)), y.value = !0, x.value = !1, L.value = !0;
     }
-    Ae(
-      () => w.value,
-      (n) => {
-        n && fe();
-      }
+    we(
+      L,
+      async (n) => {
+        n && ge();
+      },
+      { immediate: !0 }
     );
-    function k() {
-      s("before-close"), ge();
+    function B() {
+      s("before-close"), pe();
     }
-    function q(n) {
-      n.key === "Escape" && (n.preventDefault(), k()), (n.key === "ArrowLeft" || n.key === "ArrowRight") && (n.preventDefault(), N(n.key === "ArrowRight" ? "next" : "previous"));
+    function G(n) {
+      n.key === "Escape" && (n.preventDefault(), B()), (n.key === "ArrowLeft" || n.key === "ArrowRight") && (n.preventDefault(), U(n.key === "ArrowRight" ? "next" : "previous"));
     }
-    function ce() {
+    function me() {
       document.documentElement.classList.add("--m-fullscreen-open");
     }
-    function ue() {
+    function de() {
       document.documentElement.classList.remove("--m-fullscreen-open");
     }
-    function V() {
+    function Y() {
       return [...document.querySelectorAll(".m-fullscreen-img-instance")];
     }
-    function me(n, a) {
+    function he(n, a) {
       return a < 0 ? n.length - 1 : a >= n.length ? 0 : a;
     }
-    async function de(n, a) {
+    async function fe(n, a) {
       n.classList.remove(t.openInstanceClass), a.classList.add(t.openInstanceClass);
-      const i = a.getAttribute("data-src"), h = a.getAttribute("data-alt");
-      Z.value = h, i && (W.value = i), g.value = !1, g.value || (C.value = !0);
+      const i = a.getAttribute("data-src"), f = a.getAttribute("data-alt");
+      q.value = f, D.value = i ?? D.value;
     }
-    function N(n) {
+    function U(n) {
+      $.value = !0;
       const a = document.querySelector(
         `.m-fullscreen-img-instance.${t.openInstanceClass}`
       );
       if (a) {
-        const i = V(), h = i.indexOf(a), I = n === "next" ? h + 1 : h - 1, v = i[me(i, I)];
-        c.value = v, v && de(a, v), s(n), d.value ? Y(z.value) : H();
+        const i = Y(), f = i.indexOf(a), I = n === "next" ? f + 1 : f - 1, E = i[he(i, I)];
+        d.value = E, E && fe(a, E), s(n), y.value = !1, x.value = !0, Se(() => y.value === !0, () => {
+          $.value = !1, m.value ? K() : P();
+        }, {
+          expectedValue: !0,
+          interval: 100,
+          maxAttempts: 50
+        });
       }
     }
-    function Y(n) {
-      re.value ? (n.style.width = `${window.innerWidth}px`, n.style.removeProperty("height")) : (n.style.height = `${window.innerHeight}px`, n.style.removeProperty("width")), n.style.removeProperty("top"), n.style.removeProperty("left");
+    function K() {
+      const n = v.value;
+      if (!n) {
+        console.error("[maz-ui](vFullscreenImg) ImgElement is not defined");
+        return;
+      }
+      n.style.removeProperty("max-width"), n.style.removeProperty("max-height"), n == null || n.style.removeProperty("top"), n == null || n.style.removeProperty("left"), H.value ? (n.style.height = "100vh", n.style.removeProperty("width")) : (n.style.width = "100vw", n.style.removeProperty("height"));
     }
-    async function he() {
-      const n = z.value;
-      d.value ? (d.value = !d.value, H()) : (d.value = !d.value, Y(n));
+    async function ve() {
+      m.value ? (m.value = !m.value, P()) : (m.value = !m.value, K());
     }
-    function G(n) {
-      var a;
-      return (a = z.value) == null ? void 0 : a.animate(n, {
+    function X(n) {
+      var i;
+      c.running = !0, $.value = !1;
+      const a = (i = v.value) == null ? void 0 : i.animate(n, {
         duration: t.animation.duration,
-        // Durée de l'animation en millisecondes
         easing: t.animation.easing
-        // Fonction d'interpolation pour l'animation inverse
       });
+      if (!a) {
+        console.error("[maz-ui](vFullscreenImg) animation is not defined"), c.running = !1, c.ended = !0;
+        return;
+      }
+      return a;
     }
-    function X(n = t.offset ?? 0) {
-      const a = (c.value instanceof HTMLImageElement ? c.value.naturalWidth : c.value.clientWidth) || 1, i = (c.value instanceof HTMLImageElement ? c.value.naturalHeight : c.value.clientHeight) || 1, h = window.innerWidth, I = window.innerHeight, v = Math.min(
-        (h - 2 * n) / a,
+    function Q(n = t.offset ?? 0) {
+      const a = d.value.clientWidth || 1, i = d.value.clientHeight || 1, f = window.innerWidth, I = window.innerHeight, E = Math.min(
+        (f - 2 * n) / a,
         (I - 2 * n) / i
-      ), T = (h - a * v) / 2, D = (I - i * v) / 2;
+      ), W = (f - a * E) / 2, Z = (I - i * E) / 2;
       return {
-        centerX: T,
-        centerY: D,
-        originalWidth: a,
-        originalHeight: i,
-        scale: v
+        centerX: W,
+        centerY: Z,
+        width: a,
+        height: i,
+        scale: E
       };
     }
-    function K({ trigger: n }) {
-      const { originalWidth: a, originalHeight: i, scale: h, centerX: I, centerY: v } = X(), { top: T, left: D, width: ve, height: pe } = u.value, J = [
+    function J({ trigger: n }) {
+      const { width: a, height: i, scale: f, centerX: I, centerY: E } = Q(), { top: W, left: Z, width: ye, height: be } = le.value, te = [
         {
-          top: `${T}px`,
-          left: `${D}px`,
-          width: `${ve}px`,
-          height: `${pe}px`,
+          top: `${W}px`,
+          left: `${Z}px`,
+          width: `${ye}px`,
+          height: `${be}px`,
           opacity: 0
         },
         {
-          top: `${v}px`,
+          top: `${E}px`,
           left: `${I}px`,
-          width: `${a * h}px`,
-          height: `${i * h}px`,
+          width: `${a * f}px`,
+          height: `${i * f}px`,
           opacity: 1
         }
       ];
       return {
-        frames: n === "open" ? J : J.reverse()
+        frames: n === "open" ? te : te.reverse()
       };
     }
-    function H() {
-      const { centerX: n, centerY: a, originalHeight: i, originalWidth: h, scale: I } = X(), v = {
-        top: `${a}px`,
-        left: `${n}px`,
-        width: `${h * I}px`,
-        height: `${i * I}px`
+    function P() {
+      const { height: n, width: a, scale: i } = Q(), f = H.value ? {
+        width: `${a * i}px`,
+        maxHeight: `${n * i}px`
+      } : {
+        height: `${n * i}px`,
+        maxWidth: `${a * i}px`
       };
-      if (!z.value)
-        throw console.error("[maz-ui](vFullscreenImg) ImgElement is not defined");
-      Object.assign(z.value.style, v);
+      if (!v.value) {
+        console.error("[maz-ui](vFullscreenImg) ImgElement is not defined");
+        return;
+      }
+      H.value ? (v.value.style.removeProperty("height"), v.value.style.removeProperty("maxHeight")) : (v.value.style.removeProperty("width"), v.value.style.removeProperty("maxWidth")), Object.assign(v.value.style, f);
     }
-    function fe() {
-      const { frames: n } = K({
+    function ge() {
+      const { frames: n } = J({
         trigger: "open"
-      }), a = G(n);
-      if (!a)
-        throw console.error("[maz-ui](vFullscreenImg) open animation is not defined");
+      }), a = X(n);
+      if (!a) {
+        console.error("[maz-ui](vFullscreenImg) open animation is not defined"), P();
+        return;
+      }
       a.onfinish = () => {
-        H();
+        P(), c.running = !1, c.ended = !0;
       };
     }
-    function ge() {
-      const { frames: n } = K({
+    function pe() {
+      const { frames: n } = J({
         trigger: "close"
-      }), a = G(n);
-      if (!a)
-        throw console.error("[maz-ui](vFullscreenImg) close animation is not defined");
-      a.onfinish = () => {
-        var i, h;
-        s("close"), (i = j.value) == null || i.remove(), (h = t.destroy) == null || h.call(t);
-      };
+      }), a = X(n);
+      function i() {
+        var f, I;
+        s("close"), (f = j.value) == null || f.remove(), (I = t.destroy) == null || I.call(t), c.running = !1, c.ended = !0;
+      }
+      if (!a) {
+        console.error("[maz-ui](vFullscreenImg) close animation is not defined"), i();
+        return;
+      }
+      a.onfinish = i;
     }
-    function Q() {
-      d.value || H();
+    function ee() {
+      m.value || P();
     }
-    return Ie(() => {
-      C.value = !0, document.addEventListener("keydown", q), window.addEventListener("resize", Q), ce(), m.value = V().length > 1;
-    }), Ee(() => {
-      document.removeEventListener("keydown", q), window.removeEventListener("resize", Q), ue();
+    return Ce(() => {
+      x.value = !0, document.addEventListener("keydown", G), window.addEventListener("resize", ee), me(), h.value = Y().length > 1;
+    }), Le(() => {
+      document.removeEventListener("keydown", G), window.removeEventListener("resize", ee), de();
     }), (n, a) => (b(), A("div", {
       ref_key: "FullscreenImgElement",
       ref: j,
       role: "button",
       class: "m-fullscreen-img",
       tabindex: "0",
-      onClick: S(k, ["stop"]),
-      onKeypress: Le(S(k, ["prevent"]), ["esc"])
+      onClick: O(B, ["stop"]),
+      onKeypress: xe(O(B, ["prevent"]), ["esc"])
     }, [
-      R(x(
-        L(r),
-        { class: "m-fullscreen-img-loader maz-h-16" },
-        null,
-        512
-        /* NEED_PATCH */
-      ), [
-        [we, C.value]
-      ]),
-      w.value && m.value ? (b(), A("button", {
+      L.value && h.value ? (b(), A("button", {
         key: 0,
         type: "button",
         class: "m-fullscreen-btn --next",
-        onClick: a[0] || (a[0] = S((i) => N("next"), ["stop"]))
+        onClick: a[0] || (a[0] = O((i) => U("next"), ["stop"]))
       }, [
-        x(L(p), { class: "maz-rotate-180 maz-text-3xl" })
-      ])) : O("v-if", !0),
-      w.value && m.value ? (b(), A("button", {
+        z(w(u), { class: "maz-rotate-180" })
+      ])) : S("v-if", !0),
+      L.value && h.value ? (b(), A("button", {
         key: 1,
         type: "button",
         class: "m-fullscreen-btn --previous",
-        onClick: a[1] || (a[1] = S((i) => N("previous"), ["stop"]))
+        onClick: a[1] || (a[1] = O((i) => U("previous"), ["stop"]))
       }, [
-        x(L(p), { class: "maz-text-3xl" })
-      ])) : O("v-if", !0),
-      P("button", {
+        z(w(u))
+      ])) : S("v-if", !0),
+      k("button", {
         type: "button",
         class: "m-fullscreen-btn --close",
-        onClick: k
+        onClick: B
       }, [
-        x(L(l), { class: "maz-text-3xl" })
+        z(w(l))
       ]),
-      P("div", Se, [
-        O(" eslint-disable-next-line vuejs-accessibility/no-static-element-interactions, vuejs-accessibility/click-events-have-key-events "),
-        P("img", {
+      k("div", $e, [
+        k("img", {
           ref_key: "ImgElement",
-          ref: z,
-          src: W.value,
-          alt: Z.value ?? void 0,
+          ref: v,
+          src: D.value,
+          alt: q.value ?? void 0,
           tabindex: "0",
-          class: F([ie.value]),
-          onLoad: le,
-          onClick: a[2] || (a[2] = S((i) => n.zoom ? he() : void 0, ["stop"]))
-        }, null, 42, ke)
+          class: R([ce.value]),
+          onLoad: ue,
+          onClick: a[2] || (a[2] = O((i) => n.zoom && ve(), ["stop"]))
+        }, null, 42, Be),
+        T(z(
+          w(r),
+          { class: "m-fullscreen-img-loader" },
+          null,
+          512
+          /* NEED_PATCH */
+        ), [
+          [ze, x.value]
+        ])
       ])
-    ], 40, Pe));
+    ], 40, He));
   }
-}), Be = /* @__PURE__ */ ae(He, [["__scopeId", "data-v-42226ee7"]]), ne = "m-fullscreen-is-open";
-class $e {
+}), _e = /* @__PURE__ */ ie(Me, [["__scopeId", "data-v-037cf196"]]), ae = "m-fullscreen-is-open";
+class Fe {
   constructor() {
-    f(this, "options");
-    f(this, "defaultOptions", {
+    g(this, "options");
+    g(this, "defaultOptions", {
       scaleOnHover: !1,
       blurOnHover: !1,
       disabled: !1,
@@ -237,9 +279,9 @@ class $e {
         easing: "ease-in-out"
       }
     });
-    f(this, "mouseEnterListener");
-    f(this, "mouseLeaveListener");
-    f(this, "renderPreviewListener");
+    g(this, "mouseEnterListener");
+    g(this, "mouseLeaveListener");
+    g(this, "renderPreviewListener");
   }
   buildOptions(e, t) {
     const s = typeof t.value == "object" ? t.value : { src: t.value, alt: void 0 }, r = (s == null ? void 0 : s.src) ?? this.getImgSrc(e), l = (s == null ? void 0 : s.alt) ?? this.getImgAlt(e);
@@ -280,10 +322,10 @@ class $e {
     e.removeEventListener("mouseenter", this.mouseEnterListener), e.removeEventListener("mouseleave", this.mouseLeaveListener), e.removeEventListener("click", this.renderPreviewListener), e.classList.remove("m-fullscreen-img-instance"), e.style.cursor = "";
   }
   renderPreview(e) {
-    return e.classList.add(ne), Oe(Be, {
+    return e.classList.add(ae), Oe(_e, {
       props: {
         ...this.options,
-        openInstanceClass: ne,
+        openInstanceClass: ae,
         clickedElement: e,
         clickedElementBounds: e.getBoundingClientRect()
       },
@@ -297,18 +339,18 @@ class $e {
     e.style.zIndex = "1", this.options.scaleOnHover && (e.style.transform = "scale(1.04)"), this.options.blurOnHover && (e.style.filter = "blur(3px)");
   }
 }
-let $;
-const U = {
+let _;
+const V = {
   mounted(o, e) {
-    return $ = new $e(), $.create(o, e);
+    return _ = new Fe(), _.create(o, e);
   },
   updated(o, e) {
-    return $.update(o, e);
+    return _.update(o, e);
   },
   unmounted(o) {
-    return $.remove(o);
+    return _.remove(o);
   }
-}, Me = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7", _e = {
+}, Ne = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7", Re = {
   baseClass: "m-lazy-img",
   loadedClass: "m-lazy-loaded",
   loadingClass: "m-lazy-loading",
@@ -322,14 +364,14 @@ const U = {
     threshold: 0.1
   }
 };
-class Re {
+class Te {
   constructor(e = {}) {
-    f(this, "observers", []);
-    f(this, "defaultOptions", _e);
-    f(this, "options");
-    f(this, "onImgLoadedCallback");
-    f(this, "onImgErrorCallback");
-    f(this, "hasImgLoaded", !1);
+    g(this, "observers", []);
+    g(this, "defaultOptions", Re);
+    g(this, "options");
+    g(this, "onImgLoadedCallback");
+    g(this, "onImgErrorCallback");
+    g(this, "hasImgLoaded", !1);
     this.options = this.buildOptions(e), this.onImgLoadedCallback = this.imageIsLoaded.bind(this), this.onImgErrorCallback = this.imageHasError.bind(this);
   }
   async loadErrorPhoto() {
@@ -435,18 +477,18 @@ class Re {
     s.src = t;
   }
   handleIntersectionObserver(e, t, s, r) {
-    var l, p;
+    var l, u;
     this.observers.push(r);
-    for (const g of s)
-      if (g.isIntersecting) {
-        if ((p = (l = this.options).onIntersecting) == null || p.call(l, g.target), this.options.observerOnce && r.unobserve(e), this.options.loadOnce && this.hasImgLoaded)
+    for (const y of s)
+      if (y.isIntersecting) {
+        if ((u = (l = this.options).onIntersecting) == null || u.call(l, y.target), this.options.observerOnce && r.unobserve(e), this.options.loadOnce && this.hasImgLoaded)
           return;
         this.loadImage(e, t);
       }
   }
   createObserver(e, t) {
-    const s = (p, g) => {
-      this.handleIntersectionObserver(e, t, p, g);
+    const s = (u, y) => {
+      this.handleIntersectionObserver(e, t, u, y);
     }, r = this.options.observerOptions;
     new IntersectionObserver(s, r).observe(e);
   }
@@ -463,7 +505,7 @@ class Re {
   async add(e, t) {
     if (this.hasBgImgMode(t) && this.isPictureElement(e))
       throw new Error(`[MazLazyImg] You can't use the "bg-image" mode with "<picture />" element`);
-    setTimeout(() => this.setBaseClass(e), 0), e.getAttribute("src") || this.setImgSrc(e, Me), await this.bindUpdateHandler(e, t, "bind");
+    setTimeout(() => this.setBaseClass(e), 0), e.getAttribute("src") || this.setImgSrc(e, Ne), await this.bindUpdateHandler(e, t, "bind");
   }
   async update(e, t) {
     t.value !== t.oldValue && (this.hasImgLoaded = !1, this.removeAllStateClasses(e), await this.bindUpdateHandler(e, t, "update"));
@@ -475,22 +517,22 @@ class Re {
     this.observers = [];
   }
 }
-let M;
-const Fe = {
+let F;
+const De = {
   created(o, e) {
     const t = typeof e.value == "object" ? e.value : {};
-    M = new Re(t), M.add(o, e);
+    F = new Te(t), F.add(o, e);
   },
   updated(o, e) {
-    M.update(o, e);
+    F.update(o, e);
   },
   unmounted(o, e) {
-    M.remove(o, e);
+    F.remove(o, e);
   }
-}, Ne = { class: "m-gallery__wrapper maz-flex maz-flex-1" }, Te = ["alt"], De = {
+}, Ue = { class: "m-gallery__wrapper maz-flex maz-flex-1" }, We = ["alt"], Ze = {
   key: 0,
   class: "m-gallery__remaining-layer maz-flex maz-bg-overlay maz-flex-center"
-}, Ue = { class: "maz-text-2xl maz-text-white" }, We = /* @__PURE__ */ oe({
+}, Ve = { class: "maz-text-2xl maz-text-white" }, qe = /* @__PURE__ */ re({
   __name: "MazGallery",
   props: {
     /**
@@ -528,82 +570,79 @@ const Fe = {
     separatorColor: { type: String, default: "transparent" }
   },
   setup(o) {
-    Ce((m) => ({
-      "37b3f3e3": o.separatorColor
-    }));
-    const e = o, t = _(() => import("./no-photography-PGT8fxs_.mjs"));
-    ze(() => {
+    const e = o, t = N(() => import("./no-photography-PGT8fxs_.mjs"));
+    ke(() => {
       e.imagesShownCount > 5 && console.warn('[MazUI](m-gallery) The maximum of "images-shown-count" is 5');
     });
-    const s = E(() => {
-      const m = e.noWidth, d = e.width, c = e.noHeight, u = e.height;
+    const s = C(() => {
+      const h = e.noWidth, m = e.width, c = e.noHeight, d = e.height;
       return {
-        ...m ? {} : {
-          flex: `0 0 ${typeof d}` == "number" ? `${d}px` : d,
-          width: typeof d == "number" ? `${d}px` : d
+        ...h ? {} : {
+          flex: `0 0 ${typeof m}` == "number" ? `${m}px` : m,
+          width: typeof m == "number" ? `${m}px` : m
         },
         ...c ? {} : {
-          height: typeof u == "number" ? `${u}px` : `${u}`,
-          minHeight: typeof u == "number" ? `${u}px` : `${u}`
+          height: typeof d == "number" ? `${d}px` : `${d}`,
+          minHeight: typeof d == "number" ? `${d}px` : `${d}`
         }
       };
-    }), r = E(() => e.imagesShownCount <= 5 ? e.imagesShownCount : 5), l = E(() => e.images.length - (e.images.length < r.value ? e.images.length : r.value)), p = E(() => e.images.map(
-      (m) => typeof m == "object" ? { ...m, thumbnail: m.thumbnail ?? m.src } : { src: m, thumbnail: m, alt: void 0 }
-    )), g = E(() => p.value.slice(0, r.value)), C = E(() => p.value.slice(r.value, e.images.length));
-    function w(m) {
-      return e.noRemaining ? !1 : (l.value && m + 1) === g.value.length;
+    }), r = C(() => e.imagesShownCount <= 5 ? e.imagesShownCount : 5), l = C(() => e.images.length - (e.images.length < r.value ? e.images.length : r.value)), u = C(() => e.images.map(
+      (h) => typeof h == "object" ? { ...h, thumbnail: h.thumbnail ?? h.src } : { src: h, thumbnail: h, alt: void 0 }
+    )), y = C(() => u.value.slice(0, r.value)), x = C(() => u.value.slice(r.value, e.images.length));
+    function L(h) {
+      return e.noRemaining ? !1 : (l.value && h + 1) === y.value.length;
     }
-    return (m, d) => o.images.length > 0 || o.hasEmptyLayer ? (b(), A(
+    return (h, m) => o.images.length > 0 || o.hasEmptyLayer ? (b(), A(
       "div",
       {
         key: 0,
-        class: F(["m-gallery maz-flex", { "maz-rounded": !o.noRadius }]),
-        style: ee([s.value])
+        class: R(["m-gallery maz-flex", { "maz-rounded": !o.noRadius }]),
+        style: se([s.value, { "--gallery-separator-color": o.separatorColor }])
       },
       [
-        P("section", Ne, [
+        k("section", Ue, [
           (b(!0), A(
-            te,
+            ne,
             null,
-            se(g.value, (c, u) => (b(), A(
+            oe(y.value, (c, d) => (b(), A(
               "figure",
               {
-                key: u,
-                class: F(["m-gallery__item !maz-my-0 maz-flex maz-flex-center", [`m-gallery__item--${u + 1}`]])
+                key: d,
+                class: R(["m-gallery__item !maz-my-0 maz-flex maz-flex-center", [`m-gallery__item--${d + 1}`]])
               },
               [
-                R(P("img", {
+                T(k("img", {
                   class: "m-gallery__item__image maz-flex-1",
                   src: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",
                   alt: c.alt,
                   loading: "lazy"
-                }, null, 8, Te), [
-                  [L(Fe), { src: c.thumbnail, disabled: !o.lazy }, "bg-image"],
-                  [L(U), {
+                }, null, 8, We), [
+                  [w(De), { src: c.thumbnail, disabled: !o.lazy }, "bg-image"],
+                  [w(V), {
                     src: c.src,
                     alt: c.alt,
-                    disabled: o.noZoom || w(u),
+                    disabled: o.noZoom || L(d),
                     blurOnHover: o.blur,
                     scaleOnHover: o.scale
                   }]
                 ]),
-                w(u) ? R((b(), A("div", De, [
-                  P(
+                L(d) ? T((b(), A("div", Ze, [
+                  k(
                     "span",
-                    Ue,
-                    "+" + xe(l.value),
+                    Ve,
+                    "+" + Pe(l.value),
                     1
                     /* TEXT */
                   )
                 ])), [
-                  [L(U), {
+                  [w(V), {
                     src: c.src,
                     alt: c.alt,
                     disabled: o.noZoom,
                     blurOnHover: !1,
                     scaleOnHover: o.scale
                   }]
-                ]) : O("v-if", !0)
+                ]) : S("v-if", !0)
               ],
               2
               /* CLASS */
@@ -615,24 +654,24 @@ const Fe = {
             "div",
             {
               key: 0,
-              class: F(["empty-layer maz-flex maz-w-full maz-bg-color-light maz-text-normal maz-flex-center", { "maz-rounded-xl": !o.noRadius }]),
-              style: ee([s.value])
+              class: R(["empty-layer maz-flex maz-w-full maz-bg-color-light maz-text-normal maz-flex-center", { "maz-rounded-xl": !o.noRadius }]),
+              style: se([s.value])
             },
             [
-              x(L(t), { class: "maz-h-8 maz-w-8" })
+              z(w(t), { class: "maz-h-8 maz-w-8" })
             ],
             6
             /* CLASS, STYLE */
-          )) : O("v-if", !0)
+          )) : S("v-if", !0)
         ]),
         (b(!0), A(
-          te,
+          ne,
           null,
-          se(C.value, (c, u) => R((b(), A("div", {
-            key: u,
+          oe(x.value, (c, d) => T((b(), A("div", {
+            key: d,
             class: "m-gallery__hidden"
           })), [
-            [L(U), { src: c.src, disabled: o.noZoom }]
+            [w(V), { src: c.src, disabled: o.noZoom }]
           ])),
           128
           /* KEYED_FRAGMENT */
@@ -640,9 +679,9 @@ const Fe = {
       ],
       6
       /* CLASS, STYLE */
-    )) : O("v-if", !0);
+    )) : S("v-if", !0);
   }
-}), Ve = /* @__PURE__ */ ae(We, [["__scopeId", "data-v-d7c3127b"]]);
+}), Ke = /* @__PURE__ */ ie(qe, [["__scopeId", "data-v-3b59e0cd"]]);
 export {
-  Ve as default
+  Ke as default
 };