ep-lib-ts 1.0.67 → 1.0.69

package/dist/components/basics/EpAvatar.vue.js

@@ -1,57 +1,4 @@
-import { defineComponent, computed, createElementBlock, openBlock, createCommentVNode, createElementVNode, normalizeClass, toDisplayString } from "vue";
-import { typeAvatar } from "../../types/Avatar.js";
-const _hoisted_1 = { key: 0 };
-const _hoisted_2 = ["src", "alt"];
-const _hoisted_3 = { key: 1 };
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "EpAvatar",
-  props: {
-    src: { default: "" },
-    alt: { default: "" },
-    color: { default: "primary" },
-    size: { default: "small" },
-    variant: { default: "circle" },
-    name: { default: "" }
-  },
-  setup(__props) {
-    const props = __props;
-    const style = computed(() => {
-      return props.variant;
-    });
-    const size = computed(() => {
-      return props.size;
-    });
-    const final_style = computed(() => {
-      var _a;
-      return `${(_a = typeAvatar[style.value]) == null ? void 0 : _a[size.value]}`;
-    });
-    const bgcolor = computed(() => {
-      return "ep-bg-" + props.color;
-    });
-    const final_name = computed(() => {
-      if (props.name.length > 2) {
-        return props.name.slice(0, 2);
-      } else {
-        return props.name;
-      }
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", null, [
-        props.src != "" ? (openBlock(), createElementBlock("div", _hoisted_1, [
-          createElementVNode("img", {
-            src: props.src,
-            alt: props.alt,
-            class: normalizeClass(`${final_style.value} `)
-          }, null, 10, _hoisted_2)
-        ])) : props.src == "" ? (openBlock(), createElementBlock("div", _hoisted_3, [
-          createElementVNode("div", {
-            class: normalizeClass(`${final_style.value}  ${bgcolor.value}  justify-center font-bold text-white flex items-center`)
-          }, toDisplayString(final_name.value), 3)
-        ])) : createCommentVNode("", true)
-      ]);
-    };
-  }
-});
+import _sfc_main from "./EpAvatar.vue2.js";
 export {
   _sfc_main as default
 };

package/dist/components/basics/EpAvatar.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"EpAvatar.vue.js","sources":["../../../src/components/basics/EpAvatar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { typeAvatar } from \"~/types/Avatar\";\nimport type { EpAvatarProps } from \"~/types/basics/EpAvatar\";\n\n// define parameter and default valule\nconst props = withDefaults(defineProps<EpAvatarProps>(), {\n  src: \"\",\n  alt: \"\",\n  color: \"primary\",\n  size: \"small\",\n  variant: \"circle\",\n  name: \"\",\n});\n\nconst style = computed(() => {\n  return props.variant;\n});\n\nconst size = computed(() => {\n  return props.size;\n});\n\nconst final_style = computed(() => {\n  return `${typeAvatar[style.value]?.[size.value]}`;\n});\n\nconst bgcolor = computed(() => {\n  return \"ep-bg-\" + props.color;\n});\n\nconst final_name = computed(() => {\n  if (props.name.length > 2) {\n    return props.name.slice(0, 2);\n  } else {\n    return props.name;\n  }\n});\n</script>\n<template>\n  <div>\n    <div v-if=\"props.src != ''\">\n      <img :src=\"props.src\" :alt=\"props.alt\" :class=\"`${final_style} `\" />\n    </div>\n    <div v-else-if=\"props.src == ''\">\n      <div\n        :class=\"`${final_style}  ${bgcolor}  justify-center font-bold text-white flex items-center`\"\n      >\n        {{ final_name }}\n      </div>\n    </div>\n  </div>\n</template>\n"],"names":["_createElementBlock","_createElementVNode","_normalizeClass"],"mappings":";;;;;;;;;;;;;;;;AAMA,UAAM,QAAQ;AASd,UAAM,QAAQ,SAAS,MAAM;AAC3B,aAAO,MAAM;AAAA,IACf,CAAC;AAED,UAAM,OAAO,SAAS,MAAM;AAC1B,aAAO,MAAM;AAAA,IACf,CAAC;AAED,UAAM,cAAc,SAAS,MAAM;;AACjC,aAAO,IAAG,gBAAW,MAAM,KAAK,MAAtB,mBAA0B,KAAK,MAAM;AAAA,IACjD,CAAC;AAED,UAAM,UAAU,SAAS,MAAM;AAC7B,aAAO,WAAW,MAAM;AAAA,IAC1B,CAAC;AAED,UAAM,aAAa,SAAS,MAAM;AAChC,UAAI,MAAM,KAAK,SAAS,GAAG;AACzB,eAAO,MAAM,KAAK,MAAM,GAAG,CAAC;AAAA,MAC9B,OAAO;AACL,eAAO,MAAM;AAAA,MACf;AAAA,IACF,CAAC;;0BAGCA,mBAWM,OAAA,MAAA;AAAA,QAVO,MAAM,OAAG,mBAApBA,mBAEM,OAAA,YAAA;AAAA,UADJC,mBAAoE,OAAA;AAAA,YAA9D,KAAK,MAAM;AAAA,YAAM,KAAK,MAAM;AAAA,YAAM,yBAAU,YAAA,KAAW,GAAA;AAAA,UAAA;cAE/C,MAAM,OAAG,mBAAzBD,mBAMM,OAAA,YAAA;AAAA,UALJC,mBAIM,OAAA;AAAA,YAHH,OAAKC,eAAA,GAAK,YAAA,KAAW,KAAK,QAAA,KAAO,yDAAA;AAAA,UAAA,mBAE/B,WAAA,KAAU,GAAA,CAAA;AAAA,QAAA;;;;;"}
+{"version":3,"file":"EpAvatar.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/basics/EpAvatar.vue2.js

@@ -1,4 +1,58 @@
-import _sfc_main from "./EpAvatar.vue.js";
+import { defineComponent, computed, createElementBlock, openBlock, createCommentVNode, createElementVNode, normalizeClass, toDisplayString } from "vue";
+import { typeAvatar } from "../../types/Avatar.js";
+import useColors from "../../composables/useColors.js";
+const _hoisted_1 = { key: 0 };
+const _hoisted_2 = ["src", "alt"];
+const _hoisted_3 = { key: 1 };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "EpAvatar",
+  props: {
+    src: { default: "" },
+    alt: { default: "" },
+    color: { default: "primary" },
+    size: { default: "small" },
+    variant: { default: "circle" },
+    name: { default: "" }
+  },
+  setup(__props) {
+    const props = __props;
+    const style = computed(() => {
+      return props.variant;
+    });
+    const size = computed(() => {
+      return props.size;
+    });
+    const final_style = computed(() => {
+      var _a;
+      return `${(_a = typeAvatar[style.value]) == null ? void 0 : _a[size.value]}`;
+    });
+    const bgcolor = computed(() => {
+      return useColors(props.color);
+    });
+    const final_name = computed(() => {
+      if (props.name.length > 2) {
+        return props.name.slice(0, 2);
+      } else {
+        return props.name;
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", null, [
+        props.src != "" ? (openBlock(), createElementBlock("div", _hoisted_1, [
+          createElementVNode("img", {
+            src: props.src,
+            alt: props.alt,
+            class: normalizeClass(`${final_style.value} `)
+          }, null, 10, _hoisted_2)
+        ])) : props.src == "" ? (openBlock(), createElementBlock("div", _hoisted_3, [
+          createElementVNode("div", {
+            class: normalizeClass(`${final_style.value}  ${bgcolor.value}  justify-center font-bold text-white flex items-center`)
+          }, toDisplayString(final_name.value), 3)
+        ])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
 export {
   _sfc_main as default
 };

package/dist/components/basics/EpAvatar.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"EpAvatar.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"EpAvatar.vue2.js","sources":["../../../src/components/basics/EpAvatar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { typeAvatar } from \"~/types/Avatar\";\nimport type { EpAvatarProps } from \"~/types/basics/EpAvatar\";\nimport useColors from \"~/composables/useColors\";\n\n// define parameter and default valule\nconst props = withDefaults(defineProps<EpAvatarProps>(), {\n  src: \"\",\n  alt: \"\",\n  color: \"primary\",\n  size: \"small\",\n  variant: \"circle\",\n  name: \"\",\n});\n\nconst style = computed(() => {\n  return props.variant;\n});\n\nconst size = computed(() => {\n  return props.size;\n});\n\nconst final_style = computed(() => {\n  return `${typeAvatar[style.value]?.[size.value]}`;\n});\n\nconst bgcolor = computed(() => {\n  return useColors(props.color);\n});\n\nconst final_name = computed(() => {\n  if (props.name.length > 2) {\n    return props.name.slice(0, 2);\n  } else {\n    return props.name;\n  }\n});\n</script>\n<template>\n  <div>\n    <div v-if=\"props.src != ''\">\n      <img :src=\"props.src\" :alt=\"props.alt\" :class=\"`${final_style} `\" />\n    </div>\n    <div v-else-if=\"props.src == ''\">\n      <div\n        :class=\"`${final_style}  ${bgcolor}  justify-center font-bold text-white flex items-center`\"\n      >\n        {{ final_name }}\n      </div>\n    </div>\n  </div>\n</template>\n"],"names":["_createElementBlock","_createElementVNode","_normalizeClass"],"mappings":";;;;;;;;;;;;;;;;;AAOA,UAAM,QAAQ;AASd,UAAM,QAAQ,SAAS,MAAM;AAC3B,aAAO,MAAM;AAAA,IACf,CAAC;AAED,UAAM,OAAO,SAAS,MAAM;AAC1B,aAAO,MAAM;AAAA,IACf,CAAC;AAED,UAAM,cAAc,SAAS,MAAM;;AACjC,aAAO,IAAG,gBAAW,MAAM,KAAK,MAAtB,mBAA0B,KAAK,MAAM;AAAA,IACjD,CAAC;AAED,UAAM,UAAU,SAAS,MAAM;AAC7B,aAAO,UAAU,MAAM,KAAK;AAAA,IAC9B,CAAC;AAED,UAAM,aAAa,SAAS,MAAM;AAChC,UAAI,MAAM,KAAK,SAAS,GAAG;AACzB,eAAO,MAAM,KAAK,MAAM,GAAG,CAAC;AAAA,MAC9B,OAAO;AACL,eAAO,MAAM;AAAA,MACf;AAAA,IACF,CAAC;;0BAGCA,mBAWM,OAAA,MAAA;AAAA,QAVO,MAAM,OAAG,mBAApBA,mBAEM,OAAA,YAAA;AAAA,UADJC,mBAAoE,OAAA;AAAA,YAA9D,KAAK,MAAM;AAAA,YAAM,KAAK,MAAM;AAAA,YAAM,yBAAU,YAAA,KAAW,GAAA;AAAA,UAAA;cAE/C,MAAM,OAAG,mBAAzBD,mBAMM,OAAA,YAAA;AAAA,UALJC,mBAIM,OAAA;AAAA,YAHH,OAAKC,eAAA,GAAK,YAAA,KAAW,KAAK,QAAA,KAAO,yDAAA;AAAA,UAAA,mBAE/B,WAAA,KAAU,GAAA,CAAA;AAAA,QAAA;;;;;"}

package/dist/components/basics/EpCard.vue.js

@@ -2,6 +2,7 @@ import { defineComponent, computed, toRefs, useSlots, createElementBlock, openBl
 import _sfc_main$2 from "./EpIcon.vue.js";
 import _sfc_main$1 from "../medias/EpSvg.vue.js";
 import { density_style } from "../../types/Card.js";
+import useColors from "../../composables/useColors.js";
 const _hoisted_1 = ["src"];
 const _hoisted_2 = {
   key: 1,
@@ -41,14 +42,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     const borderBgStyle = computed(() => {
       if (props.outlined) {
-        return `border ep-border-${props.bordercolor}`;
+        return `border ${useColors(props.bordercolor, "border")}`;
       }
     });
     const bgColorStyle = computed(() => {
       if (props.bgcolor !== "neutral") {
-        return `ep-bg-${props.bgcolor} text-white`;
+        return `${useColors(props.bgcolor)}  text-white`;
       }
-      return `ep-surface-2`;
+      return `bg-surface-2 dark:bg-surface-2-dark`;
     });
     const density_class = computed(() => {
       return density_style[props.density];
@@ -64,7 +65,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     ${bgColorStyle.value}
     ${linkStyle.value}
     rounded-md
-
     `;
     });
     const { title, subtitle, icon, src, svg } = toRefs(props);

package/dist/components/basics/EpCard.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"EpCard.vue.js","sources":["../../../src/components/basics/EpCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { toRefs, computed, useSlots, type Slots } from \"vue\";\nimport EpIcon from \"~/components/basics/EpIcon.vue\";\nimport EpSvg from \"~/components/medias/EpSvg.vue\";\nimport { density_style } from \"~/types/Card\";\nimport type { EpCardProps } from \"~/types/basics/EpCard\";\n\nconst props = withDefaults(defineProps<EpCardProps>(), {\n  title: null,\n  subtitle: null,\n  outlined: false,\n  flat: false,\n  icon: null,\n  src: null,\n  bordercolor:\"neutral\",\n  bgcolor:\"neutral\",\n  density: \"default\",\n  maxWidth: \"max-w-full\",\n  isLink: false,\n});\n\n//styles card\nconst shadowCard = computed(() => {\n  return !props.flat ? \"shadow-lg\" : \"\";\n});\n\nconst borderBgStyle = computed(()=> {\n  if(props.outlined) {\n    return `border ep-border-${props.bordercolor}`\n  }\n})\n\nconst bgColorStyle = computed(()=> {\n  if(props.bgcolor !== 'neutral') {\n    return `ep-bg-${props.bgcolor} text-white`\n  }\n  return `ep-surface-2`\n}) \n\n\nconst density_class = computed(() => {\n  return density_style[props.density];\n});\n\nconst linkStyle = computed(()=> {\n  return props.isLink ? \"cursor-pointer\" : \"\"\n})\n\nconst stylesCard = computed(() => {\n  return `\n    ${shadowCard.value} \n    ${props.maxWidth} \n    ${borderBgStyle.value}\n    ${bgColorStyle.value}\n    ${linkStyle.value}\n    rounded-md\n\n    `;\n});\n\nconst { title, subtitle, icon, src, svg } = toRefs(props);\n\nconst slots: Slots = useSlots();\n\nconst hasContent = computed(() => {\n  return !!slots.default || !!props.title || !!props.subtitle || !!props.icon;\n});\n</script>\n<template>\n  <div :class=\"`${stylesCard}`\">\n    <img\n      v-if=\"src\"\n      :src=\"src\"\n      :class=\"`w-full ${hasContent ? 'rounded-t-md' : 'rounded-md'}`\"\n      alt=\"header card\"\n    />\n    <div v-if=\"!src && svg\" class=\"w-full rounded-t-md \">\n      <EpSvg :content=\"svg\" />\n    </div>\n\n    <div :class=\"density_class\" v-if=\"hasContent\">\n      <div\n        v-if=\"title || subtitle || icon\"\n        class=\"mb-2 flex items-center justify-between\"\n      >\n        <div>\n          <h3 class=\"text-2xl font-bold dark:text-white\">{{ title }}</h3>\n          <h4 :class=\"`text-xs dark:text-white`\">\n            {{ subtitle }}\n          </h4>\n        </div>\n        <div v-if=\"icon\">\n          <EpIcon :icon-path=\"icon\" extra-class=\"dark:text-white\" />\n        </div>\n      </div>\n      <slot name=\"card-header\" />\n      <div class=\"dark:text-white\">\n        <slot />\n      </div>\n      <div class=\"dark:text-white\">\n        <slot name=\"card-actions\" />\n      </div>\n    </div>\n  </div>\n</template>\n"],"names":["_createElementBlock","_unref","_openBlock","_createVNode","EpSvg","_createElementVNode","_toDisplayString","EpIcon","_renderSlot"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,UAAM,QAAQ;AAed,UAAM,aAAa,SAAS,MAAM;AAChC,aAAO,CAAC,MAAM,OAAO,cAAc;AAAA,IACrC,CAAC;AAED,UAAM,gBAAgB,SAAS,MAAK;AAClC,UAAG,MAAM,UAAU;AACjB,eAAO,oBAAoB,MAAM,WAAW;AAAA,MAC9C;AAAA,IACF,CAAC;AAED,UAAM,eAAe,SAAS,MAAK;AACjC,UAAG,MAAM,YAAY,WAAW;AAC9B,eAAO,SAAS,MAAM,OAAO;AAAA,MAC/B;AACA,aAAO;AAAA,IACT,CAAC;AAGD,UAAM,gBAAgB,SAAS,MAAM;AACnC,aAAO,cAAc,MAAM,OAAO;AAAA,IACpC,CAAC;AAED,UAAM,YAAY,SAAS,MAAK;AAC9B,aAAO,MAAM,SAAS,mBAAmB;AAAA,IAC3C,CAAC;AAED,UAAM,aAAa,SAAS,MAAM;AAChC,aAAO;AAAA,MACH,WAAW,KAAK;AAAA,MAChB,MAAM,QAAQ;AAAA,MACd,cAAc,KAAK;AAAA,MACnB,aAAa,KAAK;AAAA,MAClB,UAAU,KAAK;AAAA;AAAA;AAAA;AAAA,IAIrB,CAAC;AAED,UAAM,EAAE,OAAO,UAAU,MAAM,KAAK,IAAA,IAAQ,OAAO,KAAK;AAExD,UAAM,QAAe,SAAA;AAErB,UAAM,aAAa,SAAS,MAAM;AAChC,aAAO,CAAC,CAAC,MAAM,WAAW,CAAC,CAAC,MAAM,SAAS,CAAC,CAAC,MAAM,YAAY,CAAC,CAAC,MAAM;AAAA,IACzE,CAAC;;0BAGCA,mBAkCM,OAAA;AAAA,QAlCA,yBAAU,WAAA,KAAU,EAAA;AAAA,MAAA;QAEhBC,MAAA,GAAA,kBADRD,mBAKE,OAAA;AAAA;UAHC,KAAKC,MAAA,GAAA;AAAA,UACL,gCAAiB,WAAA,QAAU,iBAAA,YAAA,EAAA;AAAA,UAC5B,KAAI;AAAA,QAAA;QAEM,CAAAA,MAAA,GAAA,KAAOA,MAAA,GAAA,KAAnBC,aAAAF,mBAEM,OAFN,YAEM;AAAA,UADJG,YAAwBC,aAAA,EAAhB,SAASH,MAAA,GAAA,EAAA,GAAG,MAAA,GAAA,CAAA,SAAA,CAAA;AAAA,QAAA;QAGY,WAAA,sBAAlCD,mBAsBM,OAAA;AAAA;UAtBA,sBAAO,cAAA,KAAa;AAAA,QAAA;UAEhBC,MAAA,KAAA,KAASA,MAAA,QAAA,KAAYA,MAAA,IAAA,KAD7BC,UAAA,GAAAF,mBAaM,OAbN,YAaM;AAAA,YATJK,mBAKM,OAAA,MAAA;AAAA,cAJJA,mBAA+D,MAA/D,YAA+DC,gBAAbL,MAAA,KAAA,CAAK,GAAA,CAAA;AAAA,cACvDI,mBAEK,MAFL,YAEKC,gBADAL,MAAA,QAAA,CAAQ,GAAA,CAAA;AAAA,YAAA;YAGJA,MAAA,IAAA,kBAAXD,mBAEM,OAAA,YAAA;AAAA,cADJG,YAA0DI,aAAA;AAAA,gBAAjD,aAAWN,MAAA,IAAA;AAAA,gBAAM,eAAY;AAAA,cAAA;;;UAG1CO,WAA2B,KAAA,QAAA,aAAA;AAAA,UAC3BH,mBAEM,OAFN,YAEM;AAAA,YADJG,WAAQ,KAAA,QAAA,SAAA;AAAA,UAAA;UAEVH,mBAEM,OAFN,YAEM;AAAA,YADJG,WAA4B,KAAA,QAAA,cAAA;AAAA,UAAA;;;;;;"}
+{"version":3,"file":"EpCard.vue.js","sources":["../../../src/components/basics/EpCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { toRefs, computed, useSlots, type Slots } from \"vue\";\nimport EpIcon from \"~/components/basics/EpIcon.vue\";\nimport EpSvg from \"~/components/medias/EpSvg.vue\";\nimport { density_style } from \"~/types/Card\";\nimport type { EpCardProps } from \"~/types/basics/EpCard\";\nimport useColors from \"~/composables/useColors\";\n\nconst props = withDefaults(defineProps<EpCardProps>(), {\n  title: null,\n  subtitle: null,\n  outlined: false,\n  flat: false,\n  icon: null,\n  src: null,\n  bordercolor:\"neutral\",\n  bgcolor:\"neutral\",\n  density: \"default\",\n  maxWidth: \"max-w-full\",\n  isLink: false,\n});\n\n//styles card\nconst shadowCard = computed(() => {\n  return !props.flat ? \"shadow-lg\" : \"\";\n});\n\nconst borderBgStyle = computed(()=> {\n  if(props.outlined) {\n    return `border ${useColors(props.bordercolor, 'border')}`\n  }\n})\n\nconst bgColorStyle = computed(()=> {\n  if(props.bgcolor !== 'neutral') {\n    return `${useColors(props.bgcolor)}  text-white`\n  }\n  return `bg-surface-2 dark:bg-surface-2-dark`\n}) \n\n\nconst density_class = computed(() => {\n  return density_style[props.density];\n});\n\nconst linkStyle = computed(()=> {\n  return props.isLink ? \"cursor-pointer\" : \"\"\n})\n\nconst stylesCard = computed(() => {\n  return `\n    ${shadowCard.value} \n    ${props.maxWidth} \n    ${borderBgStyle.value}\n    ${bgColorStyle.value}\n    ${linkStyle.value}\n    rounded-md\n    `;\n});\n\nconst { title, subtitle, icon, src, svg } = toRefs(props);\n\nconst slots: Slots = useSlots();\n\nconst hasContent = computed(() => {\n  return !!slots.default || !!props.title || !!props.subtitle || !!props.icon;\n});\n</script>\n<template>\n  <div :class=\"`${stylesCard}`\">\n    <img\n      v-if=\"src\"\n      :src=\"src\"\n      :class=\"`w-full ${hasContent ? 'rounded-t-md' : 'rounded-md'}`\"\n      alt=\"header card\"\n    />\n    <div v-if=\"!src && svg\" class=\"w-full rounded-t-md \">\n      <EpSvg :content=\"svg\" />\n    </div>\n\n    <div :class=\"density_class\" v-if=\"hasContent\">\n      <div\n        v-if=\"title || subtitle || icon\"\n        class=\"mb-2 flex items-center justify-between\"\n      >\n        <div>\n          <h3 class=\"text-2xl font-bold dark:text-white\">{{ title }}</h3>\n          <h4 :class=\"`text-xs dark:text-white`\">\n            {{ subtitle }}\n          </h4>\n        </div>\n        <div v-if=\"icon\">\n          <EpIcon :icon-path=\"icon\" extra-class=\"dark:text-white\" />\n        </div>\n      </div>\n      <slot name=\"card-header\" />\n      <div class=\"dark:text-white\">\n        <slot />\n      </div>\n      <div class=\"dark:text-white\">\n        <slot name=\"card-actions\" />\n      </div>\n    </div>\n  </div>\n</template>\n"],"names":["_createElementBlock","_unref","_openBlock","_createVNode","EpSvg","_createElementVNode","_toDisplayString","EpIcon","_renderSlot"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,UAAM,QAAQ;AAed,UAAM,aAAa,SAAS,MAAM;AAChC,aAAO,CAAC,MAAM,OAAO,cAAc;AAAA,IACrC,CAAC;AAED,UAAM,gBAAgB,SAAS,MAAK;AAClC,UAAG,MAAM,UAAU;AACjB,eAAO,UAAU,UAAU,MAAM,aAAa,QAAQ,CAAC;AAAA,MACzD;AAAA,IACF,CAAC;AAED,UAAM,eAAe,SAAS,MAAK;AACjC,UAAG,MAAM,YAAY,WAAW;AAC9B,eAAO,GAAG,UAAU,MAAM,OAAO,CAAC;AAAA,MACpC;AACA,aAAO;AAAA,IACT,CAAC;AAGD,UAAM,gBAAgB,SAAS,MAAM;AACnC,aAAO,cAAc,MAAM,OAAO;AAAA,IACpC,CAAC;AAED,UAAM,YAAY,SAAS,MAAK;AAC9B,aAAO,MAAM,SAAS,mBAAmB;AAAA,IAC3C,CAAC;AAED,UAAM,aAAa,SAAS,MAAM;AAChC,aAAO;AAAA,MACH,WAAW,KAAK;AAAA,MAChB,MAAM,QAAQ;AAAA,MACd,cAAc,KAAK;AAAA,MACnB,aAAa,KAAK;AAAA,MAClB,UAAU,KAAK;AAAA;AAAA;AAAA,IAGrB,CAAC;AAED,UAAM,EAAE,OAAO,UAAU,MAAM,KAAK,IAAA,IAAQ,OAAO,KAAK;AAExD,UAAM,QAAe,SAAA;AAErB,UAAM,aAAa,SAAS,MAAM;AAChC,aAAO,CAAC,CAAC,MAAM,WAAW,CAAC,CAAC,MAAM,SAAS,CAAC,CAAC,MAAM,YAAY,CAAC,CAAC,MAAM;AAAA,IACzE,CAAC;;0BAGCA,mBAkCM,OAAA;AAAA,QAlCA,yBAAU,WAAA,KAAU,EAAA;AAAA,MAAA;QAEhBC,MAAA,GAAA,kBADRD,mBAKE,OAAA;AAAA;UAHC,KAAKC,MAAA,GAAA;AAAA,UACL,gCAAiB,WAAA,QAAU,iBAAA,YAAA,EAAA;AAAA,UAC5B,KAAI;AAAA,QAAA;QAEM,CAAAA,MAAA,GAAA,KAAOA,MAAA,GAAA,KAAnBC,aAAAF,mBAEM,OAFN,YAEM;AAAA,UADJG,YAAwBC,aAAA,EAAhB,SAASH,MAAA,GAAA,EAAA,GAAG,MAAA,GAAA,CAAA,SAAA,CAAA;AAAA,QAAA;QAGY,WAAA,sBAAlCD,mBAsBM,OAAA;AAAA;UAtBA,sBAAO,cAAA,KAAa;AAAA,QAAA;UAEhBC,MAAA,KAAA,KAASA,MAAA,QAAA,KAAYA,MAAA,IAAA,KAD7BC,UAAA,GAAAF,mBAaM,OAbN,YAaM;AAAA,YATJK,mBAKM,OAAA,MAAA;AAAA,cAJJA,mBAA+D,MAA/D,YAA+DC,gBAAbL,MAAA,KAAA,CAAK,GAAA,CAAA;AAAA,cACvDI,mBAEK,MAFL,YAEKC,gBADAL,MAAA,QAAA,CAAQ,GAAA,CAAA;AAAA,YAAA;YAGJA,MAAA,IAAA,kBAAXD,mBAEM,OAAA,YAAA;AAAA,cADJG,YAA0DI,aAAA;AAAA,gBAAjD,aAAWN,MAAA,IAAA;AAAA,gBAAM,eAAY;AAAA,cAAA;;;UAG1CO,WAA2B,KAAA,QAAA,aAAA;AAAA,UAC3BH,mBAEM,OAFN,YAEM;AAAA,YADJG,WAAQ,KAAA,QAAA,SAAA;AAAA,UAAA;UAEVH,mBAEM,OAFN,YAEM;AAAA,YADJG,WAA4B,KAAA,QAAA,cAAA;AAAA,UAAA;;;;;;"}

package/dist/components/basics/EpDivider.vue.js

@@ -1,8 +1,9 @@
 import { defineComponent, computed, createElementBlock, openBlock, normalizeClass } from "vue";
+import useColors from "../../composables/useColors.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "EpDivider",
   props: {
-    color: { default: null },
+    color: { default: "neutral" },
     size: { default: "border" },
     inset: { type: Boolean, default: false },
     icon: { default: null },
@@ -12,9 +13,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const props = __props;
     const border = computed(() => {
       if (props.color) {
-        return `${props.size} ${props.color}`;
+        return `${props.size} ${useColors(props.color)}`;
       }
-      return `${props.size} ep-border-netural`;
+      return `${props.size} border border-netural`;
     });
     const styles = computed(() => {
       return `${border.value} ${props.inset ? "w-9/12 mx-auto" : "w-full"} ${props.margin}`;

package/dist/components/basics/EpDivider.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"EpDivider.vue.js","sources":["../../../src/components/basics/EpDivider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport type { EpDividerProps } from \"~/types/basics/EpDivider\";\n\nconst props = withDefaults(defineProps<EpDividerProps>(), {\n  color: null,\n  size: \"border\",\n  inset: false,\n  icon: null,\n  margin: \"my-2\",\n});\n\nconst border = computed(() => {\n  if (props.color) {\n    return `${props.size} ${props.color}`;\n  }\n  return `${props.size} ep-border-netural`;\n});\n\nconst styles = computed(() => {\n  return `${border.value} ${props.inset ? \"w-9/12 mx-auto\" : \"w-full\"} ${\n    props.margin\n  }`;\n});\n</script>\n\n<template>\n  <hr :class=\"`h-px ${styles}`\" />\n</template>\n"],"names":["_createElementBlock"],"mappings":";;;;;;;;;;;AAIA,UAAM,QAAQ;AAQd,UAAM,SAAS,SAAS,MAAM;AAC5B,UAAI,MAAM,OAAO;AACf,eAAO,GAAG,MAAM,IAAI,IAAI,MAAM,KAAK;AAAA,MACrC;AACA,aAAO,GAAG,MAAM,IAAI;AAAA,IACtB,CAAC;AAED,UAAM,SAAS,SAAS,MAAM;AAC5B,aAAO,GAAG,OAAO,KAAK,IAAI,MAAM,QAAQ,mBAAmB,QAAQ,IACjE,MAAM,MACR;AAAA,IACF,CAAC;;0BAICA,mBAAgC,MAAA;AAAA,QAA3B,8BAAe,OAAA,KAAM,EAAA;AAAA,MAAA;;;;"}
+{"version":3,"file":"EpDivider.vue.js","sources":["../../../src/components/basics/EpDivider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport type { EpDividerProps } from \"~/types/basics/EpDivider\";\nimport useColors from \"~/composables/useColors\";\n\nconst props = withDefaults(defineProps<EpDividerProps>(), {\n  color: \"neutral\",\n  size: \"border\",\n  inset: false,\n  icon: null,\n  margin: \"my-2\",\n});\n\nconst border = computed(() => {\n  if (props.color) {\n    return `${props.size} ${useColors(props.color)}`;\n  }\n  return `${props.size} border border-netural`;\n});\n\nconst styles = computed(() => {\n  return `${border.value} ${props.inset ? \"w-9/12 mx-auto\" : \"w-full\"} ${\n    props.margin\n  }`;\n});\n</script>\n\n<template>\n  <hr :class=\"`h-px ${styles}`\" />\n</template>\n"],"names":["_createElementBlock"],"mappings":";;;;;;;;;;;;AAKA,UAAM,QAAQ;AAQd,UAAM,SAAS,SAAS,MAAM;AAC5B,UAAI,MAAM,OAAO;AACf,eAAO,GAAG,MAAM,IAAI,IAAI,UAAU,MAAM,KAAK,CAAC;AAAA,MAChD;AACA,aAAO,GAAG,MAAM,IAAI;AAAA,IACtB,CAAC;AAED,UAAM,SAAS,SAAS,MAAM;AAC5B,aAAO,GAAG,OAAO,KAAK,IAAI,MAAM,QAAQ,mBAAmB,QAAQ,IACjE,MAAM,MACR;AAAA,IACF,CAAC;;0BAICA,mBAAgC,MAAA;AAAA,QAA3B,8BAAe,OAAA,KAAM,EAAA;AAAA,MAAA;;;;"}

package/dist/components/basics/EpHoverCard.vue.js

@@ -39,7 +39,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     const borderColor = computed(() => {
       if (props.outlined) {
-        return "border ep-border-border";
+        return "border border-neutral dark:border-white";
       }
       return "";
     });
@@ -52,7 +52,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     ${borderColor.value} 
     ${props.maxWidth} 
     rounded-md 
-    ep-surface-2`;
+    bg-surface-2 dark:bg-surface-2-dark`;
     });
     const { title, subtitle, icon, src, hoverContent } = toRefs(props);
     const slots = useSlots();

package/dist/components/basics/EpHoverCard.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"EpHoverCard.vue.js","sources":["../../../src/components/basics/EpHoverCard.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, toRefs, useSlots, type Slots } from \"vue\";\nimport EpHover from \"~/components/basics/EpHover.vue\";\nimport EpIcon from \"~/components/basics//EpIcon.vue\";\nimport { density_style } from \"~/types/Card\";\nimport type { EpHoverCardProps } from \"~/types/basics/EpHoverCard\";\n\nconst props = withDefaults(defineProps<EpHoverCardProps>(), {\n  title: null,\n  subtitle: null,\n  outlined: false,\n  flat: false,\n  icon: null,\n  color: null,\n  src: null,\n  density: \"default\",\n  maxWidth: \"max-w-xl\",\n  hoverBg: \"\",\n  hoverAnimation: \"translateY\",\n});\n\n//styles card\nconst shadowCard = computed(() => {\n  return !props.flat ? \"shadow-lg\" : \"\";\n});\n\nconst borderColor = computed(() => {\n  if (props.outlined) {\n    return \"border ep-border-border\";\n  }\n  return \"\";\n});\n\n\n\nconst density_class = computed(() => {\n  return density_style[props.density];\n});\n\nconst stylesCard = computed(() => {\n  return `\n    ${shadowCard.value} \n    ${borderColor.value} \n    ${props.maxWidth} \n    rounded-md \n    ep-surface-2`;\n});\n\nconst { title, subtitle, icon, src, hoverContent } = toRefs(props);\n\nconst slots: Slots = useSlots();\n\nconst hasContent = computed(() => {\n  return !!slots.default || !!props.title || !!props.subtitle;\n});\n</script>\n\n<template>\n  <div :class=\"`${stylesCard} mx-auto`\">\n    <EpHover\n      :textColor=\"hoverColor\"\n      :textSize=\"textSize\"\n      :seeThrough=\"seeThrough\"\n      :bgColor=\"hoverBg\"\n      :animation=\"hoverAnimation\"\n      :text=\"hoverContent\"\n      v-if=\"src && hoverContent\"\n    >\n      <img\n        :src=\"src\"\n        :class=\"`w-full ${hasContent ? 'rounded-t-md' : 'rounded-md'}`\"\n        alt=\"header card\"\n      />\n    </EpHover>\n    <div :class=\"density_class\" v-if=\"hasContent\">\n      <div\n        v-if=\"title || subtitle\"\n        class=\"mb-2 flex items-center justify-between\"\n      >\n        <div>\n          <h3 class=\"text-2xl font-bold\">{{ title }}</h3>\n          <h4 :class=\"`text-xs`\">\n            {{ subtitle }}\n          </h4>\n        </div>\n        <div v-if=\"icon\">\n          <EpIcon :icon-path=\"icon\" />\n        </div>\n      </div>\n      <slot name=\"card-header\" />\n      <div>\n        <slot />\n      </div>\n      <div class=\"max-w-4xl\">\n        <slot name=\"card-actions\" />\n      </div>\n    </div>\n  </div>\n</template>\n"],"names":["_createElementBlock","_unref","_createBlock","EpHover","hoverColor","textSize","seeThrough","hoverBg","hoverAnimation","_createElementVNode","_openBlock","_toDisplayString","_createVNode","EpIcon","_renderSlot"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,UAAM,QAAQ;AAed,UAAM,aAAa,SAAS,MAAM;AAChC,aAAO,CAAC,MAAM,OAAO,cAAc;AAAA,IACrC,CAAC;AAED,UAAM,cAAc,SAAS,MAAM;AACjC,UAAI,MAAM,UAAU;AAClB,eAAO;AAAA,MACT;AACA,aAAO;AAAA,IACT,CAAC;AAID,UAAM,gBAAgB,SAAS,MAAM;AACnC,aAAO,cAAc,MAAM,OAAO;AAAA,IACpC,CAAC;AAED,UAAM,aAAa,SAAS,MAAM;AAChC,aAAO;AAAA,MACH,WAAW,KAAK;AAAA,MAChB,YAAY,KAAK;AAAA,MACjB,MAAM,QAAQ;AAAA;AAAA;AAAA,IAGpB,CAAC;AAED,UAAM,EAAE,OAAO,UAAU,MAAM,KAAK,aAAA,IAAiB,OAAO,KAAK;AAEjE,UAAM,QAAe,SAAA;AAErB,UAAM,aAAa,SAAS,MAAM;AAChC,aAAO,CAAC,CAAC,MAAM,WAAW,CAAC,CAAC,MAAM,SAAS,CAAC,CAAC,MAAM;AAAA,IACrD,CAAC;;0BAICA,mBAuCM,OAAA;AAAA,QAvCA,yBAAU,WAAA,KAAU,UAAA;AAAA,MAAA;QAQhBC,MAAA,GAAA,KAAOA,MAAA,YAAA,kBAPfC,YAcUC,aAAA;AAAA;UAbP,WAAWC,KAAAA;AAAAA,UACX,UAAUC,KAAAA;AAAAA,UACV,YAAYC,KAAAA;AAAAA,UACZ,SAASC,KAAAA;AAAAA,UACT,WAAWC,KAAAA;AAAAA,UACX,MAAMP,MAAA,YAAA;AAAA,QAAA;2BAGP,MAIE;AAAA,YAJFQ,mBAIE,OAAA;AAAA,cAHC,KAAKR,MAAA,GAAA;AAAA,cACL,gCAAiB,WAAA,QAAU,iBAAA,YAAA,EAAA;AAAA,cAC5B,KAAI;AAAA,YAAA;;;;QAG0B,WAAA,sBAAlCD,mBAsBM,OAAA;AAAA;UAtBA,sBAAO,cAAA,KAAa;AAAA,QAAA;UAEhBC,MAAA,KAAA,KAASA,MAAA,QAAA,KADjBS,aAAAV,mBAaM,OAbN,YAaM;AAAA,YATJS,mBAKM,OAAA,MAAA;AAAA,cAJJA,mBAA+C,MAA/C,YAA+CE,gBAAbV,MAAA,KAAA,CAAK,GAAA,CAAA;AAAA,cACvCQ,mBAEK,MAFL,YAEKE,gBADAV,MAAA,QAAA,CAAQ,GAAA,CAAA;AAAA,YAAA;YAGJA,MAAA,IAAA,kBAAXD,mBAEM,OAAA,YAAA;AAAA,cADJY,YAA4BC,aAAA,EAAnB,aAAWZ,MAAA,IAAA,EAAA,GAAI,MAAA,GAAA,CAAA,WAAA,CAAA;AAAA,YAAA;;UAG5Ba,WAA2B,KAAA,QAAA,aAAA;AAAA,UAC3BL,mBAEM,OAAA,MAAA;AAAA,YADJK,WAAQ,KAAA,QAAA,SAAA;AAAA,UAAA;UAEVL,mBAEM,OAFN,YAEM;AAAA,YADJK,WAA4B,KAAA,QAAA,cAAA;AAAA,UAAA;;;;;;"}
+{"version":3,"file":"EpHoverCard.vue.js","sources":["../../../src/components/basics/EpHoverCard.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, toRefs, useSlots, type Slots } from \"vue\";\nimport EpHover from \"~/components/basics/EpHover.vue\";\nimport EpIcon from \"~/components/basics//EpIcon.vue\";\nimport { density_style } from \"~/types/Card\";\nimport type { EpHoverCardProps } from \"~/types/basics/EpHoverCard\";\n\nconst props = withDefaults(defineProps<EpHoverCardProps>(), {\n  title: null,\n  subtitle: null,\n  outlined: false,\n  flat: false,\n  icon: null,\n  color: null,\n  src: null,\n  density: \"default\",\n  maxWidth: \"max-w-xl\",\n  hoverBg: \"\",\n  hoverAnimation: \"translateY\",\n});\n\n//styles card\nconst shadowCard = computed(() => {\n  return !props.flat ? \"shadow-lg\" : \"\";\n});\n\nconst borderColor = computed(() => {\n  if (props.outlined) {\n    return \"border border-neutral dark:border-white\";\n  }\n  return \"\";\n});\n\n\n\nconst density_class = computed(() => {\n  return density_style[props.density];\n});\n\nconst stylesCard = computed(() => {\n  return `\n    ${shadowCard.value} \n    ${borderColor.value} \n    ${props.maxWidth} \n    rounded-md \n    bg-surface-2 dark:bg-surface-2-dark`;\n});\n\nconst { title, subtitle, icon, src, hoverContent } = toRefs(props);\n\nconst slots: Slots = useSlots();\n\nconst hasContent = computed(() => {\n  return !!slots.default || !!props.title || !!props.subtitle;\n});\n</script>\n\n<template>\n  <div :class=\"`${stylesCard} mx-auto`\">\n    <EpHover\n      :textColor=\"hoverColor\"\n      :textSize=\"textSize\"\n      :seeThrough=\"seeThrough\"\n      :bgColor=\"hoverBg\"\n      :animation=\"hoverAnimation\"\n      :text=\"hoverContent\"\n      v-if=\"src && hoverContent\"\n    >\n      <img\n        :src=\"src\"\n        :class=\"`w-full ${hasContent ? 'rounded-t-md' : 'rounded-md'}`\"\n        alt=\"header card\"\n      />\n    </EpHover>\n    <div :class=\"density_class\" v-if=\"hasContent\">\n      <div\n        v-if=\"title || subtitle\"\n        class=\"mb-2 flex items-center justify-between\"\n      >\n        <div>\n          <h3 class=\"text-2xl font-bold\">{{ title }}</h3>\n          <h4 :class=\"`text-xs`\">\n            {{ subtitle }}\n          </h4>\n        </div>\n        <div v-if=\"icon\">\n          <EpIcon :icon-path=\"icon\" />\n        </div>\n      </div>\n      <slot name=\"card-header\" />\n      <div>\n        <slot />\n      </div>\n      <div class=\"max-w-4xl\">\n        <slot name=\"card-actions\" />\n      </div>\n    </div>\n  </div>\n</template>\n"],"names":["_createElementBlock","_unref","_createBlock","EpHover","hoverColor","textSize","seeThrough","hoverBg","hoverAnimation","_createElementVNode","_openBlock","_toDisplayString","_createVNode","EpIcon","_renderSlot"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,UAAM,QAAQ;AAed,UAAM,aAAa,SAAS,MAAM;AAChC,aAAO,CAAC,MAAM,OAAO,cAAc;AAAA,IACrC,CAAC;AAED,UAAM,cAAc,SAAS,MAAM;AACjC,UAAI,MAAM,UAAU;AAClB,eAAO;AAAA,MACT;AACA,aAAO;AAAA,IACT,CAAC;AAID,UAAM,gBAAgB,SAAS,MAAM;AACnC,aAAO,cAAc,MAAM,OAAO;AAAA,IACpC,CAAC;AAED,UAAM,aAAa,SAAS,MAAM;AAChC,aAAO;AAAA,MACH,WAAW,KAAK;AAAA,MAChB,YAAY,KAAK;AAAA,MACjB,MAAM,QAAQ;AAAA;AAAA;AAAA,IAGpB,CAAC;AAED,UAAM,EAAE,OAAO,UAAU,MAAM,KAAK,aAAA,IAAiB,OAAO,KAAK;AAEjE,UAAM,QAAe,SAAA;AAErB,UAAM,aAAa,SAAS,MAAM;AAChC,aAAO,CAAC,CAAC,MAAM,WAAW,CAAC,CAAC,MAAM,SAAS,CAAC,CAAC,MAAM;AAAA,IACrD,CAAC;;0BAICA,mBAuCM,OAAA;AAAA,QAvCA,yBAAU,WAAA,KAAU,UAAA;AAAA,MAAA;QAQhBC,MAAA,GAAA,KAAOA,MAAA,YAAA,kBAPfC,YAcUC,aAAA;AAAA;UAbP,WAAWC,KAAAA;AAAAA,UACX,UAAUC,KAAAA;AAAAA,UACV,YAAYC,KAAAA;AAAAA,UACZ,SAASC,KAAAA;AAAAA,UACT,WAAWC,KAAAA;AAAAA,UACX,MAAMP,MAAA,YAAA;AAAA,QAAA;2BAGP,MAIE;AAAA,YAJFQ,mBAIE,OAAA;AAAA,cAHC,KAAKR,MAAA,GAAA;AAAA,cACL,gCAAiB,WAAA,QAAU,iBAAA,YAAA,EAAA;AAAA,cAC5B,KAAI;AAAA,YAAA;;;;QAG0B,WAAA,sBAAlCD,mBAsBM,OAAA;AAAA;UAtBA,sBAAO,cAAA,KAAa;AAAA,QAAA;UAEhBC,MAAA,KAAA,KAASA,MAAA,QAAA,KADjBS,aAAAV,mBAaM,OAbN,YAaM;AAAA,YATJS,mBAKM,OAAA,MAAA;AAAA,cAJJA,mBAA+C,MAA/C,YAA+CE,gBAAbV,MAAA,KAAA,CAAK,GAAA,CAAA;AAAA,cACvCQ,mBAEK,MAFL,YAEKE,gBADAV,MAAA,QAAA,CAAQ,GAAA,CAAA;AAAA,YAAA;YAGJA,MAAA,IAAA,kBAAXD,mBAEM,OAAA,YAAA;AAAA,cADJY,YAA4BC,aAAA,EAAnB,aAAWZ,MAAA,IAAA,EAAA,GAAI,MAAA,GAAA,CAAA,WAAA,CAAA;AAAA,YAAA;;UAG5Ba,WAA2B,KAAA,QAAA,aAAA;AAAA,UAC3BL,mBAEM,OAAA,MAAA;AAAA,YADJK,WAAQ,KAAA,QAAA,SAAA;AAAA,UAAA;UAEVL,mBAEM,OAFN,YAEM;AAAA,YADJK,WAA4B,KAAA,QAAA,cAAA;AAAA,UAAA;;;;;;"}

package/dist/components/basics/EpImg.vue.js

@@ -103,7 +103,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }, [
         !unref(thumbnail) ? (openBlock(), createElementBlock("div", _hoisted_1, [
           createElementVNode("div", {
-            class: normalizeClass(`mx-auto rounded-md overflow-hidden ep-surface-2 shadow-md ${renderCols.value}`)
+            class: normalizeClass(`mx-auto rounded-md overflow-hidden bg-surface-2 dark:bg-surface-2-dark shadow-md ${renderCols.value}`)
           }, [
             unref(isLoading) ? (openBlock(), createElementBlock("span", _hoisted_2, [
               createVNode(_sfc_main$1, {

package/dist/components/basics/EpImg.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"EpImg.vue.js","sources":["../../../src/components/basics/EpImg.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { toRefs, ref, computed } from \"vue\";\nimport { sizeThumbnailStyle, cols_img } from \"~/types/Image\";\nimport { useImage } from \"@vueuse/core\";\nimport EpModal from \"~/components/interactions/EpModal.vue\";\nimport EpIcon from \"~/components/basics/EpIcon.vue\";\nimport EpBtn from \"~/components/basics/EpBtn.vue\";\nimport { mdiArrowExpandAll } from \"@mdi/js\";\nimport { mdiImage } from \"@mdi/js\";\nimport { mdiImageRemove } from \"@mdi/js\";\nimport { useRenderText } from \"~/composables/useRenderText\";\nimport type { EpImgProps } from \"~/types/basics/EpImg\";\n\nconst props = withDefaults(defineProps<EpImgProps>(), {\n  alt: \"Image snfas\",\n  cols: \"6\",\n  thumbnail: false,\n  noModal: false,\n  sizeThumbnail: \"medium\",\n  labelClose: \"Fermer\",\n  labelRef: \"Référence\",\n  labelRefLib: \"Référence bibliographique\",\n});\n\n// To access freely the image\nconst imgEl = ref<HTMLImageElement | null>(null);\n\ndefineExpose({ imgEl });\n\nconst renderCols = computed(() => {\n  return cols_img[+props.cols];\n});\n\nconst renderBib = computed(() => {\n  if (props.bib) {\n    return useRenderText(props.bib);\n  }\n  return \"\";\n});\n\nconst showModal = ref<boolean>(false);\n\nconst toggleModal = (): void => {\n  if (props.noModal) {\n    return;\n  }\n  showModal.value = !showModal.value;\n};\n\nconst showBib = ref<boolean>(false);\n\nconst toggleBib = (): void => {\n  showBib.value = !showBib.value;\n};\n\nconst styleSizeThumbnail = computed(() => {\n  return sizeThumbnailStyle[props.sizeThumbnail];\n});\n\nconst { isLoading, error } = useImage({ src: props.src });\nconst { src, alt, title, caption, thumbnail, bib, sizeThumbnail } =\n  toRefs(props);\n</script>\n\n<template>\n  <div :class=\"thumbnail ? 'inline-block' : ''\">\n    <div v-if=\"!thumbnail\" class=\"flex m-2\">\n      <div\n        :class=\"`mx-auto rounded-md overflow-hidden ep-surface-2 shadow-md ${renderCols}`\"\n      >\n        <template v-if=\"isLoading\">\n          <span class=\"text-gray-200\"\n            ><EpIcon :icon-path=\"mdiImage\" size=\"250\"></EpIcon\n          ></span>\n        </template>\n        <template v-else-if=\"error\">\n          <span class=\"text-red-200\"\n            ><EpIcon :icon-path=\"mdiImageRemove\" size=\"150\"></EpIcon\n          ></span>\n        </template>\n        <template v-else>\n          <div\n            :class=\"`${\n              !noModal ? 'cursor-pointer' : ''\n            } dark:bg-white group relative`\"\n          >\n            <img\n              class=\"object-cover object-center w-full\"\n              :src=\"src\"\n              :alt=\"alt\"\n              @click=\"toggleModal\"\n              ref=\"imgEl\"\n            />\n            <div\n              v-if=\"!noModal\"\n              class=\"absolute bottom-2 right-2 text-white text-center bg-black rounded opacity-0 transition-opacity duration-300 group-hover:opacity-50 cursor-pointer\"\n            >\n              <EpIcon size=\"28\" :icon-path=\"mdiArrowExpandAll\" />\n            </div>\n          </div>\n        </template>\n        <div\n          class=\"px-4 py-2 dark:rounded-b-md\"\n          v-if=\"title || caption || bib\"\n        >\n          <h2 class=\"text-2xl dark:text-white font-bold\">\n            {{ title }}\n          </h2>\n          <p class=\"text-gray-500 dark:text-white text-sm mt-4\">\n            {{ caption }}\n          </p>\n          <div class=\"text-right\" v-if=\"renderBib\">\n            <EpBtn @click=\"toggleBib\" rounded size=\"small\" type=\"primary\">{{\n              labelRef\n            }}</EpBtn>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div v-if=\"thumbnail\" class=\"relative group inline-block m-2\">\n      <img\n        :class=\"`${styleSizeThumbnail} object-cover object-center group-hover:opacity-30 `\"\n        :src=\"src\"\n        :alt=\"alt\"\n        ref=\"imgEl\"\n      />\n      <div\n        :class=\"`absolute top-0 left-0 ${styleSizeThumbnail} bg-black opacity-0 transition-opacity duration-300 group-hover:opacity-30 cursor-pointer`\"\n        @click=\"toggleModal\"\n      >\n        <div\n          class=\"absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white text-center\"\n        >\n          <EpIcon :icon-path=\"mdiArrowExpandAll\" />\n        </div>\n      </div>\n    </div>\n    <EpModal v-model=\"showModal\">\n      <img\n        class=\"object-cover object-center h-5/6 w-5/6 mx-auto dark:bg-white\"\n        :src=\"src\"\n        :alt=\"alt\"\n        @click=\"toggleModal\"\n      />\n      <div class=\"px-4 py-2\" v-if=\"thumbnail\">\n        <h2 class=\"text-2xl dark:text-white font-bold\">\n          {{ title }}\n        </h2>\n        <p class=\"text-gray-500 dark:text-white text-sm mt-4\">\n          {{ caption }}\n        </p>\n        <div class=\"text-gray-700 dark:text-white mt-4\" v-html=\"renderBib\" />\n      </div>\n      <!-- <div class=\"flex justify-end\"><EpBtn @click=\"toggleModal\" size=\"small\" type=\"error\" outlined>Fermer</EpBtn/> -->\n    </EpModal>\n    <EpModal v-model=\"showBib\" :title=\"labelRefLib\">\n      <div class=\"text-gray-700 dark:text-white mt-4\" v-html=\"renderBib\" />\n      <div class=\"flex justify-end\">\n        <EpBtn @click=\"toggleBib\" size=\"small\" type=\"error\" outlined rounded>\n          {{ labelClose }}\n        </EpBtn>\n      </div>\n    </EpModal>\n  </div>\n</template>\n"],"names":["_createElementBlock","_unref","_openBlock","_createElementVNode","_createVNode","EpIcon","_normalizeClass","noModal","_toDisplayString","EpBtn","labelRef","EpModal","labelRefLib","labelClose"],"mappings":"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"}
+{"version":3,"file":"EpImg.vue.js","sources":["../../../src/components/basics/EpImg.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { toRefs, ref, computed } from \"vue\";\nimport { sizeThumbnailStyle, cols_img } from \"~/types/Image\";\nimport { useImage } from \"@vueuse/core\";\nimport EpModal from \"~/components/interactions/EpModal.vue\";\nimport EpIcon from \"~/components/basics/EpIcon.vue\";\nimport EpBtn from \"~/components/basics/EpBtn.vue\";\nimport { mdiArrowExpandAll } from \"@mdi/js\";\nimport { mdiImage } from \"@mdi/js\";\nimport { mdiImageRemove } from \"@mdi/js\";\nimport { useRenderText } from \"~/composables/useRenderText\";\nimport type { EpImgProps } from \"~/types/basics/EpImg\";\n\nconst props = withDefaults(defineProps<EpImgProps>(), {\n  alt: \"Image snfas\",\n  cols: \"6\",\n  thumbnail: false,\n  noModal: false,\n  sizeThumbnail: \"medium\",\n  labelClose: \"Fermer\",\n  labelRef: \"Référence\",\n  labelRefLib: \"Référence bibliographique\",\n});\n\n// To access freely the image\nconst imgEl = ref<HTMLImageElement | null>(null);\n\ndefineExpose({ imgEl });\n\nconst renderCols = computed(() => {\n  return cols_img[+props.cols];\n});\n\nconst renderBib = computed(() => {\n  if (props.bib) {\n    return useRenderText(props.bib);\n  }\n  return \"\";\n});\n\nconst showModal = ref<boolean>(false);\n\nconst toggleModal = (): void => {\n  if (props.noModal) {\n    return;\n  }\n  showModal.value = !showModal.value;\n};\n\nconst showBib = ref<boolean>(false);\n\nconst toggleBib = (): void => {\n  showBib.value = !showBib.value;\n};\n\nconst styleSizeThumbnail = computed(() => {\n  return sizeThumbnailStyle[props.sizeThumbnail];\n});\n\nconst { isLoading, error } = useImage({ src: props.src });\nconst { src, alt, title, caption, thumbnail, bib, sizeThumbnail } =\n  toRefs(props);\n</script>\n\n<template>\n  <div :class=\"thumbnail ? 'inline-block' : ''\">\n    <div v-if=\"!thumbnail\" class=\"flex m-2\">\n      <div\n        :class=\"`mx-auto rounded-md overflow-hidden bg-surface-2 dark:bg-surface-2-dark shadow-md ${renderCols}`\"\n      >\n        <template v-if=\"isLoading\">\n          <span class=\"text-gray-200\"\n            ><EpIcon :icon-path=\"mdiImage\" size=\"250\"></EpIcon\n          ></span>\n        </template>\n        <template v-else-if=\"error\">\n          <span class=\"text-red-200\"\n            ><EpIcon :icon-path=\"mdiImageRemove\" size=\"150\"></EpIcon\n          ></span>\n        </template>\n        <template v-else>\n          <div\n            :class=\"`${\n              !noModal ? 'cursor-pointer' : ''\n            } dark:bg-white group relative`\"\n          >\n            <img\n              class=\"object-cover object-center w-full\"\n              :src=\"src\"\n              :alt=\"alt\"\n              @click=\"toggleModal\"\n              ref=\"imgEl\"\n            />\n            <div\n              v-if=\"!noModal\"\n              class=\"absolute bottom-2 right-2 text-white text-center bg-black rounded opacity-0 transition-opacity duration-300 group-hover:opacity-50 cursor-pointer\"\n            >\n              <EpIcon size=\"28\" :icon-path=\"mdiArrowExpandAll\" />\n            </div>\n          </div>\n        </template>\n        <div\n          class=\"px-4 py-2 dark:rounded-b-md\"\n          v-if=\"title || caption || bib\"\n        >\n          <h2 class=\"text-2xl dark:text-white font-bold\">\n            {{ title }}\n          </h2>\n          <p class=\"text-gray-500 dark:text-white text-sm mt-4\">\n            {{ caption }}\n          </p>\n          <div class=\"text-right\" v-if=\"renderBib\">\n            <EpBtn @click=\"toggleBib\" rounded size=\"small\" type=\"primary\">{{\n              labelRef\n            }}</EpBtn>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div v-if=\"thumbnail\" class=\"relative group inline-block m-2\">\n      <img\n        :class=\"`${styleSizeThumbnail} object-cover object-center group-hover:opacity-30 `\"\n        :src=\"src\"\n        :alt=\"alt\"\n        ref=\"imgEl\"\n      />\n      <div\n        :class=\"`absolute top-0 left-0 ${styleSizeThumbnail} bg-black opacity-0 transition-opacity duration-300 group-hover:opacity-30 cursor-pointer`\"\n        @click=\"toggleModal\"\n      >\n        <div\n          class=\"absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white text-center\"\n        >\n          <EpIcon :icon-path=\"mdiArrowExpandAll\" />\n        </div>\n      </div>\n    </div>\n    <EpModal v-model=\"showModal\">\n      <img\n        class=\"object-cover object-center h-5/6 w-5/6 mx-auto dark:bg-white\"\n        :src=\"src\"\n        :alt=\"alt\"\n        @click=\"toggleModal\"\n      />\n      <div class=\"px-4 py-2\" v-if=\"thumbnail\">\n        <h2 class=\"text-2xl dark:text-white font-bold\">\n          {{ title }}\n        </h2>\n        <p class=\"text-gray-500 dark:text-white text-sm mt-4\">\n          {{ caption }}\n        </p>\n        <div class=\"text-gray-700 dark:text-white mt-4\" v-html=\"renderBib\" />\n      </div>\n      <!-- <div class=\"flex justify-end\"><EpBtn @click=\"toggleModal\" size=\"small\" type=\"error\" outlined>Fermer</EpBtn/> -->\n    </EpModal>\n    <EpModal v-model=\"showBib\" :title=\"labelRefLib\">\n      <div class=\"text-gray-700 dark:text-white mt-4\" v-html=\"renderBib\" />\n      <div class=\"flex justify-end\">\n        <EpBtn @click=\"toggleBib\" size=\"small\" type=\"error\" outlined rounded>\n          {{ labelClose }}\n        </EpBtn>\n      </div>\n    </EpModal>\n  </div>\n</template>\n"],"names":["_createElementBlock","_unref","_openBlock","_createElementVNode","_createVNode","EpIcon","_normalizeClass","noModal","_toDisplayString","EpBtn","labelRef","EpModal","labelRefLib","labelClose"],"mappings":"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"}

package/dist/components/basics/EpStackedList.vue.js

@@ -1,5 +1,5 @@
 import { defineComponent, computed, createElementBlock, openBlock, normalizeClass, Fragment, renderList, createBlock, resolveDynamicComponent, mergeProps, withCtx, createElementVNode, createCommentVNode, toDisplayString, unref, createVNode } from "vue";
-import _sfc_main$1 from "./EpAvatar.vue.js";
+import _sfc_main$1 from "./EpAvatar.vue2.js";
 import _sfc_main$2 from "./EpIcon.vue.js";
 import { useRenderText } from "../../composables/useRenderText.js";
 import { roundedType } from "../../types/StackedList.js";
@@ -36,7 +36,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const elementSpacing = computed(() => props.restricted ? "p-3" : "mx-6 py-4");
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("ul", {
-        class: normalizeClass(`${className.value}  flex flex-col ep-surface-2 lg:mx-28`)
+        class: normalizeClass(`${className.value}  flex flex-col bg-surface-2 dark:bg-surface-2-dark lg:mx-28`)
       }, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.elements, (elem) => {
           return openBlock(), createElementBlock("li", {
@@ -50,7 +50,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ), {
               default: withCtx(() => [
                 createElementVNode("div", {
-                  class: normalizeClass(`${elementSpacing.value} ${elem.url ? "hover:bg-gray-200 dark:hover:bg-black" : ""} grid grid-cols-11 justify-items-center items-center ep-border-neutral`)
+                  class: normalizeClass(`${elementSpacing.value} ${elem.url ? "hover:bg-gray-200 dark:hover:bg-black" : ""} grid grid-cols-11 justify-items-center items-center border-neutral`)
                 }, [
                   elem.avatar ? (openBlock(), createBlock(_sfc_main$1, mergeProps({
                     key: 0,

package/dist/components/basics/EpStackedList.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"EpStackedList.vue.js","sources":["../../../src/components/basics/EpStackedList.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, defineAsyncComponent } from \"vue\";\nimport EpAvatar from \"~/components/basics/EpAvatar.vue\";\nimport EpIcon from \"~/components/basics/EpIcon.vue\";\nimport { useRenderText } from \"~/composables/useRenderText\";\n\n// Importing the necessary interfaces for the code\nimport { roundedType } from \"~/types/StackedList\";\nimport type { EpStackedListProps } from \"~/types/basics/EpStackedList\";\n\nconst props = withDefaults(defineProps<EpStackedListProps>(), {\n  elements: () => [],\n  avatarStyle: () => {\n    return {\n      size: \"middle\",\n    };\n  },\n  border: true,\n  rounded: \"small\",\n  restricted: false,\n  cropped: false,\n  iconSize: 36,\n});\n\n// The style of the wrapper div\nconst className = computed(() => {\n  const border = props.border === false ? \"border-0\" : \"border\";\n  const rounded = roundedType[props.rounded ? props.rounded : \"small\"];\n  const padding = props.restricted ? \"p-0\" : \"p-2\";\n  return `${border} ${rounded} ${padding}`;\n});\n\n// The style of the list elements\nconst elementSpacing = computed(() => (props.restricted ? \"p-3\" : \"mx-6 py-4\"));\n\nconst elementGrid = (element: Record<string, any> | undefined) => {\n  return element ? \"grid-cols-11\" : \"grid-cols-7\";\n};\n</script>\n\n<template>\n  <ul\n    :class=\"`${className}  flex flex-col ep-surface-2 lg:mx-28`\"\n  >\n    <template v-for=\"elem in elements\" :key=\"elements.indexOf(elem)\">\n      <li\n        :class=\"`${elements.indexOf(elem) !== 0 ? 'border-t' : ''} list-none`\"\n      >\n        <component\n          :is=\"elem.url ? 'a' : 'div'\"\n          v-bind=\"\n            elem.url\n              ? { href: elem.url, target: '_blank', rel: 'noopener noreferrer' }\n              : {}\n          \"\n          :class=\"`contents`\"\n        >\n          <div\n            :class=\"`${elementSpacing} ${\n              elem.url ? 'hover:bg-gray-200 dark:hover:bg-black' : ''\n            } grid grid-cols-11 justify-items-center items-center ep-border-neutral`\"\n          >\n            <EpAvatar\n              v-if=\"elem.avatar\"\n              :src=\"elem.avatar\"\n              v-bind=\"avatarStyle\"\n              class=\"col-span-2\"\n            />\n            <div class=\"col-span-5 justify-self-start\">\n              <h3 class=\"font-semibold\">{{ elem.title }}</h3>\n              <div\n                :class=\"`${cropped ? 'line-clamp-3' : ''}`\"\n                v-html=\"useRenderText(elem.description)\"\n              />\n            </div>\n            <!--element icon-->\n            <div\n              v-if=\"elem.icon\"\n              class=\"flex gap-2 items-center col-span-4 justify-self-auto\"\n            >\n              <EpIcon :icon-path=\"elem.icon\" :size=\"iconSize\" />\n            </div>\n          </div>\n        </component>\n      </li>\n    </template>\n  </ul>\n</template>\n"],"names":["_createElementBlock","_Fragment","_renderList","elements","_normalizeClass","_openBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_createElementVNode","EpAvatar","avatarStyle","_toDisplayString","cropped","_unref","_createVNode","EpIcon","iconSize"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,UAAM,QAAQ;AAed,UAAM,YAAY,SAAS,MAAM;AAC/B,YAAM,SAAS,MAAM,WAAW,QAAQ,aAAa;AACrD,YAAM,UAAU,YAAY,MAAM,UAAU,MAAM,UAAU,OAAO;AACnE,YAAM,UAAU,MAAM,aAAa,QAAQ;AAC3C,aAAO,GAAG,MAAM,IAAI,OAAO,IAAI,OAAO;AAAA,IACxC,CAAC;AAGD,UAAM,iBAAiB,SAAS,MAAO,MAAM,aAAa,QAAQ,WAAY;;0BAQ5EA,mBA6CK,MAAA;AAAA,QA5CF,yBAAU,UAAA,KAAS,uCAAA;AAAA,MAAA;0BAEpBA,mBAyCWC,UAAA,MAAAC,WAzCcC,KAAAA,UAAQ,CAAhB,SAAI;8BACnBH,mBAuCK,MAAA;AAAA,iBAxCkCG,KAAAA,SAAS,QAAQ,IAAI;AAAA,YAEzD,OAAKC,eAAA,GAAKD,KAAAA,SAAS,QAAQ,IAAI,MAAA,IAAA,aAAA,EAAA,YAAA;AAAA,UAAA;aAEhCE,UAAA,GAAAC,YAmCYC,wBAlCL,KAAK,oBADZC;AAAAA,cAmCY,EAAA,SAAA,KAAA;AAAA,cAjCW,KAAK,MAA4B,EAAA,MAAA,KAAK,KAAG,QAAA,UAAA,KAAA,sBAAA;cAK7D,EAAA,OAAO,WAAA;AAAA,YAAU,GAAA;AAAA,+BAElB,MAyBM;AAAA,gBAzBNC,mBAyBM,OAAA;AAAA,kBAxBH,yBAAU,eAAA,KAAc,IAAmB,KAAK,MAAG,0CAAA;;kBAK5C,KAAK,UADbJ,UAAA,GAAAC,YAKEI,aALFF,WAKE;AAAA;oBAHC,KAAK,KAAK;AAAA,kBAAA,sBACHG,KAAAA,aAAW,EACnB,OAAM,aAAA,CAAY,GAAA,MAAA,IAAA,CAAA,KAAA,CAAA;kBAEpBF,mBAMM,OANN,YAMM;AAAA,oBALJA,mBAA+C,MAA/C,YAA+CG,gBAAlB,KAAK,KAAK,GAAA,CAAA;AAAA,oBACvCH,mBAGE,OAAA;AAAA,sBAFC,yBAAUI,KAAAA,UAAO,iBAAA,EAAA,EAAA;AAAA,sBAClB,WAAQC,MAAA,aAAA,EAAc,KAAK,WAAW;AAAA,oBAAA;;kBAKlC,KAAK,QADbT,UAAA,GAAAL,mBAKM,OALN,YAKM;AAAA,oBADJe,YAAkDC,aAAA;AAAA,sBAAzC,aAAW,KAAK;AAAA,sBAAO,MAAMC,KAAAA;AAAAA,oBAAAA;;;;;;;;;;;;"}
+{"version":3,"file":"EpStackedList.vue.js","sources":["../../../src/components/basics/EpStackedList.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, defineAsyncComponent } from \"vue\";\nimport EpAvatar from \"~/components/basics/EpAvatar.vue\";\nimport EpIcon from \"~/components/basics/EpIcon.vue\";\nimport { useRenderText } from \"~/composables/useRenderText\";\n\n// Importing the necessary interfaces for the code\nimport { roundedType } from \"~/types/StackedList\";\nimport type { EpStackedListProps } from \"~/types/basics/EpStackedList\";\n\nconst props = withDefaults(defineProps<EpStackedListProps>(), {\n  elements: () => [],\n  avatarStyle: () => {\n    return {\n      size: \"middle\",\n    };\n  },\n  border: true,\n  rounded: \"small\",\n  restricted: false,\n  cropped: false,\n  iconSize: 36,\n});\n\n// The style of the wrapper div\nconst className = computed(() => {\n  const border = props.border === false ? \"border-0\" : \"border\";\n  const rounded = roundedType[props.rounded ? props.rounded : \"small\"];\n  const padding = props.restricted ? \"p-0\" : \"p-2\";\n  return `${border} ${rounded} ${padding}`;\n});\n\n// The style of the list elements\nconst elementSpacing = computed(() => (props.restricted ? \"p-3\" : \"mx-6 py-4\"));\n\nconst elementGrid = (element: Record<string, any> | undefined) => {\n  return element ? \"grid-cols-11\" : \"grid-cols-7\";\n};\n</script>\n\n<template>\n  <ul\n    :class=\"`${className}  flex flex-col bg-surface-2 dark:bg-surface-2-dark lg:mx-28`\"\n  >\n    <template v-for=\"elem in elements\" :key=\"elements.indexOf(elem)\">\n      <li\n        :class=\"`${elements.indexOf(elem) !== 0 ? 'border-t' : ''} list-none`\"\n      >\n        <component\n          :is=\"elem.url ? 'a' : 'div'\"\n          v-bind=\"\n            elem.url\n              ? { href: elem.url, target: '_blank', rel: 'noopener noreferrer' }\n              : {}\n          \"\n          :class=\"`contents`\"\n        >\n          <div\n            :class=\"`${elementSpacing} ${\n              elem.url ? 'hover:bg-gray-200 dark:hover:bg-black' : ''\n            } grid grid-cols-11 justify-items-center items-center border-neutral`\"\n          >\n            <EpAvatar\n              v-if=\"elem.avatar\"\n              :src=\"elem.avatar\"\n              v-bind=\"avatarStyle\"\n              class=\"col-span-2\"\n            />\n            <div class=\"col-span-5 justify-self-start\">\n              <h3 class=\"font-semibold\">{{ elem.title }}</h3>\n              <div\n                :class=\"`${cropped ? 'line-clamp-3' : ''}`\"\n                v-html=\"useRenderText(elem.description)\"\n              />\n            </div>\n            <!--element icon-->\n            <div\n              v-if=\"elem.icon\"\n              class=\"flex gap-2 items-center col-span-4 justify-self-auto\"\n            >\n              <EpIcon :icon-path=\"elem.icon\" :size=\"iconSize\" />\n            </div>\n          </div>\n        </component>\n      </li>\n    </template>\n  </ul>\n</template>\n"],"names":["_createElementBlock","_Fragment","_renderList","elements","_normalizeClass","_openBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_createElementVNode","EpAvatar","avatarStyle","_toDisplayString","cropped","_unref","_createVNode","EpIcon","iconSize"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,UAAM,QAAQ;AAed,UAAM,YAAY,SAAS,MAAM;AAC/B,YAAM,SAAS,MAAM,WAAW,QAAQ,aAAa;AACrD,YAAM,UAAU,YAAY,MAAM,UAAU,MAAM,UAAU,OAAO;AACnE,YAAM,UAAU,MAAM,aAAa,QAAQ;AAC3C,aAAO,GAAG,MAAM,IAAI,OAAO,IAAI,OAAO;AAAA,IACxC,CAAC;AAGD,UAAM,iBAAiB,SAAS,MAAO,MAAM,aAAa,QAAQ,WAAY;;0BAQ5EA,mBA6CK,MAAA;AAAA,QA5CF,yBAAU,UAAA,KAAS,8DAAA;AAAA,MAAA;0BAEpBA,mBAyCWC,UAAA,MAAAC,WAzCcC,KAAAA,UAAQ,CAAhB,SAAI;8BACnBH,mBAuCK,MAAA;AAAA,iBAxCkCG,KAAAA,SAAS,QAAQ,IAAI;AAAA,YAEzD,OAAKC,eAAA,GAAKD,KAAAA,SAAS,QAAQ,IAAI,MAAA,IAAA,aAAA,EAAA,YAAA;AAAA,UAAA;aAEhCE,UAAA,GAAAC,YAmCYC,wBAlCL,KAAK,oBADZC;AAAAA,cAmCY,EAAA,SAAA,KAAA;AAAA,cAjCW,KAAK,MAA4B,EAAA,MAAA,KAAK,KAAG,QAAA,UAAA,KAAA,sBAAA;cAK7D,EAAA,OAAO,WAAA;AAAA,YAAU,GAAA;AAAA,+BAElB,MAyBM;AAAA,gBAzBNC,mBAyBM,OAAA;AAAA,kBAxBH,yBAAU,eAAA,KAAc,IAAmB,KAAK,MAAG,0CAAA;;kBAK5C,KAAK,UADbJ,UAAA,GAAAC,YAKEI,aALFF,WAKE;AAAA;oBAHC,KAAK,KAAK;AAAA,kBAAA,sBACHG,KAAAA,aAAW,EACnB,OAAM,aAAA,CAAY,GAAA,MAAA,IAAA,CAAA,KAAA,CAAA;kBAEpBF,mBAMM,OANN,YAMM;AAAA,oBALJA,mBAA+C,MAA/C,YAA+CG,gBAAlB,KAAK,KAAK,GAAA,CAAA;AAAA,oBACvCH,mBAGE,OAAA;AAAA,sBAFC,yBAAUI,KAAAA,UAAO,iBAAA,EAAA,EAAA;AAAA,sBAClB,WAAQC,MAAA,aAAA,EAAc,KAAK,WAAW;AAAA,oBAAA;;kBAKlC,KAAK,QADbT,UAAA,GAAAL,mBAKM,OALN,YAKM;AAAA,oBADJe,YAAkDC,aAAA;AAAA,sBAAzC,aAAW,KAAK;AAAA,sBAAO,MAAMC,KAAAA;AAAAA,oBAAAA;;;;;;;;;;;;"}

package/dist/components/basics/EpTable.vue.js

@@ -3,7 +3,7 @@ import _sfc_main$1 from "./EpCard.vue.js";
 const _hoisted_1 = { class: "min-w-full divide-y shadow" };
 const _hoisted_2 = {
   key: 0,
-  class: "ep-surface"
+  class: "bg-surface dark:bg-surface-dark"
 };
 const _hoisted_3 = { class: "divide-y" };
 const styleTh = "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-white";

package/dist/components/basics/EpTable.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"EpTable.vue.js","sources":["../../../src/components/basics/EpTable.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { toRefs } from \"vue\";\nimport EpCard from \"../basics/EpCard.vue\";\nimport type { EpTableProps } from \"~/types/basics/EpTable\";\n\nconst props = defineProps<EpTableProps>();\n\nconst { headers, arrayContent, title } = toRefs(props);\n\nconst styleTh =\n  \"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-white\";\n</script>\n<template>\n  <EpCard flat :title=\"title\">\n    <table class=\"min-w-full divide-y shadow\">\n      <thead class=\"ep-surface\" v-if=\"headers\">\n        <tr>\n          <th\n            v-for=\"(title, i) in headers\"\n            :key=\"`th-${i}`\"\n            scope=\"col\"\n            :class=\"styleTh\"\n          >\n            {{ title }}\n          </th>\n        </tr>\n      </thead>\n      <tbody class=\"divide-y\">\n        <tr\n          v-for=\"(tr, i) in arrayContent\"\n          :key=\"`tr-${i}`\"\n          class=\"hover:bg-gray-200 dark:hover:bg-black\"\n        >\n          <td v-for=\"(value, j) in tr\" :key=\"`td-${i}-${j}`\" class=\"px-6 py-4\">\n            {{ value }}\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </EpCard>\n</template>\n"],"names":["_createBlock","EpCard","_unref","_createElementVNode","_openBlock","_createElementBlock","_Fragment","_renderList","title"],"mappings":";;;;;;;;AASA,MAAM,UACJ;;;;;;;;;AALF,UAAM,QAAQ;AAEd,UAAM,EAAE,SAAS,cAAc,MAAA,IAAU,OAAO,KAAK;;0BAMnDA,YA0BSC,aAAA;AAAA,QA1BD,MAAA;AAAA,QAAM,OAAOC,MAAA,KAAA;AAAA,MAAA;yBACnB,MAwBQ;AAAA,UAxBRC,mBAwBQ,SAxBR,YAwBQ;AAAA,YAvB0BD,MAAA,OAAA,KAAhCE,aAAAC,mBAWQ,SAXR,YAWQ;AAAA,cAVNF,mBASK,MAAA,MAAA;AAAA,iBARHC,UAAA,IAAA,GAAAC,mBAOKC,UAAA,MAAAC,WANkBL,MAAA,OAAA,GAAO,CAApBM,QAAO,MAAC;sCADlBH,mBAOK,MAAA;AAAA,oBALF,WAAW,CAAC;AAAA,oBACb,OAAM;AAAA,oBACL,sBAAO,OAAO;AAAA,kBAAA,mBAEZG,MAAK,GAAA,CAAA;AAAA;;;YAIdL,mBAUQ,SAVR,YAUQ;AAAA,eATNC,UAAA,IAAA,GAAAC,mBAQKC,UAAA,MAAAC,WAPeL,MAAA,YAAA,GAAY,CAAtB,IAAI,MAAC;oCADfG,mBAQK,MAAA;AAAA,kBANF,WAAW,CAAC;AAAA,kBACb,OAAM;AAAA,gBAAA;mBAEND,UAAA,IAAA,GAAAC,mBAEKC,UAAA,MAAAC,WAFoB,IAAE,CAAf,OAAO,MAAC;wCAApBF,mBAEK,MAAA;AAAA,sBAFyB,KAAG,MAAQ,CAAC,IAAI,CAAC;AAAA,sBAAI,OAAM;AAAA,oBAAA,mBACpD,KAAK,GAAA,CAAA;AAAA;;;;;;;;;;;"}
+{"version":3,"file":"EpTable.vue.js","sources":["../../../src/components/basics/EpTable.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { toRefs } from \"vue\";\nimport EpCard from \"../basics/EpCard.vue\";\nimport type { EpTableProps } from \"~/types/basics/EpTable\";\n\nconst props = defineProps<EpTableProps>();\n\nconst { headers, arrayContent, title } = toRefs(props);\n\nconst styleTh =\n  \"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-white\";\n</script>\n<template>\n  <EpCard flat :title=\"title\">\n    <table class=\"min-w-full divide-y shadow\">\n      <thead class=\"bg-surface dark:bg-surface-dark\" v-if=\"headers\">\n        <tr>\n          <th\n            v-for=\"(title, i) in headers\"\n            :key=\"`th-${i}`\"\n            scope=\"col\"\n            :class=\"styleTh\"\n          >\n            {{ title }}\n          </th>\n        </tr>\n      </thead>\n      <tbody class=\"divide-y\">\n        <tr\n          v-for=\"(tr, i) in arrayContent\"\n          :key=\"`tr-${i}`\"\n          class=\"hover:bg-gray-200 dark:hover:bg-black\"\n        >\n          <td v-for=\"(value, j) in tr\" :key=\"`td-${i}-${j}`\" class=\"px-6 py-4\">\n            {{ value }}\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </EpCard>\n</template>\n"],"names":["_createBlock","EpCard","_unref","_createElementVNode","_openBlock","_createElementBlock","_Fragment","_renderList","title"],"mappings":";;;;;;;;AASA,MAAM,UACJ;;;;;;;;;AALF,UAAM,QAAQ;AAEd,UAAM,EAAE,SAAS,cAAc,MAAA,IAAU,OAAO,KAAK;;0BAMnDA,YA0BSC,aAAA;AAAA,QA1BD,MAAA;AAAA,QAAM,OAAOC,MAAA,KAAA;AAAA,MAAA;yBACnB,MAwBQ;AAAA,UAxBRC,mBAwBQ,SAxBR,YAwBQ;AAAA,YAvB+CD,MAAA,OAAA,KAArDE,aAAAC,mBAWQ,SAXR,YAWQ;AAAA,cAVNF,mBASK,MAAA,MAAA;AAAA,iBARHC,UAAA,IAAA,GAAAC,mBAOKC,UAAA,MAAAC,WANkBL,MAAA,OAAA,GAAO,CAApBM,QAAO,MAAC;sCADlBH,mBAOK,MAAA;AAAA,oBALF,WAAW,CAAC;AAAA,oBACb,OAAM;AAAA,oBACL,sBAAO,OAAO;AAAA,kBAAA,mBAEZG,MAAK,GAAA,CAAA;AAAA;;;YAIdL,mBAUQ,SAVR,YAUQ;AAAA,eATNC,UAAA,IAAA,GAAAC,mBAQKC,UAAA,MAAAC,WAPeL,MAAA,YAAA,GAAY,CAAtB,IAAI,MAAC;oCADfG,mBAQK,MAAA;AAAA,kBANF,WAAW,CAAC;AAAA,kBACb,OAAM;AAAA,gBAAA;mBAEND,UAAA,IAAA,GAAAC,mBAEKC,UAAA,MAAAC,WAFoB,IAAE,CAAf,OAAO,MAAC;wCAApBF,mBAEK,MAAA;AAAA,sBAFyB,KAAG,MAAQ,CAAC,IAAI,CAAC;AAAA,sBAAI,OAAM;AAAA,oBAAA,mBACpD,KAAK,GAAA,CAAA;AAAA;;;;;;;;;;;"}

package/dist/components/educationals/EpBranchingScenario.vue.js

@@ -1,7 +1,7 @@
 import _sfc_main from "./EpBranchingScenario.vue2.js";
 /* empty css                         */
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
-const Comp = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c85132a3"]]);
+const Comp = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-352aec5b"]]);
 export {
   Comp as default
 };

package/dist/components/educationals/EpBranchingScenario.vue2.js

@@ -1,13 +1,13 @@
 import { defineComponent, ref, computed, createElementBlock, openBlock, createElementVNode, normalizeStyle, createCommentVNode, toDisplayString, createVNode, withCtx, unref, normalizeClass, createTextVNode, Fragment, renderList, createBlock } from "vue";
 import { useRenderText } from "../../composables/useRenderText.js";
 import _sfc_main$2 from "../basics/EpIcon.vue.js";
-import _sfc_main$4 from "../tools/Details.vue.js";
+import _sfc_main$4 from "../tools/Details.vue2.js";
 import _sfc_main$5 from "../interactions/EpModal.vue.js";
 /* empty css                           */
 import Comp from "../medias/EpHierarchy.vue.js";
 import _sfc_main$1 from "../basics/EpBtn.vue.js";
 import { mdiArrowLeft } from "@mdi/js";
-import _sfc_main$3 from "../tools/TextMedia.vue.js";
+import _sfc_main$3 from "../tools/TextMedia.vue2.js";
 const _hoisted_1 = { class: "mb-2" };
 const _hoisted_2 = { class: "font-bold text-3xl text-center" };
 const _hoisted_3 = {
@@ -126,7 +126,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       var _a, _b;
       return openBlock(), createElementBlock("div", null, [
         createElementVNode("div", {
-          class: "ep-surface-2 rounded-md p-4 flex flex-col",
+          class: "bg-surface-2 dark:bg-surface-2-dark rounded-md p-4 flex flex-col",
           style: normalizeStyle({ minHeight: "500px", backgroundColor: _ctx.bgColor })
         }, [
           createElementVNode("div", _hoisted_1, [

package/dist/components/educationals/EpBranchingScenario.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"EpBranchingScenario.vue2.js","sources":["../../../src/components/educationals/EpBranchingScenario.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed } from \"vue\";\nimport { useRenderText } from \"~/composables/useRenderText\";\nimport type { TreeNode } from \"~/types/Hierarchy\";\nimport EpIcon from \"~/components/basics/EpIcon.vue\";\nimport Details from \"~/components/tools/Details.vue\";\nimport EpModal from \"~/components/interactions/EpModal.vue\";\nimport EpHierarchy from \"~/components/medias/EpHierarchy.vue\";\nimport EpBtn from \"../basics/EpBtn.vue\";\nimport { mdiArrowLeft } from \"@mdi/js\";\nimport TextMedia from \"~/components/tools/TextMedia.vue\";\nimport type { EpBranchingScenarioProps } from \"~/types/educationals/EpBranchingScenario\";\n\nconst props = withDefaults(defineProps<EpBranchingScenarioProps>(), {\n  initialInstruction: null,\n  transitionAnimation: \"fade\",\n  labelFinish: \"Vous avez terminé le scénario!\",\n  labelYourPath: \"Votre parcours\",\n  labelShowFullPath: \"Voir le parcours au complet\",\n  labelClose: \"Fermer\",\n  labelRestart: \"Recommencer\",\n  labelStart: \"Commencer\",\n  colorRect: \"fill-main-color-400\",\n  colorPath: \"stroke-yellow-400\",\n});\n\nconst showPath = ref(false);\nconst path = ref<TreeNode[]>([]);\nconst userPath = ref<TreeNode | null>(null);\nconst currentOption = ref<TreeNode | null>(null);\n\n// Manage the introductory part\nconst isIntroductoryPart = ref(true);\n\nconst start = () => {\n  isIntroductoryPart.value = false;\n  currentOption.value = props.decisionTree;\n};\n\nconst styleIntro = computed(() => {\n  const noInstruction = !props.initialInstruction;\n  const noMedia = !props.media;\n\n  if (noInstruction && noMedia) {\n    return \"pt-44\";\n  }\n\n  return \"\";\n});\n\n// Return function\nconst goToPrevious = () => {\n  //if(notTheEnd.value){\n  if (path.value.length === 0) {\n    isIntroductoryPart.value = true;\n    currentOption.value = null;\n    return;\n  }\n\n  path.value.pop();\n  // Get the previous option in the path\n  const lastOption = path.value[path.value.length - 1];\n\n  if (lastOption) {\n    currentOption.value = lastOption;\n  } else {\n    currentOption.value = props.decisionTree;\n  }\n};\n\n// Restart function\nconst restart = () => {\n  //currentSlide.value = 0;\n  currentOption.value = null;\n  isIntroductoryPart.value = true;\n  path.value = [];\n};\n\nconst nextSlide = (option: TreeNode) => {\n  //currentSlide.value++\n  path.value.push(option);\n  if (option.children && option.children.length > 0) {\n    currentOption.value = option; // drill into next level\n  } else {\n    currentOption.value = null; // reached the end (leaf node)\n    userPath.value = convertOptionToTreeNode(props.decisionTree, path.value);\n  }\n};\n\n//helper function\nfunction convertOptionToTreeNode(option: TreeNode, path: TreeNode[]): TreeNode {\n  const isActive = path.includes(option);\n  return {\n    name: option.name,\n    text: option.text,\n    component: option.component,\n    active: isActive,\n    children: option.children?.map((child) =>\n      convertOptionToTreeNode(child, path)\n    ),\n  };\n}\n</script>\n\n<template>\n  <div>\n    <div\n      class=\"ep-surface-2 rounded-md p-4 flex flex-col\"\n      :style=\"{ minHeight: '500px', backgroundColor: bgColor }\"\n    >\n      <!-- <div v-for=\"item in path\" :key=\"item.name\">\n        <span class=\"text-xs\">{{ item.name }}</span>\n      </div> -->\n      <!-- Header (fixed at top of card) -->\n      <div class=\"mb-2\">\n        <h1 class=\"font-bold text-3xl text-center\">{{ title }}</h1>\n        <div v-if=\"currentOption\" class=\"mt-2\">\n          <EpBtn\n            type=\"primary\"\n            rounded\n            size=\"small\"\n            :extra-class=\"`${transitionAnimation}`\"\n            @click=\"goToPrevious\"\n          >\n            <EpIcon :icon-path=\"mdiArrowLeft\" size=\"25\" />\n          </EpBtn>\n        </div>\n      </div>\n\n      <!-- Content Area -->\n      <div>\n        <!-- Introductory Part -->\n        <div v-if=\"isIntroductoryPart\" class=\"w-full flex flex-col space-y-6\">\n          <TextMedia\n            :text=\"initialInstruction ?? ''\"\n            :media=\"media\"\n            :cols=\"initialTwoCols\"\n          />\n          <div :class=\"`justify-center flex ${styleIntro}`\">\n            <EpBtn type=\"primary\" rounded @click=\"start\">{{\n              labelStart\n            }}</EpBtn>\n          </div>\n        </div>\n\n        <!-- Slides -->\n        <template v-else-if=\"currentOption && !isIntroductoryPart\">\n          <div class=\"w-full\">\n            <div :class=\"`${transitionAnimation} my-12`\">\n              <TextMedia\n                :text=\"currentOption.text ?? ''\"\n                :media=\"currentOption.component\"\n                :cols=\"currentOption.cols\"\n              />\n\n              <div\n                :class=\"`w-full my-4 mx-4 flex flex-wrap gap-2 justify-center items-center`\"\n              >\n                <template\n                  v-for=\"(option, index) in currentOption.children\"\n                  :key=\"`option-${index}`\"\n                >\n                  <EpBtn\n                    rounded\n                    type=\"primary\"\n                    class=\"flex-1 min-w-[120px] sm:min-w-[160px] max-w-xs\"\n                    @click=\"nextSlide(option)\"\n                  >\n                    {{ option.name }}\n                  </EpBtn>\n                </template>\n              </div>\n            </div>\n          </div>\n        </template>\n\n        <!--show path-->\n        <div v-else>\n          <!-- <template v-if=\"userPath\">\n                <EpHierarchy :nodes=\"userPath\"/>\n            </template> -->\n          <h3 class=\"text-xl text-center font-semibold\">{{ labelFinish }}</h3>\n          <div\n            :class=\"`flex gap-6 mt-3 ${\n              !generalFeedback ? 'w-3/6 mx-auto' : ''\n            }`\"\n          >\n            <div class=\"w-full\">\n              <h3 class=\"font-semibold mb-3\">{{ labelYourPath }}</h3>\n              <div class=\"overflow-auto p-2\" :style=\"{ height: '200px' }\">\n                <template v-for=\"(item, i) in path\" :key=\"`user-choice-${i}`\">\n                  <div class=\"mb-2\">\n                    <Details\n                      :content=\"item.text ?? ''\"\n                      :title=\"item.name\"\n                      :media=\"item.component\"\n                    />\n                  </div>\n                </template>\n              </div>\n              <div class=\"flex justify-center mt-2\">\n                <EpBtn type=\"info\" rounded @click=\"showPath = true\">{{\n                  labelShowFullPath\n                }}</EpBtn>\n              </div>\n              <EpModal v-if=\"userPath\" v-model=\"showPath\">\n                <EpHierarchy\n                  :nodes=\"userPath\"\n                  :is-cluster=\"props.isCluster\"\n                  :color-path=\"props.colorPath\"\n                  :color-rect=\"props.colorRect\"\n                />\n                <div class=\"flex justify-end mt-4\">\n                  <EpBtn\n                    @click=\"showPath = false\"\n                    type=\"error\"\n                    outlined\n                    rounded\n                    >{{ labelClose }}</EpBtn\n                  >\n                </div>\n              </EpModal>\n            </div>\n            <div\n              v-if=\"generalFeedback\"\n              class=\"flex w-full flex-col col-span-1 items-center px-4 border-l-2 border-gray-700 overflow-auto\"\n            >\n              <div v-html=\"useRenderText(generalFeedback)\" />\n            </div>\n          </div>\n\n          <div class=\"flex justify-center mt-2\">\n            <EpBtn rounded type=\"warning\" @click=\"restart\">{{\n              labelRestart\n            }}</EpBtn>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n@keyframes fade {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n@keyframes scale {\n  0% {\n    transform: scale(0.5);\n    opacity: 0;\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n\n@keyframes slideY {\n  0% {\n    transform: translateY(-100%);\n    opacity: 0;\n  }\n  100% {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n\n/* Transition animation */\n.fade {\n  animation: fade 1s;\n}\n\n.scale {\n  animation: scale 1s;\n}\n\n.slideY {\n  animation: slideY 1s;\n}\n</style>\n"],"names":["path","_createElementBlock","_createElementVNode","bgColor","_toDisplayString","title","_openBlock","_createVNode","EpBtn","transitionAnimation","EpIcon","_unref","TextMedia","initialInstruction","media","initialTwoCols","labelStart","_Fragment","_createBlock","_createTextVNode","labelFinish","_normalizeClass","generalFeedback","labelYourPath","_renderList","Details","_a","labelShowFullPath","EpModal","EpHierarchy","labelClose","labelRestart"],"mappings":"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"}
+{"version":3,"file":"EpBranchingScenario.vue2.js","sources":["../../../src/components/educationals/EpBranchingScenario.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed } from \"vue\";\nimport { useRenderText } from \"~/composables/useRenderText\";\nimport type { TreeNode } from \"~/types/Hierarchy\";\nimport EpIcon from \"~/components/basics/EpIcon.vue\";\nimport Details from \"~/components/tools/Details.vue\";\nimport EpModal from \"~/components/interactions/EpModal.vue\";\nimport EpHierarchy from \"~/components/medias/EpHierarchy.vue\";\nimport EpBtn from \"../basics/EpBtn.vue\";\nimport { mdiArrowLeft } from \"@mdi/js\";\nimport TextMedia from \"~/components/tools/TextMedia.vue\";\nimport type { EpBranchingScenarioProps } from \"~/types/educationals/EpBranchingScenario\";\n\nconst props = withDefaults(defineProps<EpBranchingScenarioProps>(), {\n  initialInstruction: null,\n  transitionAnimation: \"fade\",\n  labelFinish: \"Vous avez terminé le scénario!\",\n  labelYourPath: \"Votre parcours\",\n  labelShowFullPath: \"Voir le parcours au complet\",\n  labelClose: \"Fermer\",\n  labelRestart: \"Recommencer\",\n  labelStart: \"Commencer\",\n  colorRect: \"fill-main-color-400\",\n  colorPath: \"stroke-yellow-400\",\n});\n\nconst showPath = ref(false);\nconst path = ref<TreeNode[]>([]);\nconst userPath = ref<TreeNode | null>(null);\nconst currentOption = ref<TreeNode | null>(null);\n\n// Manage the introductory part\nconst isIntroductoryPart = ref(true);\n\nconst start = () => {\n  isIntroductoryPart.value = false;\n  currentOption.value = props.decisionTree;\n};\n\nconst styleIntro = computed(() => {\n  const noInstruction = !props.initialInstruction;\n  const noMedia = !props.media;\n\n  if (noInstruction && noMedia) {\n    return \"pt-44\";\n  }\n\n  return \"\";\n});\n\n// Return function\nconst goToPrevious = () => {\n  //if(notTheEnd.value){\n  if (path.value.length === 0) {\n    isIntroductoryPart.value = true;\n    currentOption.value = null;\n    return;\n  }\n\n  path.value.pop();\n  // Get the previous option in the path\n  const lastOption = path.value[path.value.length - 1];\n\n  if (lastOption) {\n    currentOption.value = lastOption;\n  } else {\n    currentOption.value = props.decisionTree;\n  }\n};\n\n// Restart function\nconst restart = () => {\n  //currentSlide.value = 0;\n  currentOption.value = null;\n  isIntroductoryPart.value = true;\n  path.value = [];\n};\n\nconst nextSlide = (option: TreeNode) => {\n  //currentSlide.value++\n  path.value.push(option);\n  if (option.children && option.children.length > 0) {\n    currentOption.value = option; // drill into next level\n  } else {\n    currentOption.value = null; // reached the end (leaf node)\n    userPath.value = convertOptionToTreeNode(props.decisionTree, path.value);\n  }\n};\n\n//helper function\nfunction convertOptionToTreeNode(option: TreeNode, path: TreeNode[]): TreeNode {\n  const isActive = path.includes(option);\n  return {\n    name: option.name,\n    text: option.text,\n    component: option.component,\n    active: isActive,\n    children: option.children?.map((child) =>\n      convertOptionToTreeNode(child, path)\n    ),\n  };\n}\n</script>\n\n<template>\n  <div>\n    <div\n      class=\"bg-surface-2 dark:bg-surface-2-dark rounded-md p-4 flex flex-col\"\n      :style=\"{ minHeight: '500px', backgroundColor: bgColor }\"\n    >\n      <!-- <div v-for=\"item in path\" :key=\"item.name\">\n        <span class=\"text-xs\">{{ item.name }}</span>\n      </div> -->\n      <!-- Header (fixed at top of card) -->\n      <div class=\"mb-2\">\n        <h1 class=\"font-bold text-3xl text-center\">{{ title }}</h1>\n        <div v-if=\"currentOption\" class=\"mt-2\">\n          <EpBtn\n            type=\"primary\"\n            rounded\n            size=\"small\"\n            :extra-class=\"`${transitionAnimation}`\"\n            @click=\"goToPrevious\"\n          >\n            <EpIcon :icon-path=\"mdiArrowLeft\" size=\"25\" />\n          </EpBtn>\n        </div>\n      </div>\n\n      <!-- Content Area -->\n      <div>\n        <!-- Introductory Part -->\n        <div v-if=\"isIntroductoryPart\" class=\"w-full flex flex-col space-y-6\">\n          <TextMedia\n            :text=\"initialInstruction ?? ''\"\n            :media=\"media\"\n            :cols=\"initialTwoCols\"\n          />\n          <div :class=\"`justify-center flex ${styleIntro}`\">\n            <EpBtn type=\"primary\" rounded @click=\"start\">{{\n              labelStart\n            }}</EpBtn>\n          </div>\n        </div>\n\n        <!-- Slides -->\n        <template v-else-if=\"currentOption && !isIntroductoryPart\">\n          <div class=\"w-full\">\n            <div :class=\"`${transitionAnimation} my-12`\">\n              <TextMedia\n                :text=\"currentOption.text ?? ''\"\n                :media=\"currentOption.component\"\n                :cols=\"currentOption.cols\"\n              />\n\n              <div\n                :class=\"`w-full my-4 mx-4 flex flex-wrap gap-2 justify-center items-center`\"\n              >\n                <template\n                  v-for=\"(option, index) in currentOption.children\"\n                  :key=\"`option-${index}`\"\n                >\n                  <EpBtn\n                    rounded\n                    type=\"primary\"\n                    class=\"flex-1 min-w-[120px] sm:min-w-[160px] max-w-xs\"\n                    @click=\"nextSlide(option)\"\n                  >\n                    {{ option.name }}\n                  </EpBtn>\n                </template>\n              </div>\n            </div>\n          </div>\n        </template>\n\n        <!--show path-->\n        <div v-else>\n          <!-- <template v-if=\"userPath\">\n                <EpHierarchy :nodes=\"userPath\"/>\n            </template> -->\n          <h3 class=\"text-xl text-center font-semibold\">{{ labelFinish }}</h3>\n          <div\n            :class=\"`flex gap-6 mt-3 ${\n              !generalFeedback ? 'w-3/6 mx-auto' : ''\n            }`\"\n          >\n            <div class=\"w-full\">\n              <h3 class=\"font-semibold mb-3\">{{ labelYourPath }}</h3>\n              <div class=\"overflow-auto p-2\" :style=\"{ height: '200px' }\">\n                <template v-for=\"(item, i) in path\" :key=\"`user-choice-${i}`\">\n                  <div class=\"mb-2\">\n                    <Details\n                      :content=\"item.text ?? ''\"\n                      :title=\"item.name\"\n                      :media=\"item.component\"\n                    />\n                  </div>\n                </template>\n              </div>\n              <div class=\"flex justify-center mt-2\">\n                <EpBtn type=\"info\" rounded @click=\"showPath = true\">{{\n                  labelShowFullPath\n                }}</EpBtn>\n              </div>\n              <EpModal v-if=\"userPath\" v-model=\"showPath\">\n                <EpHierarchy\n                  :nodes=\"userPath\"\n                  :is-cluster=\"props.isCluster\"\n                  :color-path=\"props.colorPath\"\n                  :color-rect=\"props.colorRect\"\n                />\n                <div class=\"flex justify-end mt-4\">\n                  <EpBtn\n                    @click=\"showPath = false\"\n                    type=\"error\"\n                    outlined\n                    rounded\n                    >{{ labelClose }}</EpBtn\n                  >\n                </div>\n              </EpModal>\n            </div>\n            <div\n              v-if=\"generalFeedback\"\n              class=\"flex w-full flex-col col-span-1 items-center px-4 border-l-2 border-gray-700 overflow-auto\"\n            >\n              <div v-html=\"useRenderText(generalFeedback)\" />\n            </div>\n          </div>\n\n          <div class=\"flex justify-center mt-2\">\n            <EpBtn rounded type=\"warning\" @click=\"restart\">{{\n              labelRestart\n            }}</EpBtn>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n@keyframes fade {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n@keyframes scale {\n  0% {\n    transform: scale(0.5);\n    opacity: 0;\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n\n@keyframes slideY {\n  0% {\n    transform: translateY(-100%);\n    opacity: 0;\n  }\n  100% {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n\n/* Transition animation */\n.fade {\n  animation: fade 1s;\n}\n\n.scale {\n  animation: scale 1s;\n}\n\n.slideY {\n  animation: slideY 1s;\n}\n</style>\n"],"names":["path","_createElementBlock","_createElementVNode","bgColor","_toDisplayString","title","_openBlock","_createVNode","EpBtn","transitionAnimation","EpIcon","_unref","TextMedia","initialInstruction","media","initialTwoCols","labelStart","_Fragment","_createBlock","_createTextVNode","labelFinish","_normalizeClass","generalFeedback","labelYourPath","_renderList","Details","_a","labelShowFullPath","EpModal","EpHierarchy","labelClose","labelRestart"],"mappings":"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"}

package/dist/components/educationals/EpEdu.vue.js

@@ -71,7 +71,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return `flex flex-col justify-between`;
     });
     const bgColor = computed(() => {
-      return props.card ? "ep-surface-2" : "ep-surface";
+      return props.card ? "bg-surface-2 dark:bg-surface-2-dark" : "bg-surface dark:bg-surface-dark";
     });
     const { title, hideIcon } = toRefs(props);
     return (_ctx, _cache) => {

package/dist/components/educationals/EpEdu.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"EpEdu.vue.js","sources":["../../../src/components/educationals/EpEdu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { toRefs, computed, useSlots, type SetupContext } from \"vue\";\nimport { mediaVariants } from \"~/types/Medias\";\nimport EpIcon from \"~/components/basics/EpIcon.vue\";\nimport EpDivider from \"~/components/basics/EpDivider.vue\";\nimport EpScope from \"~/components/educationals/EpScope.vue\";\nimport { mdiLeadPencil } from \"@mdi/js\";\nimport type { EpEduProps } from \"~/types/educationals/EpEdu\";\n\nconst props = withDefaults(defineProps<EpEduProps>(), {\n  title: null,\n  type: \"neutral\",\n  hideIcon: false,\n  flat: true,\n  labelIntentions: \"\",\n  card: false\n});\n\n//get slots\nconst slots: SetupContext[\"slots\"] = useSlots();\n\nconst hasIntentions = computed(() => {\n  return slots.intentions ? true : false;\n});\n\nconst hasActions = computed(() => {\n  return slots.actions ? true : false;\n});\n\nconst renderIcon = computed(() => {\n  if (props.icon) {\n    return props.icon;\n  }\n  return mdiLeadPencil;\n});\n\nconst topBarStyle = computed(() => {\n  return `${mediaVariants[props.type]} text-left  ${\n    props.flat ? \"\" : \"rounded-t-md\"\n  } flex justify-between items-center `;\n});\n\nconst bottomBarStyle = computed(() => {\n  return `${mediaVariants[props.type]} text-right`;\n});\n\nconst paddingTopStyle = computed(() => {\n  if (props.type != \"neutral\") {\n    return `px-5 py-2`;\n  }\n});\n\nconst paddingBottomStyle = computed(() => {\n  if (props.type != \"neutral\") {\n    return `pr-5`;\n  }\n});\nconst boxPaddingStyle = computed(() => {\n  if (props.type != \"neutral\") {\n    return `px-5`;\n  }\n});\n\nconst containerStyle = computed(() => {\n  if (hasActions.value || hasIntentions.value || props.title) {\n    return ` overflow-hidden ${\n      props.flat ? \"\" : \"shadow-md\"\n    } flex flex-col justify-start h-full`;\n  }\n  return `flex flex-col justify-between`;\n});\n\n\nconst bgColor = computed(()=> {\n   return props.card ? 'ep-surface-2' : 'ep-surface'\n})\n\n\n\nconst { title, hideIcon } = toRefs(props);\n</script>\n\n<template>\n  <div :class=\"`${containerStyle} ${bgColor}`\">\n    <div\n      :class=\"`${topBarStyle} ${paddingTopStyle}`\"\n      v-if=\"title || mandateLevel\"\n    >\n      <!-- <EpIcon :size=\"24\" :icon-path=\"mdiBookOpenVariant\"/> -->\n      <h3>\n        <EpIcon\n          v-if=\"!hideIcon\"\n          :iconPath=\"renderIcon\"\n          size=\"24\"\n          class=\"mr-2\"\n        />\n        <span class=\"font-bold align-middle\">{{ title }}</span>\n      </h3>\n      <EpScope v-if=\"mandateLevel\" :mandateLevel=\"mandateLevel\"></EpScope>\n    </div>\n    <div :class=\"`${boxPaddingStyle} `\">\n      <div class=\"py-4\" v-if=\"hasIntentions\">\n        <!-- <EpIcon :size=\"24\" :icon-path=\"mdiInformationOutline\"/> -->\n        <h4\n          v-if=\"labelIntentions\"\n          class=\"font-light text-sm pb-1 tracking-wide\"\n        >\n          {{ labelIntentions }}\n        </h4>\n        <slot name=\"intentions\" />\n        <EpDivider />\n      </div>\n      <div class=\"pt-2\">\n        <slot name=\"content\" />\n      </div>\n    </div>\n    <div\n      :class=\"`${bottomBarStyle} ${paddingBottomStyle}`\"\n      v-if=\"hasActions\"\n    >\n      <slot name=\"actions\" />\n    </div>\n  </div>\n</template>\n"],"names":["_createElementBlock","_normalizeClass","_unref","mandateLevel","_createElementVNode","_createBlock","EpIcon","_toDisplayString","EpScope","_openBlock","labelIntentions","_renderSlot","_createVNode","EpDivider"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,UAAM,QAAQ;AAUd,UAAM,QAA+B,SAAA;AAErC,UAAM,gBAAgB,SAAS,MAAM;AACnC,aAAO,MAAM,aAAa,OAAO;AAAA,IACnC,CAAC;AAED,UAAM,aAAa,SAAS,MAAM;AAChC,aAAO,MAAM,UAAU,OAAO;AAAA,IAChC,CAAC;AAED,UAAM,aAAa,SAAS,MAAM;AAChC,UAAI,MAAM,MAAM;AACd,eAAO,MAAM;AAAA,MACf;AACA,aAAO;AAAA,IACT,CAAC;AAED,UAAM,cAAc,SAAS,MAAM;AACjC,aAAO,GAAG,cAAc,MAAM,IAAI,CAAC,eACjC,MAAM,OAAO,KAAK,cACpB;AAAA,IACF,CAAC;AAED,UAAM,iBAAiB,SAAS,MAAM;AACpC,aAAO,GAAG,cAAc,MAAM,IAAI,CAAC;AAAA,IACrC,CAAC;AAED,UAAM,kBAAkB,SAAS,MAAM;AACrC,UAAI,MAAM,QAAQ,WAAW;AAC3B,eAAO;AAAA,MACT;AAAA,IACF,CAAC;AAED,UAAM,qBAAqB,SAAS,MAAM;AACxC,UAAI,MAAM,QAAQ,WAAW;AAC3B,eAAO;AAAA,MACT;AAAA,IACF,CAAC;AACD,UAAM,kBAAkB,SAAS,MAAM;AACrC,UAAI,MAAM,QAAQ,WAAW;AAC3B,eAAO;AAAA,MACT;AAAA,IACF,CAAC;AAED,UAAM,iBAAiB,SAAS,MAAM;AACpC,UAAI,WAAW,SAAS,cAAc,SAAS,MAAM,OAAO;AAC1D,eAAO,oBACL,MAAM,OAAO,KAAK,WACpB;AAAA,MACF;AACA,aAAO;AAAA,IACT,CAAC;AAGD,UAAM,UAAU,SAAS,MAAK;AAC3B,aAAO,MAAM,OAAO,iBAAiB;AAAA,IACxC,CAAC;AAID,UAAM,EAAE,OAAO,aAAa,OAAO,KAAK;;0BAItCA,mBAuCM,OAAA;AAAA,QAvCA,OAAKC,eAAA,GAAK,eAAA,KAAc,IAAI,QAAA,KAAO,EAAA;AAAA,MAAA;QAG/BC,MAAA,KAAA,KAASC,KAAAA,6BAFjBH,mBAeM,OAAA;AAAA;UAdH,OAAKC,eAAA,GAAK,YAAA,KAAW,IAAI,gBAAA,KAAe,EAAA;AAAA,QAAA;UAIzCG,mBAQK,MAAA,MAAA;AAAA,aANMF,MAAA,QAAA,kBADTG,YAKEC,aAAA;AAAA;cAHC,UAAU,WAAA;AAAA,cACX,MAAK;AAAA,cACL,OAAM;AAAA,YAAA;YAERF,mBAAuD,QAAvD,YAAuDG,gBAAfL,MAAA,KAAA,CAAK,GAAA,CAAA;AAAA,UAAA;UAEhCC,KAAAA,6BAAfE,YAAoEG,aAAA;AAAA;YAAtC,cAAcL,KAAAA;AAAAA,UAAAA;;QAE9CC,mBAeM,OAAA;AAAA,UAfA,yBAAU,gBAAA,KAAe,GAAA;AAAA,QAAA;UACL,cAAA,SAAxBK,UAAA,GAAAT,mBAUM,OAVN,YAUM;AAAA,YAPIU,KAAAA,gCADRV,mBAKK,MALL,YAKKO,gBADAG,KAAAA,eAAe,GAAA,CAAA;YAEpBC,WAA0B,KAAA,QAAA,YAAA;AAAA,YAC1BC,YAAaC,WAAA;AAAA,UAAA;UAEfT,mBAEM,OAFN,YAEM;AAAA,YADJO,WAAuB,KAAA,QAAA,SAAA;AAAA,UAAA;;QAKnB,WAAA,sBAFRX,mBAKM,OAAA;AAAA;UAJH,OAAKC,eAAA,GAAK,eAAA,KAAc,IAAI,mBAAA,KAAkB,EAAA;AAAA,QAAA;UAG/CU,WAAuB,KAAA,QAAA,SAAA;AAAA,QAAA;;;;;"}
+{"version":3,"file":"EpEdu.vue.js","sources":["../../../src/components/educationals/EpEdu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { toRefs, computed, useSlots, type SetupContext } from \"vue\";\nimport { mediaVariants } from \"~/types/Medias\";\nimport EpIcon from \"~/components/basics/EpIcon.vue\";\nimport EpDivider from \"~/components/basics/EpDivider.vue\";\nimport EpScope from \"~/components/educationals/EpScope.vue\";\nimport { mdiLeadPencil } from \"@mdi/js\";\nimport type { EpEduProps } from \"~/types/educationals/EpEdu\";\n\nconst props = withDefaults(defineProps<EpEduProps>(), {\n  title: null,\n  type: \"neutral\",\n  hideIcon: false,\n  flat: true,\n  labelIntentions: \"\",\n  card: false\n});\n\n//get slots\nconst slots: SetupContext[\"slots\"] = useSlots();\n\nconst hasIntentions = computed(() => {\n  return slots.intentions ? true : false;\n});\n\nconst hasActions = computed(() => {\n  return slots.actions ? true : false;\n});\n\nconst renderIcon = computed(() => {\n  if (props.icon) {\n    return props.icon;\n  }\n  return mdiLeadPencil;\n});\n\nconst topBarStyle = computed(() => {\n  return `${mediaVariants[props.type]} text-left  ${\n    props.flat ? \"\" : \"rounded-t-md\"\n  } flex justify-between items-center `;\n});\n\nconst bottomBarStyle = computed(() => {\n  return `${mediaVariants[props.type]} text-right`;\n});\n\nconst paddingTopStyle = computed(() => {\n  if (props.type != \"neutral\") {\n    return `px-5 py-2`;\n  }\n});\n\nconst paddingBottomStyle = computed(() => {\n  if (props.type != \"neutral\") {\n    return `pr-5`;\n  }\n});\nconst boxPaddingStyle = computed(() => {\n  if (props.type != \"neutral\") {\n    return `px-5`;\n  }\n});\n\nconst containerStyle = computed(() => {\n  if (hasActions.value || hasIntentions.value || props.title) {\n    return ` overflow-hidden ${\n      props.flat ? \"\" : \"shadow-md\"\n    } flex flex-col justify-start h-full`;\n  }\n  return `flex flex-col justify-between`;\n});\n\n\nconst bgColor = computed(()=> {\n   return props.card ? 'bg-surface-2 dark:bg-surface-2-dark' : 'bg-surface dark:bg-surface-dark'\n})\n\n\n\nconst { title, hideIcon } = toRefs(props);\n</script>\n\n<template>\n  <div :class=\"`${containerStyle} ${bgColor}`\">\n    <div\n      :class=\"`${topBarStyle} ${paddingTopStyle}`\"\n      v-if=\"title || mandateLevel\"\n    >\n      <!-- <EpIcon :size=\"24\" :icon-path=\"mdiBookOpenVariant\"/> -->\n      <h3>\n        <EpIcon\n          v-if=\"!hideIcon\"\n          :iconPath=\"renderIcon\"\n          size=\"24\"\n          class=\"mr-2\"\n        />\n        <span class=\"font-bold align-middle\">{{ title }}</span>\n      </h3>\n      <EpScope v-if=\"mandateLevel\" :mandateLevel=\"mandateLevel\"></EpScope>\n    </div>\n    <div :class=\"`${boxPaddingStyle} `\">\n      <div class=\"py-4\" v-if=\"hasIntentions\">\n        <!-- <EpIcon :size=\"24\" :icon-path=\"mdiInformationOutline\"/> -->\n        <h4\n          v-if=\"labelIntentions\"\n          class=\"font-light text-sm pb-1 tracking-wide\"\n        >\n          {{ labelIntentions }}\n        </h4>\n        <slot name=\"intentions\" />\n        <EpDivider />\n      </div>\n      <div class=\"pt-2\">\n        <slot name=\"content\" />\n      </div>\n    </div>\n    <div\n      :class=\"`${bottomBarStyle} ${paddingBottomStyle}`\"\n      v-if=\"hasActions\"\n    >\n      <slot name=\"actions\" />\n    </div>\n  </div>\n</template>\n"],"names":["_createElementBlock","_normalizeClass","_unref","mandateLevel","_createElementVNode","_createBlock","EpIcon","_toDisplayString","EpScope","_openBlock","labelIntentions","_renderSlot","_createVNode","EpDivider"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,UAAM,QAAQ;AAUd,UAAM,QAA+B,SAAA;AAErC,UAAM,gBAAgB,SAAS,MAAM;AACnC,aAAO,MAAM,aAAa,OAAO;AAAA,IACnC,CAAC;AAED,UAAM,aAAa,SAAS,MAAM;AAChC,aAAO,MAAM,UAAU,OAAO;AAAA,IAChC,CAAC;AAED,UAAM,aAAa,SAAS,MAAM;AAChC,UAAI,MAAM,MAAM;AACd,eAAO,MAAM;AAAA,MACf;AACA,aAAO;AAAA,IACT,CAAC;AAED,UAAM,cAAc,SAAS,MAAM;AACjC,aAAO,GAAG,cAAc,MAAM,IAAI,CAAC,eACjC,MAAM,OAAO,KAAK,cACpB;AAAA,IACF,CAAC;AAED,UAAM,iBAAiB,SAAS,MAAM;AACpC,aAAO,GAAG,cAAc,MAAM,IAAI,CAAC;AAAA,IACrC,CAAC;AAED,UAAM,kBAAkB,SAAS,MAAM;AACrC,UAAI,MAAM,QAAQ,WAAW;AAC3B,eAAO;AAAA,MACT;AAAA,IACF,CAAC;AAED,UAAM,qBAAqB,SAAS,MAAM;AACxC,UAAI,MAAM,QAAQ,WAAW;AAC3B,eAAO;AAAA,MACT;AAAA,IACF,CAAC;AACD,UAAM,kBAAkB,SAAS,MAAM;AACrC,UAAI,MAAM,QAAQ,WAAW;AAC3B,eAAO;AAAA,MACT;AAAA,IACF,CAAC;AAED,UAAM,iBAAiB,SAAS,MAAM;AACpC,UAAI,WAAW,SAAS,cAAc,SAAS,MAAM,OAAO;AAC1D,eAAO,oBACL,MAAM,OAAO,KAAK,WACpB;AAAA,MACF;AACA,aAAO;AAAA,IACT,CAAC;AAGD,UAAM,UAAU,SAAS,MAAK;AAC3B,aAAO,MAAM,OAAO,wCAAwC;AAAA,IAC/D,CAAC;AAID,UAAM,EAAE,OAAO,aAAa,OAAO,KAAK;;0BAItCA,mBAuCM,OAAA;AAAA,QAvCA,OAAKC,eAAA,GAAK,eAAA,KAAc,IAAI,QAAA,KAAO,EAAA;AAAA,MAAA;QAG/BC,MAAA,KAAA,KAASC,KAAAA,6BAFjBH,mBAeM,OAAA;AAAA;UAdH,OAAKC,eAAA,GAAK,YAAA,KAAW,IAAI,gBAAA,KAAe,EAAA;AAAA,QAAA;UAIzCG,mBAQK,MAAA,MAAA;AAAA,aANMF,MAAA,QAAA,kBADTG,YAKEC,aAAA;AAAA;cAHC,UAAU,WAAA;AAAA,cACX,MAAK;AAAA,cACL,OAAM;AAAA,YAAA;YAERF,mBAAuD,QAAvD,YAAuDG,gBAAfL,MAAA,KAAA,CAAK,GAAA,CAAA;AAAA,UAAA;UAEhCC,KAAAA,6BAAfE,YAAoEG,aAAA;AAAA;YAAtC,cAAcL,KAAAA;AAAAA,UAAAA;;QAE9CC,mBAeM,OAAA;AAAA,UAfA,yBAAU,gBAAA,KAAe,GAAA;AAAA,QAAA;UACL,cAAA,SAAxBK,UAAA,GAAAT,mBAUM,OAVN,YAUM;AAAA,YAPIU,KAAAA,gCADRV,mBAKK,MALL,YAKKO,gBADAG,KAAAA,eAAe,GAAA,CAAA;YAEpBC,WAA0B,KAAA,QAAA,YAAA;AAAA,YAC1BC,YAAaC,WAAA;AAAA,UAAA;UAEfT,mBAEM,OAFN,YAEM;AAAA,YADJO,WAAuB,KAAA,QAAA,SAAA;AAAA,UAAA;;QAKnB,WAAA,sBAFRX,mBAKM,OAAA;AAAA;UAJH,OAAKC,eAAA,GAAK,eAAA,KAAc,IAAI,mBAAA,KAAkB,EAAA;AAAA,QAAA;UAG/CU,WAAuB,KAAA,QAAA,SAAA;AAAA,QAAA;;;;;"}

package/dist/components/educationals/EpInstructions.vue.js

@@ -1,6 +1,7 @@
 import { defineComponent, toRefs, createElementBlock, openBlock, createElementVNode, createBlock, createCommentVNode, createTextVNode, unref, toDisplayString, Fragment, renderList, withCtx } from "vue";
 import _sfc_main$1 from "../basics/EpIcon.vue.js";
 import Comp from "../interactions/EpAccordeon.vue.js";
+import _sfc_main$2 from "../basics/EpImg.vue.js";
 const _hoisted_1 = { class: "lg:grid lg:grid-cols-12 lg:gap-8" };
 const _hoisted_2 = { class: "lg:col-span-2" };
 const _hoisted_3 = { class: "text-pretty text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-100 sm:text-xl" };
@@ -44,7 +45,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 default: withCtx(() => [
                   createElementVNode("div", {
                     innerHTML: instruction.content
-                  }, null, 8, _hoisted_6)
+                  }, null, 8, _hoisted_6),
+                  instruction.src ? (openBlock(), createBlock(_sfc_main$2, {
+                    key: 0,
+                    src: instruction.src
+                  }, null, 8, ["src"])) : createCommentVNode("", true)
                 ]),
                 _: 2
               }, 1032, ["title", "open"]);