ep-lib-ts 0.1.38 → 0.1.40

package/dist/index.d.ts

@@ -34,8 +34,9 @@ import EpTerm from './components/medias/EpTerm.vue';
 import EpTimeLine from './components/medias/EpTimeLine.vue';
 import EpVideo from './components/medias/EpVideo.vue';
 import EpVideoPanopto from './components/medias/EpVideoPanopto.vue';
+import EpWordDef from './components/medias/EpWordDef.vue';
 import EpAlert from './components/signages/EpAlert.vue';
 import EpHeader from './components/signages/EpHeader.vue';
 import EpQuote from './components/signages/EpQuote.vue';
 import EpSkeleton from './components/signages/EpSkeleton.vue';
-export { EpBadge, EpBtn, EpCard, EpChip, EpDivider, EpFlex, EpIcon, EpImg, EpSection, EpSpinner, EpTable, EpBarChart, EpLineChart, EpPieChart, 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 };
+export { EpBadge, EpBtn, EpCard, EpChip, EpDivider, EpFlex, EpIcon, EpImg, EpSection, EpSpinner, EpTable, EpBarChart, EpLineChart, EpPieChart, 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 };

package/dist/types/GlossaryEntry.d.ts

@@ -0,0 +1,10 @@
+export interface GlossaryEntry {
+    id: string;
+    term: string;
+    graminfo: string;
+    relation: string[];
+    domain: string | null;
+    definition: string;
+    variation: string[];
+    img?: string;
+}

package/package.json

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

package/src/components/basics/EpImg.vue

@@ -77,8 +77,8 @@ const { src, alt, title, caption, thumbnail, bib, noModal } = toRefs(props)
 </script>
 
 <template>
- <div>
-      <div v-if="!thumbnail" class="flex">
+ <div :class="thumbnail?'inline-block':''">
+      <div v-if="!thumbnail" class="flex m-2">
          <div :class="`mx-auto bg-white rounded-md overflow-hidden shadow-md ${renderCols}`">
             <template v-if="isLoading">
                <span class="text-gray-200"><EpIcon :icon-path="mdiImage" size="250"></EpIcon></span>
@@ -107,12 +107,13 @@ const { src, alt, title, caption, thumbnail, bib, noModal } = toRefs(props)
          </div>
       </div>
       <EpModal v-model="showModal">
-         <img class="object-cover object-center h-5/6 w-5/6 mx-auto" :src="src" :alt="alt" @click="toggleModal">
+         <img class="object-cover object-center h-5/6 w-5/6 mx-auto" :src="src" :alt="alt" @click="toggleModal"/>
           <div class="px-4 py-2" v-if="thumbnail">
             <h2 class="text-2xl font-bold">{{ title }}</h2>
             <p class="text-gray-500 text-sm mt-4">{{ caption }}</p>
             <div class="text-gray-700 mt-4" v-html="renderBib"></div>
          </div> 
+         <!-- <div class="flex justify-end"><EpBtn @click="toggleModal" size="small" type="error" outlined>Fermer</EpBtn></div> -->
       </EpModal>
       <EpModal v-model="showBib" title="Référence bibliographique">
   

package/src/components/charts/EpBarChart.vue

@@ -31,10 +31,12 @@ interface Props {
   type?: MediaVariants;
   mandateLevel?: string | null;
   source?:string;
+  width?:string
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  center: false,
+  center: true,
+  width:"500"
 });
 
 const renderText = computed(() => {
@@ -56,7 +58,7 @@ const globalOptions = computed(() => {
   }
 })
 
-const { center, series, source } = toRefs(props)
+const { center, series, source, width } = toRefs(props)
 
 </script>
 
@@ -67,7 +69,7 @@ const { center, series, source } = toRefs(props)
     </template>
     <template #content>
       <div :class="`p-4 ${center ? 'flex justify-center' : ''}`" v-if="globalOptions && series">
-        <apexchart width="500" type="bar" :options="globalOptions" :series="series"></apexchart>
+        <apexchart :width="width" type="bar" :options="globalOptions" :series="series"></apexchart>
       </div>
       <div v-else>
         <p>Data no disponible</p>

package/src/components/charts/EpLineChart.vue

@@ -30,10 +30,12 @@ interface Props {
     type?: MediaVariants;
     mandateLevel?: string | null;
     source?: string;
+    width?:string
 }
 
 const props = withDefaults(defineProps<Props>(), {
-    center: false,
+    center: true,
+    width:"500"
 });
 
 const renderText = computed(() => {
@@ -65,7 +67,7 @@ const globalOptions = computed(() => {
     }
 })
 
-const { center, series, source } = toRefs(props)
+const { center, series, source, width} = toRefs(props)
 
 </script>
 
@@ -76,7 +78,7 @@ const { center, series, source } = toRefs(props)
         </template>
         <template #content>
             <div :class="`p-4 ${center ? 'flex justify-center' : ''}`" v-if="globalOptions && series">
-                <apexchart width="500" type="line" :options="globalOptions" :series="series"></apexchart>
+                <apexchart :width="width" type="line" :options="globalOptions" :series="series"></apexchart>
             </div>
             <div v-else>
                 <p>Data no disponible</p>

package/src/components/charts/EpPieChart.vue

@@ -32,11 +32,13 @@ interface Props {
     type?: MediaVariants;
     mandateLevel?: string | null;
     source?: string;
+    width?:string
 }
 
 const props = withDefaults(defineProps<Props>(), {
-    center: false,
-    type:'base'
+    center: true,
+    type:'base',
+    width:"450"
 });
 
 
@@ -52,7 +54,7 @@ const renderText = computed(() => {
 
 
 
-const { center, series, source, options } = toRefs(props)
+const { center, series, source, options, width } = toRefs(props)
 
 </script>
 
@@ -64,7 +66,7 @@ const { center, series, source, options } = toRefs(props)
         </template>
         <template #content>
             <div :class="`p-4 ${center ? 'flex justify-center' : ''}`" v-if="options && series">
-                <apexchart width="350" type="pie" :options="options" :series="series"></apexchart>
+                <apexchart :width="width" type="pie" :options="options" :series="series"></apexchart>
             </div>
             <div v-else>
                 <p>Data no disponible</p>

package/src/components/educationals/EpResource.vue

@@ -29,7 +29,6 @@ const resourceInfo = computed(()=>{
    if(typeRess === "website"){
       ress.href = ress.url
       ress.label = ress.title
-      ress.title = null
    }
    if(typeRess === "book" && props.pages){
       ress.intentions = props.pages

package/src/components/interactions/EpContentSlider.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref, computed, defineAsyncComponent, toRefs } from "vue";
-import {SlidesType} from "../../types/Slides"
+import { ref, computed, defineAsyncComponent, toRefs, Suspense } from "vue";
+import { SlidesType } from "../../types/Slides"
 import { useComponent } from "../../composables/useComponent";
 import { useRenderText } from "../../composables/useRenderText";
 import { mdiArrowLeft } from "@mdi/js";
@@ -9,7 +9,7 @@ import EpIcon from "../basics/EpIcon.vue";
 
 
 interface Props {
-   slides:SlidesType[];
+	slides: SlidesType[];
 }
 
 const props = withDefaults(defineProps<Props>(), {})
@@ -18,45 +18,49 @@ const props = withDefaults(defineProps<Props>(), {})
 const currentIndex = ref<number>(0)
 
 const currentSlide = computed(() => {
-	if(!props.slides){
-		return {title:'no data',  img:'', uid:2, content:""}
+	if (!props.slides) {
+		return { title: 'no data', img: '', uid: 2, content: "" }
 	}
-	if(props.slides.length === 0) {
-		return {title:'no data',  img:'', uid:2, content:""}
+	if (props.slides.length === 0) {
+		return { title: 'no data', img: '', uid: 2, content: "" }
 	}
 	return props.slides[currentIndex.value]
 })
 
+const hasTextContent = computed(() => {
+	return currentSlide.value.content.trim().length > 0
+})
+
 const currentSlideMediaContent = computed(() => {
 	if (currentSlide.value.img) {
 		return defineAsyncComponent(() => import('../basics/EpImg.vue'))
 	}
-	if(currentSlide.value.component){ 
+	if (currentSlide.value.component) {
 		const componentToLoad = useComponent(currentSlide.value.component?.type)
-		return defineAsyncComponent(()=>import(`../${componentToLoad.path}/${componentToLoad.name}.vue`))
+		return defineAsyncComponent(() => import(`../${componentToLoad.path}/${componentToLoad.name}.vue`))
 	}
 	return null
 })
 
-const max = computed(()=> (currentIndex.value+1) < props.slides.length)
-const min = computed(()=> (currentIndex.value+1) > 1)
+const max = computed(() => (currentIndex.value + 1) < props.slides.length)
+const min = computed(() => (currentIndex.value + 1) > 1)
 const next = () => {
-	if(max.value){
+	if (max.value) {
 		currentIndex.value += 1
 	}
 }
 
 const prev = () => {
-	if(min.value){
+	if (min.value) {
 		currentIndex.value -= 1
 	}
 }
 
-const goTo = (index:number) =>{ 
+const goTo = (index: number) => {
 	currentIndex.value = index
 }
 
-const {slides} = toRefs(props)
+const { slides } = toRefs(props)
 
 </script>
 
@@ -67,27 +71,42 @@ const {slides} = toRefs(props)
 				{{ currentSlide.title }}
 			</h5>
 			<div class="md:flex items-end pb-1" v-if="slides">
-			 	<template v-for="(slide,i) in slides.length" :key="`slide-index-${i}`">
-					<span :class="`cursor-pointer h-4 w-4 ml-1 inline-block ${i === currentIndex?'bg-primary':'bg-gray-400'}`" @click="goTo(i)"></span>
+				<template v-for="(slide, i) in slides.length" :key="`slide-index-${i}`">
+					<span
+						:class="`cursor-pointer h-4 w-4 ml-1 inline-block ${i === currentIndex ? 'bg-primary' : 'bg-gray-400'}`"
+						@click="goTo(i)"></span>
 				</template>
-				<span class="ml-2 text-xs">({{(currentIndex+1)}}/{{ slides.length }})</span>
-				<button :class="`px-2 ${min?'':'opacity-5'}`" @click="prev">
+				<span class="ml-2 text-xs">({{ (currentIndex + 1) }}/{{ slides.length }})</span>
+				<button :class="`px-2 ${min ? '' : 'opacity-5'}`" @click="prev">
 					<EpIcon :icon-path="mdiArrowLeft" size="24"></EpIcon>
 				</button>
-				<button :class="`mx-2 ${max?'':'opacity-5'}`" @click="next">
+				<button :class="`mx-2 ${max ? '' : 'opacity-5'}`" @click="next">
 					<EpIcon :icon-path="mdiArrowRight" size="24"></EpIcon>
 				</button>
 			</div>
 		</div>
 		<div class="">
 			<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" cols="11"></component>
-						<component v-else-if="currentSlide.component" :is="currentSlideMediaContent" v-bind="{...currentSlide.component.data}"></component>
+				<div class="md:flex p-4" :key="currentSlide.uid">
+					<div :class="`w-full ${hasTextContent ? 'mr-5' : ''}`" v-if="currentSlideMediaContent">
+						<div v-if="currentSlide.img" class="p-4">
+							<component :is="currentSlideMediaContent" :src="currentSlide.img" cols="11"></component>
+						</div>
+						<div v-else-if="currentSlide.component">
+							<Suspense>
+								
+								<component :is="currentSlideMediaContent" v-bind="{ ...currentSlide.component.data }">
+							    </component>
+								<template #fallback>
+									...loading
+								</template>
+							</Suspense>
+							
+						</div>
+
 					</div>
-					<div class="w-full">
-					   <div class="overflow-y-auto h-96 p-custom" v-html="useRenderText(currentSlide.content)"></div>
+					<div class="w-full pt-4" v-if="hasTextContent">
+						<div class="overflow-y-auto h-96 p-custom" v-html="useRenderText(currentSlide.content)"></div>
 					</div>
 				</div>
 			</Transition>
@@ -105,12 +124,13 @@ const {slides} = toRefs(props)
 	opacity: 0;
 	transform: translateX(30px);
 }
- .h-custom {
-    height: 30rem;
-  }
+
+.h-custom {
+	height: 30rem;
+}
 
 .p-custom p {
-	margin-bottom:1em;
+	margin-bottom: 1em;
 }
 </style>
 

package/src/components/interactions/EpQuestion.vue

@@ -152,12 +152,12 @@ const { title, intentions, hideIcon, question, src } = toRefs(props);
           </EpAlert>
         </div>
         
-         <div v-if="answered">
+         <div v-if="answered" class="mb-2">
             <EpAlert :type="response.type" outlined>
                <div v-html="useRenderText(response.feedback)"></div>
             </EpAlert>
             
-            <div v-if="response.component">
+            <div v-if="response.component" class="my-2">
               <component :is="getCompontent(response.component.type)" v-bind="{ ...response.component.data }"></component>
             </div>
          </div>

package/src/components/medias/EpVideo.vue

@@ -37,7 +37,7 @@ const isVideoFormat = computed(()=>{
    return false
 })
 
-const vimeoUrl = computed(()=> {
+const videoURL = computed(()=> {
    const url = props.src
    if(!isVideoFormat.value && url.includes("https://vimeo.com/")){
        return url.replace("https://vimeo.com/", "https://player.vimeo.com/video/")
@@ -45,6 +45,13 @@ const vimeoUrl = computed(()=> {
    if(!isVideoFormat.value && url.includes('https://www.youtube.com/watch?')){
       return url.replace("https://www.youtube.com/watch?v=","https://www.youtube.com/embed/")
    }
+   //extra to short url youtube 
+   if(!isVideoFormat.value && url.includes('https://youtu.be/')){
+      const id = getIdYoutube(url)
+      if(id){
+         return `https://www.youtube.com/embed/${id}`
+      }
+   }
    return url
 })
 
@@ -57,6 +64,12 @@ const renderText = computed(()=>{
      }
      return props.intentions
 })
+
+const getIdYoutube = (url:string):string|null => {
+   const match = url.match(/\/([^\/]+)$/);
+   return match ? match[1]:null
+}
+
 //controls
 //const controls = useMediaControls(video, {src:props.src})
 const {src, title, hideIcon, type} = toRefs(props)
@@ -71,8 +84,8 @@ const {src, title, hideIcon, type} = toRefs(props)
      <template #content>
       <div class="max-w-screen-sm mx-auto">
           <video v-if="isVideoFormat" ref="video" controls :src="src" width="640" controlsList="nodownload"></video>
-          <iframe v-else :src="vimeoUrl" width="100%" height="360" frameborder="0" allowfullscreen></iframe>
-      </div>
+          <iframe v-else :src="videoURL" width="100%" height="360" frameborder="0" allowfullscreen></iframe>
+         </div>
      </template>
      <!-- <template #actions>
        <EpBtn :color="type=='base'?'text-gray-700':'text-white'" :type="type">[Repair btn style... to change]</EpBtn>

package/src/components/medias/EpWordDef.vue

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { GlossaryEntry } from '../../types/GlossaryEntry';
+import { useRenderText } from '../../composables/useRenderText';
+import { useRouter } from "vue-router";
+
+interface Term {
+    term: {
+        id: string
+    }
+}
+
+interface Props {
+    word: Term;
+    glossary: GlossaryEntry[]
+}
+
+const props = withDefaults(defineProps<Props>(), {});
+
+const definition = computed(() => {
+    return props.glossary.find(item => item.id === props.word.term.id)
+})
+
+const sizeGramIngo = computed(() => {
+    if (definition.value) {
+        return definition.value.domain || definition.value.variation.length > 0 ? 'w-1/3' : 'w-full'
+    }
+    return ''
+})
+
+const sizeDomain = computed(() => {
+    if (definition.value) {
+        return definition.value.variation.length > 0 ? 'w-1/4' : 'w-3/4'
+    }
+    return ''
+})
+
+const sizeVariations = computed(() => {
+    if (definition.value) {
+        return definition.value.domain ? 'w-2/4' : 'w-3/4'
+    }
+    return ''
+})
+
+const findRelations = (relations: string[]): { id: number | string, term: string }[] => {
+  let _relations = props.glossary.filter((term) => {
+    return relations.some((x) => {
+      return term.id === x;
+    });
+  });
+  return _relations.map((x) => ({id:x.id, term:x.term}));
+};
+
+const router = useRouter()
+const goto = (term:string) =>{
+  if(router.hasRoute('glossary')){
+    router.push({ path: "/glossary", query:{word:term} });
+  }
+  //console.log(router.hasRoute('signages'))
+  //
+}
+
+</script>
+
+<template>
+    <div>
+        <div v-if="definition">
+            <div class="h-min border border-stone-300 rounded-lg divide-y">
+                <h2 class="text-xl font-semibold p-2">{{ definition.term }}</h2>
+                <div class="flex justify-between">
+                    <div :class="sizeGramIngo">
+                        <p class="text-sm font-medium bg-stone-100 p-2">
+                            Information grammaticale
+                        </p>
+                        <div class="px-2 py-1">{{ definition.graminfo }}</div>
+                    </div>
+                    <div :class="sizeDomain" v-if="definition.domain">
+                        <p class="text-sm font-medium bg-stone-100 p-2">Domaine</p>
+                        <div class="px-2 py-1">{{ definition.domain }}</div>
+                    </div>
+                    <div :class="sizeVariations" v-if="definition.variation.length > 0">
+                        <p class="text-sm font-medium bg-stone-100 p-2">Variation(s)</p>
+                        <div class="px-2 py-1">
+                            <span v-for="(variation, i) in definition.variation" :key="`v-${i}`">{{ variation }}{{
+                                definition.variation.length > i + 1 ? ", " :
+                                "." }}</span>
+                        </div>
+                    </div>
+                </div>
+                <template v-if="!definition.img">
+                    <div class="px-2 py-6" v-html="useRenderText(definition.definition)"></div>
+                </template>
+                <template v-else>
+                    <div class="flex">
+                        <div class="px-2 py-6" v-html="useRenderText(definition.definition)"></div>
+                        <img class="h-60" :src="definition.img" :alt="`Image du terme ${definition.term}`" />
+                    </div>
+                </template>
+
+                <div>
+                    <div v-if="definition.relation.length > 0">
+                        <p class="text-sm font-medium bg-stone-100 p-2">Relations</p>
+                        <div class="p-2">
+                            <template v-for="(relation, i) in findRelations(definition.relation)" :key="`relation-${i}`">
+                                <button class="p-1 border rounded mr-1" @click="goto(relation.term)">
+                                    {{ relation.term }}
+                                </button>
+                            </template>
+                        </div>
+                    </div>
+                </div> 
+            </div>
+        </div>
+        <div v-else>La definition n'est pas disponible</div>
+    </div>
+</template>

package/src/components/signages/EpQuote.vue

@@ -31,9 +31,9 @@ const styleTextAutor = computed(() => {
 
 const imageStyle = computed(() => {
   if (props.card) {
-    return `rounded-lg`;
+    return `md:rounded-lg`;
   }
-  return `rounded-l-md`;
+  return `md:rounded-l-md`;
 });
 
 const { author, img, card } = toRefs(props);
@@ -46,13 +46,14 @@ const { author, img, card } = toRefs(props);
       :outlined="!card ? true : false"
       :color="card ? 'primary':'bg-white'"
     >
-      <div class="flex flex-wrap rounded-md">
-        <img
-          v-if="img"
-          :class="`h-32 ${imageStyle}`"
-          :src="img"
-          alt="Image of quote"
-        />
+      <div :class="`md:flex md:flex-wrap rounded-md `">
+        <div class="w-1/5" v-if="img">
+          <img
+            :class="`${imageStyle} md:w-full md:h-full md:object-cover md:rounded-l-md`"
+            :src="img"
+            alt="Image of quote"
+          />
+        </div>
         <div :class="`p-6 flex-1 ${colorText}`">
           <slot></slot>
           <template v-if="author">

package/dist/EpBadge-ac0af6da.js

@@ -1,6 +0,0 @@
-import { c as o } from "./index-efcc4db9.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpBtn-5aa83fe6.js

@@ -1,6 +0,0 @@
-import { d as o } from "./index-efcc4db9.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpCard-328ad09f.js

@@ -1,6 +0,0 @@
-import { e as o } from "./index-efcc4db9.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpChip-c52d3c21.js

@@ -1,6 +0,0 @@
-import { f as o } from "./index-efcc4db9.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpContentSlider-ea3ffb8d.js

@@ -1,6 +0,0 @@
-import { w as o } from "./index-efcc4db9.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpDivider-ac19c148.js

@@ -1,6 +0,0 @@
-import { g as o } from "./index-efcc4db9.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpFlex-e257d816.js

@@ -1,6 +0,0 @@
-import { h as o } from "./index-efcc4db9.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpHeader-90ba4918.js

@@ -1,6 +0,0 @@
-import { J as o } from "./index-efcc4db9.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpIframe-bc0a84ac.js

@@ -1,6 +0,0 @@
-import { A as o } from "./index-efcc4db9.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpImg-8a06246f.js

@@ -1,6 +0,0 @@
-import { j as o } from "./index-efcc4db9.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpLineChart-bb71e812.js

@@ -1,6 +0,0 @@
-import { p as o } from "./index-efcc4db9.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpLink-50d722ff.js

@@ -1,6 +0,0 @@
-import { B as o } from "./index-efcc4db9.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpLinkVersion-2c7b205f.js

@@ -1,6 +0,0 @@
-import { C as o } from "./index-efcc4db9.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpModal-9ac410ef.js

@@ -1,6 +0,0 @@
-import { x as o } from "./index-efcc4db9.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpPieChart-b45d9769.js

@@ -1,6 +0,0 @@
-import { q as o } from "./index-efcc4db9.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};