initial upload

assets/start.js

@@ -0,0 +1,65 @@
+const { loadModule } = window['vue3-sfc-loader'];
+
+const options = {
+    moduleCache: {
+        vue: Vue,
+    },
+    getFile(url) {
+        return fetch(url).then((resp) =>
+            resp.ok ? resp.text() : Promise.reject(resp)
+        );
+    },
+    addStyle(styleStr) {
+        const style = document.createElement('style');
+        style.textContent = styleStr;
+        const ref = document.head.getElementsByTagName('style')[0] || null;
+        document.head.insertBefore(style, ref);
+    },
+};
+
+var vueApp = Vue.createApp({
+    data() {
+        return {
+            modeEdit: false,
+            elements: [{
+                id: '234bi23b4ikj',
+                type: 'jumbotron',
+                title: 'my super awesome title',
+                text: 'there is nothing better on this planet'
+            },
+            {
+                id: '234bi23b4ikj',
+                type: 'grid',
+                title: 'Group 1',
+                columns: 2,
+                elements: [{
+                    id: '234bi23b4ikj',
+                    type: 'link',
+                    link: 'https://google.com/',
+                    title: 'Tisoware',
+                    description: 'Elektronische Arbeitszeiterfassung'
+                },
+                {
+                    id: '234bi23b4ikj',
+                    type: 'link',
+                    link: 'https://google.com/',
+                    title: 'IT Helpdesk',
+                    description: 'Helpdesk der operativen IT für Supportanfragen'
+                }]
+            }]
+        }
+    },
+    methods: {
+        toggleEditor()
+        {
+            this.modeEdit = !this.modeEdit;
+        }
+    },
+    components: {
+        DynamicRoot: Vue.defineAsyncComponent(() =>
+            loadModule('/vue/root.vue', options)
+        ),
+    },
+}).mount('#app');
+
+

assets/vue/grid.vue

@@ -0,0 +1,33 @@
+<template>
+    <div :class="[
+            'grid',
+            'grid-cols-1',
+            'md:grid-cols-2',
+            'lg:grid-cols-' + columns,
+            'gap-6',
+            'relative'
+        ]">
+        <div v-if="title" class="col-span-full">
+            <h5 class="font-medium text-gray-700 dark:text-gray-300 text-2xl">{{ title }}</h5>
+        </div>
+        <button v-if="this.$root.modeEdit" type="button" title="Edit Element"
+            class="text-white bg-blue-700 hover:bg-blue-800 outline-none rounded-lg text-center dark:bg-blue-600 dark:hover:bg-blue-700 absolute top-2 right-2">
+            <i class="ti ti-edit mx-3 my-2 block"></i>
+        </button>
+        <slot>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+        
+        };
+    },
+    props: {
+        columns: Number,
+        title: String
+    },
+};
+</script>

assets/vue/jumbotron.vue

@@ -0,0 +1,28 @@
+<template>
+    <section class="w-full relative">
+        <button v-if="this.$root.modeEdit" type="button" title="Edit Element" class="text-white bg-blue-700 hover:bg-blue-800 outline-none rounded-lg text-center dark:bg-blue-600 dark:hover:bg-blue-700 absolute top-2 right-2">
+            <i class="ti ti-edit mx-3 my-2 block"></i>
+        </button>
+        <div class="py-4 px-4 mx-auto max-w-screen-xl text-center">
+            <h1 class="my-4 font-extrabold tracking-tight leading-none text-4xl md:text-5xl lg:text-6xl">
+                {{ title }}
+            </h1>
+            <p class="my-4 text-lg font-normal text-gray-500 lg:text-xl sm:px-16 lg:px-48">
+                <slot>
+            </p>
+        </div>
+    </section>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+        
+        };
+    },
+    props: {
+        title: String
+    },
+};
+</script>

assets/vue/link.vue

@@ -0,0 +1,25 @@
+<template>
+    <a :href="link" target="_blank" class="p-8 border rounded-md bg-gray-50 dark:bg-gray-700 border-gray-200 dark:border-gray-600 hover:border-blue-400 ">
+        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
+            {{ title }}
+        </h5>
+        <p class="font-normal text-gray-500 dark:text-gray-400 text-md">
+            {{ description }}
+        </p>
+    </a>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+        
+        };
+    },
+    props: {
+        link: String,
+        title: String,
+        description: String
+    },
+};
+</script>

assets/vue/root.vue

@@ -0,0 +1,45 @@
+<template>
+    <template v-for="(element, elementIndex) in elements">
+        <div class="container flex justify-end">
+            <button v-if="this.$root.modeEdit" type="button" class="text-white bg-blue-700 hover:bg-blue-800 outline-none rounded-lg text-center dark:bg-blue-600 dark:hover:bg-blue-700 absolute top-2 right-2" title="Edit Element">
+                <i class="ti ti-edit mx-3 my-2 block"></i>
+            </button>
+        </div>
+        <tailwind-jumbotron v-if="element.type == 'jumbotron'" :title="element.title">
+            {{ element.text }}
+        </tailwind-jumbotron>
+        <tailwind-grid v-if="element.type == 'grid'" :columns="element.columns" :title="element.title">
+            <dynamic-root :elements="element.elements"></dynamic-root>
+        </tailwind-grid>
+        <tailwind-link v-if="element.type == 'link'" :link="element.link" :title="element.title" :description="element.description">
+
+        </tailwind-link>
+    </template>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+        
+        };
+    },
+    props: {
+        elements: Array
+    },
+    components: {
+        TailwindJumbotron: Vue.defineAsyncComponent(() =>
+            loadModule('/vue/jumbotron.vue', options)
+        ),
+        TailwindGrid: Vue.defineAsyncComponent(() =>
+            loadModule('/vue/grid.vue', options)
+        ),
+        TailwindLink: Vue.defineAsyncComponent(() =>
+            loadModule('/vue/link.vue', options)
+        ),
+        DynamicRoot: Vue.defineAsyncComponent(() =>
+            loadModule('/vue/root.vue', options)
+        ),
+    },
+};
+</script>

assets/widgets.jumbotron.js

@@ -0,0 +1,11 @@
+
+let jumbotron = Vue.defineComponent('tailwind-jumbotron',
+    {
+        props: {
+            title: String,
+            text: String
+        },
+        template: '#template-jumbotron'
+    });
+
+// customElements.define('tailwind-jumbotron', jumbotron)