ep-lib-ts 1.0.47 → 1.0.48

package/src/components/educationals/EpDocument.vue

@@ -0,0 +1,92 @@
+<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-3/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"></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>

package/src/components/interactions/EpContentSlider.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, defineAsyncComponent, watch, onMounted, nextTick, ComponentPublicInstance } from "vue";
+import { ref, computed, defineAsyncComponent, ComponentPublicInstance } from "vue";
 import { type SlidesType } from "../../types/Slides";
 import { useComponent } from "../../composables/useComponent";
 import { useRenderText } from "../../composables/useRenderText";

package/src/components/medias/EpHierarchy.vue

@@ -0,0 +1,345 @@
+<script setup lang="ts">
+import { ref, onMounted, computed, defineAsyncComponent } from 'vue'
+import { hierarchy, tree, cluster, type HierarchyPointLink, type HierarchyPointNode } from 'd3-hierarchy'
+import * as d3 from 'd3-selection'
+import { linkVertical, linkHorizontal } from 'd3-shape'
+//import { ascending } from 'd3-array'
+import * as d3Zoom from 'd3-zoom'
+import type { TreeNode, ColorPath, ColorRect } from '../../types/Hierarchy'
+import type { NestedComponents } from '../../types/Component'
+import { useComponent } from '../../composables/useComponent'
+import EpModal from '../interactions/EpModal.vue'
+import EpBtn from '../basics/EpBtn.vue'
+import { useRenderText } from '../../composables/useRenderText'
+
+
+
+interface Props {
+  nodes: TreeNode;
+  maxWidth?: number;
+  maxHeight?: number;
+  labelClose?: string;
+  isCluster?:boolean;
+  colorPath?:ColorPath;
+  colorRect?:ColorRect;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  labelClose: "fermer",
+  maxWidth: 800,
+  maxHeight: 600,
+  isCluster:false,
+  colorRect:'fill-main-color-400',
+  colorPath:'stroke-yellow-400'
+})
+
+const treeContainer = ref<HTMLDivElement | null>(null)
+const treeWrapper = ref<HTMLDivElement | null>(null)
+
+
+/* control modal */
+type ShowNode = {
+  title: string;
+  text?: string;
+  component?: NestedComponents
+}
+
+const currentNode = ref<ShowNode | null>(null)
+const showModal = ref(false)
+
+const handleNodeClick = (node: TreeNode) => {
+  currentNode.value = {
+    title: node.name,
+    text: node.text,
+    component: node.component
+  }
+  showModal.value = true
+}
+
+const closeModal = () => {
+  showModal.value = false
+  currentNode.value = null
+}
+
+const currentRenderComponent = computed(() => {
+  if (currentNode.value && currentNode.value.component) {
+    const componentToLoad = useComponent(currentNode.value.component.type);
+    return defineAsyncComponent(() => import(`../${componentToLoad.path}/${componentToLoad.name}.vue`));
+  }
+  return null;
+});
+
+onMounted(() => {
+  if (!treeContainer.value) return
+  
+  if(props.isCluster){
+    clusterView()
+  }else{
+    treeView()
+  }
+  
+  
+
+})
+
+
+const treeView = () => {
+  const rectW = 130
+  const rectH = 40
+  const margin = { top: 40, right: 40, bottom: 40, left: 40 }
+
+  const root = hierarchy<TreeNode>(props.nodes)
+  //const totalLeafCount = root.leaves().length
+  const width = Math.max(props.maxWidth)
+  const height = props.maxHeight
+
+  const treeLayout = tree<TreeNode>()
+    .nodeSize([170, 100]) // [x spacing, y spacing]
+
+  const treeData = treeLayout(root)
+
+  const svg = d3.select(treeContainer.value)
+    .append('svg')
+    .attr('width', width)
+    .attr('height', height)
+
+  const g = svg.append('g')
+    .attr('transform', `translate(${margin.left}, ${margin.top})`)
+
+  const zoom = d3Zoom.zoom<SVGSVGElement, unknown>()
+    .scaleExtent([0.5, 2])
+    .on('zoom', (event) => {
+      g.attr('transform', event.transform)
+    })
+
+  svg.call(zoom)
+
+  const centerX = width / 2 - treeData.x
+  const centerY = 30//height / 2 - treeData.y
+  const identity = (d3Zoom as any).zoomIdentity
+  svg.call(zoom.transform, identity.translate(centerX, centerY))
+
+  // Links
+  const linkPath = linkVertical<HierarchyPointLink<TreeNode>, HierarchyPointNode<TreeNode>>()
+    .x(d => d.x)
+    .y(d => d.y)
+
+  g.selectAll('path.link')
+    .data(treeData.links())
+    .enter()
+    .append('path')
+    .attr('d', d => linkPath(d))
+    .attr('class', d => {
+      const link = d.target.data.active ? `${props.colorPath} stroke-2` : 'stroke-black dark:stroke-white'
+      return `${link} link fill-none`
+    })
+
+  // Nodes
+  const node = g.selectAll('g.node')
+    .data(treeData.descendants())
+    .enter()
+    .append('g')
+    .attr('class', 'node')
+    .attr('transform', d => `translate(${d.x}, ${d.y})`)
+    .style('cursor', d => (d.data.component || d.data.text ? 'pointer' : 'default'))
+    .each(function (d) {
+      if (d.data.component || d.data.text) {
+        d3.select(this).on('click', (_event) => handleNodeClick(d.data))
+      }
+    })
+  //.style('cursor', 'pointer')
+  //.on('click', (_event, d) => handleNodeClick(d.data))
+
+  node.each(function (d) {
+    const group = d3.select(this)
+
+    // Append text temporarily
+    const text = group.append('text')
+      .attr('class', 'text-sm font-semibold fill-black dark:fill-white')
+      .attr('text-anchor', 'middle')
+      .attr('x', 0)
+      .attr('y', 0)
+      .attr('dy', '.35em')
+      .text(d.data.name)
+
+    // Get bounding box to determine text size
+    const bbox = (text.node() as SVGTextElement).getBBox()
+    const paddingX = 10
+    const paddingY = 10
+
+    const width = bbox.width + paddingX * 2
+    const height = bbox.height + paddingY * 2
+
+    // Draw rect using text size
+    group.insert('rect', 'text')
+      .attr('class', props.colorRect)
+      .attr('x', -width / 2)
+      .attr('y', -height / 2)
+      .attr('width', width)
+      .attr('height', height)
+      .attr('rx', 4)
+      .attr('ry', 4)
+  })
+
+
+  node.append('text')
+    .attr('x', 0)
+    .attr('y', 0)
+    .attr('dy', '.35em')
+    .attr('class', 'text-sm font-semibold fill-white dark:fill-black')
+    .attr('text-anchor', 'middle')
+    .text(d => d.data.name)
+    .style('pointer-events', 'none')
+}
+
+const clusterView = () => {
+  const rectW = 130
+  const rectH = 40
+  const margin = { top: 40, right: 40, bottom: 40, left: 40 }
+
+  const root = hierarchy<TreeNode>(props.nodes)
+  //const totalLeafCount = root.leaves().length
+  const width = Math.max(props.maxWidth)
+  const height = props.maxHeight
+
+  const treeLayout = cluster<TreeNode>()
+    .nodeSize([130, 130]) // [x spacing, y spacing]
+
+  const treeData = treeLayout(root)
+
+  const svg = d3.select(treeContainer.value)
+    .append('svg')
+    .attr('width', width)
+    .attr('height', height)
+
+  const g = svg.append('g')
+    .attr('transform', `translate(${margin.left}, ${margin.top})`)
+
+  const zoom = d3Zoom.zoom<SVGSVGElement, unknown>()
+    .scaleExtent([0.1, 4])
+    .on('zoom', (event) => {
+      g.attr('transform', event.transform)
+    })
+
+  svg.call(zoom)
+
+  const centerX = 30
+  const centerY = height / 2 - treeData.x
+  const identity = (d3Zoom as any).zoomIdentity
+  svg.call(zoom.transform, identity.translate(centerX, centerY))
+
+  // Links
+  const linkPath = linkHorizontal<HierarchyPointLink<TreeNode>, HierarchyPointNode<TreeNode>>()
+  .x(d => d.y)
+  .y(d => d.x) 
+
+   g.selectAll('path.link')
+    .data(treeData.links())
+    .enter()
+    .append('path')
+    .attr('d', d => linkPath(d))
+    .attr('class', d => {
+      const link = d.target.data.active ? `${props.colorPath} stroke-2` : 'stroke-black dark:stroke-white'
+      return `${link} link fill-none`
+    })
+
+  // Nodes
+     const node = g.selectAll('g.node')
+    .data(treeData.descendants())
+    .enter()
+    .append('g')
+    .attr('class', 'node')
+    .attr('transform', d => `translate(${d.y}, ${d.x})`)
+    .style('cursor', d => (d.data.component || d.data.text ? 'pointer' : 'default'))
+    .each(function (d) {
+      if (d.data.component || d.data.text) {
+        d3.select(this).on('click', (_event) => handleNodeClick(d.data))
+      }
+    })
+  //.style('cursor', 'pointer')
+  //.on('click', (_event, d) => handleNodeClick(d.data))
+
+  node.each(function (d) {
+    const group = d3.select(this)
+
+    // Append text temporarily
+    const text = group.append('text')
+      .attr('class', 'text-sm font-semibold fill-black dark:fill-white')
+      .attr('text-anchor', 'middle')
+      .attr('x', 0)
+      .attr('y', 0)
+      .attr('dy', '.35em')
+      .text(d.data.name)
+
+    // Get bounding box to determine text size
+    const bbox = (text.node() as SVGTextElement).getBBox()
+    const paddingX = 10
+    const paddingY = 10
+
+    const width = bbox.width + paddingX * 2
+    const height = bbox.height + paddingY * 2
+
+    // Draw rect using text size
+    group.insert('rect', 'text')
+      .attr('class', props.colorRect)
+      .attr('x', -width / 2)
+      .attr('y', -height / 2)
+      .attr('width', width)
+      .attr('height', height)
+      .attr('rx', 4)
+      .attr('ry', 4)
+  })
+
+
+  node.append('text')
+    .attr('x', 0)
+    .attr('y', 0)
+    .attr('dy', '.35em')
+    .attr('class', 'text-sm font-semibold fill-white dark:fill-black')
+    .attr('text-anchor', 'middle')
+    .text(d => d.data.name)
+    .style('pointer-events', 'none')
+}
+
+
+
+
+const maxW = computed(() => {
+  return `${props.maxWidth.toString()}px`
+})
+
+const maxH = computed(() => {
+  return `${props.maxWidth.toString()}px`
+})
+
+</script>
+
+
+<template>
+  <div>
+    <div ref="treeWrapper" class="tree-wrapper mx-auto" :style="{ maxHeight: maxH, maxWidth: maxW }">
+      <div ref="treeContainer" class="tree-container"></div>
+    </div>
+    <EpModal v-model="showModal" :title="currentNode.title" v-if="currentNode">
+      <div v-if="currentNode.text" v-html="useRenderText(currentNode.text)"></div>
+      <template v-if="currentRenderComponent && currentNode.component">
+        <component :is="currentRenderComponent" v-bind="{ ...currentNode.component.data }" />
+      </template>
+      <div class="flex justify-end">
+        <EpBtn @click="closeModal" type="error" outlined rounded>{{ labelClose }}</EpBtn>
+      </div>
+    </EpModal>
+  </div>
+</template>
+
+<style scoped>
+.tree-wrapper {
+  overflow: auto;
+  border: 1px solid #ddd;
+}
+
+.tree-container {
+  width: 100%;
+  overflow-x: auto;
+}
+</style>

package/src/components/medias/EpSoftware.vue

@@ -17,7 +17,6 @@ interface Props {
   title: string;
   mandateLevel?:MandateLevel | null;
   intentions?: string;
-  version_link?: null;
   hideCover?: boolean;
   version?: string;
   type?:MediaVariants;
@@ -65,7 +64,7 @@ const { title, intentions, cover, hideCover, version, labelCard, hideIcon, manda
         <template v-if="!hideCover">
           <img
             v-if="hasCover"
-            class="object-cover h-24 w-full rounded-t-lg object-cover md:h-auto md:w-24 md:rounded-none md:rounded-l-lg"
+            class="h-24 w-full rounded-t-lg object-cover md:h-auto md:w-24 md:rounded-none md:rounded-l-lg"
             :src="cover"
             :alt="`image de la lecture ${title}`"
           />

package/src/components/tools/Details.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import {ref} from 'vue'
 import EpModal from '../interactions/EpModal.vue';
-import { useRenderText } from '../../composables/useRenderText';
+import type { NestedComponents } from '../../types/Component';
 import EpBtn from '../basics/EpBtn.vue';
 import EpDivider from '../basics/EpDivider.vue';
-import TextImg from './TextImg.vue';
+import TextMedia from './TextMedia.vue';
 const showModal = ref(false)
 
 
@@ -12,7 +12,7 @@ interface Props {
     title?:string;
     content:string;
     labelClose?:string;
-    img?:string;
+    media?:NestedComponents
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -24,14 +24,12 @@ const props = withDefaults(defineProps<Props>(), {
 
 <template>
     <div class="cursor-pointer rounded bg-primary text-white py-2 px-4 flex flex-col items-center" @click="showModal = true">
-        <EpModal v-model="showModal"> 
-            <TextImg
-             :text="content"
-             :src="img"
-             :alt="`image ${title}`"
+        <EpModal v-model="showModal" :title="content"> 
+            <TextMedia
+             :text="title"
+             :media="media"
             />
             <EpDivider/>
-            <p>{{title}}</p>
             <div class="flex justify-end">
              <EpBtn 
                 type="error" 
@@ -43,6 +41,6 @@ const props = withDefaults(defineProps<Props>(), {
             </div>
             
         </EpModal>
-        <p>{{title}}</p>
+        <p class="dark:text-black">{{title}}</p>
     </div>
 </template>

package/src/components/tools/TextMedia.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import {computed, defineAsyncComponent} from "vue"
+import { useRenderText } from '../../composables/useRenderText';
+import { useComponent } from "../../composables/useComponent";
+import type { NestedComponents } from "../../types/Component";
+
+interface Props{
+    media?:NestedComponents;
+    text:string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+})
+
+const currentRenderComponent = computed(() => {
+	if (props.media) {
+		const componentToLoad = useComponent(props.media.type);
+		return defineAsyncComponent(() => import(`../${componentToLoad.path}/${componentToLoad.name}.vue`));
+	}
+	return null;
+});
+
+</script>
+
+<template>
+    <div class="flex items-center justify-center gap-1">
+        <div class="w-full" v-html="useRenderText(text)"></div>
+        <div class="w-full" v-if="currentRenderComponent && media">
+           <component 
+            :is="currentRenderComponent" 
+            v-bind="{...media.data}"/>
+        </div>
+    </div>
+</template>

package/dist/BgAudio-CFZeS_dQ.js

@@ -1,4 +0,0 @@
-import { a7 as f } from "./index-D6RVSyf7.js";
-export {
-  f as default
-};

package/dist/Details-D_yxeUuE.js

@@ -1,4 +0,0 @@
-import { a8 as f } from "./index-D6RVSyf7.js";
-export {
-  f as default
-};

package/dist/DisplayBox-D8hlc9Gn.js

@@ -1,4 +0,0 @@
-import { a9 as f } from "./index-D6RVSyf7.js";
-export {
-  f as default
-};

package/dist/EpAlert-RMp39gBY.js

@@ -1,4 +0,0 @@
-import { a3 as f } from "./index-D6RVSyf7.js";
-export {
-  f as default
-};

package/dist/EpAudio-VXqSaCc0.js

@@ -1,4 +0,0 @@
-import { T as f } from "./index-D6RVSyf7.js";
-export {
-  f as default
-};

package/dist/EpAvatar-CoBsHAyN.js

@@ -1,4 +0,0 @@
-import { c as f } from "./index-D6RVSyf7.js";
-export {
-  f as default
-};

package/dist/EpBadge-Di0ORWOa.js

@@ -1,4 +0,0 @@
-import { d as f } from "./index-D6RVSyf7.js";
-export {
-  f as default
-};

package/dist/EpBarChart-D0FaZPGz.js

@@ -1,4 +0,0 @@
-import { u as f } from "./index-D6RVSyf7.js";
-export {
-  f as default
-};

package/dist/EpBtn-D5wu8yT7.js

@@ -1,4 +0,0 @@
-import { e } from "./index-D6RVSyf7.js";
-export {
-  e as default
-};

package/dist/EpCard-Drdckmbx.js

@@ -1,4 +0,0 @@
-import { f } from "./index-D6RVSyf7.js";
-export {
-  f as default
-};

package/dist/EpCardLink-DUGjSAGF.js

@@ -1,4 +0,0 @@
-import { U as f } from "./index-D6RVSyf7.js";
-export {
-  f as default
-};

package/dist/EpChip-DDochFMT.js

@@ -1,4 +0,0 @@
-import { g as f } from "./index-D6RVSyf7.js";
-export {
-  f as default
-};

package/dist/EpCodeblock-BjxiWHoc.js

@@ -1,4 +0,0 @@
-import { y as f } from "./index-D6RVSyf7.js";
-export {
-  f as default
-};

package/dist/EpConclusion-CXoGHiG1.js

@@ -1,4 +0,0 @@
-import { z as f } from "./index-D6RVSyf7.js";
-export {
-  f as default
-};

package/dist/EpContentSlider-HBkmUIw5.js

@@ -1,4 +0,0 @@
-import { L as f } from "./index-D6RVSyf7.js";
-export {
-  f as default
-};

package/dist/EpDescription-BmRR6d2p.js

@@ -1,4 +0,0 @@
-import { A as f } from "./index-D6RVSyf7.js";
-export {
-  f as default
-};

package/dist/EpDivider-BALEThPk.js

@@ -1,4 +0,0 @@
-import { h as f } from "./index-D6RVSyf7.js";
-export {
-  f as default
-};

package/dist/EpEdu-D7erj5ED.js

@@ -1,4 +0,0 @@
-import { B as f } from "./index-D6RVSyf7.js";
-export {
-  f as default
-};

package/dist/EpFlex-CdriG_tC.js

@@ -1,4 +0,0 @@
-import { i as f } from "./index-D6RVSyf7.js";
-export {
-  f as default
-};

package/dist/EpFunnelChart-HVjlJWQd.js

@@ -1,4 +0,0 @@
-import { v as f } from "./index-D6RVSyf7.js";
-export {
-  f as default
-};

package/dist/EpHeader-Bl4162yt.js

@@ -1,4 +0,0 @@
-import { a4 as f } from "./index-D6RVSyf7.js";
-export {
-  f as default
-};

package/dist/EpHover-CVY1squO.js

@@ -1,4 +0,0 @@
-import { j as f } from "./index-D6RVSyf7.js";
-export {
-  f as default
-};

package/dist/EpHoverCard-BIuPau4X.js

@@ -1,4 +0,0 @@
-import { k as f } from "./index-D6RVSyf7.js";
-export {
-  f as default
-};