ep-lib-ts 1.0.0 → 1.0.3

package/dist/types/TimeLine.d.ts

@@ -0,0 +1,124 @@
+export declare const typeTimeLineTag: {
+    base: {
+        default: string;
+        outlined: string;
+    };
+};
+export interface HeadTimeLine {
+    text: string;
+    headline?: string;
+}
+export interface TagTimeLine {
+    id: number | string;
+    color: ColorsTags;
+    title: string;
+    active?: boolean;
+}
+export interface TimeLineDate {
+    day?: string | number;
+    hour?: string | number;
+    year?: string | number;
+    month?: string | number;
+    minute?: string | number;
+}
+export interface EventTimeLine {
+    id: string;
+    tag?: TagTimeLine | null;
+    text: HeadTimeLine;
+    end_date?: TimeLineDate;
+    start_date?: TimeLineDate;
+    media: {
+        url: string;
+    };
+    background?: {
+        color?: string;
+    };
+}
+export declare const colorsTimeLine: {
+    noTag: {
+        bg: string;
+        text: string;
+        border: string;
+    };
+    "blue-grey": {
+        bg: string;
+        text: string;
+        border: string;
+    };
+    red: {
+        bg: string;
+        text: string;
+        border: string;
+    };
+    pink: {
+        bg: string;
+        text: string;
+        border: string;
+    };
+    purple: {
+        bg: string;
+        text: string;
+        border: string;
+    };
+    "deep-purple": {
+        bg: string;
+        text: string;
+        border: string;
+    };
+    indigo: {
+        bg: string;
+        text: string;
+        border: string;
+    };
+    blue: {
+        bg: string;
+        text: string;
+        border: string;
+    };
+    cyan: {
+        bg: string;
+        text: string;
+        border: string;
+    };
+    teal: {
+        bg: string;
+        text: string;
+        border: string;
+    };
+    green: {
+        bg: string;
+        text: string;
+        border: string;
+    };
+    "light-green": {
+        bg: string;
+        text: string;
+        border: string;
+    };
+    lime: {
+        bg: string;
+        text: string;
+        border: string;
+    };
+    "light-blue": {
+        bg: string;
+        text: string;
+        border: string;
+    };
+    "deep-orange": {
+        bg: string;
+        text: string;
+        border: string;
+    };
+    orange: {
+        bg: string;
+        text: string;
+        border: string;
+    };
+    brown: {
+        bg: string;
+        text: string;
+        border: string;
+    };
+};
+export type ColorsTags = keyof typeof colorsTimeLine;

package/dist/types/Tooltip.d.ts

@@ -0,0 +1,75 @@
+export declare const typeTooltip: {
+    top: {
+        default: string;
+        dark: string;
+        arrow: string;
+        arrowdark: string;
+    };
+    top_start: {
+        default: string;
+        dark: string;
+        arrow: string;
+        arrowdark: string;
+    };
+    top_end: {
+        default: string;
+        dark: string;
+        arrow: string;
+        arrowdark: string;
+    };
+    bottom: {
+        default: string;
+        dark: string;
+        arrow: string;
+        arrowdark: string;
+    };
+    bottom_start: {
+        default: string;
+        dark: string;
+        arrow: string;
+        arrowdark: string;
+    };
+    bottom_end: {
+        default: string;
+        dark: string;
+        arrow: string;
+        arrowdark: string;
+    };
+    left: {
+        default: string;
+        dark: string;
+        arrow: string;
+        arrowdark: string;
+    };
+    left_start: {
+        default: string;
+        dark: string;
+        arrow: string;
+        arrowdark: string;
+    };
+    left_end: {
+        default: string;
+        dark: string;
+        arrow: string;
+        arrowdark: string;
+    };
+    right: {
+        default: string;
+        dark: string;
+        arrow: string;
+        arrowdark: string;
+    };
+    right_start: {
+        default: string;
+        dark: string;
+        arrow: string;
+        arrowdark: string;
+    };
+    right_end: {
+        default: string;
+        dark: string;
+        arrow: string;
+        arrowdark: string;
+    };
+};
+export type TypeTooltip = keyof typeof typeTooltip;

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ep-lib-ts",
   "private": false,
-  "version": "1.0.0",
+  "version": "1.0.3",
   "files": [
     "dist",
     "src/components/"
@@ -34,7 +34,7 @@
     "markdown-it": "^14.1.0",
     "postcss-cli": "^11.0.0",
     "vee-validate": "^4.12.6",
-    "vue": "^3.4.25",
+    "vue": "^3.2.45",
     "vue-router": "^4.3.2",
     "vue3-apexcharts": "^1.5.2"
   },
@@ -51,12 +51,13 @@
     "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"
   },
   "engines": {
     "node": "20.x.x"
-  }
+  },
+  "license": "MIT"
 }

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