ep-lib-ts 0.1.14 → 0.1.16

package/src/components/interactions/EpContentSlider.vue

@@ -1,12 +1,115 @@
 <script setup lang="ts">
+import { ref, computed, defineAsyncComponent, toRefs } from "vue";
+import {SlidesType} from "../../types/Slides"
+import { useComponent } from "../../composables/useComponent";
+import { mdiArrowLeft } from "@mdi/js";
+import { mdiArrowRight } from "@mdi/js";
+import EpIcon from "../basics/EpIcon.vue";
+
+
+interface Props {
+   slides:SlidesType[];
+}
+
+const props = withDefaults(defineProps<Props>(), {})
+
+
+const currentIndex = ref<number>(0)
+
+const currentSlide = computed(() => {
+	if(!props.slides){
+		return {title:'no data',  img:'', uid:2, content:""}
+	}
+	if(props.slides.length === 0) {
+		return {title:'no data',  img:'', uid:2, content:""}
+	}
+	return props.slides[currentIndex.value]
+})
+
+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+1) < props.slides.length)
+const min = computed(()=> (currentIndex.value+1) > 1)
+const next = () => {
+	if(max.value){
+		currentIndex.value += 1
+	}
+}
+
+const prev = () => {
+	if(min.value){
+		currentIndex.value -= 1
+	}
+}
+
+const goTo = (index:number) =>{ 
+	currentIndex.value = index
+}
+
+const {slides} = toRefs(props)
 
 </script>
 
 <template>
-<div class="p-12 bg-warning-light w-[50%] mx-auto border-2 border-warning">
-        <p class="text-center text-error font-bold uppercase">In progress</p>
-   </div>
-  </template>
+	<div class="bg-stone-100 p-5 w-full md:h-custom overflow-hidden">
+		<div class="flex justify-between border-b border-black w-auto">
+			<h5 class="text-lg border-b-4 border-black">
+				{{ 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-gray-400'}`" @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>
+		</div>
+		<div class="">
+			<Transition name="list" mode="out-in">
+				<div class="md:flex p-8" :key="currentSlide.uid">
+					<div class="md:w-3/6 mr-5 flex items-center" v-if="currentSlideMediaContent">
+						<component v-if="currentSlide.img" :is="currentSlideMediaContent" :src="currentSlide.img"></component>
+						<component v-else-if="currentSlide.component" :is="currentSlideMediaContent" v-bind="{...currentSlide.component.data}"></component>
+					</div>
+					<div class="w-full">
+					   <div class="overflow-y-auto h-96 p-custom" v-html="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>
 

package/src/components/interactions/EpModal.vue

@@ -3,7 +3,7 @@ import { computed, toRefs } from 'vue';
 import EpCard from '../basics/EpCard.vue'
 
 const size = {
-    compact:"w-[40%]",
+    compact:"w-[45%]",
     default:"w-[75%]",
     comfortable:"w-[85%]"
 }

package/src/components/medias/EpCarousel.vue

@@ -71,7 +71,7 @@ const { carrouselImg, labelClose, labelRef } = toRefs(props);
          </div>
     </EpModal>
   </div>
-  <div v-else>
+  <div v-else class="flex">
     <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/medias/EpLink.vue

@@ -18,26 +18,26 @@ interface Props {
   labelIntentions?: string;
   type?: MediaVariants;
   hideIcon?: boolean;
-  labelCard?:string;
-  icon?:string;
+  labelCard?: string;
+  icon?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   labelIntentions: "Intentions d'écoute",
   type: "primary",
   hideIcon: false,
-  intentions:""
+  intentions: ""
 });
 
-const renderIcon = computed(()=>{
-  if(props.icon){
+const renderIcon = computed(() => {
+  if (props.icon) {
     return props.icon
   }
   return mdiLinkVariant
 })
 
-const hoverColor = computed(()=>{
-   return `absolute ${useColors('bg', props.type + 'light')} bottom-0 w-0 left-1/2 h-full -translate-x-1/2 transition-all ease-in-out duration-300 group-hover:w-[105%] -z-[1] group-focus:w-[105%]`
+const hoverColor = computed(() => {
+  return `absolute ${useColors('bg', props.type + 'light')} bottom-0 w-0 left-1/2 h-full -translate-x-1/2 transition-all ease-in-out duration-300 group-hover:w-[105%] -z-[1] group-focus:w-[105%]`
 })
 
 const { href, label, intentions, mandateLevel, hideIcon } = toRefs(props);
@@ -46,14 +46,15 @@ const { href, label, intentions, mandateLevel, hideIcon } = toRefs(props);
 <template>
   <EpEdu :title="labelCard" :icon="renderIcon" flat :type="type" :hideIcon="hideIcon" :mandateLevel="mandateLevel">
     <template #intentions v-if="useRenderText(intentions)">
-          <div v-html="useRenderText(intentions)"></div>
-        </template>
+      <div v-html="useRenderText(intentions)"></div>
+    </template>
     <template #content>
       <div class="flex justify-center">
         <div class="w-4/5">
-          <EpBtn block :color="type === 'base'?'text-black':'text-white'" rounded :type="type" :prependIcon="renderIcon" :href="href"
+          <EpBtn block :color="type === 'base' ? 'text-black' : 'text-white'" rounded :type="type" :prependIcon="renderIcon"
+            :href="href"
             extraClass="group font-medium tracking-wide relative inline-flex justify-center overflow-hidden z-10 transition-all duration-300 ease-in-out ">
-            <span class="font-medium tracking-wider ">{{label}}</span>
+            <span class="font-medium tracking-wider ">{{ label }}</span>
             <span :class='hoverColor'></span>
           </EpBtn>
         </div>

package/src/components/medias/EpSvg.vue

@@ -1,8 +1,47 @@
 <script setup lang="ts">
+import { toRefs, computed } from 'vue';
+import { MediaVariants } from "../../types/Medias";
+import { MandateLevel } from '../../types/MandateLevel';
+import { useRenderText } from "../../composables/useRenderText";
+import { mdiImage } from '@mdi/js';
+import EpEdu from '../educationals/EpEdu.vue';
+
+interface Props {
+   desc?:string;
+   title?:string;
+   content?:string;
+   mandateLevel?: string | MandateLevel | null;
+   type?:MediaVariants
+}
+
+const props = withDefaults(defineProps<Props>(), {
+
+})
+
+const renderText = computed(()=> {
+    if(props.desc){
+      return useRenderText(props.desc)
+    }
+    return null
+})
+
+
+
+const {title, content} = toRefs(props)
+ 
 </script>
 
 <template>
-   <div class="p-12 bg-warning-light w-[50%] mx-auto border-2 border-warning">
-        <p class="text-center text-error font-bold uppercase">In progress</p>
-   </div>
+  <EpEdu :title="title" :icon="mdiImage" flat :type="type" :mandateLevel="mandateLevel">
+    <template #intentions v-if="renderText">
+      <div v-html="renderText"></div>
+    </template>
+    <template #content>
+      <div class="flex justify-center">
+        <div class="w-4/5" v-if="content">
+         <div v-html="content" class="md:w-96  w-56 mx-auto"></div>
+        </div>
+      </div>
+    </template>
+  </EpEdu>
 </template>

package/src/components/medias/EpTerm.vue

@@ -1,23 +1,25 @@
 <script setup lang="ts">
-import { ref, toRefs, computed } from "vue";
+import { ref, toRefs, computed, onMounted} from "vue";
+import { useRenderText } from "../../composables/useRenderText";
+import { mdiBookmarkMultipleOutline } from "@mdi/js";
+import EpImg from "../basics/EpImg.vue";
 import EpIcon from "../basics/EpIcon.vue";
 import EpModal from "../interactions/EpModal.vue";
 import EpDivider from "../basics/EpDivider.vue";
 import EpBtn from "../basics/EpBtn.vue";
-import { isHtml } from "../../composables/isHtml";
-import { useMarkdown } from "../../composables/useMarkdown";
-import { mdiBookmarkMultipleOutline } from "@mdi/js";
+
 
 interface Props {
   term: string;
   word: string;
-  definition: string;
+  definition?: string;
   variations?: string;
   domain?: string;
   graminfo?: string;
   relations?: string;
   idrelation?: string;
   labelClose?: string;
+  src?:string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -30,12 +32,10 @@ const props = withDefaults(defineProps<Props>(), {
 
 const show = ref(false);
 
-const renderText = computed(() => {
-  if (!isHtml(props.definition)) {
-    return useMarkdown(props.definition);
-  }
-  return props.definition;
-});
+
+
+
+
 
 const subtitle = computed(() => {
   if (props.term !== props.word) {
@@ -78,12 +78,22 @@ const renderDomain = computed(() => {
   return props.domain;
 });
 
-const { term, graminfo, labelClose } = toRefs(props);
+const toggleModal = () => {
+  show.value = !show.value
+}
+
+const el = (contentref:any) => {
+   const contentHtml = contentref.innerHTML 
+   const renderHtml = useRenderText(contentHtml)
+   contentref.innerHTML = renderHtml
+}
+
+const { term, graminfo, labelClose, src } = toRefs(props);
 </script>
 
 <template>
   <span
-    @click="show = true"
+    @click="toggleModal"
     class="cursor-pointer border-primary border text-primary px-2 py-1 rounded group overflow-hidden relative"
   >
     <span
@@ -117,7 +127,12 @@ const { term, graminfo, labelClose } = toRefs(props);
         >Domaine : <span class="font-bold">{{ renderDomain }}</span></span
       >
     </div>
-    <div v-html="renderText"></div>
+    <!-- <div v-html="renderText"></div> -->
+    <div :ref="el">
+      <slot></slot>
+    </div>
+    <EpImg v-if="src" :src="src"></EpImg>
+
     <EpDivider v-if="renderVariations || renderRelations"></EpDivider>
     <div class="text-sm mt-2" v-if="renderVariations">
       <span class="mr-2 font-bold">Variations :</span>

package/src/components/medias/EpTimeLine.vue

@@ -65,24 +65,26 @@ const {title} = toRefs(props)
 
 <template>
   <!-- component -->
-  <div class="w-10/12 md:w-7/12 lg:6/12 mx-auto relative">
-    <h3 class="text-2xl mb-2">{{ title?.title?.text?.headline }}</h3>
-    <p>{{ title?.title?.text?.text }}</p>
-  <div class="my-4">
-    <template v-for="tag in timeLineTags" :key="tag.id">
-      <span @click="toggleActive(tag)" :class="`mr-2 cursor-pointer text-sm px-2 py-1 rounded border ${styleTag(tag.color).border} ${tag.active?'text-white':styleTag(tag.color).text} ${tag.active?styleTag(tag.color).bg:''}`">
-       {{ tag.title }} <EpIcon :icon-path="tag.active?mdiCheckboxMarkedCircle:mdiCheckboxBlankCircleOutline" size="14"></EpIcon>
-      </span>
-    </template>
-  </div>
-    <div class="border-l-4 pl-1 transition-all">
-      <TransitionGroup name="list" tag="ul">
-        <template v-for="(item, i) in filteredEvents" :key="`${i}-card-${item.id}`"> 
-          <TimeLineItem :event="item"></TimeLineItem> 
-        </template>
-    </TransitionGroup>
+ <div>
+    <div class="w-10/12 md:w-7/12 lg:6/12 mx-auto relative">
+      <h3 class="text-2xl mb-2">{{ title?.title?.text?.headline }}</h3>
+      <p>{{ title?.title?.text?.text }}</p>
+    <div class="my-4">
+      <template v-for="tag in timeLineTags" :key="tag.id">
+        <span @click="toggleActive(tag)" :class="`mr-2 cursor-pointer text-sm px-2 py-1 rounded border ${styleTag(tag.color).border} ${tag.active?'text-white':styleTag(tag.color).text} ${tag.active?styleTag(tag.color).bg:''}`">
+         {{ tag.title }} <EpIcon :icon-path="tag.active?mdiCheckboxMarkedCircle:mdiCheckboxBlankCircleOutline" size="14"></EpIcon>
+        </span>
+      </template>
     </div>
-  </div>
+      <div class="border-l-4 pl-1 transition-all">
+        <TransitionGroup name="list" tag="ul">
+          <template v-for="(item, i) in filteredEvents" :key="`${i}-card-${item.id}`"> 
+            <TimeLineItem :event="item"></TimeLineItem> 
+          </template>
+      </TransitionGroup>
+      </div>
+    </div>
+ </div>
 
 </template>
 

package/src/components/signages/EpHeader.vue

@@ -1,21 +1,19 @@
 <script setup lang="ts">
 import { toRefs, computed } from "vue";
-import EpIcon from "../basics/EpIcon.vue";
 
-import EpChip from "../basics/EpChip.vue";
-import useColors from "../../composables/useColors";
-import { mdiHome } from "@mdi/js";
 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 EpIcon from "../basics/EpIcon.vue";
+import EpChip from "../basics/EpChip.vue";
 
 interface Props {
   title?: string | null;
   subtitle?: string | null;
   icon?: string | null;
   color?: string | null;
-  taxonomyLevel?: string | null;
   courseCode?: string | null;
   courseTitle?: string | null;
   height?: string | null;
@@ -23,6 +21,7 @@ interface Props {
   synchrone?: boolean;
   duration?: string | null;
   assessment?: string | null;
+  headerImgColor?:string | null
 }
 
 // type, taxonomyLevel, courseCode, courseTitle, title, subtitle, height, src, color, synchrone
@@ -38,6 +37,7 @@ const props = withDefaults(defineProps<Props>(), {
   assessment: null,
 });
 
+
 const colorText = computed(() => {
   return props.color;
 });
@@ -49,10 +49,9 @@ const styles = computed(() => {
 	items-start 
 	overflow-hidden 
 	w-full 
+  absolute
 	${props.height !== null ? "min-h-screen" : "h-96"}
-	bg-cover
-	bg-blue-500 
-	bg-blend-multiply `;
+	bg-cover`;
 });
 
 const bgImg = computed(() => {
@@ -62,102 +61,54 @@ const bgImg = computed(() => {
   return `https://picsum.photos/800/480?random`;
 });
 
-const { title, icon, color, src, height } = toRefs(props);
+const emit = defineEmits<{
+  (e:"clicked"):void
+}>()
+
+
+const clickScroll = ():void => {
+      emit('clicked')
+}
+
+
+const { title, headerImgColor } = toRefs(props);
 </script>
 
 <template>
-  <section class="items-center overflow-hidden bg-white">
-    <div :class="styles" :style="`background-image:url('${bgImg}')`">
-      <div class="flex mt-2 place-self-end gap-2 lg:flex-row">
-        <EpChip v-if="synchrone" color="secondary" :prependIcon="mdiCast"
-          >Synchrone</EpChip
-        >
-        <EpChip v-if="duration" color="secondary" :prependIcon="mdiTimerOutline"
-          > {{ duration }}</EpChip
-        >
-        <EpChip
-          v-if="assessment"
-          color="secondary"
-          :prependIcon="mdiChairSchool"
-          >Formatif</EpChip
-        >
-      </div>
-
-      <div id="title-content" class="md:px-64 flex w-full grow flex items-end">
-        <div
-          class="container flex flex-col px-8 py-24 max-w-7xl md:flex-row lg:px-16"
-        >
-          <div
-            v-if="title"
-            class="p-4 md:items-center backdrop-blur-md backdrop-brightness-50 backdrop-opacity-75 rounded-xl"
-          >
-            <div class="text-center md:text-left">
-              <div>
-                <p
-                  class="text-2xl font-medium tracking-tight text-white sm:text-4xl"
-                >
-                  {{ title }}
-                </p>
-                <p
-                  class="max-w-xl mt-4 text-xl tracking-tight text-white contrast-50"
-                >
-                  {{ subtitle }}
-                </p>
+  <section class="items-center overflow-hidden relative" ref="el">
+    <div :class="styles" :style="`background-image:url('${bgImg}'); filter:url(#${headerImgColor});`"></div>
+    
+      <div class="relative">
+        <div class="flex md:justify-end justify-center pt-5">
+          <EpChip v-if="synchrone" :prependIcon="mdiCast">Synchrone</EpChip>
+          <EpChip v-if="duration"  :prependIcon="mdiTimerOutline"> {{ duration }}</EpChip>
+          <EpChip v-if="assessment" :prependIcon="mdiChairSchool">Formatif</EpChip>
+        </div>
+        <div class="md:px-64 flex w-full py-24 grow flex items-end">
+          <div class="container flex flex-col px-8 max-w-7xl md:flex-row lg:px-16">
+            <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 tracking-tight text-white sm:text-3xl">
+                    {{ title }}
+                  </h1>
+                  <h2 v-if="subtitle" class="max-w-xl mt-4 text-xl tracking-tight text-white contrast-50">
+                    {{ subtitle }}
+                  </h2>
               </div>
             </div>
           </div>
         </div>
+  
       </div>
-      <div
-        id="action"
-        v-if="props.height !== null"
-        class="place-self-center pb-12 animate-bounce"
-      >
-        <div class="mx-auto w-12 bg-white rounded-full p-2">
+
+      <div v-if="props.height !== null" class="place-self-center pb-12 animate-bounce">
+        <div class="mx-auto w-12 bg-white rounded-full p-2" @click="clickScroll">
           <EpIcon :iconPath="mdiChevronDown" size="32"></EpIcon>
         </div>
       </div>
-    </div>
-
-    <!-- <div>
-      <div class="px-5 pt-6 mx-auto lg:max-w-6xl lg:px-0">
-        <dl class="grid grid-cols-1 gap-6 space-y-0 lg:gap-24 lg:grid-cols-3">
-          <div>
-            <div>
-              <p class="mt-5 text-lg font-semibold leading-6 text-black">
-                Developer experience
-              </p>
-            </div>
-            <div class="mt-2 text-base text-gray-600">
-              Do what you think is right. Don't let people make the decision of
-              right or wrong for you.
-            </div>
-          </div>
-          <div>
-            <div>
-              <p class="mt-5 text-lg font-semibold leading-6 text-black">
-                Designers go-to app
-              </p>
-            </div>
-            <div class="mt-2 text-base text-gray-600">
-              Only you can take inner freedom away from yourself, or give it to
-              yourself. Nobody else can
-            </div>
-          </div>
-          <div>
-            <div>
-              <p class="mt-5 text-lg font-semibold leading-6 text-black">
-                Easy onboarding
-              </p>
-            </div>
-            <div class="mt-2 text-base text-gray-600">
-              Your greatest self has been waiting your whole life; don't make it
-              wait any longer
-            </div>
-          </div>
-        </dl>
-      </div>
-    </div> -->
+    <SvgFilter></SvgFilter>
   </section>
 
 </template>

package/src/components/tools/DisplayBox.vue

@@ -21,13 +21,13 @@ function close() {
 }
 
 const classOpen = computed(()=> {
-   return isOpen.value?`absolute w-[32rem] -left-96 z-40`:`hidden`
+   return isOpen.value?`absolute w-[32rem] -left-96 z-50`:`hidden`
 })
 
 </script>
 
 <template>
-    <div class="relative">
+    <div class="relative z-50">
        <slot :open="open" />
         <div ref="menu" :class="classOpen">
             <slot name="menu" :is-open="isOpen" :close="close" />