ep-lib-ts 1.0.11 → 1.0.12

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ep-lib-ts",
   "private": false,
-  "version": "1.0.11",
+  "version": "1.0.12",
   "files": [
     "dist",
     "src/components/"

package/src/components/educationals/EpEdu.vue

@@ -9,73 +9,76 @@ import EpChip from "../basics/EpChip.vue";
 import EpScope from "./EpScope.vue";
 import { mdiLeadPencil } from "@mdi/js";
 
-
 interface Props {
   title?: string | null;
   subtitle?: string | null;
   icon?: string;
-  mandateLevel?:string | MandateLevel | null;
+  mandateLevel?: string | MandateLevel | null;
   synchrone?: boolean;
   type?: MediaVariants;
   intentions?: string;
-  hideIcon?:boolean;
-  flat?:boolean;
-  labels?:{
-    intentions?:string; 
-  }
+  hideIcon?: boolean;
+  flat?: boolean;
+  labels?: {
+    intentions?: string;
+  };
 }
 
 const props = withDefaults(defineProps<Props>(), {
   title: null,
   type: "base",
-  hideIcon:false,
-  flat:false,
-  labels:()=>{
-    return {
-        intentions:"[Intentions]"
-      }    
-    }
+  hideIcon: false,
+  flat: false,
+  // labels:()=>{
+  //   return {
+  //       intentions:"[Intentions]"
+  //     }
+  //   }
 });
 
 //get slots
 const slots = useSlots();
 
 const hasIntentions = computed(() => {
-  return slots.intentions?true:false
+  return slots.intentions ? true : false;
 });
 
 const hasActions = computed(() => {
-  return slots.actions?true:false
+  return slots.actions ? true : false;
 });
 
-const renderIcon = computed(()=> {
-   if(props.icon){
-    return props.icon
-   }
-   return mdiLeadPencil
-})
+const renderIcon = computed(() => {
+  if (props.icon) {
+    return props.icon;
+  }
+  return mdiLeadPencil;
+});
 
 const topBarStyle = computed(() => {
-  return `${mediaVariants[props.type]} text-left px-5 py-2 ${props.flat?'':'rounded-t-md'} flex justify-between items-center `;
+  return `${mediaVariants[props.type]} text-left px-5 py-2 ${
+    props.flat ? "" : "rounded-t-md"
+  } flex justify-between items-center `;
 });
 
 const bottomBarStyle = computed(() => {
   return `${mediaVariants[props.type]} text-right pr-5`;
 });
 
-const containerStyle = computed(()=>{
-  if(hasActions.value || hasIntentions.value || props.title){
-    return `rounded-lg overflow-hidden ${props.flat?'':'shadow-md'} flex flex-col justify-between h-full`
+const containerStyle = computed(() => {
+  if (hasActions.value || hasIntentions.value || props.title) {
+    return `rounded-lg overflow-hidden ${
+      props.flat ? "" : "shadow-md"
+    } flex flex-col justify-between h-full`;
   }
-  return `flex flex-col justify-between`
-})
+  return `flex flex-col justify-between`;
+});
 
-const renderMandateLevel = computed(()=>{
-  if(typeof props.mandateLevel === "object"){
-     return props.mandateLevel?.title
+const renderMandateLevel = computed(() => {
+  if (typeof props.mandateLevel === "object") {
+    return props.mandateLevel?.title;
   }
-  return props.mandateLevel
-})
+  return props.mandateLevel;
+});
 
 // type, taxonomyLevel, courseCode, courseTitle, title, subtitle, height, src, color, synchrone
 
@@ -84,26 +87,36 @@ const { title, hideIcon } = toRefs(props);
 
 <template>
   <div :class="containerStyle">
-    <div :class="`${topBarStyle}`" class="dark:base-dark"  v-if="title || mandateLevel">
+    <div
+      :class="`${topBarStyle}`"
+      class="dark:base-dark"
+      v-if="title || mandateLevel"
+    >
       <!-- <EpIcon :size="24" :icon-path="mdiBookOpenVariant"></EpIcon> -->
-      <h3><EpIcon v-if="!hideIcon" :iconPath="renderIcon" size="24"></EpIcon> <span class="font-bold align-middle">{{ title }}</span></h3>
+      <h3>
+        <EpIcon v-if="!hideIcon" :iconPath="renderIcon" size="24"></EpIcon>
+        <span class="font-bold align-middle">{{ title }}</span>
+      </h3>
       <EpScope v-if="mandateLevel" :title="renderMandateLevel"></EpScope>
     </div>
     <div class="px-5 dark:base-dark dark:text-white">
       <div class="py-2" v-if="hasIntentions">
         <!-- <EpIcon :size="24" :icon-path="mdiInformationOutline"></EpIcon> -->
-        <h4 class="font-semibold mb-2 text-sm uppercase tracking-wide text-gray-500 dark:text-white">
-          {{labels.intentions}}
+        <h4
+          v-if="labels && labels.intentions"
+          class="font-semibold mb-2 text-sm uppercase tracking-wide text-gray-500 dark:text-white"
+        >
+          {{ labels.intentions }}
         </h4>
         <slot name="intentions"></slot>
-        <EpDivider/>
+        <EpDivider />
       </div>
       <div class="py-2">
         <slot name="content"></slot>
       </div>
     </div>
-    <div :class="bottomBarStyle"  class="dark:base-dark"  v-if="hasActions">
+    <div :class="bottomBarStyle" class="dark:base-dark" v-if="hasActions">
       <slot name="actions"></slot>
-    </div> 
+    </div>
   </div>
 </template>

package/src/components/medias/EpVideo.vue

@@ -1,100 +1,126 @@
 <script setup lang="ts">
-import {ref, computed, toRefs} from 'vue'
+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 { 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'
+import EpEdu from "../educationals/EpEdu.vue";
 
-interface Props{
-   src:string;
-   title?:string;
-   intentions?:string;
-   credits?:string;
-   mandateLevel?:string | MandateLevel | null;  
-   type?:MediaVariants;
-   hideIcon?:boolean;
-   labels?:{
-      intentions?:string;
-   }
+interface Props {
+  src: string;
+  title?: string;
+  intentions?: string;
+  credits?: string;
+  mandateLevel?: string | MandateLevel | null;
+  type?: MediaVariants;
+  hideIcon?: boolean;
+  labels?: {
+    intentions?: string;
+  };
 }
 
-const props = withDefaults(defineProps<Props>(),{ 
-   type:'base',
-   hideIcon:false,
-   labels:()=>{
-      return {
-         intentions:"Intentions d'écoute",
-      }   
-   }
-})
+const props = withDefaults(defineProps<Props>(), {
+  type: "base",
+  hideIcon: false,
+  labels: () => {
+    return {
+      intentions: "Intentions d'écoute",
+    };
+  },
+});
 
 //only to make custum video player
-const video = ref<HTMLVideoElement>()
+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 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 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 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 getIdYoutube = (url: string): string | null => {
+  const match = url.match(/\/([^\/]+)$/);
+  return match ? match[1] : null;
+};
 
 //controls
 //const controls = useMediaControls(video, {src:props.src})
-const {src, title, hideIcon, type} = toRefs(props)
-
+const { src, title, hideIcon, type } = toRefs(props);
 </script>
 
 <template>
-   <EpEdu :title="title" :type="type" :hideIcon="hideIcon" :icon="mdiVideo" :mandateLevel="mandateLevel">
-     <template #intentions v-if="renderText">
-       <div v-html="renderText"></div>
-     </template>
-     <template #content>
+  <EpEdu
+    :title="title"
+    :type="type"
+    :hideIcon="hideIcon"
+    :icon="mdiVideo"
+    :mandateLevel="mandateLevel"
+  >
+    <template #intentions v-if="renderText && renderText.length > 0">
+      <div v-html="renderText"></div>
+    </template>
+    <template #content>
       <div class="max-w-screen-sm mx-auto">
-          <video v-if="isVideoFormat" ref="video" controls :src="src" width="640" controlsList="nodownload"></video>
-          <iframe v-else :src="videoURL" width="100%" height="360" frameborder="0" allowfullscreen></iframe>
-         </div>
-     </template>
-     <!-- <template #actions>
+        <video
+          v-if="isVideoFormat"
+          ref="video"
+          controls
+          :src="src"
+          width="640"
+          controlsList="nodownload"
+        ></video>
+        <iframe
+          v-else
+          :src="videoURL"
+          width="100%"
+          height="360"
+          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>
+  </EpEdu>
 </template>

package/dist/BgAudio-SRpJZsKs.js

@@ -1,4 +0,0 @@
-import { S as f } from "./index-SGiX8oHR.js";
-export {
-  f as default
-};

package/dist/DisplayBox-m3x7A_Lc.js

@@ -1,4 +0,0 @@
-import { T as f } from "./index-SGiX8oHR.js";
-export {
-  f as default
-};

package/dist/EpAlert-CEh6nG7M.js

@@ -1,4 +0,0 @@
-import { O as f } from "./index-SGiX8oHR.js";
-export {
-  f as default
-};

package/dist/EpAudio-B0BzGot9.js

@@ -1,4 +0,0 @@
-import { E as f } from "./index-SGiX8oHR.js";
-export {
-  f as default
-};

package/dist/EpBadge-DcZHeED8.js

@@ -1,4 +0,0 @@
-import { c as f } from "./index-SGiX8oHR.js";
-export {
-  f as default
-};

package/dist/EpBarChart-DXd6xCHk.js

@@ -1,4 +0,0 @@
-import { o } from "./index-SGiX8oHR.js";
-export {
-  o as default
-};

package/dist/EpBtn-C1AGJ-yR.js

@@ -1,4 +0,0 @@
-import { d as f } from "./index-SGiX8oHR.js";
-export {
-  f as default
-};

package/dist/EpCard-vZ-uw73Q.js

@@ -1,4 +0,0 @@
-import { e } from "./index-SGiX8oHR.js";
-export {
-  e as default
-};

package/dist/EpChip-C8vDM3u4.js

@@ -1,4 +0,0 @@
-import { f } from "./index-SGiX8oHR.js";
-export {
-  f as default
-};

package/dist/EpContentSlider-DHNcPL9C.js

@@ -1,4 +0,0 @@
-import { z as f } from "./index-SGiX8oHR.js";
-export {
-  f as default
-};

package/dist/EpDivider-186LJI5h.js

@@ -1,4 +0,0 @@
-import { g as f } from "./index-SGiX8oHR.js";
-export {
-  f as default
-};

package/dist/EpEdu-fheb_tTH.js

@@ -1,4 +0,0 @@
-import { s } from "./index-SGiX8oHR.js";
-export {
-  s as default
-};

package/dist/EpFlex-BJw-H5dU.js

@@ -1,4 +0,0 @@
-import { h as f } from "./index-SGiX8oHR.js";
-export {
-  f as default
-};

package/dist/EpFunnelChart-ip2pttgU.js

@@ -1,4 +0,0 @@
-import { p as f } from "./index-SGiX8oHR.js";
-export {
-  f as default
-};

package/dist/EpHeader-Bi5Sf7zR.js

@@ -1,4 +0,0 @@
-import { P as f } from "./index-SGiX8oHR.js";
-export {
-  f as default
-};

package/dist/EpIcon-CGER12MO.js

@@ -1,4 +0,0 @@
-import { i as f } from "./index-SGiX8oHR.js";
-export {
-  f as default
-};

package/dist/EpIframe-bQcFLybh.js

@@ -1,4 +0,0 @@
-import { F as f } from "./index-SGiX8oHR.js";
-export {
-  f as default
-};

package/dist/EpImg-BO5CR3ma.js

@@ -1,4 +0,0 @@
-import { j as f } from "./index-SGiX8oHR.js";
-export {
-  f as default
-};

package/dist/EpLineChart-YESNjWO5.js

@@ -1,4 +0,0 @@
-import { q as f } from "./index-SGiX8oHR.js";
-export {
-  f as default
-};

package/dist/EpLink-DdAAyH0l.js

@@ -1,4 +0,0 @@
-import { G as f } from "./index-SGiX8oHR.js";
-export {
-  f as default
-};

package/dist/EpLinkVersion-BF3_oyRw.js

@@ -1,4 +0,0 @@
-import { H as f } from "./index-SGiX8oHR.js";
-export {
-  f as default
-};

package/dist/EpModal-6yoWMThb.js

@@ -1,4 +0,0 @@
-import { B as f } from "./index-SGiX8oHR.js";
-export {
-  f as default
-};

package/dist/EpPieChart-BtBpY7Ur.js

@@ -1,4 +0,0 @@
-import { r } from "./index-SGiX8oHR.js";
-export {
-  r as default
-};

package/dist/EpQuestion-DNBjqXq4.js

@@ -1,4 +0,0 @@
-import { C as f } from "./index-SGiX8oHR.js";
-export {
-  f as default
-};

package/dist/EpQuote-BcgbF8xr.js

@@ -1,4 +0,0 @@
-import { Q as f } from "./index-SGiX8oHR.js";
-export {
-  f as default
-};

package/dist/EpRadio-Dogz4F9n.js

@@ -1,4 +0,0 @@
-import { x as f } from "./index-SGiX8oHR.js";
-export {
-  f as default
-};

package/dist/EpRadioSummative-VwkcjKJg.js

@@ -1,4 +0,0 @@
-import { y as f } from "./index-SGiX8oHR.js";
-export {
-  f as default
-};

package/dist/EpReading-CJ6T41TD.js

@@ -1,4 +0,0 @@
-import { b as f } from "./index-SGiX8oHR.js";
-export {
-  f as default
-};

package/dist/EpResource-DxGtO-TN.js

@@ -1,4 +0,0 @@
-import { t } from "./index-SGiX8oHR.js";
-export {
-  t as default
-};

package/dist/EpScope-D_Zh2kOC.js

@@ -1,4 +0,0 @@
-import { v as f } from "./index-SGiX8oHR.js";
-export {
-  f as default
-};

package/dist/EpSection-BtZdu6pI.js

@@ -1,4 +0,0 @@
-import { k as f } from "./index-SGiX8oHR.js";
-export {
-  f as default
-};

package/dist/EpSkeleton-Cb_z9kwg.js

@@ -1,4 +0,0 @@
-import { R as f } from "./index-SGiX8oHR.js";
-export {
-  f as default
-};

package/dist/EpSoftware-B1SbffFI.js

@@ -1,4 +0,0 @@
-import { I as f } from "./index-SGiX8oHR.js";
-export {
-  f as default
-};

package/dist/EpSpinner-CyVszZ26.js

@@ -1,4 +0,0 @@
-import { l as f } from "./index-SGiX8oHR.js";
-export {
-  f as default
-};

package/dist/EpSummativeTable-BPfbax-8.js

@@ -1,4 +0,0 @@
-import { D as f } from "./index-SGiX8oHR.js";
-export {
-  f as default
-};

package/dist/EpSvg-CpF2O8rU.js

@@ -1,4 +0,0 @@
-import { J as f } from "./index-SGiX8oHR.js";
-export {
-  f as default
-};

package/dist/EpTable-s0Idr6_o.js

@@ -1,4 +0,0 @@
-import { m } from "./index-SGiX8oHR.js";
-export {
-  m as default
-};

package/dist/EpTerm-CWt3MuHx.js

@@ -1,4 +0,0 @@
-import { _ as f } from "./index-SGiX8oHR.js";
-export {
-  f as default
-};

package/dist/EpText-B-ISSKLK.js

@@ -1,4 +0,0 @@
-import { n as f } from "./index-SGiX8oHR.js";
-export {
-  f as default
-};

package/dist/EpTimeLine-cYO1AORg.js

@@ -1,4 +0,0 @@
-import { K as f } from "./index-SGiX8oHR.js";
-export {
-  f as default
-};

package/dist/EpVideo-BAq3Qjwa.js

@@ -1,4 +0,0 @@
-import { L as f } from "./index-SGiX8oHR.js";
-export {
-  f as default
-};

package/dist/EpVideoPanopto-Bgm7AIjn.js

@@ -1,4 +0,0 @@
-import { M as f } from "./index-SGiX8oHR.js";
-export {
-  f as default
-};

package/dist/EpWordDef-DVKhOvf4.js

@@ -1,4 +0,0 @@
-import { N as f } from "./index-SGiX8oHR.js";
-export {
-  f as default
-};