From 9666310ebfa9125ea0d2771b63166b39d7179999 Mon Sep 17 00:00:00 2001
From: philipp lang <philipp@aweos.de>
Date: Sun, 4 Feb 2024 01:11:33 +0100
Subject: [PATCH] Add event description

---
 src/EventDescription.ce.vue | 25 +++++++++++++++++++++
 src/main.js                 |  5 ++++-
 vite.config.js              | 45 ++++++++++++++++++-------------------
 3 files changed, 51 insertions(+), 24 deletions(-)
 create mode 100644 src/EventDescription.ce.vue

diff --git a/src/EventDescription.ce.vue b/src/EventDescription.ce.vue
new file mode 100644
index 0000000..39c17ec
--- /dev/null
+++ b/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>
diff --git a/src/main.js b/src/main.js
index 221b39b..007d28f 100644
--- a/src/main.js
+++ b/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));
diff --git a/vite.config.js b/vite.config.js
index b56c4c0..536aa1c 100644
--- a/vite.config.js
+++ b/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,
+    },
 });