ep-lib-ts 1.0.56 → 1.0.58

package/src/components/medias/EpVideoPanopto.vue

@@ -1,71 +0,0 @@
-<script setup lang="ts">
-import { 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;
-   labelIntentions?:string;
-   type?:MediaVariants;
-   hideIcon?:boolean;
-   big?:boolean;
-}
-
-const props = withDefaults(defineProps<Props>(),{ 
-   labelIntentions:"Intentions d'écoute",
-   type:'neutral',
-   hideIcon:false,
-})
-
-
-
-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 sizeVideo = computed(()=> {
-   if(props.big){
-      return "650"
-   }
-   return "360"
-})
-
-const {src, title, hideIcon, type} = toRefs(props)
-
-</script>
-
-<template>
- 
-   <EpEdu :title="title" :type="type" :hideIcon="hideIcon" :icon="mdiVideo" :mandateLevel="mandateLevel" :labelIntentions="labelIntentions">
-     <template #intentions v-if="renderText">
-       <div v-html="renderText" ></div>
-     </template>
-     <template #content>
-      <div :class="!big?'max-w-screen-sm mx-auto':''">
-         <iframe :src="src" 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>

package/src/components/medias/EpWordDef.vue

@@ -1,142 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from 'vue';
-import EpImg from '../basics/EpImg.vue';
-import { useCreateUid } from '../../composables/useCreateUid';
-import { useRenderText } from '../../composables/useRenderText';
-import { useRouter } from "vue-router";
-
-
-interface Relation {
-    termId: string;
-    term: string;
-}
-
-
-interface Props {
-    uid?:string;
-    term:string;
-    description:string;
-    content:{
-      gramInfo?: string | null
-      domain?: string | null
-      definition?: string
-      image?: string
-    }
-    relation:Relation[];
-    variation:string[];
-    cols?:number|string; 
-    labelInformation?: string;  
-    labelDomain?:string;      
-    labelVariations?: string;  
-    labelRelations?: string; 
-    labelNoDefinition?:string; 
-}    
-
-
-const props = withDefaults(defineProps<Props>(), {
-    labelInformation:"Information grammaticale",    
-    labelDomain:"Domaine",
-    labelRelations:"Relations" ,
-    labelNoDefinition:"La definition n'est pas disponible",
-    labelVariations:"Variation(s)",
-    cols:"10"
-});
-
-const sizeGramIngo = computed(() => {
-    if (props.content) {
-        return props.content.domain || props.variation.length > 0 ? 'w-1/3' : 'w-full'
-    }
-    return ''
-})
-
-const sizeDomain = computed(() => {
-    if (props.variation) {
-        return props.variation.length > 0 ? 'w-1/4' : 'w-3/4'
-    }
-    return ''
-})
-
-const sizeVariations = computed(() => {
-    if (props.content) {
-        return props.content.domain ? 'w-2/4' : 'w-3/4'
-    }
-    return ''
-})
-
-/*
-const findRelations = (relations: string[]): { id: number | string, term: string }[] => {
-  let _relations = props.glossary.filter((term) => {
-    return relations.some((x) => {
-      return term.id === x;
-    });
-  });
-  return _relations.map((x) => ({id:x.id, term:x.term}));
-};*/
-
-const router = useRouter()
-const goto = (term:string) =>{
-  if(router.hasRoute('glossary')){
-    router.push({ path: "/glossary", query:{word:term} });
-  }
-  //console.log(router.hasRoute('signages'))
-  //
-}
-
-const id = ref(props.uid || useCreateUid());
-
-</script>
-
-<template>
-    <div class="dark:bg-dark" :id="id">
-        <div v-if="term && description">
-            <div class="h-min border border-base rounded-lg divide-y">
-                <h2 class="text-xl font-semibold p-2">{{ term }}</h2>
-                <div class="flex justify-between">
-                    <div :class="sizeGramIngo">
-                        <p class="text-sm font-medium bg-base-light dark:text-dark p-2">
-                            {{labelInformation}}
-                        </p>
-                        <div class="px-2 py-1" v-if="content.gramInfo">{{ content.gramInfo }}</div>
-                    </div>
-                    <div :class="sizeDomain" v-if="content.domain">
-                        <p class="text-sm font-medium bg-base-light dark:text-dark p-2">{{labelDomain}}</p>
-                        <div class="px-2 py-1">{{ content.domain }}</div>
-                    </div>
-                    <div :class="sizeVariations" v-if="variation.length > 0">
-                        <p class="text-sm font-medium bg-base-light dark:text-dark p-2">{{labelVariations}}</p>
-                        <div class="px-2 py-1">
-                            <span v-for="(_variation, i) in variation" :key="`v-${i}`">{{ _variation }}{{
-                                variation.length > i + 1 ? ", " :
-                                "." }}</span>
-                        </div>
-                    </div>
-                </div>
-                <template v-if="!content.image">
-                    <div class="px-2 py-6" v-html="useRenderText(description)"></div>
-                </template>
-                <template v-else>
-                    <div class="flex flex-row justify-between">
-                        <div class="px-2 py-6" v-html="useRenderText(description)"></div>
-                        <div class="flex w-1/2 justify-center p-2">
-                            <EpImg :src="content.image" :cols="cols"/>
-                        </div>
-                    </div>
-                </template>
-
-                <div>
-                    <div v-if="relation.length > 0">
-                        <p class="text-sm font-medium bg-base-light dark:text-dark p-2"> {{labelRelations}}</p>
-                        <div class="p-2">
-                             <template v-for="(_relation, i) in relation" :key="`relation-${i}`">
-                                <button class="p-1 border rounded mr-1" @click="goto(_relation.termId)">
-                                    {{ _relation.term }}
-                                </button>
-                            </template> 
-                        </div>
-                    </div>
-                </div> 
-            </div>
-        </div>
-        <div v-else> {{labelNoDefinition}}</div>
-    </div>
-</template>

package/src/components/signages/EpAlert.vue

@@ -1,109 +0,0 @@
-<script setup lang="ts">
-import { toRefs, computed } from "vue";
-import EpDivider from "../basics/EpDivider.vue";
-import EpIcon from "../basics/EpIcon.vue";
-import EpAccordeon from "../interactions/EpAccordeon.vue";
-///types with Capital letters... object with styles same name in lowercase
-import { type TypeAlert, typeAlert, typeDivider } from "../../types/Alert";
-import { useIcons } from '../../composables/useIcons'
-
-
-/*NOTE IMPORTANT 
-  sur l'éditeur la valeur outlined a été inversée (old v-switch the vuetify)
-  donc outlined:true is fonce 
-  outlined:false is outlined style
-*/
-
-interface OldType {
-  icon: string;
-  name: string;
-  type: TypeAlert;
-  color: string;
-}
-
-interface Props {
-  type?: TypeAlert | OldType;
-  title?: string | null;
-  outlined?: boolean;
-  noIcon?: boolean;
-  compact?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  type: 'base',
-  title: null,
-  noIcon: false,
-});
-
-/* sur l'éditeur de parcours la composante a été fait à l'inverse malhereusement  (old v-switch the vuetify)*/
-/* donc outlined:true is fonce et oulined:false is the real onlined*/
-const outlinedCompact = computed(() => {
-  return !props.outlined
-})
-
-
-const isOutlined = computed(() => {
-  if (!props.outlined) {
-    return 'outlined'
-  }
-  return 'default'
-})
-
-// to change after change bd strapi v4
-const finalType = computed(() => {
-  if (typeof props.type === 'object') {
-    return props.type.type
-  }
-  return props.type
-})
-
-const styles = computed(() => {
-  return `${typeAlert[finalType.value]?.[isOutlined.value]}`
-})
-
-const styleHr = computed(() => {
-  return `${typeDivider[finalType.value]?.[isOutlined.value]}`
-})
-
-const icon = computed(() => {
-  let icon = useIcons[finalType.value].icon
-  if (props.noIcon) {
-    return null
-  }
-  return icon
-})
-
-const { title, compact, outlined } = toRefs(props);
-
-</script>
-
-<template>
-  <div :class="`flex p-4 rounded shadow-md m-2 ${styles}`" v-if="!compact">
-
-    <div v-if="icon" class="flex items-center justify-center w-1/12">
-      <EpIcon :size="40" :icon-path="icon"></EpIcon>
-    </div>
-    <div :class="`${icon ? 'w-11/12' : 'w-full'} flex items-center`">
-      <div class="container">
-        <h3 v-if="title" class="text-left text-2xl font-bold">{{ title }}</h3>
-        <hr v-if="title" :class="`w-full my-3 border ${styleHr}`">
-       <div class="ep-info-box">
-          <slot>
-          </slot>
-       </div>
-      </div>
-    </div>
-  </div>
-  <EpAccordeon :type="finalType" :outlined="outlinedCompact" :icon="icon" :title="title" v-else>
-    <div class="ep-info-box">
-      <slot></slot>
-    </div>
-  </EpAccordeon>
-</template>
-
-<style scoped>
-  .ep-info-box :deep(a){
-    text-decoration: underline;
-    font-weight:500;
-  }
-</style>

package/src/components/signages/EpBadge.vue

@@ -1,82 +0,0 @@
-
-<script setup lang="ts">
-
-    import { computed } from "vue";
-    import { type TypeBadge, typeBadge } from   "../../types/Badge";  //"../../types/Badge";
-
-    type Mode = "default"|"dot";
-    type Color = "primary"|"secondary"|"accent"|"error"|"warning"|"success"|"info"|"question"|"tip";
-    type Visibility = "true"|"false"
- 
-
-    interface Props {  
-        content:number;
-        mode?:Mode;
-        placement?:TypeBadge
-        visibility:Visibility
-        color:Color
-        maxValue:number
-    }
-
-    // define parameter and default valule
-    const props = withDefaults(defineProps<Props>(), {
-        mode:'default',
-        placement:'top_right',
-        visibility:'true',  
-        color:"primary",
-        maxValue : 0
-   
-    }) 
-
-   // const { badgestyle } = toRefs(props)
-   
-    
-    const finalType = computed(()=>{ 
-        return props.placement
-        })
-
-    const finalContent = computed(()=>{ 
-        if (props.mode =="dot" ){
-            return ""
-        }
-        else if (props.visibility == 'false'){
-            return ""
-        }
-        else if (props.content !=0) {
-            if (props.content > props.maxValue && props.maxValue !=0){
-                return props.maxValue +"+" 
-            }
-            else{
-                return props.content
-            }
-         
-        }
-
-    })
-
-  
-    const badgeStyle = computed(()=>{   
-        if (props.visibility == "true")   {          
-            return props.mode 
-        }  else{
-            return 'hide'   
-        } 
-    })
-    
-    
-    const bgcolor  = computed(()=>{   
-        return "bg-"+ props.color
-    })
-   
-    const finalStyles = computed(()=>{
-        return `${typeBadge[finalType.value]?.[badgeStyle.value]}`
-    })
-    
-
-</script>
-<template>  
-    <div class="group relative w-max "> 
-        <slot></slot>  
-        <div :class="`${finalStyles} ${bgcolor}`">{{ finalContent }}</div> 
-    </div>
-    </template>

package/src/components/signages/EpHeader.vue

@@ -1,215 +0,0 @@
-<script setup lang="ts">
-import { toRefs, computed } from "vue";
-
-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";
-
-type Arrangement = "imgBg" | "simple" | "sideBy";
-type Valign = "items-center" | "items-start" | "items-end"
-type Haling = "justify-end" | "justify-center" | "justify-start" 
-
-interface Props {
-  title: string | null;
-  subtitle?: string | null;
-  icon?: string | null;
-  courseCode?: string | null;
-  courseTitle?: string | null;
-  big?: boolean | null;
-  src?: string | null;
-  synchrone?: boolean;
-  hideImg?: boolean;
-  duration?: string | null;
-  assessment?: string | null;
-  headerImgColor?: string | null;
-  labels?: {
-    synchrone?: string;
-    formatif?: string;
-  };
-  textBg?: boolean;
-  type?: Arrangement;
-  titlePosition?: string;
-  vAlign?:Valign;
-  hAlign?:Haling
-}
-
-// type, taxonomyLevel, courseCode, courseTitle, title, subtitle, height, src, color, synchrone
-
-const props = withDefaults(defineProps<Props>(), {
-  title: null,
-  icon: null,
-  src: null,
-  big: false,
-  synchrone: false,
-  hideImg: false,
-  duration: null,
-  assessment: null,
-  labels: () => {
-    return {
-      synchrone: "Synchrone",
-      formatif: "Formatif",
-    };
-  },
-  textBg: true,
-  type: "imgBg",
-  titlePosition: "center",
-  vAlign:"items-center",
-  hAlign:"justify-center"
-});
-
-
-
-const bgTextFit = "w-8/12"; // ''
-
-
-const styles = computed(() => {
-  return ` 
-	flex
-	flex-col
-	overflow-hidden 
-	w-full 
-	absolute
-	${props.big ? "min-h-screen" : "h-96"}
-	bg-cover
-	bg-center`;
-});
-
-const bgImg = computed(() => {
-  if (props.src) {
-    return props.src;
-  }
-  return `https://live.staticflickr.com/1757/42677241511_a350206ac2_b.jpg`;
-});
-
-const emit = defineEmits<{
-  (e: "clicked"): void;
-}>();
-
-const clickScroll = (): void => {
-  emit("clicked");
-};
-
-const { title, headerImgColor, big } = toRefs(props);
-</script>
-
-<template>
-  <header
-    v-if="type === 'imgBg'"
-    :class="`${big ? 'h-screen ' : 'h-96'} items-center overflow-hidden relative `"
-    ref="el"
-  >
-    <div
-      :class="styles"
-      :style="`background-image:url('${bgImg}'); filter:url(#${headerImgColor});`"
-    ></div>
-
-    <div :class="`relative ${big ? 'mb-36' : ''} h-full items-end`">
-      <div class="flex md:justify-end justify-center pt-5">
-        <EpChip v-if="synchrone" :prependIcon="mdiCast" size="small">{{
-          labels.synchrone
-        }}</EpChip>
-        <EpChip v-if="duration" :prependIcon="mdiTimerOutline" size="small">
-          {{ duration }}</EpChip
-        >
-        <EpChip v-if="assessment" :prependIcon="mdiChairSchool" size="small">{{
-          labels.formatif
-        }}</EpChip>
-      </div>
-      <div :class="`${vAlign} ${hAlign} flex w-full grow h-96 `">
-        <div :class="`${bgTextFit}`">
-          <div
-            v-if="title || subtitle"
-            :class="`${
-              textBg
-                ? 'inline-block backdrop-blur-md backdrop-brightness-50 backdrop-opacity-75 rounded'
-                : ''
-            } p-4 md:items-center`"
-          >
-            <div class="text-center md:text-left">
-              <h1 v-if="title" class="text-3xl font-medium text-white sm:text-3xl">
-                {{ title }}
-              </h1>
-              <h2 v-if="subtitle" class="max-w-xl mt-4 text-2xl text-white contrast-50">
-                {{ subtitle }}
-              </h2>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div v-if="props.big" class="animate-bounce absolute bottom-10 left-1/2">
-      <div
-        class="mx-auto w-12 bg-white dark:text-black rounded-full p-2"
-        @click="clickScroll"
-      >
-        <EpIcon :iconPath="mdiChevronDown" size="32"></EpIcon>
-      </div>
-    </div>
-    <SvgFilter></SvgFilter>
-  </header>
-
-  <header v-else-if="type === 'simple'">
-    <div
-      class="text-center md:text-left mt-16 mb-32"
-    >
-      <h1
-        v-if="title"
-        class="text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-100"
-      >
-        {{ title }}
-      </h1>
-      <h2 v-if="subtitle" class="w-1/2 mt-4 text-gray-500 dark:text-gray-300">
-        {{ subtitle }}
-      </h2>
-    </div>
-  </header>
-
-  <header v-else="type === 'sideBy'">
-    <div class="flex flex-col-reverse lg:flex-row items-stretch">
-      <div class="basis-1/2 bg-gray-100 dark:bg-base-dark lg:min-h-48 p-4">
-
-		<div class="flex justify-start pt-0 mb-4">
-            <EpChip v-if="synchrone" :prependIcon="mdiCast" size="small">{{
-              labels.synchrone
-            }}</EpChip>
-            <EpChip v-if="duration" :prependIcon="mdiTimerOutline" size="small">
-              {{ duration }}</EpChip
-            >
-            <EpChip v-if="assessment" :prependIcon="mdiChairSchool" size="small">{{
-              labels.formatif
-            }}</EpChip>
-          </div>
-        <div :class="`${vAlign} flex h-full pb-8 max-w-3xl`">
-          <div>
-            <h1
-              v-if="title"
-              class="text-4xl sm:text-5xl xl:text-6xl font-bold tracking-tight text-gray-900 dark:text-white"
-            >
-              {{ title }}
-            </h1>
-            <p v-if="subtitle" class="mt-4 text-xl text-gray-600 dark:text-white">
-              {{ subtitle }}
-            </p>
-            <div class="mt-4">
-              <slot></slot>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="basis-1/2">
-        <img
-          :src="bgImg"
-          alt=""
-          class="h-32 lg:h-full size-full object-cover"
-          :style="`filter:url(#${headerImgColor});`"
-        />
-      </div>
-    </div>
-  </header>
-</template>

package/src/components/signages/EpNothing.vue

@@ -1,5 +0,0 @@
-<template>
-    <div>
-        no data
-    </div>
-</template>

package/src/components/signages/EpQuote.vue

@@ -1,72 +0,0 @@
-<script setup lang="ts">
-import { toRefs, computed } from "vue";
-import EpCard from "../basics/EpCard.vue";
-import EpDivider from "../basics/EpDivider.vue";
-import EpIcon from '../basics/EpIcon.vue'
-import { mdiFormatQuoteOpen } from "@mdi/js";
-
-interface Props {
-  author?: string | null;
-  img?: string | null;
-  card?: boolean;
-  hideIcon?:boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  author: null,
-  img: null,
-  card: false,
-  hideIcon:false
-});
-
-const colorText = computed(() => {
-  if (props.card) {
-    return `text-white`;
-  }
-});
-
-const styleTextAutor = computed(() => {
-  if (props.card) {
-    return `text-white`;
-  }
-  return `text-black dark:text-white`;
-});
-
-const imageStyle = computed(() => {
-  if (props.card) {
-    return `md:rounded-lg`;
-  }
-  return `md:rounded-l-md`;
-});
-
-const { author, img, card, hideIcon } = toRefs(props);
-
-
-</script>
-
-<template>
-  <div :class="card ? 'w-4/6 mx-auto' : ''">
-    <EpCard :density="card ? 'default' : 'compact'" :outlined="!card ? true : false" :color="card ? 'primary' : 'bg-white'">
-      <div :class="`md:flex md:flex-wrap rounded-md`">
-        <div class="w-1/5 mr-6" v-if="img">
-          <img :class="`${imageStyle} md:w-full md:h-full md:object-cover md:rounded-l-md`" :src="img"
-            alt="Image of quote" />
-        </div>
-        <div class="flex items-center justify-center px-7" v-else-if="!hideIcon">
-          <div :class="card ? 'text-white':'text-base dark:text-white'">
-            <EpIcon :size="60" :icon-path="mdiFormatQuoteOpen"></EpIcon>
-          </div>
-        </div>
-        <div :class="`py-6 flex-1 ${colorText} ${hideIcon?'px-6':'pr-2'}`">
-          <slot></slot>
-          <template v-if="author">
-            <EpDivider size="border" :color="card ? 'white':'base'"></EpDivider>
-            <p :class="`italic ${styleTextAutor}`">
-              {{ author }}
-            </p>
-          </template>
-        </div>
-      </div>
-    </EpCard>
-  </div>
-</template>