ep-lib-ts 1.0.58 → 1.0.60

package/dist/components/medias/EpHierarchy.vue2.js

@@ -1,36 +1,47 @@
-import { defineComponent as O, ref as k, computed as L, defineAsyncComponent as Q, onMounted as U, createElementBlock as W, openBlock as y, createElementVNode as z, createBlock as P, createCommentVNode as H, normalizeStyle as Z, withCtx as A, unref as q, resolveDynamicComponent as G, normalizeProps as J, mergeProps as tt, createVNode as et, createTextVNode as ot, toDisplayString as at } from "vue";
-import { hierarchy as I, tree as rt, cluster as nt } from "d3-hierarchy";
-import * as m from "d3-selection";
-import { linkVertical as st, linkHorizontal as it } from "d3-shape";
-import * as E from "d3-zoom";
-import { useComponent as lt } from "../../composables/useComponent.js";
-import ct from "../interactions/EpModal.vue.js";
+import { defineComponent, ref, computed, defineAsyncComponent, onMounted, createElementBlock, openBlock, createElementVNode, createBlock, createCommentVNode, normalizeStyle, withCtx, unref, resolveDynamicComponent, normalizeProps, mergeProps, createVNode, createTextVNode, toDisplayString } from "vue";
+import { hierarchy, tree, cluster } from "d3-hierarchy";
+import * as d3 from "d3-selection";
+import { linkVertical, linkHorizontal } from "d3-shape";
+import * as d3Zoom from "d3-zoom";
+import { useComponent } from "../../composables/useComponent.js";
+import _sfc_main$1 from "../interactions/EpModal.vue.js";
 /* empty css                           */
-import pt from "../basics/EpBtn.vue.js";
-import { useRenderText as mt } from "../../composables/useRenderText.js";
-const dt = ["innerHTML"], ut = { class: "flex justify-end" }, bt = /* @__PURE__ */ O({
+import _sfc_main$2 from "../basics/EpBtn.vue.js";
+import { useRenderText } from "../../composables/useRenderText.js";
+const _hoisted_1 = ["innerHTML"];
+const _hoisted_2 = { class: "flex justify-end" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "EpHierarchy",
   props: {
     nodes: {},
     maxWidth: { default: 800 },
     maxHeight: { default: 600 },
     labelClose: { default: "fermer" },
-    isCluster: { type: Boolean, default: !1 },
+    isCluster: { type: Boolean, default: false },
     colorPath: { default: "stroke-yellow-400" },
     colorRect: { default: "fill-main-color-400" }
   },
-  setup(T) {
-    const o = T, x = k(null), M = k(null), a = k(null), g = k(!1), V = (e) => {
-      a.value = {
-        title: e.name,
-        text: e.text,
-        component: e.component
-      }, g.value = !0;
-    }, N = () => {
-      g.value = !1, a.value = null;
-    }, D = /* @__PURE__ */ Object.assign({
+  setup(__props) {
+    const props = __props;
+    const treeContainer = ref(null);
+    const treeWrapper = ref(null);
+    const currentNode = ref(null);
+    const showModal = ref(false);
+    const handleNodeClick = (node) => {
+      currentNode.value = {
+        title: node.name,
+        text: node.text,
+        component: node.component
+      };
+      showModal.value = true;
+    };
+    const closeModal = () => {
+      showModal.value = false;
+      currentNode.value = null;
+    };
+    const components = /* @__PURE__ */ Object.assign({
       "../basics/EpAvatar.vue": () => import("../basics/EpAvatar.vue2.js"),
-      "../basics/EpBadge.vue": () => import("../basics/EpBadge.vue2.js"),
+      "../basics/EpBadge.vue": () => import("../basics/EpBadge.vue.js"),
       "../basics/EpBtn.vue": () => import("../basics/EpBtn.vue2.js"),
       "../basics/EpCard.vue": () => import("../basics/EpCard.vue2.js"),
       "../basics/EpChip.vue": () => import("../basics/EpChip.vue2.js"),
@@ -72,101 +83,170 @@ const dt = ["innerHTML"], ut = { class: "flex justify-end" }, bt = /* @__PURE__
       "../signages/EpNothing.vue": () => import("../signages/EpNothing.vue.js"),
       "../signages/EpQuote.vue": () => import("../signages/EpQuote.vue2.js"),
       "../signages/EpSkeleton.vue": () => import("../signages/EpSkeleton.vue3.js")
-    }), B = L(() => {
-      if (!a.value || !a.value.component)
+    });
+    const currentRenderComponent = computed(() => {
+      if (!currentNode.value || !currentNode.value.component) {
+        return null;
+      }
+      const { path, name } = useComponent(currentNode.value.component.type);
+      let fullPath = "";
+      if (path === "medias") {
+        fullPath = `./${name}.vue`;
+      } else {
+        fullPath = `../${path}/${name}.vue`;
+      }
+      const loader = components[fullPath];
+      if (!loader) {
+        console.warn(`Component not found: ${fullPath}`);
         return null;
-      const { path: e, name: n } = lt(a.value.component.type);
-      let r = "";
-      e === "medias" ? r = `./${n}.vue` : r = `../${e}/${n}.vue`;
-      const i = D[r];
-      return i ? Q(i) : (console.warn(`Component not found: ${r}`), null);
+      }
+      return defineAsyncComponent(loader);
     });
-    U(() => {
-      x.value && (o.isCluster ? X() : R());
+    onMounted(() => {
+      if (!treeContainer.value) return;
+      if (props.isCluster) {
+        clusterView();
+      } else {
+        treeView();
+      }
     });
-    const R = () => {
-      const e = { top: 40, left: 40 }, n = I(o.nodes), r = Math.max(o.maxWidth), i = o.maxHeight, l = rt().nodeSize([170, 100])(n), c = m.select(x.value).append("svg").attr("width", r).attr("height", i), p = c.append("g").attr("transform", `translate(${e.left}, ${e.top})`), d = E.zoom().scaleExtent([0.5, 2]).on("zoom", (t) => {
-        p.attr("transform", t.transform);
+    const treeView = () => {
+      const margin = { top: 40, left: 40 };
+      const root = hierarchy(props.nodes);
+      const width = Math.max(props.maxWidth);
+      const height = props.maxHeight;
+      const treeLayout = tree().nodeSize([170, 100]);
+      const treeData = treeLayout(root);
+      const svg = d3.select(treeContainer.value).append("svg").attr("width", width).attr("height", height);
+      const g = svg.append("g").attr("transform", `translate(${margin.left}, ${margin.top})`);
+      const zoom = d3Zoom.zoom().scaleExtent([0.5, 2]).on("zoom", (event) => {
+        g.attr("transform", event.transform);
       });
-      c.call(d);
-      const b = r / 2 - l.x, w = 30, C = E.zoomIdentity;
-      c.call(d.transform, C.translate(b, w));
-      const $ = st().x((t) => t.x).y((t) => t.y);
-      p.selectAll("path.link").data(l.links()).enter().append("path").attr("d", (t) => $(t)).attr("class", (t) => `${t.target.data.active ? `${o.colorPath} stroke-2` : "stroke-black dark:stroke-white"} link fill-none`);
-      const u = p.selectAll("g.node").data(l.descendants()).enter().append("g").attr("class", "node").attr("transform", (t) => `translate(${t.x}, ${t.y})`).style(
+      svg.call(zoom);
+      const centerX = width / 2 - treeData.x;
+      const centerY = 30;
+      const identity = d3Zoom.zoomIdentity;
+      svg.call(zoom.transform, identity.translate(centerX, centerY));
+      const linkPath = linkVertical().x((d) => d.x).y((d) => d.y);
+      g.selectAll("path.link").data(treeData.links()).enter().append("path").attr("d", (d) => linkPath(d)).attr("class", (d) => {
+        const link = d.target.data.active ? `${props.colorPath} stroke-2` : "stroke-black dark:stroke-white";
+        return `${link} link fill-none`;
+      });
+      const node = g.selectAll("g.node").data(treeData.descendants()).enter().append("g").attr("class", "node").attr("transform", (d) => `translate(${d.x}, ${d.y})`).style(
         "cursor",
-        (t) => t.data.component || t.data.text ? "pointer" : "default"
-      ).each(function(t) {
-        (t.data.component || t.data.text) && m.select(this).on("click", (s) => V(t.data));
+        (d) => d.data.component || d.data.text ? "pointer" : "default"
+      ).each(function(d) {
+        if (d.data.component || d.data.text) {
+          d3.select(this).on("click", (_event) => handleNodeClick(d.data));
+        }
+      });
+      node.each(function(d) {
+        const group = d3.select(this);
+        const text = group.append("text").attr("class", "text-sm font-semibold fill-black dark:fill-white").attr("text-anchor", "middle").attr("x", 0).attr("y", 0).attr("dy", ".35em").text(d.data.name);
+        const bbox = text.node().getBBox();
+        const paddingX = 10;
+        const paddingY = 10;
+        const width2 = bbox.width + paddingX * 2;
+        const height2 = bbox.height + paddingY * 2;
+        group.insert("rect", "text").attr("class", props.colorRect).attr("x", -width2 / 2).attr("y", -height2 / 2).attr("width", width2).attr("height", height2).attr("rx", 4).attr("ry", 4);
       });
-      u.each(function(t) {
-        const s = m.select(this), v = s.append("text").attr("class", "text-sm font-semibold fill-black dark:fill-white").attr("text-anchor", "middle").attr("x", 0).attr("y", 0).attr("dy", ".35em").text(t.data.name).node().getBBox(), _ = 10, S = 10, f = v.width + _ * 2, h = v.height + S * 2;
-        s.insert("rect", "text").attr("class", o.colorRect).attr("x", -f / 2).attr("y", -h / 2).attr("width", f).attr("height", h).attr("rx", 4).attr("ry", 4);
-      }), u.append("text").attr("x", 0).attr("y", 0).attr("dy", ".35em").attr("class", "text-sm font-semibold fill-white dark:fill-black").attr("text-anchor", "middle").text((t) => t.data.name).style("pointer-events", "none");
-    }, X = () => {
-      const e = { top: 40, left: 40 }, n = I(o.nodes), r = Math.max(o.maxWidth), i = o.maxHeight, l = nt().nodeSize([130, 130])(n), c = m.select(x.value).append("svg").attr("width", r).attr("height", i), p = c.append("g").attr("transform", `translate(${e.left}, ${e.top})`), d = E.zoom().scaleExtent([0.1, 4]).on("zoom", (t) => {
-        p.attr("transform", t.transform);
+      node.append("text").attr("x", 0).attr("y", 0).attr("dy", ".35em").attr("class", "text-sm font-semibold fill-white dark:fill-black").attr("text-anchor", "middle").text((d) => d.data.name).style("pointer-events", "none");
+    };
+    const clusterView = () => {
+      const margin = { top: 40, left: 40 };
+      const root = hierarchy(props.nodes);
+      const width = Math.max(props.maxWidth);
+      const height = props.maxHeight;
+      const treeLayout = cluster().nodeSize([130, 130]);
+      const treeData = treeLayout(root);
+      const svg = d3.select(treeContainer.value).append("svg").attr("width", width).attr("height", height);
+      const g = svg.append("g").attr("transform", `translate(${margin.left}, ${margin.top})`);
+      const zoom = d3Zoom.zoom().scaleExtent([0.1, 4]).on("zoom", (event) => {
+        g.attr("transform", event.transform);
       });
-      c.call(d);
-      const b = 30, w = i / 2 - l.x, C = E.zoomIdentity;
-      c.call(d.transform, C.translate(b, w));
-      const $ = it().x((t) => t.y).y((t) => t.x);
-      p.selectAll("path.link").data(l.links()).enter().append("path").attr("d", (t) => $(t)).attr("class", (t) => `${t.target.data.active ? `${o.colorPath} stroke-2` : "stroke-black dark:stroke-white"} link fill-none`);
-      const u = p.selectAll("g.node").data(l.descendants()).enter().append("g").attr("class", "node").attr("transform", (t) => `translate(${t.y}, ${t.x})`).style(
+      svg.call(zoom);
+      const centerX = 30;
+      const centerY = height / 2 - treeData.x;
+      const identity = d3Zoom.zoomIdentity;
+      svg.call(zoom.transform, identity.translate(centerX, centerY));
+      const linkPath = linkHorizontal().x((d) => d.y).y((d) => d.x);
+      g.selectAll("path.link").data(treeData.links()).enter().append("path").attr("d", (d) => linkPath(d)).attr("class", (d) => {
+        const link = d.target.data.active ? `${props.colorPath} stroke-2` : "stroke-black dark:stroke-white";
+        return `${link} link fill-none`;
+      });
+      const node = g.selectAll("g.node").data(treeData.descendants()).enter().append("g").attr("class", "node").attr("transform", (d) => `translate(${d.y}, ${d.x})`).style(
         "cursor",
-        (t) => t.data.component || t.data.text ? "pointer" : "default"
-      ).each(function(t) {
-        (t.data.component || t.data.text) && m.select(this).on("click", (s) => V(t.data));
+        (d) => d.data.component || d.data.text ? "pointer" : "default"
+      ).each(function(d) {
+        if (d.data.component || d.data.text) {
+          d3.select(this).on("click", (_event) => handleNodeClick(d.data));
+        }
+      });
+      node.each(function(d) {
+        const group = d3.select(this);
+        const text = group.append("text").attr("class", "text-sm font-semibold fill-black dark:fill-white").attr("text-anchor", "middle").attr("x", 0).attr("y", 0).attr("dy", ".35em").text(d.data.name);
+        const bbox = text.node().getBBox();
+        const paddingX = 10;
+        const paddingY = 10;
+        const width2 = bbox.width + paddingX * 2;
+        const height2 = bbox.height + paddingY * 2;
+        group.insert("rect", "text").attr("class", props.colorRect).attr("x", -width2 / 2).attr("y", -height2 / 2).attr("width", width2).attr("height", height2).attr("rx", 4).attr("ry", 4);
       });
-      u.each(function(t) {
-        const s = m.select(this), v = s.append("text").attr("class", "text-sm font-semibold fill-black dark:fill-white").attr("text-anchor", "middle").attr("x", 0).attr("y", 0).attr("dy", ".35em").text(t.data.name).node().getBBox(), _ = 10, S = 10, f = v.width + _ * 2, h = v.height + S * 2;
-        s.insert("rect", "text").attr("class", o.colorRect).attr("x", -f / 2).attr("y", -h / 2).attr("width", f).attr("height", h).attr("rx", 4).attr("ry", 4);
-      }), u.append("text").attr("x", 0).attr("y", 0).attr("dy", ".35em").attr("class", "text-sm font-semibold fill-white dark:fill-black").attr("text-anchor", "middle").text((t) => t.data.name).style("pointer-events", "none");
-    }, Y = L(() => `${o.maxWidth.toString()}px`), j = L(() => `${o.maxWidth.toString()}px`);
-    return (e, n) => (y(), W("div", null, [
-      z("div", {
-        ref_key: "treeWrapper",
-        ref: M,
-        class: "tree-wrapper mx-auto",
-        style: Z({ maxHeight: j.value, maxWidth: Y.value })
-      }, [
-        z("div", {
-          ref_key: "treeContainer",
-          ref: x,
-          class: "tree-container"
-        }, null, 512)
-      ], 4),
-      a.value ? (y(), P(ct, {
-        key: 0,
-        modelValue: g.value,
-        "onUpdate:modelValue": n[0] || (n[0] = (r) => g.value = r),
-        title: a.value.title
-      }, {
-        default: A(() => [
-          a.value.text ? (y(), W("div", {
-            key: 0,
-            innerHTML: q(mt)(a.value.text)
-          }, null, 8, dt)) : H("", !0),
-          B.value && a.value.component ? (y(), P(G(B.value), J(tt({ key: 1 }, { ...a.value.component.data })), null, 16)) : H("", !0),
-          z("div", ut, [
-            et(pt, {
-              onClick: N,
-              type: "error",
-              outlined: "",
-              rounded: ""
-            }, {
-              default: A(() => [
-                ot(at(e.labelClose), 1)
-              ]),
-              _: 1
-            })
-          ])
-        ]),
-        _: 1
-      }, 8, ["modelValue", "title"])) : H("", !0)
-    ]));
+      node.append("text").attr("x", 0).attr("y", 0).attr("dy", ".35em").attr("class", "text-sm font-semibold fill-white dark:fill-black").attr("text-anchor", "middle").text((d) => d.data.name).style("pointer-events", "none");
+    };
+    const maxW = computed(() => {
+      return `${props.maxWidth.toString()}px`;
+    });
+    const maxH = computed(() => {
+      return `${props.maxWidth.toString()}px`;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", null, [
+        createElementVNode("div", {
+          ref_key: "treeWrapper",
+          ref: treeWrapper,
+          class: "tree-wrapper mx-auto",
+          style: normalizeStyle({ maxHeight: maxH.value, maxWidth: maxW.value })
+        }, [
+          createElementVNode("div", {
+            ref_key: "treeContainer",
+            ref: treeContainer,
+            class: "tree-container"
+          }, null, 512)
+        ], 4),
+        currentNode.value ? (openBlock(), createBlock(_sfc_main$1, {
+          key: 0,
+          modelValue: showModal.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => showModal.value = $event),
+          title: currentNode.value.title
+        }, {
+          default: withCtx(() => [
+            currentNode.value.text ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              innerHTML: unref(useRenderText)(currentNode.value.text)
+            }, null, 8, _hoisted_1)) : createCommentVNode("", true),
+            currentRenderComponent.value && currentNode.value.component ? (openBlock(), createBlock(resolveDynamicComponent(currentRenderComponent.value), normalizeProps(mergeProps({ key: 1 }, { ...currentNode.value.component.data })), null, 16)) : createCommentVNode("", true),
+            createElementVNode("div", _hoisted_2, [
+              createVNode(_sfc_main$2, {
+                onClick: closeModal,
+                type: "error",
+                outlined: "",
+                rounded: ""
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(_ctx.labelClose), 1)
+                ]),
+                _: 1
+              })
+            ])
+          ]),
+          _: 1
+        }, 8, ["modelValue", "title"])) : createCommentVNode("", true)
+      ]);
+    };
   }
 });
 export {
-  bt as default
+  _sfc_main as default
 };
+//# sourceMappingURL=EpHierarchy.vue2.js.map

package/dist/components/medias/EpHierarchy.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EpHierarchy.vue2.js","sources":["../../../src/components/medias/EpHierarchy.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, onMounted, computed, defineAsyncComponent } from \"vue\";\nimport {\n  hierarchy,\n  tree,\n  cluster,\n  type HierarchyPointLink,\n  type HierarchyPointNode,\n} from \"d3-hierarchy\";\nimport * as d3 from \"d3-selection\";\nimport { linkVertical, linkHorizontal } from \"d3-shape\";\nimport * as d3Zoom from \"d3-zoom\";\nimport type { TreeNode } from \"~/types/Hierarchy\";\nimport type { NestedComponents } from \"~/types/Component\";\nimport { useComponent } from \"~/composables/useComponent\";\nimport EpModal from \"~/components/interactions/EpModal.vue\";\nimport EpBtn from \"~/components/basics/EpBtn.vue\";\nimport { useRenderText } from \"~/composables/useRenderText\";\nimport { EpHierarchyProps } from \"~/types/medias/EpHierarchy\";\n\nconst props = withDefaults(defineProps<EpHierarchyProps>(), {\n  labelClose: \"fermer\",\n  maxWidth: 800,\n  maxHeight: 600,\n  isCluster: false,\n  colorRect: \"fill-main-color-400\",\n  colorPath: \"stroke-yellow-400\",\n});\n\nconst treeContainer = ref<HTMLDivElement | null>(null);\nconst treeWrapper = ref<HTMLDivElement | null>(null);\n\n/* control modal */\ntype ShowNode = {\n  title: string;\n  text?: string;\n  component?: NestedComponents;\n};\n\nconst currentNode = ref<ShowNode | null>(null);\nconst showModal = ref(false);\n\nconst handleNodeClick = (node: TreeNode) => {\n  currentNode.value = {\n    title: node.name,\n    text: node.text,\n    component: node.component,\n  };\n  showModal.value = true;\n};\n\nconst closeModal = () => {\n  showModal.value = false;\n  currentNode.value = null;\n};\n//nested component\n\nconst components = import.meta.glob([\n  \"./*.vue\", // all components in medias (same folder)\n  \"../basics/*.vue\", // components/charts/\n  \"../signages/*.vue\", // components/signages/\n]);\n\nconst currentRenderComponent = computed(() => {\n  if (!currentNode.value || !currentNode.value.component) {\n    return null;\n  }\n\n  const { path, name } = useComponent(currentNode.value.component.type);\n  //console.log(path, name)\n  let fullPath = \"\";\n  if (path === \"medias\") {\n    fullPath = `./${name}.vue`;\n  } else {\n    fullPath = `../${path}/${name}.vue`;\n  }\n  //console.log(fullPath)\n  const loader = components[fullPath] as\n    | (() => Promise<{ default: NestedComponents }>)\n    | undefined;\n\n  if (!loader) {\n    console.warn(`Component not found: ${fullPath}`);\n    return null; // or defineAsyncComponent(() => import('../fallbacks/EpNothing.vue'))\n  }\n\n  return defineAsyncComponent(loader);\n});\n\nonMounted(() => {\n  if (!treeContainer.value) return;\n\n  if (props.isCluster) {\n    clusterView();\n  } else {\n    treeView();\n  }\n});\n\nconst treeView = () => {\n  const rectW = 130;\n  const rectH = 40;\n  const margin = { top: 40, right: 40, bottom: 40, left: 40 };\n\n  const root = hierarchy<TreeNode>(props.nodes);\n  //const totalLeafCount = root.leaves().length\n  const width = Math.max(props.maxWidth);\n  const height = props.maxHeight;\n\n  const treeLayout = tree<TreeNode>().nodeSize([170, 100]); // [x spacing, y spacing]\n\n  const treeData = treeLayout(root);\n\n  const svg = d3\n    .select(treeContainer.value)\n    .append(\"svg\")\n    .attr(\"width\", width)\n    .attr(\"height\", height);\n\n  const g = svg\n    .append(\"g\")\n    .attr(\"transform\", `translate(${margin.left}, ${margin.top})`);\n\n  const zoom = d3Zoom\n    .zoom<SVGSVGElement, unknown>()\n    .scaleExtent([0.5, 2])\n    .on(\"zoom\", (event) => {\n      g.attr(\"transform\", event.transform);\n    });\n\n  svg.call(zoom);\n\n  const centerX = width / 2 - treeData.x;\n  const centerY = 30; //height / 2 - treeData.y\n  const identity = (d3Zoom as any).zoomIdentity;\n  svg.call(zoom.transform, identity.translate(centerX, centerY));\n\n  // Links\n  const linkPath = linkVertical<\n    HierarchyPointLink<TreeNode>,\n    HierarchyPointNode<TreeNode>\n  >()\n    .x((d) => d.x)\n    .y((d) => d.y);\n\n  g.selectAll(\"path.link\")\n    .data(treeData.links())\n    .enter()\n    .append(\"path\")\n    .attr(\"d\", (d) => linkPath(d))\n    .attr(\"class\", (d) => {\n      const link = d.target.data.active\n        ? `${props.colorPath} stroke-2`\n        : \"stroke-black dark:stroke-white\";\n      return `${link} link fill-none`;\n    });\n\n  // Nodes\n  const node = g\n    .selectAll(\"g.node\")\n    .data(treeData.descendants())\n    .enter()\n    .append(\"g\")\n    .attr(\"class\", \"node\")\n    .attr(\"transform\", (d) => `translate(${d.x}, ${d.y})`)\n    .style(\"cursor\", (d) =>\n      d.data.component || d.data.text ? \"pointer\" : \"default\"\n    )\n    .each(function (d) {\n      if (d.data.component || d.data.text) {\n        d3.select(this).on(\"click\", (_event) => handleNodeClick(d.data));\n      }\n    });\n  //.style('cursor', 'pointer')\n  //.on('click', (_event, d) => handleNodeClick(d.data))\n\n  node.each(function (d) {\n    const group = d3.select(this);\n\n    // Append text temporarily\n    const text = group\n      .append(\"text\")\n      .attr(\"class\", \"text-sm font-semibold fill-black dark:fill-white\")\n      .attr(\"text-anchor\", \"middle\")\n      .attr(\"x\", 0)\n      .attr(\"y\", 0)\n      .attr(\"dy\", \".35em\")\n      .text(d.data.name);\n\n    // Get bounding box to determine text size\n    const bbox = (text.node() as SVGTextElement).getBBox();\n    const paddingX = 10;\n    const paddingY = 10;\n\n    const width = bbox.width + paddingX * 2;\n    const height = bbox.height + paddingY * 2;\n\n    // Draw rect using text size\n    group\n      .insert(\"rect\", \"text\")\n      .attr(\"class\", props.colorRect)\n      .attr(\"x\", -width / 2)\n      .attr(\"y\", -height / 2)\n      .attr(\"width\", width)\n      .attr(\"height\", height)\n      .attr(\"rx\", 4)\n      .attr(\"ry\", 4);\n  });\n\n  node\n    .append(\"text\")\n    .attr(\"x\", 0)\n    .attr(\"y\", 0)\n    .attr(\"dy\", \".35em\")\n    .attr(\"class\", \"text-sm font-semibold fill-white dark:fill-black\")\n    .attr(\"text-anchor\", \"middle\")\n    .text((d) => d.data.name)\n    .style(\"pointer-events\", \"none\");\n};\n\nconst clusterView = () => {\n  const rectW = 130;\n  const rectH = 40;\n  const margin = { top: 40, right: 40, bottom: 40, left: 40 };\n\n  const root = hierarchy<TreeNode>(props.nodes);\n  //const totalLeafCount = root.leaves().length\n  const width = Math.max(props.maxWidth);\n  const height = props.maxHeight;\n\n  const treeLayout = cluster<TreeNode>().nodeSize([130, 130]); // [x spacing, y spacing]\n\n  const treeData = treeLayout(root);\n\n  const svg = d3\n    .select(treeContainer.value)\n    .append(\"svg\")\n    .attr(\"width\", width)\n    .attr(\"height\", height);\n\n  const g = svg\n    .append(\"g\")\n    .attr(\"transform\", `translate(${margin.left}, ${margin.top})`);\n\n  const zoom = d3Zoom\n    .zoom<SVGSVGElement, unknown>()\n    .scaleExtent([0.1, 4])\n    .on(\"zoom\", (event) => {\n      g.attr(\"transform\", event.transform);\n    });\n\n  svg.call(zoom);\n\n  const centerX = 30;\n  const centerY = height / 2 - treeData.x;\n  const identity = (d3Zoom as any).zoomIdentity;\n  svg.call(zoom.transform, identity.translate(centerX, centerY));\n\n  // Links\n  const linkPath = linkHorizontal<\n    HierarchyPointLink<TreeNode>,\n    HierarchyPointNode<TreeNode>\n  >()\n    .x((d) => d.y)\n    .y((d) => d.x);\n\n  g.selectAll(\"path.link\")\n    .data(treeData.links())\n    .enter()\n    .append(\"path\")\n    .attr(\"d\", (d) => linkPath(d))\n    .attr(\"class\", (d) => {\n      const link = d.target.data.active\n        ? `${props.colorPath} stroke-2`\n        : \"stroke-black dark:stroke-white\";\n      return `${link} link fill-none`;\n    });\n\n  // Nodes\n  const node = g\n    .selectAll(\"g.node\")\n    .data(treeData.descendants())\n    .enter()\n    .append(\"g\")\n    .attr(\"class\", \"node\")\n    .attr(\"transform\", (d) => `translate(${d.y}, ${d.x})`)\n    .style(\"cursor\", (d) =>\n      d.data.component || d.data.text ? \"pointer\" : \"default\"\n    )\n    .each(function (d) {\n      if (d.data.component || d.data.text) {\n        d3.select(this).on(\"click\", (_event) => handleNodeClick(d.data));\n      }\n    });\n  //.style('cursor', 'pointer')\n  //.on('click', (_event, d) => handleNodeClick(d.data))\n\n  node.each(function (d) {\n    const group = d3.select(this);\n\n    // Append text temporarily\n    const text = group\n      .append(\"text\")\n      .attr(\"class\", \"text-sm font-semibold fill-black dark:fill-white\")\n      .attr(\"text-anchor\", \"middle\")\n      .attr(\"x\", 0)\n      .attr(\"y\", 0)\n      .attr(\"dy\", \".35em\")\n      .text(d.data.name);\n\n    // Get bounding box to determine text size\n    const bbox = (text.node() as SVGTextElement).getBBox();\n    const paddingX = 10;\n    const paddingY = 10;\n\n    const width = bbox.width + paddingX * 2;\n    const height = bbox.height + paddingY * 2;\n\n    // Draw rect using text size\n    group\n      .insert(\"rect\", \"text\")\n      .attr(\"class\", props.colorRect)\n      .attr(\"x\", -width / 2)\n      .attr(\"y\", -height / 2)\n      .attr(\"width\", width)\n      .attr(\"height\", height)\n      .attr(\"rx\", 4)\n      .attr(\"ry\", 4);\n  });\n\n  node\n    .append(\"text\")\n    .attr(\"x\", 0)\n    .attr(\"y\", 0)\n    .attr(\"dy\", \".35em\")\n    .attr(\"class\", \"text-sm font-semibold fill-white dark:fill-black\")\n    .attr(\"text-anchor\", \"middle\")\n    .text((d) => d.data.name)\n    .style(\"pointer-events\", \"none\");\n};\n\nconst maxW = computed(() => {\n  return `${props.maxWidth.toString()}px`;\n});\n\nconst maxH = computed(() => {\n  return `${props.maxWidth.toString()}px`;\n});\n</script>\n\n<template>\n  <div>\n    <div\n      ref=\"treeWrapper\"\n      class=\"tree-wrapper mx-auto\"\n      :style=\"{ maxHeight: maxH, maxWidth: maxW }\"\n    >\n      <div ref=\"treeContainer\" class=\"tree-container\" />\n    </div>\n    <EpModal v-model=\"showModal\" :title=\"currentNode.title\" v-if=\"currentNode\">\n      <div v-if=\"currentNode.text\" v-html=\"useRenderText(currentNode.text)\" />\n      <template v-if=\"currentRenderComponent && currentNode.component\">\n        <component\n          :is=\"currentRenderComponent\"\n          v-bind=\"{ ...currentNode.component.data }\"\n        />\n      </template>\n      <div class=\"flex justify-end\">\n        <EpBtn @click=\"closeModal\" type=\"error\" outlined rounded>{{\n          labelClose\n        }}</EpBtn>\n      </div>\n    </EpModal>\n  </div>\n</template>\n\n<style scoped>\n.tree-wrapper {\n  overflow: auto;\n  border: 1px solid #ddd;\n}\n\n.tree-container {\n  width: 100%;\n  overflow-x: auto;\n}\n</style>\n"],"names":["width","height","_createElementBlock","_createElementVNode","_normalizeStyle","_createBlock","EpModal","_unref","_openBlock","_resolveDynamicComponent","_normalizeProps","_mergeProps","_createVNode","EpBtn","labelClose"],"mappings":"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"}

package/dist/components/medias/EpIframe.vue.js

@@ -1,53 +1,80 @@
-import { defineComponent as p, computed as n, toRefs as h, createBlock as _, openBlock as v, unref as i, createSlots as g, withCtx as s, createElementVNode as l } from "vue";
-import I from "../educationals/EpEdu.vue.js";
-import { isHtml as b } from "../../composables/isHtml.js";
-import { useMarkdown as y } from "../../composables/useMarkdown.js";
-import { mdiApplicationBrackets as L } from "@mdi/js";
-const H = ["innerHTML"], k = ["src", "height"], E = /* @__PURE__ */ p({
+import { defineComponent, computed, toRefs, createBlock, openBlock, unref, createSlots, withCtx, createElementVNode } from "vue";
+import _sfc_main$1 from "../educationals/EpEdu.vue.js";
+import { isHtml } from "../../composables/isHtml.js";
+import { useMarkdown } from "../../composables/useMarkdown.js";
+import { mdiApplicationBrackets } from "@mdi/js";
+const _hoisted_1 = ["innerHTML"];
+const _hoisted_2 = ["src", "height"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "EpIframe",
   props: {
     src: {},
-    big: { type: Boolean, default: !1 },
+    big: { type: Boolean, default: false },
     title: {},
     intentions: {},
-    hideIcon: { type: Boolean, default: !1 },
+    hideIcon: { type: Boolean, default: false },
     type: { default: "neutral" },
     mandateLevel: {},
     customHeight: {},
     labelIntentions: {}
   },
-  setup(a) {
-    const e = a, o = n(() => e.intentions ? b(e.intentions) ? e.intentions : y(e.intentions) : null), c = n(() => e.customHeight ? e.customHeight : e.big ? "1000" : "520"), u = n(() => {
-      let t = e.src[e.src.length - 1], r = /^\d+$/.test(t), f = e.src.includes("https://studium.umontreal.ca");
-      return r && f ? e.src + "&embed=1" : e.src;
-    }), { title: m, hideIcon: d } = h(e);
-    return (t, r) => (v(), _(I, {
-      title: i(m),
-      labelIntentions: t.labelIntentions,
-      type: t.type,
-      hideIcon: i(d),
-      icon: i(L),
-      mandateLevel: t.mandateLevel
-    }, g({
-      content: s(() => [
-        l("iframe", {
-          src: u.value,
-          class: "w-full",
-          height: c.value
-        }, null, 8, k)
-      ]),
-      _: 2
-    }, [
-      o.value ? {
-        name: "intentions",
-        fn: s(() => [
-          l("div", { innerHTML: o.value }, null, 8, H)
+  setup(__props) {
+    const props = __props;
+    const renderText = computed(() => {
+      if (!props.intentions) {
+        return null;
+      }
+      if (!isHtml(props.intentions)) {
+        return useMarkdown(props.intentions);
+      }
+      return props.intentions;
+    });
+    const height = computed(() => {
+      if (props.customHeight) {
+        return props.customHeight;
+      }
+      return props.big ? "1000" : "520";
+    });
+    const _src = computed(() => {
+      let lastLetter = props.src[props.src.length - 1];
+      let isNum = /^\d+$/.test(lastLetter);
+      let studiumUrl = props.src.includes("https://studium.umontreal.ca");
+      if (isNum && studiumUrl) {
+        return props.src + "&embed=1";
+      }
+      return props.src;
+    });
+    const { title, hideIcon } = toRefs(props);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$1, {
+        title: unref(title),
+        labelIntentions: _ctx.labelIntentions,
+        type: _ctx.type,
+        hideIcon: unref(hideIcon),
+        icon: unref(mdiApplicationBrackets),
+        mandateLevel: _ctx.mandateLevel
+      }, createSlots({
+        content: withCtx(() => [
+          createElementVNode("iframe", {
+            src: _src.value,
+            class: "w-full",
+            height: height.value
+          }, null, 8, _hoisted_2)
         ]),
-        key: "0"
-      } : void 0
-    ]), 1032, ["title", "labelIntentions", "type", "hideIcon", "icon", "mandateLevel"]));
+        _: 2
+      }, [
+        renderText.value ? {
+          name: "intentions",
+          fn: withCtx(() => [
+            createElementVNode("div", { innerHTML: renderText.value }, null, 8, _hoisted_1)
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1032, ["title", "labelIntentions", "type", "hideIcon", "icon", "mandateLevel"]);
+    };
   }
 });
 export {
-  E as default
+  _sfc_main as default
 };
+//# sourceMappingURL=EpIframe.vue.js.map

package/dist/components/medias/EpIframe.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EpIframe.vue.js","sources":["../../../src/components/medias/EpIframe.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { toRefs, computed } from \"vue\";\nimport EpEdu from \"~/components/educationals/EpEdu.vue\";\nimport { isHtml } from \"~/composables/isHtml\";\nimport { useMarkdown } from \"~/composables/useMarkdown\";\nimport { mdiApplicationBrackets } from \"@mdi/js\";\nimport { EpIframeProps } from \"~/types/medias/EpIframe\";\n\nconst props = withDefaults(defineProps<EpIframeProps>(), {\n  type: \"neutral\",\n  big: false,\n  hideIcon: false,\n});\n\nconst renderText = computed(() => {\n  if (!props.intentions) {\n    return null;\n  }\n  if (!isHtml(props.intentions)) {\n    return useMarkdown(props.intentions);\n  }\n  return props.intentions;\n});\n\nconst height = computed(() => {\n  if (props.customHeight) {\n    return props.customHeight;\n  }\n  return props.big ? \"1000\" : \"520\";\n});\n\nconst _src = computed(() => {\n  let lastLetter = props.src[props.src.length - 1];\n  let isNum = /^\\d+$/.test(lastLetter);\n  let studiumUrl = props.src.includes(\"https://studium.umontreal.ca\");\n  if (isNum && studiumUrl) {\n    return props.src + \"&embed=1\";\n  }\n  return props.src;\n});\n\nconst { title, hideIcon } = toRefs(props);\n</script>\n\n<template>\n  <EpEdu\n    :title=\"title\"\n    :labelIntentions=\"labelIntentions\"\n    :type=\"type\"\n    :hideIcon=\"hideIcon\"\n    :icon=\"mdiApplicationBrackets\"\n    :mandateLevel=\"mandateLevel\"\n  >\n    <template #intentions v-if=\"renderText\">\n      <div v-html=\"renderText\" />\n    </template>\n    <template #content>\n      <iframe :src=\"_src\" class=\"w-full\" :height=\"height\"></iframe>\n    </template>\n    <!-- <template #actions>\n       <EpBtn :color=\"type=='base'?'text-gray-700':'text-white'\" :type=\"type\">[Repair btn style... to change]</EpBtn>\n     </template> -->\n  </EpEdu>\n</template>\n"],"names":["_createBlock","EpEdu","_unref","labelIntentions","type","mandateLevel","_createElementVNode"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAQA,UAAM,QAAQ;AAMd,UAAM,aAAa,SAAS,MAAM;AAChC,UAAI,CAAC,MAAM,YAAY;AACrB,eAAO;AAAA,MACT;AACA,UAAI,CAAC,OAAO,MAAM,UAAU,GAAG;AAC7B,eAAO,YAAY,MAAM,UAAU;AAAA,MACrC;AACA,aAAO,MAAM;AAAA,IACf,CAAC;AAED,UAAM,SAAS,SAAS,MAAM;AAC5B,UAAI,MAAM,cAAc;AACtB,eAAO,MAAM;AAAA,MACf;AACA,aAAO,MAAM,MAAM,SAAS;AAAA,IAC9B,CAAC;AAED,UAAM,OAAO,SAAS,MAAM;AAC1B,UAAI,aAAa,MAAM,IAAI,MAAM,IAAI,SAAS,CAAC;AAC/C,UAAI,QAAQ,QAAQ,KAAK,UAAU;AACnC,UAAI,aAAa,MAAM,IAAI,SAAS,8BAA8B;AAClE,UAAI,SAAS,YAAY;AACvB,eAAO,MAAM,MAAM;AAAA,MACrB;AACA,aAAO,MAAM;AAAA,IACf,CAAC;AAED,UAAM,EAAE,OAAO,aAAa,OAAO,KAAK;;0BAItCA,YAiBQC,aAAA;AAAA,QAhBL,OAAOC,MAAA,KAAA;AAAA,QACP,iBAAiBC,KAAAA;AAAAA,QACjB,MAAMC,KAAAA;AAAAA,QACN,UAAUF,MAAA,QAAA;AAAA,QACV,MAAMA,MAAA,sBAAA;AAAA,QACN,cAAcG,KAAAA;AAAAA,MAAAA;QAKJ,iBACT,MAA6D;AAAA,UAA7DC,mBAA6D,UAAA;AAAA,YAApD,KAAK,KAAA;AAAA,YAAM,OAAM;AAAA,YAAU,QAAQ,OAAA;AAAA,UAAA;;;;QAJlB,WAAA;gBAAjB;AAAA,sBACT,MAA2B;AAAA,YAA3BA,mBAA2B,OAAA,EAAtB,WAAQ,WAAA,SAAU,MAAA,GAAA,UAAA;AAAA,UAAA;;;;;;;"}

package/dist/components/medias/EpIframe.vue2.js

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

package/dist/components/medias/EpIframe.vue2.js.map

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

package/dist/components/medias/EpKatex.vue.js

@@ -1,7 +1,8 @@
-import o from "./EpKatex.vue2.js";
+import _sfc_main from "./EpKatex.vue2.js";
 /* empty css             */
-import t from "../../_virtual/_plugin-vue_export-helper.js";
-const _ = /* @__PURE__ */ t(o, [["__scopeId", "data-v-c2d47687"]]);
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
+const Comp = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c2d47687"]]);
 export {
-  _ as default
+  Comp as default
 };
+//# sourceMappingURL=EpKatex.vue.js.map

package/dist/components/medias/EpKatex.vue.js.map

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