ep-lib-ts 0.0.8 → 0.0.9

package/src/components/medias/EpAudio.vue

@@ -0,0 +1,83 @@
+<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 { MediaVariants } from "../../types/Medias";
+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;
+   credits?: string;
+   madateLevel?: string;
+   labelIntentions?: string;
+   type?: MediaVariants;
+   messageError?: string
+   hideIcon?: boolean;
+   mandateLevel?:string | null;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+   labelIntentions: "Intentions d'écoute",
+   type: 'base',
+   messageError: "Mauvais url",
+   hideIcon: false
+})
+
+const isAudioFormat = computed(() => {
+   if (props.src.endsWith('.mp3') || props.src.endsWith('.ogg') || props.src.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 } = toRefs(props)
+
+</script>
+
+<template>
+
+   <EpEdu :title="title" :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"></BgAudio>
+            <audio v-if="isAudioFormat" ref="video" controls :src="src" 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/EpCarousel.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { toRefs, ref } from "vue";
+import EpIcon from "../basics/EpIcon.vue";
+import EpBtn from "../basics/EpBtn.vue";
+import EpModal from "../interactions/EpModal.vue";
+import { mdiChevronLeftCircleOutline } from "@mdi/js";
+import { mdiChevronRightCircleOutline } from "@mdi/js";
+import { MediaCarousel } from "../../types/MediaCarousel";
+
+
+interface Props {
+  images: MediaCarousel[]; 
+  labelRef?:string|null;
+  labelClose?:string|null
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  labelClose:"Fermer",
+  labelRef:"Référence"
+});
+
+const currentIndex = ref<number>(0);
+const dialog = ref<boolean>(false);
+
+const prevSlide = () => {
+  const isFirstSlide = currentIndex.value === 0;
+  const newIndex = isFirstSlide ? props.images.length - 1 : currentIndex.value - 1;
+  currentIndex.value = newIndex;
+};
+
+const nextSlide = () => {
+  const isTheLastSlide = currentIndex.value === props.images.length - 1;
+  const newIndex = isTheLastSlide ? 0 : currentIndex.value + 1;
+  currentIndex.value = newIndex;
+};
+
+const { images, labelClose, labelRef } = toRefs(props);
+</script>
+
+<template>
+  <div class="flex items-center justify-center mb-2">
+    <button @click="prevSlide">
+      <EpIcon :icon-path="mdiChevronLeftCircleOutline"></EpIcon>
+    </button>
+    {{ currentIndex + 1 }}/{{ images.length }}
+    <button @click="nextSlide">
+      <EpIcon :icon-path="mdiChevronRightCircleOutline"></EpIcon>
+    </button>
+  </div>
+  <div class="bg-white shadow-xl p-4 max-w-[800px] mx-auto border-solid">
+    <div class="max-w-[800px] h-[550px] m-auto relative">
+      <div
+        class="w-full h-full bg-center bg-cover duration-500"
+        :style="`background-image:url('${images[currentIndex].src}')`"
+      ></div>
+    </div>
+    <div v-if="images[currentIndex]?.caption" class="mt-2 text-sm text-gray-800">
+      {{ images[currentIndex].caption }}
+    </div>
+    <div v-if="images[currentIndex]?.bib" class="flex justify-end">
+      <EpBtn  type="primary" @click="dialog = true" dark>{{ labelRef }}</EpBtn>
+    </div>
+  </div>
+  <EpModal v-model="dialog" title="Référence">
+       <div v-html="images[currentIndex].bib"></div>
+       <div class="flex justify-end">
+         <EpBtn @click="dialog = false" type="primary" dark>{{ labelClose }}</EpBtn>
+       </div>
+  </EpModal>
+  <!--icons-->
+</template>
+
+<style scoped>
+/* we will explain what these classes do next! */
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+</style>

package/src/components/medias/EpIframe.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { toRefs, computed } from "vue";
+import EpEdu from "../educationals/EpEdu.vue";
+//types with capital letter, object styles in lowercase
+import { MediaVariants } from "../../types/Medias";
+import { isHtml } from '../../composables/isHtml';
+import {useMarkdown} from '../../composables/useMarkdown'
+import { mdiApplicationBrackets } from "@mdi/js";
+interface Props {
+  src: string;
+  big?: boolean;
+  title?: string;
+  intentions?: string;
+  hideIcon?:boolean;
+  type?:MediaVariants;
+  mandateLevel?:string|null
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type:'base',
+  big: false,
+  hideIcon:false
+});
+
+
+const renderText = computed(()=>{
+     if(!props.intentions){
+      return null
+     }
+     if(!isHtml(props.intentions)){
+        return useMarkdown(props.intentions)
+     }
+     return props.intentions
+})
+
+const height = computed(() => {
+  return props.big ? "1000" : "520";
+});
+
+const { src, title, intentions, hideIcon } = toRefs(props);
+</script>
+
+<template>
+  <EpEdu :title="title" :type="type" :hideIcon="hideIcon" :icon="mdiApplicationBrackets" :mandateLevel="mandateLevel">
+     <template #intentions v-if="renderText">
+       <div v-html="renderText" ></div>
+     </template>
+     <template #content>
+
+        <iframe :src="src" class="w-full" :height="height"></iframe>
+
+     </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/EpKatex.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { onMounted, ref, computed, toRefs } from "vue";
+import katex from "katex";
+import EpEdu from "../educationals/EpEdu.vue";
+import { mdiFunctionVariant } from "@mdi/js";
+import { MediaVariants } from "../../types/Medias";
+import { isHtml } from "../../composables/isHtml";
+import { useMarkdown } from "../../composables/useMarkdown";
+
+interface Props {
+  content: string;
+  center?: boolean;
+  title?: string;
+  intentions?: string;
+  hideIcon?: boolean;
+  type?: MediaVariants;
+  mandateLevel?: string | null;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  center: false,
+});
+
+const renderKatex = ref<HTMLDivElement>();
+
+onMounted(() => {
+  if(renderKatex.value){
+    katex.render(String.raw`${props.content}`, renderKatex.value, {
+    throwOnError: false,
+    output: "html",
+  });
+  }
+});
+
+const renderText = computed(() => {
+  if (!props.intentions) {
+    return null;
+  }
+  if (!isHtml(props.intentions)) {
+    return useMarkdown(props.intentions);
+  }
+  return props.intentions;
+});
+
+const {center} = toRefs(props)
+
+</script>
+
+<template>
+  <EpEdu
+    :title="title"
+    :type="type"
+    :hideIcon="hideIcon"
+    :icon="mdiFunctionVariant"
+    :mandateLevel="mandateLevel"
+  >
+    <template #intentions v-if="renderText">
+      <div v-html="renderText"></div>
+    </template>
+    <template #content>
+      <div :class="`p-4 ${center ? 'flex justify-center' : ''}`">
+        <div ref="renderKatex"></div>
+      </div>
+    </template>
+    <!-- <template #actions>
+       <EpBtn :color="type=='base'?'text-gray-700':'text-white'" :type="type">[Repair btn style... to change]</EpBtn>
+     </template> -->
+  </EpEdu>
+</template>
+
+<style scoped>
+.katex {
+  font-size: 1.3em;
+}
+</style>

package/src/components/medias/EpLink.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { computed, toRefs } from "vue";
+//types with capital letter, object styles in lowercase
+import { MediaVariants } from "../../types/Medias";
+import EpBtn from "../basics/EpBtn.vue";
+import { mdiLinkVariant } from "@mdi/js";
+import EpEdu from "../educationals/EpEdu.vue";
+import useColors from "../../composables/useColors";
+import { useRenderText } from "../../composables/useRenderText";
+
+
+interface Props {
+  href: string;
+  label?: string;
+  intentions?: string;
+  mandateLevel?: string;
+  labelIntentions?: string;
+  type?: MediaVariants;
+  hideIcon?: boolean;
+  labelCard?:string;
+  icon?:string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  labelIntentions: "Intentions d'écoute",
+  type: "primary",
+  hideIcon: false,
+  intentions:""
+});
+
+const renderIcon = computed(()=>{
+  if(props.icon){
+    return props.icon
+  }
+  return mdiLinkVariant
+})
+
+const hoverColor = computed(()=>{
+   return `absolute ${useColors('bg', props.type + 'light')} bottom-0 w-0 left-1/2 h-full -translate-x-1/2 transition-all ease-in-out duration-300 group-hover:w-[105%] -z-[1] group-focus:w-[105%]`
+})
+
+const { href, label, intentions, mandateLevel, hideIcon } = toRefs(props);
+</script>
+
+<template>
+  <EpEdu :title="labelCard" :icon="renderIcon" flat :type="type" :hideIcon="hideIcon" :mandateLevel="mandateLevel">
+    <template #intentions v-if="useRenderText(intentions)">
+          <div v-html="useRenderText(intentions)"></div>
+        </template>
+    <template #content>
+      <div class="flex justify-center">
+        <div class="w-4/5">
+          <EpBtn block color="text-white" rounded :type="type" :prependIcon="renderIcon" :href="href"
+            extraClass="group font-medium tracking-wide relative inline-flex justify-center overflow-hidden z-10 transition-all duration-300 ease-in-out ">
+            <span class="font-medium tracking-wider ">{{label}}</span>
+            <span :class='hoverColor'></span>
+          </EpBtn>
+        </div>
+      </div>
+    </template>
+  </EpEdu>
+</template>

package/src/components/medias/EpSoftware.vue

@@ -0,0 +1,89 @@
+<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 { MediaVariants } from "../../types/Medias";
+import { useRenderText } from "../../composables/useRenderText";
+
+import { mdiLaptop } from "@mdi/js";
+import { mdiOpenInNew } from "@mdi/js";
+
+interface Props {
+  url?: string;
+  cover?: string;
+  title: string;
+  mandateLevel?: string;
+  intentions?: string;
+  version_link?: null;
+  hideCover?: boolean;
+  version?: string;
+  type?:MediaVariants;
+  hideIcon?:boolean;
+  labelCard?: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,
+});
+
+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 } = toRefs(props);
+</script>
+
+<template>
+  <EpEdu :title="labelCard" :icon="mdiLaptop" flat :type="type" :hideIcon="hideIcon" :mandateLevel="mandateLevel">
+     <template #intentions v-if="useRenderText(intentions)">
+         <div v-html="useRenderText(intentions)"></div>
+      </template>
+    <template #content>
+      <div
+        class="flex flex-col items-center border rounded-lg bg-neutral-100 md:flex-row mt-2"
+      >
+        <template v-if="!hideCover">
+          <img
+            v-if="hasCover"
+            class="object-cover 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-gray-300"
+          >
+            <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="base" v-if="version">{{version}}</EpChip></h4>
+              <EpBtn rounded type="base" :prependIcon="mdiOpenInNew"
+                >[Accéder au logiciel]</EpBtn
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+    <template #actions></template>
+  </EpEdu>
+</template>

package/src/components/medias/EpSvg.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+</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>

package/src/components/medias/EpTerm.vue

@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import { ref, toRefs, computed } from "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";
+import { isHtml } from "../../composables/isHtml";
+import { useMarkdown } from "../../composables/useMarkdown";
+import { mdiBookmarkMultipleOutline } from "@mdi/js";
+
+interface Props {
+  term: string;
+  word: string;
+  definition: string;
+  variations?: string;
+  domain?: string;
+  graminfo?: string;
+  relations?: string;
+  idrelation?: string;
+  labelClose?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  term: "test",
+  variations: "",
+  relations: "",
+  idrelation: "",
+  labelClose: "Fermer",
+});
+
+const show = ref(false);
+
+const renderText = computed(() => {
+  if (!isHtml(props.definition)) {
+    return useMarkdown(props.definition);
+  }
+  return props.definition;
+});
+
+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 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 { term, graminfo, labelClose } = toRefs(props);
+</script>
+
+<template>
+  <span
+    @click="show = true"
+    class="cursor-pointer border-primary border 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 group-hover:h-full opacity-90"
+    ></span>
+    <span class="relative group-hover:text-primary-light"
+      >{{ 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">Définition</h3>
+      <span class="text-xs" v-if="renderDomain"
+        >Domaine : <span class="font-bold">{{ renderDomain }}</span></span
+      >
+    </div>
+    <div v-html="renderText"></div>
+    <EpDivider v-if="renderVariations || renderRelations"></EpDivider>
+    <div class="text-sm mt-2" v-if="renderVariations">
+      <span class="mr-2 font-bold">Variations :</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">Relations :</span>
+      <EpBtn
+        v-for="(relation, i) in renderRelations"
+        :key="`relation-${i}`"
+        size="small"
+        rounded
+        extra-class="mr-2"
+        >{{ relation }}</EpBtn
+      >
+    </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

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+</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>