ep-lib-ts 1.0.46 → 1.0.48

package/src/components/interactions/EpDraggable.vue

@@ -39,7 +39,7 @@ const updateSize = () => {
     const rect = myImage.value.getBoundingClientRect();
     actualRect.value = { width: rect.width, height: rect.height };
 
-    console.log('Image size updated. Width:', actualRect.value.width, 'Height:', actualRect.value.height);
+    //console.log('Image size updated. Width:', actualRect.value.width, 'Height:', actualRect.value.height);
 };
 
 
@@ -56,7 +56,7 @@ const handleImageLoad = (event: any) => {
     originalWidth.value = event.target.naturalWidth;
     originalHeight.value = event.target.naturalHeight;
 
-    console.log('Image loaded. Width:', originalWidth.value, 'Height:', originalHeight.value);
+   // console.log('Image loaded. Width:', originalWidth.value, 'Height:', originalHeight.value);
 
     updateSize();
 }
@@ -93,7 +93,7 @@ const choices = ref<Choice[]>( props.sockets.map((s) => {
 
 // Manage drag and drop
 const onAdd = (event: any, index: number) => {
-    console.log(event.clone);
+   // console.log(event.clone);
 
     // Retirer l'élément de la liste des réponses disponibles
     availableAnswers.value = availableAnswers.value.filter(item => item.name !== event.clone.name);
@@ -101,7 +101,7 @@ const onAdd = (event: any, index: number) => {
 }
 
 const onRemove = (event: any, index: number) => {
-    console.log(event.clone);
+   // console.log(event.clone);
 
     choices.value[index].choice = [];
     choices.value[index].allowPut = true;

package/src/components/interactions/EpSvgShow.vue

@@ -2,96 +2,96 @@
 import { onMounted, ref, computed, nextTick } from 'vue';
 import { useRenderText } from '../../composables/useRenderText';
 
-
-
 interface Props {
-    svg: string,
-    id: string,
-    animation?: "" | "translateX" | "scale",
-    multiple?: boolean
+  svg: string,
+  animation?: "" | "translateX" | "scale",
+  multiple?: boolean
 }
 
-
 const props = withDefaults(defineProps<Props>(), {
-    animation: "",
-    multiple: false
+  animation: "",
+  multiple: false
 });
 
 const svg = ref<string>("");
 
+// Refs
+const svgContainer = ref<HTMLElement | null>(null);
+
 const animationType = computed(() => {
-    switch (props.animation) {
-        case "translateX":
-            return "animate-slide";
-        case "scale":
-            return "animate-zoom";
-        default:
-            return "animate-fade";
-    }
+  switch (props.animation) {
+    case "translateX":
+      return "animate-slide";
+    case "scale":
+      return "animate-zoom";
+    default:
+      return "animate-fade";
+  }
 });
 
-
-
-
-
-onMounted(async() => {
-    svg.value = useRenderText(props.svg);
-
-    await nextTick();
-
-    // manage the scenes
-    const scenes = document.getElementById(props.id)?.getElementsByClassName('scene');
-
-    if(scenes) {
-        Array.from(scenes).forEach((s) => {
-            if(!s.classList.contains('hidden')) {
-                s.classList.add('hidden');
-            }
-        });
+const showScene = (scene: string) => {
+  if (!svgContainer.value) return;
+  const currentScene = svgContainer.value.querySelector(`[data-scene="${scene}"]`)
+  if(!currentScene) return;
+  if(!props.multiple){
+    hideScenes()
+  }
+  currentScene.classList.remove('hidden', animationType.value)
+  currentScene.classList.add(animationType.value)
+//   const scenes = svgContainer.value.getElementsByClassName('scene');
+//   Array.from(scenes).forEach((s) => {
+//     if (s.classList.contains(`scene-${scene}`)) {
+//       s.classList.remove('hidden', animationType.value);
+//       s.classList.add(animationType.value);
+//     } else {
+//       if (!props.multiple && !s.classList.contains('hidden')) {
+//         s.classList.add('hidden');
+//         s.classList.remove(animationType.value);
+//       }
+//     }
+//   });
+};
+
+const hideScenes = () => {
+if (!svgContainer.value) return;
+const scenes = svgContainer.value.querySelectorAll('[data-scene]');
+  Array.from(scenes).forEach((s) => {
+    if (!s.classList.contains('hidden')) {
+      s.classList.add('hidden');
+      s.classList.remove(animationType.value);
     }
+  });
+}
 
-    // manage the buttons
-    const btns = document.getElementById(props.id)?.getElementsByClassName('btn');
+onMounted(async () => {
+  svg.value = useRenderText(props.svg);
 
-    if(btns) {
-        Array.from(btns).forEach((b) => {
-            b.addEventListener('click', (e) => {
-                const scene = b.getAttribute("id");
-                showScene(scene?? "");
-            });
-        });
-    }
-});
+  await nextTick();
 
+  if (!svgContainer.value) return;
 
+  // Hide all scenes initially
+  hideScenes()
 
-const showScene = (scene: string) => {
-    console.log('event', scene);
-    if(svg.value) {
-        const scenes = document.getElementById(props.id)?.getElementsByClassName('scene');
-        if(scenes) {
-            Array.from(scenes).forEach((s) => {
-                if (s.classList.contains(`scene-${scene}`)) {
-                    s.classList.remove('hidden', animationType.value);
-                    s.classList.add(animationType.value);
-                } else {
-                    if(!props.multiple && !s.classList.contains('hidden')) {
-                        s.classList.add('hidden');
-                        s.classList.remove(animationType.value);
-                    }
-                }
-            });
-        }
-    }
-}
+  // Bind click events to buttons
+  const btns = svgContainer.value.querySelectorAll('[data-btn]');
+  Array.from(btns).forEach((b) => {
+    b.classList.add('cursor-pointer')
+    b.addEventListener('click', () => {
+      const sceneName = b.getAttribute("data-btn")
+      showScene(sceneName ?? "");
+    });
+  });
+});
 
 
 
 </script>
 
 
+
 <template>
     <!-- The buttons must have class "btn" and an unique id="<scene-name>"
     The scenes elements must have class "scene" and "scene-<scene-name>" -->
-    <div :id="id" v-html="svg"></div>
+    <div ref="svgContainer" v-html="svg"></div>
 </template>

package/src/components/medias/EpHierarchy.vue

@@ -0,0 +1,345 @@
+<script setup lang="ts">
+import { ref, onMounted, computed, defineAsyncComponent } from 'vue'
+import { hierarchy, tree, cluster, type HierarchyPointLink, type HierarchyPointNode } from 'd3-hierarchy'
+import * as d3 from 'd3-selection'
+import { linkVertical, linkHorizontal } from 'd3-shape'
+//import { ascending } from 'd3-array'
+import * as d3Zoom from 'd3-zoom'
+import type { TreeNode, ColorPath, ColorRect } from '../../types/Hierarchy'
+import type { NestedComponents } from '../../types/Component'
+import { useComponent } from '../../composables/useComponent'
+import EpModal from '../interactions/EpModal.vue'
+import EpBtn from '../basics/EpBtn.vue'
+import { useRenderText } from '../../composables/useRenderText'
+
+
+
+interface Props {
+  nodes: TreeNode;
+  maxWidth?: number;
+  maxHeight?: number;
+  labelClose?: string;
+  isCluster?:boolean;
+  colorPath?:ColorPath;
+  colorRect?:ColorRect;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  labelClose: "fermer",
+  maxWidth: 800,
+  maxHeight: 600,
+  isCluster:false,
+  colorRect:'fill-main-color-400',
+  colorPath:'stroke-yellow-400'
+})
+
+const treeContainer = ref<HTMLDivElement | null>(null)
+const treeWrapper = ref<HTMLDivElement | null>(null)
+
+
+/* control modal */
+type ShowNode = {
+  title: string;
+  text?: string;
+  component?: NestedComponents
+}
+
+const currentNode = ref<ShowNode | null>(null)
+const showModal = ref(false)
+
+const handleNodeClick = (node: TreeNode) => {
+  currentNode.value = {
+    title: node.name,
+    text: node.text,
+    component: node.component
+  }
+  showModal.value = true
+}
+
+const closeModal = () => {
+  showModal.value = false
+  currentNode.value = null
+}
+
+const currentRenderComponent = computed(() => {
+  if (currentNode.value && currentNode.value.component) {
+    const componentToLoad = useComponent(currentNode.value.component.type);
+    return defineAsyncComponent(() => import(`../${componentToLoad.path}/${componentToLoad.name}.vue`));
+  }
+  return null;
+});
+
+onMounted(() => {
+  if (!treeContainer.value) return
+  
+  if(props.isCluster){
+    clusterView()
+  }else{
+    treeView()
+  }
+  
+  
+
+})
+
+
+const treeView = () => {
+  const rectW = 130
+  const rectH = 40
+  const margin = { top: 40, right: 40, bottom: 40, left: 40 }
+
+  const root = hierarchy<TreeNode>(props.nodes)
+  //const totalLeafCount = root.leaves().length
+  const width = Math.max(props.maxWidth)
+  const height = props.maxHeight
+
+  const treeLayout = tree<TreeNode>()
+    .nodeSize([170, 100]) // [x spacing, y spacing]
+
+  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<SVGSVGElement, unknown>()
+    .scaleExtent([0.5, 2])
+    .on('zoom', (event) => {
+      g.attr('transform', event.transform)
+    })
+
+  svg.call(zoom)
+
+  const centerX = width / 2 - treeData.x
+  const centerY = 30//height / 2 - treeData.y
+  const identity = (d3Zoom as any).zoomIdentity
+  svg.call(zoom.transform, identity.translate(centerX, centerY))
+
+  // Links
+  const linkPath = linkVertical<HierarchyPointLink<TreeNode>, HierarchyPointNode<TreeNode>>()
+    .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`
+    })
+
+  // Nodes
+  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', 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))
+      }
+    })
+  //.style('cursor', 'pointer')
+  //.on('click', (_event, d) => handleNodeClick(d.data))
+
+  node.each(function (d) {
+    const group = d3.select(this)
+
+    // Append text temporarily
+    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)
+
+    // Get bounding box to determine text size
+    const bbox = (text.node() as SVGTextElement).getBBox()
+    const paddingX = 10
+    const paddingY = 10
+
+    const width = bbox.width + paddingX * 2
+    const height = bbox.height + paddingY * 2
+
+    // Draw rect using text size
+    group.insert('rect', 'text')
+      .attr('class', props.colorRect)
+      .attr('x', -width / 2)
+      .attr('y', -height / 2)
+      .attr('width', width)
+      .attr('height', height)
+      .attr('rx', 4)
+      .attr('ry', 4)
+  })
+
+
+  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 rectW = 130
+  const rectH = 40
+  const margin = { top: 40, right: 40, bottom: 40, left: 40 }
+
+  const root = hierarchy<TreeNode>(props.nodes)
+  //const totalLeafCount = root.leaves().length
+  const width = Math.max(props.maxWidth)
+  const height = props.maxHeight
+
+  const treeLayout = cluster<TreeNode>()
+    .nodeSize([130, 130]) // [x spacing, y spacing]
+
+  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<SVGSVGElement, unknown>()
+    .scaleExtent([0.1, 4])
+    .on('zoom', (event) => {
+      g.attr('transform', event.transform)
+    })
+
+  svg.call(zoom)
+
+  const centerX = 30
+  const centerY = height / 2 - treeData.x
+  const identity = (d3Zoom as any).zoomIdentity
+  svg.call(zoom.transform, identity.translate(centerX, centerY))
+
+  // Links
+  const linkPath = linkHorizontal<HierarchyPointLink<TreeNode>, HierarchyPointNode<TreeNode>>()
+  .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`
+    })
+
+  // Nodes
+     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', 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))
+      }
+    })
+  //.style('cursor', 'pointer')
+  //.on('click', (_event, d) => handleNodeClick(d.data))
+
+  node.each(function (d) {
+    const group = d3.select(this)
+
+    // Append text temporarily
+    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)
+
+    // Get bounding box to determine text size
+    const bbox = (text.node() as SVGTextElement).getBBox()
+    const paddingX = 10
+    const paddingY = 10
+
+    const width = bbox.width + paddingX * 2
+    const height = bbox.height + paddingY * 2
+
+    // Draw rect using text size
+    group.insert('rect', 'text')
+      .attr('class', props.colorRect)
+      .attr('x', -width / 2)
+      .attr('y', -height / 2)
+      .attr('width', width)
+      .attr('height', height)
+      .attr('rx', 4)
+      .attr('ry', 4)
+  })
+
+
+  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`
+})
+
+</script>
+
+
+<template>
+  <div>
+    <div ref="treeWrapper" class="tree-wrapper mx-auto" :style="{ maxHeight: maxH, maxWidth: maxW }">
+      <div ref="treeContainer" class="tree-container"></div>
+    </div>
+    <EpModal v-model="showModal" :title="currentNode.title" v-if="currentNode">
+      <div v-if="currentNode.text" v-html="useRenderText(currentNode.text)"></div>
+      <template v-if="currentRenderComponent && currentNode.component">
+        <component :is="currentRenderComponent" v-bind="{ ...currentNode.component.data }" />
+      </template>
+      <div class="flex justify-end">
+        <EpBtn @click="closeModal" type="error" outlined rounded>{{ labelClose }}</EpBtn>
+      </div>
+    </EpModal>
+  </div>
+</template>
+
+<style scoped>
+.tree-wrapper {
+  overflow: auto;
+  border: 1px solid #ddd;
+}
+
+.tree-container {
+  width: 100%;
+  overflow-x: auto;
+}
+</style>

package/src/components/medias/EpSoftware.vue

@@ -17,7 +17,6 @@ interface Props {
   title: string;
   mandateLevel?:MandateLevel | null;
   intentions?: string;
-  version_link?: null;
   hideCover?: boolean;
   version?: string;
   type?:MediaVariants;
@@ -65,7 +64,7 @@ const { title, intentions, cover, hideCover, version, labelCard, hideIcon, manda
         <template v-if="!hideCover">
           <img
             v-if="hasCover"
-            class="object-cover h-24 w-full rounded-t-lg object-cover md:h-auto md:w-24 md:rounded-none md:rounded-l-lg"
+            class="h-24 w-full rounded-t-lg object-cover md:h-auto md:w-24 md:rounded-none md:rounded-l-lg"
             :src="cover"
             :alt="`image de la lecture ${title}`"
           />

package/src/components/tools/Details.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import {ref} from 'vue'
+import EpModal from '../interactions/EpModal.vue';
+import type { NestedComponents } from '../../types/Component';
+import EpBtn from '../basics/EpBtn.vue';
+import EpDivider from '../basics/EpDivider.vue';
+import TextMedia from './TextMedia.vue';
+const showModal = ref(false)
+
+
+interface Props {
+    title?:string;
+    content:string;
+    labelClose?:string;
+    media?:NestedComponents
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    title:"Voir détails",
+    labelClose:"Fermer"
+})
+
+</script>
+
+<template>
+    <div class="cursor-pointer rounded bg-primary text-white py-2 px-4 flex flex-col items-center" @click="showModal = true">
+        <EpModal v-model="showModal" :title="content"> 
+            <TextMedia
+             :text="title"
+             :media="media"
+            />
+            <EpDivider/>
+            <div class="flex justify-end">
+             <EpBtn 
+                type="error" 
+                rounded
+                size="small"
+                @click="showModal = false">
+                {{labelClose}}
+            </EpBtn>
+            </div>
+            
+        </EpModal>
+        <p class="dark:text-black">{{title}}</p>
+    </div>
+</template>

package/src/components/tools/TextMedia.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import {computed, defineAsyncComponent} from "vue"
+import { useRenderText } from '../../composables/useRenderText';
+import { useComponent } from "../../composables/useComponent";
+import type { NestedComponents } from "../../types/Component";
+
+interface Props{
+    media?:NestedComponents;
+    text:string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+})
+
+const currentRenderComponent = computed(() => {
+	if (props.media) {
+		const componentToLoad = useComponent(props.media.type);
+		return defineAsyncComponent(() => import(`../${componentToLoad.path}/${componentToLoad.name}.vue`));
+	}
+	return null;
+});
+
+</script>
+
+<template>
+    <div class="flex items-center justify-center gap-1">
+        <div class="w-full" v-html="useRenderText(text)"></div>
+        <div class="w-full" v-if="currentRenderComponent && media">
+           <component 
+            :is="currentRenderComponent" 
+            v-bind="{...media.data}"/>
+        </div>
+    </div>
+</template>

package/dist/BgAudio-ryf2FIxF.js

@@ -1,4 +0,0 @@
-import { a8 as f } from "./index-FmXc2ivj.js";
-export {
-  f as default
-};

package/dist/DisplayBox-ky90shjr.js

@@ -1,4 +0,0 @@
-import { a9 as f } from "./index-FmXc2ivj.js";
-export {
-  f as default
-};

package/dist/EpAlert-BUiXiWRL.js

@@ -1,4 +0,0 @@
-import { a4 as f } from "./index-FmXc2ivj.js";
-export {
-  f as default
-};

package/dist/EpAudio-CkZrkt3Z.js

@@ -1,4 +0,0 @@
-import { U as f } from "./index-FmXc2ivj.js";
-export {
-  f as default
-};

package/dist/EpAvatar-2ZL5g8-2.js

@@ -1,4 +0,0 @@
-import { c as f } from "./index-FmXc2ivj.js";
-export {
-  f as default
-};

package/dist/EpBadge-vOdZrc0e.js

@@ -1,4 +0,0 @@
-import { d as f } from "./index-FmXc2ivj.js";
-export {
-  f as default
-};

package/dist/EpBarChart-CUUaOMsS.js

@@ -1,4 +0,0 @@
-import { u as f } from "./index-FmXc2ivj.js";
-export {
-  f as default
-};