ep-lib-ts 1.0.29 → 1.0.31

package/dist/{index-DWUqyBqi.js → index-CDBcj9DU.js}

@@ -1,4 +1,4 @@
-import { a0 as Ml } from "./index-CjQkBiyu.js";
+import { a2 as Ml } from "./index-BvE7762w.js";
 function _l(n) {
   return n instanceof Map ? n.clear = n.delete = n.set = function() {
     throw new Error("map is read-only");

package/dist/{prism-Ct9Pv9io.js → prism-_qpMs5k9.js}

@@ -1,4 +1,4 @@
-import { a0 as V, a1 as W } from "./index-CjQkBiyu.js";
+import { a2 as V, a3 as W } from "./index-BvE7762w.js";
 function ee(S, P) {
   for (var i = 0; i < P.length; i++) {
     const g = P[i];

package/dist/types/Cols.d.ts

@@ -0,0 +1,2 @@
+export declare const allowedColWidths: readonly ["w-1/5", "w-2/5", "w-3/5", "w-4/5", "w-full"];
+export type SizeCols = typeof allowedColWidths[number];

package/dist/types/Image.d.ts

@@ -3,4 +3,5 @@ export declare const sizeThumbnailStyle: {
     medium: string;
     large: string;
 };
+export declare const cols_img: string[];
 export type SizeThumbnail = keyof typeof sizeThumbnailStyle;

package/package.json

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

package/src/components/basics/EpImg.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { toRefs, ref, computed } from "vue";
-import { type SizeThumbnail, sizeThumbnailStyle } from "../../types/Image";
+import { type SizeThumbnail, sizeThumbnailStyle, cols_img } from "../../types/Image";
 import { useImage } from "@vueuse/core";
 import EpModal from "../interactions/EpModal.vue";
 import EpIcon from "../basics/EpIcon.vue";
@@ -21,7 +21,7 @@ interface Props {
   bib?: string;
   title?: string;
   noModal?: boolean;
-  cols?: string | number; //posible type à venir => basis-1/12... basis-11/12 to basis-full
+  cols?: string | number; //posible type à venir => basis-1/12... or 1 | "1" | 2 | "2" ...12
   labelClose?:string;
   labelRef?:string;
   labelRefLib?:string;
@@ -39,24 +39,8 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 
-const Cols = [
-  "basis-6/12",
-  "basis-1/12",
-  "basis-2/12",
-  "basis-3/12",
-  "basis-4/12",
-  "basis-5/12",
-  "basis-6/12",
-  "basis-7/12",
-  "basis-8/12",
-  "basis-9/12",
-  "basis-10/12",
-  "basis-11/12",
-  "basis-full",
-];
-
 const renderCols = computed(() => {
-  return Cols[+props.cols];
+  return cols_img[+props.cols];
 });
 
 const renderBib = computed(() => {

package/src/components/basics/EpSection.vue

@@ -1,240 +1,74 @@
 <script setup lang="ts">
-import { toRefs } from "vue";
-import { useColorMode } from '@vueuse/core';
-// import EpCard from "../basics/EpCard.vue";
-// import EpDivider from "../basics/EpDivider.vue";
-// import EpIcon from "../basics/EpIcon.vue";
+import { computed, ref } from "vue";
+import { useCreateUid } from '../../composables/useCreateUid';
+import { cols_img } from "../../types/Image";
+import EpDivider from "./EpDivider.vue";
+import EpIcon from "./EpIcon.vue";
 
-// import EpChip from "../basics/EpChip.vue";
-// import useColors from "../../composables/useColors";
-// import { mdiHome } from "@mdi/js";
-// import { mdiCast } from "@mdi/js";
-// import { mdiTimerOutline } from "@mdi/js";
-// import { mdiChairSchool } from "@mdi/js";
+type Haling = "justify-end" | "justify-center" | "justify-start" 
 
 interface Props {
+  uid?:string;
   title?: string | null;
   subtitle?: string | null;
-  prependIcon?: string | null;
-  iconSize?: string | number;
-  color?: string | null;
-  taxonomyLevel?: string | null;
-  courseCode?: string | null;
-  courseTitle?: string | null;
-  height?: string | null;
-  src?: string | null;
-  synchrone?: boolean;
+  icon?: string | null;
+  endIcon?: boolean;
+  media?: string;
+  colsMedia?: string | number; //posible type à venir => basis-1/12... or 1 | "1" | 2 | "2" ...12
+  mediaAling?:Haling
+  src?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   title: null,
   icon: null,
-  color: null,
+  colsMedia:"6",
+  mediaAling:"justify-center",
+
 });
 
-const { title, color, src } = toRefs(props);
-const mode = useColorMode();
-</script>
 
-<template>
-  <section :class="{'bg-gray-800 text-white': mode === 'dark', 'bg-white text-black': mode === 'light'}" class="EpSection">
-    <div class="relative items-center w-full">
-      <div class="w-full mx-auto text-left">
-        <div class="relative flex-col items-center m-auto align-middle">
-          <div class="gap-12 text-left lg:gap-24">
-            <div class="order-first block w-full mt-12 lg:mt-0">
-              <img
-                class="object-cover object-center w-full mx-auto bg-gray-300 border lg:ml-auto"
-                alt="hero"
-                :src="src"
-                v-if="src"
-              />
-            </div>
-            <div class="flex flex-col space-y-20 lg:mt-0">
-              <div class="border-b">
-                <div>
-                  <p class="text-2xl font-medium tracking-tight">
-                    {{ title }}
-                  </p>
-                  <p>
-                    {{ subtitle }}
-                  </p>
-                </div>
-              </div>
-              <div class="lg:max-w-7xl">
-                <slot></slot>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-</template>
+const id = ref(props.uid || useCreateUid());
 
-  <!-- <section class="h-screen flex flex-col justify-end">
-    <div
-      class="w-full h-full bg-cover bg-center"
-      :style="{ backgroundImage: 'url(' + src + ')' }"
-    >
-      <div class="flex flex-col max-w-1/2 absolute bottom-0 bg-neutral-50 opacity-95 left-0 p-6">
-        <div class="flex flex-row">
-          <EpIcon
-            v-if="prependIcon"
-            :iconPath="prependIcon"
-            :size="iconSize"
-            extraClass="mr-2"
-          ></EpIcon>
-          <h2 class="text-4xl font-bold ml-2">{{ title }}</h2>
-        </div>
-          <p class="text-base tracking-tight">{{ subtitle }}</p>
-		  <slot></slot>
-      </div>
-      <div class="flex justify-end absolute bottom-0 right-0 p-2">
-        <div class="bg-white text-gray-700 rounded-full py-1 px-2">
-          <span>chip</span>
-        </div>
-      </div>
-    </div>
-  </section> -->
+const iconSize = computed(() => {
+  if (props.title && props.subtitle)
+    return 40
+  return 25
+})
 
-  <!-- <section class="h-screen flex flex-col">
-    <div
-      class="w-full h-full bg-cover bg-center justify-end"
-      :style="{ backgroundImage: 'url(' + src + ')' }"
-    >
-      <div class="flex flex-col container justify-end" >
-        <div class="flex flex-row">
-          <EpIcon
-            v-if="prependIcon"
-            :iconPath="prependIcon"
-            :size="iconSize"
-            extraClass="mr-2"
-          ></EpIcon>
-          <h2 class="text-4xl font-bold ml-2">{{ title }}</h2>
-        </div>
-        <p class="text-base tracking-tight">{{ subtitle }}</p>
-      </div>
-      <div class="flex justify-end p-2">
-        <div class="bg-white text-gray-700 rounded-full py-1 px-2">
-          <span>bla</span>
-        </div>
-      </div>
-    </div>
-  </section> -->
-  <!-- <section>
-    <div
-      class="flex flex-col justify-center flex-1 px-8 py-8 lg:py-36 md:px-12 lg:flex-none lg:px-24"
-    >
-      <div>
-        <div class="items-center gap-12">
-          <div class="">
-            <div>
-              <p class="text-5xl tracking-tighter text-black">
-                Titre
-              </p>
-            </div>
-            <div
-              class="flex items-center justify-center w-full pt-8 mx-auto md:pt-6"
-            >
-			<slot></slot>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section> -->
 
-  <!-- model 1 -->
-  <!-- <section class="object-top overflow-hidden bg-gray-100 bg-cover">
-    <div>
-      <div class="px-4 py-12 sm:px-6 lg:py-16 lg:px-8">
-        <div class="px-6 py-6 bg-white rounded-3xl md:py-12 md:px-12 lg:px-16">
-          <div class="">
-            <p class="text-5xl tracking-tighter text-black">
-              I am a short heading, not so short
-            </p>
-            <p class="max-w-3xl mt-3 text-lg leading-6 text-gray-500">
-              Sign up for our newsletter to stay up to date.
-            </p>
-          </div>
-		  <slot></slot> 
-        </div>
-      </div>
-    </div>
-  </section> -->
+const styleTitle = computed(() => {
+  if (props.endIcon) {
+    return 'justify-between'
+  }
+  return ''
+})
+
+const renderCols = computed(() => {
+  return cols_img[+props.colsMedia];
+});
+
+</script>
 
-  <!-- model 2 -->
-  <!-- <div class="flex min-h-screen bg-white">
-    <div
-      class="flex flex-col justify-center flex-1 px-4 py-8 sm:px-6 lg:flex-none lg:px-24"
-    >
-      <div class="w-full mx-auto lg:max-w-6xl">
-        <div class="max-w-xl lg:p-10">
-          <div>
-            <p
-              class="text-2xl font-medium tracking-tight text-black sm:text-4xl"
-            >
-              I am a short heading
-            </p>
-            <p class="max-w-xl mt-4 text-base tracking-tight text-gray-600">
-              Use this paragraph to share information about your company or
-              products. Make it engaging and interesting, and showcase your
-              brand's personality. Thanks for visiting our website!
-            </p>
-          </div>
-          <div class="flex gap-3 mt-10">
-            <a
-              class="inline-flex items-center justify-center w-full px-6 py-2.5 text-center text-white duration-200 bg-black border-2 border-black rounded-full hover:bg-transparent hover:border-black hover:text-black focus:outline-none lg:w-auto"
-              href="#"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                fill="currentColor"
-                class="w-6 h-6"
-                viewBox="0 0 512 512"
-              >
-                <path
-                  d="M99.617 8.057a50.191 50.191 0 00-38.815-6.713l230.932 230.933 74.846-74.846L99.617 8.057zM32.139 20.116c-6.441 8.563-10.148 19.077-10.148 30.199v411.358c0 11.123 3.708 21.636 10.148 30.199l235.877-235.877L32.139 20.116zM464.261 212.087l-67.266-37.637-81.544 81.544 81.548 81.548 67.273-37.64c16.117-9.03 25.738-25.442 25.738-43.908s-9.621-34.877-25.749-43.907zM291.733 279.711L60.815 510.629c3.786.891 7.639 1.371 11.492 1.371a50.275 50.275 0 0027.31-8.07l266.965-149.372-74.849-74.847z"
-                ></path>
-              </svg>
-              <span class="flex flex-col items-start ml-4 leading-none">
-                <span class="mb-1 text-xs">GET IT ON</span>
-                <span class="font-medium title-font">Google Play</span>
-              </span></a
-            ><a
-              class="inline-flex items-center justify-center w-full px-6 py-2.5 text-center text-white duration-200 bg-black border-2 border-black rounded-full hover:bg-transparent hover:border-black hover:text-black focus:outline-none lg:w-auto"
-              href="#"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                fill="currentColor"
-                class="w-6 h-6"
-                viewBox="0 0 305 305"
-              >
-                <path
-                  d="M40.74 112.12c-25.79 44.74-9.4 112.65 19.12 153.82C74.09 286.52 88.5 305 108.24 305c.37 0 .74 0 1.13-.02 9.27-.37 15.97-3.23 22.45-5.99 7.27-3.1 14.8-6.3 26.6-6.3 11.22 0 18.39 3.1 25.31 6.1 6.83 2.95 13.87 6 24.26 5.81 22.23-.41 35.88-20.35 47.92-37.94a168.18 168.18 0 0021-43l.09-.28a2.5 2.5 0 00-1.33-3.06l-.18-.08c-3.92-1.6-38.26-16.84-38.62-58.36-.34-33.74 25.76-51.6 31-54.84l.24-.15a2.5 2.5 0 00.7-3.51c-18-26.37-45.62-30.34-56.73-30.82a50.04 50.04 0 00-4.95-.24c-13.06 0-25.56 4.93-35.61 8.9-6.94 2.73-12.93 5.09-17.06 5.09-4.64 0-10.67-2.4-17.65-5.16-9.33-3.7-19.9-7.9-31.1-7.9l-.79.01c-26.03.38-50.62 15.27-64.18 38.86z"
-                ></path>
-                <path
-                  d="M212.1 0c-15.76.64-34.67 10.35-45.97 23.58-9.6 11.13-19 29.68-16.52 48.38a2.5 2.5 0 002.29 2.17c1.06.08 2.15.12 3.23.12 15.41 0 32.04-8.52 43.4-22.25 11.94-14.5 17.99-33.1 16.16-49.77A2.52 2.52 0 00212.1 0z"
-                ></path>
-              </svg>
-              <span class="flex flex-col items-start ml-4 leading-none">
-                <span class="mb-1 text-xs">Download on the</span>
-                <span class="font-medium title-font">App Store</span>
-              </span>
-            </a>
-          </div>
-        </div>
+<template>
+  <section class="EpSection" :id="`section-${id}`">
+    <div :class="`flex items-center ${styleTitle}`">
+      <EpIcon :icon-path="icon" :size="iconSize" v-if="icon && !endIcon"></EpIcon>
+      <div :class="`${endIcon ? '' : 'ml-2'}`">
+        <h2 class="text-2xl font-semibold dark:text-white">{{ title }}</h2>
+        <h3 class="dark:text-white">{{ subtitle }}</h3>
       </div>
+      <EpIcon :icon-path="icon" :size="iconSize" v-if="icon && endIcon"></EpIcon>
     </div>
-    <div class="relative flex-1 hidden w-0 lg:block">
-      <div>
-        <img
-          class="absolute inset-0 object-cover w-full h-full overflow-hidden bg-gray-200"
-          src="https://d33wubrfki0l68.cloudfront.net/41cf01e1154fd7ef6121a544cedd9ba7be6b63ba/e0ab4/images/placeholders/rectangle1.svg"
-          alt=""
-        />
+    <div :class="`flex ${mediaAling}`" v-if="media || src">
+      <div :class="`dark:text-white ${renderCols}`">
+        <!--svg s'importe sur l'image src-->
+        <div v-html="media" class="w-full" v-if="media"></div>
+        <!-- img -->
+        <div v-else class="w-full"><img :src="src" :alt="`image section ${title}`"></div>
       </div>
     </div>
-  </div> -->
+    <EpDivider v-if="title || subtitle" />
+    <slot></slot>
+  </section>
+</template>

package/src/components/basics/EpSectionCols.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { useCreateUid } from '../../composables/useCreateUid';
+import { cols_img } from "../../types/Image";
+import {type SizeCols, allowedColWidths} from "../../types/Cols"
+import EpDivider from "./EpDivider.vue";
+import EpIcon from "./EpIcon.vue";
+
+type Haling = "justify-end" | "justify-center" | "justify-start" 
+type GapCols = "gap-1" | "gap-4" | "gap-6" | "gap-8" | "gap-10" | "gap-12"
+
+
+interface Props {
+  uid?:string;
+  title?: string | null;
+  subtitle?: string | null;
+  icon?: string | null;
+  endIcon?: boolean;
+  media?: string;
+  colsMedia?: string | number; //posible type à venir => basis-1/12... or 1 | "1" | 2 | "2" ...12
+  mediaAling?:Haling
+  src?: string;
+  gap?:GapCols;
+  leftCol?:SizeCols;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: null,
+  icon: null,
+  colsMedia:"6",
+  mediaAling:"justify-center",
+  gap:"gap-1",
+  leftCol:"w-full",
+  id:useCreateUid()
+});
+
+
+const id = ref(props.uid || useCreateUid());
+
+const iconSize = computed(() => {
+  if (props.title && props.subtitle)
+    return 40
+  return 25
+})
+
+
+const styleTitle = computed(() => {
+  if (props.endIcon) {
+    return 'justify-between'
+  }
+  return ''
+})
+
+const renderCols = computed(() => {
+  return cols_img[+props.colsMedia];
+});
+
+const rightCol = computed(() => {
+  if (props.leftCol === "w-full") return "w-full";
+  const leftIndex = allowedColWidths.indexOf(props.leftCol);
+  const rightIndex = allowedColWidths.length - leftIndex - 2;
+  return allowedColWidths[rightIndex] || "w-full";
+});
+
+</script>
+
+<template>
+  <section class="EpSection" :id="`section-${id}`">
+    <div :class="`flex items-center ${styleTitle}`">
+      <EpIcon :icon-path="icon" :size="iconSize" v-if="icon && !endIcon"></EpIcon>
+      <div :class="`${endIcon ? '' : 'ml-2'}`">
+        <h2 class="text-2xl font-semibold dark:text-white">{{ title }}</h2>
+        <h3 class="dark:text-white">{{ subtitle }}</h3>
+      </div>
+      <EpIcon :icon-path="icon" :size="iconSize" v-if="icon && endIcon"></EpIcon>
+    </div>
+    <div :class="`flex ${mediaAling}`" v-if="media || src">
+      <div :class="`dark:text-white ${renderCols}`">
+        <!--svg s'importe sur l'image src-->
+        <div v-html="media" class="w-full" v-if="media"></div>
+        <!-- img -->
+        <div v-else class="w-full"><img :src="src" :alt="`image section ${title}`"></div>
+      </div>
+    </div>
+    <EpDivider v-if="title || subtitle" />
+     <!-- Two-column layout -->
+     <div :class="`flex ${gap}`">
+      <!-- First column slot -->
+      <div :class="`${leftCol}`">
+        <slot name="left"></slot>
+      </div>
+      <!-- Second column slot -->
+      <div :class="`${rightCol}`">
+        <slot name="right"></slot>
+      </div>
+    </div>
+    <!--end layout-->
+  </section>
+</template>
+

package/src/components/medias/EpSvg.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { toRefs, computed } from 'vue';
+import { cols_img } from "../../types/Image";
 import { type MediaVariants } from "../../types/Medias";
 import { type MandateLevel } from '../../types/MandateLevel';
 import { useRenderText } from "../../composables/useRenderText";
@@ -23,26 +24,10 @@ const props = withDefaults(defineProps<Props>(), {
   cols: "6",
 })
 
-const Cols = [
-   'basis-6/12',
-   'basis-1/12',
-   'basis-2/12',
-   'basis-3/12',
-   'basis-4/12',
-   'basis-5/12',
-   'basis-6/12',
-   'basis-7/12',
-   'basis-8/12',
-   'basis-9/12',
-   'basis-10/12',
-   'basis-11/12',
-   'basis-full',
-]
-
 const renderCols = computed(() => {
   // console.log(+props.cols)
   // console.log(Cols[+props.cols])
-   return Cols[+props.cols]
+   return cols_img[+props.cols]
 })
 
 const renderText = computed(()=> {