ep-lib-ts 1.0.56 → 1.0.58

package/src/components/educationals/EpEdu.vue

@@ -1,126 +0,0 @@
-<script setup lang="ts">
-import { toRefs, computed, useSlots, SetupContext } from "vue";
-//types with capital letter, object styles in lowercase
-import { type MediaVariants, mediaVariants } from "../../types/Medias";
-import { type MandateLevel } from "../../types/MandateLevel";
-import EpIcon from "../basics/EpIcon.vue";
-import EpDivider from "../basics/EpDivider.vue";
-import EpChip from "../basics/EpChip.vue";
-import EpScope from "./EpScope.vue";
-import { mdiLeadPencil } from "@mdi/js";
-
-interface Props {
-  title?: string | null;
-  subtitle?: string | null;
-  icon?: string;
-  mandateLevel?: MandateLevel | null;
-  synchrone?: boolean;
-  type?: MediaVariants;
-  labelIntentions?: string;
-  hideIcon?: boolean;
-  flat?: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  title: null,
-  type: "neutral",
-  hideIcon: false,
-  flat: true,
-  labelIntentions: "",
-});
-
-//get slots
-const slots: SetupContext["slots"] = useSlots();
-
-const hasIntentions = computed(() => {
-  return slots.intentions ? true : false;
-});
-
-const hasActions = computed(() => {
-  return slots.actions ? true : false;
-});
-
-const renderIcon = computed(() => {
-  if (props.icon) {
-    return props.icon;
-  }
-  return mdiLeadPencil;
-});
-
-const topBarStyle = computed(() => {
-  return `${mediaVariants[props.type]} text-left  ${
-    props.flat ? "" : "rounded-t-md"
-  } flex justify-between items-center `;
-});
-
-const bottomBarStyle = computed(() => {
-  return `${mediaVariants[props.type]} text-right`;
-});
-
-const paddingTopStyle = computed(()=> {
-   if(props.type != "neutral"){
-    return `px-5 py-2`
-   }
-})
-
-const paddingBottomStyle = computed(()=> {
-   if(props.type != "neutral"){
-    return `pr-5`
-   }
-})
-const boxPaddingStyle = computed(()=> {
-   if(props.type != "neutral"){
-    return `px-5`
-   }
-})
-
-const containerStyle = computed(() => {
-  if (hasActions.value || hasIntentions.value || props.title) {
-    return ` overflow-hidden ${
-      props.flat ? "" : "shadow-md"
-    } flex flex-col justify-start h-full`;
-  }
-  return `flex flex-col justify-between`;
-});
-
-
-
-// type, taxonomyLevel, courseCode, courseTitle, title, subtitle, height, src, color, synchrone
-
-const { title, hideIcon } = toRefs(props);
-</script>
-
-<template>
-  <div :class="containerStyle">
-    <div
-      :class="`${topBarStyle} ${paddingTopStyle} dark:base-dark`"
-      v-if="title || mandateLevel"
-    >
-      <!-- <EpIcon :size="24" :icon-path="mdiBookOpenVariant"></EpIcon> -->
-      <h3>
-        <EpIcon v-if="!hideIcon" :iconPath="renderIcon" size="24" class="mr-2"></EpIcon>
-        <span class="font-bold align-middle">{{ title }}</span>
-      </h3>
-      <EpScope v-if="mandateLevel" :mandateLevel="mandateLevel"></EpScope>
-    </div>
-    <div :class="`${boxPaddingStyle} dark:base-dark dark:text-white`">
-      <div class="py-4" v-if="hasIntentions">
-        <!-- <EpIcon :size="24" :icon-path="mdiInformationOutline"></EpIcon> -->
-        <h4
-          v-if="labelIntentions"
-          class="font-light text-sm pb-1 tracking-wide dark:text-white"
-        >
-          {{ labelIntentions }}
-        </h4>
-        <slot name="intentions"></slot>
-        <EpDivider />
-      </div>
-      <div class="pt-2">
-        <slot name="content"></slot>
-      </div>
-    </div>
-    <div :class="`${bottomBarStyle} ${paddingBottomStyle}`" class="dark:base-dark" v-if="hasActions">
-      <slot name="actions"></slot>
-    </div>
-  </div>
-</template>

package/src/components/educationals/EpInstructions.vue

@@ -1,49 +0,0 @@
-<script setup lang="ts">
-import { toRefs } from "vue";
-import EpIcon from "../basics/EpIcon.vue";
-import EpAccordeon from "../interactions/EpAccordeon.vue";
-
-type Instructions = {
-    uid:string;
-    title:string;
-    content:string;
-	open?:boolean;
-}
-
-interface Props {
-  icon?: string | null;
-  title?: string | null;
-  subtitle? :string | null;
-  instructions:Instructions[];
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  title: "Consignes",
-});
-
-const { title, icon, subtitle } = toRefs(props);
-
-</script>
-<template>
-	<div class="lg:grid lg:grid-cols-12 lg:gap-8">
-	  <div class="lg:col-span-2">
-		<h2
-		  class="text-pretty text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-100 sm:text-xl"
-		>
-		<EpIcon v-if="icon" :icon-path="icon" size="28" extraClass="mr-2"></EpIcon>
-		  {{ title }}
-		</h2>
-	  </div>
-	  <div class="lg:col-span-8 lg:mt-0 lg:border-l dark:border-gray-700 lg:pl-4">
-		<div class="py-2">
-			<template v-for="instruction in instructions" :key="`instruction-${instruction.uid}`">
-				<EpAccordeon small outlined :title="instruction.title" :open="instruction.open">
-					<div v-html="instruction.content"></div>
-				</EpAccordeon>
-			</template>
-        
-		</div>
-	  </div>
-	</div>
-  </template>
-  

package/src/components/educationals/EpIntroduction.vue

@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import { toRefs } from "vue";
-import EpIcon from "../basics/EpIcon.vue";
-
-interface Props {
-  icon?: string | null;
-  title?: string | null;
-  subtitle? :string | null;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  title: "Introduction",
-});
-const { title, icon, subtitle } = toRefs(props);
-</script>
-<template>
-	<div class="lg:grid lg:grid-cols-12 lg:gap-8">
-	  <div class="lg:col-span-2">
-		<h2
-		  class="text-pretty text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-100 sm:text-xl"
-		>
-		<EpIcon v-if="icon" :icon-path="icon" size="28" extraClass="mr-2"></EpIcon>
-		  {{ title }}
-		</h2>
-	  </div>
-	  <div class="lg:col-span-8 lg:mt-0 lg:border-l dark:border-gray-700 lg:pl-4">
-		<div class="py-2">
-		  <h3 v-if="subtitle" class="text-base font-semibold leading-7 text-gray-900 dark:text-gray-100">
-			{{subtitle}}
-		  </h3>
-		  <div class="text-gray-600 dark:text-gray-300">
-            <slot></slot>
-          </div>
-		</div>
-	  </div>
-	</div>
-  </template>
-  

package/src/components/educationals/EpObjective.vue

@@ -1,41 +0,0 @@
-<script setup lang="ts">
-
-interface Props {
-    nameApproach?:string | null;
-    title?:string|null;
-    color?:`border-${string}`;
-}
-
-const props = withDefaults(defineProps<Props>(),{
-    color:'border-gray'
-})
-
-</script>
-
-<template>
-  <div :class="`border-l-8
-    ${color} 
-    p-4 
-    my-3 
-    transition 
-    duration-200 
-    ease-in-out 
-    outline-primary 
-    focus-within:outline 
-    focus-within:outline-1 
-    outline-offset-4 
-    hover:outline 
-    hover:outline-1 
-    hover:outline-gray-200 
-    dark:hover:outline-gray-700`">
-    <div class="flex flex-row divide-x gap-x-4">
-      <div class="w-32">
-        {{ nameApproach }}
-      </div>
-      <div class="flex-1 pl-4">
-        <h4 class="font-medium mb-1">{{ title }}</h4>
-        <slot></slot>
-      </div>
-    </div>
-  </div>
-</template>

package/src/components/educationals/EpReading.vue

@@ -1,255 +0,0 @@
-<script setup lang="ts">
-import { toRefs, computed } from "vue";
-import EpIcon from "../basics/EpIcon.vue";
-import EpBtn from "../basics/EpBtn.vue";
-import DisplayBox from "../tools/DisplayBox.vue";
-import EpEdu from "./EpEdu.vue";
-import { type MediaVariants } from "../../types/Medias";
-import { type MandateLevel } from '../../types/MandateLevel';
-import { useRenderText } from "../../composables/useRenderText";
-import { mdiBookmarkBox } from "@mdi/js";
-import { mdiBookOpenVariant } from "@mdi/js";
-import { mdiBookOpenPageVariant } from "@mdi/js";
-import { mdiOpenInNew } from "@mdi/js";
-
-interface Props {
-  url?: string;
-  year?: string;
-  author?: string;
-  cover?: string;
-  title: string | null;
-  container?: string; /// is publication complete
-  editor?: string;
-  pages?: string|string[];
-  mandateLevel?: MandateLevel | null;
-  intentions?: string;
-  compact?: boolean;
-  more?: boolean;
-  version_link?: null;
-  hideCover?: boolean;
-  type?:MediaVariants;
-  hideIcon?:boolean;
-  labelIn?:string;     
-  labelRead?:string;    
-  labelClose?:string;   
-  labelDetails?:string;    
-  labelCard?: string;
-  labelIntentions?: string;
-}
-
-// type, taxonomyLevel, courseCode, courseTitle, title, subtitle, height, src, color, synchrone
-
-const props = withDefaults(defineProps<Props>(), {
-  title: null,
-  cover: "",
-  icon: "mdiBookmarkBox",
-  hideCover: false,
-  compact: false,
-  type:"neutral",
-  hideIcon:false,
-  labelIn:"dans",
-  labelRead:"Lire",
-  labelClose:"Fermer",
-  labelDetails:"détails",
-  labelCard: "Lecture",
-  labelIntentions: "Intentions de lecture",
-});
-
-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 || props.cover === bad_image) {
-    return false;
-  }
-  return true;
-});
-
-const hasDetails = computed(() => {
-  if (props.author || props.editor || props.container || props.year) {
-    return true;
-  }
-  return false;
-});
-
-const {
-  title,
-  intentions,
-  cover,
-  hideCover,
-  year,
-  author,
-  container,
-  editor,
-  pages,
-  type,
-  mandateLevel,
-  url,
-  labelIn,     
-  labelRead,    
-  labelClose,   
-  labelDetails,   
-  labelCard,
-  labelIntentions
-} = toRefs(props);
-
-const errorImg = (event:Event)=>{
-  const imgElement = event.target as HTMLImageElement;
-  if(imgElement.src){
-    imgElement.src="https://live.staticflickr.com/4868/45940268562_c5f7fdd06b_q.jpg"
-  }
-}
-</script>
-
-<template>
-  <div class="flex shadow-sm rounded-lg overflow-hidden bg-white dark:bg-dark md:flex-row " v-if="!compact">
-    <template v-if="!hideCover">
-      <div
-        v-if="hasCover"
-        class="h-96 mr-2 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}`" @error="errorImg" />
-      </div>
-
-      <div
-        v-else
-        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 dark:bg-dark "
-      >
-        <EpIcon :icon-path="mdiBookOpenPageVariant" size="95"></EpIcon>
-      </div>
-    </template>
-    <div class="flex py-3 flex-col w-full">
-      <EpEdu :title="labelCard" :labelIntentions="labelIntentions" :icon="mdiBookOpenVariant" flat :type="type" :hideIcon="hideIcon" :mandateLevel="mandateLevel">
-        <template #intentions v-if="intentions">
-          <div v-html="useRenderText(intentions)"></div>
-        </template>
-        <template #content>
-          <div class="w-full">
-            <h4 :class="`text-xl font-semibold ${hasDetails || pages ? 'border-b' : ''}`">
-              {{ title }}
-            </h4>
-            <div class="flex">
-              <div class="flex-1 py-2" v-if="hasDetails">
-                <p class="font-medium">
-                  <span class="font-bold mr-1" v-if="author">{{ author }}</span>
-                  <span v-if="year">({{ year }})</span>
-                  <span v-if="year && editor">, </span>
-                  <span v-if="editor">{{ editor }}</span>
-                </p>
-                <p v-if="container">
-                  <span class="text-sm italic pr-1">{{labelIn}}</span>
-                  <span class="">{{ container }}</span>
-                </p>
-              </div>
-              <div
-                :class="`flex-1 pt-2 pb-2 ${hasDetails ? 'border-l pl-2' : ''}`"
-                v-if="pages"
-              >
-                <EpIcon :size="24" :icon-path="mdiBookmarkBox"></EpIcon>
-                <span class="pl-2 align-middle">{{ pages }}</span>
-              </div>
-            </div>
-          </div>
-        </template>
-        <template #actions>
-          <EpBtn text :href="url" v-if="url" type="primary">
-              <EpIcon :size="20" :icon-path="mdiOpenInNew" ></EpIcon> {{labelRead}}
-            </EpBtn>
-        </template>
-      </EpEdu>
-    </div>
-  </div>
-  <!--compact mode-->
-  <EpEdu :title="labelCard" :labelIntentions="labelIntentions" :icon="mdiBookOpenVariant" flat :type="type" :hideIcon="hideIcon" v-else>
-    <template #intentions v-if="intentions">
-      <div v-html="useRenderText(intentions)"></div>
-    </template>
-    <template #content>
-      <div class="flex flex-row justify-between">
-        <div class="p-5">
-          <span
-            class="text-lg leading-6 font-semibold font-sans"
-            >{{ title }}</span
-          >
-        </div>
-        <div class="flex">
-          <div class="p-5">
-            <DisplayBox>
-              <template #default="{ open }">
-                <EpBtn text @click.stop="open" type="primary"> {{labelDetails}} </EpBtn>
-              </template>
-              <template #menu="{ close }">
-                <div class="w-[32rem]">
-                  <div class="flex flex-col rounded-lg bg-white dark:bg-dark dark:border-r  md:flex-row ">
-                    <template v-if="!hideCover">
-                      <img
-                        v-if="hasCover"
-                        class="object-cover h-96 w-full rounded-t-lg md:h-auto md:w-56 md:rounded-none md:rounded-l-lg "
-                        :src="cover"
-                        :alt="`image de la lecture ${title}`"
-                        @error="errorImg"
-                      />
-                      <div
-                        v-else
-                        class="h-96 border-l border-t border-b 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"
-                      >
-                        <EpIcon :icon-path="mdiBookOpenPageVariant" size="95"></EpIcon>
-                      </div>
-                    </template>
-                    <div class="flex flex-col justify-between w-full">
-                      <div class="text-left px-5 py-2 bg-gray-100 text-black dark:rounded-tr-lg">
-                        <EpIcon :size="24" :icon-path="mdiBookOpenVariant"></EpIcon>
-                        <span class="pl-2 align-middle">{{labelCard}}</span>
-                      </div>
-                      <div class="w-full px-5">
-                        <h4
-                          :class="`text-xl font-semibold py-4 ${
-                            hasDetails || pages ? 'border-b' : ''
-                          }`"
-                        >
-                          {{ title }}
-                        </h4>
-                        <div class="flex">
-                          <div class="flex-1 py-2" v-if="hasDetails">
-                            <p class="font-medium">
-                              <span class="font-bold mr-2" v-if="author">{{ author }}</span>
-                              <span v-if="year"> ({{ year }})</span>
-                              <span v-if="year && editor">, </span>
-                              <span v-if="editor">{{ editor }}</span>
-                            </p>
-                            <p v-if="container">
-                              <span class="text-sm italic pr-1">{{labelIn}}</span>
-                              <span>{{ container }}</span>
-                            </p>
-                          </div>
-                          <div
-                            :class="`flex-1 pt-2 pb-2 ${
-                              hasDetails ? 'border-l pl-2' : ''
-                            }`"
-                            v-if="pages"
-                          >
-                            <EpIcon :size="24" :icon-path="mdiBookmarkBox"></EpIcon>
-                            <span class="pl-2 align-middle">{{ pages }}</span>
-                          </div>
-                        </div>
-                      </div>
-                      <div class="bg-gray-100 dark:bg-transparent dark:border-b dark:rounded-br text-right pr-5">
-                        <EpBtn text @click.stop="close" type="error"> {{labelClose}} </EpBtn>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </template>
-            </DisplayBox>
-          </div>
-
-          <div class="border-l p-5">
-            <EpBtn text :href="url" v-if="url" type="primary">
-              <EpIcon :size="20" :icon-path="mdiOpenInNew" ></EpIcon> {{labelRead}}
-            </EpBtn>
-          </div>
-        </div>
-      </div>
-    </template>
-  </EpEdu>
-</template>

package/src/components/educationals/EpResource.vue

@@ -1,85 +0,0 @@
-<script setup lang="ts">
-import { defineAsyncComponent, computed, toRefs } from 'vue';
-import { type MandateLevel } from '../../types/MandateLevel';
-import { useComponent } from '../../composables/useComponent';
-import { type MediaVariants } from "../../types/Medias";
-interface Props {
-   pages?:string;
-   resource:any;
-   mandateLevel?:MandateLevel | null;
-   type?:MediaVariants
-}
-
-const props = withDefaults(defineProps<Props>(), {
-   type:'neutral'
-})
-
-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])
-   console.log(typeRess)
-   console.log(props)
-   ress.pages = props.pages
-   ress.type = typeRess
-   ress.intentions = props.pages
-   if(typeRess === "clip"){
-      ress.src = ress.url
-   }
-   if(typeRess === "website"){
-      ress.href = ress.url
-      ress.label = ress.title
-   }
-   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 typeRess = computed(()=> {
-   if(resourceInfo.value.type && resourceInfo.value.type === 'website'){
-      if(type.value === 'base'){
-         return 'primary'
-      }
-   }
-   return type.value
-})
-
-const {mandateLevel, type, pages} = toRefs(props)
-
-
-
-
-</script>
-
-<template>
-    <component 
-       :is="getCompontent(resourceInfo.type)" 
-       v-bind="{ ...resourceInfo }"
-       :mandateLevel="mandateLevel"
-       :intentions="pages"
-       :type="typeRess"
-       ></component> 
-</template>

package/src/components/educationals/EpScope.vue

@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import { ref, toRefs, computed } from "vue";
-//types with capital letter, object styles in lowercase
-import EpChip from "../basics/EpChip.vue";
-import { type MandateLevel } from '../../types/MandateLevel';
-import { type ChipBgVariant } from "../../types/Chip";
-
-interface Props {
-  mandateLevel?: MandateLevel | null;
-}
-
-const props = withDefaults(defineProps<Props>(), {});
-
-let renderMandate = ref<ChipBgVariant>('primary')
-
-const typeMandate = computed(()=>{
-    if(props.mandateLevel?.value.trim() === "0"){
-      return renderMandate.value = 'warning'
-    }
-    return renderMandate.value = 'primary'
-})
-
-</script>
-
-<template>
-    <EpChip v-if="mandateLevel" size="small" :type="typeMandate">
-      {{ mandateLevel.title }}
-    </EpChip>
-</template>

package/src/components/educationals/EpSpecificObjective.vue

@@ -1,37 +0,0 @@
-<script setup lang="ts">
-import { computed } from "vue";
-interface Props {
-  label?: string;
-  color?: string;
-  tab?: boolean;
-  content?: string;
-  bg?: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  color: "border-gray-200",
-  tab: false,
-});
-
-const styles = computed(() => {
-  const tabStyle = props.tab ? `border-l-8 ${props.color} ` : ""
-  const bgStyle = props.bg ? "bg-gray-100 dark:text-dark" : ""
-  return `${tabStyle} ${bgStyle}`;
-});
-</script>
-<template>
-    <div :class="`${styles} rounded-lg p-4 ml-10 border border-t-gray-100 border-r-gray-100 border-b-gray-100`">
-      <div class="flex flex-nowrap gap-x-4">
-        <div v-if="label" class="flex-none self-center">
-          <div
-            class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium text-primary-700 ring-1 ring-inset ring-primary-600/20"
-          >
-            {{ label }}
-          </div>
-        </div>
-        <div class="flex-auto">
-          <dd :class="`mt-1 text-base font-base text-gray-900 ${bg?'dark:text-dark':'dark:text-gray-300'}`">{{ content }}</dd>
-        </div>
-      </div>
-    </div>
-</template>