ep-lib-ts 1.0.24 → 1.0.26

package/src/components/interactions/EpContentSlider.vue

@@ -1,142 +1,177 @@
 <script setup lang="ts">
-import { ref, computed, defineAsyncComponent, toRefs, Suspense } from "vue";
-import { type SlidesType } from "../../types/Slides"
+import { ref, computed, defineAsyncComponent, watch, onMounted, nextTick, ComponentPublicInstance } from "vue";
+import { type SlidesType } from "../../types/Slides";
 import { useComponent } from "../../composables/useComponent";
 import { useRenderText } from "../../composables/useRenderText";
-import { mdiArrowLeft } from "@mdi/js";
-import { mdiArrowRight } from "@mdi/js";
+import { mdiArrowLeft, mdiArrowRight } from "@mdi/js";
 import EpIcon from "../basics/EpIcon.vue";
-
+import EpSkeleton from "../signages/EpSkeleton.vue";
 
 interface Props {
 	slides: SlidesType[];
-	loading?:string,
-	noData?:string
+	loading?: string;
+	noData?: string;
+	mediaPosition?: 'left' | 'right';
 }
 
 const props = withDefaults(defineProps<Props>(), {
-	loading:"...loading",
-	noData:"no data"
-
-})
-
+	loading: "...loading",
+	noData: "No data available",
+	mediaPosition: "left",
+});
 
-const currentIndex = ref<number>(0)
+const currentIndex = ref(0);
+const isLoading = ref(false);
+const slideRefs = ref<(HTMLElement | null)[]>([]);
 
 const currentSlide = computed(() => {
-	if (!props.slides) {
-		return { title: props.noData, img: '', uid: 2, content: "", component:null }
+	if (!props.slides || props.slides.length === 0) {
+		return { title: props.noData, img: '', uid: 2, content: "", component: null };
 	}
-	if (props.slides.length === 0) {
-		return { title: props.noData, img: '', uid: 2, content: "", component:null }
-	}
-	return props.slides[currentIndex.value]
-})
+	return props.slides[currentIndex.value];
+});
 
 const hasTextContent = computed(() => {
-	return currentSlide.value.content.trim().length > 0
-})
+	const content = currentSlide.value.content;
+	return content && content.trim().length > 0;
+});
 
 const currentSlideMediaContent = computed(() => {
 	if (currentSlide.value.img) {
-		return defineAsyncComponent(() => import('../basics/EpImg.vue'))
+		return defineAsyncComponent(() => import('../basics/EpImg.vue'));
 	}
 	if (currentSlide.value.component) {
-		const componentToLoad = useComponent(currentSlide.value.component?.type)
-		return defineAsyncComponent(() => import(`../${componentToLoad.path}/${componentToLoad.name}.vue`))
+		const componentToLoad = useComponent(currentSlide.value.component?.type);
+		return defineAsyncComponent(() => import(`../${componentToLoad.path}/${componentToLoad.name}.vue`));
 	}
-	return null
-})
+	return null;
+});
+
+const max = computed(() => currentIndex.value < props.slides.length - 1);
 
-const max = computed(() => (currentIndex.value + 1) < props.slides.length)
-const min = computed(() => (currentIndex.value + 1) > 1)
-const next = () => {
+const next = async () => {
+	isLoading.value = true;
 	if (max.value) {
-		currentIndex.value += 1
+		currentIndex.value += 1;
 	}
-}
+	isLoading.value = false;
+};
 
-const prev = () => {
-	if (min.value) {
-		currentIndex.value -= 1
+const prev = async () => {
+	isLoading.value = true;
+	if (currentIndex.value > 0) {
+		currentIndex.value -= 1;
 	}
-}
+	isLoading.value = false;
+};
 
-const goTo = (index: number) => {
-	currentIndex.value = index
-}
-
-const { slides } = toRefs(props)
+const goTo = (index: number) => currentIndex.value = index;
 
+const updateSlideRefs = (el: Element | ComponentPublicInstance | null, index: number) => {
+	if (el instanceof HTMLElement) {
+		slideRefs.value[index] = el;
+	} else {
+		slideRefs.value[index] = null;
+	}
+};
 </script>
 
+
 <template>
-	<div class="bg-stone-100 dark:bg-dark p-5 w-full md:h-custom overflow-hidden dark:border dark:border-base">
-		<div class="flex justify-between border-b border-black dark:border-white w-auto">
-			<h5 class="text-lg border-b-4 border-black dark:border-white">
-				{{ currentSlide.title }}
-			</h5>
-			<div class="md:flex items-end pb-1" v-if="slides">
-				<template v-for="(slide, i) in slides.length" :key="`slide-index-${i}`">
-					<span
-						:class="`cursor-pointer h-4 w-4 ml-1 inline-block ${i === currentIndex ? 'bg-primary' : 'bg-base-dark dark:bg-base-light'}`"
-						@click="goTo(i)"></span>
-				</template>
-				<span class="ml-2 text-xs">({{ (currentIndex + 1) }}/{{ slides.length }})</span>
-				<button :class="`px-2 ${min ? '' : 'opacity-5'}`" @click="prev">
-					<EpIcon :icon-path="mdiArrowLeft" size="24"></EpIcon>
-				</button>
-				<button :class="`mx-2 ${max ? '' : 'opacity-5'}`" @click="next">
-					<EpIcon :icon-path="mdiArrowRight" size="24"></EpIcon>
-				</button>
+	<div
+		class="relative h-[600px] flex flex-col p-6 bg-zinc-100 dark:bg-dark w-full overflow-hidden rounded-lg shadow-xl">
+		<!-- Header section with navigation -->
+		<div class="flex justify-between items-center pb-3 mb-3 border-b-2 border-gray-600 dark:border-gray-300">
+			<h5 class="text-xl font-bold text-primary">{{ currentSlide.title }}</h5>
+			<div class="flex items-center space-x-3" v-if="props.slides.length">
+				<!-- Bullets -->
+				<div class="flex space-x-2">
+					<span v-for="(_, i) in props.slides.length" :key="`slide-index-${i}`" @click="goTo(i)" :class="[
+						'w-2 h-2 rounded-full cursor-pointer',
+						i === currentIndex ? 'bg-primary' : 'bg-gray-400'
+					]"></span>
+				</div>
+
+				<!-- Controls -->
+				<div class="flex space-x-2">
+					<button class="nav-btn" @click="prev" :disabled="currentIndex === 0">
+						<EpIcon :icon-path="mdiArrowLeft" size="24" />
+					</button>
+					<button class="nav-btn" @click="next" :disabled="!max">
+						<EpIcon :icon-path="mdiArrowRight" size="24" />
+					</button>
+				</div>
+				<span class="text-sm">{{ currentIndex + 1 }} / {{ props.slides.length }}</span>
 			</div>
 		</div>
-		<div class="">
-			<Transition name="list" mode="out-in">
-				<div class="md:flex p-4" :key="currentSlide.uid">
-					<div :class="`w-full ${hasTextContent ? 'mr-5' : ''}`" v-if="currentSlideMediaContent">
-						<div v-if="currentSlide.img" class="p-4">
-							<component :is="currentSlideMediaContent" :src="currentSlide.img" cols="11"></component>
-						</div>
-						<div v-else-if="currentSlide.component">
+
+		<!-- Slider content -->
+		<div class="flex flex-grow items-center justify-center overflow-hidden mb-4">
+			<transition name="slide-fade" mode="out-in">
+				<div v-if="props.slides.length > 0" :key="currentSlide.uid"
+					:ref="el => updateSlideRefs(el, currentIndex)" :class="[
+						'flex w-full h-full gap-2',
+						hasTextContent ? (props.mediaPosition === 'left' ? 'flex-row' : 'flex-row-reverse'): 'justify-center'
+					]">
+					<div v-if="isLoading" class="flex items-center justify-center w-full h-full">
+						<EpSkeleton :type="'rectangle'" :height="100" :width="100" :loading="true" />
+					</div>
+
+					<div v-else-if="!hasTextContent && !currentSlideMediaContent"
+						class="flex items-center justify-center w-full h-full">
+						<EpSkeleton class="p-4" :type="'rectangle'" :height="150" :width="150" :loading="true" />
+					</div>
+
+					<!-- Media content -->
+					<div v-if="currentSlideMediaContent" class="flex items-center justify-center p-2 md:w-1/2 w-full"
+						style="max-height: 100%;">
+
+						<!--condition is img-->
+						<template v-if="currentSlide.img">
+							<component :is="currentSlideMediaContent" :src="currentSlide.img" cols="11"
+								class="max-h-full max-w-full object-contain" :style="{
+									height: 'auto',
+									maxHeight: '100%',
+									objectFit: 'contain',
+									margin: 'auto',
+								}"></component>
+						</template>
+						<template v-else-if="currentSlide.component">
 							<Suspense>
-								
-								<component :is="currentSlideMediaContent" v-bind="{ ...currentSlide.component.data }">
-							    </component>
+								<component :is="currentSlideMediaContent" v-bind="{ ...currentSlide.component.data }"
+									cols="11" class="max-h-full max-w-full object-contain" :style="{
+										height: 'auto',
+										maxHeight: '100%',
+										objectFit: 'contain',
+										margin: 'auto',
+									}">
+								</component>
 								<template #fallback>
 									{{ loading }}
 								</template>
 							</Suspense>
-							
-						</div>
+						</template>
+
+
 
 					</div>
-					<div class="w-full pt-4" v-if="hasTextContent">
-						<div class="overflow-y-auto h-96 p-custom" v-html="useRenderText(currentSlide.content)"></div>
-					</div>
-				</div>
-			</Transition>
-		</div>
-	</div>
-</template>
-<style>
-.list-enter-active,
-.list-leave-active {
-	transition: all 0.5s ease;
-}
 
-.list-enter-from,
-.list-leave-to {
-	opacity: 0;
-	transform: translateX(30px);
-}
 
-.h-custom {
-	height: 30rem;
-}
 
-.p-custom p {
-	margin-bottom: 1em;
-}
-</style>
+					<!-- Text content -->
+					<div v-if="hasTextContent" class="flex-1 p-2 overflow-y-auto md:w-1/2 w-full">
+						<div v-html="useRenderText(currentSlide.content)"
+							class="text-base leading-relaxed text-black dark:text-white">
+						</div>
+					</div>
+				</div>
+			</transition>
+		</div>
 
+		<!-- Progress bar -->
+		<div class="mt-2 h-2 w-full bg-gray-300 rounded-full">
+			<div class="bg-primary h-full rounded-full transition-all duration-300"
+				:style="{ width: ((currentIndex + 1) / props.slides.length) * 100 + '%' }"></div>
+		</div>
+	</div>
+</template>

package/src/components/interactions/EpDarkmode.vue

@@ -1,62 +1,44 @@
 <script setup lang="ts">
     import { ref, onMounted } from 'vue';
     import { useColorMode } from '@vueuse/core'
+
     type UserTheme = 'light' | 'dark';
     const mode = useColorMode()
     const emit = defineEmits<{
-        (e: "update:userMode", userMode:UserTheme): void;
+        (e: "update:userMode", userMode: UserTheme): void;
         }>();
 
+    const getTheme = (): UserTheme => {
+        return (localStorage.getItem('user-theme') as UserTheme) || 'light';
+    };
+
+    const userTheme = ref<UserTheme>(getTheme());
 
     const setTheme = (theme: UserTheme) => {
         localStorage.setItem('user-theme', theme);
-        mode.value = theme
-        userTheme.value = theme;
+        mode.value = theme;
         document.documentElement.className = theme;
-    };
-
-    const getTheme = (): UserTheme => {
-        const localValue = localStorage.getItem('user-theme') as UserTheme;
-        mode.value = localValue
-        return localValue
+        userTheme.value = theme;
+        emit('update:userMode', theme);
     };
 
     const toggleTheme = (): void => {
-        const activeTheme = localStorage.getItem('user-theme');
-        if (activeTheme === 'light') {
-            setTheme('dark');
-        } else {
-            setTheme('light');
-        }
-        emit('update:userMode', userTheme.value)
-    };
-
-    const getMediaPreference = (): UserTheme => {
-        const hasDarkPreference = window.matchMedia('(prefers-color-scheme: dark)').matches;
-        if (hasDarkPreference) {
-            return 'dark';
-        } else {
-            return 'light';
-        }
+        const nextTheme = userTheme.value === 'light' ? 'dark' : 'light';
+        setTheme(nextTheme);
     };
 
-    
-
-    const userTheme = ref<UserTheme>(getTheme() || getMediaPreference());
-
     onMounted(() => {
-        setTheme(userTheme.value)
-        emit("update:userMode", userTheme.value)
+        setTheme(userTheme.value);
     });
 </script>
 
 <template> 
-<button @click="toggleTheme">
-   <span v-if="userTheme === 'dark'">
-    ☀️
-    </span>
-    <span v-if="userTheme === 'light'">
-    🌙
-    </span> 
-  </button>
-</template>
+<button @click="toggleTheme" class="p-2 rounded-full transition-colors duration-300 hover:bg-gray-700 hover:scale-105">
+   <span v-if="userTheme === 'dark'" title="Switch to light mode">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sun"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>
+   </span>
+   <span v-else title="Switch to dark mode">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-moon"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>
+   </span>
+</button>
+</template>

package/src/components/signages/EpHeader.vue

@@ -5,7 +5,7 @@ import { mdiCast } from "@mdi/js";
 import { mdiTimerOutline } from "@mdi/js";
 import { mdiChairSchool } from "@mdi/js";
 import { mdiChevronDown } from "@mdi/js";
-import SvgFilter from '../tools/SvgFilter.vue'
+import SvgFilter from "../tools/SvgFilter.vue";
 import EpIcon from "../basics/EpIcon.vue";
 import EpChip from "../basics/EpChip.vue";
 
@@ -19,13 +19,14 @@ interface Props {
   big?: boolean | null;
   src?: string | null;
   synchrone?: boolean;
+  hasImg?: boolean;
   duration?: string | null;
   assessment?: string | null;
-  headerImgColor?:string | null;
-  labels?:{
-    synchrone?: string;   
-    formatif?: string;   
-  }
+  headerImgColor?: string | null;
+  labels?: {
+    synchrone?: string;
+    formatif?: string;
+  };
 }
 
 // type, taxonomyLevel, courseCode, courseTitle, title, subtitle, height, src, color, synchrone
@@ -37,17 +38,17 @@ const props = withDefaults(defineProps<Props>(), {
   src: null,
   big: false,
   synchrone: false,
+  hasImg: true,
   duration: null,
   assessment: null,
-  labels:()=>{
+  labels: () => {
     return {
-        synchrone:"Synchrone",
-        formatif:"Formatif"
-      }
-    }
+      synchrone: "Synchrone",
+      formatif: "Formatif",
+    };
+  },
 });
 
-
 const colorText = computed(() => {
   return props.color;
 });
@@ -72,51 +73,72 @@ const bgImg = computed(() => {
 });
 
 const emit = defineEmits<{
-  (e:"clicked"):void
-}>()
+  (e: "clicked"): void;
+}>();
 
-
-const clickScroll = ():void => {
-      emit('clicked')
-}
+const clickScroll = (): void => {
+  emit("clicked");
+};
 
 const { title, headerImgColor, big } = toRefs(props);
 </script>
 
 <template>
-  <section :class="`${big?'h-screen ':''}items-center overflow-hidden relative `" ref="el">
-    <div :class="styles" :style="`background-image:url('${bgImg}'); filter:url(#${headerImgColor});`"></div>
-    
-      <div :class="`relative ${big?'mb-36':''} h-full items-end`">
-        <div class="flex md:justify-end justify-center pt-5">
-          <EpChip v-if="synchrone" :prependIcon="mdiCast">{{labels.synchrone}}</EpChip>
-          <EpChip v-if="duration"  :prependIcon="mdiTimerOutline"> {{ duration }}</EpChip>
-          <EpChip v-if="assessment" :prependIcon="mdiChairSchool">{{labels.formatif}}</EpChip>
-        </div>
-        <div class="flex w-full py-24 grow flex h-full items-center">
-          <div class="mx-auto w-8/12">
-            <div v-if="title || subtitle"
-              class="p-4 md:items-center backdrop-blur-md backdrop-brightness-50 backdrop-opacity-75 rounded"
-            >
-              <div class="text-center md:text-left">
-                  <h1 v-if="title" class="text-xl font-medium text-white sm:text-3xl">
-                    {{ title }}
-                  </h1>
-                  <h2 v-if="subtitle" class="max-w-xl mt-4 text-xl text-white contrast-50">
-                    {{ subtitle }}
-                  </h2>
-              </div>
+  <header
+    v-if="hasImg"
+    :class="`${big ? 'h-screen ' : ''}items-center overflow-hidden relative `"
+    ref="el"
+  >
+    <div
+      :class="styles"
+      :style="`background-image:url('${bgImg}'); filter:url(#${headerImgColor});`"
+    ></div>
+
+    <div :class="`relative ${big ? 'mb-36' : ''} h-full items-end`">
+      <div class="flex md:justify-end justify-center pt-5">
+        <EpChip v-if="synchrone" :prependIcon="mdiCast">{{ labels.synchrone }}</EpChip>
+        <EpChip v-if="duration" :prependIcon="mdiTimerOutline"> {{ duration }}</EpChip>
+        <EpChip v-if="assessment" :prependIcon="mdiChairSchool">{{
+          labels.formatif
+        }}</EpChip>
+      </div>
+      <div class="flex w-full py-24 grow flex h-full items-center">
+        <div class="mx-auto w-8/12">
+          <div
+            v-if="title || subtitle"
+            class="p-4 md:items-center backdrop-blur-md backdrop-brightness-50 backdrop-opacity-75 rounded"
+          >
+            <div class="text-center md:text-left">
+              <h1 v-if="title" class="text-xl font-medium text-white sm:text-3xl">
+                {{ title }}
+              </h1>
+              <h2 v-if="subtitle" class="max-w-xl mt-4 text-xl text-white contrast-50">
+                {{ subtitle }}
+              </h2>
             </div>
           </div>
         </div>
       </div>
+    </div>
 
-      <div v-if="props.big" class="animate-bounce absolute bottom-10 left-1/2">
-        <div class="mx-auto w-12 bg-white dark:text-black rounded-full p-2" @click="clickScroll">
-          <EpIcon :iconPath="mdiChevronDown" size="32"></EpIcon>
-        </div>
+    <div v-if="props.big" class="animate-bounce absolute bottom-10 left-1/2">
+      <div
+        class="mx-auto w-12 bg-white dark:text-black rounded-full p-2"
+        @click="clickScroll"
+      >
+        <EpIcon :iconPath="mdiChevronDown" size="32"></EpIcon>
       </div>
+    </div>
     <SvgFilter></SvgFilter>
-  </section>
-
+  </header>
+  <header v-else>
+    <div class="text-center md:text-left mt-16 mb-32">
+      <h1 v-if="title" class="text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
+        {{ title }}
+      </h1>
+      <h2 v-if="subtitle" class="w-1/2 mt-4 text-gray-500 dark:text-gray-300">
+        {{ subtitle }}
+      </h2>
+    </div>
+  </header>
 </template>

package/src/components/signages/EpSkeleton.vue

@@ -8,14 +8,15 @@ interface Props {
   height?:number;
   width?:number;
   animation?:string;
+  loading?:boolean;
 }
 
-  // define parameter
   const props = withDefaults(defineProps<Props>(), {
     type:'rectangle',
     width:100,
     height:10,
-    animation:"animate-pulse" 
+    animation:"animate-pulse",
+    loading:true
   }) 
  
   const width =  props.width/4 +"rem" 
@@ -25,8 +26,11 @@ interface Props {
 </script>
 <template>
     <div>       
-        <div class="flex p-2" :class = "animation" >
-          <div  v-if="props.type === 'circle'">
+        <div class="flex p-2" :class="animation">
+          <div v-if="props.loading">
+            <span class="shape block bg-gray-200 rounded-full dark:bg-gray-300"></span>           
+          </div>
+          <div v-else-if="props.type === 'circle'">
             <span class="shape block bg-gray-200 rounded-full dark:bg-gray-300"></span>           
           </div>
           <div v-else-if="props.type === 'rectangle'">

package/dist/BgAudio-BjiZt_j3.js

@@ -1,4 +0,0 @@
-import { S as f } from "./index-nKuHdZUR.js";
-export {
-  f as default
-};

package/dist/DisplayBox-DZa_LWHr.js

@@ -1,4 +0,0 @@
-import { T as f } from "./index-nKuHdZUR.js";
-export {
-  f as default
-};

package/dist/EpAlert-CIOmWSIc.js

@@ -1,4 +0,0 @@
-import { O as f } from "./index-nKuHdZUR.js";
-export {
-  f as default
-};

package/dist/EpAudio-B3cP0yQP.js

@@ -1,4 +0,0 @@
-import { E as f } from "./index-nKuHdZUR.js";
-export {
-  f as default
-};

package/dist/EpBadge-Rn_GnxQe.js

@@ -1,4 +0,0 @@
-import { c as f } from "./index-nKuHdZUR.js";
-export {
-  f as default
-};

package/dist/EpBarChart-D3XffoUi.js

@@ -1,4 +0,0 @@
-import { o } from "./index-nKuHdZUR.js";
-export {
-  o as default
-};

package/dist/EpBtn-DHEEdI-A.js

@@ -1,4 +0,0 @@
-import { d as f } from "./index-nKuHdZUR.js";
-export {
-  f as default
-};

package/dist/EpCard-CKZOUaVF.js

@@ -1,4 +0,0 @@
-import { e } from "./index-nKuHdZUR.js";
-export {
-  e as default
-};

package/dist/EpChip-ClMvRgwG.js

@@ -1,4 +0,0 @@
-import { f } from "./index-nKuHdZUR.js";
-export {
-  f as default
-};

package/dist/EpContentSlider-BPQRgnys.js

@@ -1,4 +0,0 @@
-import { z as f } from "./index-nKuHdZUR.js";
-export {
-  f as default
-};

package/dist/EpDarkmode-4w7onxHI.js

@@ -1,26 +0,0 @@
-import { defineComponent as i, ref as h, onMounted as p, openBlock as r, createElementBlock as a, createCommentVNode as c } from "vue";
-import { A as g } from "./index-nKuHdZUR.js";
-const f = { key: 0 }, k = { key: 1 }, C = /* @__PURE__ */ i({
-  __name: "EpDarkmode",
-  emits: ["update:userMode"],
-  setup(_, { emit: l }) {
-    const s = g(), n = l, o = (e) => {
-      localStorage.setItem("user-theme", e), s.value = e, t.value = e, document.documentElement.className = e;
-    }, u = () => {
-      const e = localStorage.getItem("user-theme");
-      return s.value = e, e;
-    }, m = () => {
-      const e = localStorage.getItem("user-theme");
-      o(e === "light" ? "dark" : "light"), n("update:userMode", t.value);
-    }, d = () => window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light", t = h(u() || d());
-    return p(() => {
-      o(t.value), n("update:userMode", t.value);
-    }), (e, v) => (r(), a("button", { onClick: m }, [
-      t.value === "dark" ? (r(), a("span", f, " ☀️ ")) : c("", !0),
-      t.value === "light" ? (r(), a("span", k, " 🌙 ")) : c("", !0)
-    ]));
-  }
-});
-export {
-  C as default
-};

package/dist/EpDivider-CAdkeSwX.js

@@ -1,4 +0,0 @@
-import { g as f } from "./index-nKuHdZUR.js";
-export {
-  f as default
-};

package/dist/EpEdu-Ccx2WVen.js

@@ -1,4 +0,0 @@
-import { s } from "./index-nKuHdZUR.js";
-export {
-  s as default
-};