ep-lib-ts 1.0.28 → 1.0.30

package/dist/index.d.ts

@@ -24,6 +24,7 @@ import { default as EpIntroduction } from './components/educationals/EpIntroduct
 import { default as EpInstructions } from './components/educationals/EpInstructions.vue';
 import { default as EpDescription } from './components/educationals/EpDescription.vue';
 import { default as EpConclusion } from './components/educationals/EpConclusion.vue';
+import { default as EpCodeblock } from './components/educationals/EpCodeblock.vue';
 import { default as EpAccordeon } from './components/interactions/EpAccordeon.vue';
 import { default as EpContentSlider } from './components/interactions/EpContentSlider.vue';
 import { default as EpModal } from './components/interactions/EpModal.vue';
@@ -48,4 +49,4 @@ import { default as EpHeader } from './components/signages/EpHeader.vue';
 import { default as EpQuote } from './components/signages/EpQuote.vue';
 import { default as EpSkeleton } from './components/signages/EpSkeleton.vue';
 
-export { EpBadge, EpBtn, EpCard, EpChip, EpDivider, EpFlex, EpIcon, EpImg, EpSection, EpSpinner, EpTable, EpBarChart, EpLineChart, EpPieChart, EpFunnelChart, EpText, EpEdu, EpReading, EpResource, EpScope, EpAccordeon, EpContentSlider, EpModal, EpQuestion, EpTabs, EpAudio, EpCarousel, EpIframe, EpKatex, EpLink, EpLinkVersion, EpSoftware, EpSvg, EpTerm, EpTimeLine, EpVideo, EpVideoPanopto, EpAlert, EpHeader, EpQuote, EpSkeleton, EpWordDef, EpSummativeTable, EpObjective, EpSpecificObjective, EpIntroduction, EpInstructions, EpDescription, EpConclusion };
+export { EpBadge, EpBtn, EpCard, EpChip, EpDivider, EpFlex, EpIcon, EpImg, EpSection, EpSpinner, EpTable, EpBarChart, EpLineChart, EpPieChart, EpFunnelChart, EpText, EpEdu, EpReading, EpResource, EpScope, EpAccordeon, EpContentSlider, EpModal, EpQuestion, EpTabs, EpAudio, EpCarousel, EpIframe, EpKatex, EpLink, EpLinkVersion, EpSoftware, EpSvg, EpTerm, EpTimeLine, EpVideo, EpVideoPanopto, EpAlert, EpHeader, EpQuote, EpSkeleton, EpWordDef, EpSummativeTable, EpObjective, EpSpecificObjective, EpIntroduction, EpInstructions, EpDescription, EpConclusion, EpCodeblock };

package/dist/{prism-BBDN_oIY.js → prism-4vT4ciXB.js}

@@ -1,4 +1,4 @@
-import { g as V, c as W } from "./EpCodeblock-CZ1tMDQY.js";
+import { a0 as V, a1 as W } from "./index-CjFsNJuq.js";
 function ee(S, P) {
   for (var i = 0; i < P.length; i++) {
     const g = P[i];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ep-lib-ts",
   "private": false,
-  "version": "1.0.28",
+  "version": "1.0.30",
   "files": [
     "dist",
     "src/components/"

package/src/components/educationals/EpSpecificObjective.vue

@@ -20,7 +20,7 @@ const styles = computed(() => {
 });
 </script>
 <template>
-    <div :class="`${styles} rounded-lg p-4 border border-t-gray-100 border-r-gray-100 border-b-gray-100`">
+    <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

package/src/components/signages/EpHeader.vue

@@ -9,11 +9,14 @@ import SvgFilter from "../tools/SvgFilter.vue";
 import EpIcon from "../basics/EpIcon.vue";
 import EpChip from "../basics/EpChip.vue";
 
+type Arrangement = "imgBg" | "simple" | "sideBy";
+type Valign = "items-center" | "items-start" | "items-end"
+type Haling = "justify-end" | "justify-center" | "justify-start" | "justify-end"
+
 interface Props {
-  title?: string | null;
+  title: string | null;
   subtitle?: string | null;
   icon?: string | null;
-  color?: string | null;
   courseCode?: string | null;
   courseTitle?: string | null;
   big?: boolean | null;
@@ -27,6 +30,11 @@ interface Props {
     synchrone?: string;
     formatif?: string;
   };
+  textBg?: boolean;
+  type?: Arrangement;
+  titlePosition?: string;
+  vAlign?:Valign;
+  hAlign?:Haling
 }
 
 // type, taxonomyLevel, courseCode, courseTitle, title, subtitle, height, src, color, synchrone
@@ -34,7 +42,6 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   title: null,
   icon: null,
-  color: null,
   src: null,
   big: false,
   synchrone: false,
@@ -47,19 +54,25 @@ const props = withDefaults(defineProps<Props>(), {
       formatif: "Formatif",
     };
   },
+  textBg: true,
+  type: "imgBg",
+  titlePosition: "center",
+  vAlign:"items-center",
+  hAlign:"justify-center"
 });
 
-const colorText = computed(() => {
-  return props.color;
-});
+
+
+const bgTextFit = "w-8/12"; // ''
+
 
 const styles = computed(() => {
   return ` 
-  flex
-  flex-col
+	flex
+	flex-col
 	overflow-hidden 
 	w-full 
-  absolute
+	absolute
 	${props.big ? "min-h-screen" : "h-96"}
 	bg-cover
 	bg-center`;
@@ -85,8 +98,8 @@ const { title, headerImgColor, big } = toRefs(props);
 
 <template>
   <header
-    v-if="!hideImg"
-    :class="`${big ? 'h-screen ' : ''}items-center overflow-hidden relative `"
+    v-if="type === 'imgBg'"
+    :class="`${big ? 'h-screen ' : 'h-96'} items-center overflow-hidden relative `"
     ref="el"
   >
     <div
@@ -96,17 +109,25 @@ const { title, headerImgColor, big } = toRefs(props);
 
     <div :class="`relative ${big ? 'mb-36' : ''} h-full items-end`">
       <div class="flex md:justify-end justify-center pt-5">
-        <EpChip v-if="synchrone" :prependIcon="mdiCast">{{ labels.synchrone }}</EpChip>
-        <EpChip v-if="duration" :prependIcon="mdiTimerOutline"> {{ duration }}</EpChip>
-        <EpChip v-if="assessment" :prependIcon="mdiChairSchool">{{
+        <EpChip v-if="synchrone" :prependIcon="mdiCast" size="small">{{
+          labels.synchrone
+        }}</EpChip>
+        <EpChip v-if="duration" :prependIcon="mdiTimerOutline" size="small">
+          {{ duration }}</EpChip
+        >
+        <EpChip v-if="assessment" :prependIcon="mdiChairSchool" size="small">{{
           labels.formatif
         }}</EpChip>
       </div>
-      <div class="flex w-full py-24 grow flex h-full items-center">
-        <div class="mx-auto w-8/12">
+      <div :class="`${vAlign} ${hAlign} flex w-full grow h-96 `">
+        <div :class="`${bgTextFit}`">
           <div
             v-if="title || subtitle"
-            class="p-4 md:items-center backdrop-blur-md backdrop-brightness-50 backdrop-opacity-75 rounded"
+            :class="`${
+              textBg
+                ? 'backdrop-blur-md backdrop-brightness-50 backdrop-opacity-75 rounded'
+                : ''
+            } p-4 md:items-center`"
           >
             <div class="text-center md:text-left">
               <h1 v-if="title" class="text-xl font-medium text-white sm:text-3xl">
@@ -131,9 +152,15 @@ const { title, headerImgColor, big } = toRefs(props);
     </div>
     <SvgFilter></SvgFilter>
   </header>
-  <header v-else>
-    <div class="text-center md:text-left mt-16 mb-32">
-      <h1 v-if="title" class="text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
+
+  <header v-else-if="type === 'simple'">
+    <div
+      class="text-center md:text-left mt-16 mb-32"
+    >
+      <h1
+        v-if="title"
+        class="text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-100"
+      >
         {{ title }}
       </h1>
       <h2 v-if="subtitle" class="w-1/2 mt-4 text-gray-500 dark:text-gray-300">
@@ -141,4 +168,48 @@ const { title, headerImgColor, big } = toRefs(props);
       </h2>
     </div>
   </header>
+
+  <header v-else="type === 'sideBy'">
+    <div class="flex flex-col-reverse lg:flex-row items-stretch">
+      <div class="basis-1/2 bg-gray-100 dark:bg-base-dark lg:min-h-48 p-4">
+
+		<div class="flex justify-start pt-0 mb-4">
+            <EpChip v-if="synchrone" :prependIcon="mdiCast" size="small">{{
+              labels.synchrone
+            }}</EpChip>
+            <EpChip v-if="duration" :prependIcon="mdiTimerOutline" size="small">
+              {{ duration }}</EpChip
+            >
+            <EpChip v-if="assessment" :prependIcon="mdiChairSchool" size="small">{{
+              labels.formatif
+            }}</EpChip>
+          </div>
+        <div :class="`${vAlign} flex h-full pb-8 max-w-3xl`">
+          <div>
+            <h1
+              v-if="title"
+              class="text-4xl sm:text-5xl xl:text-6xl font-bold tracking-tight text-gray-900 dark:text-white"
+            >
+              {{ title }}
+            </h1>
+            <p v-if="subtitle" class="mt-4 text-xl text-gray-600 dark:text-white">
+              {{ subtitle }}
+            </p>
+            <div class="mt-4">
+              <slot></slot>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="basis-1/2">
+        <img
+          :src="bgImg"
+          alt=""
+          class="h-32 lg:h-full size-full object-cover"
+          :style="`background-image:url('${bgImg}'); filter:url(#${headerImgColor});`"
+        />
+      </div>
+    </div>
+  </header>
 </template>

package/dist/BgAudio-CSugbYTV.js

@@ -1,4 +0,0 @@
-import { Y as f } from "./index-DkIYoQK0.js";
-export {
-  f as default
-};

package/dist/DisplayBox-BWCkFddn.js

@@ -1,4 +0,0 @@
-import { Z as f } from "./index-DkIYoQK0.js";
-export {
-  f as default
-};

package/dist/EpAlert-RBXPL311.js

@@ -1,4 +0,0 @@
-import { U as f } from "./index-DkIYoQK0.js";
-export {
-  f as default
-};

package/dist/EpAudio-DwWaLFmA.js

@@ -1,4 +0,0 @@
-import { K as f } from "./index-DkIYoQK0.js";
-export {
-  f as default
-};

package/dist/EpBadge-NyPE2es-.js

@@ -1,4 +0,0 @@
-import { c as f } from "./index-DkIYoQK0.js";
-export {
-  f as default
-};

package/dist/EpBarChart-DQ8VeUfV.js

@@ -1,4 +0,0 @@
-import { o } from "./index-DkIYoQK0.js";
-export {
-  o as default
-};

package/dist/EpBtn-AnuZKT32.js

@@ -1,4 +0,0 @@
-import { d as f } from "./index-DkIYoQK0.js";
-export {
-  f as default
-};

package/dist/EpCard-C1rB5n_A.js

@@ -1,4 +0,0 @@
-import { e } from "./index-DkIYoQK0.js";
-export {
-  e as default
-};

package/dist/EpChip-CPQcyfRt.js

@@ -1,4 +0,0 @@
-import { f } from "./index-DkIYoQK0.js";
-export {
-  f as default
-};