ep-lib-ts 0.1.11 → 0.1.14

package/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+}

package/README.md

@@ -16,3 +16,4 @@ If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has a
    1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
    2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
 2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
+   .

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ep-lib-ts",
   "private": false,
-  "version": "0.1.11",
+  "version": "0.1.14",
   "files": [
     "dist",
     "src/components/"
@@ -33,9 +33,9 @@
     "markdown-it": "^13.0.1",
     "postcss-cli": "^10.1.0",
     "vee-validate": "^4.8.6",
+    "vue": "^3.2.45",
     "vue-router": "^4.1.6",
-    "vue3-apexcharts": "^1.4.4",
-    "vue": "^3.2.45"
+    "vue3-apexcharts": "^1.4.4"
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.3",
@@ -54,5 +54,8 @@
   },
   "peerDependencies": {
     "vue": "^3.2.45"
+  },
+  "engines": {
+    "node": "18.x.x"
   }
-}
+}

package/src/components/basics/EpImg.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { toRefs, ref, computed } from 'vue'
+import { useImage } from '@vueuse/core'
 import EpModal from '../interactions/EpModal.vue'
 import EpIcon from '../basics/EpIcon.vue'
 import { mdiArrowExpandAll } from '@mdi/js';
+import { mdiImage } from '@mdi/js';
+import { mdiImageRemove } from '@mdi/js';
 import { useRenderText } from "../../composables/useRenderText";
 const Cols = [
    'basis-6/12',
@@ -28,7 +31,8 @@ interface Props {
    thumbnail?: boolean;
    caption?: string;
    bib?: string;
-   title?: string,
+   title?: string;
+   noModal?:boolean;
    cols?: string | number  //posible type à venir => basis-1/12... basis-11/12 to basis-full
 }
 
@@ -36,6 +40,7 @@ const props = withDefaults(defineProps<Props>(), {
    alt: "Image snfas",
    cols: "basis-6/12",
    thumbnail: false,
+   noModal:false
 })
 
 const renderCols = computed(() => {
@@ -51,38 +56,56 @@ const renderBib = computed(()=>{
 
 const showModal = ref<boolean>(false)
 
-const { src, alt, title, caption, thumbnail, bib } = toRefs(props)
+const toggleModal = ():void => {
+   if(props.noModal){
+      return
+   }
+   showModal.value = !showModal.value
+}
+
+const { isLoading, error } = useImage({ src: props.src })
+const { src, alt, title, caption, thumbnail, bib, noModal } = toRefs(props)
 
 </script>
 
 <template>
-   <div v-if="!thumbnail" class="flex">
-      <div :class="`mx-auto bg-white rounded-md overflow-hidden shadow-md ${renderCols}`">
-         <img class="object-cover object-center w-full" :src="src" :alt="alt" @click="showModal = true">
-         <div class="px-4 py-2" v-if="title || caption || bib">
-            <h2 class="text-2xl font-bold">{{ title }}</h2>
-            <p class="text-gray-500 text-sm mt-4">{{ caption }}</p>
-            <div class="text-gray-700 mt-4" v-html="renderBib"></div>
+ <div>
+      <div v-if="!thumbnail" class="flex">
+         <div :class="`mx-auto bg-white rounded-md overflow-hidden shadow-md ${renderCols}`">
+            <template v-if="isLoading">
+               <span class="text-gray-200"><EpIcon :icon-path="mdiImage" size="250"></EpIcon></span>
+            </template>
+            <template v-else-if="error">
+               <span class="text-red-200"><EpIcon :icon-path="mdiImageRemove" size="150"></EpIcon></span>
+            </template>
+            <template v-else>
+               <img class="object-cover object-center w-full" :src="src" :alt="alt" @click="toggleModal">
+            </template>
+            <div class="px-4 py-2" v-if="title || caption || bib">
+               <h2 class="text-2xl font-bold">{{ title }}</h2>
+               <p class="text-gray-500 text-sm mt-4">{{ caption }}</p>
+               <div class="text-gray-700 mt-4" v-html="renderBib"></div>
+            </div>
          </div>
       </div>
-   </div>
-   <div v-if="thumbnail" class="relative group inline-block m-2">
-      <img class="w-36 h-36 object-cover object-center group-hover:opacity-30 " :src="src" :alt="alt">
-      <div
-         class="absolute top-0 left-0 w-36 h-36 bg-black opacity-0 transition-opacity duration-300 group-hover:opacity-30 cursor-pointer"
-         @click="showModal = true">
-         <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white text-center">
-            <EpIcon :icon-path="mdiArrowExpandAll"></EpIcon>
+      <div v-if="thumbnail" class="relative group inline-block m-2">
+         <img class="w-36 h-36 object-cover object-center group-hover:opacity-30 " :src="src" :alt="alt">
+         <div
+            class="absolute top-0 left-0 w-36 h-36 bg-black opacity-0 transition-opacity duration-300 group-hover:opacity-30 cursor-pointer"
+            @click="toggleModal">
+            <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white text-center">
+               <EpIcon :icon-path="mdiArrowExpandAll"></EpIcon>
+            </div>
          </div>
       </div>
-   </div>
-   <EpModal v-model="showModal">
-      <img class="object-cover object-center h-5/6 w-5/6 mx-auto" :src="src" :alt="alt" @click="showModal = false">
-       <div class="px-4 py-2" v-if="thumbnail">
-         <h2 class="text-2xl font-bold">{{ title }}</h2>
-         <p class="text-gray-500 text-sm mt-4">{{ caption }}</p>
-         <div class="text-gray-700 mt-4" v-html="renderBib"></div>
-      </div> 
-   </EpModal>
+      <EpModal v-model="showModal">
+         <img class="object-cover object-center h-5/6 w-5/6 mx-auto" :src="src" :alt="alt" @click="toggleModal">
+          <div class="px-4 py-2" v-if="thumbnail">
+            <h2 class="text-2xl font-bold">{{ title }}</h2>
+            <p class="text-gray-500 text-sm mt-4">{{ caption }}</p>
+            <div class="text-gray-700 mt-4" v-html="renderBib"></div>
+         </div> 
+      </EpModal>
+ </div>
 </template>
 

package/src/components/medias/EpLinkVersion.vue

@@ -14,12 +14,15 @@ interface Link {
 
 interface Props{
    type:TypeLink;
-   link:Link
+   link:Link;
+   big?:boolean
 }
 
-const props = withDefaults(defineProps<Props>(),{})
+const props = withDefaults(defineProps<Props>(),{
+   big:false
+})
 
-const {type, link} = toRefs(props)
+const {type, link, big} = toRefs(props)
 
 </script>
 
@@ -28,7 +31,7 @@ const {type, link} = toRefs(props)
       <EpLink :label="link.title" :href="link.url"></EpLink>
    </div>
    <div v-else-if="type === 'iframe'">
-      <EpIframe :title="link.title" :src="link.url"></EpIframe>
+      <EpIframe :title="link.title" :src="link.url" :big="big"></EpIframe>
    </div>
    <div v-else>
       no data

package/src/components/medias/EpTimeLine.vue

@@ -1,8 +1,99 @@
 <script setup lang="ts">
+import { ref, toRefs, onMounted, computed } from 'vue';
+//types in capital letter
+import {TagTimeLine, HeadTimeLine, EventTimeLine, ColorsTags, colorsTimeLine} from '../../types/TimeLine'
+import TimeLineItem from '../tools/TimelineItem.vue'
+import EpIcon from '../basics/EpIcon.vue';
+import { mdiCheckboxBlankCircleOutline } from '@mdi/js';
+import { mdiCheckboxMarkedCircle } from '@mdi/js';
+
+interface TimelineHeading {
+  title?: {
+    text?:HeadTimeLine
+  }
+}
+
+interface Props {
+  tags:TagTimeLine[];
+  events:EventTimeLine[];
+  title?:TimelineHeading;
+}
+
+const props = withDefaults(defineProps<Props>(),{})
+
+const timeLineTags = ref<TagTimeLine[]>()
+
+onMounted(()=> {
+  if(props.tags){
+    timeLineTags.value = props.tags.map(tag => ({...tag, active:false}))
+  }
+})
+
+const styleTag = (color:ColorsTags) => {
+    const styles = colorsTimeLine[color]
+    if(!styles){
+      return colorsTimeLine.noTag
+    }
+    return styles
+}
+
+const activeTags = computed(()=>{
+   return timeLineTags.value?.filter(tag => tag.active) || []
+})
+
+const filteredEvents = computed(()=>{
+  if(activeTags.value.length === 0){
+        return props.events
+      }else{
+        const filtered = props.events.filter(event => {
+          if(event.tag){
+            ///event.tag.id === this.activesTags.some(t => t.id)
+            return activeTags.value.some(t => t.id === event.tag?.id)
+          }
+        })
+        return filtered
+      }
+})
+
+const toggleActive = (tag:TagTimeLine) => {
+    tag.active = !tag.active
+}
+
+const {title} = 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>
+  <!-- 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>
+
+</template>
+
+<style>
+.list-enter-active,
+.list-leave-active {
+  transition: all 0.5s ease;
+}
+.list-enter-from,
+.list-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+</style>

package/src/components/signages/EpHeader.vue

@@ -82,9 +82,10 @@ const { title, icon, color, src, height } = toRefs(props);
           >Formatif</EpChip
         >
       </div>
-      <div id="title-content" class="w-full grow flex items-end">
+
+      <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 mx-auto max-w-7xl md:flex-row lg:px-16"
+          class="container flex flex-col px-8 py-24 max-w-7xl md:flex-row lg:px-16"
         >
           <div
             v-if="title"
@@ -159,65 +160,4 @@ const { title, icon, color, src, height } = toRefs(props);
     </div> -->
   </section>
 
-  <section>
-    <div class="items-center pb-12 max-w-7xl lg:pb-24">
-      <div class="justify-center w-full mx-auto bg-stone-100">
-        <nav class="flex py-3 border-y" aria-label="Breadcrumb">
-          <ol role="list" class="flex items-center pl-2 space-x-2">
-            <li>
-              <div class="flex items-center">
-                <a
-                  href="#"
-                  class="inline-flex items-center text-sm font-medium text-gray-500 duration-200 hover:text-gray-700 hover:scale-95"
-                >
-                  <!-- <ion-icon
-                    class="flex-shrink-0 w-4 h-4 md hydrated"
-                    name="home-outline"
-                    role="img"
-                    aria-label="home outline"
-                  ></ion-icon> -->
-                  <EpIcon :iconPath="mdiHome" size="22"></EpIcon>
-                  <span class="ml-2"> Parent </span>
-                </a>
-              </div>
-            </li>
-            <li>
-              <div class="flex items-center">
-                <span class="flex-shrink-0 w-5 h-5 text-gray-300"> / </span>
-                <a
-                  href="#"
-                  class="ml-4 text-sm font-medium text-gray-500 hover:scale-95 hover:text-gray-700"
-                >
-                  Parent
-                </a>
-              </div>
-            </li>
-            <li>
-              <div class="flex items-center">
-                <span class="flex-shrink-0 w-5 h-5 text-gray-300"> / </span>
-                <a
-                  href="#"
-                  class="ml-4 text-sm font-medium text-gray-500 hover:scale-95 hover:text-gray-700"
-                >
-                  Parent
-                </a>
-              </div>
-            </li>
-            <li>
-              <div class="flex items-center">
-                <span class="flex-shrink-0 w-5 h-5 text-gray-300"> / </span>
-                <a
-                  href="#"
-                  class="ml-4 text-sm font-medium text-blue-500 hover:scale-95 hover:text-gray-700"
-                  aria-current="page"
-                >
-                  Current
-                </a>
-              </div>
-            </li>
-          </ol>
-        </nav>
-      </div>
-    </div>
-  </section>
 </template>

package/src/components/tools/TimelineItem.vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import { ref, toRefs, onMounted, computed } from "vue";
+import { useImage } from '@vueuse/core'
+import { useRenderText } from "../../composables/useRenderText";
+///types with Capital letters... object with styles same name in lowercase
+import { EventTimeLine, TimeLineDate, colorsTimeLine } from "../../types/TimeLine";
+import EpImg from "../basics/EpImg.vue";
+
+interface Props {
+  title?: string | null;
+  date?: string;
+  event: EventTimeLine;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: 'En savoir plus',
+  type: 'base',
+});
+
+
+const showDiv = ref(true);
+const collapsible = ref();
+
+
+onMounted(() => {
+  var content = collapsible.value
+  if (showDiv.value) {
+    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 start_date = computed(() => {
+  if (props.event.start_date) {
+    return parseTimeline(props.event.start_date)
+  }
+  return null
+})
+
+const end_date = computed(() => {
+  if (props.event.end_date) {
+    return parseTimeline(props.event.end_date)
+  }
+  return null
+})
+
+const src = computed(()=>{
+   if(props.event.media.url.trim() !== ""){
+    return props.event.media.url
+   }
+   return null
+})
+
+const colorEvent = computed(()=> {
+  if(props.event.tag){
+     return colorsTimeLine[props.event.tag.color]
+  }
+  return colorsTimeLine.noTag
+})
+
+const parseTimeline = (timeDate: TimeLineDate) => {
+  const day = timeDate.day ? `${timeDate.day}/` : ``
+  const month = timeDate.month ? `${timeDate.month}/` : ``
+  const year = timeDate.year 
+  const hours = timeDate.hour
+  const minutes = timeDate.minute ? `:${timeDate.minute}` : ``
+  return {
+    date: day + month + year,
+    hour: hours + minutes
+  }
+}
+
+const {  event } = toRefs(props)
+</script>
+
+<template>
+  <div
+    
+    :class="`cursor-pointer ml-10 relative flex items-center p-2 ${colorEvent.border} border border-2 rounded-r-lg mb-8 flex-col md:flex-row space-y-4 md:space-y-0`"
+    @click="toggleDivVisibility">
+    <!-- Dot -->
+    <div
+      :class="`w-5 h-5 bg-white border-2 ${colorEvent.border} absolute -left-12 transform -translate-x-2/4 rounded-full z-10 mt-2 md:mt-0`">
+    </div>
+    <!-- Line  -->
+    <div :class="`w-10 border ${colorEvent.border} absolute -left-10 z-0`"></div>
+    <div>
+      <div :class="`${colorEvent.text} text-sm`" >
+        <!-- sur protheus on est trop laxes ... mais on peut avoir plusieurs cas :/ -->
+        <span v-if="start_date?.date.trim()" class="font-bold">{{ start_date.date }}</span>
+        <span v-if="start_date?.hour.trim()" class="text-xs ml-1">{{ start_date.hour }}</span>
+        <span v-if="end_date?.date.trim()" class="mx-4">-</span>
+        <span v-if="end_date?.date.trim()" class="font-bold">{{ end_date.date }}</span>
+        <span v-if="end_date?.hour.trim()" class="text-xs ml-1"> {{ end_date.hour }}</span>
+        
+      </div>
+      <h1 :class="`text-2xl ${colorEvent.text}`">{{ event.text?.headline }}</h1>
+      <!-- Content  -->
+      <div ref="collapsible" class="content">
+        <div :class="`${src?'flex':''} py-4`">
+          <div v-if="src" class="flex-1">
+            <EpImg noModal cols="8" :src="src" :alt="event.text?.headline" ></EpImg>
+          </div>
+          <div class="flex-1" v-html="useRenderText(event.text.text)"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  max-height: 0;
+  overflow: hidden;
+}</style>

package/dist/BgAudio-b12a8d0d.js

@@ -1,5 +0,0 @@
-import { H as m } from "./index-8c79cd61.js";
-import "vue";
-export {
-  m as default
-};

package/dist/DisplayBox-7f75756f.js

@@ -1,5 +0,0 @@
-import { I as m } from "./index-8c79cd61.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpAlert-8bea1cc6.js

@@ -1,5 +0,0 @@
-import { E as m } from "./index-8c79cd61.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpAudio-15f6ad49.js

@@ -1,5 +0,0 @@
-import { w as m } from "./index-8c79cd61.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpBadge-3c86b448.js

@@ -1,5 +0,0 @@
-import { b as m } from "./index-8c79cd61.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpBarChart-8d6c96e7.js

@@ -1,5 +0,0 @@
-import { n as m } from "./index-8c79cd61.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpBtn-87f90799.js

@@ -1,5 +0,0 @@
-import { c as m } from "./index-8c79cd61.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpCard-61fc7afd.js

@@ -1,5 +0,0 @@
-import { d as m } from "./index-8c79cd61.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpCheckbox-fe632df9.js

@@ -1,36 +0,0 @@
-import { defineComponent as u, toRefs as p, openBlock as f, createElementBlock as b, createElementVNode as a, unref as e, toDisplayString as m } from "vue";
-const y = ["id", "type", "value", "disabled", "readonly", "checked"], h = ["for", "disabled"], B = /* @__PURE__ */ u({
-  __name: "EpCheckbox",
-  props: {
-    id: { default: "0" },
-    label: { default: "check" },
-    modelValue: { default: "" },
-    type: { default: "checkbox" },
-    disabled: { type: Boolean, default: !1 },
-    readonly: { type: Boolean, default: !1 },
-    checked: { type: Boolean, default: !1 }
-  },
-  emits: ["update:modelValue"],
-  setup(o, { emit: k }) {
-    const t = o, { id: l, label: n, type: c, modelValue: s, disabled: d, readonly: r, checked: i } = p(t);
-    return (_, x) => (f(), b("div", null, [
-      a("input", {
-        id: e(l),
-        type: e(c),
-        value: e(s),
-        class: "form-checkbox rounded border-neutral-300 text-blue-600 h-[1.125rem] w-[1.125rem] mr-2 disabled:opacity-40 disabled:cursor-not-allowed",
-        disabled: e(d),
-        readonly: e(r),
-        checked: e(i)
-      }, null, 8, y),
-      a("label", {
-        for: e(l),
-        class: "disabled:opacity-40 hover:pointer-events-none",
-        disabled: e(d)
-      }, m(e(n)), 9, h)
-    ]));
-  }
-});
-export {
-  B as default
-};

package/dist/EpChip-16e2c87e.js

@@ -1,5 +0,0 @@
-import { e as m } from "./index-8c79cd61.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpDivider-407d1497.js

@@ -1,5 +0,0 @@
-import { f } from "./index-8c79cd61.js";
-import "vue";
-export {
-  f as default
-};

package/dist/EpEdu-f9179a45.js

@@ -1,5 +0,0 @@
-import { p as m } from "./index-8c79cd61.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpFlex-9e2d21f7.js

@@ -1,5 +0,0 @@
-import { g as m } from "./index-8c79cd61.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpHeader-1397bf98.js

@@ -1,5 +0,0 @@
-import { F as m } from "./index-8c79cd61.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpIcon-f4dc52bb.js

@@ -1,5 +0,0 @@
-import { h as m } from "./index-8c79cd61.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpIframe-2cbac751.js

@@ -1,5 +0,0 @@
-import { x as m } from "./index-8c79cd61.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpImg-b94ff028.js

@@ -1,5 +0,0 @@
-import { i } from "./index-8c79cd61.js";
-import "vue";
-export {
-  i as default
-};