@wikicasa-dev/components 2.4.2-alpha.9 → 2.5.1-alpha.0

package/dist/packages/components/lib/components/carousel/SwiperCarousel.vue.js

@@ -1,13 +1,13 @@
-import { defineComponent as W, shallowRef as z, useTemplateRef as C, useId as X, computed as Y, onMounted as x, watch as _, nextTick as M, createElementBlock as n, openBlock as l, normalizeClass as d, createElementVNode as p, createCommentVNode as $, unref as ee, renderSlot as L, Fragment as k, renderList as V, mergeProps as B, withModifiers as O } from "vue";
-import { createSwiper as R } from "../../../../../Swiper/factory.js";
-import { AutoplayModule as te } from "../../../../../Swiper/Autoplay/factory.js";
-import { FreemodeModule as se } from "../../../../../Swiper/FreeMode/factory.js";
-import { KeyboardModule as ie } from "../../../../../Swiper/Keyboard/factory.js";
-import { NavigationModule as re } from "../../../../../Swiper/Navigation/factory.js";
-import { PaginationModule as ae } from "../../../../../Swiper/Pagination/factory.js";
-import { ThumbsModule as oe } from "../../../../../Swiper/Thumbs/factory.js";
-import { ZoomModule as ne } from "../../../../../Swiper/Zoom/factory.js";
-const le = ["id", "data-cy"], de = ["data-idx", "alt", "width", "height", "onLoad"], ue = ["id"], ce = ["alt"], ye = /* @__PURE__ */ W({
+import { defineComponent as W, shallowRef as L, useTemplateRef as V, useId as X, computed as Y, onMounted as x, watch as _, nextTick as S, createElementBlock as n, openBlock as l, Fragment as $, withDirectives as ee, renderSlot as I, createCommentVNode as h, createElementVNode as f, normalizeClass as u, unref as te, renderList as R, mergeProps as T, withModifiers as P, vShow as ie } from "vue";
+import { createSwiper as B } from "../../../../../Swiper/factory.js";
+import { AutoplayModule as se } from "../../../../../Swiper/Autoplay/factory.js";
+import { FreemodeModule as ae } from "../../../../../Swiper/FreeMode/factory.js";
+import { KeyboardModule as re } from "../../../../../Swiper/Keyboard/factory.js";
+import { NavigationModule as oe } from "../../../../../Swiper/Navigation/factory.js";
+import { PaginationModule as ne } from "../../../../../Swiper/Pagination/factory.js";
+import { ThumbsModule as le } from "../../../../../Swiper/Thumbs/factory.js";
+import { ZoomModule as ue } from "../../../../../Swiper/Zoom/factory.js";
+const de = ["id", "data-cy"], ce = ["data-idx", "alt", "width", "height", "onLoad"], pe = ["id"], we = ["alt"], Oe = /* @__PURE__ */ W({
   inheritAttrs: !1,
   __name: "SwiperCarousel",
   props: {
@@ -21,191 +21,206 @@ const le = ["id", "data-cy"], de = ["data-idx", "alt", "width", "height", "onLoa
     shiftFirstImage: { type: Boolean, default: !1 }
   },
   emits: ["moved", "click", "firstSlideLoaded", "init"],
-  setup(t, { expose: T, emit: D }) {
-    const h = D, u = z(null), y = C("swiperRef"), A = C("thumbsRef"), F = z(!1), N = X(), w = Y(() => t.id ?? N), v = t.swiperOptions?.slidesPerView || 1, j = !!t.swiperOptions?.keyboard, S = !!t.swiperOptions.navigation, I = !!t.swiperOptions.pagination, q = !!t.swiperOptions.autoplay, G = t.swiperOptions?.effect || "slider", P = (e, s = -1, i = !1) => {
+  setup(t, { expose: D, emit: F }) {
+    const b = F, d = L(null), k = V("swiperRef"), A = V("thumbsRef"), O = L(!1), E = X(), m = Y(() => t.id ?? E), v = t.swiperOptions?.slidesPerView || 1, N = !!t.swiperOptions?.keyboard, z = !!t.swiperOptions.navigation, M = !!t.swiperOptions.pagination, j = !!t.swiperOptions.autoplay, q = t.swiperOptions?.effect || "slider", C = (e, i = -1, s = !1) => {
       if (!e.images)
         return { src: e.src || "" };
-      let r = "", o = "", g = "";
+      let a = "", r = "", g = "";
       if (t.artDirection) {
-        for (const a in t.artDirection) {
-          const { mq: c, width: m } = t.artDirection[a];
-          m && (g += g ? `,${c} ${parseInt(m)}px` : `${c} ${parseInt(m)}px`);
+        for (const o in t.artDirection) {
+          const { mq: c, width: p } = t.artDirection[o];
+          p && (g += g ? `,${c} ${parseInt(p)}px` : `${c} ${parseInt(p)}px`);
         }
-        o = e.images.reduce((a, c, m) => {
-          const f = Object.values(t.artDirection)[m];
-          return !f || !f.width || (a += a ? `, ${c.storagePath} ${f.width}` : `${c.storagePath} ${f.width}`), a;
-        }, ""), r = e.images[0].storagePath;
+        r = e.images.reduce((o, c, p) => {
+          const w = Object.values(t.artDirection)[p];
+          return !w || !w.width || (o += o ? `, ${c.storagePath} ${w.width}` : `${c.storagePath} ${w.width}`), o;
+        }, ""), a = e.images[0].storagePath;
       } else {
-        let a = e.images;
-        e.images.length > 3 ? a = e.images.slice(2, 5) : t.shiftFirstImage && (a[0] = a[1]), o = a.reduce((c, m, f) => (f === 0 && (r = `${m.storagePath}`), f > 0 && (c += ", "), `${c}${m.storagePath} ${f + 1}x`), "");
+        let o = e.images;
+        e.images.length > 3 ? o = e.images.slice(2, 5) : t.shiftFirstImage && (o[0] = o[1]), r = o.reduce((c, p, w) => (w === 0 && (a = `${p.storagePath}`), w > 0 && (c += ", "), `${c}${p.storagePath} ${w + 1}x`), "");
       }
-      const J = r, Q = o;
-      return typeof v == "number" && s > v ? (r = "", o = "", { sizes: g, "data-src": J, "data-srcset": Q }) : i ? {
-        src: r,
-        srcset: o,
+      const Q = a, U = r;
+      return typeof v == "number" && i > v ? (a = "", r = "", { sizes: g, "data-src": Q, "data-srcset": U }) : s ? {
+        src: a,
+        srcset: r,
         sizes: g,
         loading: "lazy",
         fetchpriority: "low"
       } : {
-        src: r,
-        srcset: o,
+        src: a,
+        srcset: r,
         sizes: g,
-        loading: t.lazyLoadImages || s >= v ? "lazy" : void 0,
-        fetchpriority: !t.lazyLoadImages && s === 0 ? "high" : "low"
+        loading: t.lazyLoadImages || i >= v ? "lazy" : void 0,
+        fetchpriority: !t.lazyLoadImages && i === 0 ? "high" : "low"
       };
-    }, b = [], K = (e) => {
+    }, y = [], K = (e) => {
       if (typeof v == "string") return;
-      const s = b[e];
-      if (s && !s.src && (s.src = s.dataset.src || "", s.srcset = s.dataset.srcset || ""), e < v || e + 1 >= (t.images ?? []).length)
+      const i = y[e];
+      if (i && !i.src && (i.src = i.dataset.src || "", i.srcset = i.dataset.srcset || ""), e < v || e + 1 >= (t.images ?? []).length)
         return;
-      const i = b[e + 1];
-      i && !i.src && (i.src = i?.dataset.src || "", i.srcset = i?.dataset.srcset || "");
-    }, U = (e) => {
-      e || !b?.[e] || M(() => {
-        y.value?.setAttribute("data-first-slide-loaded", "true"), h("firstSlideLoaded");
+      const s = y[e + 1];
+      s && !s.src && (s.src = s?.dataset.src || "", s.srcset = s?.dataset.srcset || "");
+    }, Z = (e) => {
+      e || !y?.[e] || S(() => {
+        k.value?.setAttribute("data-first-slide-loaded", "true"), b("firstSlideLoaded");
       });
-    }, Z = (e) => t.thumbSwiperOptions ? R(e, t.thumbSwiperOptions, [
-      se(t.thumbSwiperOptions.freeMode)
-    ]) : null, E = async (e, s) => {
-      console.log("DEBUG:SwiperCarousel", {
-        rootEl: e,
-        thumbEl: s
-      });
-      const i = s ? await Z(s) : null;
-      u.value = await R(
+    }, G = (e) => t.thumbSwiperOptions ? B(e, t.thumbSwiperOptions, [
+      ae(t.thumbSwiperOptions.freeMode)
+    ]) : null, H = async (e, i) => {
+      const s = i ? await G(i) : null;
+      d.value = await B(
         e,
         {
           on: {
             init: () => {
-              F.value = !0, h("init");
+              S(() => {
+                O.value = !0, b("init");
+              });
             },
-            slideChange: (r) => {
-              K(r.activeIndex), h("moved", { activeIndex: r.activeIndex });
+            slideChange: (a) => {
+              K(a.activeIndex), b("moved", { activeIndex: a.activeIndex });
             }
           },
-          ...i ? { thumbs: { ...t.swiperOptions.thumbs, swiper: i } } : {},
+          ...s ? { thumbs: { ...t.swiperOptions.thumbs, swiper: s } } : {},
           ...t.swiperOptions
         },
         [
-          ne(t.swiperOptions.zoom),
-          j ? ie(t.swiperOptions.keyboard) : void 0,
-          I ? ae(t.swiperOptions.pagination) : void 0,
-          S ? re(t.swiperOptions.navigation) : void 0,
-          q ? te(t.swiperOptions.autoplay) : void 0,
+          ue(t.swiperOptions.zoom),
+          N ? re(t.swiperOptions.keyboard) : void 0,
+          M ? ne({
+            el: ".swiper-pagination",
+            renderFraction: (a, r) => `<div class="uikit-rounded-xs uikit-border-w-black uikit-border uikit-border-solid uikit-px-3 uikit-bg-white uikit-pt-[3px] uikit-pb-[3px]">
+            <span data-cy="swiper-pagination-current" class="${a}"></span>
+            /
+            <span data-cy="swiper-pagination-total" class="${r}"></span>
+          </div>`,
+            ...typeof t.swiperOptions.pagination == "boolean" ? {} : t.swiperOptions.pagination
+          }) : void 0,
+          z ? oe({
+            nextEl: ".swiper-button-next",
+            prevEl: ".swiper-button-prev",
+            ...typeof t.swiperOptions.navigation == "boolean" ? {} : t.swiperOptions.navigation
+          }) : void 0,
+          j ? se(t.swiperOptions.autoplay) : void 0,
           //Thumbs specific modules
-          i ? oe() : void 0
+          s ? le() : void 0
         ].filter(Boolean)
       );
     };
     x(() => {
-      y.value && setTimeout(() => E(y.value, A.value));
+      k.value && setTimeout(() => H(k.value, A.value));
     });
-    const H = (e) => {
-      !u.value || u.value.params.slidesPerView === e || (u.value.params.slidesPerView = e, u.value.update());
+    const J = (e) => {
+      !d.value || d.value.params.slidesPerView === e || (d.value.params.slidesPerView = e, d.value.update());
     };
     return _(
       () => t.images,
       () => {
-        M(() => {
-          u.value?.update();
+        S(() => {
+          d.value?.update();
         });
       }
-    ), T({
-      swiper: u,
-      moveTo(e, s = 0, i = !0) {
-        u.value?.slideTo(e, s, i);
+    ), D({
+      swiper: d,
+      moveTo(e, i = 0, s = !0) {
+        d.value?.slideTo(e, i, s);
       },
-      updateSlidesPerView: H
-    }), (e, s) => (l(), n("div", {
-      class: d(["swiper-carousel-root", e.$attrs["root-classes"]])
-    }, [
-      p("div", {
-        ref: "swiperRef",
-        id: w.value,
-        "data-cy": e.$attrs["data-cy"],
-        class: d(["swiper uikit-carousel", e.$attrs["swiper-classes"]])
+      updateSlidesPerView: J
+    }), (e, i) => (l(), n($, null, [
+      ee(f("div", {
+        class: u(["swiper-carousel-root", e.$attrs["root-classes"]])
       }, [
-        p("div", {
-          class: d(["swiper-wrapper", [
-            e.$attrs["swiper-wrapper-classes"],
-            ee(G) === "none" && "no-transition"
-          ]]),
-          onClick: s[0] || (s[0] = (i) => h("click"))
+        f("div", {
+          ref: "swiperRef",
+          id: m.value,
+          "data-cy": e.$attrs["data-cy"],
+          class: u(["swiper uikit-carousel", e.$attrs["swiper-classes"]])
         }, [
-          L(e.$slots, "default", {}, () => [
-            (l(!0), n(k, null, V(t.images, (i, r) => (l(), n("div", {
-              key: `swiper_${w.value}_${r}`,
-              class: d(["swiper-slide", e.$attrs["swiper-slide-classes"]])
-            }, [
-              p("div", {
-                class: d(["swiper-zoom-container", e.$attrs["swiper-zoom-container-classes"]])
+          f("div", {
+            class: u(["swiper-wrapper", [
+              e.$attrs["swiper-wrapper-classes"],
+              te(q) === "none" && "no-transition"
+            ]]),
+            onClick: i[0] || (i[0] = (s) => b("click"))
+          }, [
+            I(e.$slots, "default", {}, () => [
+              (l(!0), n($, null, R(t.images, (s, a) => (l(), n("div", {
+                key: `swiper_${m.value}_${a}`,
+                class: u(["swiper-slide", e.$attrs["swiper-slide-classes"]])
               }, [
-                t.backgroundImage ? $("", !0) : (l(), n("img", B({
-                  key: 0,
-                  ref_for: !0,
-                  ref: (o) => {
-                    b.push(o);
-                  },
-                  class: ["disable-select", [e.$attrs["slide-img-classes"] || i.classes]],
-                  "data-idx": `${w.value}-slide-img-${r}`
-                }, { ref_for: !0 }, P(i, r), {
-                  alt: i.alt,
-                  itemprop: "image",
-                  width: i.width,
-                  height: i.height,
-                  onLoad: (o) => U(r)
-                }), null, 16, de))
-              ], 2)
-            ], 2))), 128)),
-            L(e.$slots, "last_slide", {}, void 0, !0)
-          ], !0)
-        ], 2),
-        I ? (l(), n("div", {
-          key: 0,
-          class: d([e.$attrs["swiper-pagination-classes"], "swiper-pagination [&.swiper-pagination-fraction]:uikit-flex [&.swiper-pagination-fraction]:uikit-justify-center"]),
-          onClick: s[1] || (s[1] = O(() => {
-          }, ["stop"]))
-        }, null, 2)) : $("", !0),
-        S ? (l(), n(k, { key: 1 }, [
-          p("div", {
-            class: "swiper-button-prev",
-            "data-cy": "swiper-button-prev",
-            onClick: s[2] || (s[2] = O(() => {
+                f("div", {
+                  class: u(["swiper-zoom-container", e.$attrs["swiper-zoom-container-classes"]])
+                }, [
+                  t.backgroundImage ? h("", !0) : (l(), n("img", T({
+                    key: 0,
+                    ref_for: !0,
+                    ref: (r) => {
+                      y.push(r);
+                    },
+                    class: ["disable-select", [e.$attrs["slide-img-classes"] || s.classes]],
+                    "data-idx": `${m.value}-slide-img-${a}`
+                  }, { ref_for: !0 }, C(s, a), {
+                    alt: s.alt,
+                    itemprop: "image",
+                    width: s.width,
+                    height: s.height,
+                    onLoad: (r) => Z(a)
+                  }), null, 16, ce))
+                ], 2)
+              ], 2))), 128)),
+              I(e.$slots, "last_slide", {}, void 0, !0)
+            ], !0)
+          ], 2),
+          M ? (l(), n("div", {
+            key: 0,
+            class: u([e.$attrs["swiper-pagination-classes"], "swiper-pagination [&.swiper-pagination-fraction]:uikit-flex [&.swiper-pagination-fraction]:uikit-justify-center"]),
+            onClick: i[1] || (i[1] = P(() => {
             }, ["stop"]))
-          }),
-          p("div", {
-            class: "swiper-button-next",
-            "data-cy": "swiper-button-next",
-            onClick: s[3] || (s[3] = O(() => {
-            }, ["stop"]))
-          })
-        ], 64)) : $("", !0)
-      ], 10, le),
-      t.thumbSwiperOptions ? (l(), n("div", {
-        key: 0,
-        id: `thumb_${w.value}`,
-        ref: "thumbsRef",
-        class: d(["swiper", e.$attrs["thumb-swiper-classes"]]),
-        thumbsSlider: ""
-      }, [
-        p("div", {
-          class: d(["swiper-wrapper", e.$attrs["thumb-swiper-wrapper-classes"]])
+          }, null, 2)) : h("", !0),
+          z ? (l(), n($, { key: 1 }, [
+            f("div", {
+              class: "swiper-button-prev",
+              "data-cy": "swiper-button-prev",
+              onClick: i[2] || (i[2] = P(() => {
+              }, ["stop"]))
+            }),
+            f("div", {
+              class: "swiper-button-next",
+              "data-cy": "swiper-button-next",
+              onClick: i[3] || (i[3] = P(() => {
+              }, ["stop"]))
+            })
+          ], 64)) : h("", !0)
+        ], 10, de),
+        t.thumbSwiperOptions ? (l(), n("div", {
+          key: 0,
+          id: `thumb_${m.value}`,
+          ref: "thumbsRef",
+          class: u(["swiper", e.$attrs["thumb-swiper-classes"]]),
+          thumbsSlider: ""
         }, [
-          (l(!0), n(k, null, V(t.images, (i, r) => (l(), n("div", {
-            key: `thumb_${w.value}_${r}`,
-            class: d(["swiper-slide", e.$attrs["thumb-img-wrapper-classes"]])
+          f("div", {
+            class: u(["swiper-wrapper", e.$attrs["thumb-swiper-wrapper-classes"]])
           }, [
-            p("img", B({
-              class: e.$attrs["thumb-img-classes"]
-            }, { ref_for: !0 }, P(i, -1, !1), {
-              alt: i.alt
-            }), null, 16, ce)
-          ], 2))), 128))
-        ], 2)
-      ], 10, ue)) : $("", !0)
-    ], 2));
+            (l(!0), n($, null, R(t.images, (s, a) => (l(), n("div", {
+              key: `thumb_${m.value}_${a}`,
+              class: u(["swiper-slide", e.$attrs["thumb-img-wrapper-classes"]])
+            }, [
+              f("img", T({
+                class: e.$attrs["thumb-img-classes"]
+              }, { ref_for: !0 }, C(s, -1, !1), {
+                alt: s.alt
+              }), null, 16, we)
+            ], 2))), 128))
+          ], 2)
+        ], 10, pe)) : h("", !0)
+      ], 2), [
+        [ie, O.value]
+      ]),
+      O.value ? h("", !0) : I(e.$slots, "placeholder", { key: 0 }, void 0, !0)
+    ], 64));
   }
 });
 export {
-  ye as default
+  Oe as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wikicasa-dev/components",
-  "version": "2.4.2-alpha.9",
+  "version": "2.5.1-alpha.0",
   "description": "Wikicasa frontend components",
   "type": "module",
   "main": "./dist/index.js",
@@ -52,41 +52,41 @@
   "dependencies": {
     "chart.js": "4.5.1",
     "chartjs-adapter-date-fns": "3.0.0",
-    "reka-ui": "^2.7.0",
-    "swiper": "^12.0.3",
-    "vue": "^3.5.27",
+    "reka-ui": "^2.8.2",
+    "swiper": "^12.1.2",
+    "vue": "^3.5.28",
     "vue-chartjs": "5.3.3"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.28.6",
     "@histoire/plugin-vue": "^1.0.0-beta.1",
-    "@types/node": "^25.0.9",
-    "@vitejs/plugin-vue": "^6.0.3",
+    "@types/node": "^25.3.0",
+    "@vitejs/plugin-vue": "^6.0.4",
     "@vue/eslint-config-prettier": "^10.2.0",
-    "@vue/eslint-config-typescript": "^14.6.0",
-    "@wikicasa-dev/svg-icons": "1.3.0",
-    "@wikicasa-dev/vue-composables": "0.1.0",
+    "@vue/eslint-config-typescript": "^14.7.0",
+    "@wikicasa-dev/svg-icons": "1.3.1",
+    "@wikicasa-dev/vue-composables": "0.1.2",
     "@wikicasa-dev/tailwind-plugins": "^0.0.3",
-    "@wikicasa-dev/types": "2.5.1",
+    "@wikicasa-dev/types": "2.5.4",
     "@wikicasa-dev/utilities": "1.2.0",
-    "autoprefixer": "^10.4.23",
+    "autoprefixer": "^10.4.24",
     "date-fns": "4.1.0",
     "eslint": "^9.39",
-    "eslint-plugin-vue": "^10.7.0",
+    "eslint-plugin-vue": "^10.8.0",
     "jiti": "^2.6.1",
-    "glob": "^13.0.0",
+    "glob": "^13.0.6",
     "histoire": "^1.0.0-beta.1",
     "postcss": "^8.5.6",
-    "prettier": "^3.8.0",
+    "prettier": "^3.8.1",
     "prettier-plugin-tailwindcss": "^0.7.2",
-    "rollup-plugin-visualizer": "^6.0.5",
+    "rollup-plugin-visualizer": "^7.0.0",
     "tailwindcss": "3.4.15",
     "typescript": "^5.9.3",
     "vite": "7.3.1",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
-    "vue-router": "^4.6.4",
-    "vue-tsc": "3.2.2"
+    "vue-router": "^5.0.3",
+    "vue-tsc": "3.2.5"
   },
   "readme": "ERROR: No README data found!",
   "scripts": {