ep-lib-ts 1.1.13 → 1.1.15

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

@@ -1 +1 @@
-{"version":3,"file":"EpAccordeon.vue2.js","sources":["../../../src/components/interactions/EpAccordeon.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, toRefs, computed, onMounted, onUpdated } from \"vue\";\nimport EpIcon from \"~/components/basics/EpIcon.vue\";\nimport { typeAccordeon } from \"~/types/Accordeon\";\nimport type { EpAccordeonProps } from \"~/types/interactions/EpAccordeon\";\nimport useColors from \"~/composables/useColors\";\n\nconst props = withDefaults(defineProps<EpAccordeonProps>(), {\n  open: false,\n  type: \"base\",\n  outlined: false,\n  title: \"En savoir plus\",\n});\n\nconst showDiv = ref(props.open);\nconst collapsible = ref();\n\nconst isOutlined = computed(() => {\n  if (props.outlined) {\n    return \"outlined\";\n  }\n  return \"default\";\n});\n\nconst stylesHeader = computed(() => {\n  return `flex justify-between items-center px-4 ${props.small ? 'py-1' : 'py-2'\n    } cursor-pointer select-none ${typeAccordeon[props.type]?.[isOutlined.value]}`;\n});\n\nconst stylesHeaderOpen = computed(() => {\n  return showDiv.value ? 'rounded-t' : 'rounded'\n})\n\nconst contentStyles = computed(() => {\n  const colorBorder = useColors(props.type.toLocaleLowerCase(), 'border')\n  return `px-4 bg-surface-2 dark:bg-surface-2-dark border border-t-0 rounded-b ${showDiv.value ? colorBorder : \"border-0\"\n    }`;\n});\n\n\nconst updateHeight = () => {\n  const content = collapsible.value;\n  if (!content) return;\n\n  if (!props.open) {\n    content.style.maxHeight = 0;\n  }\n};\n\nonMounted(updateHeight);\n\n\nfunction toggleDivVisibility() {\n  showDiv.value = !showDiv.value;\n  var content = collapsible.value;\n\n\n  content.style.maxHeight = content.scrollHeight + \"px\";\n  void content.offsetHeight;\n\n  if (content.getBoundingClientRect().height) {\n    content.style.maxHeight = 0;\n  } else {\n    content.style.maxHeight = content.scrollHeight + \"px\";\n  }\n\n}\n\nconst { title, icon, small } = toRefs(props);\n</script>\n\n<template>\n  <div>\n    <div :class=\"`${stylesHeader} ${stylesHeaderOpen}`\" @click=\"toggleDivVisibility\">\n      <div class=\"flex flex-col\">\n        <h3 :class=\"`${small ? 'text' : 'text-lg'} flex items-center`\">\n          <EpIcon v-if=\"icon\" :icon-path=\"icon\" size=\"28\" extraClass=\"mr-2\"></EpIcon>{{ title }}\n        </h3>\n        <p v-if=\"subtitle\" class=\"text-sm\">{{ subtitle }}</p>\n      </div>\n      <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\"\n        class=\"flex-shrink-0 h-6 w-6 mx-4 my-3 transition-transform duration-200 transform\"\n        :class=\"{ 'rotate-45 scale-[1.15]': showDiv }\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 6v12m6-6H6\" />\n      </svg>\n    </div>\n    <div ref=\"collapsible\" :class=\"`${contentStyles} ep-accordeon-content`\">\n      <div class=\"py-3\">\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.ep-accordeon-content {\n  transition: max-height 0.2s ease-out;\n  overflow: hidden;\n}\n</style>\n"],"names":["_createElementBlock","_createElementVNode","_normalizeClass","_unref","_createBlock","EpIcon","_toDisplayString","_renderSlot"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAOA,UAAM,QAAQ;AAOd,UAAM,UAAU,IAAI,MAAM,IAAI;AAC9B,UAAM,cAAc,IAAA;AAEpB,UAAM,aAAa,SAAS,MAAM;AAChC,UAAI,MAAM,UAAU;AAClB,eAAO;AAAA,MACT;AACA,aAAO;AAAA,IACT,CAAC;AAED,UAAM,eAAe,SAAS,MAAM;;AAClC,aAAO,0CAA0C,MAAM,QAAQ,SAAS,MACtE,gCAA+B,mBAAc,MAAM,IAAI,MAAxB,mBAA4B,WAAW,MAAM;AAAA,IAChF,CAAC;AAED,UAAM,mBAAmB,SAAS,MAAM;AACtC,aAAO,QAAQ,QAAQ,cAAc;AAAA,IACvC,CAAC;AAED,UAAM,gBAAgB,SAAS,MAAM;AACnC,YAAM,cAAc,UAAU,MAAM,KAAK,kBAAA,GAAqB,QAAQ;AACtE,aAAO,wEAAwE,QAAQ,QAAQ,cAAc,UAC3G;AAAA,IACJ,CAAC;AAGD,UAAM,eAAe,MAAM;AACzB,YAAM,UAAU,YAAY;AAC5B,UAAI,CAAC,QAAS;AAEd,UAAI,CAAC,MAAM,MAAM;AACf,gBAAQ,MAAM,YAAY;AAAA,MAC5B;AAAA,IACF;AAEA,cAAU,YAAY;AAGtB,aAAS,sBAAsB;AAC7B,cAAQ,QAAQ,CAAC,QAAQ;AACzB,UAAI,UAAU,YAAY;AAG1B,cAAQ,MAAM,YAAY,QAAQ,eAAe;AAGjD,UAAI,QAAQ,sBAAA,EAAwB,QAAQ;AAC1C,gBAAQ,MAAM,YAAY;AAAA,MAC5B,OAAO;AACL,gBAAQ,MAAM,YAAY,QAAQ,eAAe;AAAA,MACnD;AAAA,IAEF;AAEA,UAAM,EAAE,OAAO,MAAM,MAAA,IAAU,OAAO,KAAK;;0BAIzCA,mBAmBM,OAAA,MAAA;AAAA,QAlBJC,mBAYM,OAAA;AAAA,UAZA,OAAKC,eAAA,GAAK,aAAA,KAAY,IAAI,iBAAA,KAAgB,EAAA;AAAA,UAAK,SAAO;AAAA,QAAA;UAC1DD,mBAKM,OALN,YAKM;AAAA,YAJJA,mBAEK,MAAA;AAAA,cAFA,yBAAUE,MAAA,KAAA,IAAK,SAAA,SAAA,oBAAA;AAAA,YAAA;cACJA,MAAA,IAAA,kBAAdC,YAA2EC,aAAA;AAAA;gBAAtD,aAAWF,MAAA,IAAA;AAAA,gBAAM,MAAK;AAAA,gBAAK,YAAW;AAAA,cAAA;8CAAmBA,MAAA,KAAA,CAAK,GAAA,CAAA;AAAA,YAAA;YAE5E,QAAA,yBAATH,mBAAqD,KAArD,YAAqDM,gBAAf,QAAA,QAAQ,GAAA,CAAA;;wBAEhDN,mBAIM,OAAA;AAAA,YAJD,OAAM;AAAA,YAA6B,MAAK;AAAA,YAAO,SAAQ;AAAA,YAAY,gBAAa;AAAA,YAAM,QAAO;AAAA,YAChG,OAAKE,eAAA,CAAC,+EAA6E,EAAA,0BAC/C,QAAA,OAAO,CAAA;AAAA,UAAA;YAC3CD,mBAA0E,QAAA;AAAA,cAApE,kBAAe;AAAA,cAAQ,mBAAgB;AAAA,cAAQ,GAAE;AAAA,YAAA;;;QAG3DA,mBAIM,OAAA;AAAA,mBAJG;AAAA,UAAJ,KAAI;AAAA,UAAe,yBAAU,cAAA,KAAa,uBAAA;AAAA,QAAA;UAC7CA,mBAEM,OAFN,YAEM;AAAA,YADJM,WAAQ,KAAA,QAAA,WAAA,CAAA,GAAA,QAAA,IAAA;AAAA,UAAA;;;;;;"}
+{"version":3,"file":"EpAccordeon.vue2.js","sources":["../../../src/components/interactions/EpAccordeon.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, toRefs, computed, onMounted, onUpdated } from \"vue\";\nimport EpIcon from \"~/components/basics/EpIcon.vue\";\nimport { typeAccordeon } from \"~/types/Accordeon\";\nimport type { EpAccordeonProps } from \"~/types/interactions/EpAccordeon\";\nimport useColors from \"~/composables/useColors\";\n\nconst props = withDefaults(defineProps<EpAccordeonProps>(), {\n  open: false,\n  type: \"base\",\n  outlined: false,\n  title: \"En savoir plus\",\n});\n\nconst showDiv = ref(props.open);\nconst collapsible = ref();\n\nconst isOutlined = computed(() => {\n  if (props.outlined) {\n    return \"outlined\";\n  }\n  return \"default\";\n});\n\nconst stylesHeader = computed(() => {\n  return `flex justify-between items-center px-4 ${props.small ? 'py-1' : 'py-2'\n    } cursor-pointer select-none ${typeAccordeon[props.type]?.[isOutlined.value]}`;\n});\n\nconst stylesHeaderOpen = computed(() => {\n  return showDiv.value ? 'rounded-t' : 'rounded'\n})\n\nconst contentStyles = computed(() => {\n  const colorBorder = useColors(props.type.toLocaleLowerCase(), 'border')\n  return `px-4 bg-surface-2 dark:bg-surface-2-dark border border-t-0 rounded-b ${showDiv.value ? colorBorder : \"border-0\"\n    }`;\n});\n\n\nconst updateHeight = () => {\n  const content = collapsible.value;\n  if (!content) return;\n\n  if (!props.open) {\n    content.style.maxHeight = 0;\n  }\n};\n\nonMounted(updateHeight);\n\n\nfunction toggleDivVisibility() {\n  showDiv.value = !showDiv.value;\n  var content = collapsible.value;\n\n\n  content.style.maxHeight = content.scrollHeight + \"px\";\n  void content.offsetHeight;\n\n  if (content.getBoundingClientRect().height) {\n    content.style.maxHeight = 0;\n  } else {\n    content.style.maxHeight = content.scrollHeight + \"px\";\n  }\n\n}\n\nconst { title, icon, small } = toRefs(props);\n</script>\n\n<template>\n  <div>\n    <div :class=\"`${stylesHeader} ${stylesHeaderOpen}`\" @click=\"toggleDivVisibility\">\n      <div class=\"flex flex-col\">\n        <h3 :class=\"`${small ? 'text' : 'text-lg'} flex items-center`\">\n          <EpIcon v-if=\"icon\" :icon-path=\"icon\" size=\"28\" extraClass=\"mr-2\"></EpIcon>{{ title }}\n        </h3>\n        <p v-if=\"subtitle\" class=\"text-sm\">{{ subtitle }}</p>\n      </div>\n      <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\"\n        class=\"flex-shrink-0 h-6 w-6 mx-4 my-3 transition-transform duration-200 transform\"\n        :class=\"{ 'rotate-45 scale-[1.15]': showDiv }\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 6v12m6-6H6\" />\n      </svg>\n    </div>\n    <div ref=\"collapsible\" :class=\"`${contentStyles} ep-accordeon-content`\">\n      <div class=\"py-3\">\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.ep-accordeon-content {\n  transition: max-height 0.2s ease-out;\n  overflow: hidden;\n}\n</style>\n"],"names":["_createElementBlock","_createElementVNode","_normalizeClass","_unref","_createBlock","EpIcon","subtitle","_toDisplayString","_renderSlot"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAOA,UAAM,QAAQ;AAOd,UAAM,UAAU,IAAI,MAAM,IAAI;AAC9B,UAAM,cAAc,IAAA;AAEpB,UAAM,aAAa,SAAS,MAAM;AAChC,UAAI,MAAM,UAAU;AAClB,eAAO;AAAA,MACT;AACA,aAAO;AAAA,IACT,CAAC;AAED,UAAM,eAAe,SAAS,MAAM;;AAClC,aAAO,0CAA0C,MAAM,QAAQ,SAAS,MACtE,gCAA+B,mBAAc,MAAM,IAAI,MAAxB,mBAA4B,WAAW,MAAM;AAAA,IAChF,CAAC;AAED,UAAM,mBAAmB,SAAS,MAAM;AACtC,aAAO,QAAQ,QAAQ,cAAc;AAAA,IACvC,CAAC;AAED,UAAM,gBAAgB,SAAS,MAAM;AACnC,YAAM,cAAc,UAAU,MAAM,KAAK,kBAAA,GAAqB,QAAQ;AACtE,aAAO,wEAAwE,QAAQ,QAAQ,cAAc,UAC3G;AAAA,IACJ,CAAC;AAGD,UAAM,eAAe,MAAM;AACzB,YAAM,UAAU,YAAY;AAC5B,UAAI,CAAC,QAAS;AAEd,UAAI,CAAC,MAAM,MAAM;AACf,gBAAQ,MAAM,YAAY;AAAA,MAC5B;AAAA,IACF;AAEA,cAAU,YAAY;AAGtB,aAAS,sBAAsB;AAC7B,cAAQ,QAAQ,CAAC,QAAQ;AACzB,UAAI,UAAU,YAAY;AAG1B,cAAQ,MAAM,YAAY,QAAQ,eAAe;AAGjD,UAAI,QAAQ,sBAAA,EAAwB,QAAQ;AAC1C,gBAAQ,MAAM,YAAY;AAAA,MAC5B,OAAO;AACL,gBAAQ,MAAM,YAAY,QAAQ,eAAe;AAAA,MACnD;AAAA,IAEF;AAEA,UAAM,EAAE,OAAO,MAAM,MAAA,IAAU,OAAO,KAAK;;0BAIzCA,mBAmBM,OAAA,MAAA;AAAA,QAlBJC,mBAYM,OAAA;AAAA,UAZA,OAAKC,eAAA,GAAK,aAAA,KAAY,IAAI,iBAAA,KAAgB,EAAA;AAAA,UAAK,SAAO;AAAA,QAAA;UAC1DD,mBAKM,OALN,YAKM;AAAA,YAJJA,mBAEK,MAAA;AAAA,cAFA,yBAAUE,MAAA,KAAA,IAAK,SAAA,SAAA,oBAAA;AAAA,YAAA;cACJA,MAAA,IAAA,kBAAdC,YAA2EC,aAAA;AAAA;gBAAtD,aAAWF,MAAA,IAAA;AAAA,gBAAM,MAAK;AAAA,gBAAK,YAAW;AAAA,cAAA;8CAAmBA,MAAA,KAAA,CAAK,GAAA,CAAA;AAAA,YAAA;YAE5EG,KAAAA,yBAATN,mBAAqD,KAArD,YAAqDO,gBAAfD,KAAAA,QAAQ,GAAA,CAAA;;wBAEhDN,mBAIM,OAAA;AAAA,YAJD,OAAM;AAAA,YAA6B,MAAK;AAAA,YAAO,SAAQ;AAAA,YAAY,gBAAa;AAAA,YAAM,QAAO;AAAA,YAChG,OAAKE,eAAA,CAAC,+EAA6E,EAAA,0BAC/C,QAAA,OAAO,CAAA;AAAA,UAAA;YAC3CD,mBAA0E,QAAA;AAAA,cAApE,kBAAe;AAAA,cAAQ,mBAAgB;AAAA,cAAQ,GAAE;AAAA,YAAA;;;QAG3DA,mBAIM,OAAA;AAAA,mBAJG;AAAA,UAAJ,KAAI;AAAA,UAAe,yBAAU,cAAA,KAAa,uBAAA;AAAA,QAAA;UAC7CA,mBAEM,OAFN,YAEM;AAAA,YADJO,WAAQ,KAAA,QAAA,WAAA,CAAA,GAAA,QAAA,IAAA;AAAA,UAAA;;;;;;"}

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

@@ -1,7 +1,7 @@
 import { defineComponent, computed, ref, createElementBlock, openBlock, Fragment, createElementVNode, createCommentVNode, normalizeStyle, createVNode, unref, withCtx, normalizeProps, guardReactiveProps, toDisplayString, normalizeClass } from "vue";
 import { useVueFlow, VueFlow } from "@vue-flow/core";
 import { useCreateUid } from "../../composables/useCreateUid.js";
-import _sfc_main$1 from "../tools/AssociationNode.vue2.js";
+import _sfc_main$1 from "../tools/AssociationNode.vue.js";
 const _hoisted_1 = {
   key: 0,
   class: "p-2 text-center text-sm text-neutral-300"
@@ -102,9 +102,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       });
     });
     const edges = ref([]);
-    const displayedEdges = computed(
-      () => props.interactive ? edges.value : correctEdges.value
-    );
     const trying = ref(true);
     const solution = ref(false);
     const validating = ref(false);
@@ -116,7 +113,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       edges.value = edges.value.map((edge) => {
         let inside = false;
         for (let correctEdge of correctEdges.value) {
-          if (edge.id == correctEdge.id) inside = true;
+          if (edge.id == correctEdge.id)
+            inside = true;
         }
         if (!inside) {
           incorrectNodes.add(edge.source);
@@ -133,7 +131,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       for (let correctEdge of correctEdges.value) {
         let inside = false;
         for (let edge of edges.value) {
-          if (edge.id == correctEdge.id) inside = true;
+          if (edge.id == correctEdge.id)
+            inside = true;
         }
         if (!inside) {
           incorrectNodes.add(correctEdge.source);
@@ -192,7 +191,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       });
     };
     const onConnect = (connection) => {
-      const newEdge = {
+      let newEdge = {
         id: "e" + connection.source + "->" + connection.target,
         type: "straight",
         source: connection.source,
@@ -240,10 +239,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             onConnect,
             id: unref(id),
             nodes: nodes.value,
-            edges: displayedEdges.value,
+            edges: _ctx.interactive ? edges.value : correctEdges.value,
             "nodes-draggable": false,
             "pan-on-drag": false,
-            "nodes-connectable": __props.interactive && trying.value,
+            "nodes-connectable": _ctx.interactive && trying.value,
             "zoom-on-scroll": false,
             "zoom-on-pinch": false,
             "zoom-on-double-click": false
@@ -254,19 +253,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             _: 1
           }, 8, ["id", "nodes", "edges", "nodes-connectable"])
         ], 4),
-        __props.interactive ? (openBlock(), createElementBlock("div", _hoisted_1, [
-          trying.value ? (openBlock(), createElementBlock("p", _hoisted_2, " Vous pouvez double-clicker sur une arête pour la supprimer. ")) : createCommentVNode("", true),
-          validating.value ? (openBlock(), createElementBlock("p", _hoisted_3, " Les éléments en verts sont corrects et ceux en rouge sont incorrects. ")) : createCommentVNode("", true)
+        _ctx.interactive ? (openBlock(), createElementBlock("div", _hoisted_1, [
+          trying.value ? (openBlock(), createElementBlock("p", _hoisted_2, "Vous pouvez double-clicker sur une arête pour la supprimer.")) : createCommentVNode("", true),
+          validating.value ? (openBlock(), createElementBlock("p", _hoisted_3, "Les éléments en verts sont corrects et ceux en rouge sont incorrects.")) : createCommentVNode("", true)
         ])) : createCommentVNode("", true),
-        __props.interactive ? (openBlock(), createElementBlock("div", _hoisted_4, [
+        _ctx.interactive ? (openBlock(), createElementBlock("div", _hoisted_4, [
           createElementVNode("button", {
             class: "bg-blue-500 text-white px-3 py-2 m-2 rounded-md text-center",
             onClick: _cache[1] || (_cache[1] = ($event) => trying.value ? validate() : retry())
           }, toDisplayString(trying.value ? "Valider" : "Réessayer"), 1),
           createElementVNode("button", {
-            class: normalizeClass(`${__props.mustTry && trying.value ? "bg-blue-300" : "bg-blue-500"} text-white px-3 py-2 m-2 rounded-md text-center`),
+            class: normalizeClass(`${_ctx.mustTry && trying.value ? "bg-blue-300" : "bg-blue-500"} text-white px-3 py-2 m-2 rounded-md text-center`),
             onClick: _cache[2] || (_cache[2] = ($event) => showAnswer()),
-            disabled: __props.mustTry && trying.value
+            disabled: _ctx.mustTry && trying.value
           }, " Voir la réponse ", 10, _hoisted_5)
         ])) : createCommentVNode("", true)
       ], 64);

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

@@ -1 +1 @@
-{"version":3,"file":"EpAssociation.vue.js","sources":["../../../src/components/interactions/EpAssociation.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed } from \"vue\";\nimport type { Node, Connection, EdgeMouseEvent } from \"@vue-flow/core\";\nimport { VueFlow, useVueFlow } from \"@vue-flow/core\";\nimport type { EpAssociationProps } from \"~/types/interactions/EpAssociation\";\nimport { useCreateUid } from \"~/composables/useCreateUid\";\n\nimport AssociationNode from \"../tools/AssociationNode.vue\";\nimport type { LeftOption, RightOption } from \"~/types/Association\";\n\nconst props = withDefaults(defineProps<EpAssociationProps>(), {\n  interactive: false,\n  mustTry: false,\n  random: false,\n});\n\ninterface AssociationEdge {\n  id: string;\n  source: string;\n  target: string;\n  type: string;\n  animated: boolean;\n  updatable: boolean;\n  style?: {\n    stroke?: string;\n    strokeWidth?: number;\n    [key: string]: string | number | undefined;\n  };\n}\n\nconst id = useCreateUid();\n\nconst { fitView, onEdgeDoubleClick } = useVueFlow({ id: id });\n\nconst shuffle = (tab: any) => {\n  for (let i = tab.length - 1; i > 0; i--) {\n    const j = Math.floor(Math.random() * (i + 1));\n    [tab[i], tab[j]] = [tab[j], tab[i]];\n  }\n  return tab;\n};\n\nconst leftNodes = computed<LeftOption[]>(() => {\n  if (props.random) {\n    return shuffle([...props.leftOptions]);\n  }\n  return props.leftOptions;\n});\n\nconst rightNodes = computed<RightOption[]>(() => {\n  if (props.random) {\n    return shuffle([...props.rightOptions]);\n  }\n  return props.rightOptions;\n});\n\n// these are our nodes\nconst initialNodes = computed<Node[]>(() => {\n  let yLeft = 50;\n  let yRight = 50;\n  const GAP = 40;\n\n  let left: Node[] = leftNodes.value.map((option, idx) => {\n    const h = option.height ?? 100;\n    let result = {\n      id: option.uid,\n      type: \"association\",\n      position: { x: 50, y: yLeft },\n      data: {\n        label: option.text,\n        index: idx,\n        left: true,\n      },\n    } as Node;\n\n    yLeft += h + GAP;\n    return result;\n  });\n\n  let right: Node[] = rightNodes.value.map((option, idx) => {\n    const h = option.height ?? 100;\n    const result = {\n      id: option.uid,\n      type: \"association\",\n      position: { x: 550, y: yRight },\n      data: {\n        label: option.text,\n        index: idx,\n        left: false,\n      },\n    } as Node;\n\n    yRight += h + GAP;\n    return result;\n  });\n\n  return [...left, ...right];\n});\n\nconst nodes = ref<Node[]>(initialNodes.value);\n\n// The correct edges\nconst correctEdges = computed<AssociationEdge[]>(() => {\n  return leftNodes.value.flatMap((option) => {\n    return option.answers.map((answer) => {\n      return {\n        id: \"e\" + option.uid + \"->\" + answer,\n        type: \"straight\",\n        source: option.uid,\n        target: answer,\n        animated: false,\n        style: {\n          strokeWidth: 3,\n        },\n        updatable: false,\n      };\n    });\n  });\n});\n\nconst edges = ref<AssociationEdge[]>([]);\nconst displayedEdges = computed<AssociationEdge[]>(() =>\n  props.interactive ? edges.value : correctEdges.value,\n);\n\nconst trying = ref(true);\nconst solution = ref(false);\nconst validating = ref(false);\n\nconst validate = () => {\n  trying.value = false;\n  solution.value = false;\n  validating.value = true;\n\n  // Put the right colors for the validation\n  let incorrectNodes = new Set<string>();\n\n  // Check edges\n  edges.value = edges.value.map((edge) => {\n    let inside = false;\n    for (let correctEdge of correctEdges.value) {\n      if (edge.id == correctEdge.id) inside = true;\n    }\n    if (!inside) {\n      incorrectNodes.add(edge.source);\n      incorrectNodes.add(edge.target);\n    }\n    return {\n      ...edge,\n      style: {\n        ...edge.style,\n        stroke: inside ? \"#16a34a\" : \"#dc2626\",\n      },\n    };\n  });\n\n  for (let correctEdge of correctEdges.value) {\n    let inside = false;\n    for (let edge of edges.value) {\n      if (edge.id == correctEdge.id) inside = true;\n    }\n    if (!inside) {\n      incorrectNodes.add(correctEdge.source);\n      incorrectNodes.add(correctEdge.target);\n    }\n  }\n\n  // Check Nodes\n  nodes.value = nodes.value.map((node: Node) => {\n    console.log(\"here\");\n    if (incorrectNodes.has(node.id))\n      return {\n        ...node,\n        data: {\n          ...node.data,\n          mode: \"wrong\",\n        },\n      };\n    else\n      return {\n        ...node,\n        data: {\n          ...node.data,\n          mode: \"correct\",\n        },\n      };\n  });\n};\n\nconst retry = () => {\n  trying.value = true;\n  solution.value = false;\n  validating.value = false;\n\n  edges.value = [];\n  nodes.value = nodes.value.map((node: Node) => {\n    return {\n      ...node,\n      data: {\n        ...node.data,\n        mode: \"neutral\",\n      },\n    };\n  });\n};\n\nconst showAnswer = () => {\n  fitView();\n\n  solution.value = true;\n  trying.value = false;\n  validating.value = false;\n\n  edges.value = correctEdges.value;\n  nodes.value = nodes.value.map((node: Node) => {\n    return {\n      ...node,\n      data: {\n        ...node.data,\n        mode: \"neutral\",\n      },\n    };\n  });\n};\n\nconst onConnect = (connection: Connection) => {\n  const newEdge: AssociationEdge = {\n    id: \"e\" + connection.source + \"->\" + connection.target,\n    type: \"straight\",\n    source: connection.source,\n    target: connection.target,\n    animated: false,\n    updatable: false,\n    style: {\n      strokeWidth: 3,\n    },\n  };\n  edges.value = [...edges.value, newEdge];\n};\n\nonEdgeDoubleClick((event: EdgeMouseEvent) => {\n  if (trying.value) {\n    edges.value = edges.value.filter((edge) => {\n      return edge.id !== event.edge.id;\n    });\n  }\n  console.log(\"edge double clicked\", event);\n});\n\nconst computedHeight = computed(() => {\n  let GAP = 40;\n  let heightLeft = GAP;\n  let heightRight = GAP;\n\n  leftNodes.value.forEach((option) => {\n    heightLeft += (option.height ?? 100) + GAP;\n  });\n\n  rightNodes.value.forEach((option) => {\n    heightRight += (option.height ?? 100) + GAP;\n  });\n\n  return Math.max(heightLeft, heightRight);\n});\n</script>\n\n<template>\n  <div\n    class=\"border-2 rounded\"\n    :style=\"{ width: '90%', height: computedHeight + 'px', margin: 'auto' }\"\n  >\n    <VueFlow\n      @pane-ready=\"\n        () => {\n          fitView();\n        }\n      \"\n      @connect=\"onConnect\"\n      :id=\"id\"\n      :nodes=\"nodes\"\n      :edges=\"displayedEdges\"\n      :nodes-draggable=\"false\"\n      :pan-on-drag=\"false\"\n      :nodes-connectable=\"interactive && trying\"\n      :zoom-on-scroll=\"false\"\n      :zoom-on-pinch=\"false\"\n      :zoom-on-double-click=\"false\"\n    >\n      <!-- bind the custom node type to the component -->\n      <template #node-association=\"AssociationNodeProps\">\n        <AssociationNode v-bind=\"AssociationNodeProps\" />\n      </template>\n    </VueFlow>\n  </div>\n  <div class=\"p-2 text-center text-sm text-neutral-300\" v-if=\"interactive\">\n    <p v-if=\"trying\">\n      Vous pouvez double-clicker sur une arête pour la supprimer.\n    </p>\n    <p v-if=\"validating\">\n      Les éléments en verts sont corrects et ceux en rouge sont incorrects.\n    </p>\n  </div>\n  <div class=\"flex items-center justify-around\" v-if=\"interactive\">\n    <button\n      class=\"bg-blue-500 text-white px-3 py-2 m-2 rounded-md text-center\"\n      @click=\"trying ? validate() : retry()\"\n    >\n      {{ trying ? \"Valider\" : \"Réessayer\" }}\n    </button>\n\n    <button\n      :class=\"`${mustTry && trying ? 'bg-blue-300' : 'bg-blue-500'} text-white px-3 py-2 m-2 rounded-md text-center`\"\n      @click=\"showAnswer()\"\n      :disabled=\"mustTry && trying\"\n    >\n      Voir la réponse\n    </button>\n  </div>\n</template>\n"],"names":["_createElementVNode","_createVNode","_unref","_withCtx","AssociationNode","_openBlock","_createElementBlock","_normalizeClass"],"mappings":"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"}
+{"version":3,"file":"EpAssociation.vue.js","sources":["../../../src/components/interactions/EpAssociation.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed } from 'vue'\nimport type { Node, Edge, Connection, EdgeMouseEvent } from '@vue-flow/core'  \nimport { VueFlow, useVueFlow } from '@vue-flow/core'\nimport type { EpAssociationProps } from \"~/types/interactions/EpAssociation\";\nimport { useCreateUid } from '~/composables/useCreateUid';\n\nimport AssociationNode from '../tools/AssociationNode.vue';\nimport type { LeftOption, RightOption } from '~/types/Association';\n\nconst props = withDefaults(defineProps<EpAssociationProps>(), {\n    interactive: false,\n    mustTry: false,\n    random: false,\n});\n\nconst id = useCreateUid();\n\nconst { fitView, onEdgeDoubleClick } = useVueFlow({ id: id })\n\nconst shuffle = (tab: any) => {\n  for (let i = tab.length - 1; i > 0; i--) {\n    const j = Math.floor(Math.random() * (i + 1));\n    [tab[i], tab[j]] = [tab[j], tab[i]];\n  }\n  return tab;\n}\n\n\nconst leftNodes = computed<LeftOption[]>(() => {\n    if(props.random) {\n        return shuffle([...props.leftOptions]);\n    }\n    return props.leftOptions;\n});\n\nconst rightNodes = computed<RightOption[]>(() => {\n    if(props.random) {\n        return shuffle([...props.rightOptions]);\n    }\n    return props.rightOptions;\n});\n\n// these are our nodes\nconst initialNodes = computed<Node[]>(() => {\n    let yLeft = 50;\n    let yRight = 50;\n    const GAP = 40;\n\n    let left: Node [] = leftNodes.value.map((option, idx) => {\n        const h = option.height ?? 100;\n        let result = {\n            id: option.uid,\n            type: 'association',\n            position: { x: 50, y: yLeft },\n            data: { \n                label: option.text,\n                index: idx,\n                left: true\n            }\n        } as Node\n\n        yLeft += h + GAP;\n        return result;\n\n    });\n\n    let right: Node [] = rightNodes.value.map((option, idx) => {\n        const h = option.height ?? 100;\n        const result = {\n            id: option.uid,\n            type: 'association',\n            position: { x: 550, y: yRight },\n            data: { \n                label: option.text,\n                index: idx,\n                left: false\n            }\n        } as Node\n\n        yRight += h + GAP;\n        return result;\n    });\n\n    return [...left, ...right];\n})\n\nconst nodes = ref<Node[]>(initialNodes.value)\n\n// The correct edges\nconst correctEdges = computed<Edge[]>(() => {\n    return leftNodes.value.flatMap((option) => {\n        return option.answers.map((answer) => {\n            return {\n                id: 'e' + option.uid + '->' + answer,\n                type: 'straight',\n                source: option.uid,\n                target: answer,\n                animated: false,\n                style: {\n                    strokeWidth: 3,\n                },\n                updatable: false\n            }\n        });\n    })\n});\n\nconst edges = ref<Edge[]>([]);\n\nconst trying = ref(true);\nconst solution = ref(false);\nconst validating = ref(false);\n\nconst validate = () => {\n    trying.value = false;\n    solution.value = false;\n    validating.value = true;\n\n    // Put the right colors for the validation\n    let incorrectNodes = new Set<string>();\n\n    // Check edges\n    edges.value = edges.value.map((edge: Edge) => {\n        let inside = false;\n        for(let correctEdge of correctEdges.value) {\n            if(edge.id == correctEdge.id)\n                inside = true;\n        }\n        if(!inside) {\n            incorrectNodes.add(edge.source);\n            incorrectNodes.add(edge.target);\n        }\n        return {\n            ...edge,\n            style: {\n                ...edge.style,\n                stroke: inside ? '#16a34a' : '#dc2626'\n            }\n        }\n    });\n\n    for(let correctEdge of correctEdges.value) {\n        let inside = false;\n        for(let edge of edges.value) {\n            if(edge.id == correctEdge.id)\n                inside = true;\n        }\n        if(!inside) {\n            incorrectNodes.add(correctEdge.source);\n            incorrectNodes.add(correctEdge.target);\n        }\n    }\n\n    // Check Nodes\n    nodes.value = nodes.value.map((node: Node) => {\n        console.log('here')\n        if(incorrectNodes.has(node.id)) \n            return {\n                ...node,\n                data: {\n                    ...node.data,\n                    mode: 'wrong'\n                }\n            }\n        else\n            return {\n                ...node,\n                data: {\n                    ...node.data,\n                    mode: 'correct'\n                }\n            }\n    })\n}\n\nconst retry = () => {\n    trying.value = true;\n    solution.value = false;\n    validating.value = false;\n\n    edges.value = [];\n    nodes.value = nodes.value.map((node: Node) => { \n        return {\n            ...node,\n            data: {\n                ...node.data,\n                mode: 'neutral'\n            }\n        }\n    });\n}\n\nconst showAnswer = () => {\n    fitView();\n\n    solution.value = true;\n    trying.value = false;\n    validating.value = false;\n\n    edges.value = correctEdges.value;\n    nodes.value = nodes.value.map((node: Node) => { \n        return {\n            ...node,\n            data: {\n                ...node.data,\n                mode: 'neutral'\n            }\n        }\n    });\n}\n\nconst onConnect = (connection: Connection) => {\n    let newEdge: Edge = {\n        id: 'e' + connection.source + '->' + connection.target,\n        type: 'straight',\n        source: connection.source,\n        target: connection.target,\n        animated: false,\n        updatable: false,\n        style: {\n            strokeWidth: 3,\n        },\n    }\n    edges.value = [...edges.value, newEdge]\n}\n\n\nonEdgeDoubleClick((event: EdgeMouseEvent) => {\n    if(trying.value) {\n        edges.value = edges.value.filter((edge: Edge) => {\n            return edge.id !== event.edge.id\n        })\n    }\n    console.log('edge double clicked', event)\n})\n\nconst computedHeight = computed(() => {\n    let GAP = 40;\n    let heightLeft = GAP;\n    let heightRight = GAP;\n\n    leftNodes.value.forEach((option) => {\n        heightLeft += (option.height ?? 100) + GAP;\n    });\n\n    rightNodes.value.forEach((option) => {\n        heightRight += (option.height ?? 100) + GAP;\n    });\n\n    return Math.max(heightLeft, heightRight);\n})\n\n</script>\n\n<template>\n    <div class=\"border-2 rounded\" :style=\"{ width: '90%', height: computedHeight + 'px', margin: 'auto' }\">\n        <VueFlow \n            @pane-ready=\"() => { fitView() }\"\n            @connect = \"onConnect\"\n\n            :id=\"id\"\n            :nodes=\"nodes\" \n            :edges=\"(interactive)? edges : correctEdges\"\n            :nodes-draggable=\"false\"\n            :pan-on-drag=\"false\"\n            :nodes-connectable=\"interactive && trying\"\n            :zoom-on-scroll=\"false\"\n            :zoom-on-pinch=\"false\"\n            :zoom-on-double-click=\"false\"\n        >\n            <!-- bind the custom node type to the component -->\n            <template #node-association=\"AssociationNodeProps\">\n                <AssociationNode v-bind=\"AssociationNodeProps\" />\n            </template>\n        </VueFlow>\n    </div>\n    <div class=\"p-2 text-center text-sm text-neutral-300\" v-if=\"interactive\">\n        <p v-if=\"trying\">Vous pouvez double-clicker sur une arête pour la supprimer.</p>\n        <p v-if=\"validating\">Les éléments en verts sont corrects et ceux en rouge sont incorrects.</p>\n    </div>\n    <div class=\"flex items-center justify-around\" v-if=\"interactive\">\n        <button\n            class=\"bg-blue-500 text-white px-3 py-2 m-2 rounded-md text-center\"\n            @click=\"(trying)? validate() : retry()\"\n        >\n            {{(trying)? 'Valider' : 'Réessayer'}}\n        </button>\n\n        <button\n            :class=\"`${(mustTry && trying)? 'bg-blue-300' : 'bg-blue-500'} text-white px-3 py-2 m-2 rounded-md text-center`\"\n            @click=\"showAnswer()\" \n            :disabled=\"(mustTry && trying)\"\n        >\n            Voir la réponse\n        </button>\n    </div>\n</template>\n\n"],"names":["_createElementVNode","_createVNode","_unref","interactive","_withCtx","AssociationNode","_openBlock","_createElementBlock","_normalizeClass","mustTry"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAUA,UAAM,QAAQ;AAMd,UAAM,KAAK,aAAA;AAEX,UAAM,EAAE,SAAS,kBAAA,IAAsB,WAAW,EAAE,IAAQ;AAE5D,UAAM,UAAU,CAAC,QAAa;AAC5B,eAAS,IAAI,IAAI,SAAS,GAAG,IAAI,GAAG,KAAK;AACvC,cAAM,IAAI,KAAK,MAAM,KAAK,YAAY,IAAI,EAAE;AAC5C,SAAC,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;AAAA,MACpC;AACA,aAAO;AAAA,IACT;AAGA,UAAM,YAAY,SAAuB,MAAM;AAC3C,UAAG,MAAM,QAAQ;AACb,eAAO,QAAQ,CAAC,GAAG,MAAM,WAAW,CAAC;AAAA,MACzC;AACA,aAAO,MAAM;AAAA,IACjB,CAAC;AAED,UAAM,aAAa,SAAwB,MAAM;AAC7C,UAAG,MAAM,QAAQ;AACb,eAAO,QAAQ,CAAC,GAAG,MAAM,YAAY,CAAC;AAAA,MAC1C;AACA,aAAO,MAAM;AAAA,IACjB,CAAC;AAGD,UAAM,eAAe,SAAiB,MAAM;AACxC,UAAI,QAAQ;AACZ,UAAI,SAAS;AACb,YAAM,MAAM;AAEZ,UAAI,OAAgB,UAAU,MAAM,IAAI,CAAC,QAAQ,QAAQ;;AACrD,cAAM,KAAI,YAAO,WAAP,YAAiB;AAC3B,YAAI,SAAS;AAAA,UACT,IAAI,OAAO;AAAA,UACX,MAAM;AAAA,UACN,UAAU,EAAE,GAAG,IAAI,GAAG,MAAA;AAAA,UACtB,MAAM;AAAA,YACF,OAAO,OAAO;AAAA,YACd,OAAO;AAAA,YACP,MAAM;AAAA,UAAA;AAAA,QACV;AAGJ,iBAAS,IAAI;AACb,eAAO;AAAA,MAEX,CAAC;AAED,UAAI,QAAiB,WAAW,MAAM,IAAI,CAAC,QAAQ,QAAQ;;AACvD,cAAM,KAAI,YAAO,WAAP,YAAiB;AAC3B,cAAM,SAAS;AAAA,UACX,IAAI,OAAO;AAAA,UACX,MAAM;AAAA,UACN,UAAU,EAAE,GAAG,KAAK,GAAG,OAAA;AAAA,UACvB,MAAM;AAAA,YACF,OAAO,OAAO;AAAA,YACd,OAAO;AAAA,YACP,MAAM;AAAA,UAAA;AAAA,QACV;AAGJ,kBAAU,IAAI;AACd,eAAO;AAAA,MACX,CAAC;AAED,aAAO,CAAC,GAAG,MAAM,GAAG,KAAK;AAAA,IAC7B,CAAC;AAED,UAAM,QAAQ,IAAY,aAAa,KAAK;AAG5C,UAAM,eAAe,SAAiB,MAAM;AACxC,aAAO,UAAU,MAAM,QAAQ,CAAC,WAAW;AACvC,eAAO,OAAO,QAAQ,IAAI,CAAC,WAAW;AAClC,iBAAO;AAAA,YACH,IAAI,MAAM,OAAO,MAAM,OAAO;AAAA,YAC9B,MAAM;AAAA,YACN,QAAQ,OAAO;AAAA,YACf,QAAQ;AAAA,YACR,UAAU;AAAA,YACV,OAAO;AAAA,cACH,aAAa;AAAA,YAAA;AAAA,YAEjB,WAAW;AAAA,UAAA;AAAA,QAEnB,CAAC;AAAA,MACL,CAAC;AAAA,IACL,CAAC;AAED,UAAM,QAAQ,IAAY,EAAE;AAE5B,UAAM,SAAS,IAAI,IAAI;AACvB,UAAM,WAAW,IAAI,KAAK;AAC1B,UAAM,aAAa,IAAI,KAAK;AAE5B,UAAM,WAAW,MAAM;AACnB,aAAO,QAAQ;AACf,eAAS,QAAQ;AACjB,iBAAW,QAAQ;AAGnB,UAAI,qCAAqB,IAAA;AAGzB,YAAM,QAAQ,MAAM,MAAM,IAAI,CAAC,SAAe;AAC1C,YAAI,SAAS;AACb,iBAAQ,eAAe,aAAa,OAAO;AACvC,cAAG,KAAK,MAAM,YAAY;AACtB,qBAAS;AAAA,QACjB;AACA,YAAG,CAAC,QAAQ;AACR,yBAAe,IAAI,KAAK,MAAM;AAC9B,yBAAe,IAAI,KAAK,MAAM;AAAA,QAClC;AACA,eAAO;AAAA,UACH,GAAG;AAAA,UACH,OAAO;AAAA,YACH,GAAG,KAAK;AAAA,YACR,QAAQ,SAAS,YAAY;AAAA,UAAA;AAAA,QACjC;AAAA,MAER,CAAC;AAED,eAAQ,eAAe,aAAa,OAAO;AACvC,YAAI,SAAS;AACb,iBAAQ,QAAQ,MAAM,OAAO;AACzB,cAAG,KAAK,MAAM,YAAY;AACtB,qBAAS;AAAA,QACjB;AACA,YAAG,CAAC,QAAQ;AACR,yBAAe,IAAI,YAAY,MAAM;AACrC,yBAAe,IAAI,YAAY,MAAM;AAAA,QACzC;AAAA,MACJ;AAGA,YAAM,QAAQ,MAAM,MAAM,IAAI,CAAC,SAAe;AAC1C,gBAAQ,IAAI,MAAM;AAClB,YAAG,eAAe,IAAI,KAAK,EAAE;AACzB,iBAAO;AAAA,YACH,GAAG;AAAA,YACH,MAAM;AAAA,cACF,GAAG,KAAK;AAAA,cACR,MAAM;AAAA,YAAA;AAAA,UACV;AAAA;AAGJ,iBAAO;AAAA,YACH,GAAG;AAAA,YACH,MAAM;AAAA,cACF,GAAG,KAAK;AAAA,cACR,MAAM;AAAA,YAAA;AAAA,UACV;AAAA,MAEZ,CAAC;AAAA,IACL;AAEA,UAAM,QAAQ,MAAM;AAChB,aAAO,QAAQ;AACf,eAAS,QAAQ;AACjB,iBAAW,QAAQ;AAEnB,YAAM,QAAQ,CAAA;AACd,YAAM,QAAQ,MAAM,MAAM,IAAI,CAAC,SAAe;AAC1C,eAAO;AAAA,UACH,GAAG;AAAA,UACH,MAAM;AAAA,YACF,GAAG,KAAK;AAAA,YACR,MAAM;AAAA,UAAA;AAAA,QACV;AAAA,MAER,CAAC;AAAA,IACL;AAEA,UAAM,aAAa,MAAM;AACrB,cAAA;AAEA,eAAS,QAAQ;AACjB,aAAO,QAAQ;AACf,iBAAW,QAAQ;AAEnB,YAAM,QAAQ,aAAa;AAC3B,YAAM,QAAQ,MAAM,MAAM,IAAI,CAAC,SAAe;AAC1C,eAAO;AAAA,UACH,GAAG;AAAA,UACH,MAAM;AAAA,YACF,GAAG,KAAK;AAAA,YACR,MAAM;AAAA,UAAA;AAAA,QACV;AAAA,MAER,CAAC;AAAA,IACL;AAEA,UAAM,YAAY,CAAC,eAA2B;AAC1C,UAAI,UAAgB;AAAA,QAChB,IAAI,MAAM,WAAW,SAAS,OAAO,WAAW;AAAA,QAChD,MAAM;AAAA,QACN,QAAQ,WAAW;AAAA,QACnB,QAAQ,WAAW;AAAA,QACnB,UAAU;AAAA,QACV,WAAW;AAAA,QACX,OAAO;AAAA,UACH,aAAa;AAAA,QAAA;AAAA,MACjB;AAEJ,YAAM,QAAQ,CAAC,GAAG,MAAM,OAAO,OAAO;AAAA,IAC1C;AAGA,sBAAkB,CAAC,UAA0B;AACzC,UAAG,OAAO,OAAO;AACb,cAAM,QAAQ,MAAM,MAAM,OAAO,CAAC,SAAe;AAC7C,iBAAO,KAAK,OAAO,MAAM,KAAK;AAAA,QAClC,CAAC;AAAA,MACL;AACA,cAAQ,IAAI,uBAAuB,KAAK;AAAA,IAC5C,CAAC;AAED,UAAM,iBAAiB,SAAS,MAAM;AAClC,UAAI,MAAM;AACV,UAAI,aAAa;AACjB,UAAI,cAAc;AAElB,gBAAU,MAAM,QAAQ,CAAC,WAAW;;AAChC,wBAAe,YAAO,WAAP,YAAiB,OAAO;AAAA,MAC3C,CAAC;AAED,iBAAW,MAAM,QAAQ,CAAC,WAAW;;AACjC,yBAAgB,YAAO,WAAP,YAAiB,OAAO;AAAA,MAC5C,CAAC;AAED,aAAO,KAAK,IAAI,YAAY,WAAW;AAAA,IAC3C,CAAC;;;QAKGA,mBAoBM,OAAA;AAAA,UApBD,OAAM;AAAA,UAAoB,8CAA+B,eAAA,QAAc,MAAA,QAAA,OAAA,CAAA;AAAA,QAAA;UACxEC,YAkBUC,MAAA,OAAA,GAAA;AAAA,YAjBL;AAAoBA,oBAAA,OAAA,EAAA;AAAA,YAAO;AAAA,YAC3B;AAAA,YAEA,IAAIA,MAAA,EAAA;AAAA,YACJ,OAAO,MAAA;AAAA,YACP,OAAQC,KAAAA,cAAc,MAAA,QAAQ,aAAA;AAAA,YAC9B,mBAAiB;AAAA,YACjB,eAAa;AAAA,YACb,qBAAmBA,KAAAA,eAAe,OAAA;AAAA,YAClC,kBAAgB;AAAA,YAChB,iBAAe;AAAA,YACf,wBAAsB;AAAA,UAAA;YAGZ,oBAAgBC,QACvB,CAAiD,yBADJ;AAAA,cAC7CH,YAAiDI,+CAAxB,oBAAoB,CAAA,GAAA,MAAA,EAAA;AAAA,YAAA;;;;QAIGF,KAAAA,eAA5DG,UAAA,GAAAC,mBAGM,OAHN,YAGM;AAAA,UAFO,OAAA,SAATD,UAAA,GAAAC,mBAAgF,iBAA/D,6DAA2D;UACnE,WAAA,SAATD,UAAA,GAAAC,mBAA8F,iBAAzE,uEAAqE;;QAE1CJ,KAAAA,eAApDG,UAAA,GAAAC,mBAeM,OAfN,YAeM;AAAA,UAdFP,mBAKS,UAAA;AAAA,YAJL,OAAM;AAAA,YACL,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAG,OAAA,QAAS,SAAA,IAAa,MAAA;AAAA,UAAK,mBAEjC,OAAA,QAAM,YAAA,WAAA,GAAA,CAAA;AAAA,UAGbA,mBAMS,UAAA;AAAA,YALJ,OAAKQ,eAAA,GAAMC,KAAAA,WAAW,OAAA,QAAM,gBAAA,aAAA,kDAAA;AAAA,YAC5B,+CAAO;YACP,UAAWA,KAAAA,WAAW,OAAA;AAAA,UAAA,GAC1B,qBAED,IAAA,UAAA;AAAA,QAAA;;;;;"}

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

@@ -42,7 +42,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return props.slides[currentIndex.value];
     });
     const dynamicComponents = /* @__PURE__ */ Object.assign({
-      "../basics/EpAvatar.vue": () => import("../basics/EpAvatar.vue.js"),
+      "../basics/EpAvatar.vue": () => import("../basics/EpAvatar.vue2.js"),
       "../basics/EpBadge.vue": () => import("../basics/EpBadge.vue.js"),
       "../basics/EpBtn.vue": () => import("../basics/EpBtn.vue2.js"),
       "../basics/EpCard.vue": () => import("../basics/EpCard.vue2.js"),
@@ -84,7 +84,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       "../forms/EpCheckbox.vue": () => import("../forms/EpCheckbox.vue.js"),
       "../forms/EpInput.vue": () => import("../forms/EpInput.vue.js"),
       "../forms/EpRadio.vue": () => import("../forms/EpRadio.vue.js"),
-      "../forms/EpRadioSummative.vue": () => import("../forms/EpRadioSummative.vue.js"),
+      "../forms/EpRadioSummative.vue": () => import("../forms/EpRadioSummative.vue2.js"),
       "../forms/EpSelect.vue": () => import("../forms/EpSelect.vue2.js"),
       "../forms/EpSwitch.vue": () => import("../forms/EpSwitch.vue.js"),
       "../forms/EpTextarea.vue": () => import("../forms/EpTextarea.vue.js"),
@@ -266,7 +266,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 }, [
                   currentSlide.value.component ? (openBlock(), createBlock(Suspense, { key: 0 }, {
                     fallback: withCtx(() => [
-                      createTextVNode(toDisplayString(__props.loading), 1)
+                      createTextVNode(toDisplayString(_ctx.loading), 1)
                     ]),
                     default: withCtx(() => [
                       (openBlock(), createBlock(resolveDynamicComponent(currentSlideMediaContent.value), mergeProps({ ...currentSlide.value.component.data }, { class: "max-h-full max-w-full object-contain" }), null, 16))

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

@@ -1 +1 @@
-{"version":3,"file":"EpContentSlider.vue.js","sources":["../../../src/components/interactions/EpContentSlider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ref,\n  computed,\n  defineAsyncComponent,\n} from \"vue\";\nimport { useComponent } from \"~/composables/useComponent\";\nimport { mdiArrowLeft, mdiArrowRight } from \"@mdi/js\";\nimport EpIcon from \"~/components/basics/EpIcon.vue\";\nimport type { EpContentSliderProps } from \"~/types/interactions/EpContentSlider\";\nimport { type SlidesType, type SizeCols } from \"~/types/Slides\";\nimport RenderTextNode from \"~/components/tools/RenderTextNode.vue\";\nconst props = withDefaults(defineProps<EpContentSliderProps>(), {\n  loading: \"...loading\",\n  noData: \"No data available\",\n  mediaPosition: \"left\",\n  titleSize: \"md\"\n});\n\nconst isLoading = ref(false);\n\n//slide information\nconst currentSlide = computed<SlidesType>(() => {\n  if (!props.slides || props.slides.length === 0) {\n    return {\n      title: props.noData,\n      img: \"\",\n      uid: 2,\n      content: \"\",\n      component: null,\n      layoutRatio: \"50/50\"\n    };\n  }\n  return props.slides[currentIndex.value];\n});\n\n//nested components \nconst dynamicComponents = import.meta.glob(\n  '../{basics,educationals,charts,forms,interactions,signages,medias}/**/*.vue'\n) as Record<string, () => Promise<{ default: any }>>;\n\nfunction resolveAsyncByName(name: string) {\n  for (const [path, loader] of Object.entries(dynamicComponents)) {\n    if (path.endsWith(`/${name}.vue`)) {\n      // ensure the loader returns the component itself (module.default)\n      return defineAsyncComponent(() => loader().then((m) => m.default));\n    }\n  }\n  return null\n}\n\nconst currentSlideMediaContent = computed(() => {\n  if (currentSlide.value.img) {\n    //EFFACER UNE FOIS TOUS LES COURS ONT ÉTÉ MIGRÉS \n    return defineAsyncComponent(() => import(\"../basics/EpImg.vue\"));\n  }\n  if (currentSlide.value.component) {\n    const { name } = useComponent(currentSlide.value.component.type)\n    return resolveAsyncByName(name)\n  }\n  return null\n});\n\n//col system and render slide \nconst layoutMode = computed(() => {\n  const slide = currentSlide.value;\n  const hasMedia = !!(slide.img || slide.component);\n  const hasContent = !!(slide.content && slide.content.trim());\n  return {\n    type: hasMedia && hasContent ? 'two-cols'\n      : hasMedia ? 'media-only'\n        : hasContent ? 'content-only'\n          : 'empty',\n    hasMedia,\n    hasContent,\n    switchCol: slide.switchCol || false,\n    gap: slide.gap || 'gap-6', // default gap\n    leftCol: slide.leftCol || 'w-1/2' // default 50/50\n  };\n});\n\n\n//rigth col based on left \nconst getRightColWidth = computed(() => {\n  const leftCol = layoutMode.value.leftCol as SizeCols;\n\n  // Map left width to corresponding right width\n  const widthMap: Record<SizeCols, string> = {\n    'w-1/5': 'w-4/5',\n    'w-2/5': 'w-3/5',\n    'w-3/5': 'w-2/5',\n    'w-4/5': 'w-1/5',\n    'w-full': 'w-1/2' // 50/50\n  };\n\n  return widthMap[leftCol];\n});\n\n// Title size classes\nconst getTitleClasses = computed(() => {\n  const base = 'font-bold ep-text-primary mb-3'\n  switch (props.titleSize) {\n    case 'sm': return `${base} text-xl`\n    case 'lg': return `${base} text-4xl`\n    case 'md':\n    default: return `${base} text-2xl`\n  }\n});\n\n\n\n\n\n\n//control navigation \nconst currentIndex = ref(0);\nconst max = computed(() => currentIndex.value < props.slides.length - 1);\n\nconst next = async () => {\n  isLoading.value = true;\n  if (max.value) {\n    currentIndex.value += 1;\n  }\n  isLoading.value = false;\n};\n\nconst prev = async () => {\n  isLoading.value = true;\n  if (currentIndex.value > 0) {\n    currentIndex.value -= 1;\n  }\n  isLoading.value = false;\n};\n\nconst goTo = (index: number) => (currentIndex.value = index);\n\n\n</script>\n\n<template>\n  <div\n    class=\"relative h-[600px] flex flex-col p-6 w-full overflow-hidden rounded-lg shadow-xl bg-surface-2 dark:bg-surface-2-dark\">\n    <!-- Header section with navigation -->\n    <div class=\"flex justify-between items-center pb-3 mb-3 border-b-2 border-gray-600 dark:border-gray-300\">\n      <h5 :class=\"getTitleClasses\">{{ currentSlide.title }}</h5>\n      <div class=\"flex items-center space-x-3\" v-if=\"props.slides.length\">\n        <!-- Bullets -->\n        <div class=\"flex space-x-2\">\n          <span v-for=\"(_, i) in props.slides.length\" :key=\"`slide-index-${i}`\" @click=\"goTo(i)\" :class=\"[\n            'w-2 h-2 rounded-full cursor-pointer',\n            i === currentIndex ? 'bg-primary' : 'bg-surface-2-dark dark:bg-surface-2',\n          ]\" />\n        </div>\n\n        <!-- Controls -->\n        <div class=\"flex space-x-2\">\n          <button class=\"nav-btn\" @click=\"prev\" :disabled=\"currentIndex === 0\">\n            <EpIcon :icon-path=\"mdiArrowLeft\" size=\"24\" />\n          </button>\n          <button class=\"nav-btn\" @click=\"next\" :disabled=\"!max\">\n            <EpIcon :icon-path=\"mdiArrowRight\" size=\"24\" />\n          </button>\n        </div>\n        <span class=\"text-sm\">{{ currentIndex + 1 }} / {{ props.slides.length }}</span>\n      </div>\n    </div>\n\n    <!-- Slider content -->\n    <div class=\"flex flex-1 min-h-0 justify-center overflow-hidden\">\n      <transition name=\"slide-fade\" mode=\"out-in\">\n        <div class=\"flex w-full h-full\" :class=\"[\n          layoutMode.type === 'two-cols' && !layoutMode.switchCol ? `flex-row ${layoutMode.gap}` : '',\n          layoutMode.type === 'two-cols' && layoutMode.switchCol ? `flex-row-reverse ${layoutMode.gap}` : '',\n          layoutMode.type !== 'two-cols' ? 'justify-center items-center' : ''\n        ]\">\n          <!-- Media column (left when normal, right when switched) -->\n          <div v-if=\"layoutMode.hasMedia\" :class=\"layoutMode.type === 'two-cols'\n            ? (layoutMode.switchCol ? getRightColWidth : layoutMode.leftCol)\n            : 'w-full'\">\n            <template v-if=\"currentSlide.component\">\n              <Suspense>\n                <component :is=\"currentSlideMediaContent\" v-bind=\"{ ...currentSlide.component.data }\"\n                  class=\"max-h-full max-w-full object-contain\" />\n                <template #fallback>{{ loading }}</template>\n              </Suspense>\n            </template>\n          </div>\n\n          <!-- Content column (right when normal, left when switched) -->\n          <div v-if=\"layoutMode.hasContent\" :class=\"[\n            'h-full',\n            layoutMode.type === 'two-cols'\n              ? (layoutMode.switchCol ? layoutMode.leftCol : getRightColWidth)\n              : 'w-full'\n          ]\">\n            <div class=\"h-full overflow-y-auto overflow-x-hidden pr-2\" :key=\"currentSlide.uid\">\n              <RenderTextNode :content=\"currentSlide.content\"/>\n            </div>\n          </div>\n        </div>\n      </transition>\n    </div>\n\n    <!-- Progress bar -->\n    <div class=\"mt-4 h-2 w-full bg-gray-300 rounded-full flex-shrink-0\">\n      <div class=\"bg-primary h-full rounded-full transition-all duration-300\" :style=\"{\n        width: ((currentIndex + 1) / props.slides.length) * 100 + '%',\n      }\" />\n    </div>\n  </div>\n</template>\n"],"names":["_openBlock","_createElementBlock","_createElementVNode","_toDisplayString","_Fragment","_renderList","_normalizeClass","_createVNode","EpIcon","_unref","_Transition","_createBlock","_Suspense","_resolveDynamicComponent","_mergeProps","RenderTextNode","_normalizeStyle"],"mappings":"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"}
+{"version":3,"file":"EpContentSlider.vue.js","sources":["../../../src/components/interactions/EpContentSlider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ref,\n  computed,\n  defineAsyncComponent,\n} from \"vue\";\nimport { useComponent } from \"~/composables/useComponent\";\nimport { mdiArrowLeft, mdiArrowRight } from \"@mdi/js\";\nimport EpIcon from \"~/components/basics/EpIcon.vue\";\nimport type { EpContentSliderProps } from \"~/types/interactions/EpContentSlider\";\nimport { type SlidesType, type SizeCols } from \"~/types/Slides\";\nimport RenderTextNode from \"~/components/tools/RenderTextNode.vue\";\nconst props = withDefaults(defineProps<EpContentSliderProps>(), {\n  loading: \"...loading\",\n  noData: \"No data available\",\n  mediaPosition: \"left\",\n  titleSize: \"md\"\n});\n\nconst isLoading = ref(false);\n\n//slide information\nconst currentSlide = computed<SlidesType>(() => {\n  if (!props.slides || props.slides.length === 0) {\n    return {\n      title: props.noData,\n      img: \"\",\n      uid: 2,\n      content: \"\",\n      component: null,\n      layoutRatio: \"50/50\"\n    };\n  }\n  return props.slides[currentIndex.value];\n});\n\n//nested components \nconst dynamicComponents = import.meta.glob(\n  '../{basics,educationals,charts,forms,interactions,signages,medias}/**/*.vue'\n) as Record<string, () => Promise<{ default: any }>>;\n\nfunction resolveAsyncByName(name: string) {\n  for (const [path, loader] of Object.entries(dynamicComponents)) {\n    if (path.endsWith(`/${name}.vue`)) {\n      // ensure the loader returns the component itself (module.default)\n      return defineAsyncComponent(() => loader().then((m) => m.default));\n    }\n  }\n  return null\n}\n\nconst currentSlideMediaContent = computed(() => {\n  if (currentSlide.value.img) {\n    //EFFACER UNE FOIS TOUS LES COURS ONT ÉTÉ MIGRÉS \n    return defineAsyncComponent(() => import(\"../basics/EpImg.vue\"));\n  }\n  if (currentSlide.value.component) {\n    const { name } = useComponent(currentSlide.value.component.type)\n    return resolveAsyncByName(name)\n  }\n  return null\n});\n\n//col system and render slide \nconst layoutMode = computed(() => {\n  const slide = currentSlide.value;\n  const hasMedia = !!(slide.img || slide.component);\n  const hasContent = !!(slide.content && slide.content.trim());\n  return {\n    type: hasMedia && hasContent ? 'two-cols'\n      : hasMedia ? 'media-only'\n        : hasContent ? 'content-only'\n          : 'empty',\n    hasMedia,\n    hasContent,\n    switchCol: slide.switchCol || false,\n    gap: slide.gap || 'gap-6', // default gap\n    leftCol: slide.leftCol || 'w-1/2' // default 50/50\n  };\n});\n\n\n//rigth col based on left \nconst getRightColWidth = computed(() => {\n  const leftCol = layoutMode.value.leftCol as SizeCols;\n\n  // Map left width to corresponding right width\n  const widthMap: Record<SizeCols, string> = {\n    'w-1/5': 'w-4/5',\n    'w-2/5': 'w-3/5',\n    'w-3/5': 'w-2/5',\n    'w-4/5': 'w-1/5',\n    'w-full': 'w-1/2' // 50/50\n  };\n\n  return widthMap[leftCol];\n});\n\n// Title size classes\nconst getTitleClasses = computed(() => {\n  const base = 'font-bold ep-text-primary mb-3'\n  switch (props.titleSize) {\n    case 'sm': return `${base} text-xl`\n    case 'lg': return `${base} text-4xl`\n    case 'md':\n    default: return `${base} text-2xl`\n  }\n});\n\n\n\n\n\n\n//control navigation \nconst currentIndex = ref(0);\nconst max = computed(() => currentIndex.value < props.slides.length - 1);\n\nconst next = async () => {\n  isLoading.value = true;\n  if (max.value) {\n    currentIndex.value += 1;\n  }\n  isLoading.value = false;\n};\n\nconst prev = async () => {\n  isLoading.value = true;\n  if (currentIndex.value > 0) {\n    currentIndex.value -= 1;\n  }\n  isLoading.value = false;\n};\n\nconst goTo = (index: number) => (currentIndex.value = index);\n\n\n</script>\n\n<template>\n  <div\n    class=\"relative h-[600px] flex flex-col p-6 w-full overflow-hidden rounded-lg shadow-xl bg-surface-2 dark:bg-surface-2-dark\">\n    <!-- Header section with navigation -->\n    <div class=\"flex justify-between items-center pb-3 mb-3 border-b-2 border-gray-600 dark:border-gray-300\">\n      <h5 :class=\"getTitleClasses\">{{ currentSlide.title }}</h5>\n      <div class=\"flex items-center space-x-3\" v-if=\"props.slides.length\">\n        <!-- Bullets -->\n        <div class=\"flex space-x-2\">\n          <span v-for=\"(_, i) in props.slides.length\" :key=\"`slide-index-${i}`\" @click=\"goTo(i)\" :class=\"[\n            'w-2 h-2 rounded-full cursor-pointer',\n            i === currentIndex ? 'bg-primary' : 'bg-surface-2-dark dark:bg-surface-2',\n          ]\" />\n        </div>\n\n        <!-- Controls -->\n        <div class=\"flex space-x-2\">\n          <button class=\"nav-btn\" @click=\"prev\" :disabled=\"currentIndex === 0\">\n            <EpIcon :icon-path=\"mdiArrowLeft\" size=\"24\" />\n          </button>\n          <button class=\"nav-btn\" @click=\"next\" :disabled=\"!max\">\n            <EpIcon :icon-path=\"mdiArrowRight\" size=\"24\" />\n          </button>\n        </div>\n        <span class=\"text-sm\">{{ currentIndex + 1 }} / {{ props.slides.length }}</span>\n      </div>\n    </div>\n\n    <!-- Slider content -->\n    <div class=\"flex flex-1 min-h-0 justify-center overflow-hidden\">\n      <transition name=\"slide-fade\" mode=\"out-in\">\n        <div class=\"flex w-full h-full\" :class=\"[\n          layoutMode.type === 'two-cols' && !layoutMode.switchCol ? `flex-row ${layoutMode.gap}` : '',\n          layoutMode.type === 'two-cols' && layoutMode.switchCol ? `flex-row-reverse ${layoutMode.gap}` : '',\n          layoutMode.type !== 'two-cols' ? 'justify-center items-center' : ''\n        ]\">\n          <!-- Media column (left when normal, right when switched) -->\n          <div v-if=\"layoutMode.hasMedia\" :class=\"layoutMode.type === 'two-cols'\n            ? (layoutMode.switchCol ? getRightColWidth : layoutMode.leftCol)\n            : 'w-full'\">\n            <template v-if=\"currentSlide.component\">\n              <Suspense>\n                <component :is=\"currentSlideMediaContent\" v-bind=\"{ ...currentSlide.component.data }\"\n                  class=\"max-h-full max-w-full object-contain\" />\n                <template #fallback>{{ loading }}</template>\n              </Suspense>\n            </template>\n          </div>\n\n          <!-- Content column (right when normal, left when switched) -->\n          <div v-if=\"layoutMode.hasContent\" :class=\"[\n            'h-full',\n            layoutMode.type === 'two-cols'\n              ? (layoutMode.switchCol ? layoutMode.leftCol : getRightColWidth)\n              : 'w-full'\n          ]\">\n            <div class=\"h-full overflow-y-auto overflow-x-hidden pr-2\" :key=\"currentSlide.uid\">\n              <RenderTextNode :content=\"currentSlide.content\"/>\n            </div>\n          </div>\n        </div>\n      </transition>\n    </div>\n\n    <!-- Progress bar -->\n    <div class=\"mt-4 h-2 w-full bg-gray-300 rounded-full flex-shrink-0\">\n      <div class=\"bg-primary h-full rounded-full transition-all duration-300\" :style=\"{\n        width: ((currentIndex + 1) / props.slides.length) * 100 + '%',\n      }\" />\n    </div>\n  </div>\n</template>\n"],"names":["_openBlock","_createElementBlock","_createElementVNode","_toDisplayString","_Fragment","_renderList","_normalizeClass","_createVNode","EpIcon","_unref","_Transition","_createBlock","_Suspense","loading","_resolveDynamicComponent","_mergeProps","RenderTextNode","_normalizeStyle"],"mappings":"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"}

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

@@ -88,18 +88,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       var _a, _b, _c, _d;
       return hasContent.value ? (openBlock(), createElementBlock("div", {
         key: 0,
-        class: normalizeClass(`relative perspective-1000 cursor-pointer ${heightStyle.value} my-3 ${__props.inline ? `inline-block ${__props.maxWidth} align-bottom m-3 w-full` : __props.thumbnail ? "inline-block align-bottom m-3 " + styleSizeThumbnail.value : "flex items-center justify-center w-full"}`),
+        class: normalizeClass(`relative perspective-1000 cursor-pointer ${heightStyle.value} my-3 ${_ctx.inline ? `inline-block ${_ctx.maxWidth} align-bottom m-3 w-full` : _ctx.thumbnail ? "inline-block align-bottom m-3 " + styleSizeThumbnail.value : "flex items-center justify-center w-full"}`),
         onClick: _cache[2] || (_cache[2] = () => {
-          if (__props.trigger === "click") toggle();
+          if (_ctx.trigger === "click") toggle();
         })
       }, [
         createElementVNode("div", {
-          class: normalizeClass(`${__props.maxWidth} h-full relative w-full`),
+          class: normalizeClass(`${_ctx.maxWidth} h-full relative w-full`),
           onMouseenter: _cache[0] || (_cache[0] = () => {
-            if (__props.trigger === "hover") flipped.value = true;
+            if (_ctx.trigger === "hover") flipped.value = true;
           }),
           onMouseleave: _cache[1] || (_cache[1] = () => {
-            if (__props.trigger === "hover") flipped.value = false;
+            if (_ctx.trigger === "hover") flipped.value = false;
           })
         }, [
           createElementVNode("div", {
@@ -109,39 +109,39 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             createElementVNode("div", {
               class: normalizeClass(`${stylesCard.value} ${!props.front.bgImg && !props.front.bgColor ? "bg-surface-2 dark:bg-surface-2-dark" : ""} absolute inset-0 w-full h-full backface-hidden overflow-y-auto
                     bg-cover bg-center dark:text-white`),
-              style: normalizeStyle({ color: (_a = __props.front.textColor) != null ? _a : void 0, backgroundImage: gradientFront.value, backgroundColor: __props.front.bgImg || !__props.front.bgColor ? void 0 : __props.front.bgColor })
+              style: normalizeStyle({ color: (_a = _ctx.front.textColor) != null ? _a : void 0, backgroundImage: gradientFront.value, backgroundColor: _ctx.front.bgImg || !_ctx.front.bgColor ? void 0 : _ctx.front.bgColor })
             }, [
-              __props.front.title || __props.front.subtitle ? (openBlock(), createElementBlock("div", _hoisted_1, [
-                createElementVNode("h3", _hoisted_2, toDisplayString(__props.front.title), 1),
-                createElementVNode("h4", _hoisted_3, toDisplayString(__props.front.subtitle), 1)
+              _ctx.front.title || _ctx.front.subtitle ? (openBlock(), createElementBlock("div", _hoisted_1, [
+                createElementVNode("h3", _hoisted_2, toDisplayString(_ctx.front.title), 1),
+                createElementVNode("h4", _hoisted_3, toDisplayString(_ctx.front.subtitle), 1)
               ])) : createCommentVNode("", true),
               createElementVNode("div", {
-                innerHTML: unref(useRenderText)((_b = __props.front.content) != null ? _b : "")
+                innerHTML: unref(useRenderText)((_b = _ctx.front.content) != null ? _b : "")
               }, null, 8, _hoisted_4)
             ], 6),
             createElementVNode("div", {
               class: normalizeClass(`${stylesCard.value} ${!props.back.bgImg && !props.back.bgColor ? "bg-surface-2 dark:bg-surface-2-dark" : ""} absolute inset-0 w-full h-full rotate-y-180 backface-hidden overflow-y-auto
                     bg-cover bg-center  dark:text-white`),
-              style: normalizeStyle({ color: (_c = __props.back.textColor) != null ? _c : void 0, backgroundImage: gradientBack.value, backgroundColor: __props.back.bgImg || !__props.back.bgColor ? void 0 : __props.back.bgColor })
+              style: normalizeStyle({ color: (_c = _ctx.back.textColor) != null ? _c : void 0, backgroundImage: gradientBack.value, backgroundColor: _ctx.back.bgImg || !_ctx.back.bgColor ? void 0 : _ctx.back.bgColor })
             }, [
-              __props.back.title || __props.back.subtitle ? (openBlock(), createElementBlock("div", _hoisted_5, [
-                createElementVNode("h3", _hoisted_6, toDisplayString(__props.back.title), 1),
-                createElementVNode("h4", _hoisted_7, toDisplayString(__props.back.subtitle), 1)
+              _ctx.back.title || _ctx.back.subtitle ? (openBlock(), createElementBlock("div", _hoisted_5, [
+                createElementVNode("h3", _hoisted_6, toDisplayString(_ctx.back.title), 1),
+                createElementVNode("h4", _hoisted_7, toDisplayString(_ctx.back.subtitle), 1)
               ])) : createCommentVNode("", true),
               createElementVNode("div", {
-                innerHTML: unref(useRenderText)((_d = __props.back.content) != null ? _d : "")
+                innerHTML: unref(useRenderText)((_d = _ctx.back.content) != null ? _d : "")
               }, null, 8, _hoisted_8)
             ], 6)
           ], 2),
           createVNode(Transition, { name: "fade" }, {
             default: withCtx(() => [
-              !__props.noIndicator ? (openBlock(), createElementBlock("div", _hoisted_9, [
+              !_ctx.noIndicator ? (openBlock(), createElementBlock("div", _hoisted_9, [
                 createVNode(_sfc_main$1, {
                   "icon-path": unref(mdiRotate360),
                   class: normalizeClass(`w-3.5 h-3.5 shrink-0 transition-transform duration-500
                         ${flipped.value ? "rotate-180" : ""}`)
                 }, null, 8, ["icon-path", "class"]),
-                createElementVNode("span", _hoisted_10, toDisplayString(__props.trigger === "hover" ? "Survoler" : "Cliquer"), 1)
+                createElementVNode("span", _hoisted_10, toDisplayString(_ctx.trigger === "hover" ? "Survoler" : "Cliquer"), 1)
               ])) : createCommentVNode("", true)
             ]),
             _: 1

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

@@ -1 +1 @@
-{"version":3,"file":"EpFlipCard.vue2.js","sources":["../../../src/components/interactions/EpFlipCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref} from 'vue'\n\nimport type { EpFlipCardProps } from \"~/types/interactions/EpFlipCard\";\nimport { mdiRotate360 } from '@mdi/js';\nimport EpIcon from '../basics/EpIcon.vue';\nimport { density_style, sizeCardThumbnailStyle } from '~/types/Card';\nimport { useColorMode } from '@vueuse/core';\nimport { useRenderText } from '~/composables/useRenderText';\n\nconst props = withDefaults(defineProps<EpFlipCardProps>(), {\n    trigger: \"click\",\n    noIndicator: false,\n    density: \"default\",\n    maxWidth: \"max-w-xl\",\n    height: \"medium\",\n    front: () => ({\n        content: \"\",\n        bgImg: \"\",\n        bgColor: null,\n        textColor: null,\n    }),\n    back: () => ({\n        content: \"\",\n        bgImg: \"\",\n        bgColor: null,\n        textColor: null,\n    }),\n    thumbnail: false,\n    sizeThumbnail: \"medium\",\n    inline: false\n});\n\nconst flipped = ref(false);\nconst toggle = () => {\n    flipped.value = !flipped.value\n}\n\n\nconst stylesCard = computed(() => {\n  return `\n    shadow-lg \n    ${density_style[props.density]}\n    rounded-md\n    `;\n});\n\nconst heightStyle = computed(() => {\n    return (props.height === \"small\") ? \"h-72\" : (props.height === \"medium\") ? \"h-96\" : \"h-[612px]\" \n});\n\n\nconst hasContent = computed(() => {\n  return !!props.front.content || !!props.back.content || !!props.front.title || !!props.front.subtitle || !!props.back.title || !!props.back.subtitle;\n});\n\n\nconst darkMode = useColorMode();\n\nconst gradientFront = computed(() => {\n  if (!props.front.bgImg) return undefined;\n  const color = (darkMode.value === \"dark\") ? \"rgba(0,0,0,0.75)\" : \"rgba(255,255,255,0.8)\";\n  return `linear-gradient(to bottom, ${color}, ${color}), url(${props.front.bgImg})`;\n});\n\nconst gradientBack = computed(() => {\n  if (!props.back.bgImg) return undefined;\n  const color = (darkMode.value === \"dark\") ? \"rgba(0,0,0,0.75)\" : \"rgba(255,255,255,0.8)\";\n  return `linear-gradient(to bottom, ${color}, ${color}), url(${props.back.bgImg})`;\n});\n\nconst styleSizeThumbnail = computed(() => {\n  return sizeCardThumbnailStyle[props.sizeThumbnail];\n});\n\n</script>\n\n<template>\n    <div \n        :class=\"`relative perspective-1000 cursor-pointer ${heightStyle} my-3 ${inline? `inline-block ${maxWidth} align-bottom m-3 w-full` : thumbnail? ('inline-block align-bottom m-3 ' + styleSizeThumbnail) : 'flex items-center justify-center w-full'}`\" \n        v-if=\"hasContent\"\n        @click=\"() => {if(trigger === 'click') toggle()}\"\n    >   \n        <div \n            :class=\"`${maxWidth} h-full relative w-full`\"\n            @mouseenter=\"() => { if (trigger === 'hover') flipped = true }\"\n            @mouseleave=\"() => { if (trigger === 'hover') flipped = false }\"\n        >\n            <!-- Rotator -->\n            <div\n                :class=\"`relative w-full h-full transition-transform duration-500 preserve-3d\n                ${flipped ? 'rotate-y-180' : ''}`\"\n            >\n                <!-- Front card -->\n                <div \n                    :class=\"`${stylesCard} ${(!props.front.bgImg && !props.front.bgColor) ? 'bg-surface-2 dark:bg-surface-2-dark' : ''} absolute inset-0 w-full h-full backface-hidden overflow-y-auto\n                    bg-cover bg-center dark:text-white`\"\n                    :style=\"{ color: (front.textColor) ?? undefined, backgroundImage: gradientFront, backgroundColor: (front.bgImg || !front.bgColor)? undefined : front.bgColor}\"\n                >\n                    <div\n                        v-if=\"front.title || front.subtitle\"\n                        class=\"mb-2\"\n                    >\n                        <h3 class=\"text-2xl font-bold\">{{ front.title }}</h3>\n                        <h4 :class=\"`text-xs`\">\n                            {{ front.subtitle }}\n                        </h4>\n                    </div>\n                    <div v-html=\"useRenderText(front.content ?? '')\"></div>\n                </div>\n                <!-- Back card -->\n                <div\n                    :class=\"`${stylesCard} ${(!props.back.bgImg && !props.back.bgColor) ? 'bg-surface-2 dark:bg-surface-2-dark' : ''} absolute inset-0 w-full h-full rotate-y-180 backface-hidden overflow-y-auto\n                    bg-cover bg-center  dark:text-white`\"\n                    :style=\"{ color: (back.textColor) ?? undefined, backgroundImage: gradientBack, backgroundColor: (back.bgImg || !back.bgColor)? undefined : back.bgColor}\"\n                >\n                    <div\n                        v-if=\"back.title || back.subtitle\"\n                        class=\"mb-2\"\n                    >\n                        <h3 class=\"text-2xl font-bold\">{{ back.title }}</h3>\n                        <h4 :class=\"`text-xs`\">\n                            {{ back.subtitle }}\n                        </h4>\n                    </div>\n                    <div v-html=\"useRenderText(back.content ?? '')\"></div>\n                </div>\n            </div>\n\n            <!-- Indicator -->\n            <transition name=\"fade\">\n                <div v-if=\"!noIndicator\"\n                    class=\"absolute bottom-2 right-2 flex items-center gap-1\n                            px-2 py-1 rounded-full bg-black/70 text-white text-[10px] font-medium\n                            pointer-events-none select-none\">\n                    <EpIcon\n                        :icon-path=\"mdiRotate360\"\n                        :class=\"`w-3.5 h-3.5 shrink-0 transition-transform duration-500\n                        ${flipped ? 'rotate-180' : ''}`\"\n                    />\n                    <span class=\"leading-none\">\n                        {{ trigger==='hover' ? 'Survoler' : 'Cliquer' }}\n                    </span>\n                </div>\n            </transition>\n        </div>\n    </div>\n</template>\n\n<style scoped>\n.perspective-1000 { perspective: 1000px }\n.preserve-3d      { transform-style: preserve-3d }\n.backface-hidden  { backface-visibility: hidden }\n.rotate-y-180     { transform: rotateY(180deg) }\n\n/* simple fade for the helper badge */\n.fade-enter-active, .fade-leave-active { transition: opacity .3s }\n.fade-enter-from,  .fade-leave-to      { opacity: 0 }\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_createElementVNode","_normalizeStyle","_openBlock","_toDisplayString","_unref","_createVNode","_Transition","EpIcon"],"mappings":"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"}
+{"version":3,"file":"EpFlipCard.vue2.js","sources":["../../../src/components/interactions/EpFlipCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref} from 'vue'\n\nimport type { EpFlipCardProps } from \"~/types/interactions/EpFlipCard\";\nimport { mdiRotate360 } from '@mdi/js';\nimport EpIcon from '../basics/EpIcon.vue';\nimport { density_style, sizeCardThumbnailStyle } from '~/types/Card';\nimport { useColorMode } from '@vueuse/core';\nimport { useRenderText } from '~/composables/useRenderText';\n\nconst props = withDefaults(defineProps<EpFlipCardProps>(), {\n    trigger: \"click\",\n    noIndicator: false,\n    density: \"default\",\n    maxWidth: \"max-w-xl\",\n    height: \"medium\",\n    front: () => ({\n        content: \"\",\n        bgImg: \"\",\n        bgColor: null,\n        textColor: null,\n    }),\n    back: () => ({\n        content: \"\",\n        bgImg: \"\",\n        bgColor: null,\n        textColor: null,\n    }),\n    thumbnail: false,\n    sizeThumbnail: \"medium\",\n    inline: false\n});\n\nconst flipped = ref(false);\nconst toggle = () => {\n    flipped.value = !flipped.value\n}\n\n\nconst stylesCard = computed(() => {\n  return `\n    shadow-lg \n    ${density_style[props.density]}\n    rounded-md\n    `;\n});\n\nconst heightStyle = computed(() => {\n    return (props.height === \"small\") ? \"h-72\" : (props.height === \"medium\") ? \"h-96\" : \"h-[612px]\" \n});\n\n\nconst hasContent = computed(() => {\n  return !!props.front.content || !!props.back.content || !!props.front.title || !!props.front.subtitle || !!props.back.title || !!props.back.subtitle;\n});\n\n\nconst darkMode = useColorMode();\n\nconst gradientFront = computed(() => {\n  if (!props.front.bgImg) return undefined;\n  const color = (darkMode.value === \"dark\") ? \"rgba(0,0,0,0.75)\" : \"rgba(255,255,255,0.8)\";\n  return `linear-gradient(to bottom, ${color}, ${color}), url(${props.front.bgImg})`;\n});\n\nconst gradientBack = computed(() => {\n  if (!props.back.bgImg) return undefined;\n  const color = (darkMode.value === \"dark\") ? \"rgba(0,0,0,0.75)\" : \"rgba(255,255,255,0.8)\";\n  return `linear-gradient(to bottom, ${color}, ${color}), url(${props.back.bgImg})`;\n});\n\nconst styleSizeThumbnail = computed(() => {\n  return sizeCardThumbnailStyle[props.sizeThumbnail];\n});\n\n</script>\n\n<template>\n    <div \n        :class=\"`relative perspective-1000 cursor-pointer ${heightStyle} my-3 ${inline? `inline-block ${maxWidth} align-bottom m-3 w-full` : thumbnail? ('inline-block align-bottom m-3 ' + styleSizeThumbnail) : 'flex items-center justify-center w-full'}`\" \n        v-if=\"hasContent\"\n        @click=\"() => {if(trigger === 'click') toggle()}\"\n    >   \n        <div \n            :class=\"`${maxWidth} h-full relative w-full`\"\n            @mouseenter=\"() => { if (trigger === 'hover') flipped = true }\"\n            @mouseleave=\"() => { if (trigger === 'hover') flipped = false }\"\n        >\n            <!-- Rotator -->\n            <div\n                :class=\"`relative w-full h-full transition-transform duration-500 preserve-3d\n                ${flipped ? 'rotate-y-180' : ''}`\"\n            >\n                <!-- Front card -->\n                <div \n                    :class=\"`${stylesCard} ${(!props.front.bgImg && !props.front.bgColor) ? 'bg-surface-2 dark:bg-surface-2-dark' : ''} absolute inset-0 w-full h-full backface-hidden overflow-y-auto\n                    bg-cover bg-center dark:text-white`\"\n                    :style=\"{ color: (front.textColor) ?? undefined, backgroundImage: gradientFront, backgroundColor: (front.bgImg || !front.bgColor)? undefined : front.bgColor}\"\n                >\n                    <div\n                        v-if=\"front.title || front.subtitle\"\n                        class=\"mb-2\"\n                    >\n                        <h3 class=\"text-2xl font-bold\">{{ front.title }}</h3>\n                        <h4 :class=\"`text-xs`\">\n                            {{ front.subtitle }}\n                        </h4>\n                    </div>\n                    <div v-html=\"useRenderText(front.content ?? '')\"></div>\n                </div>\n                <!-- Back card -->\n                <div\n                    :class=\"`${stylesCard} ${(!props.back.bgImg && !props.back.bgColor) ? 'bg-surface-2 dark:bg-surface-2-dark' : ''} absolute inset-0 w-full h-full rotate-y-180 backface-hidden overflow-y-auto\n                    bg-cover bg-center  dark:text-white`\"\n                    :style=\"{ color: (back.textColor) ?? undefined, backgroundImage: gradientBack, backgroundColor: (back.bgImg || !back.bgColor)? undefined : back.bgColor}\"\n                >\n                    <div\n                        v-if=\"back.title || back.subtitle\"\n                        class=\"mb-2\"\n                    >\n                        <h3 class=\"text-2xl font-bold\">{{ back.title }}</h3>\n                        <h4 :class=\"`text-xs`\">\n                            {{ back.subtitle }}\n                        </h4>\n                    </div>\n                    <div v-html=\"useRenderText(back.content ?? '')\"></div>\n                </div>\n            </div>\n\n            <!-- Indicator -->\n            <transition name=\"fade\">\n                <div v-if=\"!noIndicator\"\n                    class=\"absolute bottom-2 right-2 flex items-center gap-1\n                            px-2 py-1 rounded-full bg-black/70 text-white text-[10px] font-medium\n                            pointer-events-none select-none\">\n                    <EpIcon\n                        :icon-path=\"mdiRotate360\"\n                        :class=\"`w-3.5 h-3.5 shrink-0 transition-transform duration-500\n                        ${flipped ? 'rotate-180' : ''}`\"\n                    />\n                    <span class=\"leading-none\">\n                        {{ trigger==='hover' ? 'Survoler' : 'Cliquer' }}\n                    </span>\n                </div>\n            </transition>\n        </div>\n    </div>\n</template>\n\n<style scoped>\n.perspective-1000 { perspective: 1000px }\n.preserve-3d      { transform-style: preserve-3d }\n.backface-hidden  { backface-visibility: hidden }\n.rotate-y-180     { transform: rotateY(180deg) }\n\n/* simple fade for the helper badge */\n.fade-enter-active, .fade-leave-active { transition: opacity .3s }\n.fade-enter-from,  .fade-leave-to      { opacity: 0 }\n</style>\n"],"names":["_createElementBlock","_normalizeClass","inline","maxWidth","thumbnail","trigger","_createElementVNode","_normalizeStyle","front","_openBlock","_toDisplayString","_unref","back","_createVNode","_Transition","noIndicator","EpIcon"],"mappings":"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"}

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

@@ -78,7 +78,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               createElementVNode("button", {
                 onClick: closeModal,
                 class: "mt-4 bg-primary text-white px-2 py-1 text-sm"
-              }, toDisplayString(__props.labels.fermer), 1)
+              }, toDisplayString(_ctx.labels.fermer), 1)
             ])
           ])) : createCommentVNode("", true)
         ])

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

@@ -1 +1 @@
-{"version":3,"file":"EpHotSpot.vue.js","sources":["../../../src/components/interactions/EpHotSpot.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed, toRefs } from \"vue\";\nimport type { EpHotSpotProps } from \"~/types/interactions/EpHotSpot\";\n\nconst props = withDefaults(defineProps<EpHotSpotProps>(), {\n  labels: () => {\n    return {\n      fermer: \"Fermer\",\n    };\n  },\n});\n\nconst { title, imageURL } = toRefs(props);\n\nconst hotsPots = computed(() => {\n  if (props.infoButtons) {\n    return props.infoButtons.map((button) => {\n      let transform = `translateX(-50%)`;\n\n      if (button.horizontalPosition === 0) transform = ``;\n      else if (button.horizontalPosition === 100)\n        transform = `translateX(-100%)`;\n      if (button.verticalPosition === 100)\n        transform = `translateY(-100%) ${transform}`;\n\n      const position = `transform: ${transform}; top: ${button.verticalPosition}%; left: ${button.horizontalPosition}%;`;\n\n      return { ...button, position };\n    });\n  }\n  return [];\n});\n\nconst modalOpen = ref(false);\nconst displayContent = ref(\"\");\nconst titleDisplay = ref(\"\");\n\nconst openModal = (title: string, content: string) => {\n  modalOpen.value = true;\n  displayContent.value = content;\n  titleDisplay.value = title;\n};\n\nconst closeModal = () => {\n  modalOpen.value = false;\n  displayContent.value = \"\";\n};\n</script>\n\n<template>\n  <div>\n    <h2 class=\"text-xl font-bold\">{{ title }}</h2>\n    <div class=\"relative\">\n      <img :src=\"imageURL\" :alt=\"`l'image de ${title}`\" />\n      <template v-for=\"spot in hotsPots\" :key=\"spot.id\">\n        <button\n          @click=\"openModal(spot.title, spot.content)\"\n          :class=\"`absolute text-white px-4 py-2 shadow-md bg-primary`\"\n          :style=\"`${spot.position}`\"\n        >\n          +\n        </button>\n      </template>\n      <div\n        v-if=\"modalOpen\"\n        class=\"absolute inset-0 flex items-center justify-center bg-black bg-opacity-5 px-2\"\n      >\n        <div class=\"mx-2 bg-white p-2 shadow-md\">\n          <h4>{{ titleDisplay }}</h4>\n          <div v-html=\"displayContent\" class=\"text-sm\" />\n          <button\n            @click=\"closeModal\"\n            class=\"mt-4 bg-primary text-white px-2 py-1 text-sm\"\n          >\n            {{ labels.fermer }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n"],"names":["title","_createElementBlock","_createElementVNode","_toDisplayString","_unref","_Fragment","_renderList","_normalizeStyle","_openBlock"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAIA,UAAM,QAAQ;AAQd,UAAM,EAAE,OAAO,aAAa,OAAO,KAAK;AAExC,UAAM,WAAW,SAAS,MAAM;AAC9B,UAAI,MAAM,aAAa;AACrB,eAAO,MAAM,YAAY,IAAI,CAAC,WAAW;AACvC,cAAI,YAAY;AAEhB,cAAI,OAAO,uBAAuB,EAAG,aAAY;AAAA,mBACxC,OAAO,uBAAuB;AACrC,wBAAY;AACd,cAAI,OAAO,qBAAqB;AAC9B,wBAAY,qBAAqB,SAAS;AAE5C,gBAAM,WAAW,cAAc,SAAS,UAAU,OAAO,gBAAgB,YAAY,OAAO,kBAAkB;AAE9G,iBAAO,EAAE,GAAG,QAAQ,SAAA;AAAA,QACtB,CAAC;AAAA,MACH;AACA,aAAO,CAAA;AAAA,IACT,CAAC;AAED,UAAM,YAAY,IAAI,KAAK;AAC3B,UAAM,iBAAiB,IAAI,EAAE;AAC7B,UAAM,eAAe,IAAI,EAAE;AAE3B,UAAM,YAAY,CAACA,QAAe,YAAoB;AACpD,gBAAU,QAAQ;AAClB,qBAAe,QAAQ;AACvB,mBAAa,QAAQA;AAAAA,IACvB;AAEA,UAAM,aAAa,MAAM;AACvB,gBAAU,QAAQ;AAClB,qBAAe,QAAQ;AAAA,IACzB;;0BAIEC,mBA6BM,OAAA,MAAA;AAAA,QA5BJC,mBAA8C,MAA9C,YAA8CC,gBAAbC,MAAA,KAAA,CAAK,GAAA,CAAA;AAAA,QACtCF,mBA0BM,OA1BN,YA0BM;AAAA,UAzBJA,mBAAoD,OAAA;AAAA,YAA9C,KAAKE,MAAA,QAAA;AAAA,YAAW,mBAAmBA,MAAA,KAAA,CAAK;AAAA,UAAA;4BAC9CH,mBAQWI,UAAA,MAAAC,WARc,SAAA,OAAQ,CAAhB,SAAI;gCACnBL,mBAMS,UAAA;AAAA,cAP8B,KAAA,KAAK;AAAA,cAEzC,SAAK,CAAA,WAAE,UAAU,KAAK,OAAO,KAAK,OAAO;AAAA,cACzC,sBAAO,oDAAoD;AAAA,cAC3D,OAAKM,eAAA,GAAK,KAAK,QAAQ,EAAA;AAAA,YAAA,GACzB,OAED,IAAA,UAAA;AAAA;UAGM,UAAA,SADRC,UAAA,GAAAP,mBAcM,OAdN,YAcM;AAAA,YAVJC,mBASM,OATN,YASM;AAAA,cARJA,mBAA2B,4BAApB,aAAA,KAAY,GAAA,CAAA;AAAA,cACnBA,mBAA+C,OAAA;AAAA,gBAA1C,WAAQ,eAAA;AAAA,gBAAgB,OAAM;AAAA,cAAA;cACnCA,mBAKS,UAAA;AAAA,gBAJN,SAAO;AAAA,gBACR,OAAM;AAAA,cAAA,GAEHC,gBAAA,QAAA,OAAO,MAAM,GAAA,CAAA;AAAA,YAAA;;;;;;;"}
+{"version":3,"file":"EpHotSpot.vue.js","sources":["../../../src/components/interactions/EpHotSpot.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed, toRefs } from \"vue\";\nimport type { EpHotSpotProps } from \"~/types/interactions/EpHotSpot\";\n\nconst props = withDefaults(defineProps<EpHotSpotProps>(), {\n  labels: () => {\n    return {\n      fermer: \"Fermer\",\n    };\n  },\n});\n\nconst { title, imageURL } = toRefs(props);\n\nconst hotsPots = computed(() => {\n  if (props.infoButtons) {\n    return props.infoButtons.map((button) => {\n      let transform = `translateX(-50%)`;\n\n      if (button.horizontalPosition === 0) transform = ``;\n      else if (button.horizontalPosition === 100)\n        transform = `translateX(-100%)`;\n      if (button.verticalPosition === 100)\n        transform = `translateY(-100%) ${transform}`;\n\n      const position = `transform: ${transform}; top: ${button.verticalPosition}%; left: ${button.horizontalPosition}%;`;\n\n      return { ...button, position };\n    });\n  }\n  return [];\n});\n\nconst modalOpen = ref(false);\nconst displayContent = ref(\"\");\nconst titleDisplay = ref(\"\");\n\nconst openModal = (title: string, content: string) => {\n  modalOpen.value = true;\n  displayContent.value = content;\n  titleDisplay.value = title;\n};\n\nconst closeModal = () => {\n  modalOpen.value = false;\n  displayContent.value = \"\";\n};\n</script>\n\n<template>\n  <div>\n    <h2 class=\"text-xl font-bold\">{{ title }}</h2>\n    <div class=\"relative\">\n      <img :src=\"imageURL\" :alt=\"`l'image de ${title}`\" />\n      <template v-for=\"spot in hotsPots\" :key=\"spot.id\">\n        <button\n          @click=\"openModal(spot.title, spot.content)\"\n          :class=\"`absolute text-white px-4 py-2 shadow-md bg-primary`\"\n          :style=\"`${spot.position}`\"\n        >\n          +\n        </button>\n      </template>\n      <div\n        v-if=\"modalOpen\"\n        class=\"absolute inset-0 flex items-center justify-center bg-black bg-opacity-5 px-2\"\n      >\n        <div class=\"mx-2 bg-white p-2 shadow-md\">\n          <h4>{{ titleDisplay }}</h4>\n          <div v-html=\"displayContent\" class=\"text-sm\" />\n          <button\n            @click=\"closeModal\"\n            class=\"mt-4 bg-primary text-white px-2 py-1 text-sm\"\n          >\n            {{ labels.fermer }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n"],"names":["title","_createElementBlock","_createElementVNode","_toDisplayString","_unref","_Fragment","_renderList","_normalizeStyle","_openBlock","labels"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAIA,UAAM,QAAQ;AAQd,UAAM,EAAE,OAAO,aAAa,OAAO,KAAK;AAExC,UAAM,WAAW,SAAS,MAAM;AAC9B,UAAI,MAAM,aAAa;AACrB,eAAO,MAAM,YAAY,IAAI,CAAC,WAAW;AACvC,cAAI,YAAY;AAEhB,cAAI,OAAO,uBAAuB,EAAG,aAAY;AAAA,mBACxC,OAAO,uBAAuB;AACrC,wBAAY;AACd,cAAI,OAAO,qBAAqB;AAC9B,wBAAY,qBAAqB,SAAS;AAE5C,gBAAM,WAAW,cAAc,SAAS,UAAU,OAAO,gBAAgB,YAAY,OAAO,kBAAkB;AAE9G,iBAAO,EAAE,GAAG,QAAQ,SAAA;AAAA,QACtB,CAAC;AAAA,MACH;AACA,aAAO,CAAA;AAAA,IACT,CAAC;AAED,UAAM,YAAY,IAAI,KAAK;AAC3B,UAAM,iBAAiB,IAAI,EAAE;AAC7B,UAAM,eAAe,IAAI,EAAE;AAE3B,UAAM,YAAY,CAACA,QAAe,YAAoB;AACpD,gBAAU,QAAQ;AAClB,qBAAe,QAAQ;AACvB,mBAAa,QAAQA;AAAAA,IACvB;AAEA,UAAM,aAAa,MAAM;AACvB,gBAAU,QAAQ;AAClB,qBAAe,QAAQ;AAAA,IACzB;;0BAIEC,mBA6BM,OAAA,MAAA;AAAA,QA5BJC,mBAA8C,MAA9C,YAA8CC,gBAAbC,MAAA,KAAA,CAAK,GAAA,CAAA;AAAA,QACtCF,mBA0BM,OA1BN,YA0BM;AAAA,UAzBJA,mBAAoD,OAAA;AAAA,YAA9C,KAAKE,MAAA,QAAA;AAAA,YAAW,mBAAmBA,MAAA,KAAA,CAAK;AAAA,UAAA;4BAC9CH,mBAQWI,UAAA,MAAAC,WARc,SAAA,OAAQ,CAAhB,SAAI;gCACnBL,mBAMS,UAAA;AAAA,cAP8B,KAAA,KAAK;AAAA,cAEzC,SAAK,CAAA,WAAE,UAAU,KAAK,OAAO,KAAK,OAAO;AAAA,cACzC,sBAAO,oDAAoD;AAAA,cAC3D,OAAKM,eAAA,GAAK,KAAK,QAAQ,EAAA;AAAA,YAAA,GACzB,OAED,IAAA,UAAA;AAAA;UAGM,UAAA,SADRC,UAAA,GAAAP,mBAcM,OAdN,YAcM;AAAA,YAVJC,mBASM,OATN,YASM;AAAA,cARJA,mBAA2B,4BAApB,aAAA,KAAY,GAAA,CAAA;AAAA,cACnBA,mBAA+C,OAAA;AAAA,gBAA1C,WAAQ,eAAA;AAAA,gBAAgB,OAAM;AAAA,cAAA;cACnCA,mBAKS,UAAA;AAAA,gBAJN,SAAO;AAAA,gBACR,OAAM;AAAA,cAAA,GAEHO,gBAAAA,KAAAA,OAAO,MAAM,GAAA,CAAA;AAAA,YAAA;;;;;;;"}

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

@@ -65,8 +65,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         ref_key: "containerRef",
         ref: containerRef,
-        class: normalizeClass(["relative overflow-hidden select-none", { "rounded-xl": __props.rounded }]),
-        style: normalizeStyle({ height: __props.height }),
+        class: normalizeClass(["relative overflow-hidden select-none", { "rounded-xl": _ctx.rounded }]),
+        style: normalizeStyle({ height: _ctx.height }),
         onMousemove: onMouseMove,
         onMouseup: onMouseUp,
         onMouseleave: onMouseUp,
@@ -74,20 +74,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         onTouchend: onTouchEnd
       }, [
         createElementVNode("img", {
-          src: __props.imageAfter,
+          src: _ctx.imageAfter,
           class: "absolute inset-0 w-full h-full object-cover",
           draggable: "false",
           alt: ""
         }, null, 8, _hoisted_1),
         createElementVNode("img", {
-          src: __props.imageBefore,
+          src: _ctx.imageBefore,
           class: "absolute inset-0 w-full h-full object-cover",
           style: normalizeStyle({ clipPath: `inset(0 ${100 - position.value}% 0 0)` }),
           draggable: "false",
           alt: ""
         }, null, 12, _hoisted_2),
-        __props.labelBefore ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(__props.labelBefore), 1)) : createCommentVNode("", true),
-        __props.labelAfter ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(__props.labelAfter), 1)) : createCommentVNode("", true),
+        _ctx.labelBefore ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(_ctx.labelBefore), 1)) : createCommentVNode("", true),
+        _ctx.labelAfter ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(_ctx.labelAfter), 1)) : createCommentVNode("", true),
         createElementVNode("div", {
           class: "absolute top-0 h-full flex flex-col items-center cursor-ew-resize",
           style: normalizeStyle({ left: position.value + "%", transform: "translateX(-50%)" }),

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

@@ -1 +1 @@
-{"version":3,"file":"EpImageCompare.vue.js","sources":["../../../src/components/interactions/EpImageCompare.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { mdiChevronLeft, mdiChevronRight } from '@mdi/js'\nimport type { EpImageCompareProps } from '~/types/interactions/EpImageCompare'\n\nconst props = withDefaults(defineProps<EpImageCompareProps>(), {\n  labelBefore: null,\n  labelAfter: null,\n  initialPosition: 50,\n  height: '400px',\n  rounded: false,\n})\n\nconst position = ref(props.initialPosition)\nconst isDragging = ref(false)\nconst containerRef = ref<HTMLElement | null>(null)\n\nfunction getPosition(clientX: number) {\n  if (!containerRef.value) return\n  const rect = containerRef.value.getBoundingClientRect()\n  const x = Math.max(0, Math.min(clientX - rect.left, rect.width))\n  position.value = (x / rect.width) * 100\n}\n\nfunction onMouseDown() { isDragging.value = true }\nfunction onMouseMove(e: MouseEvent) { if (isDragging.value) getPosition(e.clientX) }\nfunction onMouseUp() { isDragging.value = false }\nfunction onTouchStart() { isDragging.value = true }\nfunction onTouchMove(e: TouchEvent) { if (isDragging.value) getPosition(e.touches[0].clientX) }\nfunction onTouchEnd() { isDragging.value = false }\n</script>\n\n<template>\n  <div\n    ref=\"containerRef\"\n    class=\"relative overflow-hidden select-none\"\n    :class=\"{ 'rounded-xl': rounded }\"\n    :style=\"{ height }\"\n    @mousemove=\"onMouseMove\"\n    @mouseup=\"onMouseUp\"\n    @mouseleave=\"onMouseUp\"\n    @touchmove.prevent=\"onTouchMove\"\n    @touchend=\"onTouchEnd\"\n  >\n    <!-- After image (full width, behind) -->\n    <img\n      :src=\"imageAfter\"\n      class=\"absolute inset-0 w-full h-full object-cover\"\n      draggable=\"false\"\n      alt=\"\"\n    />\n\n    <!-- Before image (clipped via clip-path so it never moves) -->\n    <img\n      :src=\"imageBefore\"\n      class=\"absolute inset-0 w-full h-full object-cover\"\n      :style=\"{ clipPath: `inset(0 ${100 - position}% 0 0)` }\"\n      draggable=\"false\"\n      alt=\"\"\n    />\n\n    <!-- Labels -->\n    <span\n      v-if=\"labelBefore\"\n      class=\"absolute top-3 left-3 bg-black/40 text-white text-sm px-2 py-1 rounded pointer-events-none\"\n    >\n      {{ labelBefore }}\n    </span>\n    <span\n      v-if=\"labelAfter\"\n      class=\"absolute top-3 right-3 bg-black/40 text-white text-sm px-2 py-1 rounded pointer-events-none\"\n    >\n      {{ labelAfter }}\n    </span>\n\n    <!-- Divider + Handle -->\n    <div\n      class=\"absolute top-0 h-full flex flex-col items-center cursor-ew-resize\"\n      :style=\"{ left: position + '%', transform: 'translateX(-50%)' }\"\n      @mousedown=\"onMouseDown\"\n      @touchstart.prevent=\"onTouchStart\"\n    >\n      <!-- Vertical line -->\n      <div class=\"w-0.5 bg-white h-full absolute top-0\" />\n\n      <!-- Circular handle -->\n      <div class=\"absolute top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-white shadow-lg flex items-center justify-center z-10\">\n        <svg viewBox=\"0 0 24 24\" class=\"w-4 h-4 text-gray-600 -mr-0.5\">\n          <path fill=\"currentColor\" :d=\"mdiChevronLeft\" />\n        </svg>\n        <svg viewBox=\"0 0 24 24\" class=\"w-4 h-4 text-gray-600 -ml-0.5\">\n          <path fill=\"currentColor\" :d=\"mdiChevronRight\" />\n        </svg>\n      </div>\n    </div>\n  </div>\n</template>\n"],"names":["_createElementBlock","_normalizeClass","_createElementVNode","_toDisplayString","_openBlock","_unref"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,UAAM,QAAQ;AAQd,UAAM,WAAW,IAAI,MAAM,eAAe;AAC1C,UAAM,aAAa,IAAI,KAAK;AAC5B,UAAM,eAAe,IAAwB,IAAI;AAEjD,aAAS,YAAY,SAAiB;AACpC,UAAI,CAAC,aAAa,MAAO;AACzB,YAAM,OAAO,aAAa,MAAM,sBAAA;AAChC,YAAM,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,UAAU,KAAK,MAAM,KAAK,KAAK,CAAC;AAC/D,eAAS,QAAS,IAAI,KAAK,QAAS;AAAA,IACtC;AAEA,aAAS,cAAc;AAAE,iBAAW,QAAQ;AAAA,IAAK;AACjD,aAAS,YAAY,GAAe;AAAE,UAAI,WAAW,MAAO,aAAY,EAAE,OAAO;AAAA,IAAE;AACnF,aAAS,YAAY;AAAE,iBAAW,QAAQ;AAAA,IAAM;AAChD,aAAS,eAAe;AAAE,iBAAW,QAAQ;AAAA,IAAK;AAClD,aAAS,YAAY,GAAe;AAAE,UAAI,WAAW,MAAO,aAAY,EAAE,QAAQ,CAAC,EAAE,OAAO;AAAA,IAAE;AAC9F,aAAS,aAAa;AAAE,iBAAW,QAAQ;AAAA,IAAM;;0BAI/CA,mBA8DM,OAAA;AAAA,iBA7DA;AAAA,QAAJ,KAAI;AAAA,QACJ,OAAKC,eAAA,CAAC,wCAAsC,EAAA,cACpB,QAAA,QAAA,CAAO,CAAA;AAAA,QAC9B,gCAAS,QAAA,QAAM;AAAA,QACf,aAAW;AAAA,QACX,WAAS;AAAA,QACT,cAAY;AAAA,QACZ,2BAAmB,aAAW,CAAA,SAAA,CAAA;AAAA,QAC9B,YAAU;AAAA,MAAA;QAGXC,mBAKE,OAAA;AAAA,UAJC,KAAK,QAAA;AAAA,UACN,OAAM;AAAA,UACN,WAAU;AAAA,UACV,KAAI;AAAA,QAAA;QAINA,mBAME,OAAA;AAAA,UALC,KAAK,QAAA;AAAA,UACN,OAAM;AAAA,UACL,mDAAoC,SAAA,KAAQ,UAAA;AAAA,UAC7C,WAAU;AAAA,UACV,KAAI;AAAA,QAAA;QAKE,QAAA,4BADRF,mBAKO,QALP,YAKOG,gBADF,QAAA,WAAW,GAAA,CAAA;QAGR,QAAA,2BADRH,mBAKO,QALP,YAKOG,gBADF,QAAA,UAAU,GAAA,CAAA;QAIfD,mBAkBM,OAAA;AAAA,UAjBJ,OAAM;AAAA,UACL,8BAAe,SAAA,QAAQ,KAAA,WAAA,oBAAA;AAAA,UACvB,aAAW;AAAA,UACX,4BAAoB,cAAY,CAAA,SAAA,CAAA;AAAA,QAAA;oCAGjCA,mBAAoD,OAAA,EAA/C,OAAM,uCAAA,GAAsC,MAAA,EAAA;AAAA,UAGjDA,mBAOM,OAPN,YAOM;AAAA,aANJE,aAAAJ,mBAEM,OAFN,YAEM;AAAA,cADJE,mBAAgD,QAAA;AAAA,gBAA1C,MAAK;AAAA,gBAAgB,GAAGG,MAAA,cAAA;AAAA,cAAA;;aAEhCD,aAAAJ,mBAEM,OAFN,YAEM;AAAA,cADJE,mBAAiD,QAAA;AAAA,gBAA3C,MAAK;AAAA,gBAAgB,GAAGG,MAAA,eAAA;AAAA,cAAA;;;;;;;;"}
+{"version":3,"file":"EpImageCompare.vue.js","sources":["../../../src/components/interactions/EpImageCompare.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { mdiChevronLeft, mdiChevronRight } from '@mdi/js'\nimport type { EpImageCompareProps } from '~/types/interactions/EpImageCompare'\n\nconst props = withDefaults(defineProps<EpImageCompareProps>(), {\n  labelBefore: null,\n  labelAfter: null,\n  initialPosition: 50,\n  height: '400px',\n  rounded: false,\n})\n\nconst position = ref(props.initialPosition)\nconst isDragging = ref(false)\nconst containerRef = ref<HTMLElement | null>(null)\n\nfunction getPosition(clientX: number) {\n  if (!containerRef.value) return\n  const rect = containerRef.value.getBoundingClientRect()\n  const x = Math.max(0, Math.min(clientX - rect.left, rect.width))\n  position.value = (x / rect.width) * 100\n}\n\nfunction onMouseDown() { isDragging.value = true }\nfunction onMouseMove(e: MouseEvent) { if (isDragging.value) getPosition(e.clientX) }\nfunction onMouseUp() { isDragging.value = false }\nfunction onTouchStart() { isDragging.value = true }\nfunction onTouchMove(e: TouchEvent) { if (isDragging.value) getPosition(e.touches[0].clientX) }\nfunction onTouchEnd() { isDragging.value = false }\n</script>\n\n<template>\n  <div\n    ref=\"containerRef\"\n    class=\"relative overflow-hidden select-none\"\n    :class=\"{ 'rounded-xl': rounded }\"\n    :style=\"{ height }\"\n    @mousemove=\"onMouseMove\"\n    @mouseup=\"onMouseUp\"\n    @mouseleave=\"onMouseUp\"\n    @touchmove.prevent=\"onTouchMove\"\n    @touchend=\"onTouchEnd\"\n  >\n    <!-- After image (full width, behind) -->\n    <img\n      :src=\"imageAfter\"\n      class=\"absolute inset-0 w-full h-full object-cover\"\n      draggable=\"false\"\n      alt=\"\"\n    />\n\n    <!-- Before image (clipped via clip-path so it never moves) -->\n    <img\n      :src=\"imageBefore\"\n      class=\"absolute inset-0 w-full h-full object-cover\"\n      :style=\"{ clipPath: `inset(0 ${100 - position}% 0 0)` }\"\n      draggable=\"false\"\n      alt=\"\"\n    />\n\n    <!-- Labels -->\n    <span\n      v-if=\"labelBefore\"\n      class=\"absolute top-3 left-3 bg-black/40 text-white text-sm px-2 py-1 rounded pointer-events-none\"\n    >\n      {{ labelBefore }}\n    </span>\n    <span\n      v-if=\"labelAfter\"\n      class=\"absolute top-3 right-3 bg-black/40 text-white text-sm px-2 py-1 rounded pointer-events-none\"\n    >\n      {{ labelAfter }}\n    </span>\n\n    <!-- Divider + Handle -->\n    <div\n      class=\"absolute top-0 h-full flex flex-col items-center cursor-ew-resize\"\n      :style=\"{ left: position + '%', transform: 'translateX(-50%)' }\"\n      @mousedown=\"onMouseDown\"\n      @touchstart.prevent=\"onTouchStart\"\n    >\n      <!-- Vertical line -->\n      <div class=\"w-0.5 bg-white h-full absolute top-0\" />\n\n      <!-- Circular handle -->\n      <div class=\"absolute top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-white shadow-lg flex items-center justify-center z-10\">\n        <svg viewBox=\"0 0 24 24\" class=\"w-4 h-4 text-gray-600 -mr-0.5\">\n          <path fill=\"currentColor\" :d=\"mdiChevronLeft\" />\n        </svg>\n        <svg viewBox=\"0 0 24 24\" class=\"w-4 h-4 text-gray-600 -ml-0.5\">\n          <path fill=\"currentColor\" :d=\"mdiChevronRight\" />\n        </svg>\n      </div>\n    </div>\n  </div>\n</template>\n"],"names":["_createElementBlock","_normalizeClass","rounded","height","_createElementVNode","imageAfter","imageBefore","labelBefore","_toDisplayString","labelAfter","_openBlock","_unref"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,UAAM,QAAQ;AAQd,UAAM,WAAW,IAAI,MAAM,eAAe;AAC1C,UAAM,aAAa,IAAI,KAAK;AAC5B,UAAM,eAAe,IAAwB,IAAI;AAEjD,aAAS,YAAY,SAAiB;AACpC,UAAI,CAAC,aAAa,MAAO;AACzB,YAAM,OAAO,aAAa,MAAM,sBAAA;AAChC,YAAM,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,UAAU,KAAK,MAAM,KAAK,KAAK,CAAC;AAC/D,eAAS,QAAS,IAAI,KAAK,QAAS;AAAA,IACtC;AAEA,aAAS,cAAc;AAAE,iBAAW,QAAQ;AAAA,IAAK;AACjD,aAAS,YAAY,GAAe;AAAE,UAAI,WAAW,MAAO,aAAY,EAAE,OAAO;AAAA,IAAE;AACnF,aAAS,YAAY;AAAE,iBAAW,QAAQ;AAAA,IAAM;AAChD,aAAS,eAAe;AAAE,iBAAW,QAAQ;AAAA,IAAK;AAClD,aAAS,YAAY,GAAe;AAAE,UAAI,WAAW,MAAO,aAAY,EAAE,QAAQ,CAAC,EAAE,OAAO;AAAA,IAAE;AAC9F,aAAS,aAAa;AAAE,iBAAW,QAAQ;AAAA,IAAM;;0BAI/CA,mBA8DM,OAAA;AAAA,iBA7DA;AAAA,QAAJ,KAAI;AAAA,QACJ,OAAKC,eAAA,CAAC,wCAAsC,EAAA,cACpBC,KAAAA,QAAAA,CAAO,CAAA;AAAA,QAC9B,gCAASC,KAAAA,QAAM;AAAA,QACf,aAAW;AAAA,QACX,WAAS;AAAA,QACT,cAAY;AAAA,QACZ,2BAAmB,aAAW,CAAA,SAAA,CAAA;AAAA,QAC9B,YAAU;AAAA,MAAA;QAGXC,mBAKE,OAAA;AAAA,UAJC,KAAKC,KAAAA;AAAAA,UACN,OAAM;AAAA,UACN,WAAU;AAAA,UACV,KAAI;AAAA,QAAA;QAIND,mBAME,OAAA;AAAA,UALC,KAAKE,KAAAA;AAAAA,UACN,OAAM;AAAA,UACL,mDAAoC,SAAA,KAAQ,UAAA;AAAA,UAC7C,WAAU;AAAA,UACV,KAAI;AAAA,QAAA;QAKEC,KAAAA,4BADRP,mBAKO,QALP,YAKOQ,gBADFD,KAAAA,WAAW,GAAA,CAAA;QAGRE,KAAAA,2BADRT,mBAKO,QALP,YAKOQ,gBADFC,KAAAA,UAAU,GAAA,CAAA;QAIfL,mBAkBM,OAAA;AAAA,UAjBJ,OAAM;AAAA,UACL,8BAAe,SAAA,QAAQ,KAAA,WAAA,oBAAA;AAAA,UACvB,aAAW;AAAA,UACX,4BAAoB,cAAY,CAAA,SAAA,CAAA;AAAA,QAAA;oCAGjCA,mBAAoD,OAAA,EAA/C,OAAM,uCAAA,GAAsC,MAAA,EAAA;AAAA,UAGjDA,mBAOM,OAPN,YAOM;AAAA,aANJM,aAAAV,mBAEM,OAFN,YAEM;AAAA,cADJI,mBAAgD,QAAA;AAAA,gBAA1C,MAAK;AAAA,gBAAgB,GAAGO,MAAA,cAAA;AAAA,cAAA;;aAEhCD,aAAAV,mBAEM,OAFN,YAEM;AAAA,cADJI,mBAAiD,QAAA;AAAA,gBAA3C,MAAK;AAAA,gBAAgB,GAAGO,MAAA,eAAA;AAAA,cAAA;;;;;;;;"}

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

@@ -32,7 +32,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(Teleport, { to: "body" }, [
         createVNode(Transition, { name: "ep-modal" }, {
           default: withCtx(() => [
-            __props.modelValue ? (openBlock(), createElementBlock("div", {
+            _ctx.modelValue ? (openBlock(), createElementBlock("div", {
               key: 0,
               class: "ep-modal-mask",
               onClick: withModifiers(closeModal, ["self"])
@@ -42,9 +42,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               }, [
                 createElementVNode("div", _hoisted_1, [
                   createVNode(_sfc_main$1, {
-                    title: __props.title,
-                    subtitle: __props.subtitle,
-                    icon: __props.icon
+                    title: _ctx.title,
+                    subtitle: _ctx.subtitle,
+                    icon: _ctx.icon
                   }, {
                     default: withCtx(() => [
                       renderSlot(_ctx.$slots, "default")

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

@@ -1 +1 @@
-{"version":3,"file":"EpModal.vue.js","sources":["../../../src/components/interactions/EpModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport EpCard from \"~/components/basics/EpCard.vue\";\nimport type { EpModalProps } from \"~/types/interactions/EpModal\";\n\nconst props = withDefaults(defineProps<EpModalProps>(), {\n  modelValue: false,\n  title: null,\n  subtitle: null,\n  icon: null,\n  persistent: false,\n  size: \"default\", // ✅ must be a string literal\n});\n\nconst size = {\n  compact: \"w-[45%]\",\n  default: \"w-[75%]\",\n  comfortable: \"w-[85%]\",\n};\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", modelValue: boolean): void;\n}>();\n\nconst closeModal = (): void => {\n  if (!props.persistent) {\n    emit(\"update:modelValue\", false);\n  }\n};\n\nconst sizeModal = computed(() => {\n  return size[props.size];\n});\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <Transition name=\"ep-modal\">\n      <div v-if=\"modelValue\" class=\"ep-modal-mask\" @click.self=\"closeModal\">\n        <div :class=\"`ep-modal-container ${sizeModal} max-h-screen overflow-auto`\">\n          <div class=\"mx-auto\">\n            <EpCard :title=\"title\" :subtitle=\"subtitle\" :icon=\"icon\">\n              <slot />\n            </EpCard>\n          </div>\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n\n<style>\n.ep-modal-mask {\n  position: fixed;\n  z-index: 6998;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.5);\n  display: flex;\n  transition: opacity 0.3s ease;\n}\n\n.ep-modal-container {\n  margin: auto;\n  max-height: 95%;\n  transition: all 0.3s ease;\n  z-index: 7000;\n}\n\n.ep-modal-header h3 {\n  margin-top: 0;\n  color: #42b983;\n}\n\n.ep-modal-body {\n  margin: 20px 0;\n}\n\n.ep-modal-default-button {\n  float: right;\n}\n\n.ep-modal-enter-from {\n  opacity: 0;\n}\n\n.ep-modal-leave-to {\n  opacity: 0;\n}\n\n.ep-modal-enter-from .ep-modal-container,\n.ep-modal-leave-to .ep-modal-container {\n  -webkit-transform: scale(1.1);\n  transform: scale(1.1);\n}\n</style>\n"],"names":["_createBlock","_Teleport","_createVNode","_Transition","_createElementBlock","_createElementVNode","EpCard","_renderSlot"],"mappings":";;;;;;;;;;;;;;;AAKA,UAAM,QAAQ;AASd,UAAM,OAAO;AAAA,MACX,SAAS;AAAA,MACT,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAGf,UAAM,OAAO;AAIb,UAAM,aAAa,MAAY;AAC7B,UAAI,CAAC,MAAM,YAAY;AACrB,aAAK,qBAAqB,KAAK;AAAA,MACjC;AAAA,IACF;AAEA,UAAM,YAAY,SAAS,MAAM;AAC/B,aAAO,KAAK,MAAM,IAAI;AAAA,IACxB,CAAC;;0BAICA,YAYWC,UAAA,EAZD,IAAG,UAAM;AAAA,QACjBC,YAUaC,YAAA,EAVD,MAAK,cAAU;AAAA,2BACzB,MAQM;AAAA,YARK,QAAA,2BAAXC,mBAQM,OAAA;AAAA;cARiB,OAAM;AAAA,cAAiB,uBAAY,YAAU,CAAA,MAAA,CAAA;AAAA,YAAA;cAClEC,mBAMM,OAAA;AAAA,gBANA,4CAA6B,UAAA,KAAS,6BAAA;AAAA,cAAA;gBAC1CA,mBAIM,OAJN,YAIM;AAAA,kBAHJH,YAESI,aAAA;AAAA,oBAFA,OAAO,QAAA;AAAA,oBAAQ,UAAU,QAAA;AAAA,oBAAW,MAAM,QAAA;AAAA,kBAAA;qCACjD,MAAQ;AAAA,sBAARC,WAAQ,KAAA,QAAA,SAAA;AAAA,oBAAA;;;;;;;;;;;;;"}
+{"version":3,"file":"EpModal.vue.js","sources":["../../../src/components/interactions/EpModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport EpCard from \"~/components/basics/EpCard.vue\";\nimport type { EpModalProps } from \"~/types/interactions/EpModal\";\n\nconst props = withDefaults(defineProps<EpModalProps>(), {\n  modelValue: false,\n  title: null,\n  subtitle: null,\n  icon: null,\n  persistent: false,\n  size: \"default\", // ✅ must be a string literal\n});\n\nconst size = {\n  compact: \"w-[45%]\",\n  default: \"w-[75%]\",\n  comfortable: \"w-[85%]\",\n};\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", modelValue: boolean): void;\n}>();\n\nconst closeModal = (): void => {\n  if (!props.persistent) {\n    emit(\"update:modelValue\", false);\n  }\n};\n\nconst sizeModal = computed(() => {\n  return size[props.size];\n});\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <Transition name=\"ep-modal\">\n      <div v-if=\"modelValue\" class=\"ep-modal-mask\" @click.self=\"closeModal\">\n        <div :class=\"`ep-modal-container ${sizeModal} max-h-screen overflow-auto`\">\n          <div class=\"mx-auto\">\n            <EpCard :title=\"title\" :subtitle=\"subtitle\" :icon=\"icon\">\n              <slot />\n            </EpCard>\n          </div>\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n\n<style>\n.ep-modal-mask {\n  position: fixed;\n  z-index: 6998;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.5);\n  display: flex;\n  transition: opacity 0.3s ease;\n}\n\n.ep-modal-container {\n  margin: auto;\n  max-height: 95%;\n  transition: all 0.3s ease;\n  z-index: 7000;\n}\n\n.ep-modal-header h3 {\n  margin-top: 0;\n  color: #42b983;\n}\n\n.ep-modal-body {\n  margin: 20px 0;\n}\n\n.ep-modal-default-button {\n  float: right;\n}\n\n.ep-modal-enter-from {\n  opacity: 0;\n}\n\n.ep-modal-leave-to {\n  opacity: 0;\n}\n\n.ep-modal-enter-from .ep-modal-container,\n.ep-modal-leave-to .ep-modal-container {\n  -webkit-transform: scale(1.1);\n  transform: scale(1.1);\n}\n</style>\n"],"names":["_createBlock","_Teleport","_createVNode","_Transition","modelValue","_createElementBlock","_createElementVNode","EpCard","title","subtitle","icon","_renderSlot"],"mappings":";;;;;;;;;;;;;;;AAKA,UAAM,QAAQ;AASd,UAAM,OAAO;AAAA,MACX,SAAS;AAAA,MACT,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAGf,UAAM,OAAO;AAIb,UAAM,aAAa,MAAY;AAC7B,UAAI,CAAC,MAAM,YAAY;AACrB,aAAK,qBAAqB,KAAK;AAAA,MACjC;AAAA,IACF;AAEA,UAAM,YAAY,SAAS,MAAM;AAC/B,aAAO,KAAK,MAAM,IAAI;AAAA,IACxB,CAAC;;0BAICA,YAYWC,UAAA,EAZD,IAAG,UAAM;AAAA,QACjBC,YAUaC,YAAA,EAVD,MAAK,cAAU;AAAA,2BACzB,MAQM;AAAA,YARKC,KAAAA,2BAAXC,mBAQM,OAAA;AAAA;cARiB,OAAM;AAAA,cAAiB,uBAAY,YAAU,CAAA,MAAA,CAAA;AAAA,YAAA;cAClEC,mBAMM,OAAA;AAAA,gBANA,4CAA6B,UAAA,KAAS,6BAAA;AAAA,cAAA;gBAC1CA,mBAIM,OAJN,YAIM;AAAA,kBAHJJ,YAESK,aAAA;AAAA,oBAFA,OAAOC,KAAAA;AAAAA,oBAAQ,UAAUC,KAAAA;AAAAA,oBAAW,MAAMC,KAAAA;AAAAA,kBAAAA;qCACjD,MAAQ;AAAA,sBAARC,WAAQ,KAAA,QAAA,SAAA;AAAA,oBAAA;;;;;;;;;;;;;"}