ep-lib-ts 1.0.29 → 1.0.31

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" 
+
 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-1KJGtbJ-.js

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

package/dist/DisplayBox-scyhiTQ2.js

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

package/dist/EpAlert-ETk5jUdJ.js

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

package/dist/EpAudio-CMV2jjkV.js

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

package/dist/EpBadge-WDyYpc2R.js

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

package/dist/EpBarChart-DEkcyBoh.js

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

package/dist/EpBtn-BoR7t9It.js

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

package/dist/EpCard-BnSb3ye3.js

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

package/dist/EpChip-BUVtU1vM.js

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

package/dist/EpCodeblock-eLeZ6-Cy.js

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

package/dist/EpConclusion-CGY9h2yH.js

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

package/dist/EpContentSlider-CyekqnU0.js

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

package/dist/EpDescription-Bkmuc2w5.js

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

package/dist/EpDivider-sDyjwb0C.js

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

package/dist/EpEdu-BLpg-FES.js

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

package/dist/EpFlex-D3GKY35p.js

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

package/dist/EpFunnelChart-Cx7XQCHX.js

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

package/dist/EpHeader-BVJEaBxl.js

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

package/dist/EpIcon-CDVfOTsL.js

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

package/dist/EpIframe-COrdaJUg.js

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

package/dist/EpImg-BU78ee7i.js

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

package/dist/EpInstructions-zpjwlfsv.js

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

package/dist/EpIntroduction-Bol1t6j-.js

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

package/dist/EpLineChart-DvMkDBk1.js

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

package/dist/EpLink-BwAD7MsZ.js

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

package/dist/EpLinkVersion-DNLx10dp.js

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

package/dist/EpModal-C02WqcJc.js

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

package/dist/EpObjective-6dat41Xv.js

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

package/dist/EpPieChart-DGuJQkS1.js

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

package/dist/EpQuestion-POTYcmYI.js

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

package/dist/EpQuote-BCECE6WC.js

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

package/dist/EpRadio-oU_YB1sD.js

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

package/dist/EpRadioSummative-CbICXfai.js

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

package/dist/EpReading-k-QepHST.js

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

package/dist/EpResource-DzuUClsE.js

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

package/dist/EpScope-BB3koTKV.js

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

package/dist/EpSection-BqS-xW1K.js

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

package/dist/EpSkeleton-CX_b733h.js

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

package/dist/EpSoftware-C-SzqCYf.js

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

package/dist/EpSpecificObjective-DQTldQUL.js

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

package/dist/EpSpinner-D20UnIZG.js

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

package/dist/EpSummativeTable-B3RsLnHP.js

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

package/dist/EpSvg-DfhQ5Bri.js

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

package/dist/EpTable-DH7Qas6M.js

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

package/dist/EpTerm-D8SQ6SjZ.js

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

package/dist/EpText-Bdun6qAr.js

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

package/dist/EpTimeLine-De3f64AR.js

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

package/dist/EpVideo-Bg6y7Suz.js

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

package/dist/EpVideoPanopto-BT2abdzT.js

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

package/dist/EpWordDef-CFlMJfUB.js

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