ep-lib-ts 0.1.26 → 0.1.28

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/dist/types/Accordeon.d.ts

@@ -35,6 +35,10 @@ export declare const typeAccordeon: {
         default: string;
         outlined: string;
     };
+    Question: {
+        default: string;
+        outlined: string;
+    };
     tip: {
         default: string;
         outlined: string;

package/dist/types/Alert.d.ts

@@ -23,6 +23,10 @@ export declare const typeAlert: {
         default: string;
         outlined: string;
     };
+    Question: {
+        default: string;
+        outlined: string;
+    };
     tip: {
         default: string;
         outlined: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ep-lib-ts",
   "private": false,
-  "version": "0.1.26",
+  "version": "0.1.28",
   "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;
@@ -25,18 +24,26 @@ const renderTitle = computed(() => {
 
 const renderText = computed(() => {
   if (!props.content) {
-    return `<div>no data</div>`;
+    return `<div></div>`;
   }
   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) => {
@@ -65,40 +75,40 @@ const renderText = computed(() => {
           })
         );
         //get relations id and term
-        const idsRelation = foundedRelations.map((x) => x.id);
+        //const idsRelation = foundedRelations.map((x) => x.id);
         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}"> ${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>
+ <div class="px-2">
    <myRenderComponent v-if="!compact"></myRenderComponent>
     <EpAccordeon outlined :title="renderTitle" v-else>
       <myRenderComponent></myRenderComponent>

package/src/components/interactions/EpContentSlider.vue

@@ -2,6 +2,7 @@
 import { ref, computed, defineAsyncComponent, toRefs } from "vue";
 import {SlidesType} from "../../types/Slides"
 import { useComponent } from "../../composables/useComponent";
+import { useRenderText } from "../../composables/useRenderText";
 import { mdiArrowLeft } from "@mdi/js";
 import { mdiArrowRight } from "@mdi/js";
 import EpIcon from "../basics/EpIcon.vue";
@@ -82,11 +83,11 @@ const {slides} = toRefs(props)
 			<Transition name="list" mode="out-in">
 				<div class="md:flex p-8" :key="currentSlide.uid">
 					<div class="w-full mr-5 flex items-center" v-if="currentSlideMediaContent">
-						<component v-if="currentSlide.img" :is="currentSlideMediaContent" :src="currentSlide.img"></component>
+						<component v-if="currentSlide.img" :is="currentSlideMediaContent" :src="currentSlide.img" cols="11"></component>
 						<component v-else-if="currentSlide.component" :is="currentSlideMediaContent" v-bind="{...currentSlide.component.data}"></component>
 					</div>
 					<div class="w-full">
-					   <div class="overflow-y-auto h-96 p-custom" v-html="currentSlide.content"></div>
+					   <div class="overflow-y-auto h-96 p-custom" v-html="useRenderText(currentSlide.content)"></div>
 					</div>
 				</div>
 			</Transition>

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}`">
+             <div v-html="content" class="w-full"></div>
+          </div>
         </div>
-      </div>
     </template>
   </EpEdu>
 </template>

package/src/components/medias/EpTerm.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { ref, toRefs, computed, onMounted} from "vue";
+import { ref, toRefs, computed} from "vue";
 import { useRenderText } from "../../composables/useRenderText";
+import { useRouter } from "vue-router";
 import { mdiBookmarkMultipleOutline } from "@mdi/js";
 import EpImg from "../basics/EpImg.vue";
 import EpIcon from "../basics/EpIcon.vue";
@@ -17,7 +18,7 @@ interface Props {
   domain?: string;
   graminfo?: string;
   relations?: string;
-  idrelation?: string;
+  //idrelation?: string;
   labelClose?: string;
   src?:string;
 }
@@ -33,10 +34,6 @@ const props = withDefaults(defineProps<Props>(), {
 const show = ref(false);
 
 
-
-
-
-
 const subtitle = computed(() => {
   if (props.term !== props.word) {
     return `(${props.word})`;
@@ -62,14 +59,23 @@ const renderRelations = computed(() => {
   return renderRelations;
 });
 
-const relationsID = computed(() => {
-  let relationsID = null;
-  let valueprops = props.idrelation?.trim();
-  if (valueprops?.length > 0) {
-    relationsID = valueprops.split(",");
+
+const router = useRouter()
+const goto = (term:string) =>{
+  if(router.hasRoute('glossary')){
+    router.push({ path: "/glossary", query:{word:term} });
   }
-  return relationsID;
-});
+  //console.log(router.hasRoute('signages'))
+  //
+}
+// const relationsID = computed(() => {
+//   let relationsID = null;
+//   let valueprops = props.idrelation?.trim();
+//   if (valueprops?.length > 0) {
+//     relationsID = valueprops.split(",");
+//   }
+//   return relationsID;
+// });
 
 const renderDomain = computed(() => {
   if (props.domain === "null") {
@@ -81,12 +87,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 +134,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>
@@ -142,14 +148,16 @@ const { term, graminfo, labelClose, src } = toRefs(props);
     </div>
     <div class="text-sm mt-2" v-if="renderRelations">
       <span class="mr-2 font-bold">Relations :</span>
-      <EpBtn
-        v-for="(relation, i) in renderRelations"
-        :key="`relation-${i}`"
-        size="small"
-        rounded
-        extra-class="mr-2"
-        >{{ relation }}</EpBtn
-      >
+      <template v-for="(relation, i) in renderRelations"
+        :key="`relation-${i}`">
+        <EpBtn
+          size="small"
+          rounded
+          extra-class="mr-2"
+          @click="goto(relation)"
+        >{{ relation }}</EpBtn>
+      </template>
+  
     </div>
     <div class="flex justify-end">
       <EpBtn type="error" outlined @click="show = false" rounded>{{

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 class="w-10/12 md:w-7/12 lg:6/12 mx-auto relative">
+  <div>
+    <div class="w-10/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/EpSkeleton.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+
+//props
+//square
+//rounded
+//an animate
+
+//https://mui.com/material-ui/react-skeleton/
+//https://ui.nuxt.com/layout/skeleton
+
+
+</script>
+<template>
+    <div>
+        skeleton
+    </div>
+</template>

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
-};