ep-lib-ts 1.0.55 → 1.0.57

package/src/components/basics/EpSpinner.vue

@@ -1,57 +0,0 @@
-<script lang="ts" setup>
-import { computed } from 'vue';
-import useColors from '../../composables/useColors';
-interface Props {
-   color?: string;
-   dots?: boolean;
-   size?: number
-   inline?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-   color: 'primary',
-   dots: false,
-   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>
-   <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/basics/EpStackedList.vue

@@ -1,79 +0,0 @@
-<script setup lang="ts">
-import { computed, defineAsyncComponent } from 'vue';
-import EpAvatar from './EpAvatar.vue';
-import EpIcon from './EpIcon.vue';
-import { useRenderText } from '../../composables/useRenderText';
-
-// Importing the necessary interfaces for the code
-import { type ListItem, type AvatarStyle, type RoundedStyle, roundedType } from '../../types/StackedList';
-
-
-// Managing the props
-interface Props {
-    elements: ListItem[];
-    border?:boolean;
-    rounded?:RoundedStyle;
-    restricted?:boolean;
-    cropped?:boolean;
-    avatarStyle?: AvatarStyle;
-    iconSize?:number|string
-}
-
-const props = withDefaults(defineProps<Props>(),{
-    elements: () => [],
-    avatarStyle: () => { return {
-      size:"middle"
-    }},
-    border:true,
-    rounded:"small",
-    restricted:false,
-    cropped:false,
-    iconSize:36
-});
-
-
-// The style of the wrapper div 
-const className = computed(() => {
-    const border = (props.border === false)? 'border-0' : 'border';
-    const rounded = roundedType[(props.rounded)? props.rounded : 'small'];
-    const padding = (props.restricted)? 'p-0' : 'p-2';
-    return `${border} ${rounded} ${padding}`;
-})
-
-
-// The style of the list elements
-const elementSpacing = computed(() => (props.restricted)? 'p-3' : 'mx-6 py-4');
-
-const elementGrid = (element: Record<string, any>|undefined) => {
- return element?'grid-cols-11' : 'grid-cols-7'
-}
-
-</script>
-
-<template>
-    <ul :class="`${className} border-gray-200 flex flex-col dark:border-slate-700 dark:bg-slate-900 lg:mx-28`">
-        <template v-for="elem in elements" :key="elements.indexOf(elem)">
-            <li :class="`${(elements.indexOf(elem) !== 0)? 'border-t' : ''} list-none`">
-                <component 
-                :is="elem.url ? 'a' : 'div'"
-                v-bind="elem.url ? { href: elem.url, target: '_blank', rel: 'noopener noreferrer' } : {}"
-                :class="`contents`"
-                >
-                    <div :class="`${elementSpacing} ${elem.url?'hover:bg-gray-50 dark:hover:bg-slate-800':''} grid grid-cols-11 justify-items-center items-center border-gray-200 dark:border-slate-700`">
-                        <EpAvatar v-if="elem.avatar"  :src="elem.avatar" v-bind="avatarStyle" class="col-span-2" />
-                        <div class="col-span-5 justify-self-start">
-                            <h3 class="font-semibold">{{ elem.title }}</h3>
-                            <div :class="`${(cropped)? 'line-clamp-3': ''}`" v-html="useRenderText(elem.description)"></div>
-                        </div>
-                        <!--element icon-->
-                        <div v-if="elem.icon" class="flex gap-2 items-center col-span-4 justify-self-auto">
-                            <EpIcon :icon-path="elem.icon" :size="iconSize"/>
-                        </div>
-                    </div>
-                </component>
-            </li>
-        </template>
-    </ul>
-</template>
-
-

package/src/components/basics/EpTable.vue

@@ -1,33 +0,0 @@
-<script setup lang="ts">
-import {toRefs} from 'vue'
-import EpCard from '../basics/EpCard.vue'
-interface Props {
-    arrayContent:string[][];
-    headers?:string[]|null;
-    title?:string;
-}
-
-const props = withDefaults(defineProps<Props>(),{
-    //defaults ? ...
-})
-
-const {headers, arrayContent, title} = toRefs(props)
-
-const styleTh ="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-white";
-</script>
-<template>
-  <EpCard flat :title="title">
-    <table class="min-w-full divide-y shadow dark:bg-dark">
-      <thead class="bg-gray-50 dark:bg-base-dark" v-if="headers">
-        <tr>
-          <th v-for="(title, i) in headers" :key="`th-${i}`" scope="col" :class="styleTh">{{title}}</th>
-        </tr>
-      </thead>
-      <tbody class="bg-white divide-y dark:bg-dark">
-        <tr v-for="(tr, i) in arrayContent" :key="`tr-${i}`" class="hover:bg-gray-50 dark:hover:bg-black">
-          <td v-for="(value, j) in tr" :key="`td-${i}-${j}`" class="px-6 py-4">{{value}}</td>
-        </tr>
-      </tbody>
-    </table>
-  </EpCard>
-</template>

package/src/components/basics/EpText.vue

@@ -1,148 +0,0 @@
-<script setup lang="ts">
-import { computed, toRefs, h, defineAsyncComponent } from "vue";
-import { isHtml } from "../../composables/isHtml";
-import { useMarkdown } from "../../composables/useMarkdown";
-import EpAccordeon from "../interactions/EpAccordeon.vue";
-
-interface Props {
-  glossary?: any[];
-  content: string;
-  title?: string | null;
-  compact?: boolean;
-  labelDefinition?: string;
-  labelDomain?: string;
-  labelVariations?: string;
-  labelRelations?: string;
-  labelClose?: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  compact: false,
-  labelDefinition: "Définition",
-  labelDomain: "Domaine",
-  labelVariations: "Variations",
-  labelRelations: "Relations",
-  labelClose: "Fermer"
-});
-
-const renderTitle = computed(() => {
-  if (!props.title) {
-    return "En savoir plus"
-  }
-  return props.title;
-});
-
-const renderText = computed(() => {
-  if (!props.content) {
-    return `<div></div>`;
-  }
-  if (!isHtml(props.content)) {
-    return useMarkdown(props.content);
-  }
-  if (!props.glossary) {
-    return props.content
-  }
-  //return props.content
-  //create a div
-  const div = document.createElement("DIV");
-
-  //format string
-  const contentString = props.content.trim();
-  const newFormat = contentString.replace(/<p>/g, '<div style="margin-bottom: 1em;">').replace(/<\/p>/g, '</div>')
-  ///add the html input to the div
-  div.innerHTML = newFormat
-  ///get strign of html
-  let newStr = div.outerHTML;
-  //console.log(newStr)
-  //find all span.ep_glossary_item to know the glossary terms in the text
-  const glossaryTerms = div.querySelectorAll(".ep_glossary_item");
-  //  console.log(glossaryTerms)
-  //if find glossary terms
-  if (glossaryTerms.length > 0) {
-    ///check every term and replace it
-    glossaryTerms.forEach((item) => {
-      //get id
-
-      const id = item.getAttribute("data-id");
-      //get content text
-      const render_word = item.innerHTML;
-      //find in the glossary their equivalent
-      let _glossary = [];
-      if (props.glossary) {
-        _glossary = props.glossary.map(item => ({
-          ...item,
-          id: item.documentId ?? item.id, // fallback only if documentId missing
-        }))
-      }
-      const term = _glossary.find((word) => word.id === id);
-      //if was found
-      if (term) {
-        ///add the new values to the array
-        const word = item.outerHTML;
-        // console.log(word)
-        //check if the term has relations
-
-        const foundedRelations = _glossary.filter((x) =>
-          x.relation.some((item: string) => {
-            return item == id;
-          })
-        );
-
-        //get relations id and term
-        //const idsRelation = foundedRelations.map((x) => x.id);
-        const termsRelation = foundedRelations.map((x) => x.term);
-        const variation = term.variation;
-        const hasImge = term.img ? term.img : "";
-        const replaceWord = `<div style="display:inline">
-          <EpTerm 
-          term="${term.term}" 
-          word="${render_word}" 
-          variations="${variation}" 
-          graminfo="${term.graminfo}" 
-          src="${hasImge}" 
-          domain="${term.domain}" 
-          relations="${termsRelation}"
-          label-definition="${props.labelDefinition}"
-          label-domain="${props.labelDomain}"
-          label-variations="${props.labelVariations}"
-          label-relations="${props.labelRelations}"
-          label-close="${props.labelClose}"
-          > 
-          ${term.definition}
-          </EpTerm> 
-          </div>`;
-        //replace output string
-        newStr = newStr.replace(word, replaceWord);
-
-      }
-    });
-  }
-  div.innerHTML = newStr
-  return div.innerHTML
-});
-
-//console.log(renderText.value)
-
-const myRenderComponent = () => {
-  const r = {
-    components: {
-      epterm: defineAsyncComponent(() => import('../medias/EpTerm.vue')),
-    },
-    template: `${renderText.value}`,
-  };
-
-  return h(r);
-};
-
-
-const { compact } = toRefs(props);
-</script>
-
-<template>
-  <div class="px-2 text-black dark:text-white ">
-    <myRenderComponent v-if="!compact"></myRenderComponent>
-    <EpAccordeon outlined :title="renderTitle" v-else>
-      <myRenderComponent></myRenderComponent>
-    </EpAccordeon>
-  </div>
-</template>

package/src/components/charts/EpBarChart.vue

@@ -1,94 +0,0 @@
-<script setup lang="ts">
-
-import { computed, toRefs } from "vue";
-import EpEdu from "../educationals/EpEdu.vue";
-import { mdiChartBar } from "@mdi/js";
-import { type MediaVariants } from "../../types/Medias";
-import { isHtml } from "../../composables/isHtml";
-import { useMarkdown } from "../../composables/useMarkdown";
-import { useColorMode } from '@vueuse/core'
-
-interface Serie {
-  name: string;
-  data: (string | number)[];
-}
-
-interface Options {
-  xaxis: {
-    categories: (number | string)[];
-    convertedCatToNumeric?: boolean;
-  }
-  colors?: string[];
-}
-
-interface Props {
-  series: Serie[];
-  options: Options;
-  id?: string;
-  center?: boolean;
-  title?: string;
-  intentions?: string;
-  hideIcon?: boolean;
-  type?: MediaVariants;
-  source?: string;
-  width?: string;
-  dataNoDisponible?: string;
-
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  center: true,
-  width: "500",
-  dataNoDisponible: "Data no disponible"
-});
-
-const renderText = computed(() => {
-  if (!props.intentions) {
-    return null;
-  }
-  if (!isHtml(props.intentions)) {
-    return useMarkdown(props.intentions);
-  }
-  return props.intentions;
-});
-
-const mode = useColorMode()
-
-const globalOptions = computed(() => {
-  return {
-    ...props.options,
-    theme: {
-      mode: mode.value
-    },
-    chart: {
-      background: 'transparent'
-    },
-    dataLabels: {
-      enabled: false
-    }
-  }
-})
-
-const { center, series, source, width, dataNoDisponible } = toRefs(props)
-
-</script>
-
-<template>
-  <EpEdu :title="title" :type="type" :hideIcon="hideIcon" :icon="mdiChartBar">
-
-    <template #intentions v-if="renderText">
-      <div v-html="renderText"></div>
-    </template>
-    <template #content>
-      <div :class="`p-4 ${center ? 'flex justify-center' : ''}`" v-if="globalOptions && series">
-        <apexchart :width="width" type="bar" :options="globalOptions" :series="series"></apexchart>
-      </div>
-      <div v-else>
-        <p>{{ dataNoDisponible }}</p>
-      </div>
-    </template>
-    <template #actions v-if="source">
-      <p>{{ source }}</p>
-    </template>
-  </EpEdu>
-</template>

package/src/components/charts/EpFunnelChart.vue

@@ -1,135 +0,0 @@
-<script setup lang="ts">
-import { computed, toRefs } from "vue";
-import EpEdu from "../educationals/EpEdu.vue";
-import { mdiTriangle } from '@mdi/js';
-import { type MediaVariants } from "../../types/Medias";
-import { isHtml } from "../../composables/isHtml";
-import { useMarkdown } from "../../composables/useMarkdown";
-import { useColorMode } from '@vueuse/core'
-interface OptionsFormmater {
-  dataPointIndex: number;
-  w: {
-    globals: {
-      labels: string[]
-    }
-  }
-}
-
-interface seriesFunnel {
-  name: string,
-  data: number[]
-}
-
-interface Props {
-  series: seriesFunnel[];
-  labels: string[];
-  //options: OptionsFunnelChart;
-  id?: string;
-  title?: string;
-  center?: boolean;
-  intentions?: string;
-  hideIcon?: boolean;
-  type?: MediaVariants;
-  source?: string;
-  width?: string;
-  height?: number;
-  isFunnel?: boolean;
-  colors?: string[];
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  center: true,
-  type: 'neutral',
-  width: "800",
-  height: 350,
-  isFunnel: true,
-  colors: () => [
-    '#283243',
-    '#3b4f6d',
-    '#465e87',
-    '#5072a5',
-    '#648bb9',
-    '#6e9ac3',
-    '#8ab3d0',
-    '#b0cee0',]
-});
-
-
-const renderText = computed(() => {
-  if (!props.intentions) {
-    return null;
-  }
-  if (!isHtml(props.intentions)) {
-    return useMarkdown(props.intentions);
-  }
-  return props.intentions;
-});
-
-const mode = useColorMode()
-
-
-const optionsFunnel = computed(() => {
-  return {
-    chart: {
-      type: 'bar',
-      background: 'transparent',
-      height: props.height,
-    },
-    plotOptions: {
-      bar: {
-        borderRadius: 0,
-        horizontal: true,
-        distributed: true,
-        barHeight: '80%',
-        isFunnel: props.isFunnel,
-      },
-    },
-    theme: {
-      mode: mode.value
-    },
-    colors: props.colors,
-    dataLabels: {
-      enabled: true,
-      formatter: function (val: string, opt: OptionsFormmater) {
-        let label = ''
-        if (opt.w.globals.labels[opt.dataPointIndex]) {
-          label = opt.w.globals.labels[opt.dataPointIndex] + ' '
-        }
-        return label + val
-      },
-      dropShadow: {
-        enabled: true,
-      },
-    },
-    xaxis: {
-      categories: props.labels
-    },
-    legend: {
-      show: false,
-    },
-  }
-})
-
-
-const { center, series, source, labels, width } = toRefs(props)
-
-
-</script>
-
-<template>
-
-  <EpEdu :title="title" :type="type" :hideIcon="hideIcon" :icon="mdiTriangle">
-    <template #intentions v-if="renderText">
-
-      <div v-html="renderText"></div>
-    </template>
-    <template #content>
-      <div :class="`p-4 ${center ? 'flex justify-center' : ''}`" v-if="labels && series">
-        <apexchart type="bar" :width="width" :height="height" :options="optionsFunnel" :series="series"></apexchart>
-      </div>
-    </template>
-    <template #actions v-if="source">
-      <p>{{ source }}</p>
-    </template>
-  </EpEdu>
-</template>

package/src/components/charts/EpLineChart.vue

@@ -1,106 +0,0 @@
-<script setup lang="ts">
-import { computed, toRefs } from "vue";
-import EpEdu from "../educationals/EpEdu.vue";
-import { mdiChartLine } from "@mdi/js";
-import { type MediaVariants } from "../../types/Medias";
-import { isHtml } from "../../composables/isHtml";
-import { useMarkdown } from "../../composables/useMarkdown";
-import { useColorMode } from '@vueuse/core'
-
-interface Serie {
-    name: string;
-    data: (string | number)[];
-}
-
-interface Options {
-    xaxis: {
-        categories: (number | string)[];
-        convertedCatToNumeric?: boolean;
-    },
-    colors?: string[]
-}
-
-interface Props {
-    series: Serie[];
-    options: Options;
-    id?: string;
-    center?: boolean;
-    title?: string;
-    intentions?: string;
-    hideIcon?: boolean;
-    type?: MediaVariants;
-    source?: string;
-    width?: string;
-    dataNoDisponible?: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    center: true,
-    width: "500",
-    dataNoDisponible: "Data no disponible"
-
-});
-
-const renderText = computed(() => {
-    if (!props.intentions) {
-        return null;
-    }
-    if (!isHtml(props.intentions)) {
-        return useMarkdown(props.intentions);
-    }
-    return props.intentions;
-});
-
-
-const mode = useColorMode()
-
-const globalOptions = computed(() => {
-    return {
-        ...props.options,
-        theme: {
-            mode: mode.value
-        },
-        dataLabels: {
-            enabled: false
-        },
-        stroke: {
-            curve: "straight"
-        },
-        chart: {
-            background: 'transparent',
-            type: "line",
-            zoom: {
-                enabled: false,
-            },
-        },
-        grid: {
-            row: {
-                colors: undefined,
-                opacity: 0.2
-            },
-        }
-    }
-})
-
-const { center, series, source, width, dataNoDisponible } = toRefs(props)
-
-</script>
-
-<template>
-    <EpEdu :title="title" :type="type" :hideIcon="hideIcon" :icon="mdiChartLine">
-        <template #intentions v-if="renderText">
-            <div v-html="renderText"></div>
-        </template>
-        <template #content>
-            <div :class="`p-4 ${center ? 'flex justify-center' : ''}`" v-if="globalOptions && series">
-                <apexchart :width="width" type="line" :options="globalOptions" :series="series"></apexchart>
-            </div>
-            <div v-else>
-                <p>{{ dataNoDisponible }}</p>
-            </div>
-        </template>
-        <template #actions v-if="source">
-          {{ source }}
-        </template>
-    </EpEdu>
-</template>