@wikicasa-dev/components 2.2.9-alpha.35 → 2.2.9-alpha.37

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

@@ -0,0 +1,246 @@
+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";
+/* 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({
+  inheritAttrs: !1,
+  __name: "SwiperCarousel",
+  props: {
+    id: {},
+    swiperOptions: {},
+    thumbSwiperOptions: {},
+    lazyLoadImages: { type: Boolean, default: !0 },
+    backgroundImage: { type: Boolean, default: !1 },
+    images: { default: () => [] },
+    artDirection: {},
+    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) => {
+      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`);
+        }
+        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;
+        }, ""), 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`), "");
+      }
+      const H = r, J = o;
+      return typeof g.value == "number" && i > g.value ? (r = "", o = "", { sizes: b, "data-src": H, "data-srcset": J }) : t ? {
+        src: r,
+        srcset: o,
+        sizes: b,
+        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"
+      };
+    }, 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)
+        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");
+      });
+    };
+    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");
+          },
+          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,
+      () => {
+        V(() => {
+          a.swiper?.update();
+        });
+      }
+    ), B({
+      swiper: N,
+      moveTo(e, i = 0, t = !0) {
+        a.swiper?.slideTo(e, i, t);
+      },
+      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,
+      class: d(["swiper-carousel-root", e.$attrs["root-classes"]])
+    }, [
+      v("div", {
+        id: p.value,
+        "data-cy": e.$attrs["data-cy"],
+        class: d(["swiper", e.$attrs["swiper-classes"]])
+      }, [
+        v("div", {
+          ref_key: "swiperWrapper",
+          ref: S,
+          class: d(["swiper-wrapper", [
+            e.$attrs["swiper-wrapper-classes"],
+            K.value === "none" && "no-transition"
+          ]]),
+          onClick: i[0] || (i[0] = (t) => y("click"))
+        }, [
+          M(e.$slots, "default", {}, () => [
+            (u(!0), l(P, null, E(s.images, (t, r) => (u(), l("div", {
+              key: `swiper_${p.value}_${r}`,
+              class: d(["swiper-slide", e.$attrs["swiper-slide-classes"]])
+            }, [
+              v("div", {
+                class: d(["swiper-zoom-container", e.$attrs["swiper-zoom-container-classes"]])
+              }, [
+                s.backgroundImage ? $("", !0) : (u(), l("img", F({
+                  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,
+                  itemprop: "image",
+                  width: t.width,
+                  height: t.height,
+                  onLoad: (o) => G(r)
+                }), null, 16, ie))
+              ], 2)
+            ], 2))), 128)),
+            M(e.$slots, "last_slide", {}, void 0, !0)
+          ], !0)
+        ], 2),
+        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] = O(() => {
+          }, ["stop"]))
+        }, null, 2)) : $("", !0),
+        C.value ? (u(), l(P, { key: 1 }, [
+          v("div", {
+            class: "swiper-button-prev",
+            "data-cy": "swiper-button-prev",
+            onClick: i[2] || (i[2] = O(() => {
+            }, ["stop"]))
+          }),
+          v("div", {
+            class: "swiper-button-next",
+            "data-cy": "swiper-button-next",
+            onClick: i[3] || (i[3] = O(() => {
+            }, ["stop"]))
+          })
+        ], 64)) : $("", !0)
+      ], 10, se),
+      s.thumbSwiperOptions ? (u(), l("div", {
+        key: 0,
+        id: `thumb_${p.value}`,
+        thumbsSlider: "",
+        class: d(["swiper", e.$attrs["thumb-swiper-classes"]])
+      }, [
+        v("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}`,
+            class: d(["swiper-slide", e.$attrs["thumb-img-wrapper-classes"]])
+          }, [
+            v("img", F({
+              class: e.$attrs["thumb-img-classes"]
+            }, { ref_for: !0 }, z(t, -1, !1), {
+              alt: t.alt
+            }), null, 16, re)
+          ], 2))), 128))
+        ], 2)
+      ], 10, ae)) : $("", !0)
+    ], 10, te));
+  }
+});
+export {
+  ce as default
+};

package/package.json

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

package/dist/chunks/BaseAlert.vue_vue_type_style_index_0_lang.BVR-COlL.js

@@ -1,19 +0,0 @@
-import { defineComponent as r, createElementBlock as s, openBlock as a, normalizeClass as l, renderSlot as o } from "vue";
-import '../assets/BaseAlert.css';const n = ["id"], c = /* @__PURE__ */ r({
-  __name: "BaseAlert",
-  props: {
-    alertClass: { default: "" }
-  },
-  setup(t) {
-    return (e, i) => (a(), s("div", {
-      id: e.$attrs.id,
-      class: l(["uikit-alert", t.alertClass]),
-      role: "alert"
-    }, [
-      o(e.$slots, "default")
-    ], 10, n));
-  }
-});
-export {
-  c as _
-};

package/dist/chunks/_plugin-vue_export-helper.CHgC5LLL.js

@@ -1,9 +0,0 @@
-const s = (t, r) => {
-  const o = t.__vccOpts || t;
-  for (const [c, e] of r)
-    o[c] = e;
-  return o;
-};
-export {
-  s as _
-};