ep-lib-ts 1.0.55 → 1.0.57

package/dist/router.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import('vue-router').Router;
-export default _default;

package/dist/style.css

@@ -1 +0,0 @@
-.content[data-v-3a321611]{max-height:0;overflow:hidden}.modal-mask{position:fixed;z-index:6998;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;transition:opacity .3s ease}.modal-container{margin:auto;max-height:95%;transition:all .3s ease;z-index:7000}.modal-header h3{margin-top:0;color:#42b983}.modal-body{margin:20px 0}.modal-default-button{float:right}.modal-enter-from,.modal-leave-to{opacity:0}.modal-enter-from .modal-container,.modal-leave-to .modal-container{transform:scale(1.1)}.custom_index{z-index:9999;position:absolute;right:12rem}pre{white-space:break-spaces}.tree-wrapper[data-v-633f0b83]{overflow:auto;border:1px solid #ddd}.tree-container[data-v-633f0b83]{width:100%;overflow-x:auto}@keyframes fade-d75b43b7{0%{opacity:0}to{opacity:1}}@keyframes scale-d75b43b7{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}@keyframes slideY-d75b43b7{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.fade[data-v-d75b43b7]{animation:fade-d75b43b7 1s}.scale[data-v-d75b43b7]{animation:scale-d75b43b7 1s}.slideY[data-v-d75b43b7]{animation:slideY-d75b43b7 1s}.shape{height:var(--57a4c52c);width:var(--32b5e5ba)}.v-enter-active[data-v-7e484601],.v-leave-active[data-v-7e484601]{transition:opacity .5s ease}.v-enter-from[data-v-7e484601],.v-leave-to[data-v-7e484601]{opacity:0}.katex[data-v-a5d595cd]{font-size:1.6em}.content[data-v-1ad88e28]{max-height:0;overflow:hidden}.list-enter-active,.list-leave-active{transition:all .5s ease}.list-enter-from,.list-leave-to{opacity:0;transform:translate(30px)}.arrow-light-top:before{content:" ";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:rgba(0,0,0,.2) transparent transparent transparent}.arrow-dark-top:before{content:" ";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:black transparent transparent transparent}.arrow-light-bottom:before{content:"";position:absolute;display:inline-block;left:50%;bottom:100%;border-right:7px solid transparent;border-bottom:7px solid #eee;border-left:7px solid transparent;border-bottom-color:#0003}.arrow-dark-bottom:before{content:"";position:absolute;display:inline-block;left:50%;bottom:100%;border-right:7px solid transparent;border-bottom:7px solid black;border-left:7px solid transparent;border-bottom-color:black transparent transparent transparent}.arrow-light-left:before{position:absolute;display:inline-block;left:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-left:5px solid #eee;border-bottom:5px solid transparent;border-left-color:#0003}.arrow-dark-left:before{position:absolute;display:inline-block;left:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-left:5px solid black;border-bottom:5px solid transparent;border-left-color:black transparent transparent transparent}.arrow-light-right:before{position:absolute;display:inline-block;right:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-right:5px solid #eee;border-bottom:5px solid transparent;border-right-color:#0003}.arrow-dark-right:before{position:absolute;display:inline-block;right:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-right:5px solid black;border-bottom:5px solid transparent;border-right-color:black transparent transparent transparent}

package/src/components/basics/EpAvatar.vue

@@ -1,72 +0,0 @@
-
-<script setup lang="ts">
-
-    import { toRefs, computed } from "vue";
-    import { type TypeAvatar, typeAvatar } from   "../../types/Avatar";  //"../../types/Avatar";
-    
-    type Color = "primary"|"secondary"|"accent"|"error"|"warning"|"success"|"info"|"question"|"tip";
-    type Variant = "circle"|"square"|"rounded";
-    type Size = "small"|"middle"|"big";
- 
-
-    interface Props {  
-        src?:string;
-        alt?:string;     
-        color?:Color;
-        size?:Size;
-        variant?:Variant;  
-        name?:string
-    }
-
-    // define parameter and default valule
-    const props = withDefaults(defineProps<Props>(), {      
-        src:"",
-        alt:"",
-        color:"primary",
-        size:"small",
-        variant:"circle" ,
-        name:""
-    }) 
-    
-
-    const style = computed(()=>{ 
-        return props.variant
-    })   
-
-    const size = computed(()=>{ 
-        return props.size
-    })
-
-    const final_style = computed(()=>{      
-        return `${typeAvatar[style.value]?.[size.value]}`
-    })
-
-
-    const bgcolor  = computed(()=>{   
-        return " bg-"+ props.color
-    })
-
-    const final_name  = computed(()=>{   
-        if (props.name.length>2){
-          return  props.name.slice(0,2)
-        }
-        else{
-          return props.name
-        }        
-    })   
-    
-
-</script>
-<template>  
-    <div >   
-      <div  v-if="props.src != ''">
-           <img :src=props.src :alt=props.alt  :class="`${final_style} `" >    
-      </div>
-      <div v-else-if="props.src == ''">
-        <div  :class="`${final_style}  ${bgcolor}  justify-center font-bold text-white flex items-center` " >  
-          {{final_name}}          
-        </div>   
-     </div>
-    </div>
-</template>
-

package/src/components/basics/EpBadge.vue

@@ -1,78 +0,0 @@
-<script setup lang="ts">
-import { toRefs, computed, ref } from "vue";
-import EpIcon from "./EpIcon.vue";
-import useColors from "../../composables/useColors";
-
-interface Props {
-  color?: string;
-  outlined?: boolean;
-  square?: boolean;
-  iconPath?: string | null;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  color: "primary",
-  square: false,
-  iconPath: null,
-});
-
-const styleChip = computed(() => {
-  return props.outlined
-    ? useColors("border", props.color)
-    : useColors("bg", props.color);
-});
-
-const typeChip = computed(() => {
-  return props.square ? "" : "rounded-full";
-});
-
-const { iconPath } = toRefs(props);
-
-/*
-//image gallery
-"labelRef": "Reference",
-"labelClose": "Close",
-"labelRefLib": "Reference Library",
-
-
-//reading
-"labelCard": "Reading",
-"labelRead": "Read",
-"labelIn": "In",
-"labelIntentions": "Important topics",
-"labelDetails":"details",
-"labelClose":"Close",
-
-
-//video
-"labelIntentions": "Important topics"
-
-
-//quiz
-"labelNoAnswer":"Please choose an answer.",
-"labelAnswerBtn" : "Submit",
-"labelTryAgainBtn": "Try Again",
-
-
-Compulsory
-Optional
-*/
-</script>
-
-<template>
-  <!-- <span :class="`py-2 px-3 ${styleChip} ${typeChip} mx-2 text-sm`">
-    <EpIcon v-if="icon" :iconPath="icon" size="20" extraClass="mr-2"></EpIcon>
-    <slot></slot>
-  </span> -->
-  <!--
-  <span class="text-white badge absolute -top-1 -right-1 flex h-3 w-3">
-    <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
-    <span class="relative inline-flex rounded-full h-3 w-3 bg-red-500">
-    
-      <EpIcon v-if="iconPath" :iconPath="iconPath" size="32" extra-class="p-1"></EpIcon>
-    </span>
-  </span>-->
-  <div class="p-12 bg-warning-light w-[50%] mx-auto border-2 border-warning dark:bg-warning-dark">
-        <p class="text-center text-error font-bold uppercase">In progress</p>
-   </div>
-</template>

package/src/components/basics/EpBtn.vue

@@ -1,88 +0,0 @@
-<script setup lang="ts">
-import { toRefs, computed } from "vue";
-import EpIcon from './EpIcon.vue';
-import useColors from "../../composables/useColors";
-///types with Capital letters... object with styles same name in lowercase
-import { type ButtonBgVariant, type ButtonSize, bgVariants, sizeVariants } from "../../types/Btn";
-
-//props of components
-interface Props {
-  type?:ButtonBgVariant;
-  disabled?: boolean;
-  block?: boolean;
-  rounded?: boolean;
-  size?:ButtonSize;
-  appendIcon?: string | null;
-  prependIcon?: string | null;
-  outlined?:boolean;
-  text?:boolean;
-  extraClass?: string | null;
-  href?:string;
-}
-//define only defaults values
-const props = withDefaults(defineProps<Props>(), {
-  type:'base',
-  rounded: false,
-  size:'medium',
-  appendIcon: null,
-  prependIcon: null,
-  extraClass:null,
-});
-
-
-
-const isOutlined = computed(()=>{
-  if(props.outlined){
-    return 'outlined'
-  }
-  return 'default'
-})
-
-///add bg or text 
-const styleBtn = computed(()=>{
-    if(props.text){
-      return `${bgVariants[props.type].text}`
-    }
-    return `${bgVariants[props.type]?.[isOutlined.value]}`
-})
-
-const styles = computed(() => {
-	return `
-  transition
-  font-medium
-  ${styleBtn.value}
-  ${sizeVariants[props.size]} 
-  ${props.disabled ? "opacity-50" : ""} 
-  ${props.block ? "w-full block" : ""} 
-  ${props.rounded ? "rounded-md":""}
-  ${props.extraClass ? props.extraClass:"transition"}`;
-});
-
-const sizeIcon = computed(()=> {
-   if(props.size === "large"){
-    return "30"
-   }
-   if(props.size === "medium"){
-    return "20"
-   }
-   if(props.size === "small"){
-    return "15"
-   }
-})
-
-//destructuring props to quick use in template
-const { disabled, prependIcon, appendIcon } = toRefs(props);
-</script>
-
-<template>
-  <button :class="styles" :disabled="disabled" v-if="!href">
-    <EpIcon v-if="prependIcon" :iconPath="prependIcon" :size="sizeIcon" extraClass="mr-2"></EpIcon>
-    <slot></slot> 
-    <EpIcon v-if="appendIcon" :iconPath="appendIcon" :size="sizeIcon" extraClass="ml-2"></EpIcon>
-  </button>
-  <a :class="`${styles} flex justify-center items-center`" :disabled="disabled" :href="href" target="_blank" v-else>
-    <EpIcon v-if="prependIcon" :iconPath="prependIcon" :size="sizeIcon" extraClass="mr-2"></EpIcon>
-    <slot></slot> 
-    <EpIcon v-if="appendIcon" :iconPath="appendIcon" :size="sizeIcon" extraClass="ml-2"></EpIcon>
-  </a>
-</template>

package/src/components/basics/EpCard.vue

@@ -1,125 +0,0 @@
-<script setup lang="ts">
-import { toRefs, computed, useSlots, type Slots } from "vue";
-import EpIcon from './EpIcon.vue';
-import EpSvg from '../medias/EpSvg.vue'
-import useColors from '../../composables/useColors'
-//types with capital letter, object styles in lowercase
-import { type Density, density_style } from "../../types/Card";
-
-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;
-    svg?:string;
-    isLink?:boolean;
-}
-
-
-
-const props = withDefaults(defineProps<Props>(), {
-    title: null,
-    subtitle: null,
-    outlined: false,
-    flat: false,
-    icon: null,
-    color: null,
-    src:null,
-    density:"default",
-    maxWidth:"max-w-full",
-    isLink:false
-})
-
-//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-white'
-    }
-    return 'dark:border dark:solid dark:border-white'
-})
-
-const isLinkStyle = computed(()=> {
-    if(props.isLink){
-        return 'dark:hover:border-white hover:border-primary hover:border hover:border rounded-md cursor-pointer'
-    }
-    return ''
-})
-
-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
-    `
-})
-
-
-const { title, subtitle, icon, src, svg } = toRefs(props)
-
-const slots: Slots = useSlots();
-
-const hasContent = computed(() => {
-  return !!slots.default || !!props.title || !!props.subtitle || !!props.icon;
-});
-
-</script>
-<template>
-    <div :class="`${stylesCard} ${isLinkStyle}`">
-        <img v-if="src" :src="src" :class="`w-full ${hasContent ? 'rounded-t-md':'rounded-md'}`" alt="header card">
-        <div v-if="!src && svg" class="w-full rounded-t-md dark:text-white">
-            <EpSvg :content="svg"/>
-        </div>
-        
-        <div :class="density_class" v-if="hasContent">
-            <div v-if="title || subtitle || icon" 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" extra-class="dark:text-white"></EpIcon>
-                    </div>
-                </div> 
-                <slot name="card-header"></slot>
-                <div class="dark:text-white">
-                    <slot></slot>
-                </div>
-                <div class="dark:text-white"><slot name="card-actions"></slot></div>
-        </div>
-    </div>
-</template>

package/src/components/basics/EpChip.vue

@@ -1,80 +0,0 @@
-<script setup lang="ts">
-import { toRefs, computed } from 'vue';
-import EpIcon from './EpIcon.vue';
-//import useColors from '../../composables/useColors'
-import { type ChipBgVariant, type ChipSize, chipVariants, sizeChipVariants } from '../../types/Chip';
-
-interface Props {
-  type?:ChipBgVariant;
-  size?:ChipSize;
-  outlined?: boolean;
-  appendIcon?: string | null;
-  prependIcon?: string | null;
-  square?: boolean;
-  dark?:boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  type:'base',
-  size:"medium",
-  square: false,
-  appendIcon: null,
-  prependIcon: null,
-  dark:false
-})
-
-const isOutlined = computed(()=>{
-  if(props.outlined){
-    return 'outlined'
-  }
-  return 'default'
-})
-
-
-const typeChip = computed(()=> {
-  return props.square ? '':'rounded-full'
-})
-
-const colorText = computed(()=>{
-  if(props.outlined){
-    return ''
-  }
-  if(props.dark){
-    return 'text-white'
-  }
-  return 'text-black'
-})
-
-const stylesChip = computed(()=>{
-  return `
-     ${sizeChipVariants[props.size]}
-     ${typeChip.value}
-     ${chipVariants[props.type]?.[isOutlined.value]} 
-  `
-})
-
-const sizeIcon = computed(()=> {
-   if(props.size === "large"){
-    return "30"
-   }
-   if(props.size === "medium"){
-    return "20"
-   }
-   if(props.size === "small"){
-    return "15"
-   }
-})
-
-
-
-const {appendIcon} = toRefs(props)
-
-</script>
-
-<template>
-  <span :class="`${stylesChip} mx-2 cursor-default`">
-    <EpIcon v-if="prependIcon" :iconPath="prependIcon" :size="sizeIcon" extraClass="mr-2"></EpIcon>
-    <slot></slot> 
-    <EpIcon v-if="appendIcon" :iconPath="appendIcon" :size="sizeIcon" extraClass="ml-2"></EpIcon>
-  </span>
-</template>

package/src/components/basics/EpDivider.vue

@@ -1,40 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import useColors from '../../composables/useColors';
-import type Border from '../../types/Border'
-//possibles class in tailwind 
-
-interface Props {
-    color?: string | null;
-    size?: Border;
-    inset?: boolean;
-    icon?: string | null;
-    margin?:string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    color: null,
-    size: 'border',
-    inset: false,
-    icon: null,
-    margin:'my-2'
-})
-
-const border = computed(() => {
-    if (props.color) {
-        return `${props.size} ${useColors('border', props.color)}`
-    }
-    return `${props.size} border-grey-700`
-})
-
-const styles = computed(() => {
-    return `${border.value} ${props.inset ? 'w-9/12 mx-auto' : 'w-full'} ${props.margin}`
-})
-
-
-</script>
-
-<template>
-    <hr :class="`h-px ${styles}`">
-</template>
-

package/src/components/basics/EpFlex.vue

@@ -1,43 +0,0 @@
-<script setup lang="ts">
-/*
-import { computed } from "vue";
-import useColors from "../../composables/useColors";
-import type Border from "../../types/Border";
-//possibles class in tailwind
-
-interface Props {
-  color?: string | null;
-  size?: Border;
-  inset?: boolean;
-  icon?: string | null;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  color: null,
-  size: "border",
-  inset: false,
-  icon: null,
-});
-
-const border = computed(() => {
-  if (props.color) {
-    return `${props.size} ${useColors("border", props.color)}`;
-  }
-  return `${props.size} border-grey-700`;
-});
-
-const styles = computed(() => {
-  return `${border.value} ${props.inset ? "w-9/12 mx-auto" : "w-full"}`;
-});*/
-</script>
-
-<template>
-  <!-- <hr :class="`h-px ${styles} my-2`"> -->
-  <!-- Option: content-between self-center justify-evenly  place-items-stretch-->
-  <!-- mb-20 flex md:flex-row flex-col ep-flex gap-4 justify-evenly -->
-  <div class="grid grid-cols-2 gap-4">
-      <slot></slot>
-  </div>
-</template>
-
-//TODO component

package/src/components/basics/EpHover.vue

@@ -1,61 +0,0 @@
-<script setup lang="ts">
-    import { toRefs, computed, ref } from "vue";
-    import useColors from '../../composables/useColors'
-    import { useRenderText } from '../../composables/useRenderText';
-
-    import { Animation, TextSize } from "../../types/Hover";
-
-    interface Props {
-        bgColor?: string;
-        textColor?:string;
-        text?: string;
-        animation?:Animation;
-        seeThrough?: boolean;
-        textSize?: TextSize;
-    }
-
-    const props = withDefaults(defineProps<Props>(), {
-        bgColor: "beige",
-        textColor:"black",
-        text: "",
-        animation:"translateX"
-    });
-
-
-    const hoverstyle  = computed(()=>{   
-        let css = "";
-
-        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)? props.textSize : "";
-
-        return css + ' ' + opacity + ' ' + textSize;
-    })
-
-    const styleObject = computed(() => {
-        return {
-            backgroundColor: props.bgColor,
-            color: props.textColor
-        }
-    })
-
-
-</script>
-
-<template>
-    <div class="relative group overflow-hidden bg-cover bg-no-repeat">          
-        <slot ></slot>
-        <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>
-