ep-lib-ts 1.0.55 → 1.0.57

package/src/components/signages/EpSkeleton.vue

@@ -1,48 +0,0 @@
-<script setup lang="ts">
-
-type Shape = "circle" | "rectangle";
-
-
-interface Props {
-  type?:Shape;
-  height?:number;
-  width?:number;
-  animation?:string;
-  loading?:boolean;
-}
-
-  const props = withDefaults(defineProps<Props>(), {
-    type:'rectangle',
-    width:100,
-    height:10,
-    animation:"animate-pulse",
-    loading:true
-  }) 
- 
-  const width =  props.width/4 +"rem" 
-  const height = props.height/4+ "rem" 
-  const animation = props.animation? props.animation :"animate-pulse" 
-
-</script>
-<template>
-    <div>       
-        <div class="flex p-2" :class="animation">
-          <div v-if="props.loading">
-            <span class="shape block bg-gray-200 rounded-full dark:bg-gray-300"></span>           
-          </div>
-          <div v-else-if="props.type === 'circle'">
-            <span class="shape block bg-gray-200 rounded-full dark:bg-gray-300"></span>           
-          </div>
-          <div v-else-if="props.type === 'rectangle'">
-            <span class="shape block bg-gray-200 dark:bg-gray-300 rounded-lg"></span>    
-          </div>
-     </div>
-    </div>
-</template>
-
-<style >
-  .shape {      
-    height: v-bind(height);
-    width: v-bind(width)
-  }
-</style>

package/src/components/tools/BgAudio.vue

@@ -1,51 +0,0 @@
-<script setup lang="ts">
-const props = withDefaults(defineProps<{
-	fill?: string;
-}>(), {
-	fill: "fill-primary"
-})
-</script>
-<template>
-	<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
-		y="0px" viewBox="0 0 640 360" style="enable-background:new 0 0 640 360;" xml:space="preserve">
-
-		<pattern y="-20" width="150" height="100" patternUnits="userSpaceOnUse" id="New_Pattern" viewBox="8 -107.8 150 100"
-			style="overflow:visible;">
-			<g>
-				<rect x="8" y="-107.8" style="fill: none;" width="150" height="100" />
-				<g style="opacity:0.1 ;">
-					<path d="M159.8-15.5c3.5,0.8,6.2,4,6.2,7.8s-2.7,7-6.2,7.8v-1.8c2.6-0.8,4.4-3.1,4.4-5.9s-1.9-5.2-4.4-5.9V-15.5 M162-7.8
-				c0,1.6-0.9,2.9-2.2,3.5v-7.1C161.1-10.7,162-9.3,162-7.8 M153.5-10.4l4.4-4.4v14.2l-4.4-4.4H150v-5.3H153.5z" />
-				</g>
-				<g style="opacity:0.1 ;">
-					<path d="M9.8-15.5c3.5,0.8,6.2,4,6.2,7.8s-2.7,7-6.2,7.8v-1.8c2.6-0.8,4.4-3.1,4.4-5.9s-1.9-5.2-4.4-5.9V-15.5 M12-7.8
-				c0,1.6-0.9,2.9-2.2,3.5v-7.1C11.1-10.7,12-9.3,12-7.8 M3.5-10.4L8-14.8v14.2L3.5-5.1H0v-5.3H3.5z" />
-				</g>
-				<g style="opacity:0.1 ;">
-					<path d="M159.8-115.5c3.5,0.8,6.2,4,6.2,7.8s-2.7,7-6.2,7.8v-1.8c2.6-0.8,4.4-3.1,4.4-5.9s-1.9-5.2-4.4-5.9V-115.5 M162-107.8
-				c0,1.6-0.9,2.9-2.2,3.5v-7.1C161.1-110.7,162-109.3,162-107.8 M153.5-110.4l4.4-4.4v14.2l-4.4-4.4H150v-5.3H153.5z" />
-				</g>
-				<g style="opacity:0.1 ;">
-					<path d="M84.8-65.5c3.5,0.8,6.2,4,6.2,7.8s-2.7,7-6.2,7.8v-1.8c2.6-0.8,4.4-3.1,4.4-5.9c0-2.8-1.9-5.2-4.4-5.9V-65.5 M87-57.8
-				c0,1.6-0.9,2.9-2.2,3.5v-7.1C86.1-60.7,87-59.3,87-57.8 M78.5-60.4l4.4-4.4v14.2l-4.4-4.4H75v-5.3H78.5z" />
-				</g>
-				<g style="opacity:0.1 ;">
-					<path d="M9.8-115.5c3.5,0.8,6.2,4,6.2,7.8s-2.7,7-6.2,7.8v-1.8c2.6-0.8,4.4-3.1,4.4-5.9s-1.9-5.2-4.4-5.9V-115.5 M12-107.8
-				c0,1.6-0.9,2.9-2.2,3.5v-7.1C11.1-110.7,12-109.3,12-107.8 M3.5-110.4l4.4-4.4v14.2l-4.4-4.4H0v-5.3H3.5z" />
-				</g>
-			</g>
-		</pattern>
-		<g>
-			<rect :class="props.fill" width="640" height="360" />
-			<path style="fill:url(#New_Pattern);" d="M639,1v358H1V1H639 M640,0H0v360h640V0L640,0z" />
-		</g>
-		<g>
-			<rect x="0.5" y="0.5" style="fill:url(#New_Pattern);" width="639" height="359" />
-		</g>
-		<g>
-			<path style="fill: white;" d="M310.7,114.7c-31,4.4-53.2,32.4-53.2,63.7v46.8c0,11.5,9.3,20.8,20.8,20.8h20.8v-55.6h-27.8v-12
-		c0-24.9,17.9-47.1,42.5-50.1c29.6-3.6,54.7,19.4,54.7,48.3v13.9h-27.8V246h20.8c11.5,0,20.8-9.3,20.8-20.8v-48.6
-		C382.5,138.7,349.4,109.1,310.7,114.7z" />
-		</g>
-	</svg>
-</template>

package/src/components/tools/Details.vue

@@ -1,47 +0,0 @@
-<script setup lang="ts">
-import {ref} from 'vue'
-import EpModal from '../interactions/EpModal.vue';
-import type { NestedComponents } from '../../types/Component';
-import EpBtn from '../basics/EpBtn.vue';
-import EpDivider from '../basics/EpDivider.vue';
-import TextMedia from './TextMedia.vue';
-const showModal = ref(false)
-
-
-interface Props {
-    title?:string;
-    content:string;
-    labelClose?:string;
-    media?:NestedComponents
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    title:"Voir détails",
-    labelClose:"Fermer"
-})
-
-</script>
-
-<template>
-    <div class="cursor-pointer rounded bg-primary text-white py-2 px-4 flex flex-col items-center" @click="showModal = true">
-        <EpModal v-model="showModal" :title="content"> 
-            <TextMedia
-             :text="title"
-             :media="media"
-             text-left
-            />
-            <EpDivider/>
-            <div class="flex justify-end">
-             <EpBtn 
-                type="error" 
-                rounded
-                size="small"
-                @click="showModal = false">
-                {{labelClose}}
-            </EpBtn>
-            </div>
-            
-        </EpModal>
-        <p class="dark:text-black">{{title}}</p>
-    </div>
-</template>

package/src/components/tools/DisplayBox.vue

@@ -1,44 +0,0 @@
-<script setup lang="ts">
-import { ref, computed } from 'vue'
-import { onClickOutside, useEventListener } from '@vueuse/core'
-const menu = ref()
-const isOpen = ref()
-
-onClickOutside(menu, (event) => {
-    isOpen.value = false
-})
-useEventListener('keydown', (e) => {
-    if (e.key === 'Escape' && isOpen)
-        isOpen.value = false
-})
-
-function open() {
-    return isOpen.value = true
-}
-
-function close() {
-    return isOpen.value = false
-}
-
-const classOpen = computed(()=> {
-   return isOpen.value?`w-[32rem]`:`hidden`
-})
-
-</script>
-
-<template>
-    <div>
-        <slot :open="open" />
-        <div ref="menu" :class="`${classOpen} custom_index`">
-                <slot name="menu" :is-open="isOpen" :close="close" />
-        </div>
-    </div>
-</template>
-
-<style>
-    .custom_index{
-        z-index: 9999;
-        position: absolute;
-        right: 12rem;
-    }
-</style>

package/src/components/tools/SvgFilter.vue

@@ -1,220 +0,0 @@
-<template>
-    <svg class="duotone-filters h-0" xmlns="http://www.w3.org/2000/svg">
-      <filter id="duotone-bluered">
-        <feColorMatrix type="matrix" result="grayscale"
-          values="1 0 0 0 0
-                  1 0 0 0 0
-                  1 0 0 0 0
-                  0 0 0 1 0" >
-        </feColorMatrix>
-        <feComponentTransfer color-interpolation-filters="sRGB" result="duotone"> 
-            <feFuncR type="table" tableValues="0.0 0.9608"></feFuncR>
-            <feFuncG type="table" tableValues="0.2784 0.2627"></feFuncG>
-            <feFuncB type="table" tableValues="0.5255 0.2118"></feFuncB>
-            <feFuncA type="table" tableValues="0 1"></feFuncA>
-        </feComponentTransfer>
-      </filter>
-
-      <filter id="duotone-dark-blue">
-        <feColorMatrix type="matrix" result="gray"
-			values="0.2126 0.7152 0.0722 0 0
-					0.2126 0.7152 0.0722 0 0
-					0.2126 0.7152 0.0722 0 0
-					0 0 0 1 0" >
-        </feColorMatrix>
-
-        <feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
-            <feFuncR type="table" tableValues="0.003921568627 0.007843137255"></feFuncR>
-            <feFuncG type="table" tableValues="0.1568627451 0.3803921569"></feFuncG>
-            <feFuncB type="table" tableValues="0.2352941176 0.5725490196"></feFuncB>
-            <feFuncA type="table" tableValues="0 1"></feFuncA>
-        </feComponentTransfer>
-    </filter>
-    
-    <filter id="duotone-blue">
-         <feColorMatrix type="matrix" result="gray"
-			values="0.9126 1 1 0 0
-					0.9126 1 1 0 0
-					0.9126 1 1 0 0
-					0 0 0 1 0" >
-        </feColorMatrix>
-
-        <feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
-            <feFuncR type="table" tableValues="0.003921568627 0.007843137255"></feFuncR>
-            <feFuncG type="table" tableValues="0.1568627451 0.3803921569"></feFuncG>
-            <feFuncB type="table" tableValues="0.2352941176 0.5725490196"></feFuncB>
-            <feFuncA type="table" tableValues="0 1"></feFuncA>
-        </feComponentTransfer>
-    </filter>
-
-    <filter id="duotone-dark-blue">
-        <feColorMatrix type="matrix" result="gray"
-            values="0.35 0 0 0 0 
-                    0.35 0 0 0 0
-                    0.35 0 0 0 0
-                    0 0 0 0 1" >
-        </feColorMatrix>
-
-        <!-- <feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
-            <feFuncR type="table" tableValues="0.049 0.906"></feFuncR>
-            <feFuncG type="table" tableValues="0.357 0.978"></feFuncG>
-            <feFuncB type="table" tableValues="0.945 1"></feFuncB>
-            <feFuncA type="table" tableValues="0 1"></feFuncA>
-        </feComponentTransfer> -->
-        <feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
-            <feFuncR type="table" tableValues="0.0 1"></feFuncR>
-            <feFuncG type="table" tableValues="0.2784 1"></feFuncG>
-            <feFuncB type="table" tableValues="0.5255 1"></feFuncB>
-            <feFuncA type="table" tableValues="0 1"></feFuncA>
-        </feComponentTransfer>
-    </filter>
-
-    <filter id="duotone-blue-invert">
-        <feColorMatrix type="matrix" result="gray"
-            values="0.95 0 0 0 0
-					0.95 0 0 0 0
-					0.95 0 0 0 0
-					0 0 0 0 1" >
-        </feColorMatrix>
-
-        <feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
-            <feFuncR type="table" tableValues="1 0"></feFuncR>
-            <feFuncG type="table" tableValues="1 0.2784"></feFuncG>
-            <feFuncB type="table" tableValues="1 0.5255"></feFuncB>
-            <feFuncA type="table" tableValues="0 1"></feFuncA>
-        </feComponentTransfer>
-    </filter>
-
-    <filter id="duotone-green">
-        <feColorMatrix type="matrix" result="gray"
-            values="0.35 0 0 0 0 
-                    0.35 0 0 0 0
-                    0.35 0 0 0 0
-                    0 0 0 1 0" >
-        </feColorMatrix>
-
-        <feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
-            <feFuncR type="table" tableValues="0.1843 1"></feFuncR>
-            <feFuncG type="table" tableValues="0.4902 1"></feFuncG>
-            <feFuncB type="table" tableValues="0.1961 1"></feFuncB>
-            <feFuncA type="table" tableValues="0 1"></feFuncA>
-        </feComponentTransfer>
-    </filter>
-
-    <filter id="duotone-dark-green">
-        <feColorMatrix type="matrix" result="gray"
-            values="0.15 0 0 0 0 
-                    0.35 0 0 0 0
-                    0.15 0 0 0 0
-                    0 0 0 1 0" >
-        </feColorMatrix>
-
-        <feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
-            <feFuncR type="table" tableValues="0.2000 1"></feFuncR>
-            <feFuncG type="table" tableValues="0.4902 1"></feFuncG>
-            <feFuncB type="table" tableValues="0.2000 1"></feFuncB>
-            <feFuncA type="table" tableValues="0 1"></feFuncA>
-        </feComponentTransfer>
-    </filter>
-
-    <filter id="duotone-yellow">
-        <feColorMatrix type="matrix" result="gray"
-            values="1 0 0 0 0 
-                    1 0 0 0 0
-                    1 0 0 0 0
-                    0 0 0 1 0" >
-        </feColorMatrix>
-
-        <feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
-            <feFuncR type="table" tableValues="0.9765 0.996"></feFuncR>
-            <feFuncG type="table" tableValues="0.6588 0.918"></feFuncG>
-            <feFuncB type="table" tableValues="0.1451 0.624"></feFuncB>
-            <feFuncA type="table" tableValues="0 1"></feFuncA>
-        </feComponentTransfer>
-    </filter>
-
-    <filter id="duotone-red">
-        <feColorMatrix type="matrix" result="gray"
-            values="0.25 0 0 0 0 
-                    0.25 0 0 0 0
-                    0.25 0 0 0 0
-                    0 0 0 1 0" >
-        </feColorMatrix>
-
-        <feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
-            <feFuncR type="table" tableValues="0.7765 1"></feFuncR>
-            <feFuncG type="table" tableValues="0.1569 1"></feFuncG>
-            <feFuncB type="table" tableValues="0.1569 1"></feFuncB>
-            <feFuncA type="table" tableValues="0 1"></feFuncA>
-        </feComponentTransfer>
-    </filter>
-
-      <filter id="duotone-blue-red">
-        <feColorMatrix type="matrix" result="grayscale"
-          values="1 0 0 0 0
-                  1 0 0 0 0
-                  1 0 0 0 0
-                  0 0 0 1 0" >
-        </feColorMatrix>
-        <feComponentTransfer color-interpolation-filters="sRGB" result="duotone"> 
-            <feFuncR type="table" tableValues="0.9608 0.0"></feFuncR>
-            <feFuncG type="table" tableValues="0.2627 0.2784"></feFuncG>
-            <feFuncB type="table" tableValues="0.2118 0.5255"></feFuncB>
-            <feFuncA type="table" tableValues="0 1"></feFuncA>
-        </feComponentTransfer>
-      </filter>
-
-      <filter id="duotone-blue-green">
-        <feColorMatrix type="matrix" result="grayscale"
-          values="1 0 0 0 0
-                  1 0 0 0 0
-                  1 0 0 0 0
-                  0 0 0 1 0" >
-        </feColorMatrix>
-        <!-- <feComponentTransfer color-interpolation-filters="sRGB" result="duotone"> 
-            <feFuncR type="table" tableValues="0.049 0.396"></feFuncR>
-            <feFuncG type="table" tableValues="0.357 0.669"></feFuncG>
-            <feFuncB type="table" tableValues="0.945 0"></feFuncB>
-            <feFuncA type="table" tableValues="0 1"></feFuncA>
-        </feComponentTransfer> -->
-        <feComponentTransfer color-interpolation-filters="sRGB" result="duotone"> 
-            <feFuncR type="table" tableValues="0.1020 0.2980"></feFuncR>
-            <feFuncG type="table" tableValues="0.4627 0.6863"></feFuncG>
-            <feFuncB type="table" tableValues="0.8235 0.3137"></feFuncB>
-            <feFuncA type="table" tableValues="0 1"></feFuncA>
-        </feComponentTransfer>  
-      </filter>
-
-      <filter id="duotone-green-yellow">
-        <feColorMatrix type="matrix" result="grayscale"
-          values="0.75 0 0 0 0
-                  0.75 0 0 0 0
-                  0.75 0 0 0 0
-                  0 0 0 1 0" >
-        </feColorMatrix>
-        <feComponentTransfer color-interpolation-filters="sRGB" result="duotone"> 
-            <feFuncR type="table" tableValues="0.1059 0.9843 "></feFuncR>
-            <feFuncG type="table" tableValues="0.3686 0.7529 "></feFuncG>
-            <feFuncB type="table" tableValues="0.1255 0.1804"></feFuncB>
-            <feFuncA type="table" tableValues="0 1"></feFuncA>
-        </feComponentTransfer> 
-      </filter>
-
-      <filter id="duotone-yellow-red">
-        <feColorMatrix type="matrix" result="grayscale"
-          values="1 0 0 0 0
-                  1 0 0 0 0
-                  1 0 0 0 0
-                  0 0 0 1 0" >
-        </feColorMatrix>
-        <feComponentTransfer color-interpolation-filters="sRGB" result="duotone"> 
-            <feFuncR type="table" tableValues="0.7765 0.9765"></feFuncR>
-            <feFuncG type="table" tableValues="0.1569 0.6588"></feFuncG>
-            <feFuncB type="table" tableValues="0.1569 0.1451"></feFuncB>
-            <feFuncA type="table" tableValues="0 1"></feFuncA>
-        </feComponentTransfer> 
-      </filter>
-
-    </svg> 
-</template>
-

package/src/components/tools/TextMedia.vue

@@ -1,44 +0,0 @@
-<script setup lang="ts">
-import {computed, defineAsyncComponent} from "vue"
-import { useRenderText } from '../../composables/useRenderText';
-import { useComponent } from "../../composables/useComponent";
-import type { NestedComponents } from "../../types/Component";
-
-interface Props{
-    media?:NestedComponents;
-    text:string;
-    cols?:boolean;
-    textLeft?:boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-})
-
-const currentRenderComponent = computed(() => {
-	if (props.media) {
-		const componentToLoad = useComponent(props.media.type);
-		return defineAsyncComponent(() => import(`../${componentToLoad.path}/${componentToLoad.name}.vue`));
-	}
-	return null;
-});
-
-const colsStyle = computed(()=> {
-    return props.cols ? 'flex items-center justify-center gap-1' : ''
-})
-
-const alignText = computed(()=>{
-    return props.textLeft ? '' : 'justify-center';
-})
-
-</script>
-
-<template>
-    <div :class="colsStyle">
-        <div :class="`w-full flex ${alignText}`" v-html="useRenderText(text)"></div>
-        <div class="w-full" v-if="currentRenderComponent && media">
-           <component 
-            :is="currentRenderComponent" 
-            v-bind="{...media.data}"/>
-        </div>
-    </div>
-</template>

package/src/components/tools/TimelineItem.vue

@@ -1,141 +0,0 @@
-<script setup lang="ts">
-import { ref, toRefs, onMounted, computed, watch } from "vue";
-import { useImage } from '@vueuse/core'
-import { useRenderText } from "../../composables/useRenderText";
-///types with Capital letters... object with styles same name in lowercase
-import { type EventTimeLine, type TimeLineDate, colorsTimeLine } from "../../types/TimeLine";
-import EpImg from "../basics/EpImg.vue";
-
-interface Props {
-  title?: string | null;
-  date?: string;
-  event: EventTimeLine;
-  collapse?:boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  title: 'En savoir plus',
-  type: 'base',
-  collapse:false
-});
-
-
-const showDiv = ref(true);
-const collapsible = ref();
-
-onMounted(() => {
-  var content = collapsible.value
-  if (showDiv.value) {
-    content.style.maxHeight = content.scrollHeight + "px";
-  }
-})
-
-function toggleDivVisibility() {
-  showDiv.value = !showDiv.value;
-  var content = collapsible.value
-  if (content.style.maxHeight) {
-    content.style.maxHeight = null;
-  } else {
-    content.style.maxHeight = content.scrollHeight + "px";
-  }
-  //add transition 
-  if (!content.style.transition) {
-    content.style.transition = 'max-height 0.2s ease-out';
-  }
-}
-
-const start_date = computed(() => {
-  if (props.event.start_date) {
-    return parseTimeline(props.event.start_date)
-  }
-  return null
-})
-
-const end_date = computed(() => {
-  if (props.event.end_date) {
-    return parseTimeline(props.event.end_date)
-  }
-  return null
-})
-
-const src = computed(()=>{
-   if(props.event.media.url.trim() !== ""){
-    return props.event.media.url
-   }
-   return null
-})
-
-const colorEvent = computed(()=> {
-  if(props.event.tag){
-     return colorsTimeLine[props.event.tag.color]
-  }
-  return colorsTimeLine.noTag
-})
-
-const parseTimeline = (timeDate: TimeLineDate) => {
-  // Check if all the date fields are null, undefined, or empty
-  const { day, month, year, hour } = timeDate;
-
-  // Build the hour string, even if there's no date
-  const hoursStr = hour || '';
-  const minutesStr = timeDate.minute ? `:${timeDate.minute}` : ``;
-
-  // If there is no valid date (day, month, or year), return only the hour if present
-  if (!day && !month && !year) {
-    return hoursStr ? { date: null, hour: hoursStr + minutesStr } : null;
-  }
-
-  // Build the date string
-  const dayStr = day ? `${day}/` : ``;
-  const monthStr = month ? `${month}/` : ``;
-  const yearStr = year || '';
-
-  // Return formatted date and time
-  return {
-    date: dayStr + monthStr + yearStr,
-    hour: hoursStr + minutesStr,
-  };
-}
-
-const {  event } = toRefs(props)
-</script>
-
-<template>
-  <div
-    :class="`cursor-pointer ml-10 relative flex items-center p-2 ${colorEvent.border} border-2 rounded-r-lg mb-8 flex-col md:flex-row space-y-4 md:space-y-0`"
-    @click="toggleDivVisibility">
-    <!-- Dot -->
-    <div
-      :class="`w-5 h-5 bg-white dark:bg-dark border-2 ${colorEvent.border} absolute -left-12 transform -translate-x-2/4 rounded-full z-10 mt-2 md:mt-0`">
-    </div>
-    <!-- Line  -->
-    <div :class="`w-10 border ${colorEvent.border} absolute -left-10 z-0`"></div>
-    <div>
-      <div :class="`${colorEvent.text} text-sm`" >
-        <!-- sur protheus on est trop laxes ... mais on peut avoir plusieurs cas :/ -->
-        <span v-if="start_date?.date" class="font-bold">{{ start_date.date }}</span>
-        <span v-if="start_date?.hour" class="text-xs ml-1">{{ start_date.hour }}</span>
-        <span v-if="end_date?.date" class="mx-4">-</span>
-        <span v-if="end_date?.date" class="font-bold">{{ end_date.date }}</span>
-        <span v-if="end_date?.hour" class="text-xs ml-1"> {{ end_date.hour }}</span>
-        
-      </div>
-      <h2 :class="`text-2xl ${colorEvent.text}`">{{ event.text?.headline }}</h2>
-      <!-- Content  -->
-      <div ref="collapsible" class="content">
-        <div :class="`${src?'flex':''} py-4`">
-          <div v-if="src" class="flex-1">
-            <EpImg noModal cols="8" :src="src" :alt="event.text?.headline" ></EpImg>
-          </div>
-          <div class="flex-1" v-html="useRenderText(event.text.text)"></div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.content {
-  max-height: 0;
-  overflow: hidden;
-}</style>