@wikicasa-dev/components 2.4.2-alpha.6 → 2.4.2-alpha.8

package/dist/Swiper/Autoplay/index.js

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

package/dist/Swiper/Controller/index.js

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

package/dist/Swiper/Keyboard/index.js

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

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-controller.css';/* empty css                                                                            */
 import { Thumbs as t } from "swiper/modules";
 export {
   t as default

package/dist/Swiper/factory.js

@@ -1,34 +1,15 @@
-function s(t, e) {
-  if (t == null)
-    return e == null ? {} : { ...e };
-  if (e == null)
-    return { ...t };
-  const n = { ...t };
-  for (const o in e)
-    if (Object.prototype.hasOwnProperty.call(e, o)) {
-      const r = e[o], i = n[o];
-      p(r) && p(i) ? n[o] = s(i, r) : n[o] = r;
-    }
-  return n;
-}
-function p(t) {
-  return t !== null && typeof t == "object" && !Array.isArray(t) && typeof t != "function" && Object.prototype.toString.call(t) === "[object Object]";
-}
-const a = async (t, e, n) => {
-  const o = n.map((c) => c.loader()), [{ Swiper: r }, ...i] = await Promise.all([
+const a = async (o, r, s) => {
+  const i = s.map((e) => e.loader()), [{ Swiper: n }, ...p] = await Promise.all([
     import("./index.js"),
-    ...o
-  ]), l = n.reduce(
-    (c, f) => s(c, f.options),
-    {
-      ...e,
-      modules: i
-    }
+    ...i
+  ]), t = s.reduce(
+    (e, c) => Object.assign(e, c.options),
+    { ...r, modules: p }
   );
   return console.log("DEBUG:createSwiper", {
-    container: t,
-    options: l
-  }), new r(t, l);
+    container: o,
+    options: t
+  }), new n(o, t);
 };
 export {
   a as createSwiper

package/dist/assets/SwiperCarousel2.css

@@ -1 +1 @@
-.no-transition[data-v-9ee6d9a5]{transition-duration:0ms!important}.disable-select[data-v-9ee6d9a5]{-webkit-user-select:none;-moz-user-select:none;user-select:none}.swiper-button-disabled[data-v-9ee6d9a5]{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 m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-9ee6d9a5"]]);
+const a = /* @__PURE__ */ r(o, [["__scopeId", "data-v-6fb3d4e8"]]);
 export {
-  m as default
+  a as default
 };

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

@@ -1,5 +1,5 @@
-import { defineComponent as Q, 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 u, 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 B } 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 { FreemodeModule as se } from "../../../../../Swiper/FreeMode/factory.js";
 import { KeyboardModule as ie } from "../../../../../Swiper/Keyboard/factory.js";
@@ -7,7 +7,7 @@ import { NavigationModule as re } from "../../../../../Swiper/Navigation/factory
 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 = ["data-cy"], ue = ["data-idx", "alt", "width", "height", "onLoad"], de = ["alt"], ye = /* @__PURE__ */ Q({
+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,68 +22,68 @@ const le = ["data-cy"], ue = ["data-idx", "alt", "width", "height", "onLoad"], d
   },
   emits: ["moved", "click", "firstSlideLoaded", "init"],
   setup(t, { expose: T, emit: D }) {
-    const g = D, d = z(null), y = C("rootRef"), A = C("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, G = t.swiperOptions?.effect || "slider", P = (e, s = -1, i = !1) => {
+    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 H = r, J = o;
-      return typeof w == "number" && s > w ? (r = "", o = "", { sizes: v, "data-src": H, "data-srcset": J }) : i ? {
+      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,
-        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 || "");
     }, U = (e) => {
-      e || !h?.[e] || M(() => {
-        y.value?.setAttribute("data-first-slide-loaded", "true"), g("firstSlideLoaded");
+      e || !b?.[e] || M(() => {
+        y.value?.setAttribute("data-first-slide-loaded", "true"), h("firstSlideLoaded");
       });
-    }, W = (e) => t.thumbSwiperOptions ? B(e, t.thumbSwiperOptions, [
+    }, Z = (e) => t.thumbSwiperOptions ? R(e, t.thumbSwiperOptions, [
       se(t.thumbSwiperOptions.freeMode)
-    ]) : null, Z = async (e, s) => {
+    ]) : null, E = async (e, s) => {
       console.log("DEBUG:SwiperCarousel", {
         rootEl: e,
         thumbEl: s
       });
-      const i = s ? await W(s) : null;
-      d.value = await B(
+      const i = s ? await Z(s) : null;
+      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
         },
         [
@@ -93,68 +93,68 @@ const le = ["data-cy"], ue = ["data-idx", "alt", "width", "height", "onLoad"], d
           S ? re(t.swiperOptions.navigation) : void 0,
           q ? te(t.swiperOptions.autoplay) : void 0,
           //Thumbs specific modules
-          i ? oe(t.swiperOptions.thumbs) : void 0
+          i ? oe() : void 0
         ].filter(Boolean)
       );
     };
     x(() => {
-      y.value && setTimeout(() => Z(y.value, A.value));
+      y.value && setTimeout(() => E(y.value, A.value));
     });
-    const E = (e) => {
-      !d.value || d.value.params.slidesPerView === e || (d.value.params.slidesPerView = e, d.value.update());
+    const H = (e) => {
+      !u.value || u.value.params.slidesPerView === e || (u.value.params.slidesPerView = e, u.value.update());
     };
     return _(
       () => t.images,
       () => {
         M(() => {
-          d.value?.update();
+          u.value?.update();
         });
       }
     ), T({
-      swiper: d,
+      swiper: u,
       moveTo(e, s = 0, i = !0) {
-        d.value?.slideTo(e, s, i);
+        u.value?.slideTo(e, s, i);
       },
-      updateSlidesPerView: E
+      updateSlidesPerView: H
     }), (e, s) => (l(), n("div", {
-      class: u(["swiper-carousel-root", e.$attrs["root-classes"]])
+      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: u(["swiper uikit-carousel", e.$attrs["swiper-classes"]])
+        class: d(["swiper uikit-carousel", e.$attrs["swiper-classes"]])
       }, [
         p("div", {
-          ref: "swiperWrapperRef",
-          class: u(["swiper-wrapper", [
+          class: d(["swiper-wrapper", [
             e.$attrs["swiper-wrapper-classes"],
             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}`,
-              class: u(["swiper-slide", e.$attrs["swiper-slide-classes"]])
+              key: `swiper_${w.value}_${r}`,
+              class: d(["swiper-slide", e.$attrs["swiper-slide-classes"]])
             }, [
               p("div", {
-                class: u(["swiper-zoom-container", e.$attrs["swiper-zoom-container-classes"]])
+                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) => U(r)
-                }), null, 16, ue))
+                }), null, 16, de))
               ], 2)
             ], 2))), 128)),
             L(e.$slots, "last_slide", {}, void 0, !0)
@@ -162,10 +162,10 @@ const le = ["data-cy"], ue = ["data-idx", "alt", "width", "height", "onLoad"], d
         ], 2),
         I ? (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"]),
+          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",
@@ -179,29 +179,30 @@ const le = ["data-cy"], ue = ["data-idx", "alt", "width", "height", "onLoad"], d
             onClick: s[3] || (s[3] = O(() => {
             }, ["stop"]))
           })
-        ], 64)) : b("", !0)
+        ], 64)) : $("", !0)
       ], 10, le),
       t.thumbSwiperOptions ? (l(), n("div", {
         key: 0,
+        id: `thumb_${w.value}`,
         ref: "thumbsRef",
-        class: u(["swiper", e.$attrs["thumb-swiper-classes"]]),
+        class: d(["swiper", e.$attrs["thumb-swiper-classes"]]),
         thumbsSlider: ""
       }, [
         p("div", {
-          class: u(["swiper-wrapper", e.$attrs["thumb-swiper-wrapper-classes"]])
+          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}`,
-            class: u(["swiper-slide", e.$attrs["thumb-img-wrapper-classes"]])
+            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, de)
+            }), null, 16, ce)
           ], 2))), 128))
         ], 2)
-      ], 2)) : b("", !0)
+      ], 10, ue)) : $("", !0)
     ], 2));
   }
 });

package/package.json

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