ep-lib-ts 0.1.9 → 0.1.11

package/dist/style.css

@@ -1 +1 @@
-.modal-mask{position:fixed;z-index:9998;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;transition:opacity .3s ease}.modal-container{margin:auto;transition:all .3s ease;z-index:9999}.modal-header h3{margin-top:0;color:#42b983}.modal-body{margin:20px 0}.modal-default-button{float:right}.modal-enter-from,.modal-leave-to{opacity:0}.modal-enter-from .modal-container,.modal-leave-to .modal-container{transform:scale(1.1)}.content[data-v-69793e45]{max-height:0;overflow:hidden}.v-enter-active[data-v-ecd9b088],.v-leave-active[data-v-ecd9b088]{transition:opacity .5s ease}.v-enter-from[data-v-ecd9b088],.v-leave-to[data-v-ecd9b088]{opacity:0}.katex[data-v-24ff8b28]{font-size:1.3em}
+.modal-mask{position:fixed;z-index:9998;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;transition:opacity .3s ease}.modal-container{margin:auto;transition:all .3s ease;z-index:9999}.modal-header h3{margin-top:0;color:#42b983}.modal-body{margin:20px 0}.modal-default-button{float:right}.modal-enter-from,.modal-leave-to{opacity:0}.modal-enter-from .modal-container,.modal-leave-to .modal-container{transform:scale(1.1)}.content[data-v-69793e45]{max-height:0;overflow:hidden}.v-enter-active[data-v-05af9726],.v-leave-active[data-v-05af9726]{transition:opacity .5s ease}.v-enter-from[data-v-05af9726],.v-leave-to[data-v-05af9726]{opacity:0}.katex[data-v-24ff8b28]{font-size:1.3em}

package/package.json

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

package/src/components/basics/EpImg.vue

@@ -29,7 +29,6 @@ interface Props {
    caption?: string;
    bib?: string;
    title?: string,
-   gallery?: boolean
    cols?: string | number  //posible type à venir => basis-1/12... basis-11/12 to basis-full
 }
 
@@ -78,7 +77,7 @@ const { src, alt, title, caption, thumbnail, bib } = toRefs(props)
       </div>
    </div>
    <EpModal v-model="showModal">
-      <img class="object-cover object-center h-5/6 w-5/6 mx-auto" :src="src" :alt="alt">
+      <img class="object-cover object-center h-5/6 w-5/6 mx-auto" :src="src" :alt="alt" @click="showModal = false">
        <div class="px-4 py-2" v-if="thumbnail">
          <h2 class="text-2xl font-bold">{{ title }}</h2>
          <p class="text-gray-500 text-sm mt-4">{{ caption }}</p>

package/src/components/basics/EpSpinner.vue

@@ -4,44 +4,54 @@ import useColors from '../../composables/useColors';
 interface Props {
    color?: string;
    dots?: boolean;
-   size?:number
+   size?: number
+   inline?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
    color: 'primary',
    dots: false,
-   size:46
+   size: 46,
+   inline:false
 })
 
 const currentColor = computed(() => {
    return useColors('fill', props.color)
 })
 
+const styles = computed(()=>{
+   return props.inline?'':'flex flex-row w-full h-screen items-center justify-center'
+})
+
 </script>
 
 <template>
-   <svg v-if="!dots" xmlns="http://www.w3.org/2000/svg" :width="size" :height="size" class="inline" viewBox="0 0 32 32" >
-      <path :class="currentColor" fill="currentColor"
-         d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25"></path>
-      <path :class="currentColor" fill="currentColor"
-         d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z">
-         <animateTransform attributeName="transform" dur="0.75s" repeatCount="indefinite" type="rotate"
-            values="0 12 12;360 12 12">
-         </animateTransform>
-      </path>
-   </svg>
-   <svg v-else xmlns="http://www.w3.org/2000/svg" :width="size" :height="size" class="inline" viewBox="0 0 32 32" >
-   <g>
-      <circle cx="12" cy="2.5" r="1.5" :class="currentColor" fill="currentColor" opacity=".14" />
-      <circle cx="16.75" cy="3.77" r="1.5" :class="currentColor" fill="currentColor" opacity=".29" />
-      <circle cx="20.23" cy="7.25" r="1.5" :class="currentColor" fill="currentColor" opacity=".43" />
-      <circle cx="21.5" cy="12" r="1.5" :class="currentColor" fill="currentColor" opacity=".57" />
-      <circle cx="20.23" cy="16.75" r="1.5" :class="currentColor" fill="currentColor" opacity=".71" />
-      <circle cx="16.75" cy="20.23" r="1.5" :class="currentColor" fill="currentColor" opacity=".86" />
-      <circle cx="12" cy="21.5" r="1.5" :class="currentColor" fill="currentColor" />
-      <animateTransform attributeName="transform" calcMode="discrete" dur="0.75s" repeatCount="indefinite" type="rotate"
-         values="0 12 12;30 12 12;60 12 12;90 12 12;120 12 12;150 12 12;180 12 12;210 12 12;240 12 12;270 12 12;300 12 12;330 12 12;360 12 12" />
-   </g>
-</svg></template>
+   <div :class="styles">
+      <svg v-if="!dots" xmlns="http://www.w3.org/2000/svg" :width="size" :height="size" class="inline" viewBox="0 0 32 32">
+         <path :class="currentColor" fill="currentColor"
+            d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25"></path>
+         <path :class="currentColor" fill="currentColor"
+            d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z">
+            <animateTransform attributeName="transform" dur="0.75s" repeatCount="indefinite" type="rotate"
+               values="0 12 12;360 12 12">
+            </animateTransform>
+         </path>
+      </svg>
+      <svg v-else xmlns="http://www.w3.org/2000/svg" :width="size" :height="size" class="inline" viewBox="0 0 32 32">
+         <g>
+            <circle cx="12" cy="2.5" r="1.5" :class="currentColor" fill="currentColor" opacity=".14" />
+            <circle cx="16.75" cy="3.77" r="1.5" :class="currentColor" fill="currentColor" opacity=".29" />
+            <circle cx="20.23" cy="7.25" r="1.5" :class="currentColor" fill="currentColor" opacity=".43" />
+            <circle cx="21.5" cy="12" r="1.5" :class="currentColor" fill="currentColor" opacity=".57" />
+            <circle cx="20.23" cy="16.75" r="1.5" :class="currentColor" fill="currentColor" opacity=".71" />
+            <circle cx="16.75" cy="20.23" r="1.5" :class="currentColor" fill="currentColor" opacity=".86" />
+            <circle cx="12" cy="21.5" r="1.5" :class="currentColor" fill="currentColor" />
+            <animateTransform attributeName="transform" calcMode="discrete" dur="0.75s" repeatCount="indefinite"
+               type="rotate"
+               values="0 12 12;30 12 12;60 12 12;90 12 12;120 12 12;150 12 12;180 12 12;210 12 12;240 12 12;270 12 12;300 12 12;330 12 12;360 12 12" />
+         </g>
+      </svg>
+   </div>
+</template>
   
  

package/src/components/forms/EpRadio.vue

@@ -51,8 +51,7 @@ const onChange = (event:Event) => {
 </script>
 
 <template>
-  <span>
-  
+  <span class="flex items-center">
     <input
       class="cursor-pointer"
       type="radio"

package/src/components/interactions/EpQuestion.vue

@@ -138,7 +138,7 @@ const { title, intentions, hideIcon, question, src } = toRefs(props);
 
         <div class="mb-6">
           <ol>
-            <li v-for="(answer, i) in answers" class="mb-2" :key="answer.uid">
+            <li v-for="(answer, i) in answers" :key="answer.uid">
               <EpRadio
                 :label="`${typeList(i)}. ${answer.text}`"
                 v-model="userAnswer"

package/src/components/medias/EpCarousel.vue

@@ -1,22 +1,24 @@
 <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";
-
+import EpIcon from "../basics/EpIcon.vue";
+import EpBtn from "../basics/EpBtn.vue";
+import EpModal from "../interactions/EpModal.vue";
+import EpImg from "../basics/EpImg.vue";
 
 interface Props {
-  images: MediaCarousel[]; 
+  carrouselImg: MediaCarousel[]; 
+  gallery?:boolean;
   labelRef?:string|null;
   labelClose?:string|null
 }
 
 const props = withDefaults(defineProps<Props>(), {
   labelClose:"Fermer",
-  labelRef:"Référence"
+  labelRef:"Référence",
+  gallery:false
 });
 
 const currentIndex = ref<number>(0);
@@ -24,54 +26,59 @@ const dialog = ref<boolean>(false);
 
 const prevSlide = () => {
   const isFirstSlide = currentIndex.value === 0;
-  const newIndex = isFirstSlide ? props.images.length - 1 : currentIndex.value - 1;
+  const newIndex = isFirstSlide ? props.carrouselImg.length - 1 : currentIndex.value - 1;
   currentIndex.value = newIndex;
 };
 
 const nextSlide = () => {
-  const isTheLastSlide = currentIndex.value === props.images.length - 1;
+  const isTheLastSlide = currentIndex.value === props.carrouselImg.length - 1;
   const newIndex = isTheLastSlide ? 0 : currentIndex.value + 1;
   currentIndex.value = newIndex;
 };
 
-const { images, labelClose, labelRef } = toRefs(props);
+const { carrouselImg, 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 v-if="!gallery">
+    <div class="flex items-center justify-center mb-2">
+      <button @click="prevSlide">
+        <EpIcon :icon-path="mdiChevronLeftCircleOutline"></EpIcon>
+      </button>
+      {{ currentIndex + 1 }}/{{ carrouselImg.length }}
+      <button @click="nextSlide">
+        <EpIcon :icon-path="mdiChevronRightCircleOutline"></EpIcon>
+      </button>
     </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 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('${carrouselImg[currentIndex].src}')`"
+        ></div>
+      </div>
+      <div v-if="carrouselImg[currentIndex]?.caption" class="mt-2 text-sm text-gray-800">
+        {{ carrouselImg[currentIndex].caption }}
+      </div>
+      <div v-if="carrouselImg[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="carrouselImg[currentIndex].bib"></div>
+         <div class="flex justify-end">
+           <EpBtn @click="dialog = false" type="primary" dark>{{ labelClose }}</EpBtn>
+         </div>
+    </EpModal>
+  </div>
+  <div v-else>
+    <template v-for="image in carrouselImg" :key="`image-${image?.uid}`">
+      <EpImg :src="image.src" :bib="image.bib" :caption="image.caption" thumbnail></EpImg>
+    </template>
   </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;

package/src/components/medias/EpLink.vue

@@ -51,7 +51,7 @@ const { href, label, intentions, mandateLevel, hideIcon } = toRefs(props);
     <template #content>
       <div class="flex justify-center">
         <div class="w-4/5">
-          <EpBtn block color="text-white" rounded :type="type" :prependIcon="renderIcon" :href="href"
+          <EpBtn block :color="type === 'base'?'text-black':'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>

package/src/components/medias/EpLinkVersion.vue

@@ -1,8 +1,36 @@
 <script setup lang="ts">
+import { toRefs } from 'vue';
+import EpLink from './EpLink.vue';
+import EpIframe from './EpIframe.vue';
+
+type TypeLink = "iframe" | "button"
+
+interface Link {
+   id:string;
+   url:string;
+   title:string;
+   disabled:boolean
+}
+
+interface Props{
+   type:TypeLink;
+   link:Link
+}
+
+const props = withDefaults(defineProps<Props>(),{})
+
+const {type, link} = toRefs(props)
+
 </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 v-if="type === 'button'">
+      <EpLink :label="link.title" :href="link.url"></EpLink>
+   </div>
+   <div v-else-if="type === 'iframe'">
+      <EpIframe :title="link.title" :src="link.url"></EpIframe>
+   </div>
+   <div v-else>
+      no data
    </div>
 </template>

package/dist/BgAudio-ca141b0f.js

@@ -1,5 +0,0 @@
-import { G as m } from "./index-41c8e591.js";
-import "vue";
-export {
-  m as default
-};

package/dist/DisplayBox-38b3a1bd.js

@@ -1,5 +0,0 @@
-import { H as m } from "./index-41c8e591.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpAlert-d5dcf3f1.js

@@ -1,5 +0,0 @@
-import { D as m } from "./index-41c8e591.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpAudio-09920ab1.js

@@ -1,5 +0,0 @@
-import { w as m } from "./index-41c8e591.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpBadge-d7da4b82.js

@@ -1,5 +0,0 @@
-import { b as m } from "./index-41c8e591.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpBarChart-aa2d3bd3.js

@@ -1,5 +0,0 @@
-import { n as m } from "./index-41c8e591.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpBtn-584a5fcb.js

@@ -1,5 +0,0 @@
-import { c as m } from "./index-41c8e591.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpCard-522528d2.js

@@ -1,5 +0,0 @@
-import { d as m } from "./index-41c8e591.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpChip-524340fe.js

@@ -1,5 +0,0 @@
-import { e as m } from "./index-41c8e591.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpEdu-bfd8a980.js

@@ -1,5 +0,0 @@
-import { p as m } from "./index-41c8e591.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpFlex-560567d3.js

@@ -1,5 +0,0 @@
-import { g as m } from "./index-41c8e591.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpHeader-48f9a232.js

@@ -1,5 +0,0 @@
-import { E as m } from "./index-41c8e591.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpIcon-2ba52cd4.js

@@ -1,5 +0,0 @@
-import { h as m } from "./index-41c8e591.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpIframe-6c4453bb.js

@@ -1,5 +0,0 @@
-import { x as m } from "./index-41c8e591.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpLineChart-655565a3.js

@@ -1,5 +0,0 @@
-import { o as a } from "./index-41c8e591.js";
-import "vue";
-export {
-  a as default
-};

package/dist/EpLink-ab36acb1.js

@@ -1,5 +0,0 @@
-import { y as m } from "./index-41c8e591.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpModal-d2df0421.js

@@ -1,5 +0,0 @@
-import { u as m } from "./index-41c8e591.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpQuestion-f9baa3e7.js

@@ -1,5 +0,0 @@
-import { v as m } from "./index-41c8e591.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpQuote-8be6e8eb.js

@@ -1,5 +0,0 @@
-import { F as m } from "./index-41c8e591.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpRadio-4f83a512.js

@@ -1,5 +0,0 @@
-import { t as a } from "./index-41c8e591.js";
-import "vue";
-export {
-  a as default
-};

package/dist/EpReading-4b8eb5bf.js

@@ -1,5 +0,0 @@
-import { a as m } from "./index-41c8e591.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpResource-42e0f1e3.js

@@ -1,5 +0,0 @@
-import { q as m } from "./index-41c8e591.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpScope-609f5fbe.js

@@ -1,5 +0,0 @@
-import { r as a } from "./index-41c8e591.js";
-import "vue";
-export {
-  a as default
-};

package/dist/EpSection-eaf62d9e.js

@@ -1,5 +0,0 @@
-import { j as m } from "./index-41c8e591.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpSoftware-0ca2b2d9.js

@@ -1,5 +0,0 @@
-import { z as m } from "./index-41c8e591.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpSpinner-b50b86fd.js

@@ -1,5 +0,0 @@
-import { k as m } from "./index-41c8e591.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpTable-4eaf84c7.js

@@ -1,5 +0,0 @@
-import { l as m } from "./index-41c8e591.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpTerm-dfd79f23.js

@@ -1,5 +0,0 @@
-import { A as m } from "./index-41c8e591.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpText-deac2bec.js

@@ -1,5 +0,0 @@
-import { m as a } from "./index-41c8e591.js";
-import "vue";
-export {
-  a as default
-};

package/dist/EpVideo-1d585085.js

@@ -1,5 +0,0 @@
-import { B as m } from "./index-41c8e591.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpVideoPanopto-cb5441d9.js

@@ -1,5 +0,0 @@
-import { C as m } from "./index-41c8e591.js";
-import "vue";
-export {
-  m as default
-};