ep-lib-ts 0.1.26 → 0.1.27

package/dist/style.css

@@ -1 +1 @@
-.content[data-v-ab122c9c]{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}.h-custom{height:30rem}.p-custom p{margin-bottom:1em}.v-enter-active[data-v-049ea2df],.v-leave-active[data-v-049ea2df]{transition:opacity .5s ease}.v-enter-from[data-v-049ea2df],.v-leave-to[data-v-049ea2df]{opacity:0}.katex[data-v-24ff8b28]{font-size:1.3em}.content[data-v-523dedc7]{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)}
+.content[data-v-ab122c9c]{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}.h-custom{height:30rem}.p-custom p{margin-bottom:1em}.v-enter-active[data-v-049ea2df],.v-leave-active[data-v-049ea2df]{transition:opacity .5s ease}.v-enter-from[data-v-049ea2df],.v-leave-to[data-v-049ea2df]{opacity:0}.katex[data-v-24ff8b28]{font-size:1.3em}.content[data-v-4cca257a]{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)}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ep-lib-ts",
   "private": false,
-  "version": "0.1.26",
+  "version": "0.1.27",
   "files": [
     "dist",
     "src/components/"
@@ -50,7 +50,7 @@
     "typescript": "^5.2.0-dev.20230801",
     "vite": "^4.1.0",
     "vite-plugin-dts": "^3.5.2",
-    "vue-tsc": "^1.8.10"
+    "vue-tsc": "^1.8.19"
   },
   "peerDependencies": {
     "vue": "^3.2.45"

package/src/components/basics/EpImg.vue

@@ -38,7 +38,7 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
    alt: "Image snfas",
-   cols: "basis-6/12",
+   cols: "6",
    thumbnail: false,
    noModal:false
 })

package/src/components/basics/EpText.vue

@@ -4,7 +4,6 @@ import { isHtml } from "../../composables/isHtml";
 import { useMarkdown } from "../../composables/useMarkdown";
 import EpAccordeon from "../interactions/EpAccordeon.vue";
 
-
 interface Props {
   glossary?: any[];
   content: string;
@@ -30,13 +29,21 @@ const renderText = computed(() => {
   if (!isHtml(props.content)) {
     return useMarkdown(props.content);
   }
+  if(!props.glossary){
+    return props.content
+  }
   //return props.content
   //create a div
   const div = document.createElement("DIV");
+
+  //format string
+  const contentString = props.content.trim();
+  const newFormat = contentString.replace(/<p>/g, '<div style="margin-bottom: 1em;">').replace(/<\/p>/g, '</div>')
   ///add the html input to the div
-  div.innerHTML = props.content.trim();
+  div.innerHTML = newFormat
   ///get strign of html
   let newStr = div.outerHTML;
+  //console.log(newStr)
   //find all span.ep_glossary_item to know the glossary terms in the text
   const glossaryTerms = div.querySelectorAll(".ep_glossary_item");
   //  console.log(glossaryTerms)
@@ -45,6 +52,7 @@ const renderText = computed(() => {
     ///check every term and replace it
     glossaryTerms.forEach((item) => {
       //get id
+     
       const id = item.getAttribute("data-id");
       //get content text
       const render_word = item.innerHTML;
@@ -57,7 +65,9 @@ const renderText = computed(() => {
       //if was found
       if (term) {
         ///add the new values to the array
+       
         const word = item.outerHTML;
+       // console.log(word)
         //check if the term has relations
         const foundedRelations = _glossary.filter((x) =>
           x.relation.some((item: string) => {
@@ -69,36 +79,37 @@ const renderText = computed(() => {
         const termsRelation = foundedRelations.map((x) => x.term);
         const variation = term.variation;
         const hasImge = term.src ? term.src : "";
-        //const replaceWord = `<EpBtn :pts-data="{term:'${term.term}', definition:'${term.definition}', renderword:'${render_word}', graminfo:'${term.graminfo}', domain:'${term.domain}',variation:'${variation}', relations_names:'${termsRelation}', relations_ids:'${idsRelation}'}"></EpBtn>`
-        const replaceWord = ` <EpTerm term="${term.term}" word="${render_word}" variations="${variation}" graminfo="${term.graminfo}" src='${hasImge}' domain="${term.domain}" relations="${termsRelation}" idrelation="${idsRelation}"> ${term.definition} </EpTerm> `;
+        const replaceWord = `<div style="display:inline"><EpTerm term="${term.term}" word="${render_word}" variations="${variation}" graminfo="${term.graminfo}" src="${hasImge}" domain="${term.domain}" relations="${termsRelation}" idrelation="${idsRelation}" > ${term.definition}</EpTerm> </div>`;
         //replace output string
         newStr = newStr.replace(word, replaceWord);
+       
       }
     });
   }
-  div.innerHTML = newStr;
-  // console.log(div.innerHTML)
-  return div.innerHTML;
+  div.innerHTML = newStr
+  return div.innerHTML
 });
 
+//console.log(renderText.value)
+
 const myRenderComponent = () => {
   const r = {
     components: {
-      epterm: defineAsyncComponent(()=>import('../medias/EpTerm.vue')),
+       epterm: defineAsyncComponent(()=>import('../medias/EpTerm.vue')),
     },
-    template: `<div>${renderText.value}</div>`,
+    template: `${renderText.value}`,
   };
 
   return h(r);
 };
 
 
-
 const { compact } = toRefs(props);
 </script>
 
 <template>
  <div>
+
    <myRenderComponent v-if="!compact"></myRenderComponent>
     <EpAccordeon outlined :title="renderTitle" v-else>
       <myRenderComponent></myRenderComponent>

package/src/components/medias/EpSvg.vue

@@ -6,16 +6,39 @@ import { useRenderText } from "../../composables/useRenderText";
 import { mdiImage } from '@mdi/js';
 import EpEdu from '../educationals/EpEdu.vue';
 
+
+
 interface Props {
    desc?:string;
    title?:string;
    content?:string;
    mandateLevel?: string | MandateLevel | null;
-   type?:MediaVariants
+   type?:MediaVariants;
+   cols?:string | number;
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  cols: "6",
+})
+
+const Cols = [
+   'basis-6/12',
+   'basis-1/12',
+   'basis-2/12',
+   'basis-3/12',
+   'basis-4/12',
+   'basis-5/12',
+   'basis-6/12',
+   'basis-7/12',
+   'basis-8/12',
+   'basis-9/12',
+   'basis-10/12',
+   'basis-11/12',
+   'basis-12/12',
+]
 
+const renderCols = computed(() => {
+   return Cols[+props.cols]
 })
 
 const renderText = computed(()=> {
@@ -27,7 +50,7 @@ const renderText = computed(()=> {
 
 
 
-const {title, content} = toRefs(props)
+const {title, content, cols} = toRefs(props)
  
 </script>
 
@@ -37,11 +60,11 @@ const {title, content} = toRefs(props)
       <div v-html="renderText"></div>
     </template>
     <template #content>
-      <div class="flex justify-center">
-        <div class="w-4/5" v-if="content">
-         <div v-html="content" class="md:w-96  w-56 mx-auto"></div>
+        <div class="flex">
+          <div v-if="content" :class="`mx-auto ${renderCols} bg-primary`">
+             <div v-html="content" class="w-full"></div>
+          </div>
         </div>
-      </div>
     </template>
   </EpEdu>
 </template>

package/src/components/medias/EpTerm.vue

@@ -81,12 +81,12 @@ const renderDomain = computed(() => {
 const toggleModal = () => {
   show.value = !show.value
 }
-
+/*
 const el = (contentref:any) => {
    const contentHtml = contentref.innerHTML 
    const renderHtml = useRenderText(contentHtml)
    contentref.innerHTML = renderHtml
-}
+}*/
 
 const { term, graminfo, labelClose, src } = toRefs(props);
 </script>
@@ -128,7 +128,7 @@ const { term, graminfo, labelClose, src } = toRefs(props);
       >
     </div>
     <!-- <div v-html="renderText"></div> -->
-    <div :ref="el">
+    <div>
       <slot></slot>
     </div>
     <EpImg v-if="src" :src="src"></EpImg>

package/src/components/medias/EpTimeLine.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, toRefs, onMounted, computed } from 'vue';
 //types in capital letter
-import {TagTimeLine, HeadTimeLine, EventTimeLine, ColorsTags, colorsTimeLine} from '../../types/TimeLine'
+import { TagTimeLine, HeadTimeLine, EventTimeLine, ColorsTags, colorsTimeLine } from '../../types/TimeLine'
 import TimeLineItem from '../tools/TimelineItem.vue'
 import EpIcon from '../basics/EpIcon.vue';
 import { mdiCheckboxBlankCircleOutline } from '@mdi/js';
@@ -9,83 +9,89 @@ import { mdiCheckboxMarkedCircle } from '@mdi/js';
 
 interface TimelineHeading {
   title?: {
-    text?:HeadTimeLine
+    text?: HeadTimeLine
   }
 }
 
 interface Props {
-  tags:TagTimeLine[];
-  events:EventTimeLine[];
-  title?:TimelineHeading;
+  tags: TagTimeLine[];
+  events: EventTimeLine[];
+  title?: TimelineHeading;
 }
 
-const props = withDefaults(defineProps<Props>(),{})
+
+
+const props = withDefaults(defineProps<Props>(), {
+
+})
 
 const timeLineTags = ref<TagTimeLine[]>()
 
-onMounted(()=> {
-  if(props.tags){
-    timeLineTags.value = props.tags.map(tag => ({...tag, active:false}))
+onMounted(() => {
+  if (props.tags) {
+    timeLineTags.value = props.tags.map(tag => ({ ...tag, active: false }))
   }
 })
 
-const styleTag = (color:ColorsTags) => {
-    const styles = colorsTimeLine[color]
-    if(!styles){
-      return colorsTimeLine.noTag
-    }
-    return styles
+const styleTag = (color: ColorsTags) => {
+  const styles = colorsTimeLine[color]
+  if (!styles) {
+    return colorsTimeLine.noTag
+  }
+  return styles
 }
 
-const activeTags = computed(()=>{
-   return timeLineTags.value?.filter(tag => tag.active) || []
+const activeTags = computed(() => {
+  return timeLineTags.value?.filter(tag => tag.active) || []
 })
 
-const filteredEvents = computed(()=>{
-  if(activeTags.value.length === 0){
-        return props.events
-      }else{
-        const filtered = props.events.filter(event => {
-          if(event.tag){
-            ///event.tag.id === this.activesTags.some(t => t.id)
-            return activeTags.value.some(t => t.id === event.tag?.id)
-          }
-        })
-        return filtered
+const filteredEvents = computed(() => {
+  if (activeTags.value.length === 0) {
+    return props.events
+  } else {
+    const filtered = props.events.filter(event => {
+      if (event.tag) {
+        ///event.tag.id === this.activesTags.some(t => t.id)
+        return activeTags.value.some(t => t.id === event.tag?.id)
       }
+    })
+    return filtered
+  }
 })
 
-const toggleActive = (tag:TagTimeLine) => {
-    tag.active = !tag.active
+const toggleActive = (tag: TagTimeLine) => {
+  tag.active = !tag.active
 }
 
-const {title} = toRefs(props)
+
+const { title } = toRefs(props)
 
 </script>
 
 <template>
   <!-- component -->
- <div>
+  <div>
     <div class="w-10/12 md:w-7/12 lg:6/12 mx-auto relative">
       <h3 class="text-2xl mb-2">{{ title?.title?.text?.headline }}</h3>
       <p>{{ title?.title?.text?.text }}</p>
-    <div class="my-4">
-      <template v-for="tag in timeLineTags" :key="tag.id">
-        <span @click="toggleActive(tag)" :class="`mr-2 cursor-pointer text-sm px-2 py-1 rounded border ${styleTag(tag.color).border} ${tag.active?'text-white':styleTag(tag.color).text} ${tag.active?styleTag(tag.color).bg:''}`">
-         {{ tag.title }} <EpIcon :icon-path="tag.active?mdiCheckboxMarkedCircle:mdiCheckboxBlankCircleOutline" size="14"></EpIcon>
-        </span>
-      </template>
-    </div>
+      <div class="my-4 px-2">
+        <template v-for="tag in timeLineTags" :key="tag.id">
+          <span @click="toggleActive(tag)"
+            :class="`mr-2 mb-2 inline-block cursor-pointer text-sm px-2 py-1 rounded border ${styleTag(tag.color).border} ${tag.active ? 'text-white' : styleTag(tag.color).text} ${tag.active ? styleTag(tag.color).bg : ''}`">
+            {{ tag.title }} <EpIcon :icon-path="tag.active ? mdiCheckboxMarkedCircle : mdiCheckboxBlankCircleOutline"
+              size="14"></EpIcon>
+          </span>
+        </template>
+      </div>
       <div class="border-l-4 pl-1 transition-all">
-        <TransitionGroup name="list" tag="ul">
-          <template v-for="(item, i) in filteredEvents" :key="`${i}-card-${item.id}`"> 
-            <TimeLineItem :event="item"></TimeLineItem> 
+        <TransitionGroup name="list" tag="div">
+          <template v-for="(item, i) in filteredEvents" :key="`${i}-card-${item.id}`">
+            <TimeLineItem :event="item"></TimeLineItem>
           </template>
-      </TransitionGroup>
+        </TransitionGroup>
       </div>
     </div>
- </div>
-
+  </div>
 </template>
 
 <style>
@@ -93,6 +99,7 @@ const {title} = toRefs(props)
 .list-leave-active {
   transition: all 0.5s ease;
 }
+
 .list-enter-from,
 .list-leave-to {
   opacity: 0;

package/src/components/tools/TimelineItem.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, toRefs, onMounted, computed } from "vue";
+import { ref, toRefs, onMounted, computed, watch } from "vue";
 import { useImage } from '@vueuse/core'
 import { useRenderText } from "../../composables/useRenderText";
 ///types with Capital letters... object with styles same name in lowercase
@@ -10,18 +10,19 @@ interface Props {
   title?: string | null;
   date?: string;
   event: EventTimeLine;
+  collapse?:boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   title: 'En savoir plus',
   type: 'base',
+  collapse:false
 });
 
 
 const showDiv = ref(true);
 const collapsible = ref();
 
-
 onMounted(() => {
   var content = collapsible.value
   if (showDiv.value) {
@@ -88,7 +89,6 @@ const {  event } = toRefs(props)
 
 <template>
   <div
-    
     :class="`cursor-pointer ml-10 relative flex items-center p-2 ${colorEvent.border} border border-2 rounded-r-lg mb-8 flex-col md:flex-row space-y-4 md:space-y-0`"
     @click="toggleDivVisibility">
     <!-- Dot -->

package/dist/BgAudio-9c7c57a7.js

@@ -1,5 +0,0 @@
-import { L as m } from "./index-58100a64.js";
-import "vue";
-export {
-  m as default
-};

package/dist/DisplayBox-c282fff4.js

@@ -1,5 +0,0 @@
-import { M as m } from "./index-58100a64.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpAlert-a64aea08.js

@@ -1,5 +0,0 @@
-import { I as m } from "./index-58100a64.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpAudio-32aaf084.js

@@ -1,5 +0,0 @@
-import { z as m } from "./index-58100a64.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpBadge-8380fcc2.js

@@ -1,5 +0,0 @@
-import { c as m } from "./index-58100a64.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpBarChart-3f81608e.js

@@ -1,5 +0,0 @@
-import { o as a } from "./index-58100a64.js";
-import "vue";
-export {
-  a as default
-};

package/dist/EpBtn-0c842202.js

@@ -1,5 +0,0 @@
-import { d as m } from "./index-58100a64.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpCard-700fe5e3.js

@@ -1,5 +0,0 @@
-import { e as m } from "./index-58100a64.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpContentSlider-d8752e6e.js

@@ -1,5 +0,0 @@
-import { w as m } from "./index-58100a64.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpDivider-a32e0177.js

@@ -1,5 +0,0 @@
-import { g as m } from "./index-58100a64.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpEdu-9d26836d.js

@@ -1,5 +0,0 @@
-import { r as a } from "./index-58100a64.js";
-import "vue";
-export {
-  a as default
-};

package/dist/EpFlex-59716f0c.js

@@ -1,5 +0,0 @@
-import { h as m } from "./index-58100a64.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpHeader-f168320a.js

@@ -1,5 +0,0 @@
-import { J as m } from "./index-58100a64.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpIframe-27a236f3.js

@@ -1,5 +0,0 @@
-import { A as m } from "./index-58100a64.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpImg-00828689.js

@@ -1,5 +0,0 @@
-import { j as m } from "./index-58100a64.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpLineChart-67012b1e.js

@@ -1,5 +0,0 @@
-import { p as m } from "./index-58100a64.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpLink-fc45197a.js

@@ -1,5 +0,0 @@
-import { B as m } from "./index-58100a64.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpLinkVersion-13183ab8.js

@@ -1,5 +0,0 @@
-import { C as m } from "./index-58100a64.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpModal-5bff1fb8.js

@@ -1,5 +0,0 @@
-import { x as m } from "./index-58100a64.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpPieChart-5e1350b8.js

@@ -1,5 +0,0 @@
-import { q as m } from "./index-58100a64.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpQuestion-ca5ebab1.js

@@ -1,5 +0,0 @@
-import { y as m } from "./index-58100a64.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpQuote-51d82a92.js

@@ -1,5 +0,0 @@
-import { K as m } from "./index-58100a64.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpRadio-34d4b2f1.js

@@ -1,5 +0,0 @@
-import { v as m } from "./index-58100a64.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpReading-15024973.js

@@ -1,5 +0,0 @@
-import { b as m } from "./index-58100a64.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpResource-d4402841.js

@@ -1,5 +0,0 @@
-import { s as m } from "./index-58100a64.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpScope-e03422df.js

@@ -1,5 +0,0 @@
-import { t as a } from "./index-58100a64.js";
-import "vue";
-export {
-  a as default
-};

package/dist/EpSection-07e69719.js

@@ -1,5 +0,0 @@
-import { k as m } from "./index-58100a64.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpSoftware-bf127112.js

@@ -1,5 +0,0 @@
-import { D as m } from "./index-58100a64.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpSpinner-6675a594.js

@@ -1,5 +0,0 @@
-import { l as m } from "./index-58100a64.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpSvg-26494cb6.js

@@ -1,5 +0,0 @@
-import { E as m } from "./index-58100a64.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpTable-4a80c53e.js

@@ -1,5 +0,0 @@
-import { m as a } from "./index-58100a64.js";
-import "vue";
-export {
-  a as default
-};

package/dist/EpTerm-681f1cec.js

@@ -1,5 +0,0 @@
-import { _ as m } from "./index-58100a64.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpText-7636f01e.js

@@ -1,5 +0,0 @@
-import { n as m } from "./index-58100a64.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpTimeLine-3c329159.js

@@ -1,5 +0,0 @@
-import { F as m } from "./index-58100a64.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpVideo-0f779d99.js

@@ -1,5 +0,0 @@
-import { G as m } from "./index-58100a64.js";
-import "vue";
-export {
-  m as default
-};