ep-lib-ts 1.0.1 → 1.0.3

package/dist/{index-M54_P8uC.js → index-DNwUz3uD.js}

@@ -1,4 +1,4 @@
-import { g as hl } from "./EpCodeblock-DVX2XFFj.js";
+import { g as hl } from "./EpCodeblock-DX7H-PE3.js";
 function cl(n) {
   return n instanceof Map ? n.clear = n.delete = n.set = function() {
     throw new Error("map is read-only");
@@ -13479,7 +13479,7 @@ function w_() {
           excludeEnd: !0,
           contains: [].concat(s)
         },
-        S || {}
+        {}
       );
       return g.contains.push(r), g.contains.push(e.C_NUMBER_MODE), g.contains.push(e.C_BLOCK_COMMENT_MODE), g.contains.push(a), g;
     }, c = {

package/dist/index.d.ts

@@ -1,44 +1,86 @@
-import { default as EpSkeleton } from './components/signages/EpSkeleton.vue';
-import { default as EpQuote } from './components/signages/EpQuote.vue';
-import { default as EpHeader } from './components/signages/EpHeader.vue';
-import { default as EpAlert } from './components/signages/EpAlert.vue';
-import { default as EpWordDef } from './components/medias/EpWordDef.vue';
-import { default as EpVideoPanopto } from './components/medias/EpVideoPanopto.vue';
-import { default as EpVideo } from './components/medias/EpVideo.vue';
-import { default as EpTimeLine } from './components/medias/EpTimeLine.vue';
-import { default as EpTerm } from './components/medias/EpTerm.vue';
-import { default as EpSvg } from './components/medias/EpSvg.vue';
-import { default as EpSoftware } from './components/medias/EpSoftware.vue';
-import { default as EpLinkVersion } from './components/medias/EpLinkVersion.vue';
-import { default as EpLink } from './components/medias/EpLink.vue';
-import { default as EpKatex } from './components/medias/EpKatex.vue';
-import { default as EpIframe } from './components/medias/EpIframe.vue';
-import { default as EpCarousel } from './components/medias/EpCarousel.vue';
-import { default as EpAudio } from './components/medias/EpAudio.vue';
-import { default as EpSummativeTable } from './components/interactions/EpSummativeTable.vue';
-import { default as EpTabs } from './components/interactions/EpTabs.vue';
-import { default as EpQuestion } from './components/interactions/EpQuestion.vue';
-import { default as EpModal } from './components/interactions/EpModal.vue';
-import { default as EpContentSlider } from './components/interactions/EpContentSlider.vue';
-import { default as EpAccordeon } from './components/interactions/EpAccordeon.vue';
-import { default as EpScope } from './components/educationals/EpScope.vue';
-import { default as EpResource } from './components/educationals/EpResource.vue';
-import { default as EpReading } from './components/educationals/EpReading.vue';
-import { default as EpEdu } from './components/educationals/EpEdu.vue';
-import { default as EpPieChart } from './components/charts/EpPieChart.vue';
-import { default as EpLineChart } from './components/charts/EpLineChart.vue';
-import { default as EpBarChart } from './components/charts/EpBarChart.vue';
-import { default as EpTable } from './components/basics/EpTable.vue';
-import { default as EpIcon } from './components/basics/EpIcon.vue';
-import { default as EpFlex } from './components/basics/EpFlex.vue';
-import { default as EpSpinner } from './components/basics/EpSpinner.vue';
-import { default as EpSection } from './components/basics/EpSection.vue';
-import { default as EpDivider } from './components/basics/EpDivider.vue';
-import { default as EpChip } from './components/basics/EpChip.vue';
-import { default as EpBtn } from './components/basics/EpBtn.vue';
-import { default as EpBadge } from './components/basics/EpBadge.vue';
-import { default as EpCard } from './components/basics/EpCard.vue';
-import { default as EpImg } from './components/basics/EpImg.vue';
 import { default as EpText } from './components/basics/EpText.vue';
+import { default as EpImg } from './components/basics/EpImg.vue';
+import { default as EpCard } from './components/basics/EpCard.vue';
+import { default as EpBadge } from './components/basics/EpBadge.vue';
+import { default as EpBtn } from './components/basics/EpBtn.vue';
+import { default as EpChip } from './components/basics/EpChip.vue';
+import { default as EpDivider } from './components/basics/EpDivider.vue';
+import { default as EpSection } from './components/basics/EpSection.vue';
+import { default as EpSpinner } from './components/basics/EpSpinner.vue';
+import { default as EpFlex } from './components/basics/EpFlex.vue';
+import { default as EpIcon } from './components/basics/EpIcon.vue';
+import { default as EpTable } from './components/basics/EpTable.vue';
+import { default as EpBarChart } from './components/charts/EpBarChart.vue';
+import { default as EpLineChart } from './components/charts/EpLineChart.vue';
+import { default as EpPieChart } from './components/charts/EpPieChart.vue';
+import { default as EpFunnelChart } from './components/charts/EpFunnelChart.vue';
+import { default as EpEdu } from './components/educationals/EpEdu.vue';
+import { default as EpReading } from './components/educationals/EpReading.vue';
+import { default as EpResource } from './components/educationals/EpResource.vue';
+import { default as EpScope } from './components/educationals/EpScope.vue';
+import { default as EpAccordeon } from './components/interactions/EpAccordeon.vue';
+import { default as EpContentSlider } from './components/interactions/EpContentSlider.vue';
+import { default as EpModal } from './components/interactions/EpModal.vue';
+import { default as EpQuestion } from './components/interactions/EpQuestion.vue';
+import { default as EpTabs } from './components/interactions/EpTabs.vue';
+import { default as EpSummativeTable } from './components/interactions/EpSummativeTable.vue';
+import { default as EpAudio } from './components/medias/EpAudio.vue';
+import { default as EpCarousel } from './components/medias/EpCarousel.vue';
+import { default as EpIframe } from './components/medias/EpIframe.vue';
+import { default as EpKatex } from './components/medias/EpKatex.vue';
+import { default as EpLink } from './components/medias/EpLink.vue';
+import { default as EpLinkVersion } from './components/medias/EpLinkVersion.vue';
+import { default as EpSoftware } from './components/medias/EpSoftware.vue';
+import { default as EpSvg } from './components/medias/EpSvg.vue';
+import { default as EpTerm } from './components/medias/EpTerm.vue';
+import { default as EpTimeLine } from './components/medias/EpTimeLine.vue';
+import { default as EpVideo } from './components/medias/EpVideo.vue';
+import { default as EpVideoPanopto } from './components/medias/EpVideoPanopto.vue';
+import { default as EpWordDef } from './components/medias/EpWordDef.vue';
+import { default as EpAlert } from './components/signages/EpAlert.vue';
+import { default as EpHeader } from './components/signages/EpHeader.vue';
+import { default as EpQuote } from './components/signages/EpQuote.vue';
+import { default as 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, EpWordDef, EpSummativeTable };
+export { EpBadge, //done
+EpBtn, //done
+EpCard, //done
+EpChip, //done
+EpDivider, //-------don't need
+EpFlex, //-------don't need
+EpIcon, //-------don't need
+EpImg, //-------don't need
+EpSection, //-------don't need
+EpSpinner, //-------don't need
+EpTable, //done
+EpBarChart, //done
+EpLineChart, //done
+EpPieChart, //done
+EpFunnelChart, EpText, // done
+EpEdu, // done
+EpReading, // not finish
+EpResource, //-------don't need?
+EpScope, //done
+EpAccordeon, //done
+EpContentSlider, //done
+EpModal, //done
+EpQuestion, //done -- need to confirm
+EpTabs, //done
+EpAudio, //done
+EpCarousel, //-------- don't need
+EpIframe, // done
+EpKatex, // done
+EpLink, // ---------don't need
+EpLinkVersion, // done
+EpSoftware, // done
+EpSvg, // done
+EpTerm, // done
+EpTimeLine, // done
+EpVideo, // done
+EpVideoPanopto, // done
+EpAlert, // done
+EpHeader, //-------- don't need
+EpQuote, // done
+EpSkeleton, // done
+EpWordDef, // done
+EpSummativeTable };

package/dist/{prism-B0q7vMaL.js → prism-DENTMpmV.js}

@@ -1,4 +1,4 @@
-import { g as V, c as W } from "./EpCodeblock-DVX2XFFj.js";
+import { g as V, c as W } from "./EpCodeblock-DX7H-PE3.js";
 function ee(S, P) {
   for (var i = 0; i < P.length; i++) {
     const g = P[i];

package/dist/style.css

@@ -1 +1 @@
-.content[data-v-7dc117b1]{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-8769146d],.v-leave-active[data-v-8769146d]{transition:opacity .5s ease}.v-enter-from[data-v-8769146d],.v-leave-to[data-v-8769146d]{opacity:0}.katex[data-v-31453b22]{font-size:1.6em}.content[data-v-89d118fb]{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(--5ad0279f);width:var(--6f1de84e)}.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-cbe63e9f]{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-f93a239b],.v-leave-active[data-v-f93a239b]{transition:opacity .5s ease}.v-enter-from[data-v-f93a239b],.v-leave-to[data-v-f93a239b]{opacity:0}.katex[data-v-f9e5d352]{font-size:1.6em}.content[data-v-fba69535]{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/dist/types/Btn.d.ts

@@ -2,34 +2,42 @@ export declare const bgVariants: {
     base: {
         default: string;
         outlined: string;
+        text: string;
     };
     primary: {
         default: string;
         outlined: string;
+        text: string;
     };
     secondary: {
         default: string;
         outlined: string;
+        text: string;
     };
     accent: {
         default: string;
         outlined: string;
+        text: string;
     };
     info: {
         default: string;
         outlined: string;
+        text: string;
     };
     warning: {
         default: string;
         outlined: string;
+        text: string;
     };
     success: {
         default: string;
         outlined: string;
+        text: string;
     };
     error: {
         default: string;
         outlined: string;
+        text: string;
     };
 };
 export declare const sizeVariants: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ep-lib-ts",
   "private": false,
-  "version": "1.0.1",
+  "version": "1.0.3",
   "files": [
     "dist",
     "src/components/"
@@ -51,7 +51,7 @@
     "typescript": "^5.4.5",
     "vite": "^5.2.10",
     "vite-plugin-dts": "^3.9.0",
-    "vue-tsc": "^2.0.14"
+    "vue-tsc": "^2.0.17"
   },
   "peerDependencies": {
     "vue": "^3.2.45"

package/src/components/basics/EpAvatar.vue

@@ -2,7 +2,7 @@
 <script setup lang="ts">
 
     import { toRefs, computed } from "vue";
-    import { TypeAvatar, typeAvatar } from   "../../types/Avatar";  //"../../types/Avatar";
+    import { type TypeAvatar, typeAvatar } from   "../../types/Avatar";  //"../../types/Avatar";
     
     type Color = "primary"|"secondary"|"accent"|"error"|"warning"|"success"|"info"|"question"|"tip";
     type Variant = "circle"|"square"|"rounded";

package/src/components/basics/EpBadge.vue

@@ -8,12 +8,21 @@ 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(() => {
@@ -42,7 +51,7 @@ const { iconPath } = toRefs(props);
       <EpIcon v-if="iconPath" :iconPath="iconPath" size="32" extra-class="p-1"></EpIcon>
     </span>
   </span>-->
-  <div class="p-12 bg-warning-light w-[50%] mx-auto border-2 border-warning">
-        <p class="text-center text-error font-bold uppercase">In progress</p>
+  <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>
    </div>
 </template>

package/src/components/basics/EpBtn.vue

@@ -3,7 +3,7 @@ import { toRefs, computed } from "vue";
 import EpIcon from './EpIcon.vue';
 import useColors from "../../composables/useColors";
 ///types with Capital letters... object with styles same name in lowercase
-import { ButtonBgVariant, ButtonSize, bgVariants, sizeVariants } from "../../types/Btn";
+import { type ButtonBgVariant, type ButtonSize, bgVariants, sizeVariants } from "../../types/Btn";
 
 //props of components
 interface Props {
@@ -16,7 +16,6 @@ interface Props {
   prependIcon?: string | null;
   outlined?:boolean;
   text?:boolean;
-  color?:string;
   extraClass?: string | null;
   href?:string;
 }
@@ -27,20 +26,10 @@ const props = withDefaults(defineProps<Props>(), {
   size:'medium',
   appendIcon: null,
   prependIcon: null,
-  text:false,
   extraClass:null,
-  color:'text-black'
 });
 
 
-//get styles tailwind
-const colorText = computed(()=>{
-  if(props.outlined){
-    return ''
-  }
-  return props.color
-})
-
 
 const isOutlined = computed(()=>{
   if(props.outlined){
@@ -52,8 +41,7 @@ const isOutlined = computed(()=>{
 ///add bg or text 
 const styleBtn = computed(()=>{
     if(props.text){
-    
-      return `uppercase ${useColors('text', props.type)} hover:${useColors('bg', props.type + 'light')}`
+      return `${bgVariants[props.type].text}`
     }
     return `${bgVariants[props.type]?.[isOutlined.value]}`
 })
@@ -61,9 +49,9 @@ const styleBtn = computed(()=>{
 const styles = computed(() => {
 	return `
   transition
+  font-medium
   ${styleBtn.value}
   ${sizeVariants[props.size]} 
-  ${colorText.value}
   ${props.disabled ? "opacity-50" : ""} 
   ${props.block ? "w-full block" : ""} 
   ${props.rounded ? "rounded-md":""}

package/src/components/basics/EpCard.vue

@@ -3,7 +3,7 @@ import { toRefs, computed } from "vue";
 import EpIcon from './EpIcon.vue';
 import useColors from '../../composables/useColors'
 //types with capital letter, object styles in lowercase
-import { Density, density_style } from "../../types/Card";
+import { type Density, density_style } from "../../types/Card";
 
 interface Props {
     title?: string | null;
@@ -41,9 +41,9 @@ const borderColor = computed(() => {
         return `border solid ${useColors('border', props.color)}`
     }
     if (props.outlined) {
-        return 'border solid border-grey-700'
+        return 'border solid border-primary dark:border-white'
     }
-    return ''
+    return 'dark:border dark:solid dar:border-white'
 })
 
 const bgColor = computed(() => {
@@ -66,29 +66,39 @@ const density_class = computed(()=> {
 })
 
 const stylesCard = computed(()=> {
-    return `${shadowCard.value} ${borderColor.value} ${bgColor.value} ${props.maxWidth} my-4 `
+    return `
+    ${shadowCard.value} 
+    ${borderColor.value} 
+    ${bgColor.value} 
+    ${props.maxWidth} 
+    rounded-md 
+    dark:bg-base-dark
+    datk:text-white
+    my-4 `
 })
 
 
-const { title, subtitle, icon, src, density } = toRefs(props)
+const { title, subtitle, icon, src } = toRefs(props)
 
 </script>
 <template>
-    <div :class="`${stylesCard} rounded-md`">
+    <div :class="`${stylesCard} `">
         <img v-if="src" :src="src" class="w-full rounded-t-md" alt="header card">
         <div :class="density_class">
-            <div v-if="title || subtitle" class="mb-2 flex items-center justify-between">
+            <div v-if="title || subtitle" class="mb-2 flex items-center justify-between dark:text-white">
                     <div>
-                        <h3 class="text-2xl font-bold">{{ title }}</h3>
-                        <h4 :class="`text-xs ${subTitleText}`">{{ subtitle }}</h4>
+                        <h3 class="text-2xl dark:text-white font-bold">{{ title }}</h3>
+                        <h4 :class="`text-xs dark:text-white ${subTitleText}`">{{ subtitle }}</h4>
                     </div>
                     <div v-if="icon">
                         <EpIcon :icon-path="icon"></EpIcon>
                     </div>
                 </div> 
                 <slot name="card-header"></slot>
-                <slot></slot>
-                <slot name="card-actions"></slot>
+                <div class="dark:text-white">
+                    <slot></slot>
+                </div>
+                <div class="dark:text-white"><slot name="card-actions"></slot></div>
         </div>
     </div>
 </template>

package/src/components/basics/EpChip.vue

@@ -2,7 +2,7 @@
 import { toRefs, computed } from 'vue';
 import EpIcon from './EpIcon.vue';
 //import useColors from '../../composables/useColors'
-import { ChipBgVariant, ChipSize, chipVariants, sizeChipVariants } from '../../types/Chip';
+import { type ChipBgVariant, type ChipSize, chipVariants, sizeChipVariants } from '../../types/Chip';
 
 interface Props {
   type?:ChipBgVariant;
@@ -47,7 +47,6 @@ const colorText = computed(()=>{
 
 const stylesChip = computed(()=>{
   return `
-     ${colorText.value}
      ${sizeChipVariants[props.size]}
      ${typeChip.value}
      ${chipVariants[props.type]?.[isOutlined.value]} 

package/src/components/basics/EpImg.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { toRefs, ref, computed } from 'vue'
-import { SizeThumbnail, sizeThumbnailStyle } from '../../types/Image'
+import { type SizeThumbnail, sizeThumbnailStyle } from '../../types/Image'
 import { useImage } from '@vueuse/core'
 import EpModal from '../interactions/EpModal.vue'
 import EpIcon from '../basics/EpIcon.vue'
@@ -21,7 +21,12 @@ interface Props {
    bib?: string;
    title?: string;
    noModal?:boolean;
-   cols?: string | number  //posible type à venir => basis-1/12... basis-11/12 to basis-full
+   cols?: string | number;  //posible type à venir => basis-1/12... basis-11/12 to basis-full
+   labels?:{
+    reference?: string;
+    fermer?:string;
+    referenceLibrary?:string;
+   }
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -29,7 +34,14 @@ const props = withDefaults(defineProps<Props>(), {
    cols: "6",
    thumbnail: false,
    noModal:false,
-   sizeThumbnail:"medium"
+   sizeThumbnail:"medium",
+   labels:()=>{
+      return {
+         reference: "Reference",
+         fermer:"Fermer",
+         referenceLibrary:"Reference Library"
+      }
+   }
 })
 
 const Cols = [
@@ -99,7 +111,7 @@ const { src, alt, title, caption, thumbnail, bib, sizeThumbnail } = toRefs(props
             <div class="px-4 py-2" v-if="title || caption || bib">
                <h2 class="text-2xl font-bold">{{ title }}</h2>
                <p class="text-gray-500 text-sm mt-4">{{ caption }}</p>
-               <div class="text-right"><EpBtn @click="toggleBib" size="small">Référence</EpBtn></div>
+               <div class="text-right"><EpBtn @click="toggleBib" size="small">{{labels.reference}}</EpBtn></div>
             </div>
          </div>
       </div>
@@ -122,10 +134,10 @@ const { src, alt, title, caption, thumbnail, bib, sizeThumbnail } = toRefs(props
          </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">
+      <EpModal v-model="showBib" title="labels.referenceLibrary">
   
             <div class="text-gray-700 mt-4" v-html="renderBib"></div>
-            <div class="flex justify-end"><EpBtn @click="toggleBib" size="small" type="error" outlined>Fermer</EpBtn></div>
+            <div class="flex justify-end"><EpBtn @click="toggleBib" size="small" type="error" outlined>{{labels.fermer}}</EpBtn></div>
       </EpModal>
  </div>
 </template>

package/src/components/basics/EpSection.vue

@@ -54,7 +54,7 @@ const { title, icon, color, src } = toRefs(props);
                   <p class="text-2xl font-medium tracking-tight text-black sm:text-4xl">
                     {{ title }}
                   </p>
-                  <p class="">
+                  <p>
                     {{ subtitle }}
                   </p>
                 </div>

package/src/components/basics/EpTable.vue

@@ -13,18 +13,18 @@ const props = withDefaults(defineProps<Props>(),{
 
 const {headers, arrayContent, title} = toRefs(props)
 
-const styleTh ="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider";
+const styleTh ="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-white";
 </script>
 <template>
   <EpCard flat :title="title">
-    <table class="min-w-full divide-y divide-gray-200 shadow">
-      <thead class="bg-gray-50" v-if="headers">
+    <table class="min-w-full divide-y shadow dark:bg-base-dark">
+      <thead class="bg-gray-50 dark:bg-base-dark" v-if="headers">
         <tr>
           <th v-for="(title, i) in headers" :key="`th-${i}`" scope="col" :class="styleTh">{{title}}</th>
         </tr>
       </thead>
-      <tbody class="bg-white divide-y divide-gray-200">
-        <tr v-for="(tr, i) in arrayContent" :key="`tr-${i}`" class="hover:bg-gray-50">
+      <tbody class="bg-white divide-y dark:bg-base-dark">
+        <tr v-for="(tr, i) in arrayContent" :key="`tr-${i}`" class="hover:bg-gray-50 dark:hover:bg-black">
           <td v-for="(value, j) in tr" :key="`td-${i}-${j}`" class="px-6 py-4">{{value}}</td>
         </tr>
       </tbody>

package/src/components/basics/EpText.vue

@@ -9,15 +9,23 @@ interface Props {
   content: string;
   title?: string | null;
   compact?: boolean;
+  labels?:{
+    enSavoirPlus?:string;
+  }
 }
 
 const props = withDefaults(defineProps<Props>(), {
   compact: false,
+  labels:()=>{
+    return {
+      enSavoirPlus:"En savoir plus"
+    }
+  }
 });
 
 const renderTitle = computed(() => {
   if (!props.title) {
-    return "En savoir plus";
+    return props.labels.enSavoirPlus;
   }
   return props.title;
 });
@@ -108,7 +116,7 @@ const { compact } = toRefs(props);
 </script>
 
 <template>
- <div class="px-2">
+ <div class="px-2 text-black dark:text-white ">
    <myRenderComponent v-if="!compact"></myRenderComponent>
     <EpAccordeon outlined :title="renderTitle" v-else>
       <myRenderComponent></myRenderComponent>

package/src/components/charts/EpBarChart.vue

@@ -3,7 +3,7 @@
 import { computed, toRefs } from "vue";
 import EpEdu from "../educationals/EpEdu.vue";
 import { mdiChartBar } from "@mdi/js";
-import { MediaVariants } from "../../types/Medias";
+import { type MediaVariants } from "../../types/Medias";
 import { isHtml } from "../../composables/isHtml";
 import { useMarkdown } from "../../composables/useMarkdown";
 
@@ -32,11 +32,19 @@ interface Props {
   mandateLevel?: string | null;
   source?:string;
   width?:string;
+  labels?:{
+    dataNoDisponible?:string;   
+  }
 }
 
 const props = withDefaults(defineProps<Props>(), {
   center: true,
-  width:"500"
+  width:"500",
+  labels:()=>{
+      return {
+        dataNoDisponible:"Data no disponible"
+      }    
+    }
 });
 
 const renderText = computed(() => {
@@ -72,7 +80,7 @@ const { center, series, source, width } = toRefs(props)
         <apexchart :width="width" type="bar" :options="globalOptions" :series="series"></apexchart>
       </div>
       <div v-else>
-        <p>Data no disponible</p>
+        <p>{{labels.dataNoDisponible}}</p>
       </div>
     </template>
     <template #actions v-if="source">