ep-lib-ts 1.0.17 → 1.0.19

package/dist/style.css

@@ -1 +1 @@
-.content[data-v-761f0542]{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-94f2fe4f],.v-leave-active[data-v-94f2fe4f]{transition:opacity .5s ease}.v-enter-from[data-v-94f2fe4f],.v-leave-to[data-v-94f2fe4f]{opacity:0}.katex[data-v-1881b2c4]{font-size:1.6em}.content[data-v-54b64397]{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)}.shape{height:var(--3e2ed539);width:var(--7e73c118)}.arrow-light-top:before{content:" ";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:rgba(0,0,0,.2) transparent transparent transparent}.arrow-dark-top:before{content:" ";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:black transparent transparent transparent}.arrow-light-bottom:before{content:"";position:absolute;display:inline-block;left:50%;bottom:100%;border-right:7px solid transparent;border-bottom:7px solid #eee;border-left:7px solid transparent;border-bottom-color:#0003}.arrow-dark-bottom:before{content:"";position:absolute;display:inline-block;left:50%;bottom:100%;border-right:7px solid transparent;border-bottom:7px solid black;border-left:7px solid transparent;border-bottom-color:black transparent transparent transparent}.arrow-light-left:before{position:absolute;display:inline-block;left:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-left:5px solid #eee;border-bottom:5px solid transparent;border-left-color:#0003}.arrow-dark-left:before{position:absolute;display:inline-block;left:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-left:5px solid black;border-bottom:5px solid transparent;border-left-color:black transparent transparent transparent}.arrow-light-right:before{position:absolute;display:inline-block;right:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-right:5px solid #eee;border-bottom:5px solid transparent;border-right-color:#0003}.arrow-dark-right:before{position:absolute;display:inline-block;right:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-right:5px solid black;border-bottom:5px solid transparent;border-right-color:black transparent transparent transparent}
+.content[data-v-761f0542]{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-a9b3f460],.v-leave-active[data-v-a9b3f460]{transition:opacity .5s ease}.v-enter-from[data-v-a9b3f460],.v-leave-to[data-v-a9b3f460]{opacity:0}.katex[data-v-a5d595cd]{font-size:1.6em}.content[data-v-54b64397]{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)}.shape{height:var(--3e2ed539);width:var(--7e73c118)}.arrow-light-top:before{content:" ";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:rgba(0,0,0,.2) transparent transparent transparent}.arrow-dark-top:before{content:" ";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:black transparent transparent transparent}.arrow-light-bottom:before{content:"";position:absolute;display:inline-block;left:50%;bottom:100%;border-right:7px solid transparent;border-bottom:7px solid #eee;border-left:7px solid transparent;border-bottom-color:#0003}.arrow-dark-bottom:before{content:"";position:absolute;display:inline-block;left:50%;bottom:100%;border-right:7px solid transparent;border-bottom:7px solid black;border-left:7px solid transparent;border-bottom-color:black transparent transparent transparent}.arrow-light-left:before{position:absolute;display:inline-block;left:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-left:5px solid #eee;border-bottom:5px solid transparent;border-left-color:#0003}.arrow-dark-left:before{position:absolute;display:inline-block;left:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-left:5px solid black;border-bottom:5px solid transparent;border-left-color:black transparent transparent transparent}.arrow-light-right:before{position:absolute;display:inline-block;right:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-right:5px solid #eee;border-bottom:5px solid transparent;border-right-color:#0003}.arrow-dark-right:before{position:absolute;display:inline-block;right:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-right:5px solid black;border-bottom:5px solid transparent;border-right-color:black transparent transparent transparent}

package/package.json

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

package/src/components/basics/EpBadge.vue

@@ -8,21 +8,12 @@ interface Props {
   outlined?: boolean;
   square?: boolean;
   iconPath?: string | null;
-  labels?:{
-    inProgress?: string;
-  }
 }
 
 const props = withDefaults(defineProps<Props>(), {
   color: "primary",
   square: false,
   iconPath: null,
-  labels:()=>{
-    return{
-      inProgress: "In Progress"
-    }   
-  }
-
 });
 
 const styleChip = computed(() => {
@@ -52,6 +43,6 @@ const { iconPath } = toRefs(props);
     </span>
   </span>-->
   <div class="p-12 bg-warning-light w-[50%] mx-auto border-2 border-warning dark:bg-warning-dark">
-        <p class="text-center text-error font-bold uppercase">{{labels.inProgress}}</p>
+        <p class="text-center text-error font-bold uppercase">In progress</p>
    </div>
 </template>

package/src/components/basics/EpImg.vue

@@ -151,7 +151,7 @@ const { src, alt, title, caption, thumbnail, bib, sizeThumbnail } =
     </div>
     <EpModal v-model="showModal">
       <img
-        class="object-cover object-center h-5/6 w-5/6 mx-auto"
+        class="object-cover object-center h-5/6 w-5/6 mx-auto dark:bg-white"
         :src="src"
         :alt="alt"
         @click="toggleModal"

package/src/components/basics/EpText.vue

@@ -9,18 +9,20 @@ interface Props {
   content: string;
   title?: string | null;
   compact?: boolean;
-  labels?:{
-    title:string;
-  }
+  labelDefinition?: string;  
+  labelDomain?:string;      
+  labelVariations?: string;  
+  labelRelations?: string; 
+  labelClose?:string; 
 }
 
 const props = withDefaults(defineProps<Props>(), {
   compact: false,
-  labels:()=>{
-    return {
-      title:"En savoir plus"
-    }
-  }
+  labelDefinition: "Définition",
+  labelDomain:"Domaine",
+  labelVariations: "Variations",
+  labelRelations: "Relations",
+  labelClose:"Fermer"
 });
 
 const renderTitle = computed(() => {
@@ -87,7 +89,24 @@ const renderText = computed(() => {
         const termsRelation = foundedRelations.map((x) => x.term);
         const variation = term.variation;
         const hasImge = term.img ? term.img : "";
-        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>`;
+        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}"
+          label-definition="${props.labelDefinition}"
+          label-domain="${props.labelDomain}"
+          label-variations="${props.labelVariations}"
+          label-relations="${props.labelRelations}"
+          label-close="${props.labelClose}"
+          > 
+          ${term.definition}
+          </EpTerm> 
+          </div>`;
         //replace output string
         newStr = newStr.replace(word, replaceWord);
        

package/src/components/charts/EpBarChart.vue

@@ -30,22 +30,16 @@ interface Props {
   intentions?: string;
   hideIcon?: boolean;
   type?: MediaVariants;
-  mandateLevel?: string | null;
   source?: string;
   width?: string;
-  labels?: {
-    dataNoDisponible?: string;
-  }
+  dataNoDisponible?: string;
+
 }
 
 const props = withDefaults(defineProps<Props>(), {
   center: true,
   width: "500",
-  labels: () => {
-    return {
-      dataNoDisponible: "Data no disponible"
-    }
-  }
+  dataNoDisponible: "Data no disponible"
 });
 
 const renderText = computed(() => {
@@ -75,12 +69,12 @@ const globalOptions = computed(() => {
   }
 })
 
-const { center, series, source, width } = toRefs(props)
+const { center, series, source, width, dataNoDisponible } = toRefs(props)
 
 </script>
 
 <template>
-  <EpEdu :title="title" :type="type" :hideIcon="hideIcon" :icon="mdiChartBar" :mandateLevel="mandateLevel">
+  <EpEdu :title="title" :type="type" :hideIcon="hideIcon" :icon="mdiChartBar">
 
     <template #intentions v-if="renderText">
       <div v-html="renderText"></div>
@@ -90,7 +84,7 @@ const { center, series, source, width } = toRefs(props)
         <apexchart :width="width" type="bar" :options="globalOptions" :series="series"></apexchart>
       </div>
       <div v-else>
-        <p>{{ labels.dataNoDisponible }}</p>
+        <p>{{ dataNoDisponible }}</p>
       </div>
     </template>
     <template #actions v-if="source">

package/src/components/charts/EpFunnelChart.vue

@@ -30,7 +30,6 @@ interface Props {
   intentions?: string;
   hideIcon?: boolean;
   type?: MediaVariants;
-  mandateLevel?: string | null;
   source?: string;
   width?: string;
   height?: number;
@@ -119,7 +118,7 @@ const { center, series, source, labels, width } = toRefs(props)
 
 <template>
 
-  <EpEdu :title="title" :type="type" :hideIcon="hideIcon" :icon="mdiTriangle" :mandateLevel="mandateLevel">
+  <EpEdu :title="title" :type="type" :hideIcon="hideIcon" :icon="mdiTriangle">
     <template #intentions v-if="renderText">
 
       <div v-html="renderText"></div>

package/src/components/charts/EpLineChart.vue

@@ -29,22 +29,16 @@ interface Props {
     intentions?: string;
     hideIcon?: boolean;
     type?: MediaVariants;
-    mandateLevel?: string | null;
     source?: string;
     width?: string;
-    labels?: {
-        dataNoDisponible?: string;
-    }
+    dataNoDisponible?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
     center: true,
     width: "500",
-    labels: () => {
-        return {
-            dataNoDisponible: "Data no disponible"
-        }
-    }
+    dataNoDisponible: "Data no disponible"
+
 });
 
 const renderText = computed(() => {
@@ -88,12 +82,12 @@ const globalOptions = computed(() => {
     }
 })
 
-const { center, series, source, width } = toRefs(props)
+const { center, series, source, width, dataNoDisponible } = toRefs(props)
 
 </script>
 
 <template>
-    <EpEdu :title="title" :type="type" :hideIcon="hideIcon" :icon="mdiChartLine" :mandateLevel="mandateLevel">
+    <EpEdu :title="title" :type="type" :hideIcon="hideIcon" :icon="mdiChartLine">
         <template #intentions v-if="renderText">
             <div v-html="renderText"></div>
         </template>
@@ -102,7 +96,7 @@ const { center, series, source, width } = toRefs(props)
                 <apexchart :width="width" type="line" :options="globalOptions" :series="series"></apexchart>
             </div>
             <div v-else>
-                <p>{{ labels.dataNoDisponible }}</p>
+                <p>{{ dataNoDisponible }}</p>
             </div>
         </template>
         <template #actions v-if="source">

package/src/components/charts/EpPieChart.vue

@@ -33,23 +33,18 @@ interface Props {
     intentions?: string;
     hideIcon?: boolean;
     type?: MediaVariants;
-    mandateLevel?: string | null;
     source?: string;
     width?:string;
-    labels?:{
-        dataNoDisponible?:string; 
-    }
+    dataNoDisponible?:string; 
+   
 }
 
 const props = withDefaults(defineProps<Props>(), {
     center: true,
     type:'base',
     width:"500",
-    labels:()=>{
-        return {
-            dataNoDisponible:"Data no disponible"
-            }    
-        }
+    dataNoDisponible:"Data no disponible"
+
 });
 
 
@@ -79,12 +74,12 @@ const globalOptions = computed(() => {
 
 
 
-const { center, series, source, width } = toRefs(props)
+const { center, series, source, width, dataNoDisponible } = toRefs(props)
 
 </script>
 
 <template>
-    <EpEdu :title="title" :type="type" :hideIcon="hideIcon" :icon="mdiChartPie" :mandateLevel="mandateLevel">
+    <EpEdu :title="title" :type="type" :hideIcon="hideIcon" :icon="mdiChartPie">
 
         <template #intentions v-if="renderText">
            
@@ -95,7 +90,7 @@ const { center, series, source, width } = toRefs(props)
                 <apexchart :width="width" type="pie" :options="globalOptions" :series="series"></apexchart>
             </div>
             <div v-else>
-                <p>{{labels.dataNoDisponible}}</p>
+                <p>{{dataNoDisponible}}</p>
             </div>
         </template>
         <template #actions v-if="source">

package/src/components/educationals/EpEdu.vue

@@ -13,7 +13,7 @@ interface Props {
   title?: string | null;
   subtitle?: string | null;
   icon?: string;
-  mandateLevel?: string | MandateLevel | null;
+  mandateLevel?: MandateLevel | null;
   synchrone?: boolean;
   type?: MediaVariants;
   labelIntentions?: string;
@@ -66,13 +66,6 @@ const containerStyle = computed(() => {
   return `flex flex-col justify-between`;
 });
 
-const renderMandateLevel = computed(() => {
-  if (typeof props.mandateLevel === "object") {
-    return props.mandateLevel?.title;
-  }
-  return props.mandateLevel;
-});
-
 // type, taxonomyLevel, courseCode, courseTitle, title, subtitle, height, src, color, synchrone
 
 const { title, hideIcon } = toRefs(props);
@@ -90,7 +83,7 @@ const { title, hideIcon } = toRefs(props);
         <EpIcon v-if="!hideIcon" :iconPath="renderIcon" size="24"></EpIcon>
         <span class="font-bold align-middle">{{ title }}</span>
       </h3>
-      <EpScope v-if="mandateLevel" :title="renderMandateLevel"></EpScope>
+      <EpScope v-if="mandateLevel" :mandateLevel="mandateLevel"></EpScope>
     </div>
     <div class="px-5 dark:base-dark dark:text-white">
       <div class="py-2" v-if="hasIntentions">

package/src/components/educationals/EpReading.vue

@@ -21,7 +21,7 @@ interface Props {
   container?: string; /// is publication complete
   editor?: string;
   pages?: string|string[];
-  mandateLevel?: string | MandateLevel | null;
+  mandateLevel?: MandateLevel | null;
   intentions?: string;
   compact?: boolean;
   more?: boolean;
@@ -29,17 +29,12 @@ interface Props {
   hideCover?: boolean;
   type?:MediaVariants;
   hideIcon?:boolean;
-  labels?:{
-    par?:string;     
-    dans?:string;     
-    lire?:string;    
-    fermer?:string;   
-    details?:string;  
-    lecture?:string;  
-    card?: string;
-    Btb?: string;
-    intentions?: string;
-  }
+  labelIn?:string;     
+  labelRead?:string;    
+  labelClose?:string;   
+  labelDetails?:string;    
+  labelCard?: string;
+  labelIntentions?: string;
 }
 
 // type, taxonomyLevel, courseCode, courseTitle, title, subtitle, height, src, color, synchrone
@@ -52,19 +47,12 @@ const props = withDefaults(defineProps<Props>(), {
   compact: false,
   type:"base",
   hideIcon:false,
-  labels:()=>{
-    return {
-      par:"par",
-      dans:"dans",
-      lire:"Lire",
-      fermer:"Fermer",
-      details:"détails",
-      lecture:"Lecture",
-      card: "Lecture",
-      Btb: "lire",
-      intentions: "Intentions de lecture",
-    }
-  }
+  labelIn:"dans",
+  labelRead:"Lire",
+  labelClose:"Fermer",
+  labelDetails:"détails",
+  labelCard: "Lecture",
+  labelIntentions: "Intentions de lecture",
 });
 
 const old_image = "https://live.staticflickr.com/4868/45940268562_c5f7fdd06b_q.jpg";
@@ -97,7 +85,12 @@ const {
   type,
   mandateLevel,
   url,
-  labels,
+  labelIn,     
+  labelRead,    
+  labelClose,   
+  labelDetails,   
+  labelCard,
+  labelIntentions
 } = toRefs(props);
 
 const errorImg = (event:Event)=>{
@@ -126,7 +119,7 @@ const errorImg = (event:Event)=>{
       </div>
     </template>
     <div class="flex flex-col w-full">
-      <EpEdu :title="labels.card" :labelIntentions="labels.intentions" :icon="mdiBookOpenVariant" flat :type="type" :hideIcon="hideIcon" :mandateLevel="mandateLevel">
+      <EpEdu :title="labelCard" :labelIntentions="labelIntentions" :icon="mdiBookOpenVariant" flat :type="type" :hideIcon="hideIcon" :mandateLevel="mandateLevel">
         <template #intentions v-if="intentions">
           <div v-html="useRenderText(intentions)"></div>
         </template>
@@ -138,14 +131,13 @@ const errorImg = (event:Event)=>{
             <div class="flex">
               <div class="flex-1 py-2" v-if="hasDetails">
                 <p class="font-medium">
-                  <span class="text-sm italic pr-1" v-if="author">{{labels.par}}</span>
                   <span class="font-bold mr-1" v-if="author">{{ author }}</span>
                   <span v-if="year">({{ year }})</span>
                   <span v-if="year && editor">, </span>
                   <span v-if="editor">{{ editor }}</span>
                 </p>
                 <p v-if="container">
-                  <span class="text-sm italic pr-1">{{labels.dans}}</span>
+                  <span class="text-sm italic pr-1">{{labelIn}}</span>
                   <span class="">{{ container }}</span>
                 </p>
               </div>
@@ -160,13 +152,13 @@ const errorImg = (event:Event)=>{
           </div>
         </template>
         <template #actions>
-          <EpBtn :color="type=='base'?'text-gray-700':'text-white dark:text-black'" :type="type" :href="url" v-if="url">{{labels.lire}}</EpBtn>
+          <EpBtn :color="type=='base'?'text-gray-700':'text-white dark:text-black'" :type="type" :href="url" v-if="url">{{labelRead}}</EpBtn>
         </template>
       </EpEdu>
     </div>
   </div>
   <!--compact mode-->
-  <EpEdu :title="labels.card" :icon="mdiBookOpenVariant" flat :type="type" :hideIcon="hideIcon" v-else>
+  <EpEdu :title="labelCard" :labelIntentions="labelIntentions" :icon="mdiBookOpenVariant" flat :type="type" :hideIcon="hideIcon" v-else>
     <template #intentions v-if="intentions">
       <div v-html="useRenderText(intentions)"></div>
     </template>
@@ -182,7 +174,7 @@ const errorImg = (event:Event)=>{
           <div class="p-5">
             <DisplayBox>
               <template #default="{ open }">
-                <EpBtn text @click.stop="open" type="primary"> {{labels.details}} </EpBtn>
+                <EpBtn text @click.stop="open" type="primary"> {{labelDetails}} </EpBtn>
               </template>
               <template #menu="{ close }">
                 <div class="w-[32rem]">
@@ -205,7 +197,7 @@ const errorImg = (event:Event)=>{
                     <div class="flex flex-col justify-between w-full">
                       <div class="text-left px-5 py-2 bg-gray-100 text-black dark:rounded-tr-lg">
                         <EpIcon :size="24" :icon-path="mdiBookOpenVariant"></EpIcon>
-                        <span class="pl-2 align-middle">{{labels.lecture}}</span>
+                        <span class="pl-2 align-middle">{{labelCard}}</span>
                       </div>
                       <div class="w-full px-5">
                         <h4
@@ -218,14 +210,13 @@ const errorImg = (event:Event)=>{
                         <div class="flex">
                           <div class="flex-1 py-2" v-if="hasDetails">
                             <p class="font-medium">
-                              <span class="text-sm italic pr-1" v-if="author">{{labels.par}}</span>
                               <span class="font-bold mr-2" v-if="author">{{ author }}</span>
                               <span v-if="year"> ({{ year }})</span>
                               <span v-if="year && editor">, </span>
                               <span v-if="editor">{{ editor }}</span>
                             </p>
                             <p v-if="container">
-                              <span class="text-sm italic pr-1">{{labels.dans}}</span>
+                              <span class="text-sm italic pr-1">{{labelIn}}</span>
                               <span>{{ container }}</span>
                             </p>
                           </div>
@@ -241,7 +232,7 @@ const errorImg = (event:Event)=>{
                         </div>
                       </div>
                       <div class="bg-gray-100 dark:bg-transparent dark:border-b dark:rounded-br text-right pr-5">
-                        <EpBtn text @click.stop="close" type="error"> {{labels.fermer}} </EpBtn>
+                        <EpBtn text @click.stop="close" type="error"> {{labelClose}} </EpBtn>
                       </div>
                     </div>
                   </div>
@@ -252,7 +243,7 @@ const errorImg = (event:Event)=>{
 
           <div class="border-l p-5">
             <EpBtn text :href="url" v-if="url" type="primary">
-              <EpIcon :size="20" :icon-path="mdiOpenInNew" ></EpIcon> {{labels.lire}}
+              <EpIcon :size="20" :icon-path="mdiOpenInNew" ></EpIcon> {{labelRead}}
             </EpBtn>
           </div>
         </div>

package/src/components/educationals/EpResource.vue

@@ -6,7 +6,7 @@ import { type MediaVariants } from "../../types/Medias";
 interface Props {
    pages?:string;
    resource:any;
-   mandateLevel?: string | MandateLevel | null;
+   mandateLevel?:MandateLevel | null;
    type?:MediaVariants
 }
 
@@ -21,8 +21,11 @@ const resourceInfo = computed(()=>{
    //console.log(props.resource)
    const typeRess = Object.keys(props.resource.content)[0]
    const ress = Object.assign({}, props.resource.content[typeRess])
+   console.log(typeRess)
+   console.log(props)
    ress.pages = props.pages
    ress.type = typeRess
+   ress.intentions = props.pages
    if(typeRess === "clip"){
       ress.src = ress.url
    }
@@ -31,7 +34,7 @@ const resourceInfo = computed(()=>{
       ress.label = ress.title
    }
    if(typeRess === "book" && props.pages){
-      ress.intentions = props.pages
+      //ress.intentions = props.pages
       ress.pages = null
    }
    if(ress.version_link){

package/src/components/educationals/EpScope.vue

@@ -2,36 +2,28 @@
 import { ref, toRefs, computed } from "vue";
 //types with capital letter, object styles in lowercase
 import EpChip from "../basics/EpChip.vue";
+import { type MandateLevel } from '../../types/MandateLevel';
 import { type ChipBgVariant } from "../../types/Chip";
 
 interface Props {
-  title?: string;
-  type?:string;
+  mandateLevel?: MandateLevel | null;
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  title: "Essentiel", //[Enrichissement]
-  type: "base",
-});
+const props = withDefaults(defineProps<Props>(), {});
 
-let renderMandate = ref<ChipBgVariant>('base')
+let renderMandate = ref<ChipBgVariant>('primary')
 
 const typeMandate = computed(()=>{
-  if(props.title.trim() === "Essentiel"){
-    return renderMandate.value = 'warning'
-  }
-  if(props.title.trim() === "Enrichissement"){
+    if(props.mandateLevel?.value.trim() === "0"){
+      return renderMandate.value = 'warning'
+    }
     return renderMandate.value = 'primary'
-  }
-  return renderMandate.value
 })
 
-//controls
-//const controls = useMediaControls(video, {src:props.src})
-
-const { title } = toRefs(props);
 </script>
 
 <template>
-    <EpChip size="small" :type="typeMandate">{{ title.trim() }}</EpChip>
+    <EpChip v-if="mandateLevel" size="small" :type="typeMandate">
+      {{ mandateLevel.title }}
+    </EpChip>
 </template>

package/src/components/interactions/EpContentSlider.vue

@@ -10,19 +10,14 @@ import EpIcon from "../basics/EpIcon.vue";
 
 interface Props {
 	slides: SlidesType[];
-	labels?:{
-		loading?:string,
-		noData?:string
-	}
+	loading?:string,
+	noData?:string
 }
 
 const props = withDefaults(defineProps<Props>(), {
-	labels:()=>{
-		return {
-			loading:"...loading",
-			noData:"no data"
-		}
-	}
+	loading:"...loading",
+	noData:"no data"
+
 })
 
 
@@ -30,10 +25,10 @@ const currentIndex = ref<number>(0)
 
 const currentSlide = computed(() => {
 	if (!props.slides) {
-		return { title: props.labels.noData, img: '', uid: 2, content: "", component:null }
+		return { title: props.noData, img: '', uid: 2, content: "", component:null }
 	}
 	if (props.slides.length === 0) {
-		return { title: props.labels.noData, img: '', uid: 2, content: "", component:null }
+		return { title: props.noData, img: '', uid: 2, content: "", component:null }
 	}
 	return props.slides[currentIndex.value]
 })
@@ -109,7 +104,7 @@ const { slides } = toRefs(props)
 								<component :is="currentSlideMediaContent" v-bind="{ ...currentSlide.component.data }">
 							    </component>
 								<template #fallback>
-									{{ labels.loading }}
+									{{ loading }}
 								</template>
 							</Suspense>