ep-lib-ts 1.0.0 → 1.0.3

package/src/components/medias/EpVideoPanopto.vue

@@ -44,7 +44,7 @@ const renderText = computed(()=>{
 
 const sizeVideo = computed(()=> {
    if(props.big){
-      return "700"
+      return "500"
    }
    return "360"
 })
@@ -60,9 +60,8 @@ const {src, title, hideIcon, type} = toRefs(props)
        <div v-html="renderText" ></div>
      </template>
      <template #content>
-      <div class="max-w-screen-sm mx-auto">
+      <div :class="!big?'max-w-screen-sm mx-auto':''">
          <iframe :src="src" width="100%" :height="sizeVideo" frameborder="0" allowfullscreen></iframe>
-     
       </div>
      </template>
      <!-- <template #actions>

package/src/components/medias/EpWordDef.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import { GlossaryEntry } from '../../types/GlossaryEntry';
+import { type GlossaryEntry } from '../../types/GlossaryEntry';
 import { useRenderText } from '../../composables/useRenderText';
 import { useRouter } from "vue-router";
 
@@ -10,10 +10,32 @@ interface Term {
 
 interface Props {
     term: Term;
-    glossary: GlossaryEntry[]
-}
+    glossary: GlossaryEntry[];
+    labels?:{
+        information?:string;   
+        domain?:string;                
+        relations?: string;              
+        definition?:string;              
+        variations?:string;              
+        imageDuTerme?:string;           
+    }
+}    
+
+
+const props = withDefaults(defineProps<Props>(), {
+    labels:()=>{
+        return {
+            information:"Information grammaticale",    
+            domain:"Domaine",
+            relations:"Relations" ,
+            definition:"La definition n'est pas disponible",
+            variations:"Variation(s)",
+            imageDuTerme:"Image du terme "
+        }
+    }
+});
+
 
-const props = withDefaults(defineProps<Props>(), {});
 
 const definition = computed(() => {
     return props.glossary.find(item => item.id === props.term.id)
@@ -61,23 +83,23 @@ const goto = (term:string) =>{
 </script>
 
 <template>
-    <div>
+    <div class="dark:bg-gray-300">
         <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
+                            {{labels.information}}
                         </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>
+                        <p class="text-sm font-medium bg-stone-100 p-2">{{labels.domain}}</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>
+                        <p class="text-sm font-medium bg-stone-100 p-2">{{labels.variations}}</p>
                         <div class="px-2 py-1">
                             <span v-for="(variation, i) in definition.variation" :key="`v-${i}`">{{ variation }}{{
                                 definition.variation.length > i + 1 ? ", " :
@@ -91,13 +113,13 @@ const goto = (term:string) =>{
                 <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}`" />
+                        <img class="h-60" :src="definition.img" :alt="`${labels.imageDuTerme} ${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>
+                        <p class="text-sm font-medium bg-stone-100 p-2"> {{labels.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)">
@@ -109,6 +131,6 @@ const goto = (term:string) =>{
                 </div> 
             </div>
         </div>
-        <div v-else>La definition n'est pas disponible</div>
+        <div v-else> {{labels.definition}}</div>
     </div>
 </template>

package/src/components/signages/EpAlert.vue

@@ -4,7 +4,7 @@ import EpDivider from "../basics/EpDivider.vue";
 import EpIcon from "../basics/EpIcon.vue";
 import EpAccordeon from "../interactions/EpAccordeon.vue";
 ///types with Capital letters... object with styles same name in lowercase
-import { TypeAlert, typeAlert } from "../../types/Alert";
+import { type TypeAlert, typeAlert } from "../../types/Alert";
 import {useIcons} from '../../composables/useIcons'
 
 interface OldType {

package/src/components/signages/EpBadge.vue

@@ -2,7 +2,7 @@
 <script setup lang="ts">
 
     import { computed } from "vue";
-    import { TypeBadge, typeBadge } from   "../../types/Badge";  //"../../types/Badge";
+    import { type TypeBadge, typeBadge } from   "../../types/Badge";  //"../../types/Badge";
 
     type Mode = "default"|"dot";
     type Color = "primary"|"secondary"|"accent"|"error"|"warning"|"success"|"info"|"question"|"tip";

package/src/components/signages/EpHeader.vue

@@ -21,7 +21,11 @@ interface Props {
   synchrone?: boolean;
   duration?: string | null;
   assessment?: string | null;
-  headerImgColor?:string | null
+  headerImgColor?:string | null;
+  labels?:{
+    synchrone?: string;   
+    formatif?: string;   
+  }
 }
 
 // type, taxonomyLevel, courseCode, courseTitle, title, subtitle, height, src, color, synchrone
@@ -35,6 +39,12 @@ const props = withDefaults(defineProps<Props>(), {
   synchrone: false,
   duration: null,
   assessment: null,
+  labels:()=>{
+    return {
+        synchrone:"Synchrone",
+        formatif:"Formatif"
+      }
+    }
 });
 
 
@@ -79,9 +89,9 @@ const { title, headerImgColor, big } = toRefs(props);
     
       <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="synchrone" :prependIcon="mdiCast">{{labels.synchrone}}</EpChip>
           <EpChip v-if="duration"  :prependIcon="mdiTimerOutline"> {{ duration }}</EpChip>
-          <EpChip v-if="assessment" :prependIcon="mdiChairSchool">Formatif</EpChip>
+          <EpChip v-if="assessment" :prependIcon="mdiChairSchool">{{labels.formatif}}</EpChip>
         </div>
         <div class="flex w-full py-24 grow flex h-full items-center">
           <div class="mx-auto w-8/12">

package/src/components/signages/EpSkeleton.vue

@@ -27,10 +27,10 @@ interface Props {
     <div>       
         <div class="flex p-2" :class = "animation" >
           <div  v-if="props.type === 'circle'">
-            <span class="shape block bg-gray-200 rounded-full dark:bg-gray-700"></span>           
+            <span class="shape block bg-gray-200 rounded-full dark:bg-gray-300"></span>           
           </div>
           <div v-else-if="props.type === 'rectangle'">
-            <span class="shape block bg-gray-200 dark:bg-gray-700 rounded-lg"></span>    
+            <span class="shape block bg-gray-200 dark:bg-gray-300 rounded-lg"></span>    
           </div>
      </div>
     </div>

package/src/components/tools/TimelineItem.vue

@@ -3,7 +3,7 @@ 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
-import { EventTimeLine, TimeLineDate, colorsTimeLine } from "../../types/TimeLine";
+import { type EventTimeLine, type TimeLineDate, colorsTimeLine } from "../../types/TimeLine";
 import EpImg from "../basics/EpImg.vue";
 
 interface Props {