ep-lib-ts 0.1.25 → 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.25",
+  "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.8"
+    "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

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { computed, toRefs, h, } from "vue";
+import { computed, toRefs, h, defineAsyncComponent} from "vue";
 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,29 +79,29 @@ 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
 });
 
-// const render = () => {
-//   const r = {
-//     components: {
-//       epterm: defineAsyncComponent(()=>import('../medias/EpTerm.vue')),
-//     },
-//     template: `<div>${renderText.value}</div>`,
-//   };
+//console.log(renderText.value)
 
-//   return h(r);
-// };
+const myRenderComponent = () => {
+  const r = {
+    components: {
+       epterm: defineAsyncComponent(()=>import('../medias/EpTerm.vue')),
+    },
+    template: `${renderText.value}`,
+  };
 
+  return h(r);
+};
 
 
 const { compact } = toRefs(props);
@@ -99,9 +109,10 @@ const { compact } = toRefs(props);
 
 <template>
  <div>
-    <div v-if="!compact" v-html="renderText"></div>
+
+   <myRenderComponent v-if="!compact"></myRenderComponent>
     <EpAccordeon outlined :title="renderTitle" v-else>
-      <div v-html="renderText"></div>
+      <myRenderComponent></myRenderComponent>
     </EpAccordeon>
  </div>
 </template>

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/signages/EpHeader.vue

@@ -46,12 +46,12 @@ const styles = computed(() => {
   return ` 
   flex
   flex-col
-	items-start 
 	overflow-hidden 
 	w-full 
   absolute
 	${props.big ? "min-h-screen" : "h-96"}
-	bg-cover`;
+	bg-cover
+	bg-center`;
 });
 
 const bgImg = computed(() => {
@@ -77,13 +77,13 @@ const { title, headerImgColor, big } = toRefs(props);
   <section :class="`${big?'h-screen ':''}items-center overflow-hidden relative `" ref="el">
     <div :class="styles" :style="`background-image:url('${bgImg}'); filter:url(#${headerImgColor});`"></div>
     
-      <div :class="`relative ${big?'mb-36':''}`">
+      <div :class="`relative ${big?'mb-36':''} h-full items-end`">
         <div class="flex md:justify-end justify-center pt-5">
           <EpChip v-if="synchrone" :prependIcon="mdiCast">Synchrone</EpChip>
           <EpChip v-if="duration"  :prependIcon="mdiTimerOutline"> {{ duration }}</EpChip>
           <EpChip v-if="assessment" :prependIcon="mdiChairSchool">Formatif</EpChip>
         </div>
-        <div class="md:px-64 flex w-full py-24 grow flex items-end">
+        <div class="md:px-64 flex w-full py-24 grow flex  h-full items-center">
           <div class="container flex flex-col px-8 max-w-7xl md:flex-row lg:px-16">
             <div v-if="title || subtitle"
               class="p-4 md:items-center backdrop-blur-md backdrop-brightness-50 backdrop-opacity-75 rounded"
@@ -101,7 +101,7 @@ const { title, headerImgColor, big } = toRefs(props);
         </div>
       </div>
 
-      <div v-if="props.big" class="animate-bounce">
+      <div v-if="props.big" class="animate-bounce absolute bottom-10 left-1/2">
         <div class="mx-auto w-12 bg-white rounded-full p-2" @click="clickScroll">
           <EpIcon :iconPath="mdiChevronDown" size="32"></EpIcon>
         </div>

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-19fc3ef0.js

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

package/dist/DisplayBox-fa19ab72.js

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

package/dist/EpAlert-ab232357.js

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

package/dist/EpAudio-00157c16.js

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

package/dist/EpBadge-cb10612f.js

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

package/dist/EpBarChart-83419240.js

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

package/dist/EpBtn-af008ece.js

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

package/dist/EpCard-c3b9b7f3.js

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

package/dist/EpChip-fe638461.js

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

package/dist/EpContentSlider-3f980aaa.js

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

package/dist/EpEdu-bfa65400.js

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

package/dist/EpFlex-7055e504.js

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

package/dist/EpHeader-ccce56a6.js

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

package/dist/EpIcon-c07e65b8.js

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

package/dist/EpIframe-8b386b2d.js

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

package/dist/EpLineChart-171befe5.js

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

package/dist/EpLink-198d821f.js

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

package/dist/EpLinkVersion-f04da9ef.js

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

package/dist/EpModal-a0b66d0c.js

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

package/dist/EpPieChart-582e11c2.js

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

package/dist/EpQuestion-4bde8b02.js

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

package/dist/EpQuote-45484b6a.js

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

package/dist/EpRadio-ae91a584.js

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

package/dist/EpReading-63a6b4a7.js

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

package/dist/EpResource-4103b249.js

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

package/dist/EpScope-737d27a9.js

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

package/dist/EpSection-7d78ae7e.js

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

package/dist/EpSoftware-41e74d15.js

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