@wikicasa-dev/components 2.1.2-alpha.3 → 2.1.2-alpha.4

package/dist/assets/packages/components/lib/components/carousel/SwiperCarousel2.css

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

package/dist/components/carousel/SwiperCarousel.js

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

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

@@ -1,12 +1,12 @@
-import { defineComponent as J, reactive as Q, ref as $, useId as U, computed as f, onMounted as X, watch as Y, nextTick as L, createElementBlock as l, openBlock as u, normalizeClass as d, createElementVNode as v, createCommentVNode as b, renderSlot as M, Fragment as k, renderList as E, mergeProps as F, withModifiers as P } from "vue";
-import { Swiper as T } from "swiper";
+import { defineComponent as J, reactive as Q, ref as k, useId as U, computed as f, onMounted as X, watch as Y, nextTick as M, createElementBlock as l, openBlock as u, normalizeClass as p, createElementVNode as v, createCommentVNode as y, renderSlot as E, Fragment as P, renderList as F, mergeProps as T, withModifiers as O } from "vue";
+import { Swiper as B } from "swiper";
 import x from "../../../../../node_modules/.pnpm/swiper@11.2.6/node_modules/swiper/modules/zoom.js";
 import '../../../../../assets/node_modules/.pnpm/swiper@11.2.6/node_modules/swiper/modules/zoom.css';import '../../../../../assets/node_modules/.pnpm/swiper@11.2.6/node_modules/swiper/swiper.css';/* empty css                                                                             */
 /* empty css                                                                                   */
 import "../../../../../node_modules/.pnpm/js-cookie@3.0.5/node_modules/js-cookie/dist/js.cookie.js";
 import { shallowCopyObjectTo as _ } from "../../../../../node_modules/.pnpm/@wikicasa-dev_utilities@1.1.21/node_modules/@wikicasa-dev/utilities/dist/utils/ObjectUtils.js";
 import "../../../../../_virtual/polyline.js";
-const ee = ["id"], te = ["id", "data-cy"], se = ["data-idx", "alt", "width", "height", "onLoad"], ie = ["id"], ae = ["loading", "alt"], me = /* @__PURE__ */ J({
+const ee = ["id"], te = ["id", "data-cy"], se = ["data-idx", "alt", "width", "height", "onLoad"], ie = ["id"], ae = ["alt"], me = /* @__PURE__ */ J({
   inheritAttrs: !1,
   __name: "SwiperCarousel",
   props: {
@@ -20,37 +20,43 @@ const ee = ["id"], te = ["id", "data-cy"], se = ["data-idx", "alt", "width", "he
     shiftFirstImage: { type: Boolean, default: !1 }
   },
   emits: ["moved", "click", "firstSlideLoaded"],
-  setup(s, { expose: V, emit: B }) {
-    const y = B, r = Q({
+  setup(s, { expose: D, emit: j }) {
+    const $ = j, r = Q({
       swiperParams: { modules: [x] },
       swiper: null,
       initCarousel: !1
-    }), O = $(), D = $(!1), j = U(), p = f(() => s.id ?? j), g = f(() => s.swiperOptions?.slidesPerView || 1), A = f(() => s.thumbSwiperOptions?.slidesPerView || 1), N = f(() => !!s.swiperOptions?.keyboard), S = f(() => !!s.swiperOptions.navigation), C = f(() => !!s.swiperOptions.pagination), W = f(() => !!s.swiperOptions.autoplay), q = f(
+    }), S = k(), A = k(!1), N = U(), d = f(() => s.id ?? N), g = f(() => s.swiperOptions?.slidesPerView || 1), V = f(() => !!s.swiperOptions?.keyboard), C = f(() => !!s.swiperOptions.navigation), I = f(() => !!s.swiperOptions.pagination), W = f(() => !!s.swiperOptions.autoplay), q = f(
       () => s.swiperOptions?.effect || "slider"
     ), K = () => {
       s.swiperOptions && _(s.swiperOptions, r.swiperParams);
-    }, I = (e, i = -1) => {
+    }, z = (e, i = -1, t = !1) => {
       if (!e.images)
         return { src: e.src || "" };
-      let t = "", a = "", o = "";
+      let a = "", o = "", b = "";
       if (s.artDirection) {
         for (const n in s.artDirection) {
           const { mq: c, width: m } = s.artDirection[n];
-          m && (o += o ? `,${c} ${parseInt(m)}px` : `${c} ${parseInt(m)}px`);
+          m && (b += b ? `,${c} ${parseInt(m)}px` : `${c} ${parseInt(m)}px`);
         }
-        a = e.images.reduce((n, c, m) => {
+        o = e.images.reduce((n, c, m) => {
           const w = Object.values(s.artDirection)[m];
           return !w || !w.width || (n += n ? `, ${c.storagePath} ${w.width}` : `${c.storagePath} ${w.width}`), n;
-        }, ""), t = e.images[0].storagePath;
+        }, ""), a = 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]), a = n.reduce((c, m, w) => (w === 0 && (t = `${m.storagePath}`), w > 0 && (c += ", "), `${c}${m.storagePath} ${w + 1}x`), "");
+        e.images.length > 3 ? n = e.images.slice(2, 5) : s.shiftFirstImage && (n[0] = n[1]), o = n.reduce((c, m, w) => (w === 0 && (a = `${m.storagePath}`), w > 0 && (c += ", "), `${c}${m.storagePath} ${w + 1}x`), "");
       }
-      const G = t, H = a;
-      return typeof g.value == "number" && i > g.value ? (t = "", a = "", { sizes: o, "data-src": G, "data-srcset": H }) : {
-        src: t,
-        srcset: a,
-        sizes: o,
+      const G = a, H = o;
+      return typeof g.value == "number" && i > g.value ? (a = "", o = "", { sizes: b, "data-src": G, "data-srcset": H }) : t ? {
+        src: a,
+        srcset: o,
+        sizes: b,
+        loading: "lazy",
+        fetchpriority: "low"
+      } : {
+        src: a,
+        srcset: o,
+        sizes: b,
         loading: s.lazyLoadImages || i >= g.value ? "lazy" : void 0,
         fetchpriority: !s.lazyLoadImages && i === 0 ? "high" : "low"
       };
@@ -62,22 +68,22 @@ const ee = ["id"], te = ["id", "data-cy"], se = ["data-idx", "alt", "width", "he
       const t = h[e + 1];
       t && !t.src && (t.src = t?.dataset.src || "", t.srcset = t?.dataset.srcset || "");
     };
-    V({
+    D({
       moveTo(e, i = 0, t = !0) {
         r.swiper?.slideTo(e, i, t);
       }
     });
-    const z = $(null), Z = (e) => {
-      e === 0 && h && h[e] && L(() => {
-        z.value?.setAttribute("data-first-slide-loaded", "true"), y("firstSlideLoaded");
+    const L = k(null), Z = (e) => {
+      e === 0 && h && h[e] && M(() => {
+        L.value?.setAttribute("data-first-slide-loaded", "true"), $("firstSlideLoaded");
       });
     };
     return X(async () => {
-      if (K(), N.value) {
+      if (K(), V.value) {
         const { Keyboard: t } = await import("../../../lazyModules/Swiper/keyboard.js");
         r.swiperParams.modules?.push(t), r.swiperParams.keyboard = s.swiperOptions.keyboard;
       }
-      if (C.value) {
+      if (I.value) {
         const { Pagination: t } = await import("../../../lazyModules/Swiper/pagination.js");
         r.swiperParams.modules?.push(t), r.swiperParams.pagination = {
           el: ".swiper-pagination",
@@ -89,7 +95,7 @@ const ee = ["id"], te = ["id", "data-cy"], se = ["data-idx", "alt", "width", "he
           ...typeof r.swiperParams.pagination == "boolean" ? {} : r.swiperParams.pagination
         };
       }
-      if (S.value) {
+      if (C.value) {
         const { Navigation: t } = await import("../../../lazyModules/Swiper/navigation.js");
         r.swiperParams.modules?.push(t);
         const a = {
@@ -113,10 +119,10 @@ const ee = ["id"], te = ["id", "data-cy"], se = ["data-idx", "alt", "width", "he
         ...r.swiperParams,
         on: {
           init: () => {
-            D.value = !0;
+            A.value = !0;
           },
           slideChange: (t) => {
-            R(t.activeIndex), y("moved", { activeIndex: t.activeIndex });
+            R(t.activeIndex), $("moved", { activeIndex: t.activeIndex });
           }
         }
       };
@@ -127,58 +133,58 @@ const ee = ["id"], te = ["id", "data-cy"], se = ["data-idx", "alt", "width", "he
           import("../../../lazyModules/Swiper/free-mode.js"),
           import("../../../lazyModules/Swiper/controller.js")
         ]);
-        r.swiperParams.modules?.push(t.Thumbs), r.swiperParams.modules?.push(o.Controller), i = new T(`#thumb_${p.value}`, {
+        r.swiperParams.modules?.push(t.Thumbs), r.swiperParams.modules?.push(o.Controller), i = new B(`#thumb_${d.value}`, {
           ...s.thumbSwiperOptions,
           modules: [a.FreeMode]
         }), e.thumbs = {
           swiper: i
         };
       }
-      e.lazyPreloadPrevNext = 1, r.swiper = new T(`#${p.value}`, e), O.value?.classList.remove("uikit-hidden");
+      e.lazyPreloadPrevNext = 1, r.swiper = new B(`#${d.value}`, e), S.value?.classList.remove("uikit-hidden");
     }), Y(
       () => s.images,
       () => {
-        L(() => {
+        M(() => {
           r.swiper?.update();
         });
       }
     ), (e, i) => (u(), l("div", {
-      id: `root-${p.value}`,
+      id: `root-${d.value}`,
       ref_key: "root",
-      ref: z,
-      class: d(["swiper-carousel-root", e.$attrs["root-classes"]])
+      ref: L,
+      class: p(["swiper-carousel-root", e.$attrs["root-classes"]])
     }, [
       v("div", {
-        id: p.value,
+        id: d.value,
         "data-cy": e.$attrs["data-cy"],
-        class: d(["swiper", e.$attrs["swiper-classes"]])
+        class: p(["swiper", e.$attrs["swiper-classes"]])
       }, [
         v("div", {
           ref_key: "swiperWrapper",
-          ref: O,
-          class: d(["swiper-wrapper", [
+          ref: S,
+          class: p(["swiper-wrapper", [
             e.$attrs["swiper-wrapper-classes"],
             q.value === "none" && "no-transition"
           ]]),
-          onClick: i[0] || (i[0] = (t) => y("click"))
+          onClick: i[0] || (i[0] = (t) => $("click"))
         }, [
-          M(e.$slots, "default", {}, () => [
-            (u(!0), l(k, null, E(e.images, (t, a) => (u(), l("div", {
-              key: `swiper_${p.value}_${a}`,
-              class: d(["swiper-slide", e.$attrs["swiper-slide-classes"]])
+          E(e.$slots, "default", {}, () => [
+            (u(!0), l(P, null, F(e.images, (t, a) => (u(), l("div", {
+              key: `swiper_${d.value}_${a}`,
+              class: p(["swiper-slide", e.$attrs["swiper-slide-classes"]])
             }, [
               v("div", {
-                class: d(["swiper-zoom-container", e.$attrs["swiper-zoom-container-classes"]])
+                class: p(["swiper-zoom-container", e.$attrs["swiper-zoom-container-classes"]])
               }, [
-                e.backgroundImage ? b("", !0) : (u(), l("img", F({
+                e.backgroundImage ? y("", !0) : (u(), l("img", T({
                   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-${a}`
-                }, I(t, a), {
+                  "data-idx": `${d.value}-slide-img-${a}`
+                }, z(t, a), {
                   alt: t.alt,
                   itemprop: "image",
                   width: t.width,
@@ -187,53 +193,52 @@ const ee = ["id"], te = ["id", "data-cy"], se = ["data-idx", "alt", "width", "he
                 }), null, 16, se))
               ], 2)
             ], 2))), 128)),
-            M(e.$slots, "last_slide", {}, void 0, !0)
+            E(e.$slots, "last_slide", {}, void 0, !0)
           ], !0)
         ], 2),
-        C.value ? (u(), l("div", {
+        I.value ? (u(), l("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] = P(() => {
+          class: p([e.$attrs["swiper-pagination-classes"], "swiper-pagination [&.swiper-pagination-fraction]:uikit-flex [&.swiper-pagination-fraction]:uikit-justify-center"]),
+          onClick: i[1] || (i[1] = O(() => {
           }, ["stop"]))
-        }, null, 2)) : b("", !0),
-        S.value ? (u(), l(k, { key: 1 }, [
+        }, null, 2)) : y("", !0),
+        C.value ? (u(), l(P, { key: 1 }, [
           v("div", {
             class: "swiper-button-prev",
             "data-cy": "swiper-button-prev",
-            onClick: i[2] || (i[2] = P(() => {
+            onClick: i[2] || (i[2] = O(() => {
             }, ["stop"]))
           }),
           v("div", {
             class: "swiper-button-next",
             "data-cy": "swiper-button-next",
-            onClick: i[3] || (i[3] = P(() => {
+            onClick: i[3] || (i[3] = O(() => {
             }, ["stop"]))
           })
-        ], 64)) : b("", !0)
+        ], 64)) : y("", !0)
       ], 10, te),
       e.thumbSwiperOptions ? (u(), l("div", {
         key: 0,
-        id: `thumb_${p.value}`,
+        id: `thumb_${d.value}`,
         thumbsSlider: "",
-        class: d(["swiper", e.$attrs["thumb-swiper-classes"]])
+        class: p(["swiper", e.$attrs["thumb-swiper-classes"]])
       }, [
         v("div", {
-          class: d(["swiper-wrapper", e.$attrs["thumb-swiper-wrapper-classes"]])
+          class: p(["swiper-wrapper", e.$attrs["thumb-swiper-wrapper-classes"]])
         }, [
-          (u(!0), l(k, null, E(e.images, (t, a) => (u(), l("div", {
-            key: `thumb_${p.value}_${a}`,
-            class: d(["swiper-slide", e.$attrs["thumb-img-wrapper-classes"]])
+          (u(!0), l(P, null, F(e.images, (t, a) => (u(), l("div", {
+            key: `thumb_${d.value}_${a}`,
+            class: p(["swiper-slide", e.$attrs["thumb-img-wrapper-classes"]])
           }, [
-            v("img", F({
+            v("img", T({
               class: e.$attrs["thumb-img-classes"],
               ref_for: !0
-            }, I(t), {
-              loading: a >= A.value ? "lazy" : void 0,
+            }, z(t, -1, !1), {
               alt: t.alt
             }), null, 16, ae)
           ], 2))), 128))
         ], 2)
-      ], 10, ie)) : b("", !0)
+      ], 10, ie)) : y("", !0)
     ], 10, ee));
   }
 });

package/package.json

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