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

package/dist/Swiper/Autoplay/factory.js

@@ -1,8 +1,10 @@
 const a = (o) => ({
   loader: () => import("./index.js").then((t) => t.default),
-  options: {
-    autoplay: o
-  }
+  ...o ? {
+    options: {
+      autoplay: o
+    }
+  } : {}
 });
 export {
   a as AutoplayModule

package/dist/Swiper/Autoplay/index.js

@@ -1,4 +1,4 @@
-import '../../assets/swiper-keyboard.css';/* empty css                                                                              */
+import '../../assets/swiper-autoplay.css';/* empty css                                                                              */
 import { Autoplay as p } from "swiper/modules";
 export {
   p as default

package/dist/Swiper/Controller/factory.js

@@ -1,9 +1,7 @@
-const e = (o) => ({
-  loader: () => import("./index.js").then((t) => t.default),
-  options: {
-    controller: o
-  }
+const l = (o) => ({
+  loader: () => import("./index.js").then((e) => e.default),
+  ...o ? { options: { controller: o } } : {}
 });
 export {
-  e as ControllerModule
+  l as ControllerModule
 };

package/dist/Swiper/Controller/index.js

@@ -1,4 +1,4 @@
-import '../../assets/swiper-keyboard.css';/* empty css                                                                                */
+import '../../assets/swiper-autoplay.css';/* empty css                                                                                */
 import { Controller as e } from "swiper/modules";
 export {
   e as default

package/dist/Swiper/FreeMode/factory.js

@@ -1,9 +1,11 @@
-const t = (e) => ({
+const d = (e) => ({
   loader: () => import("./index.js").then((o) => o.default),
-  options: {
-    freeMode: e
-  }
+  ...e ? {
+    options: {
+      freeMode: e
+    }
+  } : {}
 });
 export {
-  t as FreemodeModule
+  d as FreemodeModule
 };

package/dist/Swiper/Keyboard/factory.js

@@ -1,9 +1,11 @@
-const t = (o) => ({
-  loader: () => import("./index.js").then((e) => e.default),
-  options: {
-    keyboard: o
-  }
+const d = (e) => ({
+  loader: () => import("./index.js").then((o) => o.default),
+  ...e ? {
+    options: {
+      keyboard: e
+    }
+  } : {}
 });
 export {
-  t as KeyboardModule
+  d as KeyboardModule
 };

package/dist/Swiper/Keyboard/index.js

@@ -1,4 +1,4 @@
-import '../../assets/swiper-keyboard.css';/* empty css                                                                              */
+import '../../assets/swiper-autoplay.css';/* empty css                                                                              */
 import { Keyboard as e } from "swiper/modules";
 export {
   e as default

package/dist/Swiper/Navigation/factory.js

@@ -1,17 +1,13 @@
-const n = (e) => ({
-  loader: () => import("./index.js").then((t) => t.default),
+const o = (t) => ({
+  loader: () => import("./index.js").then((e) => e.default),
   options: {
-    navigation: typeof e == "boolean" ? {} : {
-      ...e,
-      ...e?.nextEl ?? {
-        nextEl: ".swiper-button-next"
-      },
-      ...e?.prevEl ?? {
-        prevEl: ".swiper-button-prev"
-      }
+    navigation: {
+      nextEl: ".swiper-button-next",
+      prevEl: ".swiper-button-prev",
+      ...typeof t == "boolean" ? {} : t
     }
   }
 });
 export {
-  n as NavigationModule
+  o as NavigationModule
 };

package/dist/Swiper/Pagination/factory.js

@@ -1,14 +1,14 @@
-const n = (a) => ({
-  loader: () => import("./index.js").then((i) => i.default),
+const n = (i) => ({
+  loader: () => import("./index.js").then((a) => a.default),
   options: {
     pagination: {
       el: ".swiper-pagination",
-      renderFraction: (i, t) => `<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="${i}"></span>
+      renderFraction: (a, t) => `<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="${t}"></span>
         </div>`,
-      ...typeof a == "boolean" ? {} : a
+      ...typeof i == "boolean" || !i ? {} : i
     }
   }
 });

package/dist/Swiper/Thumbs/factory.js

@@ -1,9 +1,9 @@
-const e = (o) => ({
-  loader: () => import("./index.js").then((t) => t.default),
-  options: {
-    thumbs: o
-  }
+const o = (t) => ({
+  loader: () => import("./index.js").then((e) => e.default),
+  ...t ? {
+    options: { thumbs: t }
+  } : {}
 });
 export {
-  e as ThumbsModule
+  o as ThumbsModule
 };

package/dist/Swiper/Thumbs/index.js

@@ -1,4 +1,4 @@
-import '../../assets/swiper-keyboard.css';/* empty css                                                                            */
+import '../../assets/swiper-autoplay.css';/* empty css                                                                            */
 import { Thumbs as t } from "swiper/modules";
 export {
   t as default

package/dist/Swiper/Zoom/factory.js

@@ -1,9 +1,11 @@
-const e = (o) => ({
-  loader: () => import("./index.js").then((t) => t.default),
-  options: {
-    zoom: o
-  }
+const t = (o) => ({
+  loader: () => import("./index.js").then((e) => e.default),
+  ...o ? {
+    options: {
+      zoom: o
+    }
+  } : {}
 });
 export {
-  e as ZoomModule
+  t as ZoomModule
 };

package/dist/Swiper/factory.js

@@ -1,12 +1,15 @@
 const a = async (o, r, s) => {
-  const t = s.map((e) => e.loader()), [{ Swiper: i }, ...c] = await Promise.all([
+  const i = s.map((e) => e.loader()), [{ Swiper: n }, ...p] = await Promise.all([
     import("./index.js"),
-    ...t
-  ]), n = s.reduce(
-    (e, p) => Object.assign(e, p.options),
-    { ...r, modules: c }
+    ...i
+  ]), t = s.reduce(
+    (e, c) => Object.assign(e, c.options),
+    { ...r, modules: p }
   );
-  return console.log("DEBUG:createSwiper", o), new i(o, n);
+  return console.log("DEBUG:createSwiper", {
+    container: o,
+    options: t
+  }), new n(o, t);
 };
 export {
   a as createSwiper

package/dist/assets/SwiperCarousel2.css

@@ -1 +1 @@
-.no-transition[data-v-9fbc502e]{transition-duration:0ms!important}.disable-select[data-v-9fbc502e]{-webkit-user-select:none;-moz-user-select:none;user-select:none}.swiper-button-disabled[data-v-9fbc502e]{pointer-events:auto!important}
+.no-transition[data-v-6fb3d4e8]{transition-duration:0ms!important}.disable-select[data-v-6fb3d4e8]{-webkit-user-select:none;-moz-user-select:none;user-select:none}.swiper-button-disabled[data-v-6fb3d4e8]{pointer-events:auto!important}

package/dist/components/carousel/SwiperCarousel.d.ts

@@ -20,8 +20,7 @@ declare function __VLS_template(): {
         last_slide?(_: {}): any;
     };
     refs: {
-        rootRef: HTMLDivElement;
-        swiperWrapperRef: HTMLDivElement;
+        swiperRef: HTMLDivElement;
         thumbsRef: HTMLDivElement;
     };
     rootEl: any;
@@ -46,8 +45,7 @@ declare const __VLS_component: import('vue').DefineComponent<SwiperCarouselProps
     }) => any) | undefined;
     onFirstSlideLoaded?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
-    rootRef: HTMLDivElement;
-    swiperWrapperRef: HTMLDivElement;
+    swiperRef: HTMLDivElement;
     thumbsRef: HTMLDivElement;
 }, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;

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 a = /* @__PURE__ */ r(o, [["__scopeId", "data-v-9fbc502e"]]);
+const a = /* @__PURE__ */ r(o, [["__scopeId", "data-v-6fb3d4e8"]]);
 export {
   a as default
 };

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

@@ -1,14 +1,13 @@
-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 { 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 { 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({
+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({
   inheritAttrs: !1,
   __name: "SwiperCarousel",
   props: {
@@ -22,81 +21,84 @@ const de = ["data-cy"], ue = ["data-idx", "alt", "width", "height", "onLoad"], c
     shiftFirstImage: { type: Boolean, default: !1 }
   },
   emits: ["moved", "click", "firstSlideLoaded", "init"],
-  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) => {
+  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) => {
       if (!e.images)
         return { src: e.src || "" };
-      let r = "", o = "", v = "";
+      let r = "", o = "", g = "";
       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`);
+          const { mq: c, width: m } = t.artDirection[a];
+          m && (g += g ? `,${c} ${parseInt(m)}px` : `${c} ${parseInt(m)}px`);
         }
-        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;
+        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;
       } 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, f, m) => (m === 0 && (r = `${f.storagePath}`), m > 0 && (c += ", "), `${c}${f.storagePath} ${m + 1}x`), "");
+        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`), "");
       }
       const J = r, Q = o;
-      return typeof w == "number" && s > w ? (r = "", o = "", { sizes: v, "data-src": J, "data-srcset": Q }) : i ? {
+      return typeof v == "number" && s > v ? (r = "", o = "", { sizes: g, "data-src": J, "data-srcset": Q }) : i ? {
         src: r,
         srcset: o,
-        sizes: v,
+        sizes: g,
         loading: "lazy",
         fetchpriority: "low"
       } : {
         src: r,
         srcset: o,
-        sizes: v,
-        loading: t.lazyLoadImages || s >= w ? "lazy" : void 0,
+        sizes: g,
+        loading: t.lazyLoadImages || s >= v ? "lazy" : void 0,
         fetchpriority: !t.lazyLoadImages && s === 0 ? "high" : "low"
       };
-    }, 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)
+    }, b = [], 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)
         return;
-      const i = h[e + 1];
+      const i = b[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");
+    }, U = (e) => {
+      e || !b?.[e] || M(() => {
+        y.value?.setAttribute("data-first-slide-loaded", "true"), h("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
       });
-    }, 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(
+      u.value = await R(
         e,
         {
           on: {
             init: () => {
-              F.value = !0, g("init");
+              F.value = !0, h("init");
             },
             slideChange: (r) => {
-              K(r.activeIndex), g("moved", { activeIndex: r.activeIndex });
+              K(r.activeIndex), h("moved", { activeIndex: r.activeIndex });
             }
           },
-          ...i ? { thumbs: { swiper: i } } : {},
+          ...i ? { thumbs: { ...t.swiperOptions.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,
+          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,
           //Thumbs specific modules
-          i ? ne(t.swiperOptions.thumbs) : void 0,
-          i ? se(t.swiperOptions.controller) : void 0
+          i ? oe() : void 0
         ].filter(Boolean)
       );
     };
     x(() => {
-      y.value && setTimeout(() => G(y.value, A.value));
+      y.value && setTimeout(() => E(y.value, A.value));
     });
     const H = (e) => {
       !u.value || u.value.params.slidesPerView === e || (u.value.params.slidesPerView = e, u.value.update());
@@ -104,11 +106,11 @@ const de = ["data-cy"], ue = ["data-idx", "alt", "width", "height", "onLoad"], c
     return _(
       () => t.images,
       () => {
-        C(() => {
+        M(() => {
           u.value?.update();
         });
       }
-    ), B({
+    ), T({
       swiper: u,
       moveTo(e, s = 0, i = !0) {
         u.value?.slideTo(e, s, i);
@@ -118,41 +120,41 @@ const de = ["data-cy"], ue = ["data-idx", "alt", "width", "height", "onLoad"], c
       class: d(["swiper-carousel-root", e.$attrs["root-classes"]])
     }, [
       p("div", {
-        ref: "rootRef",
+        ref: "swiperRef",
+        id: w.value,
         "data-cy": e.$attrs["data-cy"],
         class: d(["swiper uikit-carousel", e.$attrs["swiper-classes"]])
       }, [
         p("div", {
-          ref: "swiperWrapperRef",
           class: d(["swiper-wrapper", [
             e.$attrs["swiper-wrapper-classes"],
-            ee(E) === "none" && "no-transition"
+            ee(G) === "none" && "no-transition"
           ]]),
-          onClick: s[0] || (s[0] = (i) => g("click"))
+          onClick: s[0] || (s[0] = (i) => h("click"))
         }, [
           L(e.$slots, "default", {}, () => [
             (l(!0), n(k, null, V(t.images, (i, r) => (l(), n("div", {
-              key: `swiper_${$.value}_${r}`,
+              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"]])
               }, [
-                t.backgroundImage ? b("", !0) : (l(), n("img", R({
+                t.backgroundImage ? $("", !0) : (l(), n("img", B({
                   key: 0,
                   ref_for: !0,
                   ref: (o) => {
-                    h.push(o);
+                    b.push(o);
                   },
                   class: ["disable-select", [e.$attrs["slide-img-classes"] || i.classes]],
-                  "data-idx": `${$.value}-slide-img-${r}`
+                  "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) => W(r)
-                }), null, 16, ue))
+                  onLoad: (o) => U(r)
+                }), null, 16, de))
               ], 2)
             ], 2))), 128)),
             L(e.$slots, "last_slide", {}, void 0, !0)
@@ -163,7 +165,7 @@ const de = ["data-cy"], ue = ["data-idx", "alt", "width", "height", "onLoad"], c
           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)) : b("", !0),
+        }, null, 2)) : $("", !0),
         S ? (l(), n(k, { key: 1 }, [
           p("div", {
             class: "swiper-button-prev",
@@ -177,31 +179,33 @@ const de = ["data-cy"], ue = ["data-idx", "alt", "width", "height", "onLoad"], c
             onClick: s[3] || (s[3] = O(() => {
             }, ["stop"]))
           })
-        ], 64)) : b("", !0)
-      ], 10, de),
+        ], 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"]])
+        class: d(["swiper", e.$attrs["thumb-swiper-classes"]]),
+        thumbsSlider: ""
       }, [
         p("div", {
           class: d(["swiper-wrapper", e.$attrs["thumb-swiper-wrapper-classes"]])
         }, [
           (l(!0), n(k, null, V(t.images, (i, r) => (l(), n("div", {
-            key: `thumb_${$.value}_${r}`,
+            key: `thumb_${w.value}_${r}`,
             class: d(["swiper-slide", e.$attrs["thumb-img-wrapper-classes"]])
           }, [
-            p("img", R({
+            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)
-      ], 2)) : b("", !0)
+      ], 10, ue)) : $("", !0)
     ], 2));
   }
 });
 export {
-  ke as default
+  ye as default
 };

package/package.json

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