ep-lib-ts 1.0.59 → 1.0.60

package/dist/components/interactions/EpContentSlider.vue.js

@@ -1,28 +1,45 @@
-import B from "../../_virtual/dynamic-import-helper.js";
-import { defineComponent as R, ref as E, computed as m, defineAsyncComponent as w, createElementBlock as r, openBlock as t, createElementVNode as a, createCommentVNode as l, toDisplayString as c, Fragment as A, renderList as M, normalizeClass as k, createVNode as u, unref as g, Transition as V, withCtx as h, createBlock as b, resolveDynamicComponent as C, Suspense as F, mergeProps as N, createTextVNode as $, normalizeStyle as z } from "vue";
-import { useComponent as P } from "../../composables/useComponent.js";
-import { useRenderText as O } from "../../composables/useRenderText.js";
-import { mdiArrowLeft as Q, mdiArrowRight as K } from "@mdi/js";
-import S from "../basics/EpIcon.vue.js";
-import T from "../signages/EpSkeleton.vue.js";
+import __variableDynamicImportRuntimeHelper from "../../_virtual/dynamic-import-helper.js";
+import { defineComponent, ref, computed, defineAsyncComponent, createElementBlock, openBlock, createElementVNode, createCommentVNode, toDisplayString, Fragment, renderList, normalizeClass, createVNode, unref, Transition, withCtx, createBlock, resolveDynamicComponent, Suspense, mergeProps, createTextVNode, normalizeStyle } from "vue";
+import { useComponent } from "../../composables/useComponent.js";
+import { useRenderText } from "../../composables/useRenderText.js";
+import { mdiArrowLeft, mdiArrowRight } from "@mdi/js";
+import _sfc_main$1 from "../basics/EpIcon.vue.js";
+import _sfc_main$2 from "../signages/EpSkeleton.vue.js";
 /* empty css                          */
-const W = { class: "relative h-[600px] flex flex-col p-6 bg-zinc-100 dark:bg-dark w-full overflow-hidden rounded-lg shadow-xl" }, q = { class: "flex justify-between items-center pb-3 mb-3 border-b-2 border-gray-600 dark:border-gray-300" }, G = { class: "text-2xl font-bold text-primary" }, J = {
+const _hoisted_1 = { class: "relative h-[600px] flex flex-col p-6 bg-zinc-100 dark:bg-dark w-full overflow-hidden rounded-lg shadow-xl" };
+const _hoisted_2 = { class: "flex justify-between items-center pb-3 mb-3 border-b-2 border-gray-600 dark:border-gray-300" };
+const _hoisted_3 = { class: "text-2xl font-bold text-primary" };
+const _hoisted_4 = {
   key: 0,
   class: "flex items-center space-x-3"
-}, U = { class: "flex space-x-2" }, X = ["onClick"], Y = { class: "flex space-x-2" }, Z = ["disabled"], ee = ["disabled"], te = { class: "text-sm" }, ie = { class: "flex flex-grow items-center justify-center overflow-hidden mb-4" }, oe = {
+};
+const _hoisted_5 = { class: "flex space-x-2" };
+const _hoisted_6 = ["onClick"];
+const _hoisted_7 = { class: "flex space-x-2" };
+const _hoisted_8 = ["disabled"];
+const _hoisted_9 = ["disabled"];
+const _hoisted_10 = { class: "text-sm" };
+const _hoisted_11 = { class: "flex flex-grow items-center justify-center overflow-hidden mb-4" };
+const _hoisted_12 = {
   key: 0,
   class: "flex items-center justify-center w-full h-full"
-}, se = {
+};
+const _hoisted_13 = {
   key: 1,
   class: "flex items-center justify-center w-full h-full"
-}, ae = {
+};
+const _hoisted_14 = {
   key: 2,
   class: "flex items-center justify-center p-2 md:w-1/2 w-full",
   style: { "max-height": "100%" }
-}, re = {
+};
+const _hoisted_15 = {
   key: 3,
   class: "flex-1 p-2 overflow-y-auto md:w-1/2 w-full"
-}, le = ["innerHTML"], ne = { class: "mt-2 h-2 w-full bg-gray-300 rounded-full" }, he = /* @__PURE__ */ R({
+};
+const _hoisted_16 = ["innerHTML"];
+const _hoisted_17 = { class: "mt-2 h-2 w-full bg-gray-300 rounded-full" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "EpContentSlider",
   props: {
     slides: {},
@@ -30,155 +47,190 @@ const W = { class: "relative h-[600px] flex flex-col p-6 bg-zinc-100 dark:bg-dar
     noData: { default: "No data available" },
     mediaPosition: { default: "left" }
   },
-  setup(L) {
-    const i = L, o = E(0), n = E(!1), x = E([]), s = m(() => !i.slides || i.slides.length === 0 ? {
-      title: i.noData,
-      img: "",
-      uid: 2,
-      content: "",
-      component: null
-    } : i.slides[o.value]), d = m(() => {
-      const e = s.value.content;
-      return e && e.trim().length > 0;
-    }), p = m(() => {
-      if (s.value.img)
-        return w(() => import("../basics/EpImg.vue2.js"));
-      if (s.value.component) {
-        const e = P(s.value.component?.type);
-        return w(
-          () => B(/* @__PURE__ */ Object.assign({ "../basics/EpAvatar.vue": () => import("../basics/EpAvatar.vue2.js"), "../basics/EpBadge.vue": () => import("../basics/EpBadge.vue.js"), "../basics/EpBtn.vue": () => import("../basics/EpBtn.vue2.js"), "../basics/EpCard.vue": () => import("../basics/EpCard.vue2.js"), "../basics/EpChip.vue": () => import("../basics/EpChip.vue2.js"), "../basics/EpDivider.vue": () => import("../basics/EpDivider.vue2.js"), "../basics/EpFlex.vue": () => import("../basics/EpFlex.vue2.js"), "../basics/EpHover.vue": () => import("../basics/EpHover.vue2.js"), "../basics/EpHoverCard.vue": () => import("../basics/EpHoverCard.vue2.js"), "../basics/EpIcon.vue": () => import("../basics/EpIcon.vue2.js"), "../basics/EpImg.vue": () => import("../basics/EpImg.vue2.js"), "../basics/EpImgCarousel.vue": () => import("../basics/EpImgCarousel.vue2.js"), "../basics/EpList.vue": () => import("../basics/EpList.vue.js"), "../basics/EpListItem.vue": () => import("../basics/EpListItem.vue2.js"), "../basics/EpSection.vue": () => import("../basics/EpSection.vue2.js"), "../basics/EpSectionCols.vue": () => import("../basics/EpSectionCols.vue2.js"), "../basics/EpSpinner.vue": () => import("../basics/EpSpinner.vue2.js"), "../basics/EpStackedList.vue": () => import("../basics/EpStackedList.vue2.js"), "../basics/EpTable.vue": () => import("../basics/EpTable.vue2.js"), "../basics/EpText.vue": () => import("../basics/EpText.vue2.js"), "../charts/EpBarChart.vue": () => import("../charts/EpBarChart.vue2.js"), "../charts/EpFunnelChart.vue": () => import("../charts/EpFunnelChart.vue2.js"), "../charts/EpLineChart.vue": () => import("../charts/EpLineChart.vue2.js"), "../charts/EpPieChart.vue": () => import("../charts/EpPieChart.vue2.js"), "../educationals/EpBranchingScenario.vue": () => import("../educationals/EpBranchingScenario.vue.js"), "../educationals/EpCodeblock.vue": () => import("../educationals/EpCodeblock.vue3.js"), "../educationals/EpConclusion.vue": () => import("../educationals/EpConclusion.vue2.js"), "../educationals/EpDescription.vue": () => import("../educationals/EpDescription.vue2.js"), "../educationals/EpDocument.vue": () => import("../educationals/EpDocument.vue2.js"), "../educationals/EpEdu.vue": () => import("../educationals/EpEdu.vue2.js"), "../educationals/EpInstructions.vue": () => import("../educationals/EpInstructions.vue2.js"), "../educationals/EpIntroduction.vue": () => import("../educationals/EpIntroduction.vue2.js"), "../educationals/EpObjective.vue": () => import("../educationals/EpObjective.vue2.js"), "../educationals/EpReading.vue": () => import("../educationals/EpReading.vue2.js"), "../educationals/EpResource.vue": () => import("../educationals/EpResource.vue2.js"), "../educationals/EpScope.vue": () => import("../educationals/EpScope.vue2.js"), "../educationals/EpSpecificObjective.vue": () => import("../educationals/EpSpecificObjective.vue2.js"), "../forms/EpCheckbox.vue": () => import("../forms/EpCheckbox.vue.js"), "../forms/EpInput.vue": () => import("../forms/EpInput.vue.js"), "../forms/EpRadio.vue": () => import("../forms/EpRadio.vue.js"), "../forms/EpRadioSummative.vue": () => import("../forms/EpRadioSummative.vue.js"), "../forms/EpSelect.vue": () => import("../forms/EpSelect.vue.js"), "../forms/EpSwitch.vue": () => import("../forms/EpSwitch.vue.js"), "../forms/EpTextarea.vue": () => import("../forms/EpTextarea.vue.js"), "../forms/EpToggle.vue": () => import("../forms/EpToggle.vue.js"), "./Ep360Image.vue": () => import("./Ep360Image.vue.js"), "./Ep360Video.vue": () => import("./Ep360Video.vue.js"), "./EpAccordeon.vue": () => import("./EpAccordeon.vue.js"), "./EpContentSlider.vue": () => import("./EpContentSlider.vue2.js"), "./EpDarkMode.vue": () => import("./EpDarkMode.vue2.js"), "./EpDraggable.vue": () => import("./EpDraggable.vue2.js"), "./EpHotSpot.vue": () => import("./EpHotSpot.vue2.js"), "./EpModal.vue": () => import("./EpModal.vue3.js"), "./EpQuestion.vue": () => import("./EpQuestion.vue2.js"), "./EpSummativeTable.vue": () => import("./EpSummativeTable.vue2.js"), "./EpSvgShow.vue": () => import("./EpSvgShow.vue2.js"), "./EpTabs.vue": () => import("./EpTabs.vue.js"), "./EpTooltip.vue": () => import("./EpTooltip.vue3.js"), "../medias/EpAudio.vue": () => import("../medias/EpAudio.vue2.js"), "../medias/EpCardLink.vue": () => import("../medias/EpCardLink.vue2.js"), "../medias/EpCarousel.vue": () => import("../medias/EpCarousel.vue.js"), "../medias/EpHierarchy.vue": () => import("../medias/EpHierarchy.vue.js"), "../medias/EpIframe.vue": () => import("../medias/EpIframe.vue2.js"), "../medias/EpKatex.vue": () => import("../medias/EpKatex.vue.js"), "../medias/EpLink.vue": () => import("../medias/EpLink.vue2.js"), "../medias/EpLinkVersion.vue": () => import("../medias/EpLinkVersion.vue2.js"), "../medias/EpLottieSvg.vue": () => import("../medias/EpLottieSvg.vue2.js"), "../medias/EpSensibleImage.vue": () => import("../medias/EpSensibleImage.vue.js"), "../medias/EpSoftware.vue": () => import("../medias/EpSoftware.vue2.js"), "../medias/EpSvg.vue": () => import("../medias/EpSvg.vue2.js"), "../medias/EpTerm.vue": () => import("../medias/EpTerm.vue2.js"), "../medias/EpTimeLine.vue": () => import("../medias/EpTimeLine.vue3.js"), "../medias/EpVideo.vue": () => import("../medias/EpVideo.vue2.js"), "../medias/EpVideoPanopto.vue": () => import("../medias/EpVideoPanopto.vue2.js"), "../medias/EpWordDef.vue": () => import("../medias/EpWordDef.vue2.js"), "../signages/EpAlert.vue": () => import("../signages/EpAlert.vue.js"), "../signages/EpBadge.vue": () => import("../signages/EpBadge.vue2.js"), "../signages/EpHeader.vue": () => import("../signages/EpHeader.vue2.js"), "../signages/EpNothing.vue": () => import("../signages/EpNothing.vue.js"), "../signages/EpQuote.vue": () => import("../signages/EpQuote.vue2.js"), "../signages/EpSkeleton.vue": () => import("../signages/EpSkeleton.vue3.js"), "../tools/BgAudio.vue": () => import("../tools/BgAudio.vue.js"), "../tools/Details.vue": () => import("../tools/Details.vue.js"), "../tools/DisplayBox.vue": () => import("../tools/DisplayBox.vue.js"), "../tools/SvgFilter.vue": () => import("../tools/SvgFilter.vue.js"), "../tools/TextMedia.vue": () => import("../tools/TextMedia.vue.js"), "../tools/TimelineItem.vue": () => import("../tools/TimelineItem.vue.js"), "../tools/TwoColsMedia.vue": () => import("../tools/TwoColsMedia.vue.js") }), `../${e.path}/${e.name}.vue`, 3)
+  setup(__props) {
+    const props = __props;
+    const currentIndex = ref(0);
+    const isLoading = ref(false);
+    const slideRefs = ref([]);
+    const currentSlide = computed(() => {
+      if (!props.slides || props.slides.length === 0) {
+        return {
+          title: props.noData,
+          img: "",
+          uid: 2,
+          content: "",
+          component: null
+        };
+      }
+      return props.slides[currentIndex.value];
+    });
+    const hasTextContent = computed(() => {
+      const content = currentSlide.value.content;
+      return content && content.trim().length > 0;
+    });
+    const currentSlideMediaContent = computed(() => {
+      var _a;
+      if (currentSlide.value.img) {
+        return defineAsyncComponent(() => import("../basics/EpImg.vue2.js"));
+      }
+      if (currentSlide.value.component) {
+        const componentToLoad = useComponent((_a = currentSlide.value.component) == null ? void 0 : _a.type);
+        return defineAsyncComponent(
+          () => __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "../basics/EpAvatar.vue": () => import("../basics/EpAvatar.vue2.js"), "../basics/EpBadge.vue": () => import("../basics/EpBadge.vue.js"), "../basics/EpBtn.vue": () => import("../basics/EpBtn.vue2.js"), "../basics/EpCard.vue": () => import("../basics/EpCard.vue2.js"), "../basics/EpChip.vue": () => import("../basics/EpChip.vue2.js"), "../basics/EpDivider.vue": () => import("../basics/EpDivider.vue2.js"), "../basics/EpFlex.vue": () => import("../basics/EpFlex.vue2.js"), "../basics/EpHover.vue": () => import("../basics/EpHover.vue2.js"), "../basics/EpHoverCard.vue": () => import("../basics/EpHoverCard.vue2.js"), "../basics/EpIcon.vue": () => import("../basics/EpIcon.vue2.js"), "../basics/EpImg.vue": () => import("../basics/EpImg.vue2.js"), "../basics/EpImgCarousel.vue": () => import("../basics/EpImgCarousel.vue2.js"), "../basics/EpList.vue": () => import("../basics/EpList.vue.js"), "../basics/EpListItem.vue": () => import("../basics/EpListItem.vue2.js"), "../basics/EpSection.vue": () => import("../basics/EpSection.vue2.js"), "../basics/EpSectionCols.vue": () => import("../basics/EpSectionCols.vue2.js"), "../basics/EpSpinner.vue": () => import("../basics/EpSpinner.vue2.js"), "../basics/EpStackedList.vue": () => import("../basics/EpStackedList.vue2.js"), "../basics/EpTable.vue": () => import("../basics/EpTable.vue2.js"), "../basics/EpText.vue": () => import("../basics/EpText.vue2.js"), "../charts/EpBarChart.vue": () => import("../charts/EpBarChart.vue2.js"), "../charts/EpFunnelChart.vue": () => import("../charts/EpFunnelChart.vue2.js"), "../charts/EpLineChart.vue": () => import("../charts/EpLineChart.vue2.js"), "../charts/EpPieChart.vue": () => import("../charts/EpPieChart.vue2.js"), "../educationals/EpBranchingScenario.vue": () => import("../educationals/EpBranchingScenario.vue.js"), "../educationals/EpCodeblock.vue": () => import("../educationals/EpCodeblock.vue3.js"), "../educationals/EpConclusion.vue": () => import("../educationals/EpConclusion.vue2.js"), "../educationals/EpDescription.vue": () => import("../educationals/EpDescription.vue2.js"), "../educationals/EpDocument.vue": () => import("../educationals/EpDocument.vue2.js"), "../educationals/EpEdu.vue": () => import("../educationals/EpEdu.vue2.js"), "../educationals/EpInstructions.vue": () => import("../educationals/EpInstructions.vue2.js"), "../educationals/EpIntroduction.vue": () => import("../educationals/EpIntroduction.vue2.js"), "../educationals/EpObjective.vue": () => import("../educationals/EpObjective.vue2.js"), "../educationals/EpReading.vue": () => import("../educationals/EpReading.vue2.js"), "../educationals/EpResource.vue": () => import("../educationals/EpResource.vue2.js"), "../educationals/EpScope.vue": () => import("../educationals/EpScope.vue2.js"), "../educationals/EpSpecificObjective.vue": () => import("../educationals/EpSpecificObjective.vue2.js"), "../forms/EpCheckbox.vue": () => import("../forms/EpCheckbox.vue.js"), "../forms/EpInput.vue": () => import("../forms/EpInput.vue.js"), "../forms/EpRadio.vue": () => import("../forms/EpRadio.vue.js"), "../forms/EpRadioSummative.vue": () => import("../forms/EpRadioSummative.vue.js"), "../forms/EpSelect.vue": () => import("../forms/EpSelect.vue.js"), "../forms/EpSwitch.vue": () => import("../forms/EpSwitch.vue.js"), "../forms/EpTextarea.vue": () => import("../forms/EpTextarea.vue.js"), "../forms/EpToggle.vue": () => import("../forms/EpToggle.vue.js"), "./Ep360Image.vue": () => import("./Ep360Image.vue.js"), "./Ep360Video.vue": () => import("./Ep360Video.vue.js"), "./EpAccordeon.vue": () => import("./EpAccordeon.vue.js"), "./EpContentSlider.vue": () => import("./EpContentSlider.vue2.js"), "./EpDarkMode.vue": () => import("./EpDarkMode.vue2.js"), "./EpDraggable.vue": () => import("./EpDraggable.vue2.js"), "./EpHotSpot.vue": () => import("./EpHotSpot.vue2.js"), "./EpModal.vue": () => import("./EpModal.vue3.js"), "./EpQuestion.vue": () => import("./EpQuestion.vue2.js"), "./EpSummativeTable.vue": () => import("./EpSummativeTable.vue2.js"), "./EpSvgShow.vue": () => import("./EpSvgShow.vue2.js"), "./EpTabs.vue": () => import("./EpTabs.vue.js"), "./EpTooltip.vue": () => import("./EpTooltip.vue3.js"), "../medias/EpAudio.vue": () => import("../medias/EpAudio.vue2.js"), "../medias/EpCardLink.vue": () => import("../medias/EpCardLink.vue2.js"), "../medias/EpCarousel.vue": () => import("../medias/EpCarousel.vue.js"), "../medias/EpHierarchy.vue": () => import("../medias/EpHierarchy.vue.js"), "../medias/EpIframe.vue": () => import("../medias/EpIframe.vue2.js"), "../medias/EpKatex.vue": () => import("../medias/EpKatex.vue.js"), "../medias/EpLink.vue": () => import("../medias/EpLink.vue2.js"), "../medias/EpLinkVersion.vue": () => import("../medias/EpLinkVersion.vue2.js"), "../medias/EpLottieSvg.vue": () => import("../medias/EpLottieSvg.vue2.js"), "../medias/EpSensibleImage.vue": () => import("../medias/EpSensibleImage.vue.js"), "../medias/EpSoftware.vue": () => import("../medias/EpSoftware.vue2.js"), "../medias/EpSvg.vue": () => import("../medias/EpSvg.vue2.js"), "../medias/EpTerm.vue": () => import("../medias/EpTerm.vue2.js"), "../medias/EpTimeLine.vue": () => import("../medias/EpTimeLine.vue3.js"), "../medias/EpVideo.vue": () => import("../medias/EpVideo.vue2.js"), "../medias/EpVideoPanopto.vue": () => import("../medias/EpVideoPanopto.vue2.js"), "../medias/EpWordDef.vue": () => import("../medias/EpWordDef.vue2.js"), "../signages/EpAlert.vue": () => import("../signages/EpAlert.vue.js"), "../signages/EpBadge.vue": () => import("../signages/EpBadge.vue2.js"), "../signages/EpHeader.vue": () => import("../signages/EpHeader.vue2.js"), "../signages/EpNothing.vue": () => import("../signages/EpNothing.vue.js"), "../signages/EpQuote.vue": () => import("../signages/EpQuote.vue2.js"), "../signages/EpSkeleton.vue": () => import("../signages/EpSkeleton.vue3.js"), "../tools/BgAudio.vue": () => import("../tools/BgAudio.vue.js"), "../tools/Details.vue": () => import("../tools/Details.vue.js"), "../tools/DisplayBox.vue": () => import("../tools/DisplayBox.vue3.js"), "../tools/SvgFilter.vue": () => import("../tools/SvgFilter.vue.js"), "../tools/TextMedia.vue": () => import("../tools/TextMedia.vue.js"), "../tools/TimelineItem.vue": () => import("../tools/TimelineItem.vue.js"), "../tools/TwoColsMedia.vue": () => import("../tools/TwoColsMedia.vue.js") }), `../${componentToLoad.path}/${componentToLoad.name}.vue`, 3)
         );
       }
       return null;
-    }), _ = m(() => o.value < i.slides.length - 1), j = async () => {
-      n.value = !0, _.value && (o.value += 1), n.value = !1;
-    }, D = async () => {
-      n.value = !0, o.value > 0 && (o.value -= 1), n.value = !1;
-    }, I = (e) => o.value = e, H = (e, v) => {
-      e instanceof HTMLElement ? x.value[v] = e : x.value[v] = null;
+    });
+    const max = computed(() => currentIndex.value < props.slides.length - 1);
+    const next = async () => {
+      isLoading.value = true;
+      if (max.value) {
+        currentIndex.value += 1;
+      }
+      isLoading.value = false;
+    };
+    const prev = async () => {
+      isLoading.value = true;
+      if (currentIndex.value > 0) {
+        currentIndex.value -= 1;
+      }
+      isLoading.value = false;
     };
-    return (e, v) => (t(), r("div", W, [
-      a("div", q, [
-        a("h5", G, c(s.value.title), 1),
-        i.slides.length ? (t(), r("div", J, [
-          a("div", U, [
-            (t(!0), r(A, null, M(i.slides.length, (y, f) => (t(), r("span", {
-              key: `slide-index-${f}`,
-              onClick: (ue) => I(f),
-              class: k([
-                "w-2 h-2 rounded-full cursor-pointer",
-                f === o.value ? "bg-primary" : "bg-gray-400"
-              ])
-            }, null, 10, X))), 128))
-          ]),
-          a("div", Y, [
-            a("button", {
-              class: "nav-btn",
-              onClick: D,
-              disabled: o.value === 0
-            }, [
-              u(S, {
-                "icon-path": g(Q),
-                size: "24"
-              }, null, 8, ["icon-path"])
-            ], 8, Z),
-            a("button", {
-              class: "nav-btn",
-              onClick: j,
-              disabled: !_.value
-            }, [
-              u(S, {
-                "icon-path": g(K),
-                size: "24"
-              }, null, 8, ["icon-path"])
-            ], 8, ee)
-          ]),
-          a("span", te, c(o.value + 1) + " / " + c(i.slides.length), 1)
-        ])) : l("", !0)
-      ]),
-      a("div", ie, [
-        u(V, {
-          name: "slide-fade",
-          mode: "out-in"
-        }, {
-          default: h(() => [
-            i.slides.length > 0 ? (t(), r("div", {
-              key: s.value.uid,
-              ref: (y) => H(y, o.value),
-              class: k([
-                "flex w-full h-full gap-2",
-                d.value ? i.mediaPosition === "left" ? "flex-row" : "flex-row-reverse" : "justify-center"
-              ])
-            }, [
-              n.value ? (t(), r("div", oe, [
-                u(T, {
-                  type: "rectangle",
-                  height: 100,
-                  width: 100,
-                  loading: !0
-                })
-              ])) : !d.value && !p.value ? (t(), r("div", se, [
-                u(T, {
-                  class: "p-4",
-                  type: "rectangle",
-                  height: 150,
-                  width: 150,
-                  loading: !0
-                })
-              ])) : l("", !0),
-              p.value ? (t(), r("div", ae, [
-                s.value.img ? (t(), b(C(p.value), {
-                  key: 0,
-                  src: s.value.img,
-                  cols: "11",
-                  class: "max-h-full max-w-full object-contain",
-                  style: {
-                    height: "auto",
-                    maxHeight: "100%",
-                    objectFit: "contain",
-                    margin: "auto"
-                  }
-                }, null, 8, ["src"])) : s.value.component ? (t(), b(F, { key: 1 }, {
-                  fallback: h(() => [
-                    $(c(e.loading), 1)
-                  ]),
-                  default: h(() => [
-                    (t(), b(C(p.value), N({ ...s.value.component.data }, {
-                      cols: "11",
-                      class: "max-h-full max-w-full object-contain",
-                      style: {
-                        height: "auto",
-                        maxHeight: "100%",
-                        objectFit: "contain",
-                        margin: "auto"
-                      }
-                    }), null, 16))
-                  ]),
-                  _: 1
-                })) : l("", !0)
-              ])) : l("", !0),
-              d.value ? (t(), r("div", re, [
-                a("div", {
-                  innerHTML: g(O)(s.value.content),
-                  class: "text-base leading-relaxed text-black dark:text-white"
-                }, null, 8, le)
-              ])) : l("", !0)
-            ], 2)) : l("", !0)
-          ]),
-          _: 1
-        })
-      ]),
-      a("div", ne, [
-        a("div", {
-          class: "bg-primary h-full rounded-full transition-all duration-300",
-          style: z({
-            width: (o.value + 1) / i.slides.length * 100 + "%"
+    const goTo = (index) => currentIndex.value = index;
+    const updateSlideRefs = (el, index) => {
+      if (el instanceof HTMLElement) {
+        slideRefs.value[index] = el;
+      } else {
+        slideRefs.value[index] = null;
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          createElementVNode("h5", _hoisted_3, toDisplayString(currentSlide.value.title), 1),
+          props.slides.length ? (openBlock(), createElementBlock("div", _hoisted_4, [
+            createElementVNode("div", _hoisted_5, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(props.slides.length, (_, i) => {
+                return openBlock(), createElementBlock("span", {
+                  key: `slide-index-${i}`,
+                  onClick: ($event) => goTo(i),
+                  class: normalizeClass([
+                    "w-2 h-2 rounded-full cursor-pointer",
+                    i === currentIndex.value ? "bg-primary" : "bg-gray-400"
+                  ])
+                }, null, 10, _hoisted_6);
+              }), 128))
+            ]),
+            createElementVNode("div", _hoisted_7, [
+              createElementVNode("button", {
+                class: "nav-btn",
+                onClick: prev,
+                disabled: currentIndex.value === 0
+              }, [
+                createVNode(_sfc_main$1, {
+                  "icon-path": unref(mdiArrowLeft),
+                  size: "24"
+                }, null, 8, ["icon-path"])
+              ], 8, _hoisted_8),
+              createElementVNode("button", {
+                class: "nav-btn",
+                onClick: next,
+                disabled: !max.value
+              }, [
+                createVNode(_sfc_main$1, {
+                  "icon-path": unref(mdiArrowRight),
+                  size: "24"
+                }, null, 8, ["icon-path"])
+              ], 8, _hoisted_9)
+            ]),
+            createElementVNode("span", _hoisted_10, toDisplayString(currentIndex.value + 1) + " / " + toDisplayString(props.slides.length), 1)
+          ])) : createCommentVNode("", true)
+        ]),
+        createElementVNode("div", _hoisted_11, [
+          createVNode(Transition, {
+            name: "slide-fade",
+            mode: "out-in"
+          }, {
+            default: withCtx(() => [
+              props.slides.length > 0 ? (openBlock(), createElementBlock("div", {
+                key: currentSlide.value.uid,
+                ref: (el) => updateSlideRefs(el, currentIndex.value),
+                class: normalizeClass([
+                  "flex w-full h-full gap-2",
+                  hasTextContent.value ? props.mediaPosition === "left" ? "flex-row" : "flex-row-reverse" : "justify-center"
+                ])
+              }, [
+                isLoading.value ? (openBlock(), createElementBlock("div", _hoisted_12, [
+                  createVNode(_sfc_main$2, {
+                    type: "rectangle",
+                    height: 100,
+                    width: 100,
+                    loading: true
+                  })
+                ])) : !hasTextContent.value && !currentSlideMediaContent.value ? (openBlock(), createElementBlock("div", _hoisted_13, [
+                  createVNode(_sfc_main$2, {
+                    class: "p-4",
+                    type: "rectangle",
+                    height: 150,
+                    width: 150,
+                    loading: true
+                  })
+                ])) : createCommentVNode("", true),
+                currentSlideMediaContent.value ? (openBlock(), createElementBlock("div", _hoisted_14, [
+                  currentSlide.value.img ? (openBlock(), createBlock(resolveDynamicComponent(currentSlideMediaContent.value), {
+                    key: 0,
+                    src: currentSlide.value.img,
+                    cols: "11",
+                    class: "max-h-full max-w-full object-contain",
+                    style: {
+                      height: "auto",
+                      maxHeight: "100%",
+                      objectFit: "contain",
+                      margin: "auto"
+                    }
+                  }, null, 8, ["src"])) : currentSlide.value.component ? (openBlock(), createBlock(Suspense, { key: 1 }, {
+                    fallback: withCtx(() => [
+                      createTextVNode(toDisplayString(_ctx.loading), 1)
+                    ]),
+                    default: withCtx(() => [
+                      (openBlock(), createBlock(resolveDynamicComponent(currentSlideMediaContent.value), mergeProps({ ...currentSlide.value.component.data }, {
+                        cols: "11",
+                        class: "max-h-full max-w-full object-contain",
+                        style: {
+                          height: "auto",
+                          maxHeight: "100%",
+                          objectFit: "contain",
+                          margin: "auto"
+                        }
+                      }), null, 16))
+                    ]),
+                    _: 1
+                  })) : createCommentVNode("", true)
+                ])) : createCommentVNode("", true),
+                hasTextContent.value ? (openBlock(), createElementBlock("div", _hoisted_15, [
+                  createElementVNode("div", {
+                    innerHTML: unref(useRenderText)(currentSlide.value.content),
+                    class: "text-base leading-relaxed text-black dark:text-white"
+                  }, null, 8, _hoisted_16)
+                ])) : createCommentVNode("", true)
+              ], 2)) : createCommentVNode("", true)
+            ]),
+            _: 1
           })
-        }, null, 4)
-      ])
-    ]));
+        ]),
+        createElementVNode("div", _hoisted_17, [
+          createElementVNode("div", {
+            class: "bg-primary h-full rounded-full transition-all duration-300",
+            style: normalizeStyle({
+              width: (currentIndex.value + 1) / props.slides.length * 100 + "%"
+            })
+          }, null, 4)
+        ])
+      ]);
+    };
   }
 });
 export {
-  he as default
+  _sfc_main as default
 };
+//# sourceMappingURL=EpContentSlider.vue.js.map

package/dist/components/interactions/EpContentSlider.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EpContentSlider.vue.js","sources":["../../../src/components/interactions/EpContentSlider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ref,\n  computed,\n  defineAsyncComponent,\n  ComponentPublicInstance,\n} from \"vue\";\nimport { useComponent } from \"~/composables/useComponent\";\nimport { useRenderText } from \"~/composables/useRenderText\";\nimport { mdiArrowLeft, mdiArrowRight } from \"@mdi/js\";\nimport EpIcon from \"~/components/basics/EpIcon.vue\";\nimport EpSkeleton from \"~/components/signages/EpSkeleton.vue\";\nimport { EpContentSliderProps } from \"~/types/interactions/EpContentSlider\";\n\nconst props = withDefaults(defineProps<EpContentSliderProps>(), {\n  loading: \"...loading\",\n  noData: \"No data available\",\n  mediaPosition: \"left\",\n});\n\nconst currentIndex = ref(0);\nconst isLoading = ref(false);\nconst slideRefs = ref<(HTMLElement | null)[]>([]);\n\nconst currentSlide = computed(() => {\n  if (!props.slides || props.slides.length === 0) {\n    return {\n      title: props.noData,\n      img: \"\",\n      uid: 2,\n      content: \"\",\n      component: null,\n    };\n  }\n  return props.slides[currentIndex.value];\n});\n\nconst hasTextContent = computed(() => {\n  const content = currentSlide.value.content;\n  return content && content.trim().length > 0;\n});\n\nconst currentSlideMediaContent = computed(() => {\n  if (currentSlide.value.img) {\n    return defineAsyncComponent(() => import(\"../basics/EpImg.vue\"));\n  }\n  if (currentSlide.value.component) {\n    const componentToLoad = useComponent(currentSlide.value.component?.type);\n    return defineAsyncComponent(\n      () => import(`../${componentToLoad.path}/${componentToLoad.name}.vue`)\n    );\n  }\n  return null;\n});\n\nconst max = computed(() => currentIndex.value < props.slides.length - 1);\n\nconst next = async () => {\n  isLoading.value = true;\n  if (max.value) {\n    currentIndex.value += 1;\n  }\n  isLoading.value = false;\n};\n\nconst prev = async () => {\n  isLoading.value = true;\n  if (currentIndex.value > 0) {\n    currentIndex.value -= 1;\n  }\n  isLoading.value = false;\n};\n\nconst goTo = (index: number) => (currentIndex.value = index);\n\nconst updateSlideRefs = (\n  el: Element | ComponentPublicInstance | null,\n  index: number\n) => {\n  if (el instanceof HTMLElement) {\n    slideRefs.value[index] = el;\n  } else {\n    slideRefs.value[index] = null;\n  }\n};\n</script>\n\n<template>\n  <div\n    class=\"relative h-[600px] flex flex-col p-6 bg-zinc-100 dark:bg-dark w-full overflow-hidden rounded-lg shadow-xl\"\n  >\n    <!-- Header section with navigation -->\n    <div\n      class=\"flex justify-between items-center pb-3 mb-3 border-b-2 border-gray-600 dark:border-gray-300\"\n    >\n      <h5 class=\"text-2xl font-bold text-primary\">{{ currentSlide.title }}</h5>\n      <div class=\"flex items-center space-x-3\" v-if=\"props.slides.length\">\n        <!-- Bullets -->\n        <div class=\"flex space-x-2\">\n          <span\n            v-for=\"(_, i) in props.slides.length\"\n            :key=\"`slide-index-${i}`\"\n            @click=\"goTo(i)\"\n            :class=\"[\n              'w-2 h-2 rounded-full cursor-pointer',\n              i === currentIndex ? 'bg-primary' : 'bg-gray-400',\n            ]\"\n          />\n        </div>\n\n        <!-- Controls -->\n        <div class=\"flex space-x-2\">\n          <button class=\"nav-btn\" @click=\"prev\" :disabled=\"currentIndex === 0\">\n            <EpIcon :icon-path=\"mdiArrowLeft\" size=\"24\" />\n          </button>\n          <button class=\"nav-btn\" @click=\"next\" :disabled=\"!max\">\n            <EpIcon :icon-path=\"mdiArrowRight\" size=\"24\" />\n          </button>\n        </div>\n        <span class=\"text-sm\"\n          >{{ currentIndex + 1 }} / {{ props.slides.length }}</span\n        >\n      </div>\n    </div>\n\n    <!-- Slider content -->\n    <div\n      class=\"flex flex-grow items-center justify-center overflow-hidden mb-4\"\n    >\n      <transition name=\"slide-fade\" mode=\"out-in\">\n        <div\n          v-if=\"props.slides.length > 0\"\n          :key=\"currentSlide.uid\"\n          :ref=\"(el) => updateSlideRefs(el, currentIndex)\"\n          :class=\"[\n            'flex w-full h-full gap-2',\n            hasTextContent\n              ? props.mediaPosition === 'left'\n                ? 'flex-row'\n                : 'flex-row-reverse'\n              : 'justify-center',\n          ]\"\n        >\n          <div\n            v-if=\"isLoading\"\n            class=\"flex items-center justify-center w-full h-full\"\n          >\n            <EpSkeleton\n              :type=\"'rectangle'\"\n              :height=\"100\"\n              :width=\"100\"\n              :loading=\"true\"\n            />\n          </div>\n\n          <div\n            v-else-if=\"!hasTextContent && !currentSlideMediaContent\"\n            class=\"flex items-center justify-center w-full h-full\"\n          >\n            <EpSkeleton\n              class=\"p-4\"\n              :type=\"'rectangle'\"\n              :height=\"150\"\n              :width=\"150\"\n              :loading=\"true\"\n            />\n          </div>\n\n          <!-- Media content -->\n          <div\n            v-if=\"currentSlideMediaContent\"\n            class=\"flex items-center justify-center p-2 md:w-1/2 w-full\"\n            style=\"max-height: 100%\"\n          >\n            <!--condition is img-->\n            <template v-if=\"currentSlide.img\">\n              <component\n                :is=\"currentSlideMediaContent\"\n                :src=\"currentSlide.img\"\n                cols=\"11\"\n                class=\"max-h-full max-w-full object-contain\"\n                :style=\"{\n                  height: 'auto',\n                  maxHeight: '100%',\n                  objectFit: 'contain',\n                  margin: 'auto',\n                }\"\n              ></component>\n            </template>\n            <template v-else-if=\"currentSlide.component\">\n              <Suspense>\n                <component\n                  :is=\"currentSlideMediaContent\"\n                  v-bind=\"{ ...currentSlide.component.data }\"\n                  cols=\"11\"\n                  class=\"max-h-full max-w-full object-contain\"\n                  :style=\"{\n                    height: 'auto',\n                    maxHeight: '100%',\n                    objectFit: 'contain',\n                    margin: 'auto',\n                  }\"\n                >\n                </component>\n                <template #fallback>\n                  {{ loading }}\n                </template>\n              </Suspense>\n            </template>\n          </div>\n\n          <!-- Text content -->\n          <div\n            v-if=\"hasTextContent\"\n            class=\"flex-1 p-2 overflow-y-auto md:w-1/2 w-full\"\n          >\n            <div\n              v-html=\"useRenderText(currentSlide.content)\"\n              class=\"text-base leading-relaxed text-black dark:text-white\"\n            ></div>\n          </div>\n        </div>\n      </transition>\n    </div>\n\n    <!-- Progress bar -->\n    <div class=\"mt-2 h-2 w-full bg-gray-300 rounded-full\">\n      <div\n        class=\"bg-primary h-full rounded-full transition-all duration-300\"\n        :style=\"{\n          width: ((currentIndex + 1) / props.slides.length) * 100 + '%',\n        }\"\n      />\n    </div>\n  </div>\n</template>\n"],"names":["_openBlock","_createElementBlock","_createElementVNode","_toDisplayString","_Fragment","_renderList","_normalizeClass","_createVNode","EpIcon","_unref","_Transition","EpSkeleton","_createBlock","_resolveDynamicComponent","_Suspense","loading","_mergeProps","_normalizeStyle"],"mappings":"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"}

package/dist/components/interactions/EpContentSlider.vue2.js

@@ -1,4 +1,5 @@
-import f from "./EpContentSlider.vue.js";
+import _sfc_main from "./EpContentSlider.vue.js";
 export {
-  f as default
+  _sfc_main as default
 };
+//# sourceMappingURL=EpContentSlider.vue2.js.map

package/dist/components/interactions/EpContentSlider.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EpContentSlider.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/interactions/EpDarkMode.vue.js

@@ -1,48 +1,65 @@
-import { defineComponent as c, ref as u, onMounted as p, createElementBlock as r, openBlock as n, createStaticVNode as m, createElementVNode as a } from "vue";
-import { useColorMode as g } from "@vueuse/core";
-const k = {
+import { defineComponent, ref, onMounted, createElementBlock, openBlock, createStaticVNode, createElementVNode } from "vue";
+import { useColorMode } from "@vueuse/core";
+const _hoisted_1 = {
   key: 0,
   title: "Switch to light mode"
-}, v = {
+};
+const _hoisted_2 = {
   key: 1,
   title: "Switch to dark mode"
-}, _ = /* @__PURE__ */ c({
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "EpDarkMode",
   emits: ["update:userMode"],
-  setup(w, { emit: l }) {
-    const d = g(), i = l, t = u(localStorage.getItem("user-theme") || "light"), s = (e) => {
-      localStorage.setItem("user-theme", e), d.value = e, document.documentElement.className = e, t.value = e, i("update:userMode", e);
-    }, h = () => {
-      const e = t.value === "light" ? "dark" : "light";
-      s(e);
+  setup(__props, { emit: __emit }) {
+    const mode = useColorMode();
+    const emit = __emit;
+    const getTheme = () => {
+      return localStorage.getItem("user-theme") || "light";
+    };
+    const userTheme = ref(getTheme());
+    const setTheme = (theme) => {
+      localStorage.setItem("user-theme", theme);
+      mode.value = theme;
+      document.documentElement.className = theme;
+      userTheme.value = theme;
+      emit("update:userMode", theme);
+    };
+    const toggleTheme = () => {
+      const nextTheme = userTheme.value === "light" ? "dark" : "light";
+      setTheme(nextTheme);
+    };
+    onMounted(() => {
+      setTheme(userTheme.value);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("button", {
+        onClick: toggleTheme,
+        class: "p-2 rounded-full transition-colors duration-300 hover:bg-gray-700 hover:scale-105"
+      }, [
+        userTheme.value === "dark" ? (openBlock(), createElementBlock("span", _hoisted_1, [..._cache[0] || (_cache[0] = [
+          createStaticVNode('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sun"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2"></path><path d="M12 20v2"></path><path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"></path></svg>', 1)
+        ])])) : (openBlock(), createElementBlock("span", _hoisted_2, [..._cache[1] || (_cache[1] = [
+          createElementVNode("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "24",
+            height: "24",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            "stroke-width": "2",
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            class: "lucide lucide-moon"
+          }, [
+            createElementVNode("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" })
+          ], -1)
+        ])]))
+      ]);
     };
-    return p(() => {
-      s(t.value);
-    }), (e, o) => (n(), r("button", {
-      onClick: h,
-      class: "p-2 rounded-full transition-colors duration-300 hover:bg-gray-700 hover:scale-105"
-    }, [
-      t.value === "dark" ? (n(), r("span", k, [...o[0] || (o[0] = [
-        m('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sun"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2"></path><path d="M12 20v2"></path><path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"></path></svg>', 1)
-      ])])) : (n(), r("span", v, [...o[1] || (o[1] = [
-        a("svg", {
-          xmlns: "http://www.w3.org/2000/svg",
-          width: "24",
-          height: "24",
-          viewBox: "0 0 24 24",
-          fill: "none",
-          stroke: "currentColor",
-          "stroke-width": "2",
-          "stroke-linecap": "round",
-          "stroke-linejoin": "round",
-          class: "lucide lucide-moon"
-        }, [
-          a("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" })
-        ], -1)
-      ])]))
-    ]));
   }
 });
 export {
-  _ as default
+  _sfc_main as default
 };
+//# sourceMappingURL=EpDarkMode.vue.js.map

package/dist/components/interactions/EpDarkMode.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EpDarkMode.vue.js","sources":["../../../src/components/interactions/EpDarkMode.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, onMounted } from \"vue\";\nimport { useColorMode } from \"@vueuse/core\";\n\ntype UserTheme = \"light\" | \"dark\";\nconst mode = useColorMode();\nconst emit = defineEmits<{\n  (e: \"update:userMode\", userMode: UserTheme): void;\n}>();\n\nconst getTheme = (): UserTheme => {\n  return (localStorage.getItem(\"user-theme\") as UserTheme) || \"light\";\n};\n\nconst userTheme = ref<UserTheme>(getTheme());\n\nconst setTheme = (theme: UserTheme) => {\n  localStorage.setItem(\"user-theme\", theme);\n  mode.value = theme;\n  document.documentElement.className = theme;\n  userTheme.value = theme;\n  emit(\"update:userMode\", theme);\n};\n\nconst toggleTheme = (): void => {\n  const nextTheme = userTheme.value === \"light\" ? \"dark\" : \"light\";\n  setTheme(nextTheme);\n};\n\nonMounted(() => {\n  setTheme(userTheme.value);\n});\n</script>\n\n<template>\n  <button\n    @click=\"toggleTheme\"\n    class=\"p-2 rounded-full transition-colors duration-300 hover:bg-gray-700 hover:scale-105\"\n  >\n    <span v-if=\"userTheme === 'dark'\" title=\"Switch to light mode\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        class=\"lucide lucide-sun\"\n      >\n        <circle cx=\"12\" cy=\"12\" r=\"4\" />\n        <path d=\"M12 2v2\" />\n        <path d=\"M12 20v2\" />\n        <path d=\"m4.93 4.93 1.41 1.41\" />\n        <path d=\"m17.66 17.66 1.41 1.41\" />\n        <path d=\"M2 12h2\" />\n        <path d=\"M20 12h2\" />\n        <path d=\"m6.34 17.66-1.41 1.41\" />\n        <path d=\"m19.07 4.93-1.41 1.41\" />\n      </svg>\n    </span>\n    <span v-else title=\"Switch to dark mode\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        class=\"lucide lucide-moon\"\n      >\n        <path d=\"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z\" />\n      </svg>\n    </span>\n  </button>\n</template>\n"],"names":["_createElementBlock","_openBlock","_createElementVNode"],"mappings":";;;;;;;;;;;;;;AAKA,UAAM,OAAO,aAAA;AACb,UAAM,OAAO;AAIb,UAAM,WAAW,MAAiB;AAChC,aAAQ,aAAa,QAAQ,YAAY,KAAmB;AAAA,IAC9D;AAEA,UAAM,YAAY,IAAe,UAAU;AAE3C,UAAM,WAAW,CAAC,UAAqB;AACrC,mBAAa,QAAQ,cAAc,KAAK;AACxC,WAAK,QAAQ;AACb,eAAS,gBAAgB,YAAY;AACrC,gBAAU,QAAQ;AAClB,WAAK,mBAAmB,KAAK;AAAA,IAC/B;AAEA,UAAM,cAAc,MAAY;AAC9B,YAAM,YAAY,UAAU,UAAU,UAAU,SAAS;AACzD,eAAS,SAAS;AAAA,IACpB;AAEA,cAAU,MAAM;AACd,eAAS,UAAU,KAAK;AAAA,IAC1B,CAAC;;0BAICA,mBA4CS,UAAA;AAAA,QA3CN,SAAO;AAAA,QACR,OAAM;AAAA,MAAA;QAEM,UAAA,UAAS,UAArBC,UAAA,GAAAD,mBAuBO,QAvBP,YAuBO,CAAA,GAAA,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA;AAAA;iBACPC,aAAAD,mBAeO,QAfP,YAeO,CAAA,GAAA,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA;AAAA,UAdLE,mBAaM,OAAA;AAAA,YAZJ,OAAM;AAAA,YACN,OAAM;AAAA,YACN,QAAO;AAAA,YACP,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,QAAO;AAAA,YACP,gBAAa;AAAA,YACb,kBAAe;AAAA,YACf,mBAAgB;AAAA,YAChB,OAAM;AAAA,UAAA;YAENA,mBAA+C,QAAA,EAAzC,GAAE,sCAAoC;AAAA,UAAA;;;;;;"}

package/dist/components/interactions/EpDarkMode.vue2.js

@@ -1,4 +1,5 @@
-import f from "./EpDarkMode.vue.js";
+import _sfc_main from "./EpDarkMode.vue.js";
 export {
-  f as default
+  _sfc_main as default
 };
+//# sourceMappingURL=EpDarkMode.vue2.js.map

package/dist/components/interactions/EpDarkMode.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EpDarkMode.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}