ep-lib-ts 1.0.37 → 1.0.40

package/dist/types/Answer.d.ts

@@ -1,5 +1,6 @@
 import { TypeAlert } from './Alert';
 import { MediaVariants } from './Medias';
+
 interface ContentComponent {
     type?: string;
     data: {

package/dist/types/Component.d.ts

@@ -0,0 +1,10 @@
+export type EpComponent = "EpBtn" | "EpIcon" | "EpNothing";
+export interface ContentComponents {
+    uid: string;
+    deletedAt?: Date | string | undefined;
+    type: EpComponent;
+    noMarginY?: boolean;
+    data: {
+        [key: string]: any;
+    };
+}

package/dist/types/Hover.d.ts

@@ -1,3 +1,3 @@
 export type Animation = "" | "scale" | "translateY" | "translateX";
-export type Size = "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl";
-export type Color = "" | "white" | "black" | "primary" | "secondary" | "accent" | "error" | "warning" | "success" | "info" | "question" | "tip" | "primarydark" | "secondarydark" | "accentdark" | "errordark" | "warningdark" | "successdark" | "infodark" | "questiondark" | "tipdark" | "primarylight" | "secondarylight" | "accentlight" | "errorlight" | "warninglight" | "successlight" | "infolight" | "questionlight" | "tiplight";
+export type TextSize = "text-sm" | "text-lg" | "text-xl" | "text-2xl" | "text-3xl" | "text-4xl" | "text-5xl" | "text-6xl";
+export type MaxWidth = "max-w-xs" | "max-w-sm:" | "max-w-md" | "max-w-lg" | "max-w-xl" | "max-w-2xl";

package/dist/types/Medias.d.ts

@@ -1,4 +1,5 @@
 export declare const mediaVariants: {
+    neutral: string;
     base: string;
     primary: string;
     secondary: string;

package/dist/types/StackedList.d.ts

@@ -1,52 +1,24 @@
+import { ContentComponents } from './Component';
 type Color = "primary" | "secondary" | "accent" | "error" | "warning" | "success" | "info" | "question" | "tip";
 type Variant = "circle" | "square" | "rounded";
 type Size = "small" | "middle" | "big";
-type ButtonType = "base" | "primary" | "secondary" | "accent" | "error" | "warning" | "success" | "info";
 interface Avatar {
-    src: string;
+    src?: string;
     alt: string;
-}
-interface Button {
-    href: string;
-    label: string;
-    disabled?: boolean;
-}
-interface CheckBox {
-    id?: string;
-    label?: string;
-    modelValue?: string | string[] | boolean;
-    disabled?: boolean;
-    readonly?: boolean;
-    value?: string;
-}
-interface Icon {
-    size?: string | number;
-    viewBox?: string;
-    iconPath: string;
-    extraClass?: string;
+    name?: string;
 }
 export interface ListItem {
     uid?: string;
     avatar?: Avatar;
     title: string;
     description: string;
-    button?: Button;
-    checkbox?: CheckBox;
+    component?: ContentComponents;
 }
-export interface ItemStyle {
-    avatar?: {
-        color?: Color;
-        size?: Size;
-        variant?: Variant;
-        name?: string;
-    };
-    cropped?: boolean;
-    button?: {
-        content: string;
-        type?: ButtonType;
-    };
-    checkbox?: boolean;
-    icon?: Icon;
+export interface AvatarStyle {
+    color?: Color;
+    size?: Size;
+    variant?: Variant;
+    name?: string;
 }
 export declare const roundedType: {
     none: string;
@@ -54,10 +26,5 @@ export declare const roundedType: {
     middle: string;
     big: string;
 };
-type RoundedStyle = keyof typeof roundedType;
-export interface CustomStyle {
-    border?: boolean;
-    rounded?: RoundedStyle;
-    restricted?: boolean;
-}
+export type RoundedStyle = keyof typeof roundedType;
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ep-lib-ts",
   "private": false,
-  "version": "1.0.37",
+  "version": "1.0.40",
   "files": [
     "dist",
     "src/components/"
@@ -26,40 +26,39 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@lottiefiles/dotlottie-vue": "0.5.6",
-    "@mdi/js": "7.4.47",
-    "@types/three": "0.173.0",
-    "@vueuse/core": "12.7.0",
-    "@wdns/vue-code-block": "2.3.5",
-    "aframe": "1.6.0",
-    "apexcharts": "4.4.0",
-    "katex": "0.16.21",
-    "markdown-it": "14.1.0",
-    "postcss-cli": "11.0.0",
-    "three": "0.173.0",
-    "vee-validate": "4.15.0",
-    "vue": "3.5.13",
-    "vue-router": "4.5.0",
-    "vue3-apexcharts": "1.8.0"
+    "@lottiefiles/dotlottie-vue": "^0.5.6",
+    "@mdi/js": "^7.4.47",
+    "@types/three": "^0.170.0",
+    "@vueuse/core": "^10.9.0",
+    "@wdns/vue-code-block": "^2.3.3",
+    "aframe": "^1.6.0",
+    "apexcharts": "3.53.0",
+    "katex": "^0.16.11",
+    "markdown-it": "^14.1.0",
+    "postcss-cli": "^11.0.0",
+    "three": "^0.170.0",
+    "vee-validate": "^4.13.2",
+    "vue": "^3.2.45",
+    "vue-router": "^4.4.5",
+    "vue3-apexcharts": "1.6.0"
   },
   "devDependencies": {
-    "@tailwindcss/forms": "0.5.10",
-    "@tailwindcss/postcss": "^4.0.7",
-    "@types/katex": "0.16.7",
-    "@types/markdown-it": "14.1.2",
-    "@types/node": "22.13.4",
-    "@vitejs/plugin-vue": "5.2.1",
-    "autoprefixer": "10.4.20",
-    "path": "0.12.7",
-    "postcss": "8.5.2",
-    "tailwindcss": "4.0.7",
-    "typescript": "5.7.3",
-    "vite": "6.1.0",
-    "vite-plugin-dts": "4.5.0",
-    "vue-tsc": "^2.2.2"
+    "@tailwindcss/forms": "^0.5.9",
+    "@types/katex": "^0.16.7",
+    "@types/markdown-it": "^14.1.2",
+    "@types/node": "^20.12.7",
+    "@vitejs/plugin-vue": "^5.1.3",
+    "autoprefixer": "^10.4.20",
+    "path": "^0.12.7",
+    "postcss": "^8.4.45",
+    "tailwindcss": "^3.4.11",
+    "typescript": "^5.6.2",
+    "vite": "^5.4.5",
+    "vite-plugin-dts": "^3.9.0",
+    "vue-tsc": "^2.2.4"
   },
   "peerDependencies": {
-    "vue": "3.5.13"
+    "vue": "^3.2.45"
   },
   "engines": {
     "node": "20.x.x"

package/src/components/basics/EpCard.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { toRefs, computed } from "vue";
+import { toRefs, computed, useSlots, type Slots } from "vue";
 import EpIcon from './EpIcon.vue';
+import EpSvg from '../medias/EpSvg.vue'
 import useColors from '../../composables/useColors'
 //types with capital letter, object styles in lowercase
 import { type Density, density_style } from "../../types/Card";
@@ -15,6 +16,8 @@ interface Props {
     src?: string | null;
     maxWidth?:string;
     density?:Density;
+    svg?:string;
+    isLink?:boolean;
 }
 
 
@@ -28,7 +31,8 @@ const props = withDefaults(defineProps<Props>(), {
     color: null,
     src:null,
     density:"default",
-    maxWidth:"max-w-full"
+    maxWidth:"max-w-full",
+    isLink:false
 })
 
 //styles card 
@@ -41,9 +45,16 @@ const borderColor = computed(() => {
         return `border solid ${useColors('border', props.color)}`
     }
     if (props.outlined) {
-        return 'border solid border-primary dark:border-primary'
+        return 'border solid border-primary dark:border-white'
     }
-    return 'dark:border dark:solid dark:border-primary'
+    return 'dark:border dark:solid dark:border-white'
+})
+
+const isLinkStyle = computed(()=> {
+    if(props.isLink){
+        return 'dark:hover:border-white hover:border-primary hover:border hover:border-2 rounded-md cursor-pointer'
+    }
+    return ''
 })
 
 const bgColor = computed(() => {
@@ -73,19 +84,29 @@ const stylesCard = computed(()=> {
     ${props.maxWidth} 
     rounded-md 
     dark:bg-dark
-    datk:text-white
-    my-4 `
+    dark:text-white
+    `
 })
 
 
-const { title, subtitle, icon, src } = toRefs(props)
+const { title, subtitle, icon, src, svg } = toRefs(props)
+
+const slots: Slots = useSlots();
+
+const hasContent = computed(() => {
+  return !!slots.default || !!props.title || !!props.subtitle || !!props.icon;
+});
 
 </script>
 <template>
-    <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 dark:text-white">
+    <div :class="`${stylesCard} ${isLinkStyle}`">
+        <img v-if="src" :src="src" :class="`w-full ${hasContent ? 'rounded-t-md':'rounded-md'}`" alt="header card">
+        <div v-if="!src && svg" class="w-full rounded-t-md">
+            <EpSvg :content="svg"/>
+        </div>
+        
+        <div :class="density_class" v-if="hasContent">
+            <div v-if="title || subtitle || icon" class="mb-2 flex items-center justify-between dark:text-white">
                     <div>
                         <h3 class="text-2xl dark:text-white font-bold">{{ title }}</h3>
                         <h4 :class="`text-xs dark:text-white ${subTitleText}`">{{ subtitle }}</h4>

package/src/components/basics/EpHover.vue

@@ -3,7 +3,7 @@
     import useColors from '../../composables/useColors'
     import { useRenderText } from '../../composables/useRenderText';
 
-    import { Color, Animation, Size } from "../../types/Hover";
+    import { Animation, TextSize } from "../../types/Hover";
 
     interface Props {
         bgColor?: string;
@@ -11,7 +11,7 @@
         text?: string;
         animation?:Animation;
         seeThrough?: boolean;
-        textSize?: Size;
+        textSize?: TextSize;
     }
 
     const props = withDefaults(defineProps<Props>(), {
@@ -35,7 +35,7 @@
         }
 
         let opacity = (props.seeThrough)? "group-hover:opacity-90" : "group-hover:opacity-100";
-        let textSize = (props.textSize)? `text-${props.textSize}` : "text-md";
+        let textSize = (props.textSize)? props.textSize : "";
 
         return css + ' ' + opacity + ' ' + textSize;
     })

package/src/components/basics/EpHoverCard.vue

@@ -1,12 +1,13 @@
 <script lang="ts" setup>
-import { computed, toRefs } from 'vue';
+import { computed, toRefs, useSlots, type Slots } from 'vue';
 import EpHover from './EpHover.vue';
 import EpIcon from './EpIcon.vue';
 import useColors from '../../composables/useColors'
+
 //types with capital letter, object styles in lowercase
 import { type Density, density_style } from "../../types/Card";
 
-import { Color, Animation, Size } from "../../types/Hover";
+import type { Animation, TextSize, MaxWidth } from "../../types/Hover";
 
 interface Props {
     title?: string | null;
@@ -16,14 +17,13 @@ interface Props {
     icon?: string | null;
     color?: string | null;
     src?: string | null;
-    maxWidth?:string;
+    maxWidth?:MaxWidth;
     density?:Density;
-
     hoverContent: string;
     hoverBg?: string;
     hoverAnimation?: Animation;
     seeThrough?: boolean;
-    textSize?: Size;
+    textSize?: TextSize;
     hoverColor?: string;
 }
 
@@ -38,8 +38,7 @@ const props = withDefaults(defineProps<Props>(), {
     color: null,
     src:null,
     density:"default",
-    maxWidth:"max-w-4xl",
-
+    maxWidth:"max-w-xl",
     hoverBg: "",
     hoverAnimation: "translateY"
 })
@@ -86,23 +85,26 @@ const stylesCard = computed(()=> {
     ${props.maxWidth} 
     rounded-md 
     dark:bg-dark
-    dark:text-white
-    my-4 `
+    dark:text-white`
 })
 
 
 const { title, subtitle, icon, src, hoverContent } = toRefs(props)
 
+const slots: Slots = useSlots();
+
+const hasContent = computed(() => {
+  return !!slots.default || !!props.title || !!props.subtitle;
+});
 
 </script>
 
 <template>
-
     <div :class="`${stylesCard} mx-auto`">
         <EpHover :textColor="hoverColor" :textSize="textSize" :seeThrough="seeThrough" :bgColor="hoverBg" :animation="hoverAnimation" :text="hoverContent" v-if="src && hoverContent">
-            <img :src="src" class="w-full rounded-t-md" alt="header card">
+            <img :src="src" :class="`w-full ${hasContent ? 'rounded-t-md':'rounded-md'}`" alt="header card">
         </EpHover>
-        <div :class="density_class">
+        <div :class="density_class" v-if="hasContent">
             <div v-if="title || subtitle" class="mb-2 flex items-center justify-between dark:text-white">
                 <div>
                     <h3 class="text-2xl dark:text-white font-bold">{{ title }}</h3>

package/src/components/basics/EpStackedList.vue

@@ -1,70 +1,77 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, defineAsyncComponent } from 'vue';
 import EpAvatar from './EpAvatar.vue';
 import { useRenderText } from '../../composables/useRenderText';
-import EpBtn from './EpBtn.vue';
-import EpCheckbox from '../forms/EpCheckbox.vue';
-import EpIcon from './EpIcon.vue'; 
+import type { EpComponent } from '../../types/Component';
 
 // Importing the necessary interfaces for the code
-import { type ListItem, type ItemStyle, roundedType, type CustomStyle } from '../../types/StackedList';
+import { type ListItem, type AvatarStyle, type RoundedStyle, roundedType } from '../../types/StackedList';
+
 
 // Managing the props
 interface Props {
     elements: ListItem[];
-    itemStyle?: ItemStyle;
-    customStyle?: CustomStyle;
+    border?:boolean;
+    rounded?:RoundedStyle;
+    restricted?:boolean;
+    cropped?:boolean;
+    avatarStyle?: AvatarStyle;
 }
 
 const props = withDefaults(defineProps<Props>(),{
     elements: () => [],
-    itemStyle: () => { return {
-        cropped: false,
-        checkbox: false,
-    } },
-    customStyle: () => {
-        return {
-            border: true,
-            rounded: "small",
-            restricted: false
-        }
-    }
+    avatarStyle: () => { return {
+      size:"middle"
+    }},
+    border:true,
+    rounded:"small",
+    restricted:false,
+    cropped:false
 });
 
 
 // The style of the wrapper div 
 const className = computed(() => {
-
-    const border = (props.customStyle.border === false)? 'border-0' : 'border';
-    const rounded = roundedType[(props.customStyle.rounded)? props.customStyle.rounded : 'small'];
-    const padding = (props.customStyle.restricted)? 'p-0' : 'p-4';
-
+    const border = (props.border === false)? 'border-0' : 'border';
+    const rounded = roundedType[(props.rounded)? props.rounded : 'small'];
+    const padding = (props.restricted)? 'p-0' : 'p-4';
     return `${border} ${rounded} ${padding}`;
 })
 
 
 // The style of the list elements
-const elementSpacing = computed(() => (props.customStyle.restricted)? 'p-6' : 'mx-6 py-6');
+const elementSpacing = computed(() => (props.restricted)? 'p-6' : 'mx-6 py-6');
 
-const elementGrid = computed(() => (props.itemStyle.button || props.itemStyle.checkbox || props.itemStyle.icon)? 'grid-cols-11' : 'grid-cols-7');
+const elementGrid = (element: Record<string, any>|undefined) => {
+ return element?'grid-cols-11' : 'grid-cols-7'
+}
+
+//get Component asyncComponent
+const getCompontent = (name:EpComponent|undefined)=> {
+  if(!name){
+    return defineAsyncComponent(()=>import('../signages/EpNothing.vue'))
+  }
+  //!IMPORT IN SAME FOLDER PATH!! EpIcon and EpBtn
+  return defineAsyncComponent(()=>import(/* @vite-ignore */`./${name}.vue`))
+}
 
 </script>
 
 <template>
 
     <div :class="`${className} border-gray-200 flex flex-col dark:border-slate-700 dark:bg-slate-900 lg:mx-28`">
-        <li v-for="elem in elements" :key="elements.indexOf(elem)" :class="`${(elements.indexOf(elem) !== 0)? 'border-t' : ''} list-none ${elementSpacing} grid ${elementGrid} justify-items-center items-center border-gray-200 dark:border-slate-700`">
-            <EpAvatar v-if="elem.avatar" :src="elem.avatar?.src" :alt="elem.avatar?.alt" v-bind="itemStyle.avatar" class="col-span-2" />
+        <li v-for="elem in elements" :key="elements.indexOf(elem)" :class="`${(elements.indexOf(elem) !== 0)? 'border-t' : ''} list-none ${elementSpacing} grid grid-cols-11 justify-items-center items-center border-gray-200 dark:border-slate-700`">
+            <EpAvatar v-if="elem.avatar" :name="elem.avatar?.name" :src="elem.avatar?.src" :alt="elem.avatar?.alt" v-bind="avatarStyle" class="col-span-2" />
             <div class="col-span-5 justify-self-start">
                 <h3 class="font-semibold">{{ elem.title }}</h3>
-                <div :class="`${(itemStyle.cropped)? 'line-clamp-3': ''}`" v-html="useRenderText(elem.description)"></div>
+                <div :class="`${(cropped)? 'line-clamp-3': ''}`" v-html="useRenderText(elem.description)"></div>
             </div>
-            <div v-if="itemStyle.button || itemStyle.checkbox || itemStyle.icon" class="flex gap-2 items-center col-span-4 justify-self-auto">
+            <div v-if="elem.component" class="flex gap-2 items-center col-span-4 justify-self-auto">
 
                 <!--update component type-->
-                <EpBtn v-if="itemStyle.button" :type="`${(itemStyle.button.type)? itemStyle.button.type : 'base'}`" v-bind="elem.button" :rounded="true">{{ itemStyle.button.content }}</EpBtn>
-                <EpCheckbox v-if="itemStyle.checkbox" v-bind="elem.checkbox" />
-                <EpIcon v-if="itemStyle.icon" v-bind="itemStyle.icon" />
+                <Component :is="getCompontent(elem.component.type)" v-bind="{...elem.component.data}">
+                    {{ elem.component.data.content }}
+                </Component>
             </div>
         </li>
     </div>

package/src/components/charts/EpFunnelChart.vue

@@ -39,7 +39,7 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   center: true,
-  type: 'base',
+  type: 'neutral',
   width: "800",
   height: 350,
   isFunnel: true,

package/src/components/charts/EpPieChart.vue

@@ -41,7 +41,7 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
     center: true,
-    type:'base',
+    type:'neutral',
     width:"500",
     dataNoDisponible:"Data no disponible"
 

package/src/components/educationals/EpCodeblock.vue

@@ -6,7 +6,7 @@
   import { computed} from "vue";
   import { ref } from "vue"; 
 
-  type Langue = "javascript"|"css"|"html"|"php"|"json"|"typescript";
+  type Langue = "javascript"|"css"|"html"|"php"|"json"|"typescript"|"python"|"xml";
 
   interface Props {
     code?: string;  

package/src/components/educationals/EpEdu.vue

@@ -23,9 +23,9 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   title: null,
-  type: "base",
+  type: "neutral",
   hideIcon: false,
-  flat: false,
+  flat: true,
   labelIntentions: "",
 });
 
@@ -48,24 +48,43 @@ const renderIcon = computed(() => {
 });
 
 const topBarStyle = computed(() => {
-  return `${mediaVariants[props.type]} text-left px-5 py-2 ${
+  return `${mediaVariants[props.type]} text-left  ${
     props.flat ? "" : "rounded-t-md"
   } flex justify-between items-center `;
 });
 
 const bottomBarStyle = computed(() => {
-  return `${mediaVariants[props.type]} text-right pr-5`;
+  return `${mediaVariants[props.type]} text-right`;
 });
 
+const paddingTopStyle = computed(()=> {
+   if(props.type != "neutral"){
+    return `px-5 py-2`
+   }
+})
+
+const paddingBottomStyle = computed(()=> {
+   if(props.type != "neutral"){
+    return `pr-5`
+   }
+})
+const boxPaddingStyle = computed(()=> {
+   if(props.type != "neutral"){
+    return `px-5`
+   }
+})
+
 const containerStyle = computed(() => {
   if (hasActions.value || hasIntentions.value || props.title) {
-    return `rounded-lg overflow-hidden ${
+    return ` overflow-hidden ${
       props.flat ? "" : "shadow-md"
-    } flex flex-col justify-between h-full`;
+    } flex flex-col justify-start h-full`;
   }
   return `flex flex-col justify-between`;
 });
 
+
+
 // type, taxonomyLevel, courseCode, courseTitle, title, subtitle, height, src, color, synchrone
 
 const { title, hideIcon } = toRefs(props);
@@ -74,34 +93,33 @@ const { title, hideIcon } = toRefs(props);
 <template>
   <div :class="containerStyle">
     <div
-      :class="`${topBarStyle}`"
-      class="dark:base-dark"
+      :class="`${topBarStyle} ${paddingTopStyle} dark:base-dark`"
       v-if="title || mandateLevel"
     >
       <!-- <EpIcon :size="24" :icon-path="mdiBookOpenVariant"></EpIcon> -->
       <h3>
-        <EpIcon v-if="!hideIcon" :iconPath="renderIcon" size="24"></EpIcon>
+        <EpIcon v-if="!hideIcon" :iconPath="renderIcon" size="24" class="mr-2"></EpIcon>
         <span class="font-bold align-middle">{{ title }}</span>
       </h3>
       <EpScope v-if="mandateLevel" :mandateLevel="mandateLevel"></EpScope>
     </div>
-    <div class="px-5 dark:base-dark dark:text-white">
-      <div class="py-2" v-if="hasIntentions">
+    <div :class="`${boxPaddingStyle} dark:base-dark dark:text-white`">
+      <div class="py-4" v-if="hasIntentions">
         <!-- <EpIcon :size="24" :icon-path="mdiInformationOutline"></EpIcon> -->
         <h4
           v-if="labelIntentions"
-          class="font-semibold mb-2 text-sm uppercase tracking-wide text-gray-500 dark:text-white"
+          class="font-light text-sm pb-1 tracking-wide dark:text-white"
         >
           {{ labelIntentions }}
         </h4>
         <slot name="intentions"></slot>
         <EpDivider />
       </div>
-      <div class="py-2">
+      <div class="pt-2">
         <slot name="content"></slot>
       </div>
     </div>
-    <div :class="bottomBarStyle" class="dark:base-dark" v-if="hasActions">
+    <div :class="`${bottomBarStyle} ${paddingBottomStyle}`" class="dark:base-dark" v-if="hasActions">
       <slot name="actions"></slot>
     </div>
   </div>

package/src/components/educationals/EpReading.vue

@@ -45,7 +45,7 @@ const props = withDefaults(defineProps<Props>(), {
   icon: "mdiBookmarkBox",
   hideCover: false,
   compact: false,
-  type:"base",
+  type:"neutral",
   hideIcon:false,
   labelIn:"dans",
   labelRead:"Lire",
@@ -152,7 +152,9 @@ const errorImg = (event:Event)=>{
           </div>
         </template>
         <template #actions>
-          <EpBtn :color="type=='base'?'text-gray-700':'text-white dark:text-black'" :type="type" :href="url" v-if="url">{{labelRead}}</EpBtn>
+          <EpBtn text :href="url" v-if="url" type="primary">
+              <EpIcon :size="20" :icon-path="mdiOpenInNew" ></EpIcon> {{labelRead}}
+            </EpBtn>
         </template>
       </EpEdu>
     </div>

package/src/components/educationals/EpResource.vue

@@ -11,7 +11,7 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-   type:'base'
+   type:'neutral'
 })
 
 const resourceInfo = computed(()=>{