ep-lib-ts 0.1.32 → 0.1.34

package/src/components/signages/EpBadge.vue

@@ -0,0 +1,82 @@
+
+<script setup lang="ts">
+
+    import { computed } from "vue";
+    import { TypeBadge, typeBadge } from   "../../types/Badge";  //"../../types/Badge";
+
+    type Mode = "default"|"dot";
+    type Color = "primary"|"secondary"|"accent"|"error"|"warning"|"success"|"info"|"question"|"tip";
+    type Visibility = "true"|"false"
+ 
+
+    interface Props {  
+        content:number;
+        mode?:Mode;
+        placement?:TypeBadge
+        visibility:Visibility
+        color:Color
+        maxValue:number
+    }
+
+    // define parameter and default valule
+    const props = withDefaults(defineProps<Props>(), {
+        mode:'default',
+        placement:'top_right',
+        visibility:'true',  
+        color:"primary",
+        maxValue : 0
+   
+    }) 
+
+   // const { badgestyle } = toRefs(props)
+   
+    
+    const finalType = computed(()=>{ 
+        return props.placement
+        })
+
+    const finalContent = computed(()=>{ 
+        if (props.mode =="dot" ){
+            return ""
+        }
+        else if (props.visibility == 'false'){
+            return ""
+        }
+        else if (props.content !=0) {
+            if (props.content > props.maxValue && props.maxValue !=0){
+                return props.maxValue +"+" 
+            }
+            else{
+                return props.content
+            }
+         
+        }
+
+    })
+
+  
+    const badgeStyle = computed(()=>{   
+        if (props.visibility == "true")   {          
+            return props.mode 
+        }  else{
+            return 'hide'   
+        } 
+    })
+    
+    
+    const bgcolor  = computed(()=>{   
+        return "bg-"+ props.color
+    })
+   
+    const finalStyles = computed(()=>{
+        return `${typeBadge[finalType.value]?.[badgeStyle.value]}`
+    })
+    
+
+</script>
+<template>  
+    <div class="group relative w-max "> 
+        <slot></slot>  
+        <div :class="`${finalStyles} ${bgcolor}`">{{ finalContent }}</div> 
+    </div>
+    </template>

package/src/components/signages/EpHeader.vue

@@ -101,7 +101,7 @@ const { title, headerImgColor, big } = toRefs(props);
         </div>
       </div>
 
-      <div v-if="props.big" class="animate-bounce absolute bottom-10 left-1/2">
+      <div v-if="props.big" class="animate-bounce absolute bottom-32 left-1/2">
         <div class="mx-auto w-12 bg-white rounded-full p-2" @click="clickScroll">
           <EpIcon :iconPath="mdiChevronDown" size="32"></EpIcon>
         </div>

package/src/components/signages/EpQuote.vue

@@ -1,52 +1,68 @@
 <script setup lang="ts">
-import {toRefs, computed} 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'
 
 interface Props {
-    author?:string | null;
-    img?:string | null;
-    card?:boolean;
+  author?: string | null;
+  img?: string | null;
+  card?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-    author:null,
-    img:null,
-    card:false
-})
+  author: null,
+  img: null,
+  card: false,
+});
+
+const colorText = computed(() => {
+  if (props.card) {
+    return `text-white`;
+  }
+});
 
-const {author, img} = toRefs(props)
+const styleTextAutor = computed(() => {
+  if (props.card) {
+    return `text-white`;
+  }
+  return `text-neutral-500`;
+});
 
-const styleQuote = computed(()=> {
-    if(props.card) {
-      return `primary`
-    }
-    return ``
-})
+const imageStyle = computed(() => {
+  if (props.card) {
+    return `rounded-lg`;
+  }
+  return `rounded-l-md`;
+});
 
+const { author, img, card } = toRefs(props);
 </script>
 
 <template>
-      <EpCard density="compact" :color="styleQuote" outlined>
-          <div
-            class="flex flex-wrap rounded-md bg-white"
-          >
-            <img
-              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="author">
-                <EpDivider size="border"></EpDivider>
-                <p class="text-xs italic text-neutral-500">
-                  {{ author }}
-                </p>
-              </template>
-            </div>
-          </div>
-      </EpCard>
+  <div :class="card?'w-4/6 mx-auto':''">
+    <EpCard
+      :density="card?'default':'compact'"
+      :outlined="!card ? true : false"
+      :color="card ? 'primary':'bg-white'"
+    >
+      <div class="flex flex-wrap rounded-md">
+        <img
+          v-if="img"
+          :class="`h-32 ${imageStyle}`"
+          :src="img"
+          alt="Image of quote"
+        />
+        <div :class="`p-6 flex-1 ${colorText}`">
+          <slot></slot>
+          <template v-if="author">
+            <EpDivider size="border"></EpDivider>
+            <p :class="`text-xs italic ${styleTextAutor}`">
+              {{ author }}
+            </p>
+          </template>
+        </div>
+      </div>
+    </EpCard>
+  </div>
 </template>

package/src/components/signages/EpSkeleton.vue

@@ -1,17 +1,44 @@
 <script setup lang="ts">
 
-//props
-//square
-//rounded
-//an animate
+type Shape = "circle" | "rectangle";
 
-//https://mui.com/material-ui/react-skeleton/
-//https://ui.nuxt.com/layout/skeleton
 
+interface Props {
+  type?:Shape;
+  height?:number;
+  width?:number;
+  animation?:string;
+}
+
+  // define parameter
+  const props = withDefaults(defineProps<Props>(), {
+    type:'rectangle',
+    width:100,
+    height:10,
+    animation:"animate-pulse" 
+  }) 
+ 
+  const width =  props.width/4 +"rem" 
+  const height = props.height/4+ "rem" 
+  const animation = props.animation? props.animation :"animate-pulse" 
 
 </script>
 <template>
-    <div>
-        skeleton
+    <div>       
+        <div class="flex p-2" :class = "animation" >
+          <div  v-if="props.type === 'circle'">
+            <span class="shape block bg-gray-200 rounded-full dark:bg-gray-700"></span>           
+          </div>
+          <div v-else-if="props.type === 'rectangle'">
+            <span class="shape block bg-gray-200 dark:bg-gray-700 rounded-lg"></span>    
+          </div>
+     </div>
     </div>
-</template>
+</template>
+
+<style >
+  .shape {      
+    height: v-bind(height);
+    width: v-bind(width)
+  }
+</style>

package/src/components/tools/TimelineItem.vue

@@ -107,7 +107,7 @@ const {  event } = toRefs(props)
         <span v-if="end_date?.hour.trim()" class="text-xs ml-1"> {{ end_date.hour }}</span>
         
       </div>
-      <h1 :class="`text-2xl ${colorEvent.text}`">{{ event.text?.headline }}</h1>
+      <h2 :class="`text-2xl ${colorEvent.text}`">{{ event.text?.headline }}</h2>
       <!-- Content  -->
       <div ref="collapsible" class="content">
         <div :class="`${src?'flex':''} py-4`">

package/dist/EpBadge-93f2b94c.js

@@ -1,6 +0,0 @@
-import { c as o } from "./index-20e915f7.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpBtn-668f42ba.js

@@ -1,6 +0,0 @@
-import { d as o } from "./index-20e915f7.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpCard-6093b0ee.js

@@ -1,6 +0,0 @@
-import { e as o } from "./index-20e915f7.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpChip-caf0d258.js

@@ -1,6 +0,0 @@
-import { f as o } from "./index-20e915f7.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpContentSlider-bad04488.js

@@ -1,6 +0,0 @@
-import { w as o } from "./index-20e915f7.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpDivider-75d5d66c.js

@@ -1,6 +0,0 @@
-import { g as o } from "./index-20e915f7.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpFlex-75a7f492.js

@@ -1,6 +0,0 @@
-import { h as o } from "./index-20e915f7.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpHeader-a78fa103.js

@@ -1,6 +0,0 @@
-import { J as o } from "./index-20e915f7.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpIframe-7454aac5.js

@@ -1,6 +0,0 @@
-import { A as o } from "./index-20e915f7.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpImg-20520265.js

@@ -1,6 +0,0 @@
-import { j as o } from "./index-20e915f7.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpLineChart-17f12586.js

@@ -1,6 +0,0 @@
-import { p as o } from "./index-20e915f7.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpLink-880190ed.js

@@ -1,6 +0,0 @@
-import { B as o } from "./index-20e915f7.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpLinkVersion-ed4fab24.js

@@ -1,6 +0,0 @@
-import { C as o } from "./index-20e915f7.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpModal-d4218262.js

@@ -1,6 +0,0 @@
-import { x as o } from "./index-20e915f7.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpPieChart-1a893e73.js

@@ -1,6 +0,0 @@
-import { q as o } from "./index-20e915f7.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpQuestion-ab29713a.js

@@ -1,6 +0,0 @@
-import { y as o } from "./index-20e915f7.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpQuote-ffe88c7e.js

@@ -1,6 +0,0 @@
-import { K as o } from "./index-20e915f7.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpRadio-b3b1094a.js

@@ -1,6 +0,0 @@
-import { v as o } from "./index-20e915f7.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpReading-e1f2913e.js

@@ -1,6 +0,0 @@
-import { b as o } from "./index-20e915f7.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpResource-0ea2ee11.js

@@ -1,6 +0,0 @@
-import { s as o } from "./index-20e915f7.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpSection-317337e3.js

@@ -1,6 +0,0 @@
-import { k as o } from "./index-20e915f7.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpSkeleton-9542d360.js

@@ -1,10 +0,0 @@
-import { defineComponent as e, openBlock as n, createElementBlock as t } from "vue";
-const p = /* @__PURE__ */ e({
-  __name: "EpSkeleton",
-  setup(o) {
-    return (r, c) => (n(), t("div", null, " skeleton "));
-  }
-});
-export {
-  p as default
-};

package/dist/EpSoftware-f88dae21.js

@@ -1,6 +0,0 @@
-import { D as o } from "./index-20e915f7.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpSpinner-de7aeb71.js

@@ -1,6 +0,0 @@
-import { l as o } from "./index-20e915f7.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpSvg-0a1e63ad.js

@@ -1,6 +0,0 @@
-import { E as o } from "./index-20e915f7.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpTable-dc6c3eff.js

@@ -1,6 +0,0 @@
-import { m as o } from "./index-20e915f7.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpTerm-b0ebfe20.js

@@ -1,6 +0,0 @@
-import { _ as o } from "./index-20e915f7.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpText-5de02f6c.js

@@ -1,6 +0,0 @@
-import { n as o } from "./index-20e915f7.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpTimeLine-7703e204.js

@@ -1,6 +0,0 @@
-import { F as o } from "./index-20e915f7.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpVideo-df8c065a.js

@@ -1,6 +0,0 @@
-import { G as o } from "./index-20e915f7.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};

package/dist/EpVideoPanopto-26dd2dd2.js

@@ -1,6 +0,0 @@
-import { H as o } from "./index-20e915f7.js";
-import "vue";
-import "vue-router";
-export {
-  o as default
-};