ep-lib-ts 0.1.32 → 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/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
-};