ep-lib-ts 1.0.36 → 1.0.37

package/dist/types/Aframe.d.ts

@@ -0,0 +1 @@
+declare module "aframe";

package/dist/types/Answer.d.ts

@@ -1,6 +1,5 @@
 import { TypeAlert } from './Alert';
 import { MediaVariants } from './Medias';
-
 interface ContentComponent {
     type?: string;
     data: {

package/dist/types/Hover.d.ts

@@ -0,0 +1,3 @@
+export type Animation = "" | "scale" | "translateY" | "translateX";
+export type Size = "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl";
+export type Color = "" | "white" | "black" | "primary" | "secondary" | "accent" | "error" | "warning" | "success" | "info" | "question" | "tip" | "primarydark" | "secondarydark" | "accentdark" | "errordark" | "warningdark" | "successdark" | "infodark" | "questiondark" | "tipdark" | "primarylight" | "secondarylight" | "accentlight" | "errorlight" | "warninglight" | "successlight" | "infolight" | "questionlight" | "tiplight";

package/dist/types/StackedList.d.ts

@@ -0,0 +1,63 @@
+type Color = "primary" | "secondary" | "accent" | "error" | "warning" | "success" | "info" | "question" | "tip";
+type Variant = "circle" | "square" | "rounded";
+type Size = "small" | "middle" | "big";
+type ButtonType = "base" | "primary" | "secondary" | "accent" | "error" | "warning" | "success" | "info";
+interface Avatar {
+    src: string;
+    alt: string;
+}
+interface Button {
+    href: string;
+    label: string;
+    disabled?: boolean;
+}
+interface CheckBox {
+    id?: string;
+    label?: string;
+    modelValue?: string | string[] | boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    value?: string;
+}
+interface Icon {
+    size?: string | number;
+    viewBox?: string;
+    iconPath: string;
+    extraClass?: string;
+}
+export interface ListItem {
+    uid?: string;
+    avatar?: Avatar;
+    title: string;
+    description: string;
+    button?: Button;
+    checkbox?: CheckBox;
+}
+export interface ItemStyle {
+    avatar?: {
+        color?: Color;
+        size?: Size;
+        variant?: Variant;
+        name?: string;
+    };
+    cropped?: boolean;
+    button?: {
+        content: string;
+        type?: ButtonType;
+    };
+    checkbox?: boolean;
+    icon?: Icon;
+}
+export declare const roundedType: {
+    none: string;
+    small: string;
+    middle: string;
+    big: string;
+};
+type RoundedStyle = keyof typeof roundedType;
+export interface CustomStyle {
+    border?: boolean;
+    rounded?: RoundedStyle;
+    restricted?: boolean;
+}
+export {};

package/dist/types/Three.d.ts

@@ -0,0 +1 @@
+declare module "three";

package/dist/types/image360.d.ts

@@ -0,0 +1,16 @@
+export interface Scene {
+    id: number;
+    skyImage: string;
+    pins: Pin[];
+}
+export interface Pin {
+    id: number;
+    x: number;
+    y: number;
+    title: string;
+    description: string;
+    type: "descriptive" | "action";
+    color: string;
+    event: "onClick" | "onHover";
+    scene: number | null;
+}

package/dist/types/video360.d.ts

@@ -0,0 +1,16 @@
+export interface Scene {
+    id: number;
+    skyVideo: string;
+    pins: Pin[];
+}
+export interface Pin {
+    id: number;
+    x: number;
+    y: number;
+    title: string;
+    description: string;
+    type: "descriptive" | "action";
+    color: string;
+    event: "onClick" | "onHover";
+    scene: number | null;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ep-lib-ts",
   "private": false,
-  "version": "1.0.36",
+  "version": "1.0.37",
   "files": [
     "dist",
     "src/components/"
@@ -26,38 +26,44 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@mdi/js": "^7.4.47",
-    "@vueuse/core": "^10.9.0",
-    "@wdns/vue-code-block": "^2.3.3",
-    "apexcharts": "^3.53.0",
-    "katex": "^0.16.11",
-    "markdown-it": "^14.1.0",
-    "postcss-cli": "^11.0.0",
-    "vee-validate": "^4.13.2",
-    "vue": "^3.2.45",
-    "vue-router": "^4.4.5",
-    "vue3-apexcharts": "^1.6.0"
+    "@lottiefiles/dotlottie-vue": "0.5.6",
+    "@mdi/js": "7.4.47",
+    "@types/three": "0.173.0",
+    "@vueuse/core": "12.7.0",
+    "@wdns/vue-code-block": "2.3.5",
+    "aframe": "1.6.0",
+    "apexcharts": "4.4.0",
+    "katex": "0.16.21",
+    "markdown-it": "14.1.0",
+    "postcss-cli": "11.0.0",
+    "three": "0.173.0",
+    "vee-validate": "4.15.0",
+    "vue": "3.5.13",
+    "vue-router": "4.5.0",
+    "vue3-apexcharts": "1.8.0"
   },
   "devDependencies": {
-    "@tailwindcss/forms": "^0.5.9",
-    "@types/katex": "^0.16.7",
-    "@types/markdown-it": "^14.1.2",
-    "@types/node": "^20.12.7",
-    "@vitejs/plugin-vue": "^5.1.3",
-    "autoprefixer": "^10.4.20",
-    "path": "^0.12.7",
-    "postcss": "^8.4.45",
-    "tailwindcss": "^3.4.11",
-    "typescript": "^5.6.2",
-    "vite": "^5.4.5",
-    "vite-plugin-dts": "^3.9.0",
-    "vue-tsc": "^2.2.0"
+    "@tailwindcss/forms": "0.5.10",
+    "@tailwindcss/postcss": "^4.0.7",
+    "@types/katex": "0.16.7",
+    "@types/markdown-it": "14.1.2",
+    "@types/node": "22.13.4",
+    "@vitejs/plugin-vue": "5.2.1",
+    "autoprefixer": "10.4.20",
+    "path": "0.12.7",
+    "postcss": "8.5.2",
+    "tailwindcss": "4.0.7",
+    "typescript": "5.7.3",
+    "vite": "6.1.0",
+    "vite-plugin-dts": "4.5.0",
+    "vue-tsc": "^2.2.2"
   },
   "peerDependencies": {
-    "vue": "^3.2.45"
+    "vue": "3.5.13"
   },
   "engines": {
     "node": "20.x.x"
   },
-  "license": "MIT"
+  "license": "MIT",
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

package/src/components/basics/EpHover.vue

@@ -1,56 +1,60 @@
 <script setup lang="ts">
     import { toRefs, computed, ref } from "vue";
     import useColors from '../../composables/useColors'
+    import { useRenderText } from '../../composables/useRenderText';
 
-    type Animation=""|"scale"
-    type Color = ""|"white"|"black"|"primary"|"secondary"|"accent"|"error"|"warning"|"success"|"info"|"question"|"tip"
-    |"primarydark"|"secondarydark"|"accentdark"|"errordark"|"warningdark"|"successdark"|"infodark"|"questiondark"|"tipdark"
-    |"primarylight"|"secondarylight"|"accentlight"|"errorlight"|"warninglight"|"successlight"|"infolight"|"questionlight"|"tiplight";
+    import { Color, Animation, Size } from "../../types/Hover";
 
     interface Props {
-        bg_color?: Color;
-        text_color?:Color;
+        bgColor?: string;
+        textColor?:string;
         text?: string;
-        animation?:Animation
+        animation?:Animation;
+        seeThrough?: boolean;
+        textSize?: Size;
     }
 
     const props = withDefaults(defineProps<Props>(), {
-        bg_color: "black",
-        text_color:"white",
+        bgColor: "beige",
+        textColor:"black",
         text: "",
-        animation:""
+        animation:"translateX"
     });
 
 
-    const bgcolor  = computed(()=>{  
-        if(props.bg_color ){
-            return `${useColors('bg', props.bg_color)}`
-        }   
-    })
+    const hoverstyle  = computed(()=>{   
+        let css = "";
 
-    const textcolor  = computed(()=>{      
-        if(props.text_color ){   
-            return `${useColors('text', props.text_color)}`
+        if (props.animation=="scale")
+            css = `group-hover:scale-105` 
+        else if (props.animation == "translateY") {
+            css = `translate-y-96 group-hover:translate-y-0`
         }
+        else if (props.animation == "translateX") {
+            css = `translate-x-96 group-hover:translate-x-0`
+        }
+
+        let opacity = (props.seeThrough)? "group-hover:opacity-90" : "group-hover:opacity-100";
+        let textSize = (props.textSize)? `text-${props.textSize}` : "text-md";
+
+        return css + ' ' + opacity + ' ' + textSize;
     })
 
-    const hoverstyle  = computed(()=>{   
-        if (props.animation=="scale")
-            return `hover:scale-110 hover:opacity-100 `      
-        else
-            return `hover:opacity-100`
+    const styleObject = computed(() => {
+        return {
+            backgroundColor: props.bgColor,
+            color: props.textColor
+        }
     })
 
 
 </script>
 
 <template>
-    <div class="relative max-w-xs overflow-hidden bg-cover bg-no-repeat">          
+    <div class="relative group overflow-hidden bg-cover bg-no-repeat">          
         <slot ></slot>
-        <div :class="`absolute  bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden ${bgcolor} 
-            font-bold flex justify-center items-center bg-fixed opacity-0 transition duration-300 ease-in-out 
-            text-4xl ${hoverstyle} ${textcolor}`">
-            {{ props.text }}
+        <div :style="styleObject" :class="`rounded-t-md absolute bottom-0 left-0 right-0 top-0 max-h-full w-full p-10 dark:text-white box-border whitespace-normal overflow-x-auto overflow-y-auto
+            flex flex-col opacity-0 transition duration-1000 ease-in-out ${hoverstyle}`" v-html="useRenderText(text)">
         </div>    
     </div> 
 </template>

package/src/components/basics/EpHoverCard.vue

@@ -0,0 +1,123 @@
+<script lang="ts" setup>
+import { computed, toRefs } from 'vue';
+import EpHover from './EpHover.vue';
+import EpIcon from './EpIcon.vue';
+import useColors from '../../composables/useColors'
+//types with capital letter, object styles in lowercase
+import { type Density, density_style } from "../../types/Card";
+
+import { Color, Animation, Size } from "../../types/Hover";
+
+interface Props {
+    title?: string | null;
+    subtitle?: string | null;
+    outlined?: boolean;
+    flat?: boolean;
+    icon?: string | null;
+    color?: string | null;
+    src?: string | null;
+    maxWidth?:string;
+    density?:Density;
+
+    hoverContent: string;
+    hoverBg?: string;
+    hoverAnimation?: Animation;
+    seeThrough?: boolean;
+    textSize?: Size;
+    hoverColor?: string;
+}
+
+
+
+const props = withDefaults(defineProps<Props>(), {
+    title: null,
+    subtitle: null,
+    outlined: false,
+    flat: false,
+    icon: null,
+    color: null,
+    src:null,
+    density:"default",
+    maxWidth:"max-w-4xl",
+
+    hoverBg: "",
+    hoverAnimation: "translateY"
+})
+
+//styles card 
+const shadowCard = computed(() => {
+    return !props.flat ? 'shadow-lg' : ''
+})
+
+const borderColor = computed(() => {
+    if (props.outlined && props.color) {
+        return `border solid ${useColors('border', props.color)}`
+    }
+    if (props.outlined) {
+        return 'border solid border-primary dark:border-primary'
+    }
+    return 'dark:border dark:solid dark:border-primary'
+})
+
+const bgColor = computed(() => {
+    if(props.color && !props.outlined){
+        return `${useColors('bg', props.color)}`
+    }
+    return `bg-white text-black`
+})
+
+const subTitleText = computed(()=>{
+    if(props.color && !props.outlined){
+        return 'text-white'
+    }
+    return 'text-gray-600'
+})
+
+
+const density_class = computed(()=> {
+     return density_style[props.density]
+})
+
+const stylesCard = computed(()=> {
+    return `
+    ${shadowCard.value} 
+    ${borderColor.value} 
+    ${bgColor.value} 
+    ${props.maxWidth} 
+    rounded-md 
+    dark:bg-dark
+    dark:text-white
+    my-4 `
+})
+
+
+const { title, subtitle, icon, src, hoverContent } = toRefs(props)
+
+
+</script>
+
+<template>
+
+    <div :class="`${stylesCard} mx-auto`">
+        <EpHover :textColor="hoverColor" :textSize="textSize" :seeThrough="seeThrough" :bgColor="hoverBg" :animation="hoverAnimation" :text="hoverContent" v-if="src && hoverContent">
+            <img :src="src" class="w-full rounded-t-md" alt="header card">
+        </EpHover>
+        <div :class="density_class">
+            <div v-if="title || subtitle" class="mb-2 flex items-center justify-between dark:text-white">
+                <div>
+                    <h3 class="text-2xl dark:text-white font-bold">{{ title }}</h3>
+                    <h4 :class="`text-xs dark:text-white ${subTitleText}`">{{ subtitle }}</h4>
+                </div>
+                <div v-if="icon">
+                    <EpIcon :icon-path="icon"></EpIcon>
+                </div>
+            </div> 
+            <slot name="card-header"></slot>
+            <div class="dark:text-white">
+                <slot></slot>
+            </div>
+            <div class="dark:text-white max-w-4xl"><slot name="card-actions"></slot></div>
+        </div>
+    </div>
+
+</template>

package/src/components/basics/EpImg.vue

@@ -108,7 +108,7 @@ const { src, alt, title, caption, thumbnail, bib, sizeThumbnail } =
           <p class="text-gray-500 dark:text-white text-sm mt-4">
             {{ caption }}
           </p>
-          <div class="text-right">
+          <div class="text-right" v-if="renderBib">
             <EpBtn @click="toggleBib" size="small" type="primary">{{
               labelRef
             }}</EpBtn>

package/src/components/basics/EpListitem.vue

@@ -1,70 +1,52 @@
-
 <script setup lang="ts">
+import { computed, SetupContext, useSlots } from "vue";
 
-import { computed, useSlots } from "vue";
-
-type Type = "default" | "nested"
-type Disabled="false"|"true"
+type Type = "default" | "nested";
+type Disabled = "false" | "true";
 
 interface Props {
-    type?: Type;
-    disabled?:Disabled;
+  type?: Type;
+  disabled?: Disabled;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-    type: 'default',
-    disabled:'false'
-})
-
-const slots = useSlots()
-console.log(slots)
-const hasLeftContent = computed(()=>{
-    return slots.leftContent?true:false
-})
-
-const hasRigthContent = computed(()=>{
-    return slots.rightContent?true:false
-})
-const isNested = computed(()=>{
-    if (props.type=="nested")
-        return "px-10"
-    else
-        return ""   
-})
-const isDisabled = computed(()=>{
-    if (props.disabled=="true")
-        return "opacity-75 text-slate-500 "
-    else
-        return "hover:bg-gray-200 active:bg-gray-300"   
-})
+  type: "default",
+  disabled: "false",
+});
+
+const slots: SetupContext["slots"] = useSlots();
+console.log(slots);
+const hasLeftContent = computed(() => {
+  return slots.leftContent ? true : false;
+});
+
+const hasRigthContent = computed(() => {
+  return slots.rightContent ? true : false;
+});
+const isNested = computed(() => {
+  if (props.type == "nested") return "px-10";
+  else return "";
+});
+const isDisabled = computed(() => {
+  if (props.disabled == "true") return "opacity-75 text-slate-500 ";
+  else return "hover:bg-gray-200 active:bg-gray-300";
+});
 </script>
 
 <template>
-    <li :class="`flex flex-row flex-nowrap justify-between font-medium items-center py-4  ${isNested} ${isDisabled}`">     
-          <div class="flex items-center">
-                <div v-if="hasLeftContent" class="mr-2 min-w-fit px-2">
-                    <slot name="leftContent"></slot>
-                </div>
-                <div>
-                    <slot></slot>
-                </div> 
-            </div>
-            <div v-if="hasRigthContent"  class="px-2 ">
-                <slot name="rightContent"></slot>
-            </div>   
-    </li>
-
+  <li
+    :class="`flex flex-row flex-nowrap justify-between font-medium items-center py-4  ${isNested} ${isDisabled}`"
+  >
+    <div class="flex items-center">
+      <div v-if="hasLeftContent" class="mr-2 min-w-fit px-2">
+        <slot name="leftContent"></slot>
+      </div>
+      <div>
+        <slot></slot>
+      </div>
+    </div>
+    <div v-if="hasRigthContent" class="px-2">
+      <slot name="rightContent"></slot>
+    </div>
+  </li>
 </template>
-
-
-
-
-
-
-
-
-
-
-
-
-

package/src/components/basics/EpStackedList.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import EpAvatar from './EpAvatar.vue';
+import { useRenderText } from '../../composables/useRenderText';
+import EpBtn from './EpBtn.vue';
+import EpCheckbox from '../forms/EpCheckbox.vue';
+import EpIcon from './EpIcon.vue'; 
+
+// Importing the necessary interfaces for the code
+import { type ListItem, type ItemStyle, roundedType, type CustomStyle } from '../../types/StackedList';
+
+// Managing the props
+interface Props {
+    elements: ListItem[];
+    itemStyle?: ItemStyle;
+    customStyle?: CustomStyle;
+}
+
+const props = withDefaults(defineProps<Props>(),{
+    elements: () => [],
+    itemStyle: () => { return {
+        cropped: false,
+        checkbox: false,
+    } },
+    customStyle: () => {
+        return {
+            border: true,
+            rounded: "small",
+            restricted: false
+        }
+    }
+});
+
+
+// The style of the wrapper div 
+const className = computed(() => {
+
+    const border = (props.customStyle.border === false)? 'border-0' : 'border';
+    const rounded = roundedType[(props.customStyle.rounded)? props.customStyle.rounded : 'small'];
+    const padding = (props.customStyle.restricted)? 'p-0' : 'p-4';
+
+    return `${border} ${rounded} ${padding}`;
+})
+
+
+// The style of the list elements
+const elementSpacing = computed(() => (props.customStyle.restricted)? 'p-6' : 'mx-6 py-6');
+
+const elementGrid = computed(() => (props.itemStyle.button || props.itemStyle.checkbox || props.itemStyle.icon)? 'grid-cols-11' : 'grid-cols-7');
+
+</script>
+
+<template>
+
+    <div :class="`${className} border-gray-200 flex flex-col dark:border-slate-700 dark:bg-slate-900 lg:mx-28`">
+        <li v-for="elem in elements" :key="elements.indexOf(elem)" :class="`${(elements.indexOf(elem) !== 0)? 'border-t' : ''} list-none ${elementSpacing} grid ${elementGrid} justify-items-center items-center border-gray-200 dark:border-slate-700`">
+            <EpAvatar v-if="elem.avatar" :src="elem.avatar?.src" :alt="elem.avatar?.alt" v-bind="itemStyle.avatar" class="col-span-2" />
+            <div class="col-span-5 justify-self-start">
+                <h3 class="font-semibold">{{ elem.title }}</h3>
+                <div :class="`${(itemStyle.cropped)? 'line-clamp-3': ''}`" v-html="useRenderText(elem.description)"></div>
+            </div>
+            <div v-if="itemStyle.button || itemStyle.checkbox || itemStyle.icon" class="flex gap-2 items-center col-span-4 justify-self-auto">
+
+                <!--update component type-->
+                <EpBtn v-if="itemStyle.button" :type="`${(itemStyle.button.type)? itemStyle.button.type : 'base'}`" v-bind="elem.button" :rounded="true">{{ itemStyle.button.content }}</EpBtn>
+                <EpCheckbox v-if="itemStyle.checkbox" v-bind="elem.checkbox" />
+                <EpIcon v-if="itemStyle.icon" v-bind="itemStyle.icon" />
+            </div>
+        </li>
+    </div>
+
+</template>
+
+