@wikicasa-dev/components 2.4.1-alpha.18 → 2.4.1-alpha.3

package/dist/UIKit/BaseModal.d.ts

@@ -12,6 +12,7 @@ type __VLS_Props = {
         classes?: ClassTypeProp;
     }>;
     withCloseIcon?: boolean;
+    showModal?: boolean;
     headerTitle?: string;
     autoClose?: number;
     fullHeight?: boolean;
@@ -23,10 +24,8 @@ type __VLS_Props = {
     dataCy?: string;
     closeIconBtnClasses?: ClassTypeProp;
     titleClasses?: ClassTypeProp;
+    appear?: boolean;
 };
-type __VLS_PublicProps = {
-    "showModal"?: boolean;
-} & __VLS_Props;
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
@@ -48,16 +47,14 @@ declare function __VLS_template(): {
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     opened: () => any;
     closed: () => any;
     dialogClick: (args_0: MouseEvent) => any;
-    "update:showModal": (value: boolean) => any;
-}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onOpened?: (() => any) | undefined;
     onClosed?: (() => any) | undefined;
     onDialogClick?: ((args_0: MouseEvent) => any) | undefined;
-    "onUpdate:showModal"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     backdrop: HTMLDivElement;
     modalDialog: HTMLDialogElement;

package/dist/assets/SwiperCarousel2.css

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

package/dist/chart/composables/useChartjsModules.d.ts

@@ -0,0 +1,10 @@
+import { ChartOptions, ChartType } from 'chart.js';
+export declare const useChartJsModules: <T extends ChartType = ChartType>(options: ChartOptions<T>) => {
+    registerTitle: () => Promise<void>;
+    registerLegend: () => Promise<void>;
+    registerTooltip: () => Promise<void>;
+    registerTimeCartesianAxis: () => Promise<void>;
+    executeRegistration: (...args: (() => Promise<unknown>)[]) => Promise<void>;
+    registerPlugins: () => Promise<void>;
+    resolved: import('vue').Ref<boolean, boolean>;
+};

package/dist/chart/composables/useChartjsModules.js

@@ -0,0 +1,37 @@
+import { computed as t, ref as f } from "vue";
+import { Chart as r, TimeScale as d, Tooltip as T, Legend as h, Title as w } from "chart.js";
+import "chartjs-adapter-date-fns";
+const L = (e) => {
+  if (!e) throw Error("Options must be defined");
+  const l = t(
+    () => !!e.plugins?.tooltip
+  ), o = t(
+    () => e.scales?.x?.type === "time"
+  ), c = t(() => !!e.plugins?.title), u = t(
+    () => !!e.plugins?.legend
+  ), i = async () => {
+    l.value && r.register(T);
+  }, g = async () => {
+    o.value && r.register(d);
+  }, s = async () => {
+    c.value && r.register(w);
+  }, n = async () => {
+    u.value && r.register(h);
+  }, a = f(!1);
+  return {
+    registerTitle: s,
+    registerLegend: n,
+    registerTooltip: i,
+    registerTimeCartesianAxis: g,
+    executeRegistration: async (...m) => {
+      await Promise.all(m.map((p) => p())), a.value = !0;
+    },
+    registerPlugins: async () => {
+      await Promise.all([i(), s(), n()]);
+    },
+    resolved: a
+  };
+};
+export {
+  L as useChartJsModules
+};

package/dist/components/IntersectionObserver/IntersectionObserver.d.ts

@@ -42,9 +42,9 @@ declare const __VLS_component: import('vue').DefineComponent<IntersectionObserve
 }, string, import('vue').PublicProps, Readonly<IntersectionObserverProps> & Readonly<{
     onIntersection?: (() => any) | undefined;
 }>, {
+    threshold: number;
     observeOnce: boolean;
     skip: boolean;
-    threshold: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     root: HTMLDivElement;
 }, any>;

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

@@ -1,5 +1,6 @@
 import { Image } from '@wikicasa-dev/types';
-import { Swiper, SwiperOptions } from 'swiper/types';
+import { Swiper } from 'swiper';
+import { SwiperOptions } from 'swiper/types';
 type SwiperCarouselProps = {
     id?: string;
     swiperOptions: SwiperOptions;
@@ -20,8 +21,8 @@ declare function __VLS_template(): {
         last_slide?(_: {}): any;
     };
     refs: {
-        rootRef: HTMLDivElement;
-        swiperWrapperRef: HTMLDivElement;
+        root: HTMLDivElement;
+        swiperWrapper: HTMLDivElement;
     };
     rootEl: any;
 };
@@ -2364,8 +2365,8 @@ declare const __VLS_component: import('vue').DefineComponent<SwiperCarouselProps
     onFirstSlideLoaded?: (() => any) | undefined;
     onInit?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
-    rootRef: HTMLDivElement;
-    swiperWrapperRef: HTMLDivElement;
+    root: HTMLDivElement;
+    swiperWrapper: HTMLDivElement;
 }, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

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 e = /* @__PURE__ */ r(o, [["__scopeId", "data-v-705dfad0"]]);
+const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-1ea2f6ce"]]);
 export {
-  e as default
+  m as default
 };

package/dist/packages/components/lib/UIKit/BaseModal.vue.js

@@ -1,8 +1,8 @@
-import { defineComponent as A, mergeModels as h, useModel as F, useTemplateRef as y, shallowRef as C, onUnmounted as K, createBlock as N, openBlock as k, Teleport as S, createVNode as w, Transition as V, unref as p, withCtx as P, withDirectives as R, createElementVNode as l, normalizeClass as i, createElementBlock as x, createCommentVNode as g, renderSlot as d, withModifiers as U, vShow as j } from "vue";
-import { CloseIcon as q } from "@wikicasa-dev/svg-icons";
-const G = ["id", "data-cy"], J = ["innerHTML"], X = /* @__PURE__ */ A({
+import { defineComponent as T, shallowRef as v, useTemplateRef as h, onUnmounted as D, watch as $, createBlock as H, openBlock as c, Teleport as O, createVNode as y, Transition as F, withCtx as K, withDirectives as N, createElementVNode as l, normalizeClass as i, createElementBlock as C, createCommentVNode as w, renderSlot as d, withModifiers as S, unref as U, vShow as V } from "vue";
+import { CloseIcon as A } from "@wikicasa-dev/svg-icons";
+const P = ["id", "data-cy"], R = ["innerHTML"], q = /* @__PURE__ */ T({
   __name: "BaseModal",
-  props: /* @__PURE__ */ h({
+  props: {
     id: { default: "base-bt-modal" },
     size: { default: "modal-md" },
     customBackdropClasses: {},
@@ -12,6 +12,7 @@ const G = ["id", "data-cy"], J = ["innerHTML"], X = /* @__PURE__ */ A({
     customModalFooterClasses: {},
     closeIcon: {},
     withCloseIcon: { type: Boolean, default: !0 },
+    showModal: { type: Boolean, default: !0 },
     headerTitle: { default: "" },
     autoClose: {},
     fullHeight: { type: Boolean, default: !1 },
@@ -19,74 +20,75 @@ const G = ["id", "data-cy"], J = ["innerHTML"], X = /* @__PURE__ */ A({
     centered: { type: Boolean, default: !1 },
     dataCy: {},
     closeIconBtnClasses: {},
-    titleClasses: {}
-  }, {
-    showModal: { type: Boolean, default: !0 },
-    showModalModifiers: {}
-  }),
-  emits: /* @__PURE__ */ h(["closed", "opened", "dialogClick"], ["update:showModal"]),
-  setup(e, { emit: M }) {
-    const r = M, o = F(e, "showModal"), B = o.value, m = y("backdrop"), a = y("modalDialog"), u = C(!1), c = C(!1), f = ({ key: t }) => {
-      t === "Escape" && s();
-    }, E = () => {
-      document?.body.addEventListener("keydown", f);
-    }, b = () => {
-      document?.body.removeEventListener("keydown", f);
-    }, I = () => {
-      c.value || (E(), document?.body.classList.add(
+    titleClasses: {},
+    appear: { type: Boolean, default: !0 }
+  },
+  emits: ["closed", "opened", "dialogClick"],
+  setup(e, { emit: x }) {
+    const r = x, o = v(!1), k = h("backdrop"), s = h("modalDialog"), u = v(!1), m = ({ key: t }) => {
+      t === "Escape" && a();
+    }, p = () => {
+      document?.body.addEventListener("keydown", m);
+    }, f = () => {
+      document?.body.removeEventListener("keydown", m);
+    }, g = () => {
+      console.log("DEBUG:onBeforeEnter called"), p(), document?.body.classList.add(
         "sm:uikit-pr-15px",
         "sm:uikit-mr-0",
         "uikit-overflow-hidden"
-      ), c.value = !0);
-    }, L = () => {
+      );
+    }, B = () => {
       r("opened"), e.autoClose !== void 0 && setTimeout(() => {
-        s();
+        a();
       }, e.autoClose);
-    }, z = () => {
-      document?.body.classList.remove(
+    }, M = () => {
+      f(), document?.body.classList.remove(
         "sm:uikit-pr-15px",
         "sm:uikit-mr-0",
         "uikit-overflow-hidden"
-      );
-    }, T = () => {
-      b(), c.value = !1, r("closed");
-    }, s = () => {
+      ), r("closed");
+    }, a = () => {
       o.value = !1;
-    }, $ = (t) => {
-      a.value && a.value.contains(t.target) && (u.value = !0);
-    }, D = (t) => {
-      a.value && a.value.contains(t.target) && (u.value = !1);
-    }, H = async (t) => {
-      if (!(t.target !== m.value && m.value?.contains(t.target)) && e.closeOnClickOut) {
+    }, E = (t) => {
+      s.value && s.value.contains(t.target) && (u.value = !0);
+    }, I = (t) => {
+      s.value && s.value.contains(t.target) && (u.value = !1);
+    }, L = async (t) => {
+      if (!(t.target !== k.value && k.value?.contains(t.target)) && e.closeOnClickOut) {
         if (u.value) {
           u.value = !1;
           return;
         }
-        s();
+        a();
       }
     };
-    K(() => {
-      b(), document?.body.classList.remove(
+    D(() => {
+      f(), document?.body.classList.remove(
         "sm:uikit-pr-15px",
         "sm:uikit-mr-0",
         "uikit-overflow-hidden"
       );
-    });
-    const O = (t) => {
-      a.value === t.target && t.stopPropagation();
+    }), $(
+      () => e.showModal,
+      async (t) => {
+        o.value = t;
+      },
+      { immediate: !0 }
+    );
+    const z = (t) => {
+      s.value === t.target && t.stopPropagation();
     };
-    return (t, n) => (k(), N(S, { to: "body" }, [
-      w(V, {
-        appear: p(B),
+    return (t, n) => (c(), H(O, { to: "body" }, [
+      y(F, {
+        appear: e.appear,
         name: "modal-transition",
         duration: { enter: 500, leave: 250 },
-        onBeforeEnter: I,
-        onAfterEnter: L,
-        onLeave: z,
-        onAfterLeave: T
+        onBeforeEnter: g,
+        onAfterEnter: B,
+        onAfterLeave: M
       }, {
-        default: P(() => [
-          R(l("div", {
+        default: K(() => [
+          N(l("div", {
             ref: "backdrop",
             class: i(["bbt-backdrop uikit-fixed uikit-left-0 uikit-top-0 uikit-z-50 uikit-h-full uikit-w-full", [
               e.customBackdropClasses,
@@ -96,9 +98,9 @@ const G = ["id", "data-cy"], J = ["innerHTML"], X = /* @__PURE__ */ A({
               { "uikit-bg-transparent": !o.value },
               { "sm:uikit-pt-[30px]": !e.centered }
             ]]),
-            onClick: H,
-            onMousedown: $,
-            onMouseup: D
+            onClick: L,
+            onMousedown: E,
+            onMouseup: I
           }, [
             l("dialog", {
               id: e.id,
@@ -114,49 +116,49 @@ const G = ["id", "data-cy"], J = ["innerHTML"], X = /* @__PURE__ */ A({
                 e.fullHeight ? "uikit-h-[95%]" : "uikit-h-auto"
               ]]),
               tabindex: "-1",
-              onClick: n[1] || (n[1] = (v) => r("dialogClick", v)),
-              onFocusin: O
+              onClick: n[1] || (n[1] = (b) => r("dialogClick", b)),
+              onFocusin: z
             }, [
               l("div", {
                 class: i(["default-header uikit-sticky uikit-top-0 uikit-z-10 uikit-rounded-t uikit-border-0 uikit-bg-white uikit-px-4 uikit-pb-10px uikit-pt-20px sm:uikit-px-6", [e.customModalHeaderClasses]])
               }, [
-                e.withCloseIcon ? (k(), x("button", {
+                e.withCloseIcon ? (c(), C("button", {
                   key: 0,
                   id: "close-icon-btn",
                   "data-cy": "bbt-default-close-icon-btn",
                   class: i(["uikit-absolute uikit-right-15px uikit-top-15px uikit-z-10 uikit-bg-transparent uikit-p-5px", e.closeIconBtnClasses]),
                   type: "button",
                   "aria-label": "Close",
-                  onClick: n[0] || (n[0] = U((v) => o.value = !1, ["prevent", "stop"]))
+                  onClick: n[0] || (n[0] = S((b) => o.value = !1, ["prevent", "stop"]))
                 }, [
-                  w(p(q), {
+                  y(U(A), {
                     class: i(["bbt-close-icon uikit-box-border", e.closeIcon?.classes]),
                     width: e.closeIcon?.size || 20,
                     height: e.closeIcon?.size || 20
                   }, null, 8, ["class", "width", "height"])
-                ], 2)) : g("", !0),
-                d(t.$slots, "header", { closeModal: s }, () => [
+                ], 2)) : w("", !0),
+                d(t.$slots, "header", { closeModal: a }, () => [
                   l("span", {
                     class: i(["uikit-w-auto uikit-text-18 uikit-font-semibold sm:uikit-text-22", e.titleClasses]),
                     innerHTML: e.headerTitle
-                  }, null, 10, J)
+                  }, null, 10, R)
                 ])
               ], 2),
               l("div", {
                 class: i(["uikit-bbt-body uikit-flex-auto uikit-overflow-y-auto uikit-overflow-x-hidden uikit-px-4 uikit-pb-0 uikit-no-scrollbar sm:uikit-px-6 sm:uikit-pb-25px", [e.customModalBodyClasses]])
               }, [
-                d(t.$slots, "body", { closeModal: s })
+                d(t.$slots, "body", { closeModal: a })
               ], 2),
-              t.$slots.footer ? (k(), x("div", {
+              t.$slots.footer ? (c(), C("div", {
                 key: 0,
                 class: i(["uikit-bbt-footer uikit-sticky uikit-bottom-0 uikit-border-0 uikit-bg-white uikit-px-4 uikit-py-15px sm:uikit-px-6", e.customModalFooterClasses])
               }, [
-                d(t.$slots, "footer", { closeModal: s })
-              ], 2)) : g("", !0),
+                d(t.$slots, "footer", { closeModal: a })
+              ], 2)) : w("", !0),
               d(t.$slots, "fixed-bottom")
-            ], 42, G)
+            ], 42, P)
           ], 34), [
-            [j, o.value]
+            [V, o.value]
           ])
         ]),
         _: 3
@@ -165,5 +167,5 @@ const G = ["id", "data-cy"], J = ["innerHTML"], X = /* @__PURE__ */ A({
   }
 });
 export {
-  X as default
+  q as default
 };

package/dist/packages/components/lib/chart/DoughnutChart.vue.js

@@ -1,26 +1,27 @@
-import { defineComponent as o, defineAsyncComponent as e, hydrateOnIdle as a, createBlock as i, openBlock as l, unref as r } from "vue";
-import { createDoughnutChart as u } from "../../../../VueChartJs/Doughnut/factory.js";
-const h = /* @__PURE__ */ o({
+import { defineComponent as s, onBeforeMount as u, createBlock as i, createCommentVNode as c, unref as o, openBlock as m } from "vue";
+import { Doughnut as p } from "vue-chartjs";
+import { Chart as l, DoughnutController as d, ArcElement as f } from "chart.js";
+import { useChartJsModules as g } from "../../../../chart/composables/useChartjsModules.js";
+const y = /* @__PURE__ */ s({
   __name: "DoughnutChart",
   props: {
     options: {},
     data: {}
   },
   setup(t) {
-    const n = e({
-      loader: () => u({
-        tooltip: !!t.options.plugins?.tooltip,
-        legend: !!t.options.plugins?.legend,
-        title: !!t.options.plugins?.title
-      }),
-      hydrate: a()
-    });
-    return (s, d) => (l(), i(r(n), {
+    l.register(d, f);
+    const e = t, { registerPlugins: r, resolved: n, executeRegistration: a } = g(
+      e.options
+    );
+    return u(async () => {
+      await a(r);
+    }), (h, C) => o(n) ? (m(), i(o(p), {
+      key: 0,
       options: t.options,
       data: t.data
-    }, null, 8, ["options", "data"]));
+    }, null, 8, ["options", "data"])) : c("", !0);
   }
 });
 export {
-  h as default
+  y as default
 };

package/dist/packages/components/lib/chart/LineChart.vue.js

@@ -1,30 +1,42 @@
-import { defineComponent as i, defineAsyncComponent as c, hydrateOnIdle as s, useTemplateRef as l, computed as r, createBlock as p, openBlock as d, unref as m } from "vue";
-import { createLineChart as u } from "../../../../VueChartJs/Line/factory.js";
-const y = /* @__PURE__ */ i({
+import { defineComponent as m, onBeforeMount as p, useTemplateRef as u, computed as f, createBlock as d, createCommentVNode as h, unref as t, openBlock as C } from "vue";
+import { Line as g } from "vue-chartjs";
+import { Chart as x, LineController as L, LineElement as k, Filler as B, PointElement as E, CategoryScale as v, LinearScale as y } from "chart.js";
+import { useChartJsModules as M } from "../../../../chart/composables/useChartjsModules.js";
+const F = /* @__PURE__ */ m({
   __name: "LineChart",
   props: {
     options: {},
     data: {}
   },
-  setup(t, { expose: e }) {
-    const n = c({
-      loader: () => u({
-        timeAxis: t.options.scales?.x?.type === "time",
-        tooltip: !!t.options.plugins?.tooltip,
-        legend: !!t.options.plugins?.legend,
-        title: !!t.options.plugins?.title
-      }),
-      hydrate: s()
-    }), o = l("chart"), a = r(
-      () => o.value?.chart
+  setup(e, { expose: o }) {
+    x.register(
+      L,
+      k,
+      B,
+      E,
+      v,
+      y
     );
-    return e({ chartInstance: a }), (h, f) => (d(), p(m(n), {
+    const r = e, {
+      registerPlugins: n,
+      registerTimeCartesianAxis: a,
+      executeRegistration: i,
+      resolved: s
+    } = M(r.options);
+    p(() => {
+      i(n, a);
+    });
+    const c = u("chart"), l = f(
+      () => c.value?.chart
+    );
+    return o({ chartInstance: l }), (P, R) => t(s) ? (C(), d(t(g), {
+      key: 0,
       ref: "chart",
-      options: t.options,
-      data: t.data
-    }, null, 8, ["options", "data"]));
+      options: e.options,
+      data: e.data
+    }, null, 8, ["options", "data"])) : h("", !0);
   }
 });
 export {
-  y as default
+  F as default
 };

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

@@ -1,6 +1,10 @@
-import { defineComponent as Q, reactive as U, useTemplateRef as z, shallowRef as X, useId as Y, computed as v, onMounted as x, watch as _, nextTick as L, createElementBlock as u, openBlock as p, normalizeClass as d, createElementVNode as g, createCommentVNode as P, renderSlot as V, Fragment as k, renderList as M, mergeProps as T, withModifiers as O } from "vue";
+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";
+import '../../../../../assets/swiper-zoom.css';import '../../../../../assets/swiper-swiper.css';/* 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"], ue = /* @__PURE__ */ Q({
+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: {
@@ -14,232 +18,229 @@ const te = ["id"], se = ["id", "data-cy"], ie = ["data-idx", "alt", "width", "he
     shiftFirstImage: { type: Boolean, default: !1 }
   },
   emits: ["moved", "click", "firstSlideLoaded", "init"],
-  setup(t, { expose: R, emit: E }) {
-    const $ = E, a = U({
-      swiperParams: { modules: [] },
+  setup(s, { expose: B, emit: D }) {
+    const y = D, a = U({
+      swiperParams: { modules: [_] },
       swiper: null,
       initCarousel: !1
-    }), F = z("rootRef"), B = z("swiperWrapperRef"), D = X(!1), j = Y(), w = v(() => t.id ?? j), A = v(() => a.swiper), h = v(() => t.swiperOptions?.slidesPerView || 1), N = v(() => !!t.swiperOptions?.keyboard), S = v(() => !!t.swiperOptions.navigation), C = v(() => !!t.swiperOptions.pagination), W = v(() => !!t.swiperOptions.autoplay), q = v(
-      () => t.swiperOptions?.effect || "slider"
-    ), K = () => {
-      t.swiperOptions && ee(t.swiperOptions, a.swiperParams);
-    }, I = (e, s = -1, i = !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 o = "", r = "", n = "";
-      if (t.artDirection) {
-        for (const l in t.artDirection) {
-          const { mq: c, width: m } = t.artDirection[l];
-          m && (n += n ? `,${c} ${parseInt(m)}px` : `${c} ${parseInt(m)}px`);
+      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`);
         }
-        r = e.images.reduce((l, c, m) => {
-          const f = Object.values(t.artDirection)[m];
-          return !f || !f.width || (l += l ? `, ${c.storagePath} ${f.width}` : `${c.storagePath} ${f.width}`), l;
-        }, ""), o = e.images[0].storagePath;
+        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 l = e.images;
-        e.images.length > 3 ? l = e.images.slice(2, 5) : t.shiftFirstImage && (l[0] = l[1]), r = l.reduce((c, m, f) => (f === 0 && (o = `${m.storagePath}`), f > 0 && (c += ", "), `${c}${m.storagePath} ${f + 1}x`), "");
+        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 y = o, J = r;
-      return typeof h.value == "number" && s > h.value ? (o = "", r = "", { sizes: n, "data-src": y, "data-srcset": J }) : i ? {
-        src: o,
-        srcset: r,
-        sizes: n,
+      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: o,
-        srcset: r,
-        sizes: n,
-        loading: t.lazyLoadImages || s >= h.value ? "lazy" : void 0,
-        fetchpriority: !t.lazyLoadImages && s === 0 ? "high" : "low"
+        src: r,
+        srcset: o,
+        sizes: b,
+        loading: s.lazyLoadImages || i >= g.value ? "lazy" : void 0,
+        fetchpriority: !s.lazyLoadImages && i === 0 ? "high" : "low"
       };
-    }, b = [], Z = (e) => {
-      if (typeof h.value == "string") return;
-      const s = b[e];
-      if (s && !s.src && (s.src = s.dataset.src || "", s.srcset = s.dataset.srcset || ""), e < h.value || e + 1 >= (t.images ?? []).length)
+    }, 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 i = b[e + 1];
-      i && !i.src && (i.src = i?.dataset.src || "", i.srcset = i?.dataset.srcset || "");
-    }, G = (e) => {
-      e === 0 && b && b[e] && L(() => {
-        F.value?.setAttribute("data-first-slide-loaded", "true"), $("firstSlideLoaded");
+      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");
       });
-    }, H = async () => {
-      K();
-      const [{ Swiper: e }, { Zoom: s }] = await Promise.all([
-        import("../../../../../Swiper/index.js"),
-        import("../../../../../Swiper/zoom.js")
-      ]);
-      if (a.swiperParams.modules?.push(s), N.value) {
-        const { Keyboard: r } = await import("../../../../../Swiper/keyboard.js");
-        a.swiperParams.modules?.push(r), a.swiperParams.keyboard = t.swiperOptions.keyboard;
+    };
+    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 (C.value) {
-        const { Pagination: r } = await import("../../../../../Swiper/pagination.js");
-        a.swiperParams.modules?.push(r), a.swiperParams.pagination = {
+      if (I.value) {
+        const { Pagination: t } = await import("../../../../../Swiper/pagination.js");
+        a.swiperParams.modules?.push(t), a.swiperParams.pagination = {
           el: ".swiper-pagination",
-          renderFraction: (n, y) => `<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="${n}"></span>
+          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="${y}"></span>
+                    <span data-cy="swiper-pagination-total" class="${o}"></span>
                  </div>`,
           ...typeof a.swiperParams.pagination == "boolean" ? {} : a.swiperParams.pagination
         };
       }
-      if (S.value) {
-        const { Navigation: r } = await import("../../../../../Swiper/navigation.js");
-        a.swiperParams.modules?.push(r);
-        const n = {
-          ...t.swiperOptions.navigation.nextEl ?? {
+      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"
           },
-          ...t.swiperOptions.navigation.prevEl ?? {
+          ...s.swiperOptions.navigation.prevEl ?? {
             prevEl: ".swiper-button-prev"
           }
         };
         a.swiperParams.navigation = {
-          ...typeof t.swiperOptions.navigation == "object" ? t.swiperOptions.navigation : {},
-          ...n
+          ...typeof s.swiperOptions.navigation == "object" ? s.swiperOptions.navigation : {},
+          ...r
         };
       }
-      if (W.value) {
-        const { Autoplay: r } = await import("../../../../../Swiper/autoplay.js");
-        a.swiperParams.modules?.push(r), a.swiperParams.autoplay = t.swiperOptions.autoplay;
+      if (q.value) {
+        const { Autoplay: t } = await import("../../../../../Swiper/autoplay.js");
+        a.swiperParams.modules?.push(t), a.swiperParams.autoplay = s.swiperOptions.autoplay;
       }
-      const i = {
+      const e = {
         ...a.swiperParams,
         on: {
           init: () => {
-            D.value = !0, $("init");
+            j.value = !0, y("init");
           },
-          slideChange: (r) => {
-            Z(r.activeIndex), $("moved", { activeIndex: r.activeIndex });
+          slideChange: (t) => {
+            Z(t.activeIndex), y("moved", { activeIndex: t.activeIndex });
           }
         }
       };
-      let o = null;
-      if (t.thumbSwiperOptions) {
-        const [r, n, y] = await Promise.all([
+      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(r.Thumbs), a.swiperParams.modules?.push(y.Controller), o = new e(`#thumb_${w.value}`, {
-          ...t.thumbSwiperOptions,
-          modules: [n.FreeMode]
-        }), i.thumbs = {
-          swiper: o
+        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
         };
       }
-      i.lazyPreloadPrevNext = 1, a.swiper = new e(`#${w.value}`, i), B.value?.classList.remove("uikit-hidden");
-    };
-    return x(() => setTimeout(H)), _(
-      () => t.images,
+      e.lazyPreloadPrevNext = 1, a.swiper = new T(`#${p.value}`, e), S.value?.classList.remove("uikit-hidden");
+    }), x(
+      () => s.images,
       () => {
-        L(() => {
+        V(() => {
           a.swiper?.update();
         });
       }
-    ), R({
-      swiper: A,
-      moveTo(e, s = 0, i = !0) {
-        a.swiper?.slideTo(e, s, i);
+    ), 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, s) => (p(), u("div", {
-      id: `root-${w.value}`,
-      ref: "rootRef",
+    }), (e, i) => (u(), l("div", {
+      id: `root-${p.value}`,
+      ref_key: "root",
+      ref: L,
       class: d(["swiper-carousel-root", e.$attrs["root-classes"]])
     }, [
-      g("div", {
-        id: w.value,
+      v("div", {
+        id: p.value,
         "data-cy": e.$attrs["data-cy"],
         class: d(["swiper", e.$attrs["swiper-classes"]])
       }, [
-        g("div", {
-          ref: "swiperWrapperRef",
+        v("div", {
+          ref_key: "swiperWrapper",
+          ref: S,
           class: d(["swiper-wrapper", [
             e.$attrs["swiper-wrapper-classes"],
-            q.value === "none" && "no-transition"
+            K.value === "none" && "no-transition"
           ]]),
-          onClick: s[0] || (s[0] = (i) => $("click"))
+          onClick: i[0] || (i[0] = (t) => y("click"))
         }, [
-          V(e.$slots, "default", {}, () => [
-            (p(!0), u(k, null, M(t.images, (i, o) => (p(), u("div", {
-              key: `swiper_${w.value}_${o}`,
+          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"]])
             }, [
-              g("div", {
+              v("div", {
                 class: d(["swiper-zoom-container", e.$attrs["swiper-zoom-container-classes"]])
               }, [
-                t.backgroundImage ? P("", !0) : (p(), u("img", T({
+                s.backgroundImage ? $("", !0) : (u(), l("img", F({
                   key: 0,
                   ref_for: !0,
-                  ref: (r) => {
-                    b.push(r);
+                  ref: (o) => {
+                    h.push(o);
                   },
-                  class: ["disable-select", [e.$attrs["slide-img-classes"] || i.classes]],
-                  "data-idx": `${w.value}-slide-img-${o}`
-                }, { ref_for: !0 }, I(i, o), {
-                  alt: i.alt,
+                  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: i.width,
-                  height: i.height,
-                  onLoad: (r) => G(o)
+                  width: t.width,
+                  height: t.height,
+                  onLoad: (o) => G(r)
                 }), null, 16, ie))
               ], 2)
             ], 2))), 128)),
-            V(e.$slots, "last_slide", {}, void 0, !0)
+            M(e.$slots, "last_slide", {}, void 0, !0)
           ], !0)
         ], 2),
-        C.value ? (p(), u("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: s[1] || (s[1] = O(() => {
+          onClick: i[1] || (i[1] = O(() => {
           }, ["stop"]))
-        }, null, 2)) : P("", !0),
-        S.value ? (p(), u(k, { key: 1 }, [
-          g("div", {
+        }, null, 2)) : $("", !0),
+        C.value ? (u(), l(P, { key: 1 }, [
+          v("div", {
             class: "swiper-button-prev",
             "data-cy": "swiper-button-prev",
-            onClick: s[2] || (s[2] = O(() => {
+            onClick: i[2] || (i[2] = O(() => {
             }, ["stop"]))
           }),
-          g("div", {
+          v("div", {
             class: "swiper-button-next",
             "data-cy": "swiper-button-next",
-            onClick: s[3] || (s[3] = O(() => {
+            onClick: i[3] || (i[3] = O(() => {
             }, ["stop"]))
           })
-        ], 64)) : P("", !0)
+        ], 64)) : $("", !0)
       ], 10, se),
-      t.thumbSwiperOptions ? (p(), u("div", {
+      s.thumbSwiperOptions ? (u(), l("div", {
         key: 0,
-        id: `thumb_${w.value}`,
+        id: `thumb_${p.value}`,
         thumbsSlider: "",
         class: d(["swiper", e.$attrs["thumb-swiper-classes"]])
       }, [
-        g("div", {
+        v("div", {
           class: d(["swiper-wrapper", e.$attrs["thumb-swiper-wrapper-classes"]])
         }, [
-          (p(!0), u(k, null, M(t.images, (i, o) => (p(), u("div", {
-            key: `thumb_${w.value}_${o}`,
+          (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"]])
           }, [
-            g("img", T({
+            v("img", F({
               class: e.$attrs["thumb-img-classes"]
-            }, { ref_for: !0 }, I(i, -1, !1), {
-              alt: i.alt
+            }, { ref_for: !0 }, z(t, -1, !1), {
+              alt: t.alt
             }), null, 16, re)
           ], 2))), 128))
         ], 2)
-      ], 10, ae)) : P("", !0)
+      ], 10, ae)) : $("", !0)
     ], 10, te));
   }
 });
 export {
-  ue as default
+  ce as default
 };

package/package.json

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

package/dist/ChartJs/Chart.js

@@ -1,4 +0,0 @@
-import { Chart as t } from "chart.js";
-export {
-  t as Chart
-};

package/dist/ChartJs/DoughnutChart/core.js

@@ -1,6 +0,0 @@
-import { Chart as r, DoughnutController as t, ArcElement as o } from "chart.js";
-import { Chart as m } from "chart.js";
-r.register(t, o);
-export {
-  m as ChartJS
-};

package/dist/ChartJs/LineChart/cartesian.js

@@ -1,6 +0,0 @@
-import { Chart as r, CategoryScale as a, LinearScale as e, Filler as t } from "chart.js";
-import { Chart as C } from "chart.js";
-r.register(a, e, t);
-export {
-  C as ChartJS
-};

package/dist/ChartJs/LineChart/core.js

@@ -1,6 +0,0 @@
-import { Chart as r, LineController as e, LineElement as t, PointElement as o } from "chart.js";
-import { Chart as a } from "chart.js";
-r.register(e, t, o);
-export {
-  a as ChartJS
-};

package/dist/ChartJs/Plugins/Legend.js

@@ -1,2 +0,0 @@
-import { Chart as r, Legend as e } from "chart.js";
-r.register(e);

package/dist/ChartJs/Plugins/TimeScale.js

@@ -1,3 +0,0 @@
-import "chartjs-adapter-date-fns";
-import { Chart as r, TimeScale as e } from "chart.js";
-r.register(e);

package/dist/ChartJs/Plugins/Title.js

@@ -1,2 +0,0 @@
-import { Chart as r, Title as t } from "chart.js";
-r.register(t);

package/dist/ChartJs/Plugins/Tooltip.js

@@ -1,2 +0,0 @@
-import { Chart as r, Tooltip as o } from "chart.js";
-r.register(o);

package/dist/Swiper/index.js

@@ -1,5 +0,0 @@
-import '../assets/swiper-swiper.css';/* empty css                                                                 */
-import { Swiper as e } from "swiper";
-export {
-  e as Swiper
-};

package/dist/Swiper/zoom.js

@@ -1,5 +0,0 @@
-import { Zoom as p } from "swiper/modules";
-import '../assets/swiper-zoom.css';/* empty css                                                                       */
-export {
-  p as Zoom
-};

package/dist/VueChartJs/Doughnut/factory.js

@@ -1,12 +0,0 @@
-const e = async (i) => {
-  const t = [
-    import("../../ChartJs/DoughnutChart/core.js")
-    // always needed
-  ];
-  i.timeAxis && t.push(import("../../ChartJs/Plugins/TimeScale.js")), i.tooltip && t.push(import("../../ChartJs/Plugins/Tooltip.js")), i.legend && t.push(import("../../ChartJs/Plugins/Legend.js")), i.title && t.push(import("../../ChartJs/Plugins/Title.js")), await Promise.all(t);
-  const { Doughnut: r } = await import("./index.js");
-  return r;
-};
-export {
-  e as createDoughnutChart
-};

package/dist/VueChartJs/Doughnut/index.js

@@ -1,4 +0,0 @@
-import { Doughnut as t } from "vue-chartjs";
-export {
-  t as Doughnut
-};

package/dist/VueChartJs/Line/factory.js

@@ -1,14 +0,0 @@
-const e = async (i) => {
-  const t = [
-    import("../../ChartJs/LineChart/core.js"),
-    // always needed
-    import("../../ChartJs/LineChart/cartesian.js")
-    // always needed
-  ];
-  i.timeAxis && t.push(import("../../ChartJs/Plugins/TimeScale.js")), i.tooltip && t.push(import("../../ChartJs/Plugins/Tooltip.js")), i.legend && t.push(import("../../ChartJs/Plugins/Legend.js")), i.title && t.push(import("../../ChartJs/Plugins/Title.js")), await Promise.all(t);
-  const { Line: r } = await import("./index.js");
-  return r;
-};
-export {
-  e as createLineChart
-};

package/dist/VueChartJs/Line/index.js

@@ -1,4 +0,0 @@
-import { Line as r } from "vue-chartjs";
-export {
-  r as Line
-};