ep-lib-ts 0.1.41 → 0.1.43

package/src/components/interactions/EpHotsPot.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import {ref, computed, toRefs} from 'vue'
+
+interface InfoButton {
+    id:string|number;
+    content:string;
+    verticalPosition:number;
+    horizontalPosition:number;
+    title:string;
+}
+
+interface Props {
+    id?:string|number;
+    imageURL:string;
+    title?:string;
+    infoButtons:InfoButton[];
+}
+
+const props = withDefaults(defineProps<Props>(), {});
+
+const  { title, imageURL } = toRefs(props)
+
+const hotsPots = computed(() => {
+  if (props.infoButtons) {
+    return props.infoButtons.map((button) => {
+      let transform = `translateX(-50%)`;
+
+      if (button.horizontalPosition === 0) transform = ``;
+      else if (button.horizontalPosition === 100) transform = `translateX(-100%)`;
+      if (button.verticalPosition === 100) transform = `translateY(-100%) ${transform}`;
+
+      const position = `transform: ${transform}; top: ${button.verticalPosition}%; left: ${button.horizontalPosition}%;`;
+
+      return { ...button, position }
+    })
+  }
+  return []
+})
+
+const modalOpen = ref(false);
+const displayContent = ref('')
+const titleDisplay = ref('')
+
+const openModal = (title:string, content:string) => {
+  modalOpen.value = true;
+  displayContent.value = content
+  titleDisplay.value = title
+};
+
+const closeModal = () => {
+  modalOpen.value = false;
+  displayContent.value = ''
+};
+
+</script>
+
+<template>
+  <div>
+    <h2 class="text-xl font-bold">{{ title }}</h2>
+    <div class="relative">
+      <img :src="imageURL" :alt="`l'image de ${title}`">
+      <template v-for="spot in hotsPots" :key="spot.id">
+        <button @click="openModal(spot.title, spot.content)" :class="`absolute text-white px-4 py-2 shadow-md bg-primary`" :style="`${spot.position}`">+</button>
+      </template>
+      <div v-if="modalOpen" class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-5 px-2">
+        <div class="mx-2 bg-white p-2 shadow-md">
+            <h4>{{ titleDisplay }}</h4>
+           <div v-html="displayContent" class="text-sm"></div>
+          <button @click="closeModal" class="mt-4 bg-primary text-white px-2 py-1 text-sm">
+            Fermer
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+

package/src/components/interactions/EpSummativeTable.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import {ref, computed, toRefs} from 'vue'
+import EpDivider from '../basics/EpDivider.vue';
+import EpRadioSummative from '../forms/EpRadioSummative.vue';
+import type { QuestionSummative } from '../../types/SummativeTable';
+const totalValue = ref<number[]>([])
+
+interface Props {
+    title?:string;
+    questions:QuestionSummative[];
+}
+
+const props = withDefaults(defineProps<Props>(), {})
+
+const {title, questions} = toRefs(props)
+
+const resultSummative = computed(()=> {
+    return totalValue.value.reduce((total, currentvalue) => total + currentvalue, 0)
+})
+
+
+//cette function sera efface, en creant le nouveau editeur
+const transformNumber = (value:string|number) => {
+    const num = Number(value);
+    if (isNaN(num)) {
+        return 0;
+    } else {
+        return num;
+    }
+}
+
+</script>
+
+<template>
+    <div class="mt-4 bg-gray-50 p-4">
+        <h4 v-if="title" class="text-xl font-semibold mb-6">{{ title }}</h4>
+        <template v-for="(question,i) in questions" :key="`item-question-${i}`">
+            <p class=" text-gray-600 py-2 rounded">{{question.question}}</p>
+            <div class="flex flex-row flex-wrap gap-y-2 sm:gap-x-4">
+                <template v-for="(_option, j) in question.options" :key="`option-question-${j}`">
+                    <EpRadioSummative 
+                    :id="`option-${i}-${j}-${_option.uid}`"
+                    :name="`option-${i}-${j}-${_option.uid}`"
+                    :label="_option.label" 
+                    :value="transformNumber(_option.value)" 
+                    v-model="totalValue[i]">
+                    </EpRadioSummative>
+                </template>
+            </div>
+            <EpDivider />
+        </template>
+        <div class="text-right pr-16">
+           <span class="text-sm font-semibold uppercase">Total : {{ resultSummative }}</span>
+        </div>
+    </div>
+</template>

package/src/components/medias/EpCarousel.vue

@@ -3,6 +3,7 @@ import { toRefs, ref } from "vue";
 import { mdiChevronLeftCircleOutline } from "@mdi/js";
 import { mdiChevronRightCircleOutline } from "@mdi/js";
 import { MediaCarousel } from "../../types/MediaCarousel";
+import { SizeThumbnail } from "../../types/Image";
 import EpIcon from "../basics/EpIcon.vue";
 import EpBtn from "../basics/EpBtn.vue";
 import EpModal from "../interactions/EpModal.vue";
@@ -13,12 +14,14 @@ interface Props {
   gallery?: boolean;
   labelRef?: string | null;
   labelClose?: string | null;
+  sizeThumbnail?: SizeThumbnail
 }
 
 const props = withDefaults(defineProps<Props>(), {
   labelClose: "Fermer",
   labelRef: "Référence",
   gallery: false,
+  sizeThumbnail:"medium"
 });
 
 const currentIndex = ref<number>(0);
@@ -36,7 +39,7 @@ const nextSlide = () => {
   currentIndex.value = newIndex;
 };
 
-const { carrouselImg, labelClose, labelRef } = toRefs(props);
+const { carrouselImg, labelClose, labelRef, sizeThumbnail } = toRefs(props);
 </script>
 
 <template>
@@ -76,7 +79,7 @@ const { carrouselImg, labelClose, labelRef } = toRefs(props);
   </div>
   <div v-else class="flex flex-wrap">
     <template v-for="image in carrouselImg" :key="`image-${image?.uid}`">
-      <EpImg :src="image.src" :bib="image.bib" :caption="image.caption" thumbnail></EpImg>
+      <EpImg :src="image.src" :bib="image.bib" :caption="image.caption" thumbnail :size-thumbnail="sizeThumbnail"></EpImg>
     </template>
   </div>
 </template>

package/src/components/medias/EpKatex.vue

@@ -70,6 +70,6 @@ const {center} = toRefs(props)
 
 <style scoped>
 .katex {
-  font-size: 1.3em;
+  font-size: 1.6em;
 }
 </style>

package/src/components/medias/EpSvg.vue

@@ -34,10 +34,12 @@ const Cols = [
    'basis-9/12',
    'basis-10/12',
    'basis-11/12',
-   'basis-12/12',
+   'basis-full',
 ]
 
 const renderCols = computed(() => {
+  // console.log(+props.cols)
+  // console.log(Cols[+props.cols])
    return Cols[+props.cols]
 })
 
@@ -50,7 +52,7 @@ const renderText = computed(()=> {
 
 
 
-const {title, content, cols} = toRefs(props)
+const {title, content} = toRefs(props)
  
 </script>
 

package/src/components/medias/EpWordDef.vue

@@ -5,9 +5,7 @@ import { useRenderText } from '../../composables/useRenderText';
 import { useRouter } from "vue-router";
 
 interface Term {
-    term: {
-        id: string
-    }
+ id: string
 }
 
 interface Props {
@@ -18,7 +16,7 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {});
 
 const definition = computed(() => {
-    return props.glossary.find(item => item.id === props.term.term.id)
+    return props.glossary.find(item => item.id === props.term.id)
 })
 
 const sizeGramIngo = computed(() => {

package/src/components/signages/EpQuote.vue

@@ -3,17 +3,20 @@ 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(() => {
@@ -36,29 +39,29 @@ const imageStyle = computed(() => {
   return `md:rounded-l-md`;
 });
 
-const { author, img, card } = toRefs(props);
+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" 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 :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-stone-700'">
+            <EpIcon :size="60" :icon-path="mdiFormatQuoteOpen"></EpIcon>
+          </div>
         </div>
-        <div :class="`p-6 flex-1 ${colorText}`">
+        <div :class="`py-6 flex-1 ${colorText} ${hideIcon?'px-6':'pr-2'}`">
           <slot></slot>
           <template v-if="author">
             <EpDivider size="border"></EpDivider>
-            <p :class="`text-xs italic ${styleTextAutor}`">
+            <p :class="`italic ${styleTextAutor}`">
               {{ author }}
             </p>
           </template>

package/dist/EpBadge-6c7c194a.js

@@ -1,6 +0,0 @@
-import { c as o } from "./index-91030c94.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpBtn-d51f824a.js

@@ -1,6 +0,0 @@
-import { d as o } from "./index-91030c94.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpCard-e848d9bc.js

@@ -1,6 +0,0 @@
-import { e as o } from "./index-91030c94.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpCheckbox-fe632df9.js

@@ -1,36 +0,0 @@
-import { defineComponent as u, toRefs as p, openBlock as f, createElementBlock as b, createElementVNode as a, unref as e, toDisplayString as m } from "vue";
-const y = ["id", "type", "value", "disabled", "readonly", "checked"], h = ["for", "disabled"], B = /* @__PURE__ */ u({
-  __name: "EpCheckbox",
-  props: {
-    id: { default: "0" },
-    label: { default: "check" },
-    modelValue: { default: "" },
-    type: { default: "checkbox" },
-    disabled: { type: Boolean, default: !1 },
-    readonly: { type: Boolean, default: !1 },
-    checked: { type: Boolean, default: !1 }
-  },
-  emits: ["update:modelValue"],
-  setup(o, { emit: k }) {
-    const t = o, { id: l, label: n, type: c, modelValue: s, disabled: d, readonly: r, checked: i } = p(t);
-    return (_, x) => (f(), b("div", null, [
-      a("input", {
-        id: e(l),
-        type: e(c),
-        value: e(s),
-        class: "form-checkbox rounded border-neutral-300 text-blue-600 h-[1.125rem] w-[1.125rem] mr-2 disabled:opacity-40 disabled:cursor-not-allowed",
-        disabled: e(d),
-        readonly: e(r),
-        checked: e(i)
-      }, null, 8, y),
-      a("label", {
-        for: e(l),
-        class: "disabled:opacity-40 hover:pointer-events-none",
-        disabled: e(d)
-      }, m(e(n)), 9, h)
-    ]));
-  }
-});
-export {
-  B as default
-};

package/dist/EpChip-373f5e4f.js

@@ -1,6 +0,0 @@
-import { f as o } from "./index-91030c94.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpContentSlider-c500f4b5.js

@@ -1,6 +0,0 @@
-import { w as o } from "./index-91030c94.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpDivider-3c9ae82f.js

@@ -1,6 +0,0 @@
-import { g as o } from "./index-91030c94.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpFlex-6fffcd30.js

@@ -1,6 +0,0 @@
-import { h as o } from "./index-91030c94.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpHeader-a04980fd.js

@@ -1,6 +0,0 @@
-import { K as o } from "./index-91030c94.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpIframe-f593e070.js

@@ -1,6 +0,0 @@
-import { A as o } from "./index-91030c94.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpImg-983fe4ba.js

@@ -1,6 +0,0 @@
-import { j as o } from "./index-91030c94.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpLineChart-2a7aa41b.js

@@ -1,6 +0,0 @@
-import { p as o } from "./index-91030c94.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpLink-8aebe07f.js

@@ -1,6 +0,0 @@
-import { B as o } from "./index-91030c94.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpLinkVersion-6b19796c.js

@@ -1,6 +0,0 @@
-import { C as o } from "./index-91030c94.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpModal-c7ad990c.js

@@ -1,6 +0,0 @@
-import { x as o } from "./index-91030c94.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpPieChart-0d4efe39.js

@@ -1,6 +0,0 @@
-import { q as o } from "./index-91030c94.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpQuestion-c5cf0835.js

@@ -1,6 +0,0 @@
-import { y as o } from "./index-91030c94.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpQuote-530e688e.js

@@ -1,6 +0,0 @@
-import { L as o } from "./index-91030c94.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpRadio-d24572ee.js

@@ -1,6 +0,0 @@
-import { v as o } from "./index-91030c94.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpReading-04ea83ba.js

@@ -1,6 +0,0 @@
-import { b as o } from "./index-91030c94.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpResource-d820c9d8.js

@@ -1,6 +0,0 @@
-import { s as o } from "./index-91030c94.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpScope-94cbbc27.js

@@ -1,6 +0,0 @@
-import { t as m } from "./index-91030c94.js";
-import "vue";
-import "vue-router";
-export {
-  m as default
-};

package/dist/EpSection-8b5cd77c.js

@@ -1,6 +0,0 @@
-import { k as o } from "./index-91030c94.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpSkeleton-9974a603.js

@@ -1,6 +0,0 @@
-import { M as o } from "./index-91030c94.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpSoftware-8b3c0f9d.js

@@ -1,6 +0,0 @@
-import { D as o } from "./index-91030c94.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpSpinner-fb40c0d5.js

@@ -1,6 +0,0 @@
-import { l as o } from "./index-91030c94.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpSvg-9eeb39d5.js

@@ -1,6 +0,0 @@
-import { E as o } from "./index-91030c94.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpTable-dfa246d6.js

@@ -1,6 +0,0 @@
-import { m as o } from "./index-91030c94.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpTerm-8260ff0b.js

@@ -1,6 +0,0 @@
-import { _ as o } from "./index-91030c94.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpText-e4de1bcb.js

@@ -1,6 +0,0 @@
-import { n as o } from "./index-91030c94.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpTimeLine-3c551d53.js

@@ -1,6 +0,0 @@
-import { F as o } from "./index-91030c94.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpVideo-4d77c312.js

@@ -1,6 +0,0 @@
-import { G as o } from "./index-91030c94.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpVideoPanopto-4ecfb461.js

@@ -1,6 +0,0 @@
-import { H as o } from "./index-91030c94.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpWordDef-37f6087e.js

@@ -1,6 +0,0 @@
-import { I as o } from "./index-91030c94.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};