ep-lib-ts 0.1.30 → 0.1.33

package/dist/index.d.ts

@@ -37,4 +37,5 @@ import EpVideoPanopto from './components/medias/EpVideoPanopto.vue';
 import EpAlert from './components/signages/EpAlert.vue';
 import EpHeader from './components/signages/EpHeader.vue';
 import EpQuote from './components/signages/EpQuote.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, };
+import 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 };

package/dist/style.css

@@ -1 +1 @@
-.content[data-v-ab122c9c]{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-049ea2df],.v-leave-active[data-v-049ea2df]{transition:opacity .5s ease}.v-enter-from[data-v-049ea2df],.v-leave-to[data-v-049ea2df]{opacity:0}.katex[data-v-24ff8b28]{font-size:1.3em}.content[data-v-4cca257a]{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)}
+.content[data-v-ab122c9c]{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-63d168f1],.v-leave-active[data-v-63d168f1]{transition:opacity .5s ease}.v-enter-from[data-v-63d168f1],.v-leave-to[data-v-63d168f1]{opacity:0}.katex[data-v-24ff8b28]{font-size:1.3em}.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}

package/dist/types/Avatar.d.ts

@@ -0,0 +1,18 @@
+export declare const typeAvatar: {
+    circle: {
+        small: string;
+        middle: string;
+        big: string;
+    };
+    square: {
+        small: string;
+        middle: string;
+        big: string;
+    };
+    rounded: {
+        small: string;
+        middle: string;
+        big: string;
+    };
+};
+export type TypeAvatar = keyof typeof typeAvatar;

package/dist/types/Badge.d.ts

@@ -0,0 +1,23 @@
+export declare const typeBadge: {
+    top_left: {
+        default: string;
+        dot: string;
+        hide: string;
+    };
+    top_right: {
+        default: string;
+        dot: string;
+        hide: string;
+    };
+    bottom_left: {
+        default: string;
+        dot: string;
+        hide: string;
+    };
+    bottom_right: {
+        default: string;
+        dot: string;
+        hide: string;
+    };
+};
+export type TypeBadge = keyof typeof typeBadge;

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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ep-lib-ts",
   "private": false,
-  "version": "0.1.30",
+  "version": "0.1.33",
   "files": [
     "dist",
     "src/components/"
@@ -50,7 +50,7 @@
     "typescript": "^5.2.0-dev.20230801",
     "vite": "^4.1.0",
     "vite-plugin-dts": "^3.5.2",
-    "vue-tsc": "^1.8.19"
+    "vue-tsc": "^1.8.22"
   },
   "peerDependencies": {
     "vue": "^3.2.45"

package/src/components/basics/EpAvatar.vue

@@ -0,0 +1,72 @@
+
+<script setup lang="ts">
+
+    import { toRefs, computed } from "vue";
+    import { TypeAvatar, typeAvatar } from   "../../types/Avatar";  //"../../types/Avatar";
+    
+    type Color = "primary"|"secondary"|"accent"|"error"|"warning"|"success"|"info"|"question"|"tip";
+    type Variant = "circle"|"square"|"rounded";
+    type Size = "small"|"middle"|"big";
+ 
+
+    interface Props {  
+        src?:string;
+        alt?:string;     
+        color?:Color;
+        size?:Size;
+        variant?:Variant;  
+        name?:string
+    }
+
+    // define parameter and default valule
+    const props = withDefaults(defineProps<Props>(), {      
+        src:"",
+        alt:"",
+        color:"primary",
+        size:"small",
+        variant:"circle" ,
+        name:""
+    }) 
+    
+
+    const style = computed(()=>{ 
+        return props.variant
+    })   
+
+    const size = computed(()=>{ 
+        return props.size
+    })
+
+    const final_style = computed(()=>{      
+        return `${typeAvatar[style.value]?.[size.value]}`
+    })
+
+
+    const bgcolor  = computed(()=>{   
+        return " bg-"+ props.color
+    })
+
+    const final_name  = computed(()=>{   
+        if (props.name.length>2){
+          return  props.name.slice(0,2)
+        }
+        else{
+          return props.name
+        }        
+    })   
+    
+
+</script>
+<template>  
+    <div >   
+      <div  v-if="props.src != ''">
+           <img :src=props.src :alt=props.alt  :class="`${final_style} `" >    
+      </div>
+      <div v-else-if="props.src == ''">
+        <div  :class="`${final_style}  ${bgcolor}  justify-center font-bold text-white flex items-center` " >  
+          {{final_name}}          
+        </div>   
+     </div>
+    </div>
+</template>
+

package/src/components/basics/EpText.vue

@@ -78,7 +78,7 @@ const renderText = computed(() => {
         //const idsRelation = foundedRelations.map((x) => x.id);
         const termsRelation = foundedRelations.map((x) => x.term);
         const variation = term.variation;
-        const hasImge = term.src ? term.src : "";
+        const hasImge = term.img ? term.img : "";
         const replaceWord = `<div style="display:inline"><EpTerm term="${term.term}" word="${render_word}" variations="${variation}" graminfo="${term.graminfo}" src="${hasImge}" domain="${term.domain}" relations="${termsRelation}"> ${term.definition}</EpTerm> </div>`;
         //replace output string
         newStr = newStr.replace(word, replaceWord);

package/src/components/educationals/EpEdu.vue

@@ -96,6 +96,7 @@ const { title, hideIcon } = toRefs(props);
     </div>
     <div :class="bottomBarStyle" v-if="hasActions">
        <slot name="actions"></slot>
+       
     </div>
   </div>
 </template>

package/src/components/educationals/EpReading.vue

@@ -194,14 +194,14 @@ const {
                           <div class="flex-1 py-2" v-if="hasDetails">
                             <p class="font-medium">
                               <span class="text-sm italic pr-1" v-if="author">par</span>
-                              <span class="font-bold" v-if="author">{{ author }}</span>
+                              <span class="font-bold mr-2" v-if="author">{{ author }}</span>
                               <span v-if="year">({{ year }})</span>
                               <span v-if="year && editor">, </span>
                               <span v-if="editor">{{ editor }}</span>
                             </p>
                             <p v-if="container">
                               <span class="text-sm italic pr-1">dans</span>
-                              <span class="">{{ container }}</span>
+                              <span>{{ container }}</span>
                             </p>
                           </div>
                           <div

package/src/components/interactions/EpQuestion.vue

@@ -137,7 +137,7 @@ const { title, intentions, hideIcon, question, src } = toRefs(props);
         />
 
         <div class="mb-6">
-          <ol>
+          <ol class="list-none">
             <li v-for="(answer, i) in answers" :key="answer.uid">
               <EpRadio
                 :label="`${typeList(i)}. ${answer.text}`"

package/src/components/interactions/EpTooltip.vue

@@ -0,0 +1,164 @@
+
+<script setup lang="ts">
+
+    import { computed } from "vue";
+    import { TypeTooltip, typeTooltip } from   "../../types/Tooltip";  //"../../types/Tooltip";
+
+    type Place = "top_start"|"top"|"top_end"|"bottom_start"|"bottom"|"bottom_end"|"left_start"|"left"|"left_end"|"right_start" | "right"|"right_end";
+    type Mode = "light"|"dark";
+    
+
+    interface Props {  
+        text:string;
+        styles?:Mode;
+        placement?:Place
+        type: TypeTooltip;
+        arrow:string
+    }
+
+    // define parameter and default valule
+    const props = withDefaults(defineProps<Props>(), {
+        styles:'light',
+        placement:'top',
+        arrow:'none',  
+    }) 
+    //const { arrowstyle } =toRefs<TypeTooltip>(props)
+   
+
+    const finalType = computed(()=>{ 
+        return props.placement
+        })
+
+    const arrowStyle = computed(()=>{
+        if(props.arrow =="arrow"){        
+            if(props.styles =='dark'){
+                return  'arrowdark' 
+            }
+            else {
+                return 'arrow'
+            }
+        }   
+        else{
+            if(props.styles =='light'){
+                return  'default' 
+            }
+            else {
+                return 'dark'
+            }
+        }  
+        })
+   
+    const finalStyles = computed(()=>{
+        return `${typeTooltip[finalType.value]?.[arrowStyle.value]}`
+   
+    })
+    
+
+</script>
+<template>  
+    <div class="group relative w-max "> 
+        <slot></slot>  
+        <span  :class="`pointer-events-none absolute  w-max rounded  px-2 py-1 text-sm font-medium  opacity-0 shadow transition-opacity group-hover:opacity-100  ${ finalStyles} `"  >{{ text }}</span> 
+    </div>
+</template>
+
+<style >   
+    .arrow-light-top::before {
+        content: " ";
+        position: absolute;
+        top: 100%; /* At the bottom of the tooltip */
+        left: 50%;
+        margin-left: -5px;
+        border-width: 5px;
+        border-style: solid;
+        border-color: rgba(0, 0, 0, 0.2) transparent transparent transparent ;
+    }
+    .arrow-dark-top::before {
+        content: " ";
+        position: absolute;
+        top: 100%; /* At the bottom of the tooltip */
+        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: rgba(0, 0, 0, 0.2);
+  
+    }
+    .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: 0px;
+        border-top: 5px solid transparent;
+        border-left: 5px solid #eee;
+        border-bottom: 5px solid transparent;
+        border-left-color: rgba(0, 0, 0, 0.2);
+    }
+ 
+    .arrow-dark-left::before {
+        position: absolute;
+        display: inline-block;
+        left:100%; 
+        top: 50%; 
+        content: '';
+        margin-right: 0px;
+        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: 0px;
+        border-top: 5px solid transparent;
+        border-right: 5px solid #eee;
+        border-bottom: 5px solid transparent;
+        border-right-color: rgba(0, 0, 0, 0.2);
+    }
+ 
+    .arrow-dark-right::before {
+        position: absolute;
+        display: inline-block;
+        right:100%; 
+        top: 50%; 
+        content: '';
+        margin-right: 0px;
+        border-top: 5px solid transparent;
+        border-right: 5px solid black;
+        border-bottom: 5px solid transparent;
+        border-right-color:black transparent transparent transparent ;
+        
+    }
+</style>

package/src/components/medias/EpCarousel.vue

@@ -9,16 +9,16 @@ import EpModal from "../interactions/EpModal.vue";
 import EpImg from "../basics/EpImg.vue";
 
 interface Props {
-  carrouselImg: MediaCarousel[]; 
-  gallery?:boolean;
-  labelRef?:string|null;
-  labelClose?:string|null
+  carrouselImg: MediaCarousel[];
+  gallery?: boolean;
+  labelRef?: string | null;
+  labelClose?: string | null;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  labelClose:"Fermer",
-  labelRef:"Référence",
-  gallery:false
+  labelClose: "Fermer",
+  labelRef: "Référence",
+  gallery: false,
 });
 
 const currentIndex = ref<number>(0);
@@ -50,28 +50,31 @@ const { carrouselImg, labelClose, labelRef } = toRefs(props);
         <EpIcon :icon-path="mdiChevronRightCircleOutline"></EpIcon>
       </button>
     </div>
-    <div class="bg-white shadow-xl p-4 max-w-[800px] mx-auto border-solid">
-      <div class="max-w-[800px] h-[550px] m-auto relative">
+    <div class="bg-white shadow-xl p-4 lg:max-w-[800px] mx-auto border-solid">
+      <!-- <div class="max-w-[800px] h-[550px] m-auto relative">
         <div
-          class="w-full h-full bg-center bg-cover duration-500"
+          class="w-full h-full bg-center duration-500"
           :style="`background-image:url('${carrouselImg[currentIndex].src}')`"
         ></div>
-      </div>
+      </div> -->
+
+      <img :src="carrouselImg[currentIndex].src" alt="image" class="rounded-sm" />
+
       <div v-if="carrouselImg[currentIndex]?.caption" class="mt-2 text-sm text-gray-800">
         {{ carrouselImg[currentIndex].caption }}
       </div>
-      <div v-if="carrouselImg[currentIndex]?.bib" class="flex justify-end">
-        <EpBtn  type="primary" @click="dialog = true" dark>{{ labelRef }}</EpBtn>
+      <div v-if="carrouselImg[currentIndex]?.bib" class="flex justify-end mt-2">
+        <EpBtn type="primary" @click="dialog = true" dark>{{ labelRef }}</EpBtn>
       </div>
     </div>
     <EpModal v-model="dialog" title="Référence">
-         <div v-html="carrouselImg[currentIndex].bib"></div>
-         <div class="flex justify-end">
-           <EpBtn @click="dialog = false" type="primary" dark>{{ labelClose }}</EpBtn>
-         </div>
+      <div v-html="carrouselImg[currentIndex].bib"></div>
+      <div class="flex justify-end">
+        <EpBtn @click="dialog = false" type="primary" dark>{{ labelClose }}</EpBtn>
+      </div>
     </EpModal>
   </div>
-  <div v-else class="flex">
+  <div v-else class="flex flex-wrap">
     <template v-for="image in carrouselImg" :key="`image-${image?.uid}`">
       <EpImg :src="image.src" :bib="image.bib" :caption="image.caption" thumbnail></EpImg>
     </template>

package/src/components/signages/EpBadge.vue

@@ -0,0 +1,82 @@
+
+<script setup lang="ts">
+
+    import { computed } from "vue";
+    import { TypeBadge, typeBadge } from   "../../types/Badge";  //"../../types/Badge";
+
+    type Mode = "default"|"dot";
+    type Color = "primary"|"secondary"|"accent"|"error"|"warning"|"success"|"info"|"question"|"tip";
+    type Visibility = "true"|"false"
+ 
+
+    interface Props {  
+        content:number;
+        mode?:Mode;
+        placement?:TypeBadge
+        visibility:Visibility
+        color:Color
+        maxValue:number
+    }
+
+    // define parameter and default valule
+    const props = withDefaults(defineProps<Props>(), {
+        mode:'default',
+        placement:'top_right',
+        visibility:'true',  
+        color:"primary",
+        maxValue : 0
+   
+    }) 
+
+   // const { badgestyle } = toRefs(props)
+   
+    
+    const finalType = computed(()=>{ 
+        return props.placement
+        })
+
+    const finalContent = computed(()=>{ 
+        if (props.mode =="dot" ){
+            return ""
+        }
+        else if (props.visibility == 'false'){
+            return ""
+        }
+        else if (props.content !=0) {
+            if (props.content > props.maxValue && props.maxValue !=0){
+                return props.maxValue +"+" 
+            }
+            else{
+                return props.content
+            }
+         
+        }
+
+    })
+
+  
+    const badgeStyle = computed(()=>{   
+        if (props.visibility == "true")   {          
+            return props.mode 
+        }  else{
+            return 'hide'   
+        } 
+    })
+    
+    
+    const bgcolor  = computed(()=>{   
+        return "bg-"+ props.color
+    })
+   
+    const finalStyles = computed(()=>{
+        return `${typeBadge[finalType.value]?.[badgeStyle.value]}`
+    })
+    
+
+</script>
+<template>  
+    <div class="group relative w-max "> 
+        <slot></slot>  
+        <div :class="`${finalStyles} ${bgcolor}`">{{ finalContent }}</div> 
+    </div>
+    </template>