ep-lib-ts 1.0.6 → 1.0.8

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.6",
+  "version": "1.0.8",
   "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

@@ -1,144 +1,202 @@
 <script setup lang="ts">
-import { toRefs, ref, computed } from 'vue'
-import { type SizeThumbnail, sizeThumbnailStyle } from '../../types/Image'
-import { useImage } from '@vueuse/core'
-import EpModal from '../interactions/EpModal.vue'
-import EpIcon from '../basics/EpIcon.vue'
-import EpBtn from './EpBtn.vue'
-import { mdiArrowExpandAll } from '@mdi/js';
-import { mdiImage } from '@mdi/js';
-import { mdiImageRemove } from '@mdi/js';
+import { toRefs, ref, computed } from "vue";
+import { type SizeThumbnail, sizeThumbnailStyle } from "../../types/Image";
+import { useImage } from "@vueuse/core";
+import EpModal from "../interactions/EpModal.vue";
+import EpIcon from "../basics/EpIcon.vue";
+import EpBtn from "./EpBtn.vue";
+import { mdiArrowExpandAll } from "@mdi/js";
+import { mdiImage } from "@mdi/js";
+import { mdiImageRemove } from "@mdi/js";
 import { useRenderText } from "../../composables/useRenderText";
 
 interface Props {
-   src: string;
-   alt?: string;
-   height?: string | number;
-   width?: string | number;
-   thumbnail?: boolean;
-   sizeThumbnail?: SizeThumbnail;
-   caption?: string;
-   bib?: string;
-   title?: string;
-   noModal?:boolean;
-   cols?: string | number;  //posible type à venir => basis-1/12... basis-11/12 to basis-full
-   labels?:{
+  src: string;
+  alt?: string;
+  height?: string | number;
+  width?: string | number;
+  thumbnail?: boolean;
+  sizeThumbnail?: SizeThumbnail;
+  caption?: string;
+  bib?: string;
+  title?: string;
+  noModal?: boolean;
+  cols?: string | number; //posible type à venir => basis-1/12... basis-11/12 to basis-full
+  labels?: {
     reference?: string;
-    fermer?:string;
-    referenceLibrary?:string;
-   }
+    fermer?: string;
+    referenceLibrary?: string;
+  };
+  locale?: "en" | "fr" | "es";
 }
 
 const props = withDefaults(defineProps<Props>(), {
-   alt: "Image snfas",
-   cols: "6",
-   thumbnail: false,
-   noModal:false,
-   sizeThumbnail:"medium",
-   labels:()=>{
-      return {
-         reference: "Référence",
-         fermer:"Fermer",
-         referenceLibrary:"Référence bibliographique"
-      }
-   }
-})
+  alt: "Image snfas",
+  cols: "6",
+  thumbnail: false,
+  noModal: false,
+  sizeThumbnail: "medium",
+  labels: () => {
+    return {
+      reference: "Référence",
+      fermer: "Fermer",
+      referenceLibrary: "Référence bibliographique",
+    };
+  },
+  locale: "fr",
+});
+
+switch (props.locale) {
+  case "en":
+    props.labels.fermer = "Close";
+    props.labels.reference = "Reference";
+    props.labels.referenceLibrary = "Reference Library";
+    break;
+  case "es":
+    props.labels.fermer = "Cerrar";
+    props.labels.reference = "Referencia";
+    props.labels.referenceLibrary = "Biblioteca de referencias";
+    break;
+  case "fr":
+  default:
+    props.labels.fermer = "Fermer";
+    props.labels.reference = "Référence";
+    props.labels.referenceLibrary = "Référence bibliographique";
+    break;
+}
 
 const Cols = [
-   'basis-6/12',
-   'basis-1/12',
-   'basis-2/12',
-   'basis-3/12',
-   'basis-4/12',
-   'basis-5/12',
-   'basis-6/12',
-   'basis-7/12',
-   'basis-8/12',
-   'basis-9/12',
-   'basis-10/12',
-   'basis-11/12',
-   'basis-full',
-]
+  "basis-6/12",
+  "basis-1/12",
+  "basis-2/12",
+  "basis-3/12",
+  "basis-4/12",
+  "basis-5/12",
+  "basis-6/12",
+  "basis-7/12",
+  "basis-8/12",
+  "basis-9/12",
+  "basis-10/12",
+  "basis-11/12",
+  "basis-full",
+];
 
 const renderCols = computed(() => {
-   return Cols[+props.cols]
-})
+  return Cols[+props.cols];
+});
 
-const renderBib = computed(()=>{
-   if(props.bib){
-      return useRenderText(props.bib)
-   }
-   return ""
-})
+const renderBib = computed(() => {
+  if (props.bib) {
+    return useRenderText(props.bib);
+  }
+  return "";
+});
 
-const showModal = ref<boolean>(false)
-
-const toggleModal = ():void => {
-   if(props.noModal){
-      return
-   }
-   showModal.value = !showModal.value
-}
+const showModal = ref<boolean>(false);
 
-const showBib = ref<boolean>(false)
+const toggleModal = (): void => {
+  if (props.noModal) {
+    return;
+  }
+  showModal.value = !showModal.value;
+};
 
-const toggleBib = ():void => {
-   showBib.value = !showBib.value
-}
+const showBib = ref<boolean>(false);
 
-const styleSizeThumbnail = computed(()=> {
-   return sizeThumbnailStyle[props.sizeThumbnail]
-})
+const toggleBib = (): void => {
+  showBib.value = !showBib.value;
+};
 
-const { isLoading, error } = useImage({ src: props.src })
-const { src, alt, title, caption, thumbnail, bib, sizeThumbnail } = toRefs(props)
+const styleSizeThumbnail = computed(() => {
+  return sizeThumbnailStyle[props.sizeThumbnail];
+});
 
+const { isLoading, error } = useImage({ src: props.src });
+const { src, alt, title, caption, thumbnail, bib, sizeThumbnail } =
+  toRefs(props);
 </script>
 
 <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}`">
-            <template v-if="isLoading">
-               <span class="text-gray-200"><EpIcon :icon-path="mdiImage" size="250"></EpIcon></span>
-            </template>
-            <template v-else-if="error">
-               <span class="text-red-200"><EpIcon :icon-path="mdiImageRemove" size="150"></EpIcon></span>
-            </template>
-            <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="text-right"><EpBtn @click="toggleBib" size="small">{{labels.reference}}</EpBtn></div>
-            </div>
-         </div>
+  <div :class="thumbnail ? 'inline-block' : ''">
+    <div v-if="!thumbnail" class="flex m-2">
+      <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>
+        <template v-else-if="error">
+          <span class="text-red-200"
+            ><EpIcon :icon-path="mdiImageRemove" size="150"></EpIcon
+          ></span>
+        </template>
+        <template v-else>
+          <img
+            class="object-cover object-center w-full"
+            :src="src"
+            :alt="alt"
+            @click="toggleModal"
+          />
+        </template>
+        <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>
+    </div>
+    <div v-if="thumbnail" class="relative group inline-block m-2">
+      <img
+        :class="`${styleSizeThumbnail} object-cover object-center group-hover:opacity-30 `"
+        :src="src"
+        :alt="alt"
+      />
+      <div
+        :class="`absolute top-0 left-0 ${styleSizeThumbnail} bg-black opacity-0 transition-opacity duration-300 group-hover:opacity-30 cursor-pointer`"
+        @click="toggleModal"
+      >
+        <div
+          class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white text-center"
+        >
+          <EpIcon :icon-path="mdiArrowExpandAll"></EpIcon>
+        </div>
       </div>
-      <div v-if="thumbnail" class="relative group inline-block m-2">
-         <img :class="`${styleSizeThumbnail} object-cover object-center group-hover:opacity-30 `" :src="src" :alt="alt">
-         <div
-            :class="`absolute top-0 left-0 ${styleSizeThumbnail} bg-black opacity-0 transition-opacity duration-300 group-hover:opacity-30 cursor-pointer`"
-            @click="toggleModal">
-            <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white text-center">
-               <EpIcon :icon-path="mdiArrowExpandAll"></EpIcon>
-            </div>
-         </div>
+    </div>
+    <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 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>
-      <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>
-         </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">
-  
-            <div class="text-gray-700 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>
+      <!-- <div class="flex justify-end"><EpBtn @click="toggleModal" size="small" type="error" outlined>Fermer</EpBtn></div> -->
+    </EpModal>
+    <EpModal v-model="showBib" :title="labels.referenceLibrary">
+      <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>
 </template>
-

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>
-
-