ep-lib-ts 0.1.8 → 0.1.9

package/dist/types/Answer.d.ts

@@ -0,0 +1,15 @@
+import { TypeAlert } from './Alert';
+interface ContentComponent {
+    type?: string;
+    data: {
+        [key: string]: any;
+    };
+}
+export interface Answer {
+    text: string;
+    feedback: string;
+    type: TypeAlert;
+    uid?: string;
+    component?: ContentComponent | null;
+}
+export {};

package/dist/types/MandateLevel.d.ts

@@ -0,0 +1,5 @@
+export interface MandateLevel {
+    color: string;
+    title: string;
+    value: string;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ep-lib-ts",
   "private": false,
-  "version": "0.1.8",
+  "version": "0.1.9",
   "files": [
     "dist",
     "src/components/"
@@ -34,7 +34,8 @@
     "postcss-cli": "^10.1.0",
     "vee-validate": "^4.8.6",
     "vue-router": "^4.1.6",
-    "vue3-apexcharts": "^1.4.4"
+    "vue3-apexcharts": "^1.4.4",
+    "vue": "^3.2.45"
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.3",

package/src/components/basics/EpCard.vue

@@ -48,7 +48,7 @@ const borderColor = computed(() => {
 
 const bgColor = computed(() => {
     if(props.color && !props.outlined){
-        return `${useColors('bg', props.color)} text-white`
+        return `${useColors('bg', props.color)}`
     }
     return `bg-white text-black`
 })

package/src/components/basics/EpImg.vue

@@ -1,59 +1,89 @@
 <script setup lang="ts">
- import {toRefs, ref} from 'vue'
- import EpModal from '../interactions/EpModal.vue'
- import EpIcon from '../basics/EpIcon.vue'
- import { mdiArrowExpandAll } from '@mdi/js';
-
-interface Props{
-    src:string;
-    alt?:string;
-    height?:string | number;
-    width?:string | number;
-    thumbnail?:boolean;
-    caption?:string;
-    bib?:string;
-    title?:string,
-    gallery?:boolean
-    cols?:string|number  //posible type à venir => basis-1/12... basis-11/12 to basis-full
+import { toRefs, ref, computed } from 'vue'
+import EpModal from '../interactions/EpModal.vue'
+import EpIcon from '../basics/EpIcon.vue'
+import { mdiArrowExpandAll } from '@mdi/js';
+import { useRenderText } from "../../composables/useRenderText";
+const Cols = [
+   'basis-6/12',
+   'basis-1/12',
+   'basis-2/12',
+   'basis-3/12',
+   'basis-4/12',
+   'basis-5/12',
+   'basis-6/12',
+   'basis-7/12',
+   'basis-8/12',
+   'basis-9/12',
+   'basis-10/12',
+   'basis-11/12',
+   'basis-12/12',
+]
+
+interface Props {
+   src: string;
+   alt?: string;
+   height?: string | number;
+   width?: string | number;
+   thumbnail?: boolean;
+   caption?: string;
+   bib?: string;
+   title?: string,
+   gallery?: boolean
+   cols?: string | number  //posible type à venir => basis-1/12... basis-11/12 to basis-full
 }
 
-const props = withDefaults(defineProps<Props>(),{
-    alt:"Image snfas",
-    cols:"basis-4/12",
-    thumbnail:false,
+const props = withDefaults(defineProps<Props>(), {
+   alt: "Image snfas",
+   cols: "basis-6/12",
+   thumbnail: false,
+})
+
+const renderCols = computed(() => {
+   return Cols[+props.cols]
+})
+
+const renderBib = computed(()=>{
+   if(props.bib){
+      return useRenderText(props.bib)
+   }
+   return ""
 })
 
 const showModal = ref<boolean>(false)
 
-const {src, alt, title, caption, thumbnail, bib, cols} = toRefs(props)
+const { src, alt, title, caption, thumbnail, bib } = toRefs(props)
 
 </script>
 
 <template>
    <div v-if="!thumbnail" class="flex">
-    <div :class="`mx-auto bg-white rounded-md overflow-hidden shadow-md ${cols}`">
-       <img class="object-cover object-center w-full" :src="src" :alt="alt" @click="showModal = true">
-         <div class="px-4 py-2">
-            <h2 class="text-2xl font-bold">{{title}}</h2>
-            <p class="text-gray-500 text-sm">{{caption}}</p>
-            <p class="text-gray-700 mt-4">{{bib}}</p>
+      <div :class="`mx-auto bg-white rounded-md overflow-hidden shadow-md ${renderCols}`">
+         <img class="object-cover object-center w-full" :src="src" :alt="alt" @click="showModal = true">
+         <div class="px-4 py-2" v-if="title || caption || bib">
+            <h2 class="text-2xl font-bold">{{ title }}</h2>
+            <p class="text-gray-500 text-sm mt-4">{{ caption }}</p>
+            <div class="text-gray-700 mt-4" v-html="renderBib"></div>
+         </div>
+      </div>
+   </div>
+   <div v-if="thumbnail" class="relative group inline-block m-2">
+      <img class="w-36 h-36 object-cover object-center group-hover:opacity-30 " :src="src" :alt="alt">
+      <div
+         class="absolute top-0 left-0 w-36 h-36 bg-black opacity-0 transition-opacity duration-300 group-hover:opacity-30 cursor-pointer"
+         @click="showModal = true">
+         <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white text-center">
+            <EpIcon :icon-path="mdiArrowExpandAll"></EpIcon>
          </div>
-    </div>
-   </div> 
-    <div v-if="thumbnail" class="relative group inline-block m-2">
-      <img class="w-36 h-36 object-cover object-center group-hover:opacity-50 " :src="src" :alt="alt" >
-      <div class="absolute top-0 left-0 w-36 h-36 bg-black opacity-0 transition-opacity duration-300 group-hover:opacity-50 cursor-pointer" @click="showModal = true">
-        <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white text-center">
-           <EpIcon :icon-path="mdiArrowExpandAll"></EpIcon>
-        </div>
       </div>
-  </div>
+   </div>
    <EpModal v-model="showModal">
       <img class="object-cover object-center h-5/6 w-5/6 mx-auto" :src="src" :alt="alt">
-       <div class="px-4 py-2">
-         <h2 class="text-2xl font-bold">{{title}}</h2>
-         <p class="text-gray-500 text-sm">{{caption}}</p>
-      </div>
+       <div class="px-4 py-2" v-if="thumbnail">
+         <h2 class="text-2xl font-bold">{{ title }}</h2>
+         <p class="text-gray-500 text-sm mt-4">{{ caption }}</p>
+         <div class="text-gray-700 mt-4" v-html="renderBib"></div>
+      </div> 
    </EpModal>
 </template>
 

package/src/components/basics/EpText.vue

@@ -1,16 +1,27 @@
 <script setup lang="ts">
-import { computed, defineComponent } from 'vue';
+import { computed, defineComponent, toRefs } from 'vue';
 import { isHtml } from '../../composables/isHtml';
 import {useMarkdown} from '../../composables/useMarkdown'
 import EpTerm from '../medias/EpTerm.vue'
+import EpAccordeon from '../interactions/EpAccordeon.vue';
+
 interface Props {
    glossary?:any[];
    content:string;
-   title?:string;
+   title?:string|null;
    compact?:boolean;
 }
 
-const props = withDefaults(defineProps<Props>(),{})
+const props = withDefaults(defineProps<Props>(),{
+  compact:false
+})
+
+const renderTitle = computed(()=>{
+  if(!props.title){
+    return "En savoir plus"
+  }
+  return props.title
+})
 
 const renderText = computed(()=>{
      if(!isHtml(props.content)){
@@ -75,11 +86,14 @@ const customRenderStringComponents = defineComponent({
      template:renderText.value
 })
 
-//const {content} = toRefs(props)
+const {compact} = toRefs(props)
 
 </script>
 
 <template>
-  <component :is="customRenderStringComponents"></component>
+  <component v-if="!compact" :is="customRenderStringComponents"></component>
+  <EpAccordeon outlined :title="renderTitle" v-else>
+    <component :is="customRenderStringComponents"></component>
+  </EpAccordeon>
    <!-- <component v-else :is="renderText"></component> -->
 </template>

package/src/components/educationals/EpEdu.vue

@@ -2,6 +2,7 @@
 import { toRefs, computed, useSlots } from "vue";
 //types with capital letter, object styles in lowercase
 import { MediaVariants, mediaVariants } from "../../types/Medias";
+import { MandateLevel } from "../../types/MandateLevel";
 import EpIcon from "../basics/EpIcon.vue";
 import EpDivider from "../basics/EpDivider.vue";
 import EpChip from "../basics/EpChip.vue";
@@ -13,7 +14,7 @@ interface Props {
   title?: string | null;
   subtitle?: string | null;
   icon?: string;
-  mandateLevel?:string|null;
+  mandateLevel?:string | MandateLevel | null;
   synchrone?: boolean;
   type?: MediaVariants;
   intentions?: string;
@@ -56,11 +57,18 @@ const bottomBarStyle = computed(() => {
 
 const containerStyle = computed(()=>{
   if(hasActions.value || hasIntentions.value || props.title){
-    return `rounded-lg overflow-hidden ${props.flat?'':'shadow-md'} flex flex-col justify-between`
+    return `rounded-lg overflow-hidden ${props.flat?'':'shadow-md'} flex flex-col justify-between h-full`
   }
   return `flex flex-col justify-between`
 })
 
+const renderMandateLevel = computed(()=>{
+  if(typeof props.mandateLevel === "object"){
+     return props.mandateLevel?.title
+  }
+  return props.mandateLevel
+})
+
 // type, taxonomyLevel, courseCode, courseTitle, title, subtitle, height, src, color, synchrone
 
 const { title, hideIcon } = toRefs(props);
@@ -71,7 +79,7 @@ const { title, hideIcon } = toRefs(props);
     <div :class="`${topBarStyle}`" v-if="title || mandateLevel">
       <!-- <EpIcon :size="24" :icon-path="mdiBookOpenVariant"></EpIcon> -->
       <h3><EpIcon v-if="!hideIcon" :iconPath="renderIcon" size="24"></EpIcon> <span class="font-bold align-middle">{{ title }}</span></h3>
-      <EpScope v-if="mandateLevel" :title="mandateLevel"></EpScope>
+      <EpScope v-if="mandateLevel" :title="renderMandateLevel"></EpScope>
     </div>
     <div class="px-5">
       <div class="py-2" v-if="hasIntentions">

package/src/components/educationals/EpReading.vue

@@ -5,6 +5,7 @@ import EpBtn from "../basics/EpBtn.vue";
 import DisplayBox from "../tools/DisplayBox.vue";
 import EpEdu from "./EpEdu.vue";
 import { MediaVariants } from "../../types/Medias";
+import { MandateLevel } from '../../types/MandateLevel';
 import { useRenderText } from "../../composables/useRenderText";
 import { mdiBookmarkBox } from "@mdi/js";
 import { mdiBookOpenVariant } from "@mdi/js";
@@ -19,8 +20,8 @@ interface Props {
   title: string | null;
   container?: string; /// is publication complete
   editor?: string;
-  pages?: string;
-  mandateLevel?: string;
+  pages?: string|string[];
+  mandateLevel?: string | MandateLevel | null;
   intentions?: string;
   compact?: boolean;
   more?: boolean;
@@ -50,9 +51,10 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const old_image = "https://live.staticflickr.com/4868/45940268562_c5f7fdd06b_q.jpg";
+const bad_image = "https://farm5.staticflickr.com/4868/45940268562_9452f09a61_o.png"
 
 const hasCover = computed(() => {
-  if (props.cover === old_image || props.cover.trim().length === 0) {
+  if (props.cover === old_image || props.cover.trim().length === 0 || props.cover === bad_image) {
     return false;
   }
   return true;
@@ -77,7 +79,8 @@ const {
   editor,
   pages,
   type,
-  mandateLevel
+  mandateLevel,
+  url
 } = toRefs(props);
 </script>
 
@@ -86,7 +89,7 @@ const {
     <template v-if="!hideCover">
       <div
         v-if="hasCover"
-        class="bg-primary h-96 w-full rounded-t-lg md:h-auto md:w-56 md:rounded-none md:rounded-l-lg flex justify-center items-center text-gray-300"
+        class="h-96 w-full rounded-t-lg md:h-auto md:w-56 md:rounded-none md:rounded-l-lg flex justify-center items-center text-gray-300"
       >
         <img :src="cover" :alt="`image de la lecture ${title}`" />
       </div>
@@ -133,7 +136,7 @@ const {
           </div>
         </template>
         <template #actions>
-          <EpBtn :color="type=='base'?'text-gray-700':'text-white'" :type="type">LIRE</EpBtn>
+          <EpBtn :color="type=='base'?'text-gray-700':'text-white'" :type="type" :href="url" v-if="url">LIRE</EpBtn>
         </template>
       </EpEdu>
     </div>
@@ -223,7 +226,7 @@ const {
           </div>
 
           <div class="border-l p-5">
-            <EpBtn text>
+            <EpBtn text :href="url" v-if="url">
               <EpIcon :size="20" :icon-path="mdiOpenInNew"></EpIcon> Lire
             </EpBtn>
           </div>

package/src/components/educationals/EpResource.vue

@@ -1,8 +1,71 @@
 <script setup lang="ts">
+import { defineAsyncComponent, computed, toRefs } from 'vue';
+import { MandateLevel } from '../../types/MandateLevel';
+import { useComponent } from '../../composables/useComponent';
+import { MediaVariants } from "../../types/Medias";
+interface Props {
+   pages?:string;
+   resource:any;
+   mandateLevel?: string | MandateLevel | null;
+   type?:MediaVariants
+}
+
+const props = withDefaults(defineProps<Props>(), {
+   type:'base'
+})
+
+const resourceInfo = computed(()=>{
+   if(!props.resource.hasOwnProperty('content')){
+      return "EpNothing"
+   }
+   //console.log(props.resource)
+   const typeRess = Object.keys(props.resource.content)[0]
+   const ress = Object.assign({}, props.resource.content[typeRess])
+   ress.pages = props.pages
+   ress.type = typeRess
+   if(typeRess === "clip"){
+      ress.src = ress.url
+   }
+   if(typeRess === "website"){
+      ress.href = ress.url
+      ress.label = ress.title
+      ress.title = null
+   }
+   if(typeRess === "book" && props.pages){
+      ress.intentions = props.pages
+      ress.pages = null
+   }
+   if(ress.version_link){
+      ress.url = ress.version_link.url
+   }
+   
+   return ress
+})
+
+
+//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'))
+  }
+  if(componentToLoad.name === "EpReading"){
+   return defineAsyncComponent(()=>import(`./EpReading.vue`))
+  }
+  return defineAsyncComponent(()=>import(`../${componentToLoad.path}/${componentToLoad.name}.vue`))
+}
+
+const {mandateLevel, type, pages} = 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>
+    <component 
+       :is="getCompontent(resourceInfo.type)" 
+       v-bind="{ ...resourceInfo }"
+       :mandateLevel="mandateLevel"
+       :intentions="pages"
+       :type="type"
+       ></component> 
 </template>

package/src/components/educationals/EpScope.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
-import { toRefs } from "vue";
+import { ref, toRefs, computed } from "vue";
 //types with capital letter, object styles in lowercase
 import EpChip from "../basics/EpChip.vue";
+import { ChipBgVariant } from "../../types/Chip";
 
 interface Props {
   title?: string;
+  type?:string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -12,7 +14,17 @@ const props = withDefaults(defineProps<Props>(), {
   type: "base",
 });
 
+let renderMandate = ref<ChipBgVariant>('base')
 
+const typeMandate = computed(()=>{
+  if(props.title.trim() === "Essentiel"){
+    return renderMandate.value = 'warning'
+  }
+  if(props.title.trim() === "Enrichissement"){
+    return renderMandate.value = 'info'
+  }
+  return renderMandate.value
+})
 
 //controls
 //const controls = useMediaControls(video, {src:props.src})
@@ -21,5 +33,5 @@ const { title } = toRefs(props);
 </script>
 
 <template>
-    <EpChip size="small" type="base">{{ title }}</EpChip>
+    <EpChip size="small" :type="typeMandate">{{ title.trim() }}</EpChip>
 </template>

package/src/components/forms/EpRadio.vue

@@ -54,6 +54,7 @@ const onChange = (event:Event) => {
   <span>
   
     <input
+      class="cursor-pointer"
       type="radio"
       :id="labelFor"
       :name="labelFor"
@@ -64,7 +65,7 @@ const onChange = (event:Event) => {
       :checked="isChecked"
       @change="onChange"
     />
-    <label :for="labelFor" class="disabled:opacity-40">{{
+    <label :for="labelFor" class="disabled:opacity-40 cursor-pointer">{{
       label
     }}</label>
     

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>