ep-lib-ts 1.0.55 → 1.0.57

package/src/components/charts/EpPieChart.vue

@@ -1,102 +0,0 @@
-<script setup lang="ts">
-import { computed, toRefs } from "vue";
-import EpEdu from "../educationals/EpEdu.vue";
-import { mdiChartPie } 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 TitlePie {
-    text: string;
-    align?: string;
-}
-
-interface OptionsPieChart {
-  chart?:{
-    type?:string;
-    width?:number|string;
-  }
-  title:TitlePie;
-  labels:string[];
-  colors?:string[];
-}
-
-
-
-interface Props {
-    series: number[];
-    options: OptionsPieChart;
-    id?: string;
-    title?:string;
-    center?: boolean;
-    intentions?: string;
-    hideIcon?: boolean;
-    type?: MediaVariants;
-    source?: string;
-    width?:string;
-    dataNoDisponible?:string; 
-   
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    center: true,
-    type:'neutral',
-    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'
-    },
-  }
-})
-
-
-
-const { center, series, source, width, dataNoDisponible } = toRefs(props)
-
-</script>
-
-<template>
-    <EpEdu :title="title" :type="type" :hideIcon="hideIcon" :icon="mdiChartPie">
-
-        <template #intentions v-if="renderText">
-           
-            <div v-html="renderText"></div>
-        </template>
-        <template #content>
-            <div :class="`p-4 ${center ? 'flex justify-center' : ''}`" v-if="options && series">
-                <apexchart :width="width" type="pie" :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/educationals/EpBranchingScenario.vue

@@ -1,307 +0,0 @@
-<script setup lang="ts">
-
-import { ref, computed } from "vue";
-import { useRenderText } from '../../composables/useRenderText';
-import type { NestedComponents } from "../../types/Component";
-import type { TreeNode, ColorPath, ColorRect } from "../../types/Hierarchy";
-import EpIcon from '../../components/basics/EpIcon.vue';
-import Details from "../tools/Details.vue";
-import EpModal from "../interactions/EpModal.vue";
-import EpHierarchy from "../medias/EpHierarchy.vue";
-import EpBtn from "../basics/EpBtn.vue";
-import { mdiArrowLeft } from "@mdi/js";
-import TextMedia from "../tools/TextMedia.vue";
-
-
-interface Props {
-    title: string;
-    media?:NestedComponents;
-    initialInstruction?: string | null;
-    initialTwoCols?:boolean;
-    generalFeedback?: string;
-    bgColor?: string;
-    decisionTree: TreeNode
-    transitionAnimation?: "fade" | "scale" | "slideY";
-    labelStart?:string;
-    labelFinish?:string;
-    labelYourPath?:string;
-    labelShowFullPath?:string;
-    labelClose?:string;
-    labelRestart?:string;
-    colorPath?:ColorPath;
-    colorRect?:ColorRect;
-    isCluster?:boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    initialInstruction: null,
-    transitionAnimation: "fade",
-    labelFinish:"Vous avez terminé le scénario!",
-    labelYourPath:"Votre parcours",
-    labelShowFullPath:"Voir le parcours au complet",
-    labelClose:"Fermer",
-    labelRestart:"Recommencer",
-    labelStart:"Commencer",
-    colorRect:'fill-main-color-400',
-    colorPath:'stroke-yellow-400'
-});
-
-
-const showPath = ref(false)
-const path = ref<TreeNode[]>([])
-const userPath = ref<TreeNode|null>(null)
-const currentOption = ref<TreeNode | null>(null);
-
-
-// Manage the introductory part
-const isIntroductoryPart = ref(true);
-
-const start = () => {
-  isIntroductoryPart.value = false
-  currentOption.value = props.decisionTree
-}
-
-const styleIntro = computed(() => {
-  const noInstruction = !props.initialInstruction;
-  const noMedia = !props.media;
-
-  if (noInstruction && noMedia) {
-    return 'pt-44';
-  }
-
-  return '';
-});
-
-
-
-
-// Return function
-const goToPrevious = () => {
-    //if(notTheEnd.value){
-        if(path.value.length === 0) {
-            isIntroductoryPart.value = true;
-            currentOption.value = null;
-            return 
-        }
-
-        path.value.pop();
-       // Get the previous option in the path
-        const lastOption = path.value[path.value.length - 1];
-
-        if (lastOption) {
-            currentOption.value = lastOption;
-        } else {
-            currentOption.value = props.decisionTree;
-        }
-};
-
-// Restart function
-const restart = () => {
-   //currentSlide.value = 0;
-    currentOption.value = null;
-    isIntroductoryPart.value = true;
-    path.value = []
-};
-
-
-
-const nextSlide = (option:TreeNode) => {
-  //currentSlide.value++
-  path.value.push(option)
-  if (option.children && option.children.length > 0) {
-    currentOption.value = option; // drill into next level
-  } else {
-    currentOption.value = null; // reached the end (leaf node)
-    userPath.value = convertOptionToTreeNode(props.decisionTree, path.value);
-  }
-}
-
-
-//helper function
-function convertOptionToTreeNode(option: TreeNode, path: TreeNode[]): TreeNode {
-  const isActive = path.includes(option);
-  return {
-    name: option.name,
-    text: option.text,
-    component: option.component,
-    active: isActive,
-    children: option.children?.map(child => convertOptionToTreeNode(child, path))
-  };
-}
-
-
-
-</script>
-
-<template>
-  <div>
-    <div 
-      class=" bg-gray-200 dark:bg-slate-800 rounded-md p-4 flex flex-col"
-      :style="{ minHeight: '500px', backgroundColor: bgColor }"
-    >
-      <!-- <div v-for="item in path" :key="item.name">
-        <span class="text-xs">{{ item.name }}</span>
-      </div> -->
-      <!-- Header (fixed at top of card) -->
-      <div class="mb-2">
-        <h1 class="font-bold text-3xl text-center">{{ title }}</h1>
-        <div v-if="currentOption" class="mt-2">
-          <EpBtn 
-            type="primary" 
-            rounded
-            size="small"
-            :extra-class="`${transitionAnimation}`" 
-            @click="goToPrevious"
-          >
-            <EpIcon :icon-path="mdiArrowLeft" size="25" />
-          </EpBtn>
-        </div>
-      </div>
-
-      <!-- Content Area -->
-      <div>
-        <!-- Introductory Part -->
-        <div 
-          v-if="isIntroductoryPart" 
-          class="w-full flex flex-col space-y-6"
-        >
-          <TextMedia 
-            :text="initialInstruction ?? ''"
-            :media="media"
-            :cols="initialTwoCols"
-          />
-          <div :class="`justify-center flex ${styleIntro}`">
-            <EpBtn type="primary" rounded @click="start">{{labelStart}}</EpBtn>
-          </div>
-        </div>
-
-        <!-- Slides -->
-        <template v-else-if="currentOption && !isIntroductoryPart">
-          <div class="w-full">
-            <div :class="`${transitionAnimation} my-12`">
-              <TextMedia 
-                :text="currentOption.text ?? ''"
-                :media="currentOption.component"
-                :cols="currentOption.cols"
-              />
-
-              <div 
-                :class="`w-full my-4 mx-4 flex flex-wrap gap-2 justify-center items-center`" 
-                >
-                <template v-for="(option, index) in currentOption.children" :key="`option-${index}`">
-                    <EpBtn 
-                        rounded
-                        type="primary" 
-                        class="flex-1 min-w-[120px] sm:min-w-[160px] max-w-xs"
-                        @click="nextSlide(option)"
-                    >
-                        {{ option.name }}
-                    </EpBtn>
-                </template>
-                </div>
-            </div>
-          </div>
-        </template>
-
-        <!--show path-->
-        <div v-else>
-            
-            <!-- <template v-if="userPath">
-                <EpHierarchy :nodes="userPath"/>
-            </template> -->
-             <h3 class="text-xl text-center font-semibold">{{ labelFinish }}</h3>
-            <div :class="`flex gap-6 mt-3 ${!generalFeedback ? 'w-3/6 mx-auto':''}`">
-             <div class="w-full">  
-                <h3 class="font-semibold mb-3">{{ labelYourPath }}</h3>
-                 <div class="overflow-auto p-2" :style="{height: '200px'}">
-                    <template v-for="(item,i) in path" :key="`user-choice-${i}`">
-                            <div class="mb-2">
-                                <Details 
-                                    :content="item.text ?? ''" 
-                                    :title="item.name"
-                                    :media="item.component"
-                                />
-                            </div>
-                    </template>
-                 </div>
-                <div class="flex justify-center mt-2">
-                    <EpBtn type="info" rounded @click="showPath = true">{{ labelShowFullPath }}</EpBtn>
-                </div>
-                <EpModal v-if="userPath" v-model="showPath">
-                    <EpHierarchy 
-                    :nodes="userPath" 
-                    :is-cluster="props.isCluster"
-                    :color-path="props.colorPath" 
-                    :color-rect="props.colorRect"
-                    />
-                    <div class="flex justify-end mt-4">
-                        <EpBtn @click="showPath = false" type="error" outlined rounded>{{labelClose}}</EpBtn>
-                    </div>
-                </EpModal>
-             </div>
-             <div v-if="generalFeedback" class="flex w-full flex-col col-span-1 items-center px-4 border-l-2 border-gray-700 overflow-auto">
-                <div v-html="useRenderText(generalFeedback)"></div>
-              </div>
-            </div>
-
-            <div class="flex justify-center mt-2">
-                <EpBtn rounded type="warning" @click="restart">{{ labelRestart }}</EpBtn>
-            </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-
-
-<style scoped>
-@keyframes fade {
-    0% {
-        opacity: 0;
-    }
-    100% {
-        opacity: 1;
-    }
-    
-}
-
-@keyframes scale {
-    0% {
-        transform: scale(0.5);
-        opacity: 0;
-    }
-    100% {
-        transform: scale(1);
-        opacity: 1;
-    }
-}
-
-@keyframes slideY {
-    0% {
-        transform: translateY(-100%);
-        opacity: 0;
-    }
-    100% {
-        transform: translateY(0);
-        opacity: 1;
-    }
-}
-
-/* Transition animation */
-.fade{
-    animation: fade 1s;
-}
-
-.scale{
-    animation: scale 1s;
-}
-
-.slideY{
-    animation: slideY 1s;
-}
-
-
-
-</style>
-

package/src/components/educationals/EpCodeblock.vue

@@ -1,74 +0,0 @@
-<script setup lang="ts">
-  import VCodeBlock from '@wdns/vue-code-block';   
-  import {defaultOption} from "../../types/Codeblock";
-  import EpAccordeon from "../interactions/EpAccordeon.vue";
-  import type Theme from "../../types/Codeblock";
-  import { computed} from "vue";
-  import { ref } from "vue"; 
-
-  type Langue = "javascript"|"css"|"html"|"php"|"json"|"typescript"|"python"|"xml";
-
-  interface Props {
-    code?: string;  
-    label?:string;
-    lang?:Langue;
-    theme?:Theme;
-    title?: string | null;
-    compact?: boolean;
-  }
-const props = withDefaults(defineProps<Props>(), {   
-    code:"",
-    label:"",
-    lang:"javascript",
-    theme: defaultOption,
-    compact: false,
-})
-
-const renderTitle = computed(() => {
-  if (!props.title) {
-    return "En savoir plus"
-  }
-  return props.title;
-});
-
-const code = computed(()=>{
-    return ref(props.code);
-})
-const label = computed(()=>{
-    return props.label;
-})
-const lang = computed(()=>{
-    return props.lang;
-})
-const theme = computed(()=>{
-    return props.theme;
-})
-</script>
-
-<template>
- 
-  <VCodeBlock
-    :code=code
-    highlightjs 
-    :label=label
-    :lang=lang
-    :theme=theme
-    v-if="!compact"
-  />
-
-  <EpAccordeon outlined :title="renderTitle" v-else>
-          <VCodeBlock
-          :code=code
-          highlightjs 
-          :label=label
-          :lang=lang
-          :theme=theme
-        />
-  </EpAccordeon>
-  
-</template>
-<style>
-pre {
-	white-space: break-spaces;
-}
-</style>

package/src/components/educationals/EpConclusion.vue

@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import { toRefs } from "vue";
-import EpIcon from "../basics/EpIcon.vue";
-
-interface Props {
-  icon?: string | null;
-  title?: string | null;
-  subtitle? :string | null;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  title: "Conclusion",
-});
-const { title, icon, subtitle } = toRefs(props);
-</script>
-<template>
-	<div class="lg:grid lg:grid-cols-12 lg:gap-8">
-	  <div class="lg:col-span-2">
-		<h2
-		  class="text-pretty text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-100 sm:text-xl"
-		>
-		<EpIcon v-if="icon" :icon-path="icon" size="28" extraClass="mr-2"></EpIcon>
-		  {{ title }}
-		</h2>
-	  </div>
-	  <div class="lg:col-span-8 lg:mt-0 lg:border-l dark:border-gray-700 lg:pl-4">
-		<div class="py-2">
-		  <h3 v-if="subtitle" class="text-base font-semibold leading-7 text-gray-900 dark:text-gray-100">
-			{{subtitle}}
-		  </h3>
-		  <div class="text-gray-600 dark:text-gray-300">
-            <slot></slot>
-          </div>
-		</div>
-	  </div>
-	</div>
-  </template>
-  

package/src/components/educationals/EpDescription.vue

@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import { toRefs } from "vue";
-import EpIcon from "../basics/EpIcon.vue";
-
-interface Props {
-  icon?: string | null;
-  title?: string | null;
-  subtitle? :string | null;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  title: "Description",
-});
-const { title, icon, subtitle } = toRefs(props);
-</script>
-<template>
-	<div class="lg:grid lg:grid-cols-12 lg:gap-8">
-	  <div class="lg:col-span-2">
-		<h2
-		  class="text-pretty text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-100 sm:text-xl"
-		>
-		<EpIcon v-if="icon" :icon-path="icon" size="28" extraClass="mr-2"></EpIcon>
-		  {{ title }}
-		</h2>
-	  </div>
-	  <div class="lg:col-span-8 lg:mt-0 lg:border-l dark:border-gray-700 lg:pl-4">
-		<div class="py-2">
-		  <h3 v-if="subtitle" class="text-base font-semibold leading-7 text-gray-900 dark:text-gray-100">
-			{{subtitle}}
-		  </h3>
-		  <div class="text-gray-600 dark:text-gray-300">
-            <slot></slot>
-          </div>
-		</div>
-	  </div>
-	</div>
-  </template>
-  

package/src/components/educationals/EpDocument.vue

@@ -1,92 +0,0 @@
-<script setup lang="ts">
-import { toRefs, computed } from "vue";
-import EpCard from "../basics/EpCard.vue";
-import EpIcon from '../basics/EpIcon.vue'
-import { mdiFile } from '@mdi/js';
-import { mdiArrowCollapseDown } from '@mdi/js';
-import { mdiOpenInNew } from '@mdi/js';
-import EpBtn from "../basics/EpBtn.vue";
-import { useRenderText } from "../../composables/useRenderText";
-
-interface Props {
-  url:string;
-  src?: string | null;
-  icon?:string;
-  title?:string;
-  description?:string;
-  hideIcon?:boolean;
-  labelOpen?:string;
-  labelDownload?:string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  src: null,
-  hideIcon:false,
-  labelDownload:"Télécharger",
-  labelOpen:"Ouvrir"
-});
-
-
-
-const fileDownloadExtensions = [
-  'doc', 'docx',
-  'xls', 'xlsx',
-  'ppt', 'pptx',
-  'rtf',
-  'odt', 'ods', 'odp'
-];
-
-const getExtension = (url: string): string => {
-  const queryRemoved = url.split('?')[0];
-  const parts = queryRemoved.split('.');
-  return parts.length > 1 ? parts.pop()!.toLowerCase() : '';
-};
-
-
-const shouldDownload = computed(() => {
-  const ext = getExtension(props.url);
-  return fileDownloadExtensions.includes(ext);
-});
-
-const iconBtn = computed(() => {
-  return shouldDownload.value ? mdiArrowCollapseDown : mdiOpenInNew;
-});
-
-const label = computed(() => {
-  return shouldDownload.value ? props.labelDownload : props.labelOpen;
-});
-
-const renderIcon = computed(()=> {
-  return props.icon ? props.icon : mdiFile
-})
-
-
-const { src, hideIcon } = toRefs(props);
-
-
-</script>
-
-<template>
-  <div class="w-5/6 mx-auto">
-    <EpCard>
-      <div :class="`md:flex md:flex-wrap rounded-md`">
-        <div class="w-1/5 mr-6" v-if="src">
-          <img :class="`md:w-full md:h-full md:object-cover rounded-md`" :src="src"
-            alt="Image of quote" />
-        </div>
-        <div class="flex items-center justify-center px-7" v-else-if="!hideIcon">
-          <div class="text-base dark:text-white'">
-            <EpIcon :size="60" :icon-path="renderIcon" extra-class="dark:text-white"></EpIcon>
-          </div>
-        </div>
-        <div :class="`py-6 flex-1 ${hideIcon?'px-6':'pr-2'}`">
-          <h4 class="text-2xl font-semibold mb-4" v-if="title">{{ title }}</h4>
-          <div class="mb-3" v-if="description" v-html="useRenderText(description)"></div>
-          <EpBtn :href="url" block type="primary" rounded :prepend-icon="iconBtn"> 
-            {{label}} 
-          </EpBtn>
-        </div>
-      </div>
-    </EpCard>
-  </div>
-</template>