Add event description

src/EventDescription.ce.vue

@@ -0,0 +1,25 @@
+<template>
+    <div class="flex space-x-3">
+        <content class="text-gray-800 font-nunito grow" :modelValue="descriptionPayload"></content>
+        <img v-if="image" :src="image"
+            class="hidden sticky top-3 flex-none md:block w-48 h-48 rounded-full border-secondary border-4" />
+    </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import Content from './components/Content.vue';
+
+const props = defineProps({
+    descriptionVarName: {
+        default: () => null,
+        reuired: false,
+    },
+    image: {
+        default: () => null,
+        reuired: false,
+    },
+});
+
+const descriptionPayload = computed(() => (props.descriptionVarName ? window[props.descriptionVarName] : []));
+</script>

src/main.js

@@ -4,8 +4,9 @@ import carousel from 'vue3-carousel/dist/carousel.css?inline';
 import carouselStyle from './carousel.css?inline';
 import EventIndex from './EventIndex.ce.vue';
 import EventForm from './EventForm.ce.vue';
-
+import EventDescription from './EventDescription.ce.vue';
 import axios from 'axios';
+
 window.axios = axios;
 axios.defaults.baseURL = window.document.querySelector('[name="adrema_base_url"]').content;
 
@@ -15,6 +16,8 @@ window.hasKeys = function (object, expected) {
 
 EventForm.styles = [classes, carousel, carouselStyle];
 EventIndex.styles = [classes];
+EventDescription.styles = [classes];
 
 customElements.define('event-form', defineCustomElement(EventForm));
 customElements.define('event-index', defineCustomElement(EventIndex));
+customElements.define('event-description', defineCustomElement(EventDescription));

vite.config.js

@@ -1,29 +1,28 @@
-import { defineConfig } from "vite";
-import vue from "@vitejs/plugin-vue";
+import {defineConfig} from 'vite';
+import vue from '@vitejs/plugin-vue';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [
-    vue({
-      template: {
-        compilerOptions: {
-          isCustomElement: (tag) =>
-            tag.includes("event-form") || tag.includes("event-index"),
+    plugins: [
+        vue({
+            template: {
+                compilerOptions: {
+                    isCustomElement: (tag) => tag.includes('event-form') || tag.includes('event-index') || tag.includes('event-description'),
+                },
+            },
+        }),
+    ],
+    build: {
+        lib: {
+            entry: './src/main.js',
+            name: 'main',
+            fileName: 'main',
         },
-      },
-    }),
-  ],
-  build: {
-    lib: {
-      entry: "./src/main.js",
-      name: "main",
-      fileName: "main",
     },
-  },
-  define: {
-    "process.env": process.env,
-  },
-  server: {
-    port: 5174,
-  },
+    define: {
+        'process.env': process.env,
+    },
+    server: {
+        port: 5174,
+    },
 });