ep-lib-ts 1.0.55 → 1.0.57

package/src/components/medias/EpHierarchy.vue

@@ -1,368 +0,0 @@
-<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
-}
-//nested component 
-
-const components = import.meta.glob([
-  './*.vue',         // all components in medias (same folder)
-  '../basics/*.vue', // components/charts/
-  '../signages/*.vue' // components/signages/
-])
-
-const currentRenderComponent = computed(() => {
-  if (!currentNode.value || !currentNode.value.component) {
-    return null
-  }
-
-  const { path, name } = useComponent(currentNode.value.component.type)
-  //console.log(path, name)
-  let fullPath = ''
-  if(path === "medias"){
-    fullPath = `./${name}.vue`
-  }else{
-    fullPath = `../${path}/${name}.vue`
-  }
-  //console.log(fullPath)
-  const loader = components[fullPath] as (() => Promise<{ default: NestedComponents }>) | undefined
-
-  if (!loader) {
-    console.warn(`Component not found: ${fullPath}`)
-    return null // or defineAsyncComponent(() => import('../fallbacks/EpNothing.vue'))
-  }
-
-  return defineAsyncComponent(loader)
-})
-
-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/EpIframe.vue

@@ -1,73 +0,0 @@
-<script setup lang="ts">
-import { toRefs, computed } from "vue";
-import EpEdu from "../educationals/EpEdu.vue";
-//types with capital letter, object styles in lowercase
-import { type MediaVariants } from "../../types/Medias";
-import { type MandateLevel } from '../../types/MandateLevel';
-import { isHtml } from '../../composables/isHtml';
-import {useMarkdown} from '../../composables/useMarkdown'
-import { mdiApplicationBrackets } from "@mdi/js";
-interface Props {
-  src: string;
-  big?: boolean;
-  title?: string;
-  intentions?: string;
-  hideIcon?:boolean;
-  type?:MediaVariants;
-  mandateLevel?:MandateLevel|null;
-  customHeight?:number;
-  labelIntentions?:string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  type:'neutral',
-  big: false,
-  hideIcon:false
-});
-
-
-const renderText = computed(()=>{
-     if(!props.intentions){
-      return null
-     }
-     if(!isHtml(props.intentions)){
-        return useMarkdown(props.intentions)
-     }
-     return props.intentions
-})
-
-const height = computed(() => {
-  if(props.customHeight){
-    return props.customHeight
-  }
-  return props.big ? "1000" : "520";
-});
-
-const _src = computed(()=>{
-   let lastLetter = props.src[props.src.length -1]
-   let isNum = /^\d+$/.test(lastLetter);
-   let studiumUrl = props.src.includes('https://studium.umontreal.ca')
-   if(isNum && studiumUrl){
-     return props.src + '&embed=1'
-   }
-   return props.src
-})
-
-const { title, hideIcon } = toRefs(props);
-</script>
-
-<template>
-  <EpEdu :title="title" :labelIntentions="labelIntentions" :type="type" :hideIcon="hideIcon" :icon="mdiApplicationBrackets" :mandateLevel="mandateLevel">
-     <template #intentions v-if="renderText">
-       <div v-html="renderText" ></div>
-     </template>
-     <template #content>
-
-        <iframe :src="_src" class="w-full" :height="height"></iframe>
-
-     </template>
-     <!-- <template #actions>
-       <EpBtn :color="type=='base'?'text-gray-700':'text-white'" :type="type">[Repair btn style... to change]</EpBtn>
-     </template> -->
-   </EpEdu>
-</template>

package/src/components/medias/EpKatex.vue

@@ -1,76 +0,0 @@
-<script setup lang="ts">
-import { onMounted, ref, computed, toRefs } from "vue";
-import katex from "katex";
-import EpEdu from "../educationals/EpEdu.vue";
-
-import { mdiFunctionVariant } from "@mdi/js";
-import { type MediaVariants } from "../../types/Medias";
-import { isHtml } from "../../composables/isHtml";
-import { useMarkdown } from "../../composables/useMarkdown";
-
-interface Props {
-  content: string;
-  center?: boolean;
-  title?: string;
-  intentions?: string;
-  hideIcon?: boolean;
-  type?: MediaVariants;
-  labelIntentions?:string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  center: false,
-});
-
-const renderKatex = ref<HTMLDivElement>();
-
-onMounted(() => {
-  if(renderKatex.value){
-    katex.render(String.raw`${props.content}`, renderKatex.value, {
-    throwOnError: false,
-    output: "html",
-  });
-  }
-});
-
-const renderText = computed(() => {
-  if (!props.intentions) {
-    return null;
-  }
-  if (!isHtml(props.intentions)) {
-    return useMarkdown(props.intentions);
-  }
-  return props.intentions;
-});
-
-const {center} = toRefs(props)
-
-</script>
-
-<template>
-  <EpEdu
-    :title="title"
-    :type="type"
-    :hideIcon="hideIcon"
-    :icon="mdiFunctionVariant"
-    :labelIntentions="labelIntentions"
-  >
-    <template #intentions v-if="renderText">
-      <div v-html="renderText"></div>
-    </template>
-    <template #content>
-      <div :class="`p-4 ${center ? 'flex justify-center' : ''}`">
-        <div ref="renderKatex"></div>
-      </div>
-    </template>
-    <!-- <template #actions>
-       <EpBtn :color="type=='base'?'text-gray-700':'text-white'" :type="type">[Repair btn style... to change]</EpBtn>
-     </template> -->
-  </EpEdu>
-</template>
-
-<style scoped>
-.katex {
-  font-size: 1.6em;
-}
-</style>

package/src/components/medias/EpLink.vue

@@ -1,78 +0,0 @@
-<script setup lang="ts">
-import { computed, toRefs } from "vue";
-//types with capital letter, object styles in lowercase
-import { type MediaVariants } from "../../types/Medias";
-import { type MandateLevel } from "../../types/MandateLevel";
-import EpBtn from "../basics/EpBtn.vue";
-import { mdiLinkVariant } from "@mdi/js";
-import EpEdu from "../educationals/EpEdu.vue";
-import useColors from "../../composables/useColors";
-import { useRenderText } from "../../composables/useRenderText";
-
-interface Props {
-  url: string;
-  title?: string;
-  intentions?: string;
-  mandateLevel?: MandateLevel | null;
-  labelIntentions?: string;
-  type?: MediaVariants;
-  hideIcon?: boolean;
-  labelCard?: string;
-  icon?: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  type: "neutral",
-  hideIcon: false,
-});
-
-const renderIcon = computed(() => {
-  if (props.icon) {
-    return props.icon;
-  }
-  return mdiLinkVariant;
-});
-
-const hoverColor = computed(() => {
-  return `absolute ${useColors(
-    "bg",
-    'primary' + "dark"
-  )} bottom-0 w-0 left-1/2 h-full -translate-x-1/2 transition-all ease-in-out duration-300 group-hover:w-[105%] -z-[1] group-focus:w-[105%]`;
-});
-
-const { url, title, intentions, mandateLevel, hideIcon } = toRefs(props);
-</script>
-
-<template>
-  <EpEdu
-    :title="labelCard"
-    :icon="renderIcon"
-    flat
-    :hideIcon="hideIcon"
-    :mandateLevel="mandateLevel"
-    :labelIntentions="labelIntentions"
-  >
-    <template #intentions v-if="intentions">
-      <div v-html="useRenderText(intentions)"></div>
-    </template>
-    <template #content>
-      <div class="flex justify-center">
-        <div class="w-4/5">
-          <EpBtn
-            block
-            rounded
-            type="primary"
-            :prependIcon="renderIcon"
-            :href="url"
-            extraClass="group font-medium tracking-wide relative inline-flex justify-center overflow-hidden z-10 transition-all duration-300 ease-in-out "
-          >
-            <div>
-              <span class="font-medium tracking-wider">{{ title }}</span>
-              <span :class="hoverColor"></span>
-            </div>
-          </EpBtn>
-        </div>
-      </div>
-    </template>
-  </EpEdu>
-</template>

package/src/components/medias/EpLinkVersion.vue

@@ -1,48 +0,0 @@
-<script setup lang="ts">
-import { toRefs } from 'vue';
-import EpLink from './EpLink.vue';
-import EpIframe from './EpIframe.vue';
-
-type TypeLink = "iframe" | "button"
-
-interface Link {
-   id:string;
-   url:string;
-   title:string;
-   disabled:boolean
-}
-
-interface Props{
-   type:TypeLink;
-   link:Link;
-   big?:boolean;
-   customHeight?:number;
-   labels?:{
-      noData?:string;  
-   }
-}
-
-const props = withDefaults(defineProps<Props>(),{
-   big:false,
-   labels:()=>{
-      return {
-         noData:"no data"
-      }      
-   }
-})
-
-const {type, link, big, customHeight} = toRefs(props)
-
-</script>
-
-<template>
-   <div v-if="type === 'button'">
-      <EpLink :title="link.title" :url="link.url"></EpLink>
-   </div>
-   <div v-else-if="type === 'iframe'">
-      <EpIframe :title="link.title" :src="link.url" :big="big" :custom-height="customHeight"></EpIframe>
-   </div>
-   <div v-else>
-      {{labels.noData}}
-   </div>
-</template>