ep-lib-ts 0.1.14 → 0.1.16

package/dist/index.d.ts

@@ -0,0 +1,40 @@
+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 EpResource from './components/educationals/EpResource.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 EpLinkVersion from './components/medias/EpLinkVersion.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';
+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, EpBarChart, EpLineChart, EpPieChart, EpText, EpEdu, EpReading, EpResource, EpScope, EpAccordeon, EpContentSlider, EpModal, EpQuestion, EpTabs, EpAudio, EpCarousel, EpIframe, EpKatex, EpLink, EpLinkVersion, EpSoftware, EpSvg, EpTerm, EpTimeLine, EpVideo, EpVideoPanopto, EpAlert, EpHeader, EpQuote, };

package/dist/router.d.ts

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

package/dist/style.css

@@ -0,0 +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-ab122c9c]{max-height:0;overflow:hidden}.h-custom{height:30rem}.p-custom p{margin-bottom:1em}.v-enter-active[data-v-049ea2df],.v-leave-active[data-v-049ea2df]{transition:opacity .5s ease}.v-enter-from[data-v-049ea2df],.v-leave-to[data-v-049ea2df]{opacity:0}.katex[data-v-24ff8b28]{font-size:1.3em}.content[data-v-523dedc7]{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)}

package/dist/types/Accordeon.d.ts

@@ -0,0 +1,43 @@
+export declare const typeAccordeon: {
+    base: {
+        default: string;
+        outlined: string;
+    };
+    primary: {
+        default: string;
+        outlined: string;
+    };
+    secondary: {
+        default: string;
+        outlined: string;
+    };
+    accent: {
+        default: string;
+        outlined: string;
+    };
+    warning: {
+        default: string;
+        outlined: string;
+    };
+    success: {
+        default: string;
+        outlined: string;
+    };
+    error: {
+        default: string;
+        outlined: string;
+    };
+    info: {
+        default: string;
+        outlined: string;
+    };
+    question: {
+        default: string;
+        outlined: string;
+    };
+    tip: {
+        default: string;
+        outlined: string;
+    };
+};
+export type TypeAccordeon = keyof typeof typeAccordeon;

package/dist/types/Alert.d.ts

@@ -0,0 +1,31 @@
+export declare const typeAlert: {
+    base: {
+        default: string;
+        outlined: string;
+    };
+    warning: {
+        default: string;
+        outlined: string;
+    };
+    success: {
+        default: string;
+        outlined: string;
+    };
+    error: {
+        default: string;
+        outlined: string;
+    };
+    info: {
+        default: string;
+        outlined: string;
+    };
+    question: {
+        default: string;
+        outlined: string;
+    };
+    tip: {
+        default: string;
+        outlined: string;
+    };
+};
+export type TypeAlert = keyof typeof typeAlert;

package/dist/types/Answer.d.ts

@@ -0,0 +1,15 @@
+import { TypeAlert } from './Alert';
+interface ContentComponent {
+    type?: string;
+    data: {
+        [key: string]: any;
+    };
+}
+export interface Answer {
+    text: string;
+    feedback: string;
+    type: TypeAlert;
+    uid?: string;
+    component?: ContentComponent | null;
+}
+export {};

package/dist/types/Border.d.ts

@@ -0,0 +1,2 @@
+type Border = "border" | "border-2" | "border-4" | "border-8";
+export default Border;

package/dist/types/Btn.d.ts

@@ -0,0 +1,41 @@
+export declare const bgVariants: {
+    base: {
+        default: string;
+        outlined: string;
+    };
+    primary: {
+        default: string;
+        outlined: string;
+    };
+    secondary: {
+        default: string;
+        outlined: string;
+    };
+    accent: {
+        default: string;
+        outlined: string;
+    };
+    info: {
+        default: string;
+        outlined: string;
+    };
+    warning: {
+        default: string;
+        outlined: string;
+    };
+    success: {
+        default: string;
+        outlined: string;
+    };
+    error: {
+        default: string;
+        outlined: string;
+    };
+};
+export declare const sizeVariants: {
+    small: string;
+    medium: string;
+    large: string;
+};
+export type ButtonBgVariant = keyof typeof bgVariants;
+export type ButtonSize = keyof typeof sizeVariants;

package/dist/types/Card.d.ts

@@ -0,0 +1,6 @@
+export declare const density_style: {
+    compact: string;
+    default: string;
+    comfortable: string;
+};
+export type Density = keyof typeof density_style;

package/dist/types/Chip.d.ts

@@ -0,0 +1,41 @@
+export declare const chipVariants: {
+    base: {
+        default: string;
+        outlined: string;
+    };
+    primary: {
+        default: string;
+        outlined: string;
+    };
+    secondary: {
+        default: string;
+        outlined: string;
+    };
+    accent: {
+        default: string;
+        outlined: string;
+    };
+    info: {
+        default: string;
+        outlined: string;
+    };
+    warning: {
+        default: string;
+        outlined: string;
+    };
+    success: {
+        default: string;
+        outlined: string;
+    };
+    error: {
+        default: string;
+        outlined: string;
+    };
+};
+export declare const sizeChipVariants: {
+    small: string;
+    medium: string;
+    large: string;
+};
+export type ChipBgVariant = keyof typeof chipVariants;
+export type ChipSize = keyof typeof sizeChipVariants;

package/dist/types/MandateLevel.d.ts

@@ -0,0 +1,5 @@
+export interface MandateLevel {
+    color: string;
+    title: string;
+    value: string;
+}

package/dist/types/MediaCarousel.d.ts

@@ -0,0 +1,7 @@
+export interface MediaCarousel {
+    src: string;
+    bib: string;
+    caption: string;
+    uid?: string;
+    privacy?: string;
+}

package/dist/types/Medias.d.ts

@@ -0,0 +1,11 @@
+export declare const mediaVariants: {
+    base: string;
+    primary: string;
+    secondary: string;
+    accent: string;
+    info: string;
+    warning: string;
+    success: string;
+    error: string;
+};
+export type MediaVariants = keyof typeof mediaVariants;

package/dist/types/Radio.d.ts

@@ -0,0 +1,11 @@
+export declare const radioVariants: {
+    base: string;
+    primary: string;
+    secondary: string;
+    accent: string;
+    info: string;
+    warning: string;
+    success: string;
+    error: string;
+};
+export type RadioVariants = keyof typeof radioVariants;

package/dist/types/Slides.d.ts

@@ -0,0 +1,15 @@
+interface ContentComponent {
+    type?: string;
+    size?: boolean;
+    data: {
+        [key: string]: any;
+    };
+}
+export interface SlidesType {
+    img: string | null;
+    uid: string | number;
+    title: string;
+    content: string;
+    component?: null | ContentComponent;
+}
+export {};

package/dist/types/TimeLine.d.ts

@@ -0,0 +1,124 @@
+export declare const typeTimeLineTag: {
+    base: {
+        default: string;
+        outlined: string;
+    };
+};
+export interface HeadTimeLine {
+    text: string;
+    headline?: string;
+}
+export interface TagTimeLine {
+    id: number | string;
+    color: ColorsTags;
+    title: string;
+    active?: boolean;
+}
+export interface TimeLineDate {
+    day?: string | number;
+    hour?: string | number;
+    year?: string | number;
+    month?: string | number;
+    minute?: string | number;
+}
+export interface EventTimeLine {
+    id: string;
+    tag?: TagTimeLine | null;
+    text: HeadTimeLine;
+    end_date?: TimeLineDate;
+    start_date?: TimeLineDate;
+    media: {
+        url: string;
+    };
+    background?: {
+        color?: string;
+    };
+}
+export declare const colorsTimeLine: {
+    noTag: {
+        bg: string;
+        text: string;
+        border: string;
+    };
+    "blue-grey": {
+        bg: string;
+        text: string;
+        border: string;
+    };
+    red: {
+        bg: string;
+        text: string;
+        border: string;
+    };
+    pink: {
+        bg: string;
+        text: string;
+        border: string;
+    };
+    purple: {
+        bg: string;
+        text: string;
+        border: string;
+    };
+    "deep-purple": {
+        bg: string;
+        text: string;
+        border: string;
+    };
+    indigo: {
+        bg: string;
+        text: string;
+        border: string;
+    };
+    blue: {
+        bg: string;
+        text: string;
+        border: string;
+    };
+    cyan: {
+        bg: string;
+        text: string;
+        border: string;
+    };
+    teal: {
+        bg: string;
+        text: string;
+        border: string;
+    };
+    green: {
+        bg: string;
+        text: string;
+        border: string;
+    };
+    "light-green": {
+        bg: string;
+        text: string;
+        border: string;
+    };
+    lime: {
+        bg: string;
+        text: string;
+        border: string;
+    };
+    "light-blue": {
+        bg: string;
+        text: string;
+        border: string;
+    };
+    "deep-orange": {
+        bg: string;
+        text: string;
+        border: string;
+    };
+    orange: {
+        bg: string;
+        text: string;
+        border: string;
+    };
+    brown: {
+        bg: string;
+        text: string;
+        border: string;
+    };
+};
+export type ColorsTags = keyof typeof colorsTimeLine;

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ep-lib-ts",
   "private": false,
-  "version": "0.1.14",
+  "version": "0.1.16",
   "files": [
     "dist",
     "src/components/"
@@ -50,7 +50,7 @@
     "typescript": "^5.2.0-dev.20230801",
     "vite": "^4.1.0",
     "vite-plugin-dts": "^3.5.2",
-    "vue-tsc": "^1.0.24"
+    "vue-tsc": "^1.8.8"
   },
   "peerDependencies": {
     "vue": "^3.2.45"
@@ -58,4 +58,4 @@
   "engines": {
     "node": "18.x.x"
   }
-}
+}

package/src/components/basics/EpCard.vue

@@ -91,5 +91,4 @@ const { title, subtitle, icon, src, density } = toRefs(props)
                 <slot name="card-actions"></slot>
         </div>
     </div>
-    
 </template>

package/src/components/basics/EpText.vue

@@ -13,7 +13,7 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(),{
-  compact:false
+  compact:false,
 })
 
 const renderTitle = computed(()=>{
@@ -24,6 +24,9 @@ const renderTitle = computed(()=>{
 })
 
 const renderText = computed(()=>{
+     if(!props.content){
+      return `<div></div>`
+     }
      if(!isHtml(props.content)){
         return useMarkdown(props.content)
      }
@@ -36,7 +39,7 @@ const renderText = computed(()=>{
       let newStr = div.outerHTML
       //find all span.ep_glossary_item to know the glossary terms in the text
       const glossaryTerms = div.querySelectorAll('.ep_glossary_item')
-      console.log(glossaryTerms)
+    //  console.log(glossaryTerms)
       //if find glossary terms
       if(glossaryTerms.length > 0){
         ///check every term and replace it         
@@ -65,9 +68,9 @@ const renderText = computed(()=>{
             const idsRelation = foundedRelations.map((x) => x.id);
             const termsRelation = foundedRelations.map((x) => x.term);
             const variation = term.variation
-            
+            const hasImge = term.src ? term.src : ''
             //const replaceWord = `<EpBtn :pts-data="{term:'${term.term}', definition:'${term.definition}', renderword:'${render_word}', graminfo:'${term.graminfo}', domain:'${term.domain}',variation:'${variation}', relations_names:'${termsRelation}', relations_ids:'${idsRelation}'}"></EpBtn>`
-            const replaceWord = ` <EpTerm term="${term.term}" definition="${term.definition}" word="${render_word}" variations="${variation}" graminfo='${term.graminfo}' domain='${term.domain}' relations='${termsRelation}' idrelation="${idsRelation}"></EpTerm> `
+            const replaceWord = ` <EpTerm term="${term.term}" word="${render_word}" variations="${variation}" graminfo="${term.graminfo}" src='${hasImge}' domain="${term.domain}" relations="${termsRelation}" idrelation="${idsRelation}"> ${term.definition} </EpTerm> `
             //replace output string
             newStr = newStr.replace(word, replaceWord)
           }

package/src/components/charts/EpPieChart.vue

@@ -1,8 +1,76 @@
 <script setup lang="ts">
+import { computed, toRefs } from "vue";
+import EpEdu from "../educationals/EpEdu.vue";
+import { mdiChartPie } from '@mdi/js';
+import { MediaVariants } from "../../types/Medias";
+import { isHtml } from "../../composables/isHtml";
+import { useMarkdown } from "../../composables/useMarkdown";
+
+interface TitlePie {
+   text:string;
+   align?:string;
+}
+
+interface Props {
+    series: number[];
+    labels:string[];
+    id?: string;
+    center?: boolean;
+    title?: TitlePie;
+    intentions?: string;
+    hideIcon?: boolean;
+    type?: MediaVariants;
+    mandateLevel?: string | null;
+    source?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    center: false,
+});
+
+const options = computed(()=> {
+   return {
+          chart: {
+            width: 350,
+            type: "pie",
+          },
+          labels: props.labels || [],
+   }
+})
+
+const renderText = computed(() => {
+    if (!props.intentions) {
+        return null;
+    }
+    if (!isHtml(props.intentions)) {
+        return useMarkdown(props.intentions);
+    }
+    return props.intentions;
+});
+
+
+
+const { center, series, source, labels, title } = toRefs(props)
+
 </script>
 
 <template>
-   <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>
+    <EpEdu :title="title?.text" :type="type" :hideIcon="hideIcon" :icon="mdiChartPie" :mandateLevel="mandateLevel">
+        <template #intentions v-if="renderText">
+            <div v-html="renderText"></div>
+        </template>
+        <template #content>
+            <div :class="`p-4 ${center ? 'flex justify-center' : ''}`" v-if="labels && series">
+                <apexchart width="350" type="pie" :options="options" :series="series"></apexchart>
+            </div>
+            <div v-else>
+                <p>Data no disponible</p>
+            </div>
+        </template>
+        <template #actions v-if="source">
+            <p>{{ source }}</p>
+        </template>
+    </EpEdu>
+</template>
+
+

package/src/components/interactions/EpAccordeon.vue

@@ -64,18 +64,20 @@ const { title, icon } = toRefs(props)
 </script>
 
 <template>
-  <div :class="stylesHeader" @click="toggleDivVisibility">
-    <h3 class="text-lg"><EpIcon v-if="icon" :icon-path="icon"></EpIcon> {{ title }}</h3>
-    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
-      :class="`mx-4 my-3 h-6 w-6 transition-all duration-200 ${showDiv ? 'rotate-45' : ''}`">
-      <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6" />
-    </svg>
-  </div>
-  <div ref="collapsible" :class="`${contentStyles} content`">
-    <div class="py-4">
-
-      <slot></slot>
-
+  <div>
+    <div :class="stylesHeader" @click="toggleDivVisibility">
+      <h3 class="text-lg"><EpIcon v-if="icon" :icon-path="icon"></EpIcon> {{ title }}</h3>
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+        :class="`mx-4 my-3 h-6 w-6 transition-all duration-200 ${showDiv ? 'rotate-45' : ''}`">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6" />
+      </svg>
+    </div>
+    <div ref="collapsible" :class="`${contentStyles} content`">
+      <div class="py-4">
+  
+        <slot></slot>
+  
+      </div>
     </div>
   </div>
 </template>