ep-lib-ts 1.0.59 → 1.0.60

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

@@ -1,31 +1,47 @@
-import { defineComponent as R, ref as p, computed as j, createElementBlock as r, openBlock as a, createElementVNode as l, normalizeStyle as z, createCommentVNode as x, toDisplayString as c, createVNode as s, withCtx as d, unref as g, normalizeClass as _, createTextVNode as h, Fragment as C, renderList as w, createBlock as $ } from "vue";
-import { useRenderText as A } from "../../composables/useRenderText.js";
-import N from "../basics/EpIcon.vue.js";
-import L from "../tools/Details.vue2.js";
-import E from "../interactions/EpModal.vue.js";
+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.vue2.js";
+import _sfc_main$5 from "../interactions/EpModal.vue.js";
 /* empty css                           */
-import H from "../medias/EpHierarchy.vue.js";
-import m from "../basics/EpBtn.vue.js";
-import { mdiArrowLeft as M } from "@mdi/js";
-import T from "../tools/TextMedia.vue2.js";
-const O = { class: "mb-2" }, Y = { class: "font-bold text-3xl text-center" }, D = {
+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.vue2.js";
+const _hoisted_1 = { class: "mb-2" };
+const _hoisted_2 = { class: "font-bold text-3xl text-center" };
+const _hoisted_3 = {
   key: 0,
   class: "mt-2"
-}, U = {
+};
+const _hoisted_4 = {
   key: 0,
   class: "w-full flex flex-col space-y-6"
-}, q = {
+};
+const _hoisted_5 = {
   key: 1,
   class: "w-full"
-}, G = {
-  class: /* @__PURE__ */ _("w-full my-4 mx-4 flex flex-wrap gap-2 justify-center items-center")
-}, J = { key: 2 }, K = { class: "text-xl text-center font-semibold" }, Q = { class: "w-full" }, W = { class: "font-semibold mb-3" }, X = {
+};
+const _hoisted_6 = {
+  class: /* @__PURE__ */ normalizeClass(`w-full my-4 mx-4 flex flex-wrap gap-2 justify-center items-center`)
+};
+const _hoisted_7 = { key: 2 };
+const _hoisted_8 = { class: "text-xl text-center font-semibold" };
+const _hoisted_9 = { class: "w-full" };
+const _hoisted_10 = { class: "font-semibold mb-3" };
+const _hoisted_11 = {
   class: "overflow-auto p-2",
   style: { height: "200px" }
-}, Z = { class: "flex justify-center mt-2" }, ee = { class: "flex justify-end mt-4" }, le = {
+};
+const _hoisted_12 = { class: "flex justify-center mt-2" };
+const _hoisted_13 = { class: "flex justify-end mt-4" };
+const _hoisted_14 = {
   key: 0,
   class: "flex w-full flex-col col-span-1 items-center px-4 border-l-2 border-gray-700 overflow-auto"
-}, te = ["innerHTML"], oe = { class: "flex justify-center mt-2" }, pe = /* @__PURE__ */ R({
+};
+const _hoisted_15 = ["innerHTML"];
+const _hoisted_16 = { class: "flex justify-center mt-2" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "EpBranchingScenario",
   props: {
     title: {},
@@ -46,191 +62,229 @@ const O = { class: "mb-2" }, Y = { class: "font-bold text-3xl text-center" }, D
     colorRect: { default: "fill-main-color-400" },
     isCluster: { type: Boolean }
   },
-  setup(F) {
-    const i = F, y = p(!1), u = p([]), b = p(null), t = p(null), f = p(!0), P = () => {
-      f.value = !1, t.value = i.decisionTree;
-    }, V = j(() => {
-      const e = !i.initialInstruction, n = !i.media;
-      return e && n ? "pt-44" : "";
-    }), S = () => {
-      if (u.value.length === 0) {
-        f.value = !0, t.value = null;
+  setup(__props) {
+    const props = __props;
+    const showPath = ref(false);
+    const path = ref([]);
+    const userPath = ref(null);
+    const currentOption = ref(null);
+    const isIntroductoryPart = ref(true);
+    const start = () => {
+      isIntroductoryPart.value = false;
+      currentOption.value = props.decisionTree;
+    };
+    const styleIntro = computed(() => {
+      const noInstruction = !props.initialInstruction;
+      const noMedia = !props.media;
+      if (noInstruction && noMedia) {
+        return "pt-44";
+      }
+      return "";
+    });
+    const goToPrevious = () => {
+      if (path.value.length === 0) {
+        isIntroductoryPart.value = true;
+        currentOption.value = null;
         return;
       }
-      u.value.pop();
-      const e = u.value[u.value.length - 1];
-      e ? t.value = e : t.value = i.decisionTree;
-    }, B = () => {
-      t.value = null, f.value = !0, u.value = [];
-    }, I = (e) => {
-      u.value.push(e), e.children && e.children.length > 0 ? t.value = e : (t.value = null, b.value = k(i.decisionTree, u.value));
+      path.value.pop();
+      const lastOption = path.value[path.value.length - 1];
+      if (lastOption) {
+        currentOption.value = lastOption;
+      } else {
+        currentOption.value = props.decisionTree;
+      }
+    };
+    const restart = () => {
+      currentOption.value = null;
+      isIntroductoryPart.value = true;
+      path.value = [];
+    };
+    const nextSlide = (option) => {
+      path.value.push(option);
+      if (option.children && option.children.length > 0) {
+        currentOption.value = option;
+      } else {
+        currentOption.value = null;
+        userPath.value = convertOptionToTreeNode(props.decisionTree, path.value);
+      }
     };
-    function k(e, n) {
-      const o = n.includes(e);
+    function convertOptionToTreeNode(option, path2) {
+      var _a;
+      const isActive = path2.includes(option);
       return {
-        name: e.name,
-        text: e.text,
-        component: e.component,
-        active: o,
-        children: e.children?.map(
-          (v) => k(v, n)
+        name: option.name,
+        text: option.text,
+        component: option.component,
+        active: isActive,
+        children: (_a = option.children) == null ? void 0 : _a.map(
+          (child) => convertOptionToTreeNode(child, path2)
         )
       };
     }
-    return (e, n) => (a(), r("div", null, [
-      l("div", {
-        class: "bg-gray-200 dark:bg-slate-800 rounded-md p-4 flex flex-col",
-        style: z({ minHeight: "500px", backgroundColor: e.bgColor })
-      }, [
-        l("div", O, [
-          l("h1", Y, c(e.title), 1),
-          t.value ? (a(), r("div", D, [
-            s(m, {
-              type: "primary",
-              rounded: "",
-              size: "small",
-              "extra-class": `${e.transitionAnimation}`,
-              onClick: S
-            }, {
-              default: d(() => [
-                s(N, {
-                  "icon-path": g(M),
-                  size: "25"
-                }, null, 8, ["icon-path"])
-              ]),
-              _: 1
-            }, 8, ["extra-class"])
-          ])) : x("", !0)
-        ]),
-        l("div", null, [
-          f.value ? (a(), r("div", U, [
-            s(T, {
-              text: e.initialInstruction ?? "",
-              media: e.media,
-              cols: e.initialTwoCols
-            }, null, 8, ["text", "media", "cols"]),
-            l("div", {
-              class: _(`justify-center flex ${V.value}`)
-            }, [
-              s(m, {
+    return (_ctx, _cache) => {
+      var _a, _b;
+      return openBlock(), createElementBlock("div", null, [
+        createElementVNode("div", {
+          class: "bg-gray-200 dark:bg-slate-800 rounded-md p-4 flex flex-col",
+          style: normalizeStyle({ minHeight: "500px", backgroundColor: _ctx.bgColor })
+        }, [
+          createElementVNode("div", _hoisted_1, [
+            createElementVNode("h1", _hoisted_2, toDisplayString(_ctx.title), 1),
+            currentOption.value ? (openBlock(), createElementBlock("div", _hoisted_3, [
+              createVNode(_sfc_main$1, {
                 type: "primary",
                 rounded: "",
-                onClick: P
+                size: "small",
+                "extra-class": `${_ctx.transitionAnimation}`,
+                onClick: goToPrevious
               }, {
-                default: d(() => [
-                  h(c(e.labelStart), 1)
+                default: withCtx(() => [
+                  createVNode(_sfc_main$2, {
+                    "icon-path": unref(mdiArrowLeft),
+                    size: "25"
+                  }, null, 8, ["icon-path"])
                 ]),
                 _: 1
-              })
-            ], 2)
-          ])) : t.value && !f.value ? (a(), r("div", q, [
-            l("div", {
-              class: _(`${e.transitionAnimation} my-12`)
-            }, [
-              s(T, {
-                text: t.value.text ?? "",
-                media: t.value.component,
-                cols: t.value.cols
+              }, 8, ["extra-class"])
+            ])) : createCommentVNode("", true)
+          ]),
+          createElementVNode("div", null, [
+            isIntroductoryPart.value ? (openBlock(), createElementBlock("div", _hoisted_4, [
+              createVNode(_sfc_main$3, {
+                text: (_a = _ctx.initialInstruction) != null ? _a : "",
+                media: _ctx.media,
+                cols: _ctx.initialTwoCols
               }, null, 8, ["text", "media", "cols"]),
-              l("div", G, [
-                (a(!0), r(C, null, w(t.value.children, (o, v) => (a(), $(m, {
-                  key: `option-${v}`,
-                  rounded: "",
+              createElementVNode("div", {
+                class: normalizeClass(`justify-center flex ${styleIntro.value}`)
+              }, [
+                createVNode(_sfc_main$1, {
                   type: "primary",
-                  class: "flex-1 min-w-[120px] sm:min-w-[160px] max-w-xs",
-                  onClick: (ne) => I(o)
+                  rounded: "",
+                  onClick: start
                 }, {
-                  default: d(() => [
-                    h(c(o.name), 1)
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(_ctx.labelStart), 1)
                   ]),
-                  _: 2
-                }, 1032, ["onClick"]))), 128))
-              ])
-            ], 2)
-          ])) : (a(), r("div", J, [
-            l("h3", K, c(e.labelFinish), 1),
-            l("div", {
-              class: _(`flex gap-6 mt-3 ${e.generalFeedback ? "" : "w-3/6 mx-auto"}`)
-            }, [
-              l("div", Q, [
-                l("h3", W, c(e.labelYourPath), 1),
-                l("div", X, [
-                  (a(!0), r(C, null, w(u.value, (o, v) => (a(), r("div", {
-                    key: `user-choice-${v}`,
-                    class: "mb-2"
-                  }, [
-                    s(L, {
-                      content: o.text ?? "",
-                      title: o.name,
-                      media: o.component
-                    }, null, 8, ["content", "title", "media"])
-                  ]))), 128))
-                ]),
-                l("div", Z, [
-                  s(m, {
-                    type: "info",
-                    rounded: "",
-                    onClick: n[0] || (n[0] = (o) => y.value = !0)
+                  _: 1
+                })
+              ], 2)
+            ])) : currentOption.value && !isIntroductoryPart.value ? (openBlock(), createElementBlock("div", _hoisted_5, [
+              createElementVNode("div", {
+                class: normalizeClass(`${_ctx.transitionAnimation} my-12`)
+              }, [
+                createVNode(_sfc_main$3, {
+                  text: (_b = currentOption.value.text) != null ? _b : "",
+                  media: currentOption.value.component,
+                  cols: currentOption.value.cols
+                }, null, 8, ["text", "media", "cols"]),
+                createElementVNode("div", _hoisted_6, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(currentOption.value.children, (option, index) => {
+                    return openBlock(), createBlock(_sfc_main$1, {
+                      key: `option-${index}`,
+                      rounded: "",
+                      type: "primary",
+                      class: "flex-1 min-w-[120px] sm:min-w-[160px] max-w-xs",
+                      onClick: ($event) => nextSlide(option)
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(toDisplayString(option.name), 1)
+                      ]),
+                      _: 2
+                    }, 1032, ["onClick"]);
+                  }), 128))
+                ])
+              ], 2)
+            ])) : (openBlock(), createElementBlock("div", _hoisted_7, [
+              createElementVNode("h3", _hoisted_8, toDisplayString(_ctx.labelFinish), 1),
+              createElementVNode("div", {
+                class: normalizeClass(`flex gap-6 mt-3 ${!_ctx.generalFeedback ? "w-3/6 mx-auto" : ""}`)
+              }, [
+                createElementVNode("div", _hoisted_9, [
+                  createElementVNode("h3", _hoisted_10, toDisplayString(_ctx.labelYourPath), 1),
+                  createElementVNode("div", _hoisted_11, [
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(path.value, (item, i) => {
+                      var _a2;
+                      return openBlock(), createElementBlock("div", {
+                        key: `user-choice-${i}`,
+                        class: "mb-2"
+                      }, [
+                        createVNode(_sfc_main$4, {
+                          content: (_a2 = item.text) != null ? _a2 : "",
+                          title: item.name,
+                          media: item.component
+                        }, null, 8, ["content", "title", "media"])
+                      ]);
+                    }), 128))
+                  ]),
+                  createElementVNode("div", _hoisted_12, [
+                    createVNode(_sfc_main$1, {
+                      type: "info",
+                      rounded: "",
+                      onClick: _cache[0] || (_cache[0] = ($event) => showPath.value = true)
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(toDisplayString(_ctx.labelShowFullPath), 1)
+                      ]),
+                      _: 1
+                    })
+                  ]),
+                  userPath.value ? (openBlock(), createBlock(_sfc_main$5, {
+                    key: 0,
+                    modelValue: showPath.value,
+                    "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => showPath.value = $event)
                   }, {
-                    default: d(() => [
-                      h(c(e.labelShowFullPath), 1)
+                    default: withCtx(() => [
+                      createVNode(Comp, {
+                        nodes: userPath.value,
+                        "is-cluster": props.isCluster,
+                        "color-path": props.colorPath,
+                        "color-rect": props.colorRect
+                      }, null, 8, ["nodes", "is-cluster", "color-path", "color-rect"]),
+                      createElementVNode("div", _hoisted_13, [
+                        createVNode(_sfc_main$1, {
+                          onClick: _cache[1] || (_cache[1] = ($event) => showPath.value = false),
+                          type: "error",
+                          outlined: "",
+                          rounded: ""
+                        }, {
+                          default: withCtx(() => [
+                            createTextVNode(toDisplayString(_ctx.labelClose), 1)
+                          ]),
+                          _: 1
+                        })
+                      ])
                     ]),
                     _: 1
-                  })
+                  }, 8, ["modelValue"])) : createCommentVNode("", true)
                 ]),
-                b.value ? (a(), $(E, {
-                  key: 0,
-                  modelValue: y.value,
-                  "onUpdate:modelValue": n[2] || (n[2] = (o) => y.value = o)
+                _ctx.generalFeedback ? (openBlock(), createElementBlock("div", _hoisted_14, [
+                  createElementVNode("div", {
+                    innerHTML: unref(useRenderText)(_ctx.generalFeedback)
+                  }, null, 8, _hoisted_15)
+                ])) : createCommentVNode("", true)
+              ], 2),
+              createElementVNode("div", _hoisted_16, [
+                createVNode(_sfc_main$1, {
+                  rounded: "",
+                  type: "warning",
+                  onClick: restart
                 }, {
-                  default: d(() => [
-                    s(H, {
-                      nodes: b.value,
-                      "is-cluster": i.isCluster,
-                      "color-path": i.colorPath,
-                      "color-rect": i.colorRect
-                    }, null, 8, ["nodes", "is-cluster", "color-path", "color-rect"]),
-                    l("div", ee, [
-                      s(m, {
-                        onClick: n[1] || (n[1] = (o) => y.value = !1),
-                        type: "error",
-                        outlined: "",
-                        rounded: ""
-                      }, {
-                        default: d(() => [
-                          h(c(e.labelClose), 1)
-                        ]),
-                        _: 1
-                      })
-                    ])
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(_ctx.labelRestart), 1)
                   ]),
                   _: 1
-                }, 8, ["modelValue"])) : x("", !0)
-              ]),
-              e.generalFeedback ? (a(), r("div", le, [
-                l("div", {
-                  innerHTML: g(A)(e.generalFeedback)
-                }, null, 8, te)
-              ])) : x("", !0)
-            ], 2),
-            l("div", oe, [
-              s(m, {
-                rounded: "",
-                type: "warning",
-                onClick: B
-              }, {
-                default: d(() => [
-                  h(c(e.labelRestart), 1)
-                ]),
-                _: 1
-              })
-            ])
-          ]))
-        ])
-      ], 4)
-    ]));
+                })
+              ])
+            ]))
+          ])
+        ], 4)
+      ]);
+    };
   }
 });
 export {
-  pe as default
+  _sfc_main as default
 };
+//# sourceMappingURL=EpBranchingScenario.vue2.js.map

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

@@ -0,0 +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 { 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-gray-200 dark:bg-slate-800 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/EpCodeblock.vue.js

@@ -1,44 +1,65 @@
-import { defineComponent as f, computed as t, ref as s, createBlock as r, openBlock as u, unref as c, withCtx as h, createVNode as g } from "vue";
-import d from "@wdns/vue-code-block";
-import { defaultOption as v } from "../../types/Codeblock.js";
-import b from "../interactions/EpAccordeon.vue.js";
-const y = /* @__PURE__ */ f({
+import { defineComponent, computed, ref, createBlock, openBlock, unref, withCtx, createVNode } from "vue";
+import VCodeBlock from "@wdns/vue-code-block";
+import { defaultOption } from "../../types/Codeblock.js";
+import Comp from "../interactions/EpAccordeon.vue.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "EpCodeblock",
   props: {
     code: { default: "" },
     label: { default: "" },
     lang: { default: "javascript" },
-    theme: { default: v },
+    theme: { default: defaultOption },
     title: {},
-    compact: { type: Boolean, default: !1 }
+    compact: { type: Boolean, default: false }
   },
-  setup(i) {
-    const e = i, m = t(() => e.title ? e.title : "En savoir plus"), l = t(() => s(e.code)), o = t(() => e.label), a = t(() => e.lang), n = t(() => e.theme);
-    return (p, k) => p.compact ? (u(), r(b, {
-      key: 1,
-      outlined: "",
-      title: m.value
-    }, {
-      default: h(() => [
-        g(c(d), {
-          code: l.value,
-          highlightjs: "",
-          label: o.value,
-          lang: a.value,
-          theme: n.value
-        }, null, 8, ["code", "label", "lang", "theme"])
-      ]),
-      _: 1
-    }, 8, ["title"])) : (u(), r(c(d), {
-      key: 0,
-      code: l.value,
-      highlightjs: "",
-      label: o.value,
-      lang: a.value,
-      theme: n.value
-    }, null, 8, ["code", "label", "lang", "theme"]));
+  setup(__props) {
+    const props = __props;
+    const renderTitle = computed(() => {
+      if (!props.title) {
+        return "En savoir plus";
+      }
+      return props.title;
+    });
+    const code = computed(() => {
+      return ref(props.code);
+    });
+    const label = computed(() => {
+      return props.label;
+    });
+    const lang = computed(() => {
+      return props.lang;
+    });
+    const theme = computed(() => {
+      return props.theme;
+    });
+    return (_ctx, _cache) => {
+      return !_ctx.compact ? (openBlock(), createBlock(unref(VCodeBlock), {
+        key: 0,
+        code: code.value,
+        highlightjs: "",
+        label: label.value,
+        lang: lang.value,
+        theme: theme.value
+      }, null, 8, ["code", "label", "lang", "theme"])) : (openBlock(), createBlock(Comp, {
+        key: 1,
+        outlined: "",
+        title: renderTitle.value
+      }, {
+        default: withCtx(() => [
+          createVNode(unref(VCodeBlock), {
+            code: code.value,
+            highlightjs: "",
+            label: label.value,
+            lang: lang.value,
+            theme: theme.value
+          }, null, 8, ["code", "label", "lang", "theme"])
+        ]),
+        _: 1
+      }, 8, ["title"]));
+    };
   }
 });
 export {
-  y as default
+  _sfc_main as default
 };
+//# sourceMappingURL=EpCodeblock.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EpCodeblock.vue.js","sources":["../../../src/components/educationals/EpCodeblock.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport VCodeBlock from \"@wdns/vue-code-block\";\nimport { defaultOption } from \"~/types/Codeblock\";\nimport EpAccordeon from \"~/components/interactions/EpAccordeon.vue\";\nimport { computed } from \"vue\";\nimport { ref } from \"vue\";\nimport { EpCodeblockProps } from \"~/types/educationals/EpCodeblock\";\n\nconst props = withDefaults(defineProps<EpCodeblockProps>(), {\n  code: \"\",\n  label: \"\",\n  lang: \"javascript\",\n  theme: defaultOption,\n  compact: false,\n});\n\nconst renderTitle = computed(() => {\n  if (!props.title) {\n    return \"En savoir plus\";\n  }\n  return props.title;\n});\n\nconst code = computed(() => {\n  return ref(props.code);\n});\nconst label = computed(() => {\n  return props.label;\n});\nconst lang = computed(() => {\n  return props.lang;\n});\nconst theme = computed(() => {\n  return props.theme;\n});\n</script>\n\n<template>\n  <VCodeBlock\n    :code=\"code\"\n    highlightjs\n    :label=\"label\"\n    :lang=\"lang\"\n    :theme=\"theme\"\n    v-if=\"!compact\"\n  />\n\n  <EpAccordeon outlined :title=\"renderTitle\" v-else>\n    <VCodeBlock\n      :code=\"code\"\n      highlightjs\n      :label=\"label\"\n      :lang=\"lang\"\n      :theme=\"theme\"\n    />\n  </EpAccordeon>\n</template>\n<style>\npre {\n  white-space: break-spaces;\n}\n</style>\n"],"names":["compact","_createBlock","_unref","EpAccordeon","_createVNode"],"mappings":";;;;;;;;;;;;;;;AAQA,UAAM,QAAQ;AAQd,UAAM,cAAc,SAAS,MAAM;AACjC,UAAI,CAAC,MAAM,OAAO;AAChB,eAAO;AAAA,MACT;AACA,aAAO,MAAM;AAAA,IACf,CAAC;AAED,UAAM,OAAO,SAAS,MAAM;AAC1B,aAAO,IAAI,MAAM,IAAI;AAAA,IACvB,CAAC;AACD,UAAM,QAAQ,SAAS,MAAM;AAC3B,aAAO,MAAM;AAAA,IACf,CAAC;AACD,UAAM,OAAO,SAAS,MAAM;AAC1B,aAAO,MAAM;AAAA,IACf,CAAC;AACD,UAAM,QAAQ,SAAS,MAAM;AAC3B,aAAO,MAAM;AAAA,IACf,CAAC;;cAUUA,KAAAA,wBANTC,YAOEC,MAAA,UAAA,GAAA;AAAA;QANC,MAAM,KAAA;AAAA,QACP,aAAA;AAAA,QACC,OAAO,MAAA;AAAA,QACP,MAAM,KAAA;AAAA,QACN,OAAO,MAAA;AAAA,MAAA,iEAIVD,YAQcE,MAAA;AAAA;QARD,UAAA;AAAA,QAAU,OAAO,YAAA;AAAA,MAAA;yBAC5B,MAME;AAAA,UANFC,YAMEF,MAAA,UAAA,GAAA;AAAA,YALC,MAAM,KAAA;AAAA,YACP,aAAA;AAAA,YACC,OAAO,MAAA;AAAA,YACP,MAAM,KAAA;AAAA,YACN,OAAO,MAAA;AAAA,UAAA;;;;;;;"}

package/dist/components/educationals/EpCodeblock.vue3.js

@@ -1,5 +1,6 @@
-import o from "./EpCodeblock.vue.js";
+import _sfc_main from "./EpCodeblock.vue.js";
 /* empty css                 */
 export {
-  o as default
+  _sfc_main as default
 };
+//# sourceMappingURL=EpCodeblock.vue3.js.map

package/dist/components/educationals/EpCodeblock.vue3.js.map

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