ep-lib-ts 0.1.8 → 0.1.10

package/src/components/interactions/EpQuestion.vue

@@ -1,8 +1,180 @@
 <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 { MediaVariants } from "../../types/Medias";
+import { 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;
+  hideIcon?: boolean;
+  type?: MediaVariants;
+  mandateLevel?: string | null;
+  question: string;
+  answers: Answer[];
+  shuffle?: boolean;
+  before?: boolean;
+  numeration?: boolean;
+  src?: string | null;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: "base",
+  hideIcon: false,
+  shuffle: true,
+  before: false,
+  numeration: false,
+});
+
+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>
-   <div class="p-12 bg-warning-light w-[50%] mx-auto border-2 border-warning">
-        <p class="text-center text-error font-bold uppercase">In progress</p>
-   </div>
-</template>
+  <EpEdu
+    :title="title"
+    :type="type"
+    :hideIcon="hideIcon"
+    :icon="mdiHelpCircle"
+    :mandateLevel="mandateLevel"
+  >
+    <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>
+            <li v-for="(answer, i) in answers" class="mb-2" :key="answer.uid">
+              <EpRadio
+                :label="`${typeList(i)}. ${answer.text}`"
+                v-model="userAnswer"
+                :value="answer.uid"
+                :disabled="answered"
+              ></EpRadio>
+            </li>
+          </ol>
+          <EpAlert type="error" outlined noIcon v-if="!valid">
+            Veuillez choisir une réponse
+          </EpAlert>
+        </div>
+        
+         <div v-if="answered">
+            <EpAlert :type="response.type" outlined>
+               <div v-html="useRenderText(response.feedback)"></div>
+            </EpAlert>
+            
+            <div v-if="response.component">
+              <component :is="getCompontent(response.component.type)" v-bind="{ ...response.component.data }"></component>
+            </div>
+         </div>
+
+        <EpBtn
+          :type="type"
+          @click="checkAnswer"
+          :disabled="answered"
+          outlined
+          extraClass="mr-2"
+          >Valider</EpBtn
+        >
+        <EpBtn :type="type" v-if="answered" @click="reset" outlined>Réessayer</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/medias/EpAudio.vue

@@ -3,6 +3,7 @@
 import { computed, toRefs } from 'vue'
 //types with capital letter, object styles in lowercase
 import { MediaVariants } from "../../types/Medias";
+import { MandateLevel } from '../../types/MandateLevel';
 import { isHtml } from '../../composables/isHtml';
 import { useMarkdown } from '../../composables/useMarkdown'
 import { mdiHeadphones } from "@mdi/js";
@@ -17,12 +18,11 @@ interface Props {
    title?: string;
    intentions?: string;
    credits?: string;
-   madateLevel?: string;
    labelIntentions?: string;
    type?: MediaVariants;
    messageError?: string
    hideIcon?: boolean;
-   mandateLevel?:string | null;
+   mandateLevel?:string | MandateLevel | null;
 }
 
 const props = withDefaults(defineProps<Props>(), {

package/src/components/medias/EpCarousel.vue

@@ -9,7 +9,7 @@ import { MediaCarousel } from "../../types/MediaCarousel";
 
 
 interface Props {
-  images: MediaCarousel[]; 
+  carrouselImg: MediaCarousel[]; 
   labelRef?:string|null;
   labelClose?:string|null
 }
@@ -24,17 +24,17 @@ const dialog = ref<boolean>(false);
 
 const prevSlide = () => {
   const isFirstSlide = currentIndex.value === 0;
-  const newIndex = isFirstSlide ? props.images.length - 1 : currentIndex.value - 1;
+  const newIndex = isFirstSlide ? props.carrouselImg.length - 1 : currentIndex.value - 1;
   currentIndex.value = newIndex;
 };
 
 const nextSlide = () => {
-  const isTheLastSlide = currentIndex.value === props.images.length - 1;
+  const isTheLastSlide = currentIndex.value === props.carrouselImg.length - 1;
   const newIndex = isTheLastSlide ? 0 : currentIndex.value + 1;
   currentIndex.value = newIndex;
 };
 
-const { images, labelClose, labelRef } = toRefs(props);
+const { carrouselImg, labelClose, labelRef } = toRefs(props);
 </script>
 
 <template>
@@ -42,7 +42,7 @@ const { images, labelClose, labelRef } = toRefs(props);
     <button @click="prevSlide">
       <EpIcon :icon-path="mdiChevronLeftCircleOutline"></EpIcon>
     </button>
-    {{ currentIndex + 1 }}/{{ images.length }}
+    {{ currentIndex + 1 }}/{{ carrouselImg.length }}
     <button @click="nextSlide">
       <EpIcon :icon-path="mdiChevronRightCircleOutline"></EpIcon>
     </button>
@@ -51,18 +51,18 @@ const { images, labelClose, labelRef } = toRefs(props);
     <div class="max-w-[800px] h-[550px] m-auto relative">
       <div
         class="w-full h-full bg-center bg-cover duration-500"
-        :style="`background-image:url('${images[currentIndex].src}')`"
+        :style="`background-image:url('${carrouselImg[currentIndex].src}')`"
       ></div>
     </div>
-    <div v-if="images[currentIndex]?.caption" class="mt-2 text-sm text-gray-800">
-      {{ images[currentIndex].caption }}
+    <div v-if="carrouselImg[currentIndex]?.caption" class="mt-2 text-sm text-gray-800">
+      {{ carrouselImg[currentIndex].caption }}
     </div>
-    <div v-if="images[currentIndex]?.bib" class="flex justify-end">
+    <div v-if="carrouselImg[currentIndex]?.bib" class="flex justify-end">
       <EpBtn  type="primary" @click="dialog = true" dark>{{ labelRef }}</EpBtn>
     </div>
   </div>
   <EpModal v-model="dialog" title="Référence">
-       <div v-html="images[currentIndex].bib"></div>
+       <div v-html="carrouselImg[currentIndex].bib"></div>
        <div class="flex justify-end">
          <EpBtn @click="dialog = false" type="primary" dark>{{ labelClose }}</EpBtn>
        </div>

package/src/components/medias/EpLink.vue

@@ -2,6 +2,7 @@
 import { computed, toRefs } from "vue";
 //types with capital letter, object styles in lowercase
 import { MediaVariants } from "../../types/Medias";
+import { MandateLevel } from '../../types/MandateLevel';
 import EpBtn from "../basics/EpBtn.vue";
 import { mdiLinkVariant } from "@mdi/js";
 import EpEdu from "../educationals/EpEdu.vue";
@@ -13,7 +14,7 @@ interface Props {
   href: string;
   label?: string;
   intentions?: string;
-  mandateLevel?: string;
+  mandateLevel?: string | MandateLevel | null;
   labelIntentions?: string;
   type?: MediaVariants;
   hideIcon?: boolean;

package/src/components/medias/EpSoftware.vue

@@ -5,6 +5,7 @@ import EpBtn from "../basics/EpBtn.vue";
 import EpChip from "../basics/EpChip.vue";
 import EpEdu from "../educationals/EpEdu.vue";
 import { MediaVariants } from "../../types/Medias";
+import { MandateLevel } from '../../types/MandateLevel';
 import { useRenderText } from "../../composables/useRenderText";
 
 import { mdiLaptop } from "@mdi/js";
@@ -14,7 +15,7 @@ interface Props {
   url?: string;
   cover?: string;
   title: string;
-  mandateLevel?: string;
+  mandateLevel?:string | MandateLevel | null;
   intentions?: string;
   version_link?: null;
   hideCover?: boolean;
@@ -22,7 +23,6 @@ interface Props {
   type?:MediaVariants;
   hideIcon?:boolean;
   labelCard?:string;
-  
 }
 
 // type, taxonomyLevel, courseCode, courseTitle, title, subtitle, height, src, color, synchrone
@@ -46,7 +46,7 @@ const hasCover = computed(() => {
 });
 
 
-const { title, intentions, cover, hideCover, version, labelCard, hideIcon, mandateLevel } = toRefs(props);
+const { title, intentions, cover, hideCover, version, labelCard, hideIcon, mandateLevel, url } = toRefs(props);
 </script>
 
 <template>
@@ -76,7 +76,7 @@ const { title, intentions, cover, hideCover, version, labelCard, hideIcon, manda
           <div class="w-full px-5">
             <div class="flex justify-between items-center rounded-t-md p-2">
               <h4>{{ title }} <EpChip size="small" type="base" v-if="version">{{version}}</EpChip></h4>
-              <EpBtn rounded type="base" :prependIcon="mdiOpenInNew"
+              <EpBtn v-if="url" rounded type="base" :prependIcon="mdiOpenInNew" :href="url"
                 >[Accéder au logiciel]</EpBtn
               >
             </div>

package/src/components/medias/EpVideo.vue

@@ -2,9 +2,11 @@
 import {ref, computed, toRefs} from 'vue'
 //types with capital letter, object styles in lowercase
 import { MediaVariants } from "../../types/Medias";
+import { MandateLevel } from '../../types/MandateLevel';
 import { isHtml } from '../../composables/isHtml';
 import {useMarkdown} from '../../composables/useMarkdown'
 import { mdiVideo } from "@mdi/js";
+
 //import { useMediaControls } from '@vueuse/core'
 import EpEdu from '../educationals/EpEdu.vue'
 
@@ -13,7 +15,7 @@ interface Props{
    title?:string;
    intentions?:string;
    credits?:string;
-   mandateLevel?:string | null;
+   mandateLevel?:string | MandateLevel | null;
    labelIntentions?:string;
    type?:MediaVariants;
    hideIcon?:boolean;
@@ -40,6 +42,9 @@ const vimeoUrl = computed(()=> {
    if(!isVideoFormat.value && url.includes("https://vimeo.com/")){
        return url.replace("https://vimeo.com/", "https://player.vimeo.com/video/")
    }
+   if(!isVideoFormat.value && url.includes('https://www.youtube.com/watch?')){
+      return url.replace("https://www.youtube.com/watch?v=","https://www.youtube.com/embed/")
+   }
    return url
 })
 
@@ -59,10 +64,9 @@ const {src, title, hideIcon, type} = toRefs(props)
 </script>
 
 <template>
-  
    <EpEdu :title="title" :type="type" :hideIcon="hideIcon" :icon="mdiVideo" :mandateLevel="mandateLevel">
      <template #intentions v-if="renderText">
-       <div v-html="renderText" ></div>
+       <div v-html="renderText"></div>
      </template>
      <template #content>
       <div class="max-w-screen-sm mx-auto">

package/src/components/medias/EpVideoPanopto.vue

@@ -2,6 +2,7 @@
 import { computed, toRefs} from 'vue'
 //types with capital letter, object styles in lowercase
 import { MediaVariants } from "../../types/Medias";
+import { MandateLevel } from '../../types/MandateLevel';
 import { isHtml } from '../../composables/isHtml';
 import {useMarkdown} from '../../composables/useMarkdown'
 import { mdiVideo } from "@mdi/js";
@@ -13,7 +14,7 @@ interface Props{
    title?:string;
    intentions?:string;
    credits?:string;
-   mandateLevel?:string | null;
+   mandateLevel?:string | MandateLevel | null;
    labelIntentions?:string;
    type?:MediaVariants;
    hideIcon?:boolean;

package/src/components/signages/EpAlert.vue

@@ -7,8 +7,15 @@ import EpAccordeon from "../interactions/EpAccordeon.vue";
 import { TypeAlert, typeAlert } from "../../types/Alert";
 import {useIcons} from '../../composables/useIcons'
 
+interface OldType {
+  icon: string;
+  name: string;
+  type: TypeAlert;
+  color: string;
+}
+
 interface Props {
-  type?:TypeAlert;
+  type?:TypeAlert|OldType;
   title?: string | null;
   outlined?:boolean;
   noIcon?:boolean;
@@ -29,12 +36,20 @@ const isOutlined = computed(()=>{
   return 'default'
 })
 
+// to change after change bd strapi v4
+const finalType = computed(()=>{
+  if(typeof props.type === 'object'){
+    return props.type.type
+  }
+  return props.type
+})
+
 const styles = computed(()=>{
-  return `${typeAlert[props.type]?.[isOutlined.value]}`
+  return `${typeAlert[finalType.value]?.[isOutlined.value]}`
 })
 
 const icon = computed(()=>{
-    let icon = useIcons[props.type].icon
+    let icon = useIcons[finalType.value].icon
     if(props.noIcon){
       return null
     }
@@ -59,7 +74,7 @@ const { title, compact, type, outlined } = toRefs(props);
      </div>
     </div>
   </div>
-  <EpAccordeon :type="type" :outlined="outlined" :icon="icon" :title="title" v-else>
+  <EpAccordeon :type="finalType" :outlined="outlined" :icon="icon" :title="title" v-else>
     <slot></slot>
   </EpAccordeon>
 </template>

package/src/components/signages/EpNothing.vue

@@ -0,0 +1,5 @@
+<template>
+    <div>
+        no data
+    </div>
+</template>

package/src/components/signages/EpQuote.vue

@@ -1,45 +1,49 @@
 <script setup lang="ts">
-import {toRefs} from 'vue'
+import {toRefs, computed} from 'vue'
 import EpCard from "../basics/EpCard.vue";
 import EpDivider from "../basics/EpDivider.vue";
-import EpIcon from "../basics/EpIcon.vue";
-import useColors from "../../composables/useColors";
-import { mdiFormatQuoteOpen  } from "@mdi/js";
-import { mdiFormatQuoteClose } from '@mdi/js';
+
 
 interface Props {
-    name?:string | null;
-    src?:string | null;
-    quotes?:boolean;
+    author?:string | null;
+    img?:string | null;
+    card?:boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-    name:null,
-    src:null,
-    quotes:false
+    author:null,
+    img:null,
+    card:false
 })
 
-const {name, src, quotes} = toRefs(props)
+const {author, img} = toRefs(props)
+
+const styleQuote = computed(()=> {
+    if(props.card) {
+      return `primary`
+    }
+    return ``
+})
 
 </script>
 
 <template>
-      <EpCard density="compact">
+      <EpCard density="compact" :color="styleQuote" outlined>
           <div
-            class="flex flex-wrap rounded-lg bg-white"
+            class="flex flex-wrap rounded-md bg-white"
           >
             <img
-              v-if="src"
-              class="h-96 w-full rounded-t-lg object-cover lg:h-auto lg:w-48 lg:rounded-none lg:rounded-l-lg"
-              :src="src"
+              v-if="img"
+              class="h-96 w-full rounded-t-md object-cover lg:h-auto lg:w-48 lg:rounded-none lg:rounded-l-md"
+              :src="img"
               alt="Image of quote"
             />
             <div class="p-6 flex-1">
               <slot></slot>
-              <template v-if="name">
+              <template v-if="author">
                 <EpDivider size="border"></EpDivider>
                 <p class="text-xs italic text-neutral-500">
-                  {{ name }}
+                  {{ author }}
                 </p>
               </template>
             </div>