ep-lib-ts 0.1.30 → 0.1.33

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-96 w-full object-cover h-auto w-48 ${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/BgAudio-820c0a39.js

@@ -1,5 +0,0 @@
-import { L as m } from "./index-78ac7d74.js";
-import "vue";
-export {
-  m as default
-};

package/dist/DisplayBox-05ba8755.js

@@ -1,5 +0,0 @@
-import { M as m } from "./index-78ac7d74.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpAlert-f32ad986.js

@@ -1,5 +0,0 @@
-import { I as m } from "./index-78ac7d74.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpAudio-80dbaf40.js

@@ -1,5 +0,0 @@
-import { z as m } from "./index-78ac7d74.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpBadge-cb67d4b1.js

@@ -1,5 +0,0 @@
-import { c as m } from "./index-78ac7d74.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpBarChart-710b4ff4.js

@@ -1,5 +0,0 @@
-import { o as a } from "./index-78ac7d74.js";
-import "vue";
-export {
-  a as default
-};

package/dist/EpBtn-5c939189.js

@@ -1,5 +0,0 @@
-import { d as m } from "./index-78ac7d74.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpCard-3c75fd57.js

@@ -1,5 +0,0 @@
-import { e as m } from "./index-78ac7d74.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpChip-75b64fd5.js

@@ -1,5 +0,0 @@
-import { f } from "./index-78ac7d74.js";
-import "vue";
-export {
-  f as default
-};

package/dist/EpContentSlider-5f4ed454.js

@@ -1,5 +0,0 @@
-import { w as m } from "./index-78ac7d74.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpDivider-05f71886.js

@@ -1,5 +0,0 @@
-import { g as m } from "./index-78ac7d74.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpEdu-b7e92524.js

@@ -1,5 +0,0 @@
-import { r as a } from "./index-78ac7d74.js";
-import "vue";
-export {
-  a as default
-};

package/dist/EpFlex-f7103829.js

@@ -1,5 +0,0 @@
-import { h as m } from "./index-78ac7d74.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpHeader-564a55a0.js

@@ -1,5 +0,0 @@
-import { J as m } from "./index-78ac7d74.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpIcon-5c184634.js

@@ -1,5 +0,0 @@
-import { i } from "./index-78ac7d74.js";
-import "vue";
-export {
-  i as default
-};

package/dist/EpIframe-e47cdf06.js

@@ -1,5 +0,0 @@
-import { A as m } from "./index-78ac7d74.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpImg-4ac885e3.js

@@ -1,5 +0,0 @@
-import { j as m } from "./index-78ac7d74.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpLineChart-468b3ed7.js

@@ -1,5 +0,0 @@
-import { p as m } from "./index-78ac7d74.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpLink-9f599e06.js

@@ -1,5 +0,0 @@
-import { B as m } from "./index-78ac7d74.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpLinkVersion-9a5026a6.js

@@ -1,5 +0,0 @@
-import { C as m } from "./index-78ac7d74.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpModal-8208c45a.js

@@ -1,5 +0,0 @@
-import { x as m } from "./index-78ac7d74.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpNothing-2c04e40e.js

@@ -1,10 +0,0 @@
-import { openBlock as e, createElementBlock as o } from "vue";
-import { a as t } from "./index-78ac7d74.js";
-const n = {};
-function r(c, a) {
-  return e(), o("div", null, " no data ");
-}
-const s = /* @__PURE__ */ t(n, [["render", r]]);
-export {
-  s as default
-};

package/dist/EpPieChart-0b7f0752.js

@@ -1,5 +0,0 @@
-import { q as m } from "./index-78ac7d74.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpQuestion-f5c0082f.js

@@ -1,5 +0,0 @@
-import { y as m } from "./index-78ac7d74.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpQuote-c51e2778.js

@@ -1,5 +0,0 @@
-import { K as m } from "./index-78ac7d74.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpRadio-edd52b6b.js

@@ -1,5 +0,0 @@
-import { v as m } from "./index-78ac7d74.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpReading-19d5e14b.js

@@ -1,5 +0,0 @@
-import { b as m } from "./index-78ac7d74.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpResource-d05a5a4a.js

@@ -1,5 +0,0 @@
-import { s as m } from "./index-78ac7d74.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpScope-e4c2d014.js

@@ -1,5 +0,0 @@
-import { t as a } from "./index-78ac7d74.js";
-import "vue";
-export {
-  a as default
-};

package/dist/EpSection-97392b3b.js

@@ -1,5 +0,0 @@
-import { k as m } from "./index-78ac7d74.js";
-import "vue";
-export {
-  m 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-3c6dce6e.js

@@ -1,5 +0,0 @@
-import { D as m } from "./index-78ac7d74.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpSpinner-d47f52b4.js

@@ -1,5 +0,0 @@
-import { l as m } from "./index-78ac7d74.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpSvg-c08f08c7.js

@@ -1,5 +0,0 @@
-import { E as m } from "./index-78ac7d74.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpTable-15f79011.js

@@ -1,5 +0,0 @@
-import { m as a } from "./index-78ac7d74.js";
-import "vue";
-export {
-  a as default
-};

package/dist/EpTerm-892a5db3.js

@@ -1,5 +0,0 @@
-import { _ as m } from "./index-78ac7d74.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpText-466d34a5.js

@@ -1,5 +0,0 @@
-import { n as m } from "./index-78ac7d74.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpTimeLine-7c0f2078.js

@@ -1,5 +0,0 @@
-import { F as m } from "./index-78ac7d74.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpVideo-ddedb1ac.js

@@ -1,5 +0,0 @@
-import { G as m } from "./index-78ac7d74.js";
-import "vue";
-export {
-  m as default
-};

package/dist/EpVideoPanopto-2d7bdf5f.js

@@ -1,5 +0,0 @@
-import { H as m } from "./index-78ac7d74.js";
-import "vue";
-export {
-  m as default
-};