ep-lib-ts 1.0.55 → 1.0.57

package/src/components/interactions/EpModal.vue

@@ -1,119 +0,0 @@
-<script setup lang="ts">
-import { computed, toRefs } from 'vue';
-import EpCard from '../basics/EpCard.vue'
-import { useColorMode } from '@vueuse/core'
-
-const size = {
-    compact:"w-[45%]",
-    default:"w-[75%]",
-    comfortable:"w-[85%]"
-}
-
-type Size = keyof typeof size;
-
-interface Props {
-  modelValue?:boolean;
-  title?: string | null;
-  subtitle?: string | null;
-  icon?: string | null;
-  persistent?:boolean;
-  size?:Size;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  modelValue:false,
-  title: null,
-  subtitle: null,
-  icon: null,
-  persistent:false,
-  size:"default"
-})
-
-const emit = defineEmits<{
-  (e:"update:modelValue", modelValue:boolean):void
-}>()
-
-
-const closeModal = ():void => {
-    if(!props.persistent){
-      emit('update:modelValue', false)
-    }
-}
-
-const sizeModal = computed(()=>{
-   return size[props.size];
-})
-
-const {title, subtitle, icon} = toRefs(props)
-
-
-
-///const slots = useSlots()  // import useSlots
-//console.log(slots)
-
-</script>
-
-<template> 
-      <Teleport to="body">
-      <Transition name="modal">
-         <div v-if="modelValue" class="modal-mask" @click.self="closeModal">
-            <div :class="`modal-container ${sizeModal} max-h-screen overflow-auto`">
-              <div class="mx-auto">
-               <EpCard :title="title" :subtitle="subtitle" :icon="icon">
-
-                 <slot></slot>
-               </EpCard>
-              </div>
-            </div>
-         </div>
-      </Transition>
-   </Teleport>
-</template>
-
-<style>
-.modal-mask {
-  position: fixed;
-  z-index: 6998;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  transition: opacity 0.3s ease;
-}
-
-.modal-container {
-  margin: auto;
-  max-height: 95%;
-  transition: all 0.3s ease;
-  z-index: 7000;
-}
-
-.modal-header h3 {
-  margin-top: 0;
-  color: #42b983;
-}
-
-.modal-body {
-  margin: 20px 0;
-}
-
-.modal-default-button {
-  float: right;
-}
-
-.modal-enter-from {
-  opacity: 0;
-}
-
-.modal-leave-to {
-  opacity: 0;
-}
-
-.modal-enter-from .modal-container,
-.modal-leave-to .modal-container {
-  -webkit-transform: scale(1.1);
-  transform: scale(1.1);
-}
-</style>

package/src/components/interactions/EpQuestion.vue

@@ -1,188 +0,0 @@
-<script setup lang="ts">
-import { watch, ref, toRefs, computed, defineAsyncComponent} from "vue";
-import EpEdu from "../educationals/EpEdu.vue";
-//types with capital letter, object styles in lowercase
-import { type MediaVariants } from "../../types/Medias";
-import { type Answer } from "../../types/Answer";
-import { useRenderText } from "../../composables/useRenderText";
-import { useComponent } from "../../composables/useComponent"
-import { mdiHelpCircle } from "@mdi/js";
-import EpImg from "../basics/EpImg.vue";
-import EpRadio from "../forms/EpRadio.vue";
-import EpBtn from "../basics/EpBtn.vue";
-import EpAlert from "../signages/EpAlert.vue";
-
-
-
-interface Props {
-  title?: string;
-  intentions?: string;
-  labelIntentions?:string;
-  hideIcon?: boolean;
-  type?: MediaVariants;
-  question: string;
-  answers: Answer[];
-  shuffle?: boolean;
-  before?: boolean;
-  numeration?: boolean;
-  src?: string | null;
-  labelNoAnswer?:string;  
-  labelAnswerBtn?:string; 
-  labelTryAgainBtn?:string; 
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  type: "neutral",
-  hideIcon: false,
-  shuffle: false,
-  before: false,
-  numeration: false,
-  labelNoAnswer:"Veuillez choisir une réponse",
-  labelAnswerBtn : "Valider",
-  labelTryAgainBtn: "Réessayer"
-
-});
-
-const renderText = computed(() => {
-  if (!props.intentions) {
-    return null;
-  }
-  return useRenderText(props.intentions);
-});
-
-//shuffle and list
-const shuffleAnswers = computed(() => {
-  const array = props.answers;
-  if (props.shuffle) {
-    for (let i = array.length - 1; i > 0; i--) {
-      const j = Math.floor(Math.random() * (i + 1));
-      const temp = array[i];
-      array[i] = array[j];
-      array[j] = temp;
-    }
-  }
-  return array;
-});
-
-const alphabet = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"];
-const typeList = (index:number) => {
-  if (props.numeration) {
-    return alphabet[index];
-  }
-  return index + 1;
-};
-
-///user answer
-const userAnswer = ref("");
-const answered = ref(false);
-const valid = ref(true);
-const response = ref<Answer>({type:'warning', text:'no found', component:null, feedback:""})
-const checkAnswer = () => {
-  if (userAnswer.value === "") {
-    valid.value = false;
-    return;
-  }
-  const valuesAnswer = props.answers.find(x => x.uid === userAnswer.value)
-  if(!valuesAnswer){
-    return
-  }
-  response.value = valuesAnswer!
-  answered.value = true;
-};
-
-const reset = () => {
-  answered.value = false;
-  userAnswer.value = ""
-};
-
-watch(userAnswer, (val) => {
-  if (val !== "") {
-    valid.value = true;
-  }
-});
-
-//get Component asyncComponent
-const getCompontent = (name:string|undefined)=> {
-  const componentToLoad = useComponent(name)
-  //console.log(componentToLoad)
-  if(componentToLoad.name === "EpNothing"){
-    return defineAsyncComponent(()=>import('../signages/EpNothing.vue'))
-  }
-  return defineAsyncComponent(()=>import(`../${componentToLoad.path}/${componentToLoad.name}.vue`))
-}
-
-//returned values from props
-const { title, intentions, hideIcon, question, src } = toRefs(props);
-
-</script>
-
-<template>
-  <EpEdu
-    :title="title"
-    :type="type"
-    :hideIcon="hideIcon"
-    :icon="mdiHelpCircle"
-    :label-intentions="labelIntentions"
-  >
-    <template #intentions v-if="renderText">
-      <div v-html="renderText"></div>
-    </template>
-    <template #content>
-      <div class="mt-5">
-        <EpImg
-          v-if="src && before"
-          :src="src"
-          :alt="`Image soutien à la question`"
-          cols="5"
-        />
-        <div v-html="useRenderText(question)" class="my-6"></div>
-        <EpImg
-          v-if="src && !before"
-          :src="src"
-          :alt="`Image soutien à la question`"
-          cols="5"
-        />
-
-        <div class="mb-6">
-          <ol class="no-list">
-            <li v-for="(answer, i) in shuffleAnswers" :key="answer.uid">
-              <EpRadio
-                :label="`${typeList(i)}. ${answer.text}`"
-                v-model="userAnswer"
-                :value="answer.uid"
-                :disabled="answered"
-                type="primary"
-              ></EpRadio>
-            </li>
-          </ol>
-          <EpAlert type="error" outlined noIcon v-if="!valid">
-            {{labelNoAnswer}}
-          </EpAlert>
-        </div>
-        
-         <div v-if="answered" class="mb-2">
-            <EpAlert :type="response.type" outlined>
-               <div v-html="useRenderText(response.feedback)"></div>
-            </EpAlert>
-            
-            <div v-if="response.component" class="my-2">
-              <component :is="getCompontent(response.component.type)" v-bind="{ ...response.component.data }"></component>
-            </div>
-         </div>
-
-        <EpBtn
-          type="primary"
-          @click="checkAnswer"
-          :disabled="answered"
-          outlined
-          extraClass="mr-2"
-          >{{labelAnswerBtn}}</EpBtn
-        >
-        <EpBtn type="primary" v-if="answered" @click="reset" outlined>{{labelTryAgainBtn}}</EpBtn>
-      </div>
-    </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/interactions/EpSummativeTable.vue

@@ -1,59 +0,0 @@
-<script setup lang="ts">
-import {ref, computed, toRefs} from 'vue'
-import EpDivider from '../basics/EpDivider.vue';
-import EpRadioSummative from '../forms/EpRadioSummative.vue';
-import type { QuestionSummative } from '../../types/SummativeTable';
-const totalValue = ref<number[]>([])
-
-interface Props {
-    title?:string;
-    questions:QuestionSummative[];
-    totalLabel?:string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    totalLabel:"Total :"
-})
-
-const {title, questions} = toRefs(props)
-
-const resultSummative = computed(()=> {
-    return totalValue.value.reduce((total, currentvalue) => total + currentvalue, 0)
-})
-
-
-//cette function sera efface, en creant le nouveau editeur
-const transformNumber = (value:string|number) => {
-    const num = Number(value);
-    if (isNaN(num)) {
-        return 0;
-    } else {
-        return num;
-    }
-}
-
-</script>
-
-<template>
-    <div class="mt-4 bg-base-light p-4 dark:bg-dark dark:border-y-2">
-        <h4 v-if="title" class="text-xl font-semibold mb-6">{{ title }}</h4>
-        <template v-for="(question,i) in questions" :key="`item-question-${i}`">
-            <p class="text-black dark:text-base-light py-2 rounded">{{question.label}}</p>
-            <div class="flex flex-row flex-wrap gap-y-2 sm:gap-x-4">
-                <template v-for="(_option, j) in question.options" :key="`option-question-${j}`">
-                    <EpRadioSummative 
-                    :id="`option-${i}-${j}-${_option.uid}`"
-                    :name="`option-${i}-${j}-${_option.uid}`"
-                    :label="_option.label" 
-                    :value="transformNumber(_option.value)" 
-                    v-model="totalValue[i]">
-                    </EpRadioSummative>
-                </template>
-            </div>
-            <EpDivider />
-        </template>
-        <div class="text-right pr-16">
-           <span class="text-sm font-semibold uppercase">{{ totalLabel }} {{ resultSummative }}</span>
-        </div>
-    </div>
-</template>

package/src/components/interactions/EpSvgShow.vue

@@ -1,108 +0,0 @@
-<script setup lang="ts">
-import { onMounted, ref, computed, nextTick } from 'vue';
-import { useRenderText } from '../../composables/useRenderText';
-
-interface Props {
-  svg: string,
-  animation?: "" | "translateX" | "scale",
-  multiple?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  animation: "",
-  multiple: false
-});
-
-const svg = ref<string>("");
-
-// Refs
-const svgContainer = ref<HTMLElement | null>(null);
-
-const animationType = computed(() => {
-  switch (props.animation) {
-    case "translateX":
-      return "animate-slide";
-    case "scale":
-      return "animate-zoom";
-    default:
-      return "animate-fade";
-  }
-});
-
-const showScene = (scene: string) => {
-  if (!svgContainer.value) return;
-
-  const currentScene = svgContainer.value.querySelector(`[data-scene="${scene}"]`);
-  if (!currentScene) return;
-
-  const isVisible = !currentScene.classList.contains('hidden');
-
-  if (isVisible) {
-    // Toggle OFF (hide the scene)
-    currentScene.classList.add('hidden');
-    currentScene.classList.remove(animationType.value);
-
-    const sceneElements = svgContainer.value.getElementsByClassName(`scene-${scene}`);
-    Array.from(sceneElements).forEach((s) => {
-      s.classList.add('hidden');
-      s.classList.remove(animationType.value);
-    });
-  } else {
-    // Toggle ON (show scene)
-    if (!props.multiple) hideScenes();
-
-    currentScene.classList.remove('hidden');
-    currentScene.classList.add(animationType.value);
-
-    const sceneElements = svgContainer.value.getElementsByClassName(`scene-${scene}`);
-    Array.from(sceneElements).forEach((s) => {
-      s.classList.remove('hidden');
-      s.classList.add(animationType.value);
-    });
-  }
-};
-
-
-const hideScenes = () => {
-if (!svgContainer.value) return;
-const scenes = svgContainer.value.querySelectorAll('[data-scene]');
-  Array.from(scenes).forEach((s) => {
-    if (!s.classList.contains('hidden')) {
-      s.classList.add('hidden');
-      s.classList.remove(animationType.value);
-    }
-  });
-}
-
-onMounted(async () => {
-  svg.value = useRenderText(props.svg);
-
-  await nextTick();
-
-  if (!svgContainer.value) return;
-
-  // Hide all scenes initially
-  hideScenes()
-
-  // Bind click events to buttons
-  const btns = svgContainer.value.querySelectorAll('[data-btn]');
-  Array.from(btns).forEach((b) => {
-    b.classList.add('cursor-pointer')
-    b.addEventListener('click', () => {
-      const sceneName = b.getAttribute("data-btn")
-      showScene(sceneName ?? "");
-    });
-  });
-});
-
-
-
-</script>
-
-
-
-<template>
-    <!-- The buttons must have class "btn" and an unique id="<scene-name>"
-    The scenes elements must have class "scene" and "scene-<scene-name>" -->
-    <div ref="svgContainer" v-html="svg"></div>
-</template>

package/src/components/interactions/EpTabs.vue

@@ -1,10 +0,0 @@
-<script setup lang="ts">
-   
-
-</script>
-
-<template>
-   <div class="p-12 bg-warning-light w-[50%] mx-auto border-2 border-warning dark:bg-warning">
-        <p class="text-center text-error font-bold uppercase">In progress</p>
-   </div>
-</template>

package/src/components/interactions/EpTooltip.vue

@@ -1,164 +0,0 @@
-
-<script setup lang="ts">
-
-    import { computed } from "vue";
-    import { type TypeTooltip, typeTooltip } from   "../../types/Tooltip";  //"../../types/Tooltip";
-
-    type Place = "top_start"|"top"|"top_end"|"bottom_start"|"bottom"|"bottom_end"|"left_start"|"left"|"left_end"|"right_start" | "right"|"right_end";
-    type Mode = "light"|"dark";
-    
-
-    interface Props {  
-        text:string;
-        styles?:Mode;
-        placement?:Place
-        type: TypeTooltip;
-        arrow:string
-    }
-
-    // define parameter and default valule
-    const props = withDefaults(defineProps<Props>(), {
-        styles:'light',
-        placement:'top',
-        arrow:'none',  
-    }) 
-    //const { arrowstyle } =toRefs<TypeTooltip>(props)
-   
-
-    const finalType = computed(()=>{ 
-        return props.placement
-        })
-
-    const arrowStyle = computed(()=>{
-        if(props.arrow =="arrow"){        
-            if(props.styles =='dark'){
-                return  'arrowdark' 
-            }
-            else {
-                return 'arrow'
-            }
-        }   
-        else{
-            if(props.styles =='light'){
-                return  'default' 
-            }
-            else {
-                return 'dark'
-            }
-        }  
-        })
-   
-    const finalStyles = computed(()=>{
-        return `${typeTooltip[finalType.value]?.[arrowStyle.value]}`
-   
-    })
-    
-
-</script>
-<template>  
-    <div class="group relative w-max "> 
-        <slot></slot>  
-        <span  :class="`pointer-events-none absolute  w-max rounded  px-2 py-1 text-sm font-medium  opacity-0 shadow transition-opacity group-hover:opacity-100  ${ finalStyles} `"  >{{ text }}</span> 
-    </div>
-</template>
-
-<style >   
-    .arrow-light-top::before {
-        content: " ";
-        position: absolute;
-        top: 100%; /* At the bottom of the tooltip */
-        left: 50%;
-        margin-left: -5px;
-        border-width: 5px;
-        border-style: solid;
-        border-color: rgba(0, 0, 0, 0.2) transparent transparent transparent ;
-    }
-    .arrow-dark-top::before {
-        content: " ";
-        position: absolute;
-        top: 100%; /* At the bottom of the tooltip */
-        left: 50%;
-        margin-left: -5px;
-        border-width: 5px;
-        border-style: solid;
-        border-color: black transparent transparent transparent ;
-    }
-    .arrow-light-bottom::before {
-        content: '';
-        position: absolute;
-        display: inline-block;
-        left: 50%;
-        bottom: 100%;
-        border-right: 7px solid transparent;
-        border-bottom: 7px solid #eee;
-        border-left: 7px solid transparent;
-        border-bottom-color: rgba(0, 0, 0, 0.2);
-  
-    }
-    .arrow-dark-bottom::before {
-        content: '';
-        position: absolute;
-        display: inline-block;
-        left: 50%;
-        bottom: 100%;
-        border-right: 7px solid transparent;
-        border-bottom: 7px solid black;
-        border-left: 7px solid transparent;
-        border-bottom-color:black transparent transparent transparent ;
-    }
-
-    .arrow-light-left::before { 
-        position: absolute;
-        display: inline-block;
-        left:100%; 
-        top: 50%; 
-        content: '';
-        margin-right: 0px;
-        border-top: 5px solid transparent;
-        border-left: 5px solid #eee;
-        border-bottom: 5px solid transparent;
-        border-left-color: rgba(0, 0, 0, 0.2);
-    }
- 
-    .arrow-dark-left::before {
-        position: absolute;
-        display: inline-block;
-        left:100%; 
-        top: 50%; 
-        content: '';
-        margin-right: 0px;
-        border-top: 5px solid transparent;
-        border-left: 5px solid black;
-        border-bottom: 5px solid transparent;
-        border-left-color: black transparent transparent transparent ;
-    
-
-    }
-
-    .arrow-light-right::before {
-        position: absolute;
-        display: inline-block;
-        right:100%; 
-        top: 50%; 
-        content: '';
-        margin-right: 0px;
-        border-top: 5px solid transparent;
-        border-right: 5px solid #eee;
-        border-bottom: 5px solid transparent;
-        border-right-color: rgba(0, 0, 0, 0.2);
-    }
- 
-    .arrow-dark-right::before {
-        position: absolute;
-        display: inline-block;
-        right:100%; 
-        top: 50%; 
-        content: '';
-        margin-right: 0px;
-        border-top: 5px solid transparent;
-        border-right: 5px solid black;
-        border-bottom: 5px solid transparent;
-        border-right-color:black transparent transparent transparent ;
-        
-    }
-</style>