ep-lib-ts 1.0.56 → 1.0.58

package/src/components/medias/EpLottieSvg.vue

@@ -1,79 +0,0 @@
-<script lang="ts" setup>
-import { DotLottieVue } from '@lottiefiles/dotlottie-vue';
-
-import { ref, watchEffect } from 'vue';
-
-interface Props {
-    src: string;
-    autoPlay?: boolean;
-    loop?: boolean;
-    speed?: number | string;
-    width?: number | string;
-    height?: number | string;
-    pauseOnClick?: boolean;
-    pauseButton?: boolean;
-    playOnHover?: boolean;
-    onComplete?: () => void;
-}
-
-
-const props = withDefaults(defineProps<Props>(), {
-    autoPlay: false,
-    loop: false,
-    speed: 1,
-    width: 150,
-    height: 150,
-    pauseOnClick: false,
-    pauseButton: false,
-    playOnHover: false
-});
-
-const buttonText = ref((props.autoPlay) ? "Arrêter" : "Jouer");
-
-const playerRef = ref<any | null>(null);
-
-const managePlayState = () => {
-
-    if(playerRef.value) {
-        if(playerRef.value.getDotLottieInstance().isPlaying) {
-            playerRef.value.getDotLottieInstance().pause();
-            buttonText.value = "Jouer";
-        }
-        else {
-            playerRef.value.getDotLottieInstance().play();
-            buttonText.value = "Arrêter";
-        }
-    }
-}
-
-watchEffect(() => {
-    if(playerRef.value) {
-        playerRef.value.getDotLottieInstance().addEventListener('complete', () => {
-            if(props.onComplete) {
-                props.onComplete();
-            }
-        });
-    }
-})
-
-
-</script>
-
-
-<template>
-    <div class="flex flex-col items-center">
-        <DotLottieVue
-            :src="src"
-            :loop="loop"
-            :autoplay="autoPlay"
-            :style="`width: ${width}px; height: ${height}px;`"
-            :speed="Number(speed)"
-            :play-on-hover="playOnHover"
-            ref="playerRef"
-            @click="(pauseOnClick)? managePlayState() : ''"
-        />
-        <button class="rounded bg-blue-500 text-white py-2 px-4 min-w-28 my-3" v-if="pauseButton" @click="managePlayState">{{ buttonText }}</button>
-    </div>
-
-</template>
-

package/src/components/medias/EpSoftware.vue

@@ -1,92 +0,0 @@
-<script setup lang="ts">
-import { toRefs, computed } from "vue";
-import EpIcon from "../basics/EpIcon.vue";
-import EpBtn from "../basics/EpBtn.vue";
-import EpChip from "../basics/EpChip.vue";
-import EpEdu from "../educationals/EpEdu.vue";
-import { type MediaVariants } from "../../types/Medias";
-import { type MandateLevel } from '../../types/MandateLevel';
-import { useRenderText } from "../../composables/useRenderText";
-
-import { mdiLaptop } from "@mdi/js";
-import { mdiOpenInNew } from "@mdi/js";
-
-interface Props {
-  url?: string;
-  cover?: string;
-  title: string;
-  mandateLevel?:MandateLevel | null;
-  intentions?: string;
-  hideCover?: boolean;
-  version?: string;
-  type?:MediaVariants;
-  hideIcon?:boolean;
-  labelCard?:string;
-  labelIntentions?:string;
-  labelAccess?:string; 
-}
-
-// type, taxonomyLevel, courseCode, courseTitle, title, subtitle, height, src, color, synchrone
-
-const props = withDefaults(defineProps<Props>(), {
-  icon: "mdiLaptop",
-  hideCover: false,
-  intentions: "",
-  cover:"",
-  type:"base",
-  hideIcon:false,
-  labelAccess:"Accéder au logiciel"
-});
-
-const old_image = "https://live.staticflickr.com/4868/45940268562_c5f7fdd06b_q.jpg";
-
-const hasCover = computed(() => {
-  if (props.cover === old_image || props.cover.trim().length === 0) {
-    return false;
-  }
-  return true;
-});
-
-
-const { title, intentions, cover, hideCover, version, labelCard, hideIcon, mandateLevel, url } = toRefs(props);
-</script>
-
-<template>
-  <EpEdu :title="labelCard" :labelIntentions="labelIntentions"  :icon="mdiLaptop" flat :type="type" :hideIcon="hideIcon" :mandateLevel="mandateLevel">
-     <template #intentions v-if="intentions">
-         <div v-html="useRenderText(intentions)"></div>
-      </template>
-    <template #content>
-      
-      <div
-        class="flex flex-col items-center border rounded-lg bg-base-light md:flex-row mt-2 dark:bg-dark"
-      >
-        <template v-if="!hideCover">
-          <img
-            v-if="hasCover"
-            class="h-24 w-full rounded-t-lg object-cover md:h-auto md:w-24 md:rounded-none md:rounded-l-lg"
-            :src="cover"
-            :alt="`image de la lecture ${title}`"
-          />
-          <div
-            v-else
-            class="h-96 w-full rounded-t-lg md:h-auto md:w-56 md:rounded-none md:rounded-l-lg flex justify-center items-center text-base-dark dark:text-white"
-          >
-            <EpIcon :icon-path="mdiLaptop" size="95"></EpIcon>
-          </div>
-        </template>
-        <div class="w-full">
-          <div class="w-full px-5">
-            <div class="flex justify-between items-center rounded-t-md p-2">
-              <h4>{{ title }} <EpChip size="small" type="primary" v-if="version">{{version}}</EpChip></h4>
-              <EpBtn v-if="url" rounded type="primary" :prependIcon="mdiOpenInNew" :href="url"
-                >{{labelAccess}}</EpBtn
-              >
-            </div>
-          </div>
-        </div>
-      </div>
-    </template>
-    <template #actions></template>
-  </EpEdu>
-</template>

package/src/components/medias/EpSvg.vue

@@ -1,66 +0,0 @@
-<script setup lang="ts">
-import { toRefs, computed } from 'vue';
-import { cols_img } from "../../types/Image";
-import { type MediaVariants } from "../../types/Medias";
-import { type 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?:MandateLevel | null;
-   type?:MediaVariants;
-   cols?:string | number;
-   labelIntentions?:string;
-   hideIcon?:boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  cols: "6",
-})
-
-const renderCols = computed(() => {
-  // console.log(+props.cols)
-  // console.log(Cols[+props.cols])
-   return cols_img[+props.cols]
-})
-
-const renderText = computed(()=> {
-    if(props.desc){
-      return useRenderText(props.desc)
-    }
-    return null
-})
-
-
-
-const {title, content} = toRefs(props)
- 
-</script>
-
-<template>
-  <EpEdu 
-   :title="title" 
-   :hideIcon="hideIcon" 
-   :icon="mdiImage" 
-   :labelIntentions="labelIntentions"
-   flat 
-   :type="type" 
-   :mandateLevel="mandateLevel">
-    <template #intentions v-if="renderText">
-      <div v-html="renderText"></div>
-    </template>
-    <template #content>
-        <div class="flex">
-          <div v-if="content" :class="`mx-auto ${renderCols}`">
-             <div v-html="content" class="w-full"></div>
-          </div>
-        </div>
-    </template>
-  </EpEdu>
-</template>

package/src/components/medias/EpTerm.vue

@@ -1,174 +0,0 @@
-<script setup lang="ts">
-import { ref, toRefs, computed} from "vue";
-import { useRouter } from "vue-router";
-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";
-
-
-interface Props {
-  term: string;
-  word: string;
-  definition?: string;
-  variations?: string;
-  domain?: string;
-  graminfo?: string;
-  relations?: string;
-  src?:string;
-  labelDefinition?: string;  
-  labelDomain?:string;      
-  labelVariations?: string;  
-  labelRelations?: string; 
-  labelClose?:string;  
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  term: "test",
-  variations: "",
-  relations: "",
-  idrelation: "",
-  labelDefinition: "Définition",
-  labelDomain:"Domaine",
-  labelVariations: "Variations",
-  labelRelations: "Relations",
-  labelClose:"Fermer"
-});
-
-const show = ref(false);
-
-
-const subtitle = computed(() => {
-  if (props.term !== props.word) {
-    return `(${props.word})`;
-  }
-  return null;
-});
-
-const renderVariations = computed(() => {
-  let renderVariations = null;
-  let valueprops = props.variations?.trim();
-  if (valueprops?.length > 0) {
-    renderVariations = valueprops.split(",");
-  }
-  return renderVariations;
-});
-
-const renderRelations = computed(() => {
-  let renderRelations = null;
-  let valueprops = props.relations?.trim();
-  if (valueprops?.length > 0) {
-    renderRelations = valueprops.split(",");
-  }
-  return renderRelations;
-});
-
-
-const router = useRouter()
-const goto = (term:string) =>{
-  if(router.hasRoute('glossary')){
-    router.push({ path: "/glossary", query:{word:term} });
-  }
-  //console.log(router.hasRoute('signages'))
-  //
-}
-// const relationsID = computed(() => {
-//   let relationsID = null;
-//   let valueprops = props.idrelation?.trim();
-//   if (valueprops?.length > 0) {
-//     relationsID = valueprops.split(",");
-//   }
-//   return relationsID;
-// });
-
-const renderDomain = computed(() => {
-  if (props.domain === "null") {
-    return null;
-  }
-  return props.domain;
-});
-
-const toggleModal = () => {
-  show.value = !show.value
-}
-/*
-const el = (contentref:any) => {
-   const contentHtml = contentref.innerHTML 
-   const renderHtml = useRenderText(contentHtml)
-   contentref.innerHTML = renderHtml
-}*/
-
-const { term, graminfo,src } = toRefs(props);
-</script>
-
-<template>
-  <span
-    @click="toggleModal"
-    class="cursor-pointer border-primary dark:border-main-color-500 border dark:text-main-color-500 text-primary px-2 py-1 rounded group overflow-hidden relative"
-  >
-    <span
-      class="absolute top-0 left-0 flex w-full h-0 mb-0 transition-all duration-300 ease-out transform translate-y-0 bg-primary dark:bg-main-color-500 group-hover:h-full opacity-90"
-    ></span>
-    <span class="relative group-hover:text-white"
-      >{{ word }}
-      <EpIcon :icon-path="mdiBookmarkMultipleOutline" size="18"></EpIcon>
-    </span>
-  </span>
-
-  <EpModal v-model="show" size="compact">
-    <div class="mb-2 flex items-center justify-between">
-      <div>
-        <h3 class="font-bold text-2xl">
-          {{ term }}
-          <span class="text-sm font-light text-error italic">{{
-            graminfo
-          }}</span>
-        </h3>
-        <h4 class="text-xs" v-if="subtitle">{{ subtitle }}</h4>
-      </div>
-      <div>
-        <EpIcon :icon-path="mdiBookmarkMultipleOutline"></EpIcon>
-      </div>
-    </div>
-    <EpDivider color="primary" margin="mb-2"></EpDivider>
-    <div class="mb-4 flex items-center justify-between">
-      <h3 class="text-primary font-bold">{{labelDefinition}}</h3>
-      <span class="text-xs" v-if="renderDomain"
-        >{{labelDomain}} : <span class="font-bold">{{ renderDomain }}</span></span
-      >
-    </div>
-    <!-- <div v-html="renderText"></div> -->
-    <div>
-      <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">{{labelVariations}} :</span>
-      <span v-for="(variation, i) in renderVariations" :key="`variation-${i}`">
-        {{ variation }}{{ renderVariations.length > i + 1 ? ", " : "." }}
-      </span>
-    </div>
-    <div class="text-sm mt-2" v-if="renderRelations">
-      <span class="mr-2 font-bold">{{labelRelations}} :</span>
-      <template v-for="(relation, i) in renderRelations"
-        :key="`relation-${i}`">
-        <EpBtn
-          size="small"
-          rounded
-          extra-class="mr-2"
-          @click="goto(relation)"
-        >{{ relation }}</EpBtn>
-      </template>
-  
-    </div>
-    <div class="flex justify-end">
-      <EpBtn type="error" outlined @click="show = false" rounded>{{
-        labelClose
-      }}</EpBtn>
-    </div>
-  </EpModal>
-</template>

package/src/components/medias/EpTimeLine.vue

@@ -1,109 +0,0 @@
-<script setup lang="ts">
-import { ref, toRefs, onMounted, computed } from 'vue';
-//types in capital letter
-import { type TagTimeLine, type HeadTimeLine, type EventTimeLine, type 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 {
-  text:{ 
-      text: string
-      headline: string
-  }
-}
-
-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>
-  <!-- component -->
-  <div>
-    <div class="w-10/12 mx-auto relative">
-      <h3 class="text-2xl mb-2">{{ title?.text.headline }}</h3>
-      <p>{{ title?.text.text}}</p>
-      <div class="my-4 px-2">
-        <template v-for="tag in timeLineTags" :key="tag.id">
-          <span @click="toggleActive(tag)"
-            :class="`mr-2 mb-2 inline-block 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 dark:border-l-gray-500">
-        <TransitionGroup name="list" tag="div">
-          <template v-for="(item, i) in filteredEvents" :key="`${i}-card-${item.id}`">
-            <TimeLineItem :event="item"></TimeLineItem>
-          </template>
-        </TransitionGroup>
-      </div>
-    </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/medias/EpVideo.vue

@@ -1,130 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, toRefs } from "vue";
-//types with capital letter, object styles in lowercase
-import { MediaVariants } from "../../types/Medias";
-import { MandateLevel } from "../../types/MandateLevel";
-import { isHtml } from "../../composables/isHtml";
-import { useMarkdown } from "../../composables/useMarkdown";
-import { mdiVideo } from "@mdi/js";
-
-//import { useMediaControls } from '@vueuse/core'
-import EpEdu from "../educationals/EpEdu.vue";
-
-interface Props {
-  src: string;
-  title?: string;
-  intentions?: string;
-  credits?: string;
-  mandateLevel?: MandateLevel | null;
-  type?: MediaVariants;
-  hideIcon?: boolean;
-  labelIntentions?: string;
-  big?:boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  type: "neutral",
-  hideIcon: false,
-  labelIntentions: "Intentions d'écoute",
-});
-
-//only to make custum video player
-const video = ref<HTMLVideoElement>();
-
-const isVideoFormat = computed(() => {
-  if (
-    props.src.endsWith(".mp4") ||
-    props.src.endsWith(".ogg") ||
-    props.src.endsWith(".webm")
-  ) {
-    return true;
-  }
-  return false;
-});
-
-const videoURL = computed(() => {
-  const url = props.src;
-  if (!isVideoFormat.value && url.includes("https://vimeo.com/")) {
-    return url.replace("https://vimeo.com/", "https://player.vimeo.com/video/");
-  }
-  if (!isVideoFormat.value && url.includes("https://www.youtube.com/watch?")) {
-    return url.replace(
-      "https://www.youtube.com/watch?v=",
-      "https://www.youtube.com/embed/"
-    );
-  }
-  //extra to short url youtube
-  if (!isVideoFormat.value && url.includes("https://youtu.be/")) {
-    const id = getIdYoutube(url);
-    if (id) {
-      return `https://www.youtube.com/embed/${id}`;
-    }
-  }
-  return url;
-});
-
-const renderText = computed(() => {
-  if (!props.intentions) {
-    return null;
-  }
-  if (!isHtml(props.intentions)) {
-    return useMarkdown(props.intentions);
-  }
-  return props.intentions;
-});
-
-const getIdYoutube = (url: string): string | null => {
-  const match = url.match(/\/([^\/]+)$/);
-  return match ? match[1] : null;
-};
-
-const sizeVideo = computed(()=> {
-   if(props.big){
-      return "650"
-   }
-   return "360"
-})
-
-//controls
-//const controls = useMediaControls(video, {src:props.src})
-const { src, title, hideIcon, type, labelIntentions } = toRefs(props);
-</script>
-
-<template>
-  <EpEdu
-    :title="title"
-    :type="type"
-    :hideIcon="hideIcon"
-    :icon="mdiVideo"
-    :mandateLevel="mandateLevel"
-    :labelIntentions="labelIntentions"
-  >
-    <template #intentions v-if="renderText && renderText.length > 0">
-      <div v-html="renderText"></div>
-    </template>
-    <template #content>
-      <div :class="!big?'max-w-screen-sm mx-auto':''">
-        <video
-          v-if="isVideoFormat"
-          ref="video"
-          controls
-          :src="src"
-          width="100%"
-          controlsList="nodownload"
-        ></video>
-      
-        <iframe
-          v-else
-          :src="videoURL"
-          width="100%"
-          :height="sizeVideo"
-          frameborder="0"
-          allowfullscreen
-        ></iframe>
-      </div>
-    </template>
-    <!-- <template #actions>
-       <EpBtn :color="type=='base'?'text-gray-700':'text-white'" :type="type">[Repair btn style... to change]</EpBtn>
-     </template> -->
-  </EpEdu>
-</template>