ep-lib-ts 1.0.55 → 1.0.57

package/src/components/interactions/EpAccordeon.vue

@@ -1,91 +0,0 @@
-<script setup lang="ts">
-import { ref, toRefs, onMounted, computed } from "vue";
-import EpIcon from "../basics/EpIcon.vue";
-import useColors from "../../composables/useColors";
-///types with Capital letters... object with styles same name in lowercase
-import { type TypeAccordeon, typeAccordeon } from "../../types/Accordeon";
-interface Props {
-  type?: TypeAccordeon;
-  icon?: string|null;
-  open?: boolean;
-  outlined?:boolean;
-  title?:string | null
-  small?:boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), { 
-  open: false,
-  type:'base',
-  outlined:false,
-  title:'En savoir plus'
-});
-
-
-const showDiv = ref(props.open);
-const collapsible = ref();
-
-const isOutlined = computed(()=>{
-  if(props.outlined){
-    return 'outlined'
-  }
-  return 'default'
-})
-
-const stylesHeader = computed(()=>{
-  return `flex justify-between items-center px-4 ${props.small?'py-1':'py-2'} cursor-pointer ${typeAccordeon[props.type]?.[isOutlined.value]}`
-})
-
-const contentStyles = computed(()=>{
-  return `px-4 ${useColors('bg', props.type + 'light')} dark:bg-dark dark:${useColors('border', props.type+'dark')} ${showDiv.value?'':'dark:border-0'}`
-})
-
-onMounted(() => {
-  var content = collapsible.value
-  if (props.open) {
-    content.style.maxHeight = content.scrollHeight + "px";
-  }
-})
-
-function toggleDivVisibility() {
-  showDiv.value = !showDiv.value;
-  var content = collapsible.value
-  if (content.style.maxHeight) {
-    content.style.maxHeight = null;
-  } else {
-    content.style.maxHeight = content.scrollHeight + "px";
-  }
-  //add transition 
-  if(!content.style.transition){
-    content.style.transition = 'max-height 0.2s ease-out';
-  }
-}
-
-
-const {title, icon, small } = toRefs(props)
-</script>
-
-<template>
-  <div>
-    <div :class="stylesHeader" @click="toggleDivVisibility">
-      <h3 :class="`${small?'text':'text-lg'} flex items-center`"><EpIcon v-if="icon" :icon-path="icon" size="28" extraClass="mr-2"></EpIcon>{{ title }}</h3>
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
-        :class="`mx-4 my-3 h-6 w-6 transition-all duration-200 ${showDiv ? 'rotate-45' : ''}`">
-        <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6" />
-      </svg>
-    </div>
-    <div ref="collapsible" :class="`${contentStyles} content`">
-      <div class="py-3">
-  
-        <slot></slot>
-  
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.content {
-  max-height: 0;
-  overflow: hidden;
-}
-</style>

package/src/components/interactions/EpContentSlider.vue

@@ -1,177 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, defineAsyncComponent, ComponentPublicInstance } from "vue";
-import { type SlidesType } from "../../types/Slides";
-import { useComponent } from "../../composables/useComponent";
-import { useRenderText } from "../../composables/useRenderText";
-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;
-	mediaPosition?: 'left' | 'right';
-}
-
-const props = withDefaults(defineProps<Props>(), {
-	loading: "...loading",
-	noData: "No data available",
-	mediaPosition: "left",
-});
-
-const currentIndex = ref(0);
-const isLoading = ref(false);
-const slideRefs = ref<(HTMLElement | null)[]>([]);
-
-const currentSlide = computed(() => {
-	if (!props.slides || props.slides.length === 0) {
-		return { title: props.noData, img: '', uid: 2, content: "", component: null };
-	}
-	return props.slides[currentIndex.value];
-});
-
-const hasTextContent = computed(() => {
-	const content = currentSlide.value.content;
-	return content && content.trim().length > 0;
-});
-
-const currentSlideMediaContent = computed(() => {
-	if (currentSlide.value.img) {
-		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`));
-	}
-	return null;
-});
-
-const max = computed(() => currentIndex.value < props.slides.length - 1);
-
-const next = async () => {
-	isLoading.value = true;
-	if (max.value) {
-		currentIndex.value += 1;
-	}
-	isLoading.value = false;
-};
-
-const prev = async () => {
-	isLoading.value = true;
-	if (currentIndex.value > 0) {
-		currentIndex.value -= 1;
-	}
-	isLoading.value = false;
-};
-
-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="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-2xl 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>
-
-		<!-- 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 }"
-									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>
-						</template>
-
-
-
-					</div>
-
-
-
-					<!-- 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,44 +0,0 @@
-<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;
-        }>();
-
-    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;
-        document.documentElement.className = theme;
-        userTheme.value = theme;
-        emit('update:userMode', theme);
-    };
-
-    const toggleTheme = (): void => {
-        const nextTheme = userTheme.value === 'light' ? 'dark' : 'light';
-        setTheme(nextTheme);
-    };
-
-    onMounted(() => {
-        setTheme(userTheme.value);
-    });
-</script>
-
-<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/interactions/EpDraggable.vue

@@ -1,192 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, onMounted, onUnmounted } from 'vue';
-import { VueDraggableNext as draggable } from 'vue-draggable-next';
-
-import { Choice, Answer, Sockets } from '../../types/Draggable';
-
-import { mdiCheckBold, mdiCloseThick } from "@mdi/js";
-import EpIcon from '../basics/EpIcon.vue';
-
-
-
-
-
-interface Props {
-    answers: Answer[],
-    src: string,
-    sockets: Sockets[]
-}
-
-const props = withDefaults(defineProps<Props>(), {});
-
-
-
-
-// Manage the image and its size
-
-const originalWidth = ref(0);
-const originalHeight = ref(0);
-
-const actualRect = ref({ width: 0, height: 0 });
-const myImage = ref<HTMLImageElement | null>(null);
-
-
-
-const updateSize = () => {
-    
-    if (!myImage.value) return;
-
-    const rect = myImage.value.getBoundingClientRect();
-    actualRect.value = { width: rect.width, height: rect.height };
-
-    //console.log('Image size updated. Width:', actualRect.value.width, 'Height:', actualRect.value.height);
-};
-
-
-onMounted(() => {
-    window.addEventListener('resize', updateSize);
-});
-onUnmounted(() => {
-    window.removeEventListener('resize', updateSize);
-});
-
-
-
-const handleImageLoad = (event: any) => {
-    originalWidth.value = event.target.naturalWidth;
-    originalHeight.value = event.target.naturalHeight;
-
-   // console.log('Image loaded. Width:', originalWidth.value, 'Height:', originalHeight.value);
-
-    updateSize();
-}
-
-
-const xRatio = computed(() => {
-    if (actualRect.value.width == 0) return 1;
-    return actualRect.value.width / originalWidth.value;
-});
-
-const yRatio = computed(() => {
-    if (actualRect.value.height == 0) return 1;
-    return actualRect.value.height / originalHeight.value;
-});
-
-
-
-
-
-
-// Créer une copie réactive de props.answers
-const availableAnswers = ref([...props.answers]);
-
-const choices = ref<Choice[]>( props.sockets.map((s) => {
-    return {
-        choice: [],
-        expected: s.correctAnswer ,
-        allowPut: true
-    }
-}));
-
-
-
-
-// Manage drag and drop
-const onAdd = (event: any, index: number) => {
-   // console.log(event.clone);
-
-    // Retirer l'élément de la liste des réponses disponibles
-    availableAnswers.value = availableAnswers.value.filter(item => item.name !== event.clone.name);
-    choices.value[index].allowPut = false;
-}
-
-const onRemove = (event: any, index: number) => {
-   // console.log(event.clone);
-
-    choices.value[index].choice = [];
-    choices.value[index].allowPut = true;
-}
-
-
-
-
-// Manage verification buttons
-const validating = ref(false);
-
-const validate = () => {
-    validating.value = true;
-    choices.value.forEach((choice) => {
-        choice.allowPut = false;
-    });
-}
-
-const retry = () => {
-    validating.value = false;
-    availableAnswers.value = [...props.answers];
-    choices.value.forEach((choice) => {
-        choice.choice = [];
-        choice.allowPut = true;
-    });
-}
-
-
-</script>
-
-<template>
-
-<div class="flex flex-col">
-    <div class="grid grid-cols-3 gap-3 w-full my-8">
-
-        <!-- Draggable answers block -->
-        <div class="col-span-1 m-6">
-            <draggable
-                class="dragArea bg-gray-700 rounded-md p-4 min-h-5 list-group w-full"
-                v-model="availableAnswers"
-                :group="{ name: 'answers', pull: !validating, put: !validating }"
-            >
-                <div
-                    class="list-group-item bg-gray-300 dark:bg-gray-800 m-1 p-3 rounded-md text-center flex justify-center items-center"
-                    v-for="element in availableAnswers"
-                    :key="element.name"
-                >
-                    <img class="cursor-grab active:cursor-grabbing max-w-32 rounded" v-if="element.isImg" :src="element.src" alt="img" />
-                    <p class="cursor-grab active:cursor-grabbing" v-else>{{ element.name }}</p>
-                </div>
-            </draggable>
-        </div>
-    
-    
-        <!-- Drop area block -->
-        <div class="col-span-2 relative">
-            <img @load="handleImageLoad" ref="myImage" :src="props.src" alt="img" class="w-full h-full select-none" />
-            <draggable
-                class="dropArea absolute bg-gray-300 dark:bg-gray-800 p-4 rounded-md min-w-14 max-w-32"
-                v-for="(socket, index) in props.sockets"
-                :key="index"
-                v-model="choices[index].choice"
-                :group="{ put: choices[index].allowPut }"
-                :style="{ left: (socket.xPos * xRatio) + 'px', top: (socket.yPos * yRatio) + 'px' }"
-                @add="onAdd($event, index)"
-                @remove="onRemove($event, index)"
-            >
-                <img class="cursor-grab active:cursor-grabbing rounded" v-if="choices[index].choice[0] && choices[index].choice[0].isImg" :src="choices[index].choice[0].src" alt="img" />
-                <p class="cursor-grab active:cursor-grabbing" v-else-if="choices[index].choice[0]">{{ choices[index].choice[0].name }}</p>
-                <span v-if="validating && choices[index].choice[0]?.name !== choices[index].expected" class="absolute -top-5 -right-5 bg-red-500 text-white px-2 py-1 rounded-md">
-                    <EpIcon :iconPath="mdiCloseThick" size="18"></EpIcon>
-                </span>
-                <span v-if="validating && choices[index].choice[0]?.name === choices[index].expected" class="absolute -top-5 -right-5 bg-green-500 text-white px-2 py-1 rounded-md">
-                    <EpIcon :iconPath="mdiCheckBold" size="18"></EpIcon>
-                </span>
-            </draggable>
-        </div>
-    </div>
-
-    <!-- Verification buttons -->
-    <div class="flex justify-center gap-4 mt-8">
-        <button class="bg-blue-500 text-white px-3 py-2 rounded-md text-center" @click="validate">Valider</button>
-        <button class="bg-blue-500 text-white px-3 py-2 rounded-md text-center" @click="retry">Recommencer</button>
-    </div>
-
-</div>
-
-</template>

package/src/components/interactions/EpHotsPot.vue

@@ -1,86 +0,0 @@
-<script setup lang="ts">
-import {ref, computed, toRefs} from 'vue'
-
-interface InfoButton {
-    id:string|number;
-    content:string;
-    verticalPosition:number;
-    horizontalPosition:number;
-    title:string;
-}
-
-interface Props {
-    id?:string|number;
-    imageURL:string;
-    title?:string;
-    infoButtons:InfoButton[];
-    labels?:{
-      fermer?:string; 
-    }
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  labels:()=>{
-      return {
-        fermer:"Fermer"
-      }
-    }
-});
-
-const  { title, imageURL } = toRefs(props)
-
-const hotsPots = computed(() => {
-  if (props.infoButtons) {
-    return props.infoButtons.map((button) => {
-      let transform = `translateX(-50%)`;
-
-      if (button.horizontalPosition === 0) transform = ``;
-      else if (button.horizontalPosition === 100) transform = `translateX(-100%)`;
-      if (button.verticalPosition === 100) transform = `translateY(-100%) ${transform}`;
-
-      const position = `transform: ${transform}; top: ${button.verticalPosition}%; left: ${button.horizontalPosition}%;`;
-
-      return { ...button, position }
-    })
-  }
-  return []
-})
-
-const modalOpen = ref(false);
-const displayContent = ref('')
-const titleDisplay = ref('')
-
-const openModal = (title:string, content:string) => {
-  modalOpen.value = true;
-  displayContent.value = content
-  titleDisplay.value = title
-};
-
-const closeModal = () => {
-  modalOpen.value = false;
-  displayContent.value = ''
-};
-
-</script>
-
-<template>
-  <div>
-    <h2 class="text-xl font-bold">{{ title }}</h2>
-    <div class="relative">
-      <img :src="imageURL" :alt="`l'image de ${title}`">
-      <template v-for="spot in hotsPots" :key="spot.id">
-        <button @click="openModal(spot.title, spot.content)" :class="`absolute text-white px-4 py-2 shadow-md bg-primary`" :style="`${spot.position}`">+</button>
-      </template>
-      <div v-if="modalOpen" class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-5 px-2">
-        <div class="mx-2 bg-white p-2 shadow-md">
-            <h4>{{ titleDisplay }}</h4>
-           <div v-html="displayContent" class="text-sm"></div>
-          <button @click="closeModal" class="mt-4 bg-primary text-white px-2 py-1 text-sm">
-            {{labels.fermer}}
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-