@wikicasa-dev/components 2.4.1 → 2.4.2-alpha.1

package/dist/components/carousel/SwiperCarousel.js

@@ -2,7 +2,7 @@ import o from "../../packages/components/lib/components/carousel/SwiperCarousel.
 import '../../assets/SwiperCarousel2.css';import '../../assets/SwiperCarousel.css';/* empty css                                                                    */
 /* empty css                                                                    */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-1ea2f6ce"]]);
+const a = /* @__PURE__ */ r(o, [["__scopeId", "data-v-9fbc502e"]]);
 export {
-  m as default
+  a as default
 };

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

@@ -1,10 +1,14 @@
-import { defineComponent as Q, reactive as U, ref as k, useId as X, computed as f, onMounted as Y, watch as x, nextTick as V, createElementBlock as l, openBlock as u, normalizeClass as d, createElementVNode as v, createCommentVNode as $, renderSlot as M, Fragment as P, renderList as E, mergeProps as F, withModifiers as O } from "vue";
-import { Swiper as T } from "swiper";
-import { Zoom as _ } from "swiper/modules";
-import '../../../../../assets/swiper-zoom.css';import '../../../../../assets/swiper-swiper.css';/* empty css                                                                             */
-/* empty css                                                                                   */
-import { shallowCopyObjectTo as ee } from "@wikicasa-dev/utilities";
-const te = ["id"], se = ["id", "data-cy"], ie = ["data-idx", "alt", "width", "height", "onLoad"], ae = ["id"], re = ["alt"], ce = /* @__PURE__ */ Q({
+import { defineComponent as U, shallowRef as z, useTemplateRef as M, useId as X, computed as Y, onMounted as x, watch as _, nextTick as C, createElementBlock as n, openBlock as l, normalizeClass as d, createElementVNode as p, createCommentVNode as b, unref as ee, renderSlot as L, Fragment as k, renderList as V, mergeProps as R, withModifiers as O } from "vue";
+import { createSwiper as T } from "../../../../../Swiper/factory.js";
+import { AutoplayModule as te } from "../../../../../Swiper/Autoplay/factory.js";
+import { ControllerModule as se } from "../../../../../Swiper/Controller/factory.js";
+import { FreemodeModule as ie } from "../../../../../Swiper/FreeMode/factory.js";
+import { KeyboardModule as re } from "../../../../../Swiper/Keyboard/factory.js";
+import { NavigationModule as ae } from "../../../../../Swiper/Navigation/factory.js";
+import { PaginationModule as oe } from "../../../../../Swiper/Pagination/factory.js";
+import { ThumbsModule as ne } from "../../../../../Swiper/Thumbs/factory.js";
+import { ZoomModule as le } from "../../../../../Swiper/Zoom/factory.js";
+const de = ["data-cy"], ue = ["data-idx", "alt", "width", "height", "onLoad"], ce = ["alt"], ke = /* @__PURE__ */ U({
   inheritAttrs: !1,
   __name: "SwiperCarousel",
   props: {
@@ -18,229 +22,186 @@ const te = ["id"], se = ["id", "data-cy"], ie = ["data-idx", "alt", "width", "he
     shiftFirstImage: { type: Boolean, default: !1 }
   },
   emits: ["moved", "click", "firstSlideLoaded", "init"],
-  setup(s, { expose: B, emit: D }) {
-    const y = D, a = U({
-      swiperParams: { modules: [_] },
-      swiper: null,
-      initCarousel: !1
-    }), S = k(), j = k(!1), A = X(), p = f(() => s.id ?? A), N = f(() => a.swiper), g = f(() => s.swiperOptions?.slidesPerView || 1), W = f(() => !!s.swiperOptions?.keyboard), C = f(() => !!s.swiperOptions.navigation), I = f(() => !!s.swiperOptions.pagination), q = f(() => !!s.swiperOptions.autoplay), K = f(
-      () => s.swiperOptions?.effect || "slider"
-    ), R = () => {
-      s.swiperOptions && ee(s.swiperOptions, a.swiperParams);
-    }, z = (e, i = -1, t = !1) => {
+  setup(t, { expose: B, emit: D }) {
+    const g = D, u = z(null), y = M("rootRef"), A = M("thumbsRef"), F = z(!1), N = X(), $ = Y(() => t.id ?? N), w = t.swiperOptions?.slidesPerView || 1, j = !!t.swiperOptions?.keyboard, S = !!t.swiperOptions.navigation, I = !!t.swiperOptions.pagination, q = !!t.swiperOptions.autoplay, E = t.swiperOptions?.effect || "slider", P = (e, s = -1, i = !1) => {
       if (!e.images)
         return { src: e.src || "" };
-      let r = "", o = "", b = "";
-      if (s.artDirection) {
-        for (const n in s.artDirection) {
-          const { mq: w, width: c } = s.artDirection[n];
-          c && (b += b ? `,${w} ${parseInt(c)}px` : `${w} ${parseInt(c)}px`);
+      let r = "", o = "", v = "";
+      if (t.artDirection) {
+        for (const a in t.artDirection) {
+          const { mq: c, width: f } = t.artDirection[a];
+          f && (v += v ? `,${c} ${parseInt(f)}px` : `${c} ${parseInt(f)}px`);
         }
-        o = e.images.reduce((n, w, c) => {
-          const m = Object.values(s.artDirection)[c];
-          return !m || !m.width || (n += n ? `, ${w.storagePath} ${m.width}` : `${w.storagePath} ${m.width}`), n;
+        o = e.images.reduce((a, c, f) => {
+          const m = Object.values(t.artDirection)[f];
+          return !m || !m.width || (a += a ? `, ${c.storagePath} ${m.width}` : `${c.storagePath} ${m.width}`), a;
         }, ""), r = e.images[0].storagePath;
       } else {
-        let n = e.images;
-        e.images.length > 3 ? n = e.images.slice(2, 5) : s.shiftFirstImage && (n[0] = n[1]), o = n.reduce((w, c, m) => (m === 0 && (r = `${c.storagePath}`), m > 0 && (w += ", "), `${w}${c.storagePath} ${m + 1}x`), "");
+        let a = e.images;
+        e.images.length > 3 ? a = e.images.slice(2, 5) : t.shiftFirstImage && (a[0] = a[1]), o = a.reduce((c, f, m) => (m === 0 && (r = `${f.storagePath}`), m > 0 && (c += ", "), `${c}${f.storagePath} ${m + 1}x`), "");
       }
-      const H = r, J = o;
-      return typeof g.value == "number" && i > g.value ? (r = "", o = "", { sizes: b, "data-src": H, "data-srcset": J }) : t ? {
+      const J = r, Q = o;
+      return typeof w == "number" && s > w ? (r = "", o = "", { sizes: v, "data-src": J, "data-srcset": Q }) : i ? {
         src: r,
         srcset: o,
-        sizes: b,
+        sizes: v,
         loading: "lazy",
         fetchpriority: "low"
       } : {
         src: r,
         srcset: o,
-        sizes: b,
-        loading: s.lazyLoadImages || i >= g.value ? "lazy" : void 0,
-        fetchpriority: !s.lazyLoadImages && i === 0 ? "high" : "low"
+        sizes: v,
+        loading: t.lazyLoadImages || s >= w ? "lazy" : void 0,
+        fetchpriority: !t.lazyLoadImages && s === 0 ? "high" : "low"
       };
-    }, h = [], Z = (e) => {
-      if (typeof g.value == "string") return;
-      const i = h[e];
-      if (i && !i.src && (i.src = i.dataset.src || "", i.srcset = i.dataset.srcset || ""), e < g.value || e + 1 >= (s.images ?? []).length)
+    }, h = [], K = (e) => {
+      if (typeof w == "string") return;
+      const s = h[e];
+      if (s && !s.src && (s.src = s.dataset.src || "", s.srcset = s.dataset.srcset || ""), e < w || e + 1 >= (t.images ?? []).length)
         return;
-      const t = h[e + 1];
-      t && !t.src && (t.src = t?.dataset.src || "", t.srcset = t?.dataset.srcset || "");
-    }, L = k(null), G = (e) => {
-      e === 0 && h && h[e] && V(() => {
-        L.value?.setAttribute("data-first-slide-loaded", "true"), y("firstSlideLoaded");
+      const i = h[e + 1];
+      i && !i.src && (i.src = i?.dataset.src || "", i.srcset = i?.dataset.srcset || "");
+    }, W = (e) => {
+      e || !h?.[e] || C(() => {
+        y.value?.setAttribute("data-first-slide-loaded", "true"), g("firstSlideLoaded");
       });
-    };
-    return Y(async () => {
-      if (R(), W.value) {
-        const { Keyboard: t } = await import("../../../../../Swiper/keyboard.js");
-        a.swiperParams.modules?.push(t), a.swiperParams.keyboard = s.swiperOptions.keyboard;
-      }
-      if (I.value) {
-        const { Pagination: t } = await import("../../../../../Swiper/pagination.js");
-        a.swiperParams.modules?.push(t), a.swiperParams.pagination = {
-          el: ".swiper-pagination",
-          renderFraction: (r, o) => `<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="${r}"></span>
-                    /
-                    <span data-cy="swiper-pagination-total" class="${o}"></span>
-                 </div>`,
-          ...typeof a.swiperParams.pagination == "boolean" ? {} : a.swiperParams.pagination
-        };
-      }
-      if (C.value) {
-        const { Navigation: t } = await import("../../../../../Swiper/navigation.js");
-        a.swiperParams.modules?.push(t);
-        const r = {
-          ...s.swiperOptions.navigation.nextEl ?? {
-            nextEl: ".swiper-button-next"
-          },
-          ...s.swiperOptions.navigation.prevEl ?? {
-            prevEl: ".swiper-button-prev"
-          }
-        };
-        a.swiperParams.navigation = {
-          ...typeof s.swiperOptions.navigation == "object" ? s.swiperOptions.navigation : {},
-          ...r
-        };
-      }
-      if (q.value) {
-        const { Autoplay: t } = await import("../../../../../Swiper/autoplay.js");
-        a.swiperParams.modules?.push(t), a.swiperParams.autoplay = s.swiperOptions.autoplay;
-      }
-      const e = {
-        ...a.swiperParams,
-        on: {
-          init: () => {
-            j.value = !0, y("init");
+    }, Z = (e) => t.thumbSwiperOptions ? T(e, t.thumbSwiperOptions, [
+      ie(t.thumbSwiperOptions.freeMode)
+    ]) : null, G = async (e, s) => {
+      const i = s ? await Z(s) : null;
+      u.value = await T(
+        e,
+        {
+          on: {
+            init: () => {
+              F.value = !0, g("init");
+            },
+            slideChange: (r) => {
+              K(r.activeIndex), g("moved", { activeIndex: r.activeIndex });
+            }
           },
-          slideChange: (t) => {
-            Z(t.activeIndex), y("moved", { activeIndex: t.activeIndex });
-          }
-        }
-      };
-      let i = null;
-      if (s.thumbSwiperOptions) {
-        const [t, r, o] = await Promise.all([
-          import("../../../../../Swiper/thumbs.js"),
-          import("../../../../../Swiper/free-mode.js"),
-          import("../../../../../Swiper/controller.js")
-        ]);
-        a.swiperParams.modules?.push(t.Thumbs), a.swiperParams.modules?.push(o.Controller), i = new T(`#thumb_${p.value}`, {
-          ...s.thumbSwiperOptions,
-          modules: [r.FreeMode]
-        }), e.thumbs = {
-          swiper: i
-        };
-      }
-      e.lazyPreloadPrevNext = 1, a.swiper = new T(`#${p.value}`, e), S.value?.classList.remove("uikit-hidden");
-    }), x(
-      () => s.images,
+          ...i ? { thumbs: { swiper: i } } : {},
+          ...t.swiperOptions
+        },
+        [
+          le(t.swiperOptions.zoom),
+          j ? re(t.swiperOptions.keyboard) : void 0,
+          I ? oe(t.swiperOptions.pagination) : void 0,
+          S ? ae(t.swiperOptions.navigation) : void 0,
+          q ? te(t.swiperOptions.autoplay) : void 0,
+          //Thumbs specific modules
+          i ? ne(t.swiperOptions.thumbs) : void 0,
+          i ? se(t.swiperOptions.controller) : void 0
+        ].filter(Boolean)
+      );
+    };
+    x(() => {
+      y.value && setTimeout(() => G(y.value, A.value));
+    });
+    const H = (e) => {
+      !u.value || u.value.params.slidesPerView === e || (u.value.params.slidesPerView = e, u.value.update());
+    };
+    return _(
+      () => t.images,
       () => {
-        V(() => {
-          a.swiper?.update();
+        C(() => {
+          u.value?.update();
         });
       }
     ), B({
-      swiper: N,
-      moveTo(e, i = 0, t = !0) {
-        a.swiper?.slideTo(e, i, t);
+      swiper: u,
+      moveTo(e, s = 0, i = !0) {
+        u.value?.slideTo(e, s, i);
       },
-      updateSlidesPerView: (e) => {
-        !a.swiper || a.swiper.params.slidesPerView === e || (a.swiper.params.slidesPerView = e, a.swiper.update());
-      }
-    }), (e, i) => (u(), l("div", {
-      id: `root-${p.value}`,
-      ref_key: "root",
-      ref: L,
+      updateSlidesPerView: H
+    }), (e, s) => (l(), n("div", {
       class: d(["swiper-carousel-root", e.$attrs["root-classes"]])
     }, [
-      v("div", {
-        id: p.value,
+      p("div", {
+        ref: "rootRef",
         "data-cy": e.$attrs["data-cy"],
-        class: d(["swiper", e.$attrs["swiper-classes"]])
+        class: d(["swiper uikit-carousel", e.$attrs["swiper-classes"]])
       }, [
-        v("div", {
-          ref_key: "swiperWrapper",
-          ref: S,
+        p("div", {
+          ref: "swiperWrapperRef",
           class: d(["swiper-wrapper", [
             e.$attrs["swiper-wrapper-classes"],
-            K.value === "none" && "no-transition"
+            ee(E) === "none" && "no-transition"
           ]]),
-          onClick: i[0] || (i[0] = (t) => y("click"))
+          onClick: s[0] || (s[0] = (i) => g("click"))
         }, [
-          M(e.$slots, "default", {}, () => [
-            (u(!0), l(P, null, E(s.images, (t, r) => (u(), l("div", {
-              key: `swiper_${p.value}_${r}`,
+          L(e.$slots, "default", {}, () => [
+            (l(!0), n(k, null, V(t.images, (i, r) => (l(), n("div", {
+              key: `swiper_${$.value}_${r}`,
               class: d(["swiper-slide", e.$attrs["swiper-slide-classes"]])
             }, [
-              v("div", {
+              p("div", {
                 class: d(["swiper-zoom-container", e.$attrs["swiper-zoom-container-classes"]])
               }, [
-                s.backgroundImage ? $("", !0) : (u(), l("img", F({
+                t.backgroundImage ? b("", !0) : (l(), n("img", R({
                   key: 0,
                   ref_for: !0,
                   ref: (o) => {
                     h.push(o);
                   },
-                  class: ["disable-select", [e.$attrs["slide-img-classes"] || t.classes]],
-                  "data-idx": `${p.value}-slide-img-${r}`
-                }, { ref_for: !0 }, z(t, r), {
-                  alt: t.alt,
+                  class: ["disable-select", [e.$attrs["slide-img-classes"] || i.classes]],
+                  "data-idx": `${$.value}-slide-img-${r}`
+                }, { ref_for: !0 }, P(i, r), {
+                  alt: i.alt,
                   itemprop: "image",
-                  width: t.width,
-                  height: t.height,
-                  onLoad: (o) => G(r)
-                }), null, 16, ie))
+                  width: i.width,
+                  height: i.height,
+                  onLoad: (o) => W(r)
+                }), null, 16, ue))
               ], 2)
             ], 2))), 128)),
-            M(e.$slots, "last_slide", {}, void 0, !0)
+            L(e.$slots, "last_slide", {}, void 0, !0)
           ], !0)
         ], 2),
-        I.value ? (u(), l("div", {
+        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: i[1] || (i[1] = O(() => {
+          onClick: s[1] || (s[1] = O(() => {
           }, ["stop"]))
-        }, null, 2)) : $("", !0),
-        C.value ? (u(), l(P, { key: 1 }, [
-          v("div", {
+        }, null, 2)) : b("", !0),
+        S ? (l(), n(k, { key: 1 }, [
+          p("div", {
             class: "swiper-button-prev",
             "data-cy": "swiper-button-prev",
-            onClick: i[2] || (i[2] = O(() => {
+            onClick: s[2] || (s[2] = O(() => {
             }, ["stop"]))
           }),
-          v("div", {
+          p("div", {
             class: "swiper-button-next",
             "data-cy": "swiper-button-next",
-            onClick: i[3] || (i[3] = O(() => {
+            onClick: s[3] || (s[3] = O(() => {
             }, ["stop"]))
           })
-        ], 64)) : $("", !0)
-      ], 10, se),
-      s.thumbSwiperOptions ? (u(), l("div", {
+        ], 64)) : b("", !0)
+      ], 10, de),
+      t.thumbSwiperOptions ? (l(), n("div", {
         key: 0,
-        id: `thumb_${p.value}`,
-        thumbsSlider: "",
+        ref: "thumbsRef",
         class: d(["swiper", e.$attrs["thumb-swiper-classes"]])
       }, [
-        v("div", {
+        p("div", {
           class: d(["swiper-wrapper", e.$attrs["thumb-swiper-wrapper-classes"]])
         }, [
-          (u(!0), l(P, null, E(s.images, (t, r) => (u(), l("div", {
-            key: `thumb_${p.value}_${r}`,
+          (l(!0), n(k, null, V(t.images, (i, r) => (l(), n("div", {
+            key: `thumb_${$.value}_${r}`,
             class: d(["swiper-slide", e.$attrs["thumb-img-wrapper-classes"]])
           }, [
-            v("img", F({
+            p("img", R({
               class: e.$attrs["thumb-img-classes"]
-            }, { ref_for: !0 }, z(t, -1, !1), {
-              alt: t.alt
-            }), null, 16, re)
+            }, { ref_for: !0 }, P(i, -1, !1), {
+              alt: i.alt
+            }), null, 16, ce)
           ], 2))), 128))
         ], 2)
-      ], 10, ae)) : $("", !0)
-    ], 10, te));
+      ], 2)) : b("", !0)
+    ], 2));
   }
 });
 export {
-  ce as default
+  ke as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wikicasa-dev/components",
-  "version": "2.4.1",
+  "version": "2.4.2-alpha.1",
   "description": "Wikicasa frontend components",
   "type": "module",
   "main": "./dist/index.js",

package/dist/Swiper/autoplay.js

@@ -1,5 +0,0 @@
-import { Autoplay as t } from "swiper/modules";
-import '../assets/swiper-thumbs.css';/* empty css                                                                           */
-export {
-  t as Autoplay
-};

package/dist/Swiper/controller.js

@@ -1,5 +0,0 @@
-import { Controller as e } from "swiper/modules";
-import '../assets/swiper-thumbs.css';/* empty css                                                                             */
-export {
-  e as Controller
-};

package/dist/Swiper/free-mode.js

@@ -1,5 +0,0 @@
-import { FreeMode as m } from "swiper/modules";
-import '../assets/swiper-free-mode.css';/* empty css                                                                            */
-export {
-  m as FreeMode
-};

package/dist/Swiper/keyboard.js

@@ -1,5 +0,0 @@
-import { Keyboard as m } from "swiper/modules";
-import '../assets/swiper-thumbs.css';/* empty css                                                                           */
-export {
-  m as Keyboard
-};

package/dist/Swiper/navigation.js

@@ -1,5 +0,0 @@
-import { Navigation as t } from "swiper/modules";
-import '../assets/swiper-navigation.css';/* empty css                                                                             */
-export {
-  t as Navigation
-};

package/dist/Swiper/pagination.js

@@ -1,5 +0,0 @@
-import { Pagination as t } from "swiper/modules";
-import '../assets/swiper-pagination.css';/* empty css                                                                             */
-export {
-  t as Pagination
-};

package/dist/Swiper/thumbs.js

@@ -1,5 +0,0 @@
-import { Thumbs as p } from "swiper/modules";
-import '../assets/swiper-thumbs.css';/* empty css                                                                         */
-export {
-  p as Thumbs
-};