ep-lib-ts 1.0.5 → 1.0.7

package/dist/index.d.ts

@@ -42,45 +42,4 @@ 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, //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 };
+export { EpBadge, EpBtn, EpCard, EpChip, EpDivider, EpFlex, EpIcon, EpImg, EpSection, EpSpinner, EpTable, EpBarChart, EpLineChart, EpPieChart, EpFunnelChart, 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 };

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

@@ -1,4 +1,4 @@
-import { g as V, c as W } from "./EpCodeblock-DX7H-PE3.js";
+import { g as V, c as W } from "./EpCodeblock-C4BqtKtL.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-2e3db938]{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}
+.content[data-v-fd7a0787]{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-b3568685],.v-leave-active[data-v-b3568685]{transition:opacity .5s ease}.v-enter-from[data-v-b3568685],.v-leave-to[data-v-b3568685]{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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ep-lib-ts",
   "private": false,
-  "version": "1.0.5",
+  "version": "1.0.7",
   "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.19"
+    "vue-tsc": "^2.0.21"
   },
   "peerDependencies": {
     "vue": "^3.2.45"

package/src/components/basics/EpCard.vue

@@ -72,7 +72,7 @@ const stylesCard = computed(()=> {
     ${bgColor.value} 
     ${props.maxWidth} 
     rounded-md 
-    dark:bg-base-dark
+    dark:bg-dark
     datk:text-white
     my-4 `
 })

package/src/components/basics/EpImg.vue

@@ -37,9 +37,9 @@ const props = withDefaults(defineProps<Props>(), {
    sizeThumbnail:"medium",
    labels:()=>{
       return {
-         reference: "Reference",
+         reference: "Référence",
          fermer:"Fermer",
-         referenceLibrary:"Reference Library"
+         referenceLibrary:"Référence bibliographique"
       }
    }
 })
@@ -98,7 +98,7 @@ const { src, alt, title, caption, thumbnail, bib, sizeThumbnail } = toRefs(props
 <template>
  <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}`">
+         <div :class="`mx-auto bg-white dark:bg-dark rounded-md overflow-hidden shadow-md ${renderCols}`">
             <template v-if="isLoading">
                <span class="text-gray-200"><EpIcon :icon-path="mdiImage" size="250"></EpIcon></span>
             </template>
@@ -108,9 +108,9 @@ const { src, alt, title, caption, thumbnail, bib, sizeThumbnail } = toRefs(props
             <template v-else>
                <img class="object-cover object-center w-full" :src="src" :alt="alt" @click="toggleModal">
             </template>
-            <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="px-4 py-2 dark:border-l dark:border-b dark:border-r dark:border-white dark:rounded-b-md " v-if="title || caption || bib">
+               <h2 class="text-2xl dark:text-white font-bold">{{ title }}</h2>
+               <p class="text-gray-500 dark:text-white text-sm mt-4">{{ caption }}</p>
                <div class="text-right"><EpBtn @click="toggleBib" size="small">{{labels.reference}}</EpBtn></div>
             </div>
          </div>
@@ -128,15 +128,15 @@ const { src, alt, title, caption, thumbnail, bib, sizeThumbnail } = toRefs(props
       <EpModal v-model="showModal">
          <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>
+            <h2 class="text-2xl dark:text-white font-bold">{{ title }}</h2>
+            <p class="text-gray-500 dark:text-white text-sm mt-4">{{ caption }}</p>
+            <div class="text-gray-700 dark:text-white 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="labels.referenceLibrary">
+      <EpModal v-model="showBib" :title="labels.referenceLibrary">
   
-            <div class="text-gray-700 mt-4" v-html="renderBib"></div>
+            <div class="text-gray-700 dark:text-white mt-4" v-html="renderBib"></div>
             <div class="flex justify-end"><EpBtn @click="toggleBib" size="small" type="error" outlined>{{labels.fermer}}</EpBtn></div>
       </EpModal>
  </div>

package/src/components/basics/EpTable.vue

@@ -17,13 +17,13 @@ const styleTh ="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase
 </script>
 <template>
   <EpCard flat :title="title">
-    <table class="min-w-full divide-y shadow dark:bg-base-dark">
-      <thead class="bg-gray-50 dark:bg-base-dark" v-if="headers">
+    <table class="min-w-full divide-y shadow dark:bg-dark">
+      <thead class="bg-gray-50 dark:bg-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 dark:bg-base-dark">
+      <tbody class="bg-white divide-y dark:bg-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>

package/src/components/charts/EpBarChart.vue

@@ -6,6 +6,7 @@ import { mdiChartBar } from "@mdi/js";
 import { type MediaVariants } from "../../types/Medias";
 import { isHtml } from "../../composables/isHtml";
 import { useMarkdown } from "../../composables/useMarkdown";
+import { useColorMode } from '@vueuse/core'
 
 interface Serie {
   name: string;
@@ -16,8 +17,8 @@ interface Options {
   xaxis: {
     categories: (number | string)[];
     convertedCatToNumeric?: boolean;
-   }
-  colors?:string[];
+  }
+  colors?: string[];
 }
 
 interface Props {
@@ -30,21 +31,21 @@ interface Props {
   hideIcon?: boolean;
   type?: MediaVariants;
   mandateLevel?: string | null;
-  source?:string;
-  width?:string;
-  labels?:{
-    dataNoDisponible?:string;   
+  source?: string;
+  width?: string;
+  labels?: {
+    dataNoDisponible?: string;
   }
 }
 
 const props = withDefaults(defineProps<Props>(), {
   center: true,
-  width:"500",
-  labels:()=>{
-      return {
-        dataNoDisponible:"Data no disponible"
-      }    
+  width: "500",
+  labels: () => {
+    return {
+      dataNoDisponible: "Data no disponible"
     }
+  }
 });
 
 const renderText = computed(() => {
@@ -57,9 +58,17 @@ const renderText = computed(() => {
   return props.intentions;
 });
 
+const mode = useColorMode()
+
 const globalOptions = computed(() => {
   return {
     ...props.options,
+    theme: {
+      mode: mode.value
+    },
+    chart: {
+      background: 'transparent'
+    },
     dataLabels: {
       enabled: false
     }
@@ -72,6 +81,7 @@ const { center, series, source, width } = toRefs(props)
 
 <template>
   <EpEdu :title="title" :type="type" :hideIcon="hideIcon" :icon="mdiChartBar" :mandateLevel="mandateLevel">
+
     <template #intentions v-if="renderText">
       <div v-html="renderText"></div>
     </template>
@@ -80,13 +90,11 @@ 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>{{ labels.dataNoDisponible }}</p>
       </div>
     </template>
     <template #actions v-if="source">
-        <p>{{source}}</p>
-     </template> 
+      <p>{{ source }}</p>
+    </template>
   </EpEdu>
 </template>
-
-

package/src/components/charts/EpFunnelChart.vue

@@ -5,101 +5,110 @@ import { mdiTriangle } from '@mdi/js';
 import { type MediaVariants } from "../../types/Medias";
 import { isHtml } from "../../composables/isHtml";
 import { useMarkdown } from "../../composables/useMarkdown";
-
-interface OptionsFormmater{
-    dataPointIndex:number;
-    w:{globals:{
-        labels:string[]
-    }}
+import { useColorMode } from '@vueuse/core'
+interface OptionsFormmater {
+  dataPointIndex: number;
+  w: {
+    globals: {
+      labels: string[]
+    }
+  }
 }
 
 interface seriesFunnel {
-    name: string,
-    data: number[]
+  name: string,
+  data: number[]
 }
 
 interface Props {
-    series: seriesFunnel[];
-    labels: string[];
-    //options: OptionsFunnelChart;
-    id?: string;
-    title?:string;
-    center?: boolean;
-    intentions?: string;
-    hideIcon?: boolean;
-    type?: MediaVariants;
-    mandateLevel?: string | null;
-    source?: string;
-    width?: string;
-    height?: number;
-    isFunnel?:boolean;
-    colors?:string[];
+  series: seriesFunnel[];
+  labels: string[];
+  //options: OptionsFunnelChart;
+  id?: string;
+  title?: string;
+  center?: boolean;
+  intentions?: string;
+  hideIcon?: boolean;
+  type?: MediaVariants;
+  mandateLevel?: string | null;
+  source?: string;
+  width?: string;
+  height?: number;
+  isFunnel?: boolean;
+  colors?: string[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
-    center: true,
-    type: 'base',
-    width: "800",
-    height: 350,
-    isFunnel:true,
-    colors:()=>[
-          '#283243',
-          '#3b4f6d',
-          '#465e87',
-          '#5072a5',
-          '#648bb9',
-          '#6e9ac3',
-          '#8ab3d0',
-          '#b0cee0',]
+  center: true,
+  type: 'base',
+  width: "800",
+  height: 350,
+  isFunnel: true,
+  colors: () => [
+    '#283243',
+    '#3b4f6d',
+    '#465e87',
+    '#5072a5',
+    '#648bb9',
+    '#6e9ac3',
+    '#8ab3d0',
+    '#b0cee0',]
 });
 
 
 const renderText = computed(() => {
-    if (!props.intentions) {
-        return null;
-    }
-    if (!isHtml(props.intentions)) {
-        return useMarkdown(props.intentions);
-    }
-    return props.intentions;
+  if (!props.intentions) {
+    return null;
+  }
+  if (!isHtml(props.intentions)) {
+    return useMarkdown(props.intentions);
+  }
+  return props.intentions;
 });
 
-const optionsFunnel = computed(()=> {
-    return {
-      chart: {
-        type: 'bar',
-        height: props.height,
+const mode = useColorMode()
+
+
+const optionsFunnel = computed(() => {
+  return {
+    chart: {
+      type: 'bar',
+      background: 'transparent',
+      height: props.height,
+    },
+    plotOptions: {
+      bar: {
+        borderRadius: 0,
+        horizontal: true,
+        distributed: true,
+        barHeight: '80%',
+        isFunnel: props.isFunnel,
       },
-      plotOptions: {
-        bar: {
-          borderRadius: 0,
-          horizontal: true,
-          distributed: true,
-          barHeight: '80%',
-          isFunnel: props.isFunnel,
-        },
+    },
+    theme: {
+      mode: mode.value
+    },
+    colors: props.colors,
+    dataLabels: {
+      enabled: true,
+      formatter: function (val: string, opt: OptionsFormmater) {
+        let label = ''
+        if (opt.w.globals.labels[opt.dataPointIndex]) {
+          label = opt.w.globals.labels[opt.dataPointIndex] + ' '
+        }
+        return label + val
       },
-      colors: props.colors,
-      dataLabels: {
+      dropShadow: {
         enabled: true,
-        formatter: function (val:string, opt:OptionsFormmater) {
-            let label = ''
-            if(opt.w.globals.labels[opt.dataPointIndex]){
-                label = opt.w.globals.labels[opt.dataPointIndex] + ':  '
-            }
-          return label + val
-        },
-        dropShadow: {
-          enabled: true,
-        },
-      },
-      xaxis: {
-        categories: props.labels
       },
-      legend: {
-        show: false,
-      },
-    }
+    },
+    xaxis: {
+      categories: props.labels
+    },
+    legend: {
+      show: false,
+    },
+  }
 })
 
 
@@ -110,20 +119,18 @@ const { center, series, source, labels, width } = toRefs(props)
 
 <template>
 
-    <EpEdu :title="title" :type="type" :hideIcon="hideIcon" :icon="mdiTriangle"
-        :mandateLevel="mandateLevel">
-        <template #intentions v-if="renderText">
+  <EpEdu :title="title" :type="type" :hideIcon="hideIcon" :icon="mdiTriangle" :mandateLevel="mandateLevel">
+    <template #intentions v-if="renderText">
 
-            <div v-html="renderText"></div>
-        </template>
-        <template #content>
-            <div :class="`p-4 ${center ? 'flex justify-center' : ''}`" v-if="labels && series">
-                <apexchart type="bar" :width="width" :height="height" :options="optionsFunnel"
-                    :series="series"></apexchart>
-            </div>
-        </template>
-        <template #actions v-if="source">
-            <p>{{ source }}</p>
-        </template>
-    </EpEdu>
+      <div v-html="renderText"></div>
+    </template>
+    <template #content>
+      <div :class="`p-4 ${center ? 'flex justify-center' : ''}`" v-if="labels && series">
+        <apexchart type="bar" :width="width" :height="height" :options="optionsFunnel" :series="series"></apexchart>
+      </div>
+    </template>
+    <template #actions v-if="source">
+      <p>{{ source }}</p>
+    </template>
+  </EpEdu>
 </template>

package/src/components/charts/EpLineChart.vue

@@ -5,6 +5,7 @@ import { mdiChartLine } from "@mdi/js";
 import { type MediaVariants } from "../../types/Medias";
 import { isHtml } from "../../composables/isHtml";
 import { useMarkdown } from "../../composables/useMarkdown";
+import { useColorMode } from '@vueuse/core'
 
 interface Serie {
     name: string;
@@ -16,7 +17,7 @@ interface Options {
         categories: (number | string)[];
         convertedCatToNumeric?: boolean;
     },
-    colors?:string[]
+    colors?: string[]
 }
 
 interface Props {
@@ -30,20 +31,20 @@ interface Props {
     type?: MediaVariants;
     mandateLevel?: string | null;
     source?: string;
-    width?:string;
-    labels?:{
-        dataNoDisponible?:string;  
+    width?: string;
+    labels?: {
+        dataNoDisponible?: string;
     }
 }
 
 const props = withDefaults(defineProps<Props>(), {
     center: true,
-    width:"500",
-    labels:()=>{
+    width: "500",
+    labels: () => {
         return {
-            dataNoDisponible:"Data no disponible"
-            }    
+            dataNoDisponible: "Data no disponible"
         }
+    }
 });
 
 const renderText = computed(() => {
@@ -56,9 +57,15 @@ const renderText = computed(() => {
     return props.intentions;
 });
 
+
+const mode = useColorMode()
+
 const globalOptions = computed(() => {
     return {
         ...props.options,
+        theme: {
+            mode: mode.value
+        },
         dataLabels: {
             enabled: false
         },
@@ -66,7 +73,7 @@ const globalOptions = computed(() => {
             curve: "straight"
         },
         chart: {
-            width: 550,
+            background: 'transparent',
             type: "line",
             zoom: {
                 enabled: false,
@@ -75,7 +82,7 @@ const globalOptions = computed(() => {
     }
 })
 
-const { center, series, source, width} = toRefs(props)
+const { center, series, source, width } = toRefs(props)
 
 </script>
 
@@ -89,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>{{ labels.dataNoDisponible }}</p>
             </div>
         </template>
         <template #actions v-if="source">
@@ -97,5 +104,3 @@ const { center, series, source, width} = toRefs(props)
         </template>
     </EpEdu>
 </template>
-
-

package/src/components/charts/EpPieChart.vue

@@ -5,6 +5,7 @@ import { mdiChartPie } from '@mdi/js';
 import { type MediaVariants } from "../../types/Medias";
 import { isHtml } from "../../composables/isHtml";
 import { useMarkdown } from "../../composables/useMarkdown";
+import { useColorMode } from '@vueuse/core'
 
 interface TitlePie {
     text: string;
@@ -27,6 +28,7 @@ interface Props {
     series: number[];
     options: OptionsPieChart;
     id?: string;
+    title?:string;
     center?: boolean;
     intentions?: string;
     hideIcon?: boolean;
@@ -42,7 +44,7 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
     center: true,
     type:'base',
-    width:"450",
+    width:"500",
     labels:()=>{
         return {
             dataNoDisponible:"Data no disponible"
@@ -61,21 +63,36 @@ const renderText = computed(() => {
     return props.intentions;
 });
 
+const mode = useColorMode()
+
+const globalOptions = computed(() => {
+  return {
+    ...props.options,
+    theme: {
+      mode: mode.value
+    },
+    chart: {
+      background: 'transparent'
+    },
+  }
+})
 
 
-const { center, series, source, options, width } = toRefs(props)
+
+const { center, series, source, width } = toRefs(props)
 
 </script>
 
 <template>
-    <EpEdu :title="options?.title?.text" :type="type" :hideIcon="hideIcon" :icon="mdiChartPie" :mandateLevel="mandateLevel">
+    <EpEdu :title="title" :type="type" :hideIcon="hideIcon" :icon="mdiChartPie" :mandateLevel="mandateLevel">
+
         <template #intentions v-if="renderText">
            
             <div v-html="renderText"></div>
         </template>
         <template #content>
             <div :class="`p-4 ${center ? 'flex justify-center' : ''}`" v-if="options && series">
-                <apexchart :width="width" type="pie" :options="options" :series="series"></apexchart>
+                <apexchart :width="width" type="pie" :options="globalOptions" :series="series"></apexchart>
             </div>
             <div v-else>
                 <p>{{labels.dataNoDisponible}}</p>