ep-lib-ts 1.0.55 → 1.0.57

package/src/components/medias/EpAudio.vue

@@ -1,97 +0,0 @@
-<script setup lang="ts">
-//https://github.com/snfas/protheus/commit/50ec10efc3b5537228edf436ee7ba8f540113485#diff-f4418614aaa0b05457cb0a6ffc674273b35a77cd5481113318603f0524467150
-import { computed, toRefs } from 'vue'
-//types with capital letter, object styles in lowercase
-import { type MediaVariants } from "../../types/Medias";
-import { type MandateLevel } from '../../types/MandateLevel';
-import { isHtml } from '../../composables/isHtml';
-import { useMarkdown } from '../../composables/useMarkdown'
-import { mdiHeadphones } from "@mdi/js";
-import useColors from '../../composables/useColors'
-//import { useMediaControls } from '@vueuse/core'
-import BgAudio from '../tools/BgAudio.vue'
-import EpAlert from '../signages/EpAlert.vue';
-import EpEdu from '../educationals/EpEdu.vue';
-
-interface Props {
-   src: string;
-   title?: string;
-   intentions?: string;
-   bgImg?:string;
-   type?: MediaVariants;  
-   hideIcon?: boolean;
-   mandateLevel?:MandateLevel | null;
-   labelIntentions?: string;
-   messageError?:string;
-}
-
-const props = withDefaults(defineProps<Props>(), { 
-   type: 'neutral',
-   hideIcon: false,
-   labelIntentions: "Intentions d'écoute",
-   messageError:"Mauvais url"
-})
-
-//regex url panopto udem
-const hasmp4 = /\.mp4\?/
-
-const cleanSrc = computed(() => {
-   let srcString = props.src
-   const isPanopto = hasmp4.test(props.src)
-   if(isPanopto){
-      srcString = srcString.replace(/\.mp4.*$/, '.mp4')
-   }
-   return srcString
-})
-
-
-const isAudioFormat = computed(() => {
-   if (cleanSrc.value.endsWith('.mp3') || cleanSrc.value.endsWith('.mp4') || cleanSrc.value.endsWith('.ogg') || cleanSrc.value.endsWith('.wav')) {
-      return true
-   }
-   return false
-})
-
-const bgColor = computed(() => {
-   return useColors('fill', props.type)
-})
-
-const renderText = computed(() => {
-   if (!props.intentions) {
-      return null
-   }
-   if (!isHtml(props.intentions)) {
-      return useMarkdown(props.intentions)
-   }
-   return props.intentions
-})
-
-//controls
-//const controls = useMediaControls(video, {src:props.src})
-
-const { src, title, hideIcon, mandateLevel, bgImg } = toRefs(props)
-
-</script>
-
-<template>
-
-   <EpEdu :title="title" :labelIntentions="labelIntentions" :type="type" :hideIcon="hideIcon" :icon="mdiHeadphones" :mandateLevel="mandateLevel">
-      <template #intentions v-if="renderText">
-         <div v-html="renderText"></div>
-      </template>
-      <template #content>
-         <div class="max-w-screen-sm mx-auto">
-            <BgAudio :fill="bgColor" v-if="!bgImg"></BgAudio>
-            <img v-else :src="bgImg">
-            <audio v-if="isAudioFormat" ref="video" controls :src="cleanSrc" controlsList="nodownload"></audio>
-            <EpAlert type="error" outlined v-else>
-               <p>{{ messageError }}</p>
-            </EpAlert>
-         </div>
-      </template>
-      <!-- <template #actions>
-       <EpBtn :color="type=='base'?'text-gray-700':'text-white'" :type="type">[Repair btn style... to change]</EpBtn>
-     </template> -->
-   </EpEdu>
-</template>
-

package/src/components/medias/EpCardLink.vue

@@ -1,82 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useRouter } from 'vue-router';
-import EpCard from '../basics/EpCard.vue';
-import type { MaxWidth } from "../../types/Hover";
-import { mdiChevronRight } from "@mdi/js";
-interface Props {
-    title?: string | null;
-    subtitle?: string | null;
-    outlined?: boolean;
-    flat?: boolean;
-    color?: string | null;
-    src?: string | null;
-    svg?: string;
-    maxWidth?: MaxWidth;
-    center?: boolean;
-    content?: string;
-    iconlink?: string;
-    to?: string;
-    nuxtLink?: boolean;
-    isExternal?: boolean;
-    disabled?:boolean;
-}
-
-
-const props = withDefaults(defineProps<Props>(), {
-    //defaults ? ...
-    svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>dog</title><path d="M18,4C16.29,4 15.25,4.33 14.65,4.61C13.88,4.23 13,4 12,4C11,4 10.12,4.23 9.35,4.61C8.75,4.33 7.71,4 6,4C3,4 1,12 1,14C1,14.83 2.32,15.59 4.14,15.9C4.78,18.14 7.8,19.85 11.5,20V15.72C10.91,15.35 10,14.68 10,14C10,13 12,13 12,13C12,13 14,13 14,14C14,14.68 13.09,15.35 12.5,15.72V20C16.2,19.85 19.22,18.14 19.86,15.9C21.68,15.59 23,14.83 23,14C23,12 21,4 18,4M4.15,13.87C3.65,13.75 3.26,13.61 3,13.5C3.25,10.73 5.2,6.4 6.05,6C6.59,6 7,6.06 7.37,6.11C5.27,8.42 4.44,12.04 4.15,13.87M9,12A1,1 0 0,1 8,11C8,10.46 8.45,10 9,10A1,1 0 0,1 10,11C10,11.56 9.55,12 9,12M15,12A1,1 0 0,1 14,11C14,10.46 14.45,10 15,10A1,1 0 0,1 16,11C16,11.56 15.55,12 15,12M19.85,13.87C19.56,12.04 18.73,8.42 16.63,6.11C17,6.06 17.41,6 17.95,6C18.8,6.4 20.75,10.73 21,13.5C20.75,13.61 20.36,13.75 19.85,13.87Z" /></svg>',
-    maxWidth: "max-w-md",
-    center: false,
-    iconlink: mdiChevronRight,
-    nuxtLink: false,
-    to: '/',
-    isExternal: false,
-    disabled:false
-})
-
-const centerCard = computed(() => {
-    if (props.center) {
-        return 'mx-auto'
-    }
-    return ''
-})
-
-const router = useRouter();
-
-const navigate = (to: string) => {
-    if (!props.isExternal && !props.disabled) {
-        router.push(to);
-    }
-};
-
-
-</script>
-
-<template>
-    <div :class="`${centerCard} ${maxWidth}`">
-        <a v-if="isExternal" :href="to" target="_blank" rel="noopener noreferrer">
-            <EpCard 
-              :title="title" 
-              :subtitle="subtitle" 
-              :src="src" 
-              :svg="svg" 
-              :maxWidth="maxWidth" 
-              :icon="iconlink"
-                isLink />
-        </a>
-        <div @click="navigate(to)" v-else>
-            <EpCard 
-              :title="title" 
-              :subtitle="subtitle" 
-              :src="src" 
-              :svg="svg" 
-              :maxWidth="maxWidth" 
-              :icon="iconlink"
-              isLink />
-        </div>
-
-
-    </div>
-
-</template>

package/src/components/medias/EpCarousel.vue

@@ -1,190 +0,0 @@
-<script setup lang="ts">
-import { toRefs, ref, computed } from "vue";
-import { mdiChevronLeftCircleOutline } from "@mdi/js";
-import { mdiChevronRightCircleOutline } from "@mdi/js";
-import { type MediaCarousel } from "../../types/MediaCarousel";
-import { InfoModal, type SizeThumbnail } from "../../types/Image";
-import EpIcon from "../basics/EpIcon.vue";
-import EpBtn from "../basics/EpBtn.vue";
-import EpModal from "../interactions/EpModal.vue";
-import EpImg from "../basics/EpImg.vue";
-import EpImgCarousel from "../basics/EpImgCarousel.vue";
-
-interface Props {
-  carrouselImg: MediaCarousel[];
-  title?: string;
-  gallery?: boolean;
-  puzzle?: boolean;
-  sizeThumbnail?: SizeThumbnail;
-  isCenter?:boolean;
-  labelClose?:string;
-  labelRef?:string;
-  labelRefLib?:string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  gallery: false,
-  isCenter:false,
-  puzzle:false,
-  sizeThumbnail: "medium",
-  labelRef:"Référence",
-  labelClose:"Fermer",
-  labelRefLib:"Référence bibliographique",
-});
-
-
-// Logique Carousel normal
-const currentIndex = ref<number>(0);
-const dialog = ref<boolean>(false);
-
-const prevSlide = () => {
-  const isFirstSlide = currentIndex.value === 0;
-  const newIndex = isFirstSlide
-    ? props.carrouselImg.length - 1
-    : currentIndex.value - 1;
-  currentIndex.value = newIndex;
-};
-
-const nextSlide = () => {
-  const isTheLastSlide = currentIndex.value === props.carrouselImg.length - 1;
-  const newIndex = isTheLastSlide ? 0 : currentIndex.value + 1;
-  currentIndex.value = newIndex;
-};
-
-const isCenterStyle = computed(()=> {
-  return props.isCenter ? 'justify-center':''
-});
-
-
-
-// Logique Carousel gallery
-const managedIndex = ref(0);
-const managedInfoModal = ref({ src: '', caption: '', bib: ''} as InfoModal);
-
-
-const newFocus = (index: number) => {
-  managedIndex.value = index;
-  managedInfoModal.value = { src: props.carrouselImg[index].src, caption: props.carrouselImg[index].caption, bib: props.carrouselImg[index].bib };
-}
-
-const managedPrevSlide = () => {
-  const isFirstSlide = managedIndex.value === 0;
-  const newIndex = isFirstSlide
-    ? props.carrouselImg.length - 1
-    : managedIndex.value - 1;
-  managedIndex.value = newIndex;
-  managedInfoModal.value = { src: props.carrouselImg[newIndex].src, caption: props.carrouselImg[newIndex].caption, bib: props.carrouselImg[newIndex].bib };
-}
-
-const managedNextSlide = () => {
-  const isTheLastSlide = managedIndex.value === props.carrouselImg.length - 1;
-  const newIndex = isTheLastSlide ? 0 : managedIndex.value + 1;
-  managedIndex.value = newIndex;
-  managedInfoModal.value = { src: props.carrouselImg[newIndex].src, caption: props.carrouselImg[newIndex].caption, bib: props.carrouselImg[newIndex].bib };
-}
-
-
-
-const { carrouselImg, sizeThumbnail } = toRefs(props);
-</script>
-
-<template>
-
-  <h2 v-if="props.title" class="text-xl font-semibold mt-10 mb-4 text-center">{{ props.title }}</h2>
-
-
-  <div v-if="!gallery">
-    <div class="flex items-center justify-center mb-2">
-      <button class="p-2" @click="prevSlide">
-        <EpIcon :icon-path="mdiChevronLeftCircleOutline"></EpIcon>
-      </button>
-      {{ currentIndex + 1 }}/{{ carrouselImg.length }}
-      <button class="p-2" @click="nextSlide">
-        <EpIcon :icon-path="mdiChevronRightCircleOutline"></EpIcon>
-      </button>
-    </div>
-    <div
-      class="bg-white dark:bg-dark shadow-xl p-4 lg:max-w-[800px] mx-auto border-solid border"
-    >
-      <!-- <div class="max-w-[800px] h-[550px] m-auto relative">
-        <div
-          class="w-full h-full bg-center duration-500"
-          :style="`background-image:url('${carrouselImg[currentIndex].src}')`"
-        ></div>
-      </div> -->
-
-      <img
-        :src="carrouselImg[currentIndex].src"
-        alt="image"
-        class="rounded-sm m-auto"
-      />
-
-      <div
-        v-if="carrouselImg[currentIndex]?.caption"
-        class="mt-2 text-sm text-center text-base-dark dark:text-white"
-      >
-        {{ carrouselImg[currentIndex].caption }}
-      </div>
-      <div v-if="carrouselImg[currentIndex]?.bib" class="flex justify-end mt-2">
-        <EpBtn type="primary" @click="dialog = true" dark>{{ labelRef }}</EpBtn>
-      </div>
-    </div>
-    <EpModal v-model="dialog" :title="labelRefLib">
-      <div v-html="carrouselImg[currentIndex].bib"></div>
-      <div class="flex justify-end">
-        <EpBtn @click="dialog = false" type="primary" dark>{{
-          labelClose
-        }}</EpBtn>
-      </div>
-    </EpModal>
-  </div>
-
-  <div v-else-if="!puzzle" :class="`flex flex-wrap ${isCenterStyle}`">
-    <template v-for="(image, index) in carrouselImg" :key="`image-${image?.uid}`">
-      <EpImgCarousel
-        :src="image.src"
-        :bib="image.bib"
-        :caption="image.caption"
-        :label-ref="labelRef"
-        :label-close="labelClose"
-        :size-thumbnail="sizeThumbnail"
-        managed-modal
-        @new-focus="newFocus(index)"
-        :info-modal="managedInfoModal"
-        @prev-slide="managedPrevSlide"
-        @next-slide="managedNextSlide"
-      ></EpImgCarousel>
-    </template>
-  </div>
-
-  <div v-else-if="puzzle" :class="`columns-3xs mx-5 gap-2`">
-    <template v-for="(image, index) in carrouselImg" :key="`image-${image?.uid}`">
-      <EpImgCarousel
-        :src="image.src"
-        :bib="image.bib"
-        :caption="image.caption"
-        :label-ref="labelRef"
-        :label-close="labelClose"
-        puzzle
-        managed-modal
-        @new-focus="newFocus(index)"
-        :info-modal="managedInfoModal"
-        @prev-slide="managedPrevSlide"
-        @next-slide="managedNextSlide"
-      ></EpImgCarousel> 
-    </template>
-  </div>
-
-</template>
-
-<style scoped>
-.v-enter-active,
-.v-leave-active {
-  transition: opacity 0.5s ease;
-}
-
-.v-enter-from,
-.v-leave-to {
-  opacity: 0;
-}
-</style>