ep-lib-ts 1.0.46 → 1.0.47

package/dist/{index-D5QYJLNE.js → index-QY-UvpNr.js}

@@ -1,4 +1,4 @@
-import { aa as xl } from "./index-FmXc2ivj.js";
+import { ab as xl } from "./index-D6RVSyf7.js";
 function ul(n) {
   return n instanceof Map ? n.clear = n.delete = n.set = function() {
     throw new Error("map is read-only");

package/dist/index.d.ts

@@ -28,12 +28,14 @@ import { default as EpInstructions } from './components/educationals/EpInstructi
 import { default as EpDescription } from './components/educationals/EpDescription.vue';
 import { default as EpConclusion } from './components/educationals/EpConclusion.vue';
 import { default as EpCodeblock } from './components/educationals/EpCodeblock.vue';
+import { default as EpBranchingScenario } from './components/educationals/EpBranchingScenario.vue';
 import { default as EpAccordeon } from './components/interactions/EpAccordeon.vue';
 import { default as EpContentSlider } from './components/interactions/EpContentSlider.vue';
 import { default as EpModal } from './components/interactions/EpModal.vue';
 import { default as EpQuestion } from './components/interactions/EpQuestion.vue';
 import { default as EpTabs } from './components/interactions/EpTabs.vue';
 import { default as EpSummativeTable } from './components/interactions/EpSummativeTable.vue';
+import { default as EpSvgShow } from './components/interactions/EpSvgShow.vue';
 import { default as EpAudio } from './components/medias/EpAudio.vue';
 import { default as EpCarousel } from './components/medias/EpCarousel.vue';
 import { default as EpIframe } from './components/medias/EpIframe.vue';
@@ -53,4 +55,4 @@ import { default as EpHeader } from './components/signages/EpHeader.vue';
 import { default as EpQuote } from './components/signages/EpQuote.vue';
 import { default as EpSkeleton } from './components/signages/EpSkeleton.vue';
 
-export { EpBadge, EpBtn, EpCard, EpChip, EpDivider, EpFlex, EpIcon, EpImg, EpSection, EpSpinner, EpTable, EpBarChart, EpLineChart, EpPieChart, EpFunnelChart, EpText, EpEdu, EpReading, EpResource, EpScope, EpAccordeon, EpContentSlider, EpModal, EpQuestion, EpTabs, EpAudio, EpCarousel, EpIframe, EpKatex, EpLink, EpLinkVersion, EpSoftware, EpSvg, EpTerm, EpTimeLine, EpVideo, EpVideoPanopto, EpAlert, EpHeader, EpQuote, EpSkeleton, EpWordDef, EpSummativeTable, EpObjective, EpSpecificObjective, EpIntroduction, EpInstructions, EpDescription, EpConclusion, EpCodeblock, EpSectionCols, EpCardLink, EpStackedList, EpHoverCard };
+export { EpBadge, EpBtn, EpCard, EpChip, EpDivider, EpFlex, EpIcon, EpImg, EpSection, EpSpinner, EpTable, EpBarChart, EpLineChart, EpPieChart, EpFunnelChart, EpText, EpEdu, EpReading, EpResource, EpScope, EpAccordeon, EpContentSlider, EpModal, EpQuestion, EpTabs, EpAudio, EpCarousel, EpIframe, EpKatex, EpLink, EpLinkVersion, EpSoftware, EpSvg, EpTerm, EpTimeLine, EpVideo, EpVideoPanopto, EpAlert, EpHeader, EpQuote, EpSkeleton, EpWordDef, EpSummativeTable, EpObjective, EpSpecificObjective, EpIntroduction, EpInstructions, EpDescription, EpConclusion, EpCodeblock, EpSectionCols, EpCardLink, EpStackedList, EpHoverCard, EpBranchingScenario, EpSvgShow };

package/dist/{prism-D-x8E1YK.js → prism-Cv4D8Rjm.js}

@@ -1,4 +1,4 @@
-import { aa as V, ab as W } from "./index-FmXc2ivj.js";
+import { ab as V, ac as W } from "./index-D6RVSyf7.js";
 function ee(S, P) {
   for (var i = 0; i < P.length; i++) {
     const g = P[i];

package/dist/style.css

@@ -1 +1 @@
-.content[data-v-3a321611]{max-height:0;overflow:hidden}.modal-mask{position:fixed;z-index:9998;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;transition:opacity .3s ease}.modal-container{margin:auto;max-height:95%;transition:all .3s ease;z-index:9999}.modal-header h3{margin-top:0;color:#42b983}.modal-body{margin:20px 0}.modal-default-button{float:right}.modal-enter-from,.modal-leave-to{opacity:0}.modal-enter-from .modal-container,.modal-leave-to .modal-container{transform:scale(1.1)}.custom_index{z-index:9999;position:absolute;right:12rem}pre{white-space:break-spaces}.shape{height:var(--57a4c52c);width:var(--32b5e5ba)}.v-enter-active[data-v-7e484601],.v-leave-active[data-v-7e484601]{transition:opacity .5s ease}.v-enter-from[data-v-7e484601],.v-leave-to[data-v-7e484601]{opacity:0}.katex[data-v-a5d595cd]{font-size:1.6em}.content[data-v-1ad88e28]{max-height:0;overflow:hidden}.list-enter-active,.list-leave-active{transition:all .5s ease}.list-enter-from,.list-leave-to{opacity:0;transform:translate(30px)}@keyframes fade-22a86a44{0%{opacity:0}to{opacity:1}}@keyframes scale-22a86a44{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}@keyframes slideY-22a86a44{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.fade[data-v-22a86a44]{animation:fade-22a86a44 1s}.scale[data-v-22a86a44]{animation:scale-22a86a44 1s}.slideY[data-v-22a86a44]{animation:slideY-22a86a44 1s}.path-item[data-v-22a86a44]{position:relative}.path-item[data-v-22a86a44]:after{content:"";position:absolute;top:50%;right:100%;width:60px;height:4px;background-color:#374151}.arrow-light-top:before{content:" ";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:rgba(0,0,0,.2) transparent transparent transparent}.arrow-dark-top:before{content:" ";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:black transparent transparent transparent}.arrow-light-bottom:before{content:"";position:absolute;display:inline-block;left:50%;bottom:100%;border-right:7px solid transparent;border-bottom:7px solid #eee;border-left:7px solid transparent;border-bottom-color:#0003}.arrow-dark-bottom:before{content:"";position:absolute;display:inline-block;left:50%;bottom:100%;border-right:7px solid transparent;border-bottom:7px solid black;border-left:7px solid transparent;border-bottom-color:black transparent transparent transparent}.arrow-light-left:before{position:absolute;display:inline-block;left:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-left:5px solid #eee;border-bottom:5px solid transparent;border-left-color:#0003}.arrow-dark-left:before{position:absolute;display:inline-block;left:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-left:5px solid black;border-bottom:5px solid transparent;border-left-color:black transparent transparent transparent}.arrow-light-right:before{position:absolute;display:inline-block;right:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-right:5px solid #eee;border-bottom:5px solid transparent;border-right-color:#0003}.arrow-dark-right:before{position:absolute;display:inline-block;right:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-right:5px solid black;border-bottom:5px solid transparent;border-right-color:black transparent transparent transparent}
+.content[data-v-3a321611]{max-height:0;overflow:hidden}.modal-mask{position:fixed;z-index:9998;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;transition:opacity .3s ease}.modal-container{margin:auto;max-height:95%;transition:all .3s ease;z-index:9999}.modal-header h3{margin-top:0;color:#42b983}.modal-body{margin:20px 0}.modal-default-button{float:right}.modal-enter-from,.modal-leave-to{opacity:0}.modal-enter-from .modal-container,.modal-leave-to .modal-container{transform:scale(1.1)}.custom_index{z-index:9999;position:absolute;right:12rem}pre{white-space:break-spaces}@keyframes fade-7af6ae43{0%{opacity:0}to{opacity:1}}@keyframes scale-7af6ae43{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}@keyframes slideY-7af6ae43{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.fade[data-v-7af6ae43]{animation:fade-7af6ae43 1s}.scale[data-v-7af6ae43]{animation:scale-7af6ae43 1s}.slideY[data-v-7af6ae43]{animation:slideY-7af6ae43 1s}.path-item[data-v-7af6ae43]{position:relative}.path-item[data-v-7af6ae43]:after{content:"";position:absolute;top:50%;right:100%;width:60px;height:4px;background-color:#374151}.shape{height:var(--57a4c52c);width:var(--32b5e5ba)}.v-enter-active[data-v-7e484601],.v-leave-active[data-v-7e484601]{transition:opacity .5s ease}.v-enter-from[data-v-7e484601],.v-leave-to[data-v-7e484601]{opacity:0}.katex[data-v-a5d595cd]{font-size:1.6em}.content[data-v-1ad88e28]{max-height:0;overflow:hidden}.list-enter-active,.list-leave-active{transition:all .5s ease}.list-enter-from,.list-leave-to{opacity:0;transform:translate(30px)}.arrow-light-top:before{content:" ";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:rgba(0,0,0,.2) transparent transparent transparent}.arrow-dark-top:before{content:" ";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:black transparent transparent transparent}.arrow-light-bottom:before{content:"";position:absolute;display:inline-block;left:50%;bottom:100%;border-right:7px solid transparent;border-bottom:7px solid #eee;border-left:7px solid transparent;border-bottom-color:#0003}.arrow-dark-bottom:before{content:"";position:absolute;display:inline-block;left:50%;bottom:100%;border-right:7px solid transparent;border-bottom:7px solid black;border-left:7px solid transparent;border-bottom-color:black transparent transparent transparent}.arrow-light-left:before{position:absolute;display:inline-block;left:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-left:5px solid #eee;border-bottom:5px solid transparent;border-left-color:#0003}.arrow-dark-left:before{position:absolute;display:inline-block;left:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-left:5px solid black;border-bottom:5px solid transparent;border-left-color:black transparent transparent transparent}.arrow-light-right:before{position:absolute;display:inline-block;right:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-right:5px solid #eee;border-bottom:5px solid transparent;border-right-color:#0003}.arrow-dark-right:before{position:absolute;display:inline-block;right:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-right:5px solid black;border-bottom:5px solid transparent;border-right-color:black transparent transparent transparent}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ep-lib-ts",
   "private": false,
-  "version": "1.0.46",
+  "version": "1.0.47",
   "files": [
     "dist",
     "src/components/"

package/src/components/educationals/EpBranchingScenario.vue

@@ -4,6 +4,8 @@ import { ref, computed } from "vue";
 import { useRenderText } from '../../composables/useRenderText';
 import EpIcon from '../../components/basics/EpIcon.vue';
 import { mdiArrowLeft } from "@mdi/js";
+import TextImg from "../tools/TextImg.vue";
+import Details from "../tools/Details.vue";
 
 
 // Defining the props
@@ -15,8 +17,15 @@ interface Option {
     options?: Option[];
 }
 
+interface Choice {
+    question:string;
+    choice:string;
+    img?:string;
+}
+
 interface Props {
     scenarioTitle: string;
+    scenarioImg?:string;
     initialInstruction?: string | null;
     generalFeedback?: string;
     bgColor?: string;
@@ -54,8 +63,6 @@ const getOptionFromItinerary = (itinerary: number[]) => {
             option = option.options[itinerary[i]];
         }
     }
-
-
     return (option !== props.decisionTree)? option : null;
 };
 
@@ -94,16 +101,25 @@ const restart = () => {
 
 // Function to get the choices made based on the itinerary
 const getChoices = (itinerary: number[]) => {
-    let choices: any[] = [{question: props.decisionTree.rootQuestion, choice: props.decisionTree.options[itinerary[0]].name}];
-    let option: any = props.decisionTree.options[itinerary[0]];
+    let choices: Choice[] = [{
+        question: props.decisionTree.rootQuestion, 
+        choice: props.decisionTree.options[itinerary[0]].name,
+        img:props.decisionTree.imgSrc
+    }];
+    let option: Option = props.decisionTree.options[itinerary[0]];
+   
     if (itinerary.length > 1) {
         for (let i = 1; i < itinerary.length; i++) {
             let question: string = option.question;
-            option = option.options[itinerary[i]];
-            choices.push({question, choice: option.name});
+            let img:string|undefined = option.imgSrc
+            if(option.options){
+                option = option.options[itinerary[i]];
+                console.log(option)
+            }
+            choices.push({question, choice: option.name, img});
         }
     }
-
+    
     return choices;
 };
 
@@ -113,27 +129,38 @@ const getChoices = (itinerary: number[]) => {
 
 <template>
     <div>
-
         <!-- The introductory part -->
-        <div v-if="isIntroductoryPart" class="m-4 mx-auto w-2/3 bg-gray-200 dark:bg-slate-800 rounded-md flex flex-col items-center justify-around p-4 fade"  :style="{ minHeight: '500px', backgroundColor: bgColor }">
+        <div v-if="isIntroductoryPart" class="mx-auto w-2/3 bg-gray-200 dark:bg-slate-800 rounded-md flex flex-col items-center justify-around p-4 fade"  :style="{ minHeight: '500px', backgroundColor: bgColor }">
             <h1 class="font-bold text-3xl">{{ scenarioTitle }}</h1>
-            <div class="text-center min-w-max m-3 flex flex-col items-center gap-3" v-if="initialInstruction" v-html="useRenderText(initialInstruction)"></div>
-            <button class="rounded bg-blue-500 text-white py-2 px-4 min-w-28 my-3" @click="isIntroductoryPart = false">Commencer</button>
+
+            <TextImg v-if="initialInstruction"
+             :text="initialInstruction"
+             :src="scenarioImg"
+             :alt="`image d'introduction ${scenarioTitle}`"
+            />
+            <button class="rounded bg-primary text-white py-2 px-4 min-w-28 my-2" @click="isIntroductoryPart = false">Commencer</button>
         </div>
 
 
         <div class="m-4 mx-auto w-2/3 rounded-md flex flex-col p-4 bg-gray-200 dark:bg-slate-800" :style="{ minHeight: '500px', backgroundColor: bgColor }" v-else>
             <!-- Return button -->
-            <div><button :class="`rounded bg-blue-500 text-white py-2 px-4 m-2 ${transitionAnimation}`" v-if="notTheEnd" @click="goToPrevious">
+            <div><button :class="`rounded bg-primary text-white py-2 px-4 m-2 ${transitionAnimation}`" v-if="notTheEnd" @click="goToPrevious">
                 <EpIcon :icon-path="mdiArrowLeft" size="25"></EpIcon>
             </button></div>
 
             <!-- First question -->
             <div :class="`flex-grow flex flex-col items-center justify-around ${transitionAnimation}`" v-if="currentSlide === 0">
-                <div class="text-center min-w-max m-3 flex flex-col items-center gap-3" v-html="useRenderText(decisionTree.rootQuestion)"></div>
-                <img v-if="decisionTree.imgSrc" :src="decisionTree.imgSrc" class="rounded" width="200" />
+                  
+                  <TextImg
+                    :text="decisionTree.rootQuestion"
+                    :src="decisionTree.imgSrc"
+                    :alt="`image de la question ${decisionTree.rootQuestion}`"
+                  />
+               
+
                 <div :class="`w-full justify-items-center mx-4 grid ${(decisionTree.options.length <= 2)? 'grid-cols-2' : 'grid-cols-3'}`">
-                    <button :class="`rounded bg-blue-500 text-white py-2 px-4 min-w-28 max-w-40 my-3 ${(index === (decisionTree.options.length - 1) && (index % 3) === 0)? `col-span-3`: 'col-span-1'}`" v-for="(option, index) in decisionTree.options" :key="index" @click="itinerary.push(index); currentSlide++; currentOption = option">{{ option.name }}</button>
+
+                    <button :class="`rounded bg-primary text-white py-2 px-4 min-w-28 max-w-40 my-3 ${(index === (decisionTree.options.length - 1) && (index % 3) === 0)? `col-span-3`: 'col-span-1'}`" v-for="(option, index) in decisionTree.options" :key="index" @click="itinerary.push(index); currentSlide++; currentOption = option">{{ option.name }}</button>
                 </div>
             </div>
 
@@ -142,10 +169,15 @@ const getChoices = (itinerary: number[]) => {
 
                 <!-- The current slide -->
                 <div :key="currentOption.question" :class="`flex-grow flex flex-col items-center justify-around ${transitionAnimation}`" v-if="notTheEnd">
-                    <div class="text-center min-w-max m-3 flex flex-col items-center gap-3" v-html="useRenderText(currentOption.question)"></div>
-                    <img v-if="currentOption.imgSrc" :src="currentOption.imgSrc" class="rounded" width="200" />
+
+                     <TextImg
+                        :text="currentOption.question"
+                        :src="currentOption.imgSrc"
+                        :alt="`image de la question ${currentOption.question}`"
+                    />
+                   
                     <div :class="`w-full justify-items-center mx-4 grid ${(currentOption.options.length <= 2)? 'grid-cols-2' : 'grid-cols-3'}`">
-                        <button :class="`rounded bg-blue-500 text-white py-2 px-4 min-w-28 max-w-40 my-3 ${(index === (currentOption.options.length - 1) && (index % 3) === 0)? `col-span-3`: 'col-span-1'}`" v-for="(option, index) in currentOption.options" :key="index" @click="itinerary.push(index); currentSlide++; currentOption = option">{{ option.name }}</button>
+                        <button :class="`rounded bg-primary text-white py-2 px-4 min-w-28 max-w-40 my-3 ${(index === (currentOption.options.length - 1) && (index % 3) === 0)? `col-span-3`: 'col-span-1'}`" v-for="(option, index) in currentOption.options" :key="index" @click="itinerary.push(index); currentSlide++; currentOption = option">{{ option.name }}</button>
                     </div>
                 </div>
 
@@ -153,23 +185,39 @@ const getChoices = (itinerary: number[]) => {
                 <div :class="`flex-grow flex flex-col items-center ${transitionAnimation}`" v-else>
                     <div class="flex-grow flex flex-col items-center">
                         <h1 class="my-4 font-bold text-3xl">Vous avez terminé le scénario!</h1>
+                        
                         <div class="grid grid-cols-2 gap-2">
-                            <div class="col-span-1 flex flex-col items-center">
+                            <div :class="[
+                                'flex flex-col items-center',
+                                generalFeedback ? 'col-span-1' : 'col-span-2'
+                                ]">
                                 <h3 class="font-bold">Voici votre parcours</h3>
                                 <div class="flex flex-col relative w-full gap-4 px-5 py-5 items-start overflow-auto border-l-4 border-gray-700" style="max-width: 600px; height: 300px;">
-                                    <div v-for="(question, index) in getChoices(itinerary)" :key="index" class="path-item rounded bg-blue-500 text-white py-2 px-4 flex flex-col items-center">
+                                    <!-- <div  class="path-item rounded bg-primary text-white py-2 px-4 flex flex-col items-center">
                                         <u>{{ question.question }}</u>
                                         <p>{{ question.choice }}</p>
-                                    </div>
+                                    </div> -->
+                                    <template v-for="(question, index) in getChoices(itinerary)" :key="`question-${index}`"> 
+                                        <div class="path-item">
+                                            <Details 
+                                            :content="question.question" 
+                                            :title="question.choice"
+                                            :img="question.img"
+                                            />
+                                        </div>
+                                    </template>
+                                   
+                                    
                                 </div>
                             </div>
-                            <div class="flex flex-col col-span-1 justify-center items-center px-4 border-l-2 border-gray-700 overflow-auto">
-                                <h3 class="font-bold">Feedback général</h3>
-                                <p class="text-center">{{ generalFeedback }}</p>
+                            <div v-if="generalFeedback" class="flex flex-col col-span-1 items-center px-4 border-l-2 border-gray-700 overflow-auto">
+                                <h3 class="font-bold mb-3">Feedback général</h3>
+                                <div v-html="useRenderText(generalFeedback)"></div>
                             </div>
                         </div>
+                        
                     </div>
-                    <button class='rounded bg-blue-500 text-white py-2 px-4 min-w-28 my-3 col-span-1' @click="restart">Recommencer</button>
+                    <button class='rounded bg-primary text-white py-2 px-4 min-w-28 my-3 col-span-1' @click="restart">Recommencer</button>
                 </div> 
 
             </div>

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/tools/Details.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import {ref} from 'vue'
+import EpModal from '../interactions/EpModal.vue';
+import { useRenderText } from '../../composables/useRenderText';
+import EpBtn from '../basics/EpBtn.vue';
+import EpDivider from '../basics/EpDivider.vue';
+import TextImg from './TextImg.vue';
+const showModal = ref(false)
+
+
+interface Props {
+    title?:string;
+    content:string;
+    labelClose?:string;
+    img?:string;
+}
+
+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"> 
+            <TextImg
+             :text="content"
+             :src="img"
+             :alt="`image ${title}`"
+            />
+            <EpDivider/>
+            <p>{{title}}</p>
+            <div class="flex justify-end">
+             <EpBtn 
+                type="error" 
+                rounded
+                size="small"
+                @click="showModal = false">
+                {{labelClose}}
+            </EpBtn>
+            </div>
+            
+        </EpModal>
+        <p>{{title}}</p>
+    </div>
+</template>

package/src/components/tools/TextImg.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import {computed} from "vue"
+import { useRenderText } from '../../composables/useRenderText';
+interface Props{
+    src?:string;
+    alt?:string
+    text:string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+})
+
+const styles = computed(()=> {
+    return props.src ? 'md:w-1/2' : 'md:w-full'
+})
+
+</script>
+
+<template>
+    <div class="flex flex-col md:flex-row items-center justify-center gap-5">
+        <div :class="`w-full ${styles}`">
+            <div v-html="useRenderText(text)"></div>
+        </div>
+        <div v-if="src" class="w-full md:w-1/2 flex justify-center">
+            <img class="w-full max-w-md object-contain rounded-md" :src="src" :alt="alt" />
+        </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
-};