ep-lib-ts 0.1.42 → 0.1.44

package/src/components/forms/EpToggle.vue

@@ -70,10 +70,7 @@ const {
     </label>
   </div> -->
   <div>
-    <input
-      :id="id"
-      :type="type"
-      :checked="checked"
+    <input :id="id" :type="type" :checked="checked"
       class="form-checkbox mr-2 mt-[0rem] h-4 w-8 appearance-none rounded-full bg-neutral-200 border-neutral-300 before:pointer-events-none before:absolute before:h-3.5 before:w-3.5 before:rounded-full before:bg-transparent before:content-[''] after:absolute after:z-[2] after:-mt-[0rem] after:h-3.5 after:w-3.5 after:rounded-full after:border-none after:bg-neutral-50 after:shadow-[0_0px_3px_0_rgb(0_0_0_/_7%),_0_2px_2px_0_rgb(0_0_0_/_4%)] after:transition-[background-color_0.2s,transform_0.2s] after:content-[''] 
 	  
 	  checked:bg-none checked:bg-blue-600 checked:after:absolute checked:after:z-[2] checked:after:-mt-[0px] checked:after:ml-[1.0625rem] checked:after:h-3.5 checked:after:w-3.5 checked:after:rounded-full checked:after:border-none checked:after:bg-neutral-100 checked:after:shadow-[0_3px_1px_-2px_rgba(0,0,0,0.2),_0_2px_2px_0_rgba(0,0,0,0.14),_0_1px_5px_0_rgba(0,0,0,0.12)] checked:after:transition-[background-color_0.2s,transform_0.2s] checked:after:content-[''] 
@@ -85,13 +82,7 @@ const {
 	  checked:focus:border-neutral-200 checked:focus:bg-blue-600 checked:focus:before:ml-[1rem] checked:focus:before:mt-[0.1rem] checked:focus:before:scale-75 checked:focus:before:shadow-[3px_-1px_0px_13px_#3b71ca] checked:focus:before:transition-[box-shadow_0.2s,transform_0.2s] 
 	  
 	  dark:bg-neutral-600 dark:after:bg-neutral-400 dark:checked:bg-blue-600 dark:checked:after:bg-blue-600 dark:focus:before:shadow-[3px_-1px_0px_13px_rgba(255,255,255,0.4)] dark:checked:focus:before:shadow-[3px_-1px_0px_13px_#3b71ca] disabled:opacity-40 disabled:cursor-not-allowed"
-      role="switch"
-	  :disabled="disabled"
-    />
-    <label class="inline-block pl-[0.15rem] hover:cursor-pointer" :for="id"
-      >Default switch checkbox input</label
-    >
+      role="switch" :disabled="disabled" />
+    <label class="inline-block pl-[0.15rem] hover:cursor-pointer" :for="id">Default switch checkbox input</label>
   </div>
 </template>
-
-

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.label}}</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/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-13bd272a.js

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

package/dist/EpBtn-bf4e1bb8.js

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

package/dist/EpCard-138f7849.js

@@ -1,6 +0,0 @@
-import { e as o } from "./index-c3629e3f.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-ce9ab539.js

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

package/dist/EpContentSlider-9f860b5e.js

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

package/dist/EpDivider-5161e1a3.js

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

package/dist/EpFlex-56c39d33.js

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

package/dist/EpHeader-b573621c.js

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

package/dist/EpIframe-1d774546.js

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

package/dist/EpImg-b8c89895.js

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

package/dist/EpLineChart-09eeadf9.js

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

package/dist/EpLink-f0451bc0.js

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

package/dist/EpLinkVersion-2974758a.js

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

package/dist/EpModal-7538ea52.js

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

package/dist/EpPieChart-d4e42024.js

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

package/dist/EpQuestion-ce045112.js

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

package/dist/EpQuote-f25965fb.js

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

package/dist/EpRadio-d7d089ac.js

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

package/dist/EpReading-cd6d9d42.js

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

package/dist/EpResource-e7b8e1d6.js

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

package/dist/EpScope-f857c493.js

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

package/dist/EpSection-a4260ae8.js

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

package/dist/EpSkeleton-07341c6f.js

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

package/dist/EpSoftware-8ff5b189.js

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

package/dist/EpSpinner-bca72b93.js

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

package/dist/EpSvg-c3ef1c16.js

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

package/dist/EpTable-6d34cf99.js

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

package/dist/EpTerm-5893b315.js

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

package/dist/EpText-bef0cd7e.js

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

package/dist/EpTimeLine-77889a4d.js

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

package/dist/EpVideo-3c188b92.js

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

package/dist/EpVideoPanopto-7bdb0a19.js

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

package/dist/EpWordDef-e6ebb0d2.js

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