ep-lib-ts 1.0.1 → 1.0.3

package/src/components/interactions/EpAccordeon.vue

@@ -3,20 +3,26 @@ import { ref, toRefs, onMounted, computed } from "vue";
 import EpIcon from "../basics/EpIcon.vue";
 import useColors from "../../composables/useColors";
 ///types with Capital letters... object with styles same name in lowercase
-import { TypeAccordeon, typeAccordeon } from "../../types/Accordeon";
+import { type TypeAccordeon, typeAccordeon } from "../../types/Accordeon";
 interface Props {
-  title?: string|null;
   type?: TypeAccordeon;
   icon?: string|null;
   open?: boolean;
   outlined?:boolean;
+  labels?:{
+    title?:string|null;
+  }
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  title: 'En savoir plus',
+const props = withDefaults(defineProps<Props>(), { 
   open: false,
   type:'base',
   outlined:false,
+  labels:()=>{
+    return {
+      title:'En savoir plus'
+    }
+  }
 });
 
 
@@ -35,7 +41,7 @@ const stylesHeader = computed(()=>{
 })
 
 const contentStyles = computed(()=>{
-  return `px-4 ${useColors('bg', props.type + 'light')}`
+  return `px-4 ${useColors('bg', props.type + 'light')} dark:${useColors('bg', props.type + 'dark')}`
 })
 
 onMounted(() => {
@@ -60,13 +66,13 @@ function toggleDivVisibility() {
 }
 
 
-const { title, icon } = toRefs(props)
+const {labels, icon } = toRefs(props)
 </script>
 
 <template>
   <div>
     <div :class="stylesHeader" @click="toggleDivVisibility">
-      <h3 class="text-lg flex items-center"><EpIcon v-if="icon" :icon-path="icon" size="28" extraClass="mr-2"></EpIcon>{{ title }}</h3>
+      <h3 class="text-lg flex items-center"><EpIcon v-if="icon" :icon-path="icon" size="28" extraClass="mr-2"></EpIcon>{{ labels.title }}</h3>
       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
         :class="`mx-4 my-3 h-6 w-6 transition-all duration-200 ${showDiv ? 'rotate-45' : ''}`">
         <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6" />

package/src/components/interactions/EpContentSlider.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, computed, defineAsyncComponent, toRefs, Suspense } from "vue";
-import { SlidesType } from "../../types/Slides"
+import { type SlidesType } from "../../types/Slides"
 import { useComponent } from "../../composables/useComponent";
 import { useRenderText } from "../../composables/useRenderText";
 import { mdiArrowLeft } from "@mdi/js";
@@ -10,19 +10,30 @@ import EpIcon from "../basics/EpIcon.vue";
 
 interface Props {
 	slides: SlidesType[];
+	labels?:{
+		loading?:string,
+		noData?:string
+	}
 }
 
-const props = withDefaults(defineProps<Props>(), {})
+const props = withDefaults(defineProps<Props>(), {
+	labels:()=>{
+		return {
+			loading:"...loading",
+			noData:"no data"
+		}
+	}
+})
 
 
 const currentIndex = ref<number>(0)
 
 const currentSlide = computed(() => {
 	if (!props.slides) {
-		return { title: 'no data', img: '', uid: 2, content: "" }
+		return { title: props.labels.noData, img: '', uid: 2, content: "", component:null }
 	}
 	if (props.slides.length === 0) {
-		return { title: 'no data', img: '', uid: 2, content: "" }
+		return { title: props.labels.noData, img: '', uid: 2, content: "", component:null }
 	}
 	return props.slides[currentIndex.value]
 })
@@ -65,7 +76,7 @@ const { slides } = toRefs(props)
 </script>
 
 <template>
-	<div class="bg-stone-100 p-5 w-full md:h-custom overflow-hidden">
+	<div class="bg-stone-100 p-5 w-full md:h-custom overflow-hidden dark:bg-stone-300">
 		<div class="flex justify-between border-b border-black w-auto">
 			<h5 class="text-lg border-b-4 border-black">
 				{{ currentSlide.title }}
@@ -98,7 +109,7 @@ const { slides } = toRefs(props)
 								<component :is="currentSlideMediaContent" v-bind="{ ...currentSlide.component.data }">
 							    </component>
 								<template #fallback>
-									...loading
+									{{ labels.loading }}
 								</template>
 							</Suspense>
 							

package/src/components/interactions/EpDarkmode.vue

@@ -1,18 +1,12 @@
-<template> 
-<button @click="toggleTheme">
-   <span v-if="userTheme === 'dark'">
-    ☀️
-    </span>
-    <span v-if="userTheme === 'light'">
-    🌙
-    </span> 
-  </button>
-</template>
-
 <script setup lang="ts">
     import { ref, onMounted } from 'vue';
 
-    export type UserTheme = 'light' | 'dark';
+    type UserTheme = 'light' | 'dark';
+
+    const emit = defineEmits<{
+        (e: "update:userMode", userMode:UserTheme): void;
+        }>();
+
 
     const setTheme = (theme: UserTheme) => {
         localStorage.setItem('user-theme', theme);
@@ -31,6 +25,7 @@
         } else {
             setTheme('light');
         }
+        emit('update:userMode', userTheme.value)
     };
 
     const getMediaPreference = (): UserTheme => {
@@ -42,7 +37,23 @@
         }
     };
 
+    
+
     const userTheme = ref<UserTheme>(getTheme() || getMediaPreference());
 
-    onMounted(() => setTheme(userTheme.value));
-</script>
+    onMounted(() => {
+        setTheme(userTheme.value)
+        emit("update:userMode", userTheme.value)
+    });
+</script>
+
+<template> 
+<button @click="toggleTheme">
+   <span v-if="userTheme === 'dark'">
+    ☀️
+    </span>
+    <span v-if="userTheme === 'light'">
+    🌙
+    </span> 
+  </button>
+</template>

package/src/components/interactions/EpHotsPot.vue

@@ -14,9 +14,18 @@ interface Props {
     imageURL:string;
     title?:string;
     infoButtons:InfoButton[];
+    labels?:{
+      fermer?:string; 
+    }
 }
 
-const props = withDefaults(defineProps<Props>(), {});
+const props = withDefaults(defineProps<Props>(), {
+  labels:()=>{
+      return {
+        fermer:"Fermer"
+      }
+    }
+});
 
 const  { title, imageURL } = toRefs(props)
 
@@ -67,7 +76,7 @@ const closeModal = () => {
             <h4>{{ titleDisplay }}</h4>
            <div v-html="displayContent" class="text-sm"></div>
           <button @click="closeModal" class="mt-4 bg-primary text-white px-2 py-1 text-sm">
-            Fermer
+            {{labels.fermer}}
           </button>
         </div>
       </div>

package/src/components/interactions/EpQuestion.vue

@@ -2,8 +2,8 @@
 import { watch, ref, toRefs, computed, defineAsyncComponent} from "vue";
 import EpEdu from "../educationals/EpEdu.vue";
 //types with capital letter, object styles in lowercase
-import { MediaVariants } from "../../types/Medias";
-import { Answer } from "../../types/Answer";
+import { type MediaVariants } from "../../types/Medias";
+import { type Answer } from "../../types/Answer";
 import { useRenderText } from "../../composables/useRenderText";
 import { useComponent } from "../../composables/useComponent"
 import { mdiHelpCircle } from "@mdi/js";
@@ -26,6 +26,11 @@ interface Props {
   before?: boolean;
   numeration?: boolean;
   src?: string | null;
+  labels?:{
+    veuillez?:string;  
+    valider?:string; 
+    reessayer?:string; 
+  }
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -34,6 +39,13 @@ const props = withDefaults(defineProps<Props>(), {
   shuffle: false,
   before: false,
   numeration: false,
+  labels:()=>{
+    return {
+      veuillez:"Veuillez choisir une réponse",
+      valider : "Valider",
+      reessayer: "Réessayer"
+      }
+    }
 });
 
 const renderText = computed(() => {
@@ -148,7 +160,7 @@ const { title, intentions, hideIcon, question, src } = toRefs(props);
             </li>
           </ol>
           <EpAlert type="error" outlined noIcon v-if="!valid">
-            Veuillez choisir une réponse
+            {{labels.veuillez}}
           </EpAlert>
         </div>
         
@@ -168,9 +180,9 @@ const { title, intentions, hideIcon, question, src } = toRefs(props);
           :disabled="answered"
           outlined
           extraClass="mr-2"
-          >Valider</EpBtn
+          >{{labels.valider}}</EpBtn
         >
-        <EpBtn :type="type" v-if="answered" @click="reset" outlined>Réessayer</EpBtn>
+        <EpBtn :type="type" v-if="answered" @click="reset" outlined>{{labels.reessayer}}</EpBtn>
       </div>
     </template>
     <!-- <template #actions>

package/src/components/interactions/EpSummativeTable.vue

@@ -32,7 +32,7 @@ const transformNumber = (value:string|number) => {
 </script>
 
 <template>
-    <div class="mt-4 bg-gray-50 p-4">
+    <div class="mt-4 bg-gray-50 p-4 dark:bg-gray-300">
         <h4 v-if="title" class="text-xl font-semibold mb-6">{{ title }}</h4>
         <template v-for="(question,i) in questions" :key="`item-question-${i}`">
             <p class=" text-gray-600 py-2 rounded">{{question.label}}</p>

package/src/components/interactions/EpTabs.vue

@@ -4,7 +4,7 @@
 </script>
 
 <template>
-   <div class="p-12 bg-warning-light w-[50%] mx-auto border-2 border-warning">
+   <div class="p-12 bg-warning-light w-[50%] mx-auto border-2 border-warning dark:bg-warning">
         <p class="text-center text-error font-bold uppercase">In progress</p>
    </div>
 </template>

package/src/components/interactions/EpTooltip.vue

@@ -2,7 +2,7 @@
 <script setup lang="ts">
 
     import { computed } from "vue";
-    import { TypeTooltip, typeTooltip } from   "../../types/Tooltip";  //"../../types/Tooltip";
+    import { type TypeTooltip, typeTooltip } from   "../../types/Tooltip";  //"../../types/Tooltip";
 
     type Place = "top_start"|"top"|"top_end"|"bottom_start"|"bottom"|"bottom_end"|"left_start"|"left"|"left_end"|"right_start" | "right"|"right_end";
     type Mode = "light"|"dark";

package/src/components/medias/EpAudio.vue

@@ -2,8 +2,8 @@
 //https://github.com/snfas/protheus/commit/50ec10efc3b5537228edf436ee7ba8f540113485#diff-f4418614aaa0b05457cb0a6ffc674273b35a77cd5481113318603f0524467150
 import { computed, toRefs } from 'vue'
 //types with capital letter, object styles in lowercase
-import { MediaVariants } from "../../types/Medias";
-import { MandateLevel } from '../../types/MandateLevel';
+import { type MediaVariants } from "../../types/Medias";
+import { type MandateLevel } from '../../types/MandateLevel';
 import { isHtml } from '../../composables/isHtml';
 import { useMarkdown } from '../../composables/useMarkdown'
 import { mdiHeadphones } from "@mdi/js";
@@ -17,19 +17,25 @@ interface Props {
    src: string;
    title?: string;
    intentions?: string;
-   credits?: string;
-   labelIntentions?: string;
-   type?: MediaVariants;
-   messageError?: string
+   credits?: string;  
+   type?: MediaVariants;  
    hideIcon?: boolean;
    mandateLevel?:string | MandateLevel | null;
+   labels?:{
+      intentions?: string;
+      messageError?:string;
+   }
 }
 
-const props = withDefaults(defineProps<Props>(), {
-   labelIntentions: "Intentions d'écoute",
+const props = withDefaults(defineProps<Props>(), { 
    type: 'base',
-   messageError: "Mauvais url",
-   hideIcon: false
+   hideIcon: false,
+   labels:()=>{
+      return {
+         intentions: "Intentions d'écoute",
+         messageError:"Mauvais url"
+      }
+   }
 })
 
 //regex url panopto udem
@@ -84,7 +90,7 @@ const { src, title, hideIcon, mandateLevel } = toRefs(props)
             <BgAudio :fill="bgColor"></BgAudio>
             <audio v-if="isAudioFormat" ref="video" controls :src="cleanSrc" controlsList="nodownload"></audio>
             <EpAlert type="error" outlined v-else>
-               <p>{{ messageError }}</p>
+               <p>{{ labels.messageError }}</p>
             </EpAlert>
          </div>
       </template>

package/src/components/medias/EpCarousel.vue

@@ -2,8 +2,8 @@
 import { toRefs, ref } from "vue";
 import { mdiChevronLeftCircleOutline } from "@mdi/js";
 import { mdiChevronRightCircleOutline } from "@mdi/js";
-import { MediaCarousel } from "../../types/MediaCarousel";
-import { SizeThumbnail } from "../../types/Image";
+import { type MediaCarousel } from "../../types/MediaCarousel";
+import { type SizeThumbnail } from "../../types/Image";
 import EpIcon from "../basics/EpIcon.vue";
 import EpBtn from "../basics/EpBtn.vue";
 import EpModal from "../interactions/EpModal.vue";

package/src/components/medias/EpIframe.vue

@@ -2,7 +2,7 @@
 import { toRefs, computed } from "vue";
 import EpEdu from "../educationals/EpEdu.vue";
 //types with capital letter, object styles in lowercase
-import { MediaVariants } from "../../types/Medias";
+import { type MediaVariants } from "../../types/Medias";
 import { isHtml } from '../../composables/isHtml';
 import {useMarkdown} from '../../composables/useMarkdown'
 import { mdiApplicationBrackets } from "@mdi/js";
@@ -13,7 +13,8 @@ interface Props {
   intentions?: string;
   hideIcon?:boolean;
   type?:MediaVariants;
-  mandateLevel?:string|null
+  mandateLevel?:string|null;
+  customHeight?:number;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -34,6 +35,9 @@ const renderText = computed(()=>{
 })
 
 const height = computed(() => {
+  if(props.customHeight){
+    return props.customHeight
+  }
   return props.big ? "1000" : "520";
 });
 

package/src/components/medias/EpKatex.vue

@@ -3,7 +3,7 @@ import { onMounted, ref, computed, toRefs } from "vue";
 import katex from "katex";
 import EpEdu from "../educationals/EpEdu.vue";
 import { mdiFunctionVariant } from "@mdi/js";
-import { MediaVariants } from "../../types/Medias";
+import { type MediaVariants } from "../../types/Medias";
 import { isHtml } from "../../composables/isHtml";
 import { useMarkdown } from "../../composables/useMarkdown";
 

package/src/components/medias/EpLink.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed, toRefs } from "vue";
 //types with capital letter, object styles in lowercase
-import { MediaVariants } from "../../types/Medias";
-import { MandateLevel } from "../../types/MandateLevel";
+import { type MediaVariants } from "../../types/Medias";
+import { type MandateLevel } from "../../types/MandateLevel";
 import EpBtn from "../basics/EpBtn.vue";
 import { mdiLinkVariant } from "@mdi/js";
 import EpEdu from "../educationals/EpEdu.vue";

package/src/components/medias/EpLinkVersion.vue

@@ -15,11 +15,19 @@ interface Link {
 interface Props{
    type:TypeLink;
    link:Link;
-   big?:boolean
+   big?:boolean;
+   labels?:{
+      noData?:string;  
+   }
 }
 
 const props = withDefaults(defineProps<Props>(),{
-   big:false
+   big:false,
+   labels:()=>{
+      return {
+         noData:"no data"
+      }      
+   }
 })
 
 const {type, link, big} = toRefs(props)
@@ -34,6 +42,6 @@ const {type, link, big} = toRefs(props)
       <EpIframe :title="link.title" :src="link.url" :big="big"></EpIframe>
    </div>
    <div v-else>
-      no data
+      {{labels.noData}}
    </div>
 </template>

package/src/components/medias/EpSoftware.vue

@@ -4,8 +4,8 @@ import EpIcon from "../basics/EpIcon.vue";
 import EpBtn from "../basics/EpBtn.vue";
 import EpChip from "../basics/EpChip.vue";
 import EpEdu from "../educationals/EpEdu.vue";
-import { MediaVariants } from "../../types/Medias";
-import { MandateLevel } from '../../types/MandateLevel';
+import { type MediaVariants } from "../../types/Medias";
+import { type MandateLevel } from '../../types/MandateLevel';
 import { useRenderText } from "../../composables/useRenderText";
 
 import { mdiLaptop } from "@mdi/js";
@@ -23,6 +23,9 @@ interface Props {
   type?:MediaVariants;
   hideIcon?:boolean;
   labelCard?:string;
+  labels?:{
+    acceder?:string; 
+  }
 }
 
 // type, taxonomyLevel, courseCode, courseTitle, title, subtitle, height, src, color, synchrone
@@ -34,6 +37,11 @@ const props = withDefaults(defineProps<Props>(), {
   cover:"",
   type:"base",
   hideIcon:false,
+  labels:()=>{
+    return {
+      acceder:"[Accéder au logiciel]"
+    }
+  }
 });
 
 const old_image = "https://live.staticflickr.com/4868/45940268562_c5f7fdd06b_q.jpg";
@@ -56,7 +64,7 @@ const { title, intentions, cover, hideCover, version, labelCard, hideIcon, manda
       </template>
     <template #content>
       <div
-        class="flex flex-col items-center border rounded-lg bg-neutral-100 md:flex-row mt-2"
+        class="flex flex-col items-center border rounded-lg bg-neutral-100 md:flex-row mt-2 dark:bg-neutral-200"
       >
         <template v-if="!hideCover">
           <img
@@ -77,7 +85,7 @@ const { title, intentions, cover, hideCover, version, labelCard, hideIcon, manda
             <div class="flex justify-between items-center rounded-t-md p-2">
               <h4>{{ title }} <EpChip size="small" type="base" v-if="version">{{version}}</EpChip></h4>
               <EpBtn v-if="url" rounded type="base" :prependIcon="mdiOpenInNew" :href="url"
-                >[Accéder au logiciel]</EpBtn
+                >{{labels.acceder}}</EpBtn
               >
             </div>
           </div>

package/src/components/medias/EpSvg.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { toRefs, computed } from 'vue';
-import { MediaVariants } from "../../types/Medias";
-import { MandateLevel } from '../../types/MandateLevel';
+import { type MediaVariants } from "../../types/Medias";
+import { type MandateLevel } from '../../types/MandateLevel';
 import { useRenderText } from "../../composables/useRenderText";
 import { mdiImage } from '@mdi/js';
 import EpEdu from '../educationals/EpEdu.vue';

package/src/components/medias/EpTerm.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 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";
@@ -19,8 +18,14 @@ interface Props {
   graminfo?: string;
   relations?: string;
   //idrelation?: string;
-  labelClose?: string;
   src?:string;
+  labels?:{
+    definition?: string;  
+    domaine?:string;      
+    variations?: string;  
+    relations?: string; 
+    close?:string;  
+  }
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -28,7 +33,15 @@ const props = withDefaults(defineProps<Props>(), {
   variations: "",
   relations: "",
   idrelation: "",
-  labelClose: "Fermer",
+  labels:()=>{
+    return {
+      definition: "Définition",
+      domaine:"Domaine",
+      variations: "Variations",
+      relations: "Relations",
+      close:"Fermer"
+    }
+  }
 });
 
 const show = ref(false);
@@ -94,16 +107,16 @@ const el = (contentref:any) => {
    contentref.innerHTML = renderHtml
 }*/
 
-const { term, graminfo, labelClose, src } = toRefs(props);
+const { term, graminfo,labels,src } = toRefs(props);
 </script>
 
 <template>
   <span
     @click="toggleModal"
-    class="cursor-pointer border-primary border text-primary px-2 py-1 rounded group overflow-hidden relative"
+    class="cursor-pointer border-primary dark:border-primary-light border dark:text-primary-light text-primary px-2 py-1 rounded group overflow-hidden relative"
   >
     <span
-      class="absolute top-0 left-0 flex w-full h-0 mb-0 transition-all duration-300 ease-out transform translate-y-0 bg-primary group-hover:h-full opacity-90"
+      class="absolute top-0 left-0 flex w-full h-0 mb-0 transition-all duration-300 ease-out transform translate-y-0 bg-primary dark:bg-primary-ligth group-hover:h-full opacity-90"
     ></span>
     <span class="relative group-hover:text-primary-light"
       >{{ word }}
@@ -128,9 +141,9 @@ const { term, graminfo, labelClose, src } = toRefs(props);
     </div>
     <EpDivider color="primary" margin="mb-2"></EpDivider>
     <div class="mb-4 flex items-center justify-between">
-      <h3 class="text-primary font-bold">Définition</h3>
+      <h3 class="text-primary font-bold">{{labels.definition}}</h3>
       <span class="text-xs" v-if="renderDomain"
-        >Domaine : <span class="font-bold">{{ renderDomain }}</span></span
+        >{{labels.domaine}} : <span class="font-bold">{{ renderDomain }}</span></span
       >
     </div>
     <!-- <div v-html="renderText"></div> -->
@@ -141,13 +154,13 @@ const { term, graminfo, labelClose, src } = toRefs(props);
 
     <EpDivider v-if="renderVariations || renderRelations"></EpDivider>
     <div class="text-sm mt-2" v-if="renderVariations">
-      <span class="mr-2 font-bold">Variations :</span>
+      <span class="mr-2 font-bold">{{labels.variations}} :</span>
       <span v-for="(variation, i) in renderVariations" :key="`variation-${i}`">
         {{ variation }}{{ renderVariations.length > i + 1 ? ", " : "." }}
       </span>
     </div>
     <div class="text-sm mt-2" v-if="renderRelations">
-      <span class="mr-2 font-bold">Relations :</span>
+      <span class="mr-2 font-bold">{{labels.relations}} :</span>
       <template v-for="(relation, i) in renderRelations"
         :key="`relation-${i}`">
         <EpBtn
@@ -161,7 +174,7 @@ const { term, graminfo, labelClose, src } = toRefs(props);
     </div>
     <div class="flex justify-end">
       <EpBtn type="error" outlined @click="show = false" rounded>{{
-        labelClose
+        labels.close
       }}</EpBtn>
     </div>
   </EpModal>

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 { type TagTimeLine, type HeadTimeLine, type EventTimeLine, type ColorsTags, colorsTimeLine } from '../../types/TimeLine'
 import TimeLineItem from '../tools/TimelineItem.vue'
 import EpIcon from '../basics/EpIcon.vue';
 import { mdiCheckboxBlankCircleOutline } from '@mdi/js';
@@ -72,7 +72,7 @@ const { title } = toRefs(props)
 <template>
   <!-- component -->
   <div>
-    <div class="w-10/12 mx-auto relative">
+    <div class="w-10/12 mx-auto relative dark:bg-gray-300">
       <h3 class="text-2xl mb-2">{{ title?.text.headline }}</h3>
       <p>{{ title?.text.text}}</p>
       <div class="my-4 px-2">

package/src/components/medias/EpVideo.vue

@@ -15,16 +15,22 @@ interface Props{
    title?:string;
    intentions?:string;
    credits?:string;
-   mandateLevel?:string | MandateLevel | null;
-   labelIntentions?:string;
+   mandateLevel?:string | MandateLevel | null;  
    type?:MediaVariants;
    hideIcon?:boolean;
+   labels?:{
+      intentions?:string;
+   }
 }
 
 const props = withDefaults(defineProps<Props>(),{ 
-   labelIntentions:"Intentions d'écoute",
    type:'base',
    hideIcon:false,
+   labels:()=>{
+      return {
+         intentions:"Intentions d'écoute",
+      }   
+   }
 })
 
 //only to make custum video player
@@ -56,13 +62,13 @@ const videoURL = computed(()=> {
 })
 
 const renderText = computed(()=>{
-     if(!props.intentions){
+     if(!props.labels.intentions){
       return null
      }
-     if(!isHtml(props.intentions)){
-        return useMarkdown(props.intentions)
+     if(!isHtml(props.labels.intentions)){
+        return useMarkdown(props.labels.intentions)
      }
-     return props.intentions
+     return props.labels.intentions
 })
 
 const getIdYoutube = (url:string):string|null => {