@wikicasa-dev/components 2.5.3-alpha.11 → 2.5.3-alpha.13

package/dist/Swiper/Autoplay/index.js

@@ -1,4 +1,4 @@
-import '../../assets/swiper-controller.css';/* empty css                                                                              */
+import '../../assets/swiper-thumbs.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-controller.css';/* empty css                                                                                */
+import '../../assets/swiper-thumbs.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-controller.css';/* empty css                                                                              */
+import '../../assets/swiper-thumbs.css';/* empty css                                                                              */
 import { Keyboard as e } from "swiper/modules";
 export {
   e as default

package/dist/Swiper/Thumbs/index.js

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

package/dist/assets/SwiperCarousel.css

@@ -1 +1 @@
-.swiper-pagination-bullet{--swiper-pagination-color: #ccc}.swiper-pagination-bullet-active{--swiper-pagination-color: #fff}
+.no-transition[data-v-f8f3d52a]{transition-duration:0ms!important}.disable-select[data-v-f8f3d52a]{-webkit-user-select:none;-moz-user-select:none;user-select:none}.swiper-button-disabled[data-v-f8f3d52a]{pointer-events:auto!important}

package/dist/assets/SwiperPaginationPrimitive.css

@@ -0,0 +1 @@
+.swiper-pagination-bullet{--swiper-pagination-color: #ccc}.swiper-pagination-bullet-active{--swiper-pagination-color: #fff}

package/dist/components/carousel/Primitive/SwiperPaginationPrimitive.js

@@ -1,5 +1,5 @@
 import o from "../../../packages/components/lib/components/carousel/Primitive/SwiperPaginationPrimitive.vue.js";
-import '../../../assets/SwiperCarousel.css';/* empty css                                                                                            */
+import '../../../assets/SwiperPaginationPrimitive.css';/* empty css                                                                                            */
 export {
   o as default
 };

package/dist/components/carousel/Primitive/SwiperSlideImagePrimitive.d.ts

@@ -10,6 +10,7 @@ export interface SwiperSlideImagePrimitiveProps {
     decoding?: "auto" | "sync" | "async";
     crossorigin?: "anonymous" | "use-credentials";
     fetchpriority?: "auto" | "high" | "low";
+    loading?: "lazy" | "eager";
     lazy?: boolean;
 }
 declare const _default: import('vue').DefineComponent<SwiperSlideImagePrimitiveProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SwiperSlideImagePrimitiveProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;

package/dist/components/carousel/SwiperCarousel.js

@@ -1,5 +1,5 @@
 import o from "../../packages/components/lib/components/carousel/SwiperCarousel.vue.js";
-import '../../assets/SwiperCarousel2.css';import '../../assets/SwiperCarousel.css';/* empty css                                                                    */
+import '../../assets/SwiperCarousel.css';import '../../assets/SwiperPaginationPrimitive.css';/* empty css                                                                    */
 /* empty css                                                                    */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
 const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-f8f3d52a"]]);

package/dist/index.js

@@ -1,6 +1,6 @@
 import { default as S } from "./packages/components/lib/UIKit/Accordion/BaseAccordion.vue.js";
 import { default as g } from "./packages/components/lib/UIKit/Accordion/BaseAccordionItem.vue.js";
-import './assets/SwiperCarousel.css';import './assets/SwiperRootPrimitive.css';import './assets/BaseSnackbar.css';import './assets/BaseModal.css';import './assets/BaseDropDown.css';import './assets/BaseCard.css';import './assets/BaseBadge.css';import './assets/ClearableAutocomplete.css';import './assets/BaseAutocomplete.css';import './assets/BaseAlert.css';import './assets/AccessibleSelect.css';import './assets/RadioButtonItem.css';import './assets/BaseTabsIndicator.css';import './assets/BaseTabs.css';import './assets/CheckboxBtn.css';import './assets/BaseAccordionItem.css';/* empty css                                                               */
+import './assets/SwiperPaginationPrimitive.css';import './assets/SwiperRootPrimitive.css';import './assets/BaseSnackbar.css';import './assets/BaseModal.css';import './assets/BaseDropDown.css';import './assets/BaseCard.css';import './assets/BaseBadge.css';import './assets/ClearableAutocomplete.css';import './assets/BaseAutocomplete.css';import './assets/BaseAlert.css';import './assets/AccessibleSelect.css';import './assets/RadioButtonItem.css';import './assets/BaseTabsIndicator.css';import './assets/BaseTabs.css';import './assets/CheckboxBtn.css';import './assets/BaseAccordionItem.css';/* empty css                                                               */
 import { default as C } from "./packages/components/lib/UIKit/Accordion/AccordionItemPrimitive.vue.js";
 import { default as I } from "./packages/components/lib/UIKit/Accordion/AccordionHeaderPrimitive.vue.js";
 import { default as A } from "./packages/components/lib/UIKit/Accordion/AccordionTriggerPrimitive.vue.js";

package/dist/packages/components/lib/components/carousel/Primitive/SwiperRootPrimitive.vue.js

@@ -1,77 +1,102 @@
-import { defineComponent as I, useAttrs as O, shallowRef as m, useTemplateRef as V, onMounted as b, provide as p, createElementBlock as x, openBlock as z, Fragment as A, withDirectives as M, renderSlot as f, createCommentVNode as C, createElementVNode as E, mergeProps as B, unref as D, vShow as K, nextTick as L } from "vue";
-import { createSwiper as N } from "../../../../../../Swiper/factory.js";
-import { AutoplayModule as R } from "../../../../../../Swiper/Autoplay/factory.js";
-import { KeyboardModule as T } from "../../../../../../Swiper/Keyboard/factory.js";
+import { defineComponent as O, useAttrs as k, shallowRef as v, useTemplateRef as L, onMounted as b, provide as f, createElementBlock as M, openBlock as z, Fragment as V, withDirectives as x, renderSlot as y, createCommentVNode as A, createElementVNode as B, mergeProps as D, unref as U, vShow as N, nextTick as C } from "vue";
+import { createSwiper as G } from "../../../../../../Swiper/factory.js";
+import { AutoplayModule as K } from "../../../../../../Swiper/Autoplay/factory.js";
+import { KeyboardModule as R } from "../../../../../../Swiper/Keyboard/factory.js";
 import { ZoomModule as $ } from "../../../../../../Swiper/Zoom/factory.js";
-const q = /* @__PURE__ */ Symbol(), F = /* @__PURE__ */ Symbol(), Q = /* @__PURE__ */ I({
+const q = /* @__PURE__ */ Symbol(), F = /* @__PURE__ */ Symbol(), X = /* @__PURE__ */ O({
   inheritAttrs: !1,
   __name: "SwiperRootPrimitive",
   props: {
     swiperOptions: {}
   },
   emits: ["moved", "click", "init"],
-  setup(r, { expose: v, emit: y }) {
-    const n = y, w = O(), i = m(null), d = V("root"), s = m(!1), S = !!r.swiperOptions?.keyboard, h = !!r.swiperOptions?.autoplay, c = [];
-    let a = !1;
-    const k = (e) => {
-      e?.querySelectorAll("img[data-src]").forEach((t) => {
-        const o = t;
-        o.src = o.dataset.src || "", o.srcset = o.dataset.srcset || "";
-      });
-    }, u = (e, t) => {
-      if (!a) return;
-      const o = e.params.lazyPreloadPrevNext ?? 0;
-      for (let l = t - o; l <= t + o; l++)
-        k(e.slides[l]);
-    }, P = async (e) => {
-      i.value = await N(
+  setup(s, { expose: w, emit: T }) {
+    const n = T, g = k(), a = v(null), c = L("root"), l = v(!1), I = !!s.swiperOptions?.keyboard, P = !!s.swiperOptions?.autoplay, u = [];
+    let d = !1;
+    const h = (e) => {
+      const o = [
+        ...e?.querySelectorAll("img[data-src]") ?? []
+      ];
+      return o.forEach((t) => {
+        t.src = t.dataset.src || "", t.srcset = t.dataset.srcset || "", t.dataset.src = "", t.dataset.srcset = "", t.removeAttribute("lazy");
+      }), o;
+    }, m = (e, o) => {
+      const t = [];
+      if (!d) return t;
+      const i = e.params.lazyPreloadPrevNext ?? 0;
+      for (let r = o - i; r <= o + i; r++)
+        t.push(...h(e.slides[r]));
+      return t;
+    }, E = async (e) => {
+      a.value = await G(
         e,
         {
           on: {
-            init: (t) => {
-              L(() => {
-                s.value = !0, u(t, t.activeIndex), n("init");
+            init: (o) => {
+              C(async () => {
+                const t = m(o, o.activeIndex);
+                if (console.log("DEBUG:imagesToLoad", t), !t.length) {
+                  l.value = !0, n("init");
+                  return;
+                }
+                await Promise.race([
+                  async () => {
+                    const i = await Promise.all(
+                      t.map(
+                        (r) => r.complete ? Promise.resolve() : new Promise((p) => {
+                          r.addEventListener("load", p, { once: !0 }), r.addEventListener("error", p, { once: !0 });
+                        })
+                      )
+                    );
+                    return console.log("DEBUG:all visible lazy images loaded"), i;
+                  },
+                  new Promise(
+                    (i) => setTimeout(() => {
+                      console.log("DEBUG:not all images have loaded => TIMEOUT!"), i("");
+                    }, 3e3)
+                  )
+                ]), l.value = !0, n("init");
               });
             },
-            slideChange: (t) => {
-              n("moved", { activeIndex: t.activeIndex }), u(t, t.activeIndex);
+            slideChange: (o) => {
+              n("moved", { activeIndex: o.activeIndex }), m(o, o.activeIndex);
             }
           },
-          ...r.swiperOptions
+          ...s.swiperOptions
         },
         [
-          $(r.swiperOptions?.zoom),
-          S ? T(r.swiperOptions?.keyboard) : void 0,
-          h ? R(r.swiperOptions.autoplay) : void 0,
-          ...c
+          $(s.swiperOptions?.zoom),
+          I ? R(s.swiperOptions?.keyboard) : void 0,
+          P ? K(s.swiperOptions.autoplay) : void 0,
+          ...u
         ].filter(Boolean)
       );
     };
     b(() => {
-      d.value && setTimeout(() => P(d.value));
+      c.value && setTimeout(() => E(c.value));
     });
-    const g = (e) => {
-      !i.value || i.value.params.slidesPerView === e || (i.value.params.slidesPerView = e, i.value.update());
+    const S = (e) => {
+      !a.value || a.value.params.slidesPerView === e || (a.value.params.slidesPerView = e, a.value.update());
     };
-    return p(F, (e) => {
-      e && c.push(e);
-    }), p(q, (e) => {
-      e !== a && (a = e);
-    }), v({
-      swiper: i,
-      updateSlidesPerView: g
-    }), (e, t) => (z(), x(A, null, [
-      M(E("div", B({ ref: "root" }, D(w), { class: "swiper uikit-carousel" }), [
-        f(e.$slots, "default")
+    return f(F, (e) => {
+      e && u.push(e);
+    }), f(q, (e) => {
+      e !== d && (d = e);
+    }), w({
+      swiper: a,
+      updateSlidesPerView: S
+    }), (e, o) => (z(), M(V, null, [
+      x(B("div", D({ ref: "root" }, U(g), { class: "swiper uikit-carousel" }), [
+        y(e.$slots, "default")
       ], 16), [
-        [K, s.value]
+        [N, l.value]
       ]),
-      s.value ? C("", !0) : f(e.$slots, "placeholder", { key: 0 })
+      l.value ? A("", !0) : y(e.$slots, "placeholder", { key: 0 })
     ], 64));
   }
 });
 export {
   F as addModuleDescriptorKey,
-  Q as default,
+  X as default,
   q as setLazyImagesLoaderKey
 };

package/dist/packages/components/lib/components/carousel/Primitive/SwiperSlideImagePrimitive.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as i, createPropsRestProxy as o, shallowRef as r, inject as l, createBlock as d, openBlock as n, withCtx as m, createElementVNode as u, mergeProps as g } from "vue";
+import { defineComponent as i, createPropsRestProxy as o, shallowRef as r, inject as l, createBlock as d, openBlock as n, withCtx as m, createElementVNode as g, mergeProps as u } from "vue";
 import f from "../../../../../../components/carousel/SwiperSlide.js";
 import { setLazyImagesLoaderKey as y } from "./SwiperRootPrimitive.vue.js";
 import '../../../../../../assets/SwiperRootPrimitive.css';/* empty css                         */
@@ -15,13 +15,14 @@ const h = ["src", "srcset", "data-src", "data-srcset"], x = /* @__PURE__ */ i({
     decoding: {},
     crossorigin: {},
     fetchpriority: {},
+    loading: {},
     lazy: { type: Boolean }
   },
   setup(e) {
     const s = o(e, ["src", "srcset", "imgClasses"]), t = r(), a = r(), c = l(y, void 0);
     return s.lazy && (t.value = e.src, a.value = e.srcset, c?.(!0)), (v, z) => (n(), d(f, null, {
       default: m(() => [
-        u("img", g(s, {
+        g("img", u(s, {
           class: e.imgClasses,
           src: e.lazy ? void 0 : e.src,
           srcset: e.lazy ? void 0 : e.srcset,

package/package.json

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

package/dist/assets/SwiperCarousel2.css

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