ep-lib-ts 0.0.8 → 0.0.9

package/dist/index.d.ts

@@ -1,2 +1,38 @@
+import EpText from './components/basics/EpText.vue';
+import EpImg from './components/basics/EpImg.vue';
+import EpCard from './components/basics/EpCard.vue';
+import EpBadge from './components/basics/EpBadge.vue';
+import EpBtn from './components/basics/EpBtn.vue';
+import EpChip from './components/basics/EpChip.vue';
+import EpDivider from './components/basics/EpDivider.vue';
+import EpSection from './components/basics/EpSection.vue';
+import EpSpinner from './components/basics/EpSpinner.vue';
+import EpFlex from './components/basics/EpFlex.vue';
+import EpIcon from './components/basics/EpIcon.vue';
+import EpTable from './components/basics/EpTable.vue';
+import EpBarChart from './components/charts/EpBarChart.vue';
+import EpLineChart from './components/charts/EpLineChart.vue';
+import EpPieChart from './components/charts/EpPieChart.vue';
+import EpEdu from './components/educationals/EpEdu.vue';
+import EpReading from './components/educationals/EpReading.vue';
+import EpScope from './components/educationals/EpScope.vue';
+import EpAccordeon from './components/interactions/EpAccordeon.vue';
+import EpContentSlider from './components/interactions/EpContentSlider.vue';
+import EpModal from './components/interactions/EpModal.vue';
+import EpQuestion from './components/interactions/EpQuestion.vue';
+import EpTabs from './components/interactions/EpTabs.vue';
+import EpAudio from './components/medias/EpAudio.vue';
+import EpCarousel from './components/medias/EpCarousel.vue';
+import EpIframe from './components/medias/EpIframe.vue';
+import EpKatex from './components/medias/EpKatex.vue';
+import EpLink from './components/medias/EpLink.vue';
+import EpSoftware from './components/medias/EpSoftware.vue';
+import EpSvg from './components/medias/EpSvg.vue';
+import EpTerm from './components/medias/EpTerm.vue';
+import EpTimeLine from './components/medias/EpTimeLine.vue';
+import EpVideo from './components/medias/EpVideo.vue';
+import EpVideoPanopto from './components/medias/EpVideoPanopto.vue';
 import EpAlert from './components/signages/EpAlert.vue';
-export { EpAlert };
+import EpHeader from './components/signages/EpHeader.vue';
+import EpQuote from './components/signages/EpQuote.vue';
+export { EpBadge, EpBtn, EpCard, EpChip, EpDivider, EpFlex, EpIcon, EpImg, EpSection, EpSpinner, EpTable, EpText, EpBarChart, EpLineChart, EpPieChart, EpEdu, EpReading, EpScope, EpAccordeon, EpContentSlider, EpModal, EpQuestion, EpTabs, EpAudio, EpCarousel, EpIframe, EpKatex, EpLink, EpSoftware, EpSvg, EpTerm, EpTimeLine, EpVideo, EpVideoPanopto, EpAlert, EpHeader, EpQuote };

package/dist/{ep-lib-ts.css → style.css}

@@ -1 +1 @@
-.modal-mask{position:fixed;z-index:9998;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;transition:opacity .3s ease}.modal-container{margin:auto;transition:all .3s ease;z-index:9999}.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)}.content[data-v-d8f20f72]{max-height:0;overflow:hidden}#scroll-content{min-width:100%}.v-enter-active[data-v-b6f21f1c],.v-leave-active[data-v-b6f21f1c]{transition:opacity .5s ease}.v-enter-from[data-v-b6f21f1c],.v-leave-to[data-v-b6f21f1c]{opacity:0}.katex[data-v-8d1e7f22]{font-size:1.3em}
+.modal-mask{position:fixed;z-index:9998;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;transition:opacity .3s ease}.modal-container{margin:auto;transition:all .3s ease;z-index:9999}.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)}.content[data-v-69793e45]{max-height:0;overflow:hidden}.v-enter-active[data-v-ecd9b088],.v-leave-active[data-v-ecd9b088]{transition:opacity .5s ease}.v-enter-from[data-v-ecd9b088],.v-leave-to[data-v-ecd9b088]{opacity:0}.katex[data-v-24ff8b28]{font-size:1.3em}

package/package.json

@@ -1,29 +1,28 @@
 {
   "name": "ep-lib-ts",
   "private": false,
-  "version": "0.0.8",
-  "type": "module",
+  "version": "0.0.9",
   "files": [
-    "dist"
+    "dist",
+    "src/components/"
   ],
-  "main": "./dist/ep-lib-ts.umd.js",
-  "module": "./dist/ep-lib-ts.es.js",
+  "main": "./dist/ep-lib-ts.umd.cjs",
+  "module": "./dist/ep-lib-ts.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
   "exports": {
     ".": {
-      "import": "./dist/ep-lib-ts.es.js",
-      "require": "./dist/ep-lib-ts.umd.js"
+      "import": "./dist/ep-lib-ts.js",
+      "require": "./dist/ep-lib-ts.umd.cjs"
     },
-    "./dist/ep-lib-ts.css": {
-      "import": "./dist/ep-lib-ts.css",
-      "require": "./dist/ep-lib-ts.css"
+    "./dist/style.css": {
+      "import": "./dist/style.css",
+      "require": "./dist/style.css"
     }
-    
   },
-  "types": "./dist/main.d.ts",
   "scripts": {
     "dev": "vite",
-    "build": "vue-tsc && vite build && --emitDeclarationOnly && mv dist/src dist/types",
-    "types": "vue-tsc ",
+    "build": "vue-tsc && vite build",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -32,25 +31,28 @@
     "apexcharts": "^3.41.1",
     "katex": "^0.16.8",
     "markdown-it": "^13.0.1",
-    "path": "^0.12.7",
-    "rollup-plugin-typescript2": "^0.35.0",
+    "postcss-cli": "^10.1.0",
     "vee-validate": "^4.8.6",
-    "vite-plugin-dts": "^3.5.1",
-    "vue": "^3.2.45",
     "vue-router": "^4.1.6",
-    "vue3-apexcharts": "^1.4.4"
+    "vue3-apexcharts": "^1.4.4",
+    "vue": "^3.2.45"
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.3",
     "@types/katex": "^0.16.2",
     "@types/markdown-it": "^12.2.3",
-    "@types/node": "^20.4.8",
+    "@types/node": "^20.4.9",
     "@vitejs/plugin-vue": "^4.0.0",
     "autoprefixer": "^10.4.14",
-    "postcss": "^8.4.23",
-    "tailwindcss": "^3.3.2",
+    "path": "^0.12.7",
+    "postcss": "^8.4.27",
+    "tailwindcss": "^3.3.3",
     "typescript": "^5.2.0-dev.20230801",
     "vite": "^4.1.0",
-    "vue-tsc": "^1.8.8"
+    "vite-plugin-dts": "^3.5.2",
+    "vue-tsc": "^1.0.24"
+  },
+  "peerDependencies": {
+    "vue": "^3.2.45"
   }
 }

package/src/components/basics/EpBadge.vue

@@ -0,0 +1,48 @@
+<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);
+</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">
+        <p class="text-center text-error font-bold uppercase">In progress</p>
+   </div>
+</template>

package/src/components/basics/EpBtn.vue

@@ -0,0 +1,100 @@
+<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 { ButtonBgVariant, 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;
+  color?:string;
+  extraClass?: string | null;
+  href?:string;
+}
+//define only defaults values
+const props = withDefaults(defineProps<Props>(), {
+  type:'base',
+  rounded: false,
+  size:'medium',
+  appendIcon: null,
+  prependIcon: null,
+  text:false,
+  extraClass:null,
+  color:'text-black'
+});
+
+
+//get styles tailwind
+const colorText = computed(()=>{
+  if(props.outlined){
+    return ''
+  }
+  return props.color
+})
+
+
+const isOutlined = computed(()=>{
+  if(props.outlined){
+    return 'outlined'
+  }
+  return 'default'
+})
+
+///add bg or text 
+const styleBtn = computed(()=>{
+    if(props.text){
+    
+      return `uppercase ${useColors('text', props.type)} hover:${useColors('bg', props.type + 'light')}`
+    }
+    return `${bgVariants[props.type]?.[isOutlined.value]}`
+})
+
+const styles = computed(() => {
+	return `
+  transition
+  ${styleBtn.value}
+  ${sizeVariants[props.size]} 
+  ${colorText.value}
+  ${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} text-center inline-block`" :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

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { toRefs, computed } from "vue";
+import EpIcon from './EpIcon.vue';
+import useColors from '../../composables/useColors'
+//types with capital letter, object styles in lowercase
+import { 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;
+}
+
+
+
+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"
+})
+
+//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-grey-700'
+    }
+    return ''
+})
+
+const bgColor = computed(() => {
+    if(props.color && !props.outlined){
+        return `${useColors('bg', props.color)} text-white`
+    }
+    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} my-4 `
+})
+
+
+const { title, subtitle, icon, src, density } = toRefs(props)
+
+</script>
+<template>
+    <div :class="`${stylesCard} rounded-md`">
+        <img v-if="src" :src="src" class="w-full rounded-t-md" alt="header card">
+        <div :class="density_class">
+            <div v-if="title || subtitle" class="mb-2 flex items-center justify-between">
+                    <div>
+                        <h3 class="text-2xl font-bold">{{ title }}</h3>
+                        <h4 :class="`text-xs ${subTitleText}`">{{ subtitle }}</h4>
+                    </div>
+                    <div v-if="icon">
+                        <EpIcon :icon-path="icon"></EpIcon>
+                    </div>
+                </div> 
+                <slot name="card-header"></slot>
+                <slot></slot>
+                <slot name="card-actions"></slot>
+        </div>
+    </div>
+    
+</template>

package/src/components/basics/EpChip.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { toRefs, computed } from 'vue';
+import EpIcon from './EpIcon.vue';
+//import useColors from '../../composables/useColors'
+import { ChipBgVariant, 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 `
+     ${colorText.value}
+     ${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

@@ -0,0 +1,40 @@
+<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

@@ -0,0 +1,42 @@
+<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>
+

package/src/components/basics/EpIcon.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { toRefs} from 'vue';
+
+interface Props {
+    size?:string | number;
+    viewBox?:string;
+    iconPath:string;
+    extraClass?:string;
+}
+
+const props = withDefaults(defineProps<Props>(),{
+   size:32,
+   viewBox: "0 0 24 24",
+})
+
+const {size, viewBox, iconPath, extraClass} = toRefs(props)
+
+</script>
+
+<template>
+    <svg :width="size" :height="size" :viewBox="viewBox" color="currentColor" fill='currentColor' :class="`inline ${extraClass}`">
+        <path :d="iconPath"></path>
+    </svg>
+</template>
+

package/src/components/basics/EpImg.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+ import {toRefs, ref} from 'vue'
+ import EpModal from '../interactions/EpModal.vue'
+ import EpIcon from '../basics/EpIcon.vue'
+ import { mdiArrowExpandAll } from '@mdi/js';
+
+interface Props{
+    src:string;
+    alt?:string;
+    height?:string | number;
+    width?:string | number;
+    thumbnail?:boolean;
+    caption?:string;
+    bib?:string;
+    title?:string,
+    gallery?:boolean
+    cols?:string|number  //posible type à venir => basis-1/12... basis-11/12 to basis-full
+}
+
+const props = withDefaults(defineProps<Props>(),{
+    alt:"Image snfas",
+    cols:"basis-4/12",
+    thumbnail:false,
+})
+
+const showModal = ref<boolean>(false)
+
+const {src, alt, title, caption, thumbnail, bib, cols} = toRefs(props)
+
+</script>
+
+<template>
+   <div v-if="!thumbnail" class="flex">
+    <div :class="`mx-auto bg-white rounded-md overflow-hidden shadow-md ${cols}`">
+       <img class="object-cover object-center w-full" :src="src" :alt="alt" @click="showModal = true">
+         <div class="px-4 py-2">
+            <h2 class="text-2xl font-bold">{{title}}</h2>
+            <p class="text-gray-500 text-sm">{{caption}}</p>
+            <p class="text-gray-700 mt-4">{{bib}}</p>
+         </div>
+    </div>
+   </div> 
+    <div v-if="thumbnail" class="relative group inline-block m-2">
+      <img class="w-36 h-36 object-cover object-center group-hover:opacity-50 " :src="src" :alt="alt" >
+      <div class="absolute top-0 left-0 w-36 h-36 bg-black opacity-0 transition-opacity duration-300 group-hover:opacity-50 cursor-pointer" @click="showModal = true">
+        <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white text-center">
+           <EpIcon :icon-path="mdiArrowExpandAll"></EpIcon>
+        </div>
+      </div>
+  </div>
+   <EpModal v-model="showModal">
+      <img class="object-cover object-center h-5/6 w-5/6 mx-auto" :src="src" :alt="alt">
+       <div class="px-4 py-2">
+         <h2 class="text-2xl font-bold">{{title}}</h2>
+         <p class="text-gray-500 text-sm">{{caption}}</p>
+      </div>
+   </EpModal>
+</template>
+