ep-lib-ts 1.0.55 → 1.0.57

package/src/components/basics/EpHoverCard.vue

@@ -1,125 +0,0 @@
-<script lang="ts" setup>
-import { computed, toRefs, useSlots, type Slots } from 'vue';
-import EpHover from './EpHover.vue';
-import EpIcon from './EpIcon.vue';
-import useColors from '../../composables/useColors'
-
-//types with capital letter, object styles in lowercase
-import { type Density, density_style } from "../../types/Card";
-
-import type { Animation, TextSize, MaxWidth } from "../../types/Hover";
-
-interface Props {
-    title?: string | null;
-    subtitle?: string | null;
-    outlined?: boolean;
-    flat?: boolean;
-    icon?: string | null;
-    color?: string | null;
-    src?: string | null;
-    maxWidth?:MaxWidth;
-    density?:Density;
-    hoverContent: string;
-    hoverBg?: string;
-    hoverAnimation?: Animation;
-    seeThrough?: boolean;
-    textSize?: TextSize;
-    hoverColor?: string;
-}
-
-
-
-const props = withDefaults(defineProps<Props>(), {
-    title: null,
-    subtitle: null,
-    outlined: false,
-    flat: false,
-    icon: null,
-    color: null,
-    src:null,
-    density:"default",
-    maxWidth:"max-w-xl",
-    hoverBg: "",
-    hoverAnimation: "translateY"
-})
-
-//styles card 
-const shadowCard = computed(() => {
-    return !props.flat ? 'shadow-lg' : ''
-})
-
-const borderColor = computed(() => {
-    if (props.outlined && props.color) {
-        return `border solid ${useColors('border', props.color)}`
-    }
-    if (props.outlined) {
-        return 'border solid border-primary dark:border-primary'
-    }
-    return 'dark:border dark:solid dark:border-primary'
-})
-
-const bgColor = computed(() => {
-    if(props.color && !props.outlined){
-        return `${useColors('bg', props.color)}`
-    }
-    return `bg-white text-black`
-})
-
-const subTitleText = computed(()=>{
-    if(props.color && !props.outlined){
-        return 'text-white'
-    }
-    return 'text-gray-600'
-})
-
-
-const density_class = computed(()=> {
-     return density_style[props.density]
-})
-
-const stylesCard = computed(()=> {
-    return `
-    ${shadowCard.value} 
-    ${borderColor.value} 
-    ${bgColor.value} 
-    ${props.maxWidth} 
-    rounded-md 
-    dark:bg-dark
-    dark:text-white`
-})
-
-
-const { title, subtitle, icon, src, hoverContent } = toRefs(props)
-
-const slots: Slots = useSlots();
-
-const hasContent = computed(() => {
-  return !!slots.default || !!props.title || !!props.subtitle;
-});
-
-</script>
-
-<template>
-    <div :class="`${stylesCard} mx-auto`">
-        <EpHover :textColor="hoverColor" :textSize="textSize" :seeThrough="seeThrough" :bgColor="hoverBg" :animation="hoverAnimation" :text="hoverContent" v-if="src && hoverContent">
-            <img :src="src" :class="`w-full ${hasContent ? 'rounded-t-md':'rounded-md'}`" alt="header card">
-        </EpHover>
-        <div :class="density_class" v-if="hasContent">
-            <div v-if="title || subtitle" class="mb-2 flex items-center justify-between dark:text-white">
-                <div>
-                    <h3 class="text-2xl dark:text-white font-bold">{{ title }}</h3>
-                    <h4 :class="`text-xs dark:text-white ${subTitleText}`">{{ subtitle }}</h4>
-                </div>
-                <div v-if="icon">
-                    <EpIcon :icon-path="icon"></EpIcon>
-                </div>
-            </div> 
-            <slot name="card-header"></slot>
-            <div class="dark:text-white">
-                <slot></slot>
-            </div>
-            <div class="dark:text-white max-w-4xl"><slot name="card-actions"></slot></div>
-        </div>
-    </div>
-
-</template>

package/src/components/basics/EpIcon.vue

@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import { toRefs} from 'vue';
-
-interface Props {
-    size?:string | number;
-    viewBox?:string;
-    iconPath:string;
-    extraClass?:string;
-}
-
-const props = withDefaults(defineProps<Props>(),{
-   size:32,
-   viewBox: "0 0 24 24",
-})
-
-const {size, viewBox, iconPath, extraClass} = toRefs(props)
-
-</script>
-
-<template>
-    <svg :width="size" :height="size" :viewBox="viewBox" color="currentColor" fill='currentColor' :class="`inline ${extraClass}`">
-        <path :d="iconPath"></path>
-    </svg>
-</template>
-

package/src/components/basics/EpImg.vue

@@ -1,162 +0,0 @@
-<script setup lang="ts">
-import { toRefs, ref, computed } from "vue";
-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";
-import EpBtn from "./EpBtn.vue";
-import { mdiArrowExpandAll } from "@mdi/js";
-import { mdiImage } from "@mdi/js";
-import { mdiImageRemove } from "@mdi/js";
-import { useRenderText } from "../../composables/useRenderText";
-
-interface Props {
-  src: string;
-  alt?: string;
-  height?: string | number;
-  width?: string | number;
-  thumbnail?: boolean;
-  sizeThumbnail?: SizeThumbnail;
-  caption?: string;
-  bib?: string;
-  title?: string;
-  noModal?: boolean;
-  cols?: string | number; //posible type à venir => basis-1/12... or 1 | "1" | 2 | "2" ...12
-  labelClose?:string;
-  labelRef?:string;
-  labelRefLib?:string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  alt: "Image snfas",
-  cols: "6",
-  thumbnail: false,
-  noModal: false,
-  sizeThumbnail: "medium",
-  labelClose:"Fermer",
-  labelRef:"Référence",
-  labelRefLib:"Référence bibliographique",
-});
-
-
-const renderCols = computed(() => {
-  return cols_img[+props.cols];
-});
-
-const renderBib = computed(() => {
-  if (props.bib) {
-    return useRenderText(props.bib);
-  }
-  return "";
-});
-
-const showModal = ref<boolean>(false);
-
-const toggleModal = (): void => {
-  if (props.noModal) {
-    return;
-  }
-  showModal.value = !showModal.value;
-};
-
-const showBib = ref<boolean>(false);
-
-const toggleBib = (): void => {
-  showBib.value = !showBib.value;
-};
-
-const styleSizeThumbnail = computed(() => {
-  return sizeThumbnailStyle[props.sizeThumbnail];
-});
-
-const { isLoading, error } = useImage({ src: props.src });
-const { src, alt, title, caption, thumbnail, bib, sizeThumbnail } =
-  toRefs(props);
-</script>
-
-<template>
-  <div :class="thumbnail ? 'inline-block' : ''">
-    <div v-if="!thumbnail" class="flex m-2">
-      <div
-        :class="`mx-auto bg-white dark:bg-dark rounded-md overflow-hidden shadow-md ${renderCols}`"
-      >
-        <template v-if="isLoading">
-          <span class="text-gray-200"
-            ><EpIcon :icon-path="mdiImage" size="250"></EpIcon
-          ></span>
-        </template>
-        <template v-else-if="error">
-          <span class="text-red-200"
-            ><EpIcon :icon-path="mdiImageRemove" size="150"></EpIcon
-          ></span>
-        </template>
-        <template v-else>
-          <div class="dark:bg-white">
-            <img
-              class="object-cover object-center w-full"
-              :src="src"
-              :alt="alt"
-              @click="toggleModal"
-            />
-          </div>
-        </template>
-        <div
-          class="px-4 py-2 dark:border-l dark:border-b dark:border-r dark:border-white dark:rounded-b-md"
-          v-if="title || caption || bib"
-        >
-          <h2 class="text-2xl dark:text-white font-bold">{{ title }}</h2>
-          <p class="text-gray-500 dark:text-white text-sm mt-4">
-            {{ caption }}
-          </p>
-          <div class="text-right" v-if="renderBib">
-            <EpBtn @click="toggleBib" size="small" type="primary">{{
-              labelRef
-            }}</EpBtn>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div v-if="thumbnail" class="relative group inline-block m-2">
-      <img
-        :class="`${styleSizeThumbnail} object-cover object-center group-hover:opacity-30 `"
-        :src="src"
-        :alt="alt"
-      />
-      <div
-        :class="`absolute top-0 left-0 ${styleSizeThumbnail} bg-black opacity-0 transition-opacity duration-300 group-hover:opacity-30 cursor-pointer`"
-        @click="toggleModal"
-      >
-        <div
-          class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white text-center"
-        >
-          <EpIcon :icon-path="mdiArrowExpandAll"></EpIcon>
-        </div>
-      </div>
-    </div>
-    <EpModal v-model="showModal">
-      <img
-        class="object-cover object-center h-5/6 w-5/6 mx-auto dark:bg-white"
-        :src="src"
-        :alt="alt"
-        @click="toggleModal"
-      />
-      <div class="px-4 py-2" v-if="thumbnail">
-        <h2 class="text-2xl dark:text-white font-bold">{{ title }}</h2>
-        <p class="text-gray-500 dark:text-white text-sm mt-4">{{ caption }}</p>
-        <div
-          class="text-gray-700 dark:text-white mt-4"
-          v-html="renderBib"
-        ></div>
-      </div>
-      <!-- <div class="flex justify-end"><EpBtn @click="toggleModal" size="small" type="error" outlined>Fermer</EpBtn></div> -->
-    </EpModal>
-    <EpModal v-model="showBib" :title="labelRefLib">
-      <div class="text-gray-700 dark:text-white mt-4" v-html="renderBib"></div>
-      <div class="flex justify-end">
-        <EpBtn @click="toggleBib" size="small" type="error" outlined>{{
-          labelClose
-        }}</EpBtn>
-      </div>
-    </EpModal>
-  </div>
-</template>

package/src/components/basics/EpImgCarousel.vue

@@ -1,145 +0,0 @@
-<script setup lang="ts">
-import { toRefs, ref, computed } from "vue";
-import { type SizeThumbnail, sizeThumbnailStyle, InfoModal } from "../../types/Image";
-import { useImage } from "@vueuse/core";
-import EpModal from "../interactions/EpModal.vue";
-import EpIcon from "../basics/EpIcon.vue";
-import EpBtn from "./EpBtn.vue";
-import { mdiArrowExpandAll, mdiChevronLeftCircleOutline, mdiChevronRightCircleOutline } from "@mdi/js";
-import { useRenderText } from "../../composables/useRenderText";
-
-interface Props {
-    src: string;
-    alt?: string;
-    height?: string | number;
-    width?: string | number;
-    sizeThumbnail?: SizeThumbnail;
-    caption?: string;
-    bib?: string;
-    title?: string;
-    noModal?: boolean;
-    cols?: string | number; //posible type à venir => basis-1/12... or 1 | "1" | 2 | "2" ...12
-    labelClose?:string;
-    labelRef?:string;
-    labelRefLib?:string;
-
-    puzzle?: boolean;
-    managedModal?: boolean;
-    infoModal?: InfoModal;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    alt: "Image snfas",
-    cols: "6",
-    noModal: false,
-    puzzle: false,
-    sizeThumbnail: "medium",
-    labelClose:"Fermer",
-    labelRef:"Référence",
-    labelRefLib:"Référence bibliographique",
-
-    managedModal: false,
-});
-
-
-const renderBib = computed(() => {
-    if (props.managedModal && props.infoModal) {
-        return useRenderText(props.infoModal.bib? props.infoModal.bib : '');
-    }
-    if (props.bib) {
-        return useRenderText(props.bib);
-    }
-    return "";
-});
-
-const showModal = ref<boolean>(false);
-
-const toggleModal = (): void => {
-    if (props.noModal) {
-        return;
-    }
-    showModal.value = !showModal.value;
-
-    if(props.managedModal) {
-        emits('newFocus');
-    }
-};
-
-const showBib = ref<boolean>(false);
-
-const toggleBib = (): void => {
-    showBib.value = !showBib.value;
-};
-
-const styleSizeThumbnail = computed(() => {
-    return sizeThumbnailStyle[props.sizeThumbnail];
-});
-
-const { src, alt, title, caption, bib, sizeThumbnail } =
-    toRefs(props);
-
-
-const emits = defineEmits<{
-    newFocus: [],
-    nextSlide: [],
-    prevSlide: [],
-}>();
-
-
-
-</script>
-
-<template>
-    <div class="inline-block" >
-        <div :class="`relative group ${!puzzle ? 'inline-block m-2' : 'h-full mb-1'}`">
-            <img
-                :class="`${!puzzle ? styleSizeThumbnail : 'h-full w-full justify-self-stretch'} object-cover object-center group-hover:opacity-30 `"
-                :src="src"
-                :alt="alt"
-            />
-            <div
-                :class="`absolute top-0 left-0 ${!puzzle ? styleSizeThumbnail : 'h-full w-full'} bg-black opacity-0 transition-opacity duration-300 group-hover:opacity-30 cursor-pointer`"
-                @click="toggleModal"
-            >
-                <div
-                class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white text-center"
-                >
-                <EpIcon :icon-path="mdiArrowExpandAll"></EpIcon>
-                </div>
-            </div>
-        </div>
-
-        <EpModal v-model="showModal">
-            <div v-if="managedModal" class="flex items-center justify-center mb-2">
-                <button class="p-2" @click="emits('prevSlide')">
-                    <EpIcon :icon-path="mdiChevronLeftCircleOutline"></EpIcon>
-                </button>
-                <button class="p-2" @click="emits('nextSlide')">
-                    <EpIcon :icon-path="mdiChevronRightCircleOutline"></EpIcon>
-                </button>
-            </div>
-            <img
-                class="object-cover object-center h-5/6 w-5/6 mx-auto dark:bg-white"
-                :src="(managedModal && infoModal)? infoModal.src : src"
-                :alt="alt"
-                @click="toggleModal"
-            />
-            <div class="px-4 py-2">
-                <h2 class="text-2xl dark:text-white font-bold">{{ title }}</h2>
-                <p class="text-gray-500 dark:text-white text-sm mt-4 text-center">{{ (managedModal && infoModal)? infoModal.caption : caption }}</p>
-                <div
-                class="text-gray-700 dark:text-white mt-4"
-                v-html="renderBib"
-                ></div>
-            </div>
-        </EpModal>
-        <EpModal v-model="showBib" :title="labelRefLib">
-            <div class="text-gray-700 dark:text-white mt-4" v-html="renderBib"></div>
-            <div class="flex justify-end">
-                <EpBtn @click="toggleBib" size="small" type="error" outlined>{{
-                labelClose
-                }}</EpBtn>
-            </div>
-        </EpModal>
-    </div>
-</template>

package/src/components/basics/EpList.vue

@@ -1,10 +0,0 @@
-
-<script setup lang="ts">
-</script>
-
-<template>  
-    <ul class ="py-6 px-3 w-1/4 min-w-[180px]  ">               
-        <slot ></slot>       
-    </ul>
-</template>
-

package/src/components/basics/EpListitem.vue

@@ -1,52 +0,0 @@
-<script setup lang="ts">
-import { computed, SetupContext, useSlots } from "vue";
-
-type Type = "default" | "nested";
-type Disabled = "false" | "true";
-
-interface Props {
-  type?: Type;
-  disabled?: Disabled;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  type: "default",
-  disabled: "false",
-});
-
-const slots: SetupContext["slots"] = useSlots();
-console.log(slots);
-const hasLeftContent = computed(() => {
-  return slots.leftContent ? true : false;
-});
-
-const hasRigthContent = computed(() => {
-  return slots.rightContent ? true : false;
-});
-const isNested = computed(() => {
-  if (props.type == "nested") return "px-10";
-  else return "";
-});
-const isDisabled = computed(() => {
-  if (props.disabled == "true") return "opacity-75 text-slate-500 ";
-  else return "hover:bg-gray-200 active:bg-gray-300";
-});
-</script>
-
-<template>
-  <li
-    :class="`flex flex-row flex-nowrap justify-between font-medium items-center py-4  ${isNested} ${isDisabled}`"
-  >
-    <div class="flex items-center">
-      <div v-if="hasLeftContent" class="mr-2 min-w-fit px-2">
-        <slot name="leftContent"></slot>
-      </div>
-      <div>
-        <slot></slot>
-      </div>
-    </div>
-    <div v-if="hasRigthContent" class="px-2">
-      <slot name="rightContent"></slot>
-    </div>
-  </li>
-</template>

package/src/components/basics/EpSection.vue

@@ -1,74 +0,0 @@
-<script setup lang="ts">
-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";
-
-type Haling = "justify-end" | "justify-center" | "justify-start" 
-
-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;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  title: null,
-  icon: null,
-  colsMedia:"6",
-  mediaAling:"justify-center",
-
-});
-
-
-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];
-});
-
-</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" />
-    <slot></slot>
-  </section>
-</template>

package/src/components/basics/EpSectionCols.vue

@@ -1,100 +0,0 @@
-<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>
-