ep-lib-ts 0.1.32 → 0.1.34

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.32",
+  "version": "0.1.34",
   "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.25"
   },
   "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/EpList.vue

@@ -0,0 +1,10 @@
+
+<script setup lang="ts">
+</script>
+
+<template>  
+    <ul class ="py-6 px-3 w-1/4 min-w-[180px]  ">               
+        <slot ></slot>       
+    </ul>
+</template>
+

package/src/components/basics/EpListitem.vue

@@ -0,0 +1,70 @@
+
+<script setup lang="ts">
+
+import { computed, useSlots } from "vue";
+
+type Type = "default" | "nested"
+type Disabled="false"|"true"
+
+interface Props {
+    type?: Type;
+    disabled?:Disabled;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    type: 'default',
+    disabled:'false'
+})
+
+const slots = useSlots()
+console.log(slots)
+const hasLeftContent = computed(()=>{
+    return slots.leftContent?true:false
+})
+
+const hasRigthContent = computed(()=>{
+    return slots.rightContent?true:false
+})
+const isNested = computed(()=>{
+    if (props.type=="nested")
+        return "px-10"
+    else
+        return ""   
+})
+const isDisabled = computed(()=>{
+    if (props.disabled=="true")
+        return "opacity-75 text-slate-500 "
+    else
+        return "hover:bg-gray-200 active:bg-gray-300"   
+})
+</script>
+
+<template>
+    <li :class="`flex flex-row flex-nowrap justify-between font-medium items-center py-4  ${isNested} ${isDisabled}`">     
+          <div class="flex items-center">
+                <div v-if="hasLeftContent" class="mr-2 min-w-fit">
+                    <slot name="leftContent"></slot>
+                </div>
+                <div>
+                    <slot></slot>
+                </div> 
+            </div>
+            <div v-if="hasRigthContent"  class="px-2 ">
+                <slot name="rightContent"></slot>
+            </div>   
+    </li>
+
+</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

@@ -115,7 +115,7 @@ 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-1" v-if="author">{{ author }}</span>
                   <span v-if="year">({{ year }})</span>
                   <span v-if="year && editor">, </span>
                   <span v-if="editor">{{ editor }}</span>
@@ -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 v-if="year">({{ year }})</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/forms/EpSwitch.vue

@@ -4,7 +4,7 @@ import { toRefs } from "vue";
 interface Props {
   id?: string;
   label?: string;
-  modelValue?: string;
+  modelValue?: boolean;
   type?: string;
   placeholder?: string;
   disabled?: boolean;
@@ -15,7 +15,7 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   id: "toggle",
   label: "label",
-  modelValue: "",
+  modelValue: false,
   type: "checkbox",
   placeholder: "",
   disabled: false,
@@ -24,9 +24,14 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits<{
-  (e: "update:modelValue", modelValue: string): void;
+  (e: "update:modelValue", modelValue: boolean): void;
 }>();
 
+const onChange = (event:Event) => {
+  const target = event.target as HTMLInputElement
+  emit('update:modelValue', true)
+}
+
 const {
   id,
   label,
@@ -48,6 +53,7 @@ const {
       class="form-checkbox mr-2 mt-[0rem] h-4 w-8 appearance-none rounded-full bg-neutral-200 border-neutral-300 before:pointer-events-none before:absolute before:h-3.5 before:w-3.5 before:rounded-full before:bg-transparent before:content-[''] after:absolute after:z-[2] after:-mt-[0rem] after:h-3.5 after:w-3.5 after:rounded-full after:border-none after:bg-neutral-50 after:shadow-[0_0px_3px_0_rgb(0_0_0_/_7%),_0_2px_2px_0_rgb(0_0_0_/_4%)] after:transition-[background-color_0.2s,transform_0.2s] after:content-[''] checked:bg-none checked:bg-blue-600 checked:after:absolute checked:after:z-[2] checked:after:-mt-[0px] checked:after:ml-[1.0625rem] checked:after:h-3.5 checked:after:w-3.5 checked:after:rounded-full checked:after:border-none checked:after:bg-neutral-100 checked:after:shadow-[0_3px_1px_-2px_rgba(0,0,0,0.2),_0_2px_2px_0_rgba(0,0,0,0.14),_0_1px_5px_0_rgba(0,0,0,0.12)] checked:after:transition-[background-color_0.2s,transform_0.2s] checked:after:content-[''] hover:cursor-pointer focus:outline-none focus:ring-0 focus:before:scale-75 focus:before:opacity-[0.12] focus:before:mt-[0.1rem] focus:before:shadow-[3px_-1px_0px_13px_rgba(0,0,0,0.6)] focus:before:transition-[box-shadow_0.2s,transform_0.2s] focus:after:absolute focus:after:z-[1] focus:after:block focus:after:h-3.5 focus:after:w-3.5 focus:after:-mt-[0rem] focus:after:rounded-full focus:after:content-[''] checked:focus:border-neutral-200 checked:focus:bg-blue-600 checked:focus:before:ml-[1rem] checked:focus:before:mt-[0.1rem] checked:focus:before:scale-75 checked:focus:before:shadow-[3px_-1px_0px_13px_#3b71ca] checked:focus:before:transition-[box-shadow_0.2s,transform_0.2s] dark:bg-neutral-600 dark:after:bg-neutral-400 dark:checked:bg-blue-600 dark:checked:after:bg-blue-600 dark:focus:before:shadow-[3px_-1px_0px_13px_rgba(255,255,255,0.4)] dark:checked:focus:before:shadow-[3px_-1px_0px_13px_#3b71ca] disabled:opacity-40 disabled:cursor-not-allowed"
       role="switch"
       :disabled="disabled"
+      @change="onChange"
     />
     <label class="inline-block pl-[0.15rem] hover:cursor-pointer" :for="id"
       >Default switch checkbox input</label

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>