ep-lib-ts 1.0.39 → 1.0.40

package/dist/index.d.ts

@@ -11,6 +11,8 @@ import { default as EpSpinner } from './components/basics/EpSpinner.vue';
 import { default as EpFlex } from './components/basics/EpFlex.vue';
 import { default as EpIcon } from './components/basics/EpIcon.vue';
 import { default as EpTable } from './components/basics/EpTable.vue';
+import { default as EpStackedList } from './components/basics/EpStackedList.vue';
+import { default as EpHoverCard } from './components/basics/EpHoverCard.vue';
 import { default as EpBarChart } from './components/charts/EpBarChart.vue';
 import { default as EpLineChart } from './components/charts/EpLineChart.vue';
 import { default as EpPieChart } from './components/charts/EpPieChart.vue';
@@ -45,9 +47,10 @@ import { default as EpTimeLine } from './components/medias/EpTimeLine.vue';
 import { default as EpVideo } from './components/medias/EpVideo.vue';
 import { default as EpVideoPanopto } from './components/medias/EpVideoPanopto.vue';
 import { default as EpWordDef } from './components/medias/EpWordDef.vue';
+import { default as EpCardLink } from './components/medias/EpCardLink.vue';
 import { default as EpAlert } from './components/signages/EpAlert.vue';
 import { default as EpHeader } from './components/signages/EpHeader.vue';
 import { default as EpQuote } from './components/signages/EpQuote.vue';
 import { default as EpSkeleton } from './components/signages/EpSkeleton.vue';
 
-export { EpBadge, EpBtn, EpCard, EpChip, EpDivider, EpFlex, EpIcon, EpImg, EpSection, EpSpinner, EpTable, EpBarChart, EpLineChart, EpPieChart, EpFunnelChart, 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, EpSkeleton, EpWordDef, EpSummativeTable, EpObjective, EpSpecificObjective, EpIntroduction, EpInstructions, EpDescription, EpConclusion, EpCodeblock, EpSectionCols };
+export { EpBadge, EpBtn, EpCard, EpChip, EpDivider, EpFlex, EpIcon, EpImg, EpSection, EpSpinner, EpTable, EpBarChart, EpLineChart, EpPieChart, EpFunnelChart, 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, EpSkeleton, EpWordDef, EpSummativeTable, EpObjective, EpSpecificObjective, EpIntroduction, EpInstructions, EpDescription, EpConclusion, EpCodeblock, EpSectionCols, EpCardLink, EpStackedList, EpHoverCard };

package/dist/{prism-DM8vlN3d.js → prism-EB5WECGI.js}

@@ -1,4 +1,4 @@
-import { a4 as V, a5 as W } from "./index-CPs4nmaJ.js";
+import { a7 as V, a8 as W } from "./index-mAWa7blx.js";
 function ee(S, P) {
   for (var i = 0; i < P.length; i++) {
     const g = P[i];

package/dist/types/Hover.d.ts

@@ -1,3 +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";
+export type TextSize = "text-sm" | "text-lg" | "text-xl" | "text-2xl" | "text-3xl" | "text-4xl" | "text-5xl" | "text-6xl";
+export type MaxWidth = "max-w-xs" | "max-w-sm:" | "max-w-md" | "max-w-lg" | "max-w-xl" | "max-w-2xl";

package/dist/types/Medias.d.ts

@@ -1,4 +1,5 @@
 export declare const mediaVariants: {
+    neutral: string;
     base: string;
     primary: string;
     secondary: string;

package/dist/types/StackedList.d.ts

@@ -3,8 +3,9 @@ type Color = "primary" | "secondary" | "accent" | "error" | "warning" | "success
 type Variant = "circle" | "square" | "rounded";
 type Size = "small" | "middle" | "big";
 interface Avatar {
-    src: string;
+    src?: string;
     alt: string;
+    name?: string;
 }
 export interface ListItem {
     uid?: string;
@@ -13,14 +14,11 @@ export interface ListItem {
     description: string;
     component?: ContentComponents;
 }
-export interface ItemStyle {
-    avatar?: {
-        color?: Color;
-        size?: Size;
-        variant?: Variant;
-        name?: string;
-    };
-    cropped?: boolean;
+export interface AvatarStyle {
+    color?: Color;
+    size?: Size;
+    variant?: Variant;
+    name?: string;
 }
 export declare const roundedType: {
     none: string;
@@ -28,10 +26,5 @@ export declare const roundedType: {
     middle: string;
     big: string;
 };
-type RoundedStyle = keyof typeof roundedType;
-export interface CustomStyle {
-    border?: boolean;
-    rounded?: RoundedStyle;
-    restricted?: boolean;
-}
+export type RoundedStyle = keyof typeof roundedType;
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ep-lib-ts",
   "private": false,
-  "version": "1.0.39",
+  "version": "1.0.40",
   "files": [
     "dist",
     "src/components/"
@@ -55,7 +55,7 @@
     "typescript": "^5.6.2",
     "vite": "^5.4.5",
     "vite-plugin-dts": "^3.9.0",
-    "vue-tsc": "^2.2.2"
+    "vue-tsc": "^2.2.4"
   },
   "peerDependencies": {
     "vue": "^3.2.45"

package/src/components/basics/EpCard.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { toRefs, computed } from "vue";
+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";
@@ -15,6 +16,8 @@ interface Props {
     src?: string | null;
     maxWidth?:string;
     density?:Density;
+    svg?:string;
+    isLink?:boolean;
 }
 
 
@@ -28,7 +31,8 @@ const props = withDefaults(defineProps<Props>(), {
     color: null,
     src:null,
     density:"default",
-    maxWidth:"max-w-full"
+    maxWidth:"max-w-full",
+    isLink:false
 })
 
 //styles card 
@@ -41,9 +45,16 @@ const borderColor = computed(() => {
         return `border solid ${useColors('border', props.color)}`
     }
     if (props.outlined) {
-        return 'border solid border-primary dark:border-primary'
+        return 'border solid border-primary dark:border-white'
     }
-    return 'dark:border dark:solid dark:border-primary'
+    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-2 rounded-md cursor-pointer'
+    }
+    return ''
 })
 
 const bgColor = computed(() => {
@@ -73,19 +84,29 @@ const stylesCard = computed(()=> {
     ${props.maxWidth} 
     rounded-md 
     dark:bg-dark
-    datk:text-white
-    my-4 `
+    dark:text-white
+    `
 })
 
 
-const { title, subtitle, icon, src } = toRefs(props)
+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} `">
-        <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 dark:text-white">
+    <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">
+            <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>

package/src/components/basics/EpHover.vue

@@ -3,7 +3,7 @@
     import useColors from '../../composables/useColors'
     import { useRenderText } from '../../composables/useRenderText';
 
-    import { Color, Animation, Size } from "../../types/Hover";
+    import { Animation, TextSize } from "../../types/Hover";
 
     interface Props {
         bgColor?: string;
@@ -11,7 +11,7 @@
         text?: string;
         animation?:Animation;
         seeThrough?: boolean;
-        textSize?: Size;
+        textSize?: TextSize;
     }
 
     const props = withDefaults(defineProps<Props>(), {
@@ -35,7 +35,7 @@
         }
 
         let opacity = (props.seeThrough)? "group-hover:opacity-90" : "group-hover:opacity-100";
-        let textSize = (props.textSize)? `text-${props.textSize}` : "text-md";
+        let textSize = (props.textSize)? props.textSize : "";
 
         return css + ' ' + opacity + ' ' + textSize;
     })

package/src/components/basics/EpHoverCard.vue

@@ -1,12 +1,13 @@
 <script lang="ts" setup>
-import { computed, toRefs } from 'vue';
+import { computed, toRefs, useSlots, type Slots } 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";
+import type { Animation, TextSize, MaxWidth } from "../../types/Hover";
 
 interface Props {
     title?: string | null;
@@ -16,14 +17,13 @@ interface Props {
     icon?: string | null;
     color?: string | null;
     src?: string | null;
-    maxWidth?:string;
+    maxWidth?:MaxWidth;
     density?:Density;
-
     hoverContent: string;
     hoverBg?: string;
     hoverAnimation?: Animation;
     seeThrough?: boolean;
-    textSize?: Size;
+    textSize?: TextSize;
     hoverColor?: string;
 }
 
@@ -38,8 +38,7 @@ const props = withDefaults(defineProps<Props>(), {
     color: null,
     src:null,
     density:"default",
-    maxWidth:"max-w-4xl",
-
+    maxWidth:"max-w-xl",
     hoverBg: "",
     hoverAnimation: "translateY"
 })
@@ -86,23 +85,26 @@ const stylesCard = computed(()=> {
     ${props.maxWidth} 
     rounded-md 
     dark:bg-dark
-    dark:text-white
-    my-4 `
+    dark:text-white`
 })
 
 
 const { title, subtitle, icon, src, hoverContent } = toRefs(props)
 
+const slots: Slots = useSlots();
+
+const hasContent = computed(() => {
+  return !!slots.default || !!props.title || !!props.subtitle;
+});
 
 </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">
+            <img :src="src" :class="`w-full ${hasContent ? 'rounded-t-md':'rounded-md'}`" alt="header card">
         </EpHover>
-        <div :class="density_class">
+        <div :class="density_class" v-if="hasContent">
             <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>

package/src/components/basics/EpStackedList.vue

@@ -5,44 +5,42 @@ import { useRenderText } from '../../composables/useRenderText';
 import type { EpComponent } from '../../types/Component';
 
 // Importing the necessary interfaces for the code
-import { type ListItem, type ItemStyle, roundedType, type CustomStyle } from '../../types/StackedList';
+import { type ListItem, type AvatarStyle, type RoundedStyle, roundedType } from '../../types/StackedList';
 
 
 // Managing the props
 interface Props {
     elements: ListItem[];
-    itemStyle?: ItemStyle;
-    customStyle?: CustomStyle;
+    border?:boolean;
+    rounded?:RoundedStyle;
+    restricted?:boolean;
+    cropped?:boolean;
+    avatarStyle?: AvatarStyle;
 }
 
 const props = withDefaults(defineProps<Props>(),{
     elements: () => [],
-    itemStyle: () => { return {
-        cropped: false,
-    } },
-    customStyle: () => {
-        return {
-            border: true,
-            rounded: "small",
-            restricted: false
-        }
-    }
+    avatarStyle: () => { return {
+      size:"middle"
+    }},
+    border:true,
+    rounded:"small",
+    restricted:false,
+    cropped: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';
-
+    const border = (props.border === false)? 'border-0' : 'border';
+    const rounded = roundedType[(props.rounded)? props.rounded : 'small'];
+    const padding = (props.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 elementSpacing = computed(() => (props.restricted)? 'p-6' : 'mx-6 py-6');
 
 const elementGrid = (element: Record<string, any>|undefined) => {
  return element?'grid-cols-11' : 'grid-cols-7'
@@ -62,11 +60,11 @@ const getCompontent = (name:EpComponent|undefined)=> {
 <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(elem.component)} 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" />
+        <li v-for="elem in elements" :key="elements.indexOf(elem)" :class="`${(elements.indexOf(elem) !== 0)? 'border-t' : ''} list-none ${elementSpacing} grid grid-cols-11 justify-items-center items-center border-gray-200 dark:border-slate-700`">
+            <EpAvatar v-if="elem.avatar" :name="elem.avatar?.name" :src="elem.avatar?.src" :alt="elem.avatar?.alt" v-bind="avatarStyle" 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 :class="`${(cropped)? 'line-clamp-3': ''}`" v-html="useRenderText(elem.description)"></div>
             </div>
             <div v-if="elem.component" class="flex gap-2 items-center col-span-4 justify-self-auto">
 

package/src/components/charts/EpFunnelChart.vue

@@ -39,7 +39,7 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   center: true,
-  type: 'base',
+  type: 'neutral',
   width: "800",
   height: 350,
   isFunnel: true,

package/src/components/charts/EpPieChart.vue

@@ -41,7 +41,7 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
     center: true,
-    type:'base',
+    type:'neutral',
     width:"500",
     dataNoDisponible:"Data no disponible"
 

package/src/components/educationals/EpEdu.vue

@@ -23,9 +23,9 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   title: null,
-  type: "base",
+  type: "neutral",
   hideIcon: false,
-  flat: false,
+  flat: true,
   labelIntentions: "",
 });
 
@@ -48,24 +48,43 @@ const renderIcon = computed(() => {
 });
 
 const topBarStyle = computed(() => {
-  return `${mediaVariants[props.type]} text-left px-5 py-2 ${
+  return `${mediaVariants[props.type]} text-left  ${
     props.flat ? "" : "rounded-t-md"
   } flex justify-between items-center `;
 });
 
 const bottomBarStyle = computed(() => {
-  return `${mediaVariants[props.type]} text-right pr-5`;
+  return `${mediaVariants[props.type]} text-right`;
 });
 
+const paddingTopStyle = computed(()=> {
+   if(props.type != "neutral"){
+    return `px-5 py-2`
+   }
+})
+
+const paddingBottomStyle = computed(()=> {
+   if(props.type != "neutral"){
+    return `pr-5`
+   }
+})
+const boxPaddingStyle = computed(()=> {
+   if(props.type != "neutral"){
+    return `px-5`
+   }
+})
+
 const containerStyle = computed(() => {
   if (hasActions.value || hasIntentions.value || props.title) {
-    return `rounded-lg overflow-hidden ${
+    return ` overflow-hidden ${
       props.flat ? "" : "shadow-md"
-    } flex flex-col justify-between h-full`;
+    } flex flex-col justify-start h-full`;
   }
   return `flex flex-col justify-between`;
 });
 
+
+
 // type, taxonomyLevel, courseCode, courseTitle, title, subtitle, height, src, color, synchrone
 
 const { title, hideIcon } = toRefs(props);
@@ -74,34 +93,33 @@ const { title, hideIcon } = toRefs(props);
 <template>
   <div :class="containerStyle">
     <div
-      :class="`${topBarStyle}`"
-      class="dark:base-dark"
+      :class="`${topBarStyle} ${paddingTopStyle} dark:base-dark`"
       v-if="title || mandateLevel"
     >
       <!-- <EpIcon :size="24" :icon-path="mdiBookOpenVariant"></EpIcon> -->
       <h3>
-        <EpIcon v-if="!hideIcon" :iconPath="renderIcon" size="24"></EpIcon>
+        <EpIcon v-if="!hideIcon" :iconPath="renderIcon" size="24" class="mr-2"></EpIcon>
         <span class="font-bold align-middle">{{ title }}</span>
       </h3>
       <EpScope v-if="mandateLevel" :mandateLevel="mandateLevel"></EpScope>
     </div>
-    <div class="px-5 dark:base-dark dark:text-white">
-      <div class="py-2" v-if="hasIntentions">
+    <div :class="`${boxPaddingStyle} dark:base-dark dark:text-white`">
+      <div class="py-4" v-if="hasIntentions">
         <!-- <EpIcon :size="24" :icon-path="mdiInformationOutline"></EpIcon> -->
         <h4
           v-if="labelIntentions"
-          class="font-semibold mb-2 text-sm uppercase tracking-wide text-gray-500 dark:text-white"
+          class="font-light text-sm pb-1 tracking-wide dark:text-white"
         >
           {{ labelIntentions }}
         </h4>
         <slot name="intentions"></slot>
         <EpDivider />
       </div>
-      <div class="py-2">
+      <div class="pt-2">
         <slot name="content"></slot>
       </div>
     </div>
-    <div :class="bottomBarStyle" class="dark:base-dark" v-if="hasActions">
+    <div :class="`${bottomBarStyle} ${paddingBottomStyle}`" class="dark:base-dark" v-if="hasActions">
       <slot name="actions"></slot>
     </div>
   </div>

package/src/components/educationals/EpReading.vue

@@ -45,7 +45,7 @@ const props = withDefaults(defineProps<Props>(), {
   icon: "mdiBookmarkBox",
   hideCover: false,
   compact: false,
-  type:"base",
+  type:"neutral",
   hideIcon:false,
   labelIn:"dans",
   labelRead:"Lire",
@@ -152,7 +152,9 @@ const errorImg = (event:Event)=>{
           </div>
         </template>
         <template #actions>
-          <EpBtn :color="type=='base'?'text-gray-700':'text-white dark:text-black'" :type="type" :href="url" v-if="url">{{labelRead}}</EpBtn>
+          <EpBtn text :href="url" v-if="url" type="primary">
+              <EpIcon :size="20" :icon-path="mdiOpenInNew" ></EpIcon> {{labelRead}}
+            </EpBtn>
         </template>
       </EpEdu>
     </div>

package/src/components/educationals/EpResource.vue

@@ -11,7 +11,7 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-   type:'base'
+   type:'neutral'
 })
 
 const resourceInfo = computed(()=>{

package/src/components/forms/EpSelect.vue

@@ -1,10 +1,15 @@
 <script setup lang="ts">
 type Option = { text: string; value: string };
 
-const props = defineProps<{
+interface Props {
   options: Option[];
   modelValue: string;
-}>();
+  label?:string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+ label:"Select Theme:"
+})
 
 const model = defineModel()
 
@@ -12,7 +17,7 @@ const model = defineModel()
 
 <template>
   <div class="w-full max-w-xs">
-    <label class="block text-sm font-medium text-gray-700 mb-1">Select Theme:</label>
+    <label class="block text-sm font-medium text-gray-700 mb-1">{{label}}</label>
     <select
       v-model="model"
       class="block w-full bg-white border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"

package/src/components/interactions/EpQuestion.vue

@@ -32,7 +32,7 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  type: "base",
+  type: "neutral",
   hideIcon: false,
   shuffle: false,
   before: false,

package/src/components/medias/EpAudio.vue

@@ -26,7 +26,7 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), { 
-   type: 'base',
+   type: 'neutral',
    hideIcon: false,
    labelIntentions: "Intentions d'écoute",
    messageError:"Mauvais url"

package/src/components/medias/EpCardLink.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import EpCard from '../basics/EpCard.vue';
+import type { MaxWidth } from "../../types/Hover";
+import { mdiChevronRight } from "@mdi/js";
+interface Props {
+    title?: string | null;
+    subtitle?: string | null;
+    outlined?: boolean;
+    flat?: boolean;
+    color?: string | null;
+    src?: string | null;
+    svg?: string;
+    maxWidth?:MaxWidth;
+    center?:boolean;
+    content?:string;
+    iconlink?:string;
+    to?:string;
+    nuxtLink?:boolean;
+    isExternal?:boolean
+}
+
+
+const props = withDefaults(defineProps<Props>(),{
+    //defaults ? ...
+    svg:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>dog</title><path d="M18,4C16.29,4 15.25,4.33 14.65,4.61C13.88,4.23 13,4 12,4C11,4 10.12,4.23 9.35,4.61C8.75,4.33 7.71,4 6,4C3,4 1,12 1,14C1,14.83 2.32,15.59 4.14,15.9C4.78,18.14 7.8,19.85 11.5,20V15.72C10.91,15.35 10,14.68 10,14C10,13 12,13 12,13C12,13 14,13 14,14C14,14.68 13.09,15.35 12.5,15.72V20C16.2,19.85 19.22,18.14 19.86,15.9C21.68,15.59 23,14.83 23,14C23,12 21,4 18,4M4.15,13.87C3.65,13.75 3.26,13.61 3,13.5C3.25,10.73 5.2,6.4 6.05,6C6.59,6 7,6.06 7.37,6.11C5.27,8.42 4.44,12.04 4.15,13.87M9,12A1,1 0 0,1 8,11C8,10.46 8.45,10 9,10A1,1 0 0,1 10,11C10,11.56 9.55,12 9,12M15,12A1,1 0 0,1 14,11C14,10.46 14.45,10 15,10A1,1 0 0,1 16,11C16,11.56 15.55,12 15,12M19.85,13.87C19.56,12.04 18.73,8.42 16.63,6.11C17,6.06 17.41,6 17.95,6C18.8,6.4 20.75,10.73 21,13.5C20.75,13.61 20.36,13.75 19.85,13.87Z" /></svg>',
+    maxWidth:"max-w-md",
+    center:false,
+    iconlink:mdiChevronRight,
+    nuxtLink:false,
+    to:'/',
+    isExternal:false
+})
+
+const centerCard = computed(()=> {
+   if(props.center){
+    return 'mx-auto'
+   }
+   return ''
+})
+
+
+</script>
+
+<template> 
+    <div :class="`${centerCard} ${maxWidth}`">
+        <a v-if="isExternal" :href="to" target="_blank" rel="noopener noreferrer">
+            <EpCard
+                :title="title"
+                :subtitle="subtitle"
+                :src="src"
+                :svg="svg"
+                :maxWidth="maxWidth"
+                :icon="iconlink"
+                isLink
+            />   
+        </a>
+        <component 
+        :is="nuxtLink ? 'NuxtLink' : 'RouterLink'" 
+        :to="to" 
+        v-else
+    >
+        <EpCard
+            :title="title"
+            :subtitle="subtitle"
+            :src="src"
+            :svg="svg"
+            :maxWidth="maxWidth"
+            :icon="iconlink"
+            isLink
+        />   
+        </component>
+
+
+    </div>
+    
+</template>

package/src/components/medias/EpIframe.vue

@@ -20,7 +20,7 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  type:'base',
+  type:'neutral',
   big: false,
   hideIcon:false
 });