From a83b49608ce5bef84b06da95ebf04703279bdcbb Mon Sep 17 00:00:00 2001
From: = <timo_reichl@aol.com>
Date: Sun, 23 Feb 2025 19:13:47 +0100
Subject: [PATCH] Anpassung Formular-Editor

---
 .../formDesigner/ComponentRenderer.vue        | 31 ++++++-------------
 .../formRenderer/FlexLayoutRenderer.vue       |  7 +++--
 2 files changed, 14 insertions(+), 24 deletions(-)

diff --git a/src/components/formDesigner/ComponentRenderer.vue b/src/components/formDesigner/ComponentRenderer.vue
index 518f937..e5c99c4 100644
--- a/src/components/formDesigner/ComponentRenderer.vue
+++ b/src/components/formDesigner/ComponentRenderer.vue
@@ -1,18 +1,18 @@
 <template>
   <div>
-    {{ resolvedComponent }} --
     <component :is="resolvedComponent" v-bind="element" />
   </div>
 </template>
 
 <script>
-import { defineComponent } from "vue";
-import InputTextRenderer from "@/components/formDesigner/formRenderer/InputTextRenderer.vue";
-import InputNumberRenderer from "@/components/formDesigner/formRenderer/InputNumberRenderer.vue";
-import InputDateRenderer from "@/components/formDesigner/formRenderer/InputDateRenderer.vue";
-import LabelRenderer from "@/components/formDesigner/formRenderer/LabelRenderer.vue";
-import ButtonRenderer from "@/components/formDesigner/formRenderer/ButtonRenderer.vue";
-import FlexLayoutRenderer from "@/components/formDesigner/formRenderer/FlexLayoutRenderer.vue";
+import { defineComponent, defineAsyncComponent } from "vue";
+
+const InputTextRenderer = defineAsyncComponent(() => import("@/components/formDesigner/formRenderer/InputTextRenderer.vue"));
+const InputNumberRenderer = defineAsyncComponent(() => import("@/components/formDesigner/formRenderer/InputNumberRenderer.vue"));
+const InputDateRenderer = defineAsyncComponent(() => import("@/components/formDesigner/formRenderer/InputDateRenderer.vue"));
+const LabelRenderer = defineAsyncComponent(() => import("@/components/formDesigner/formRenderer/LabelRenderer.vue"));
+const ButtonRenderer = defineAsyncComponent(() => import("@/components/formDesigner/formRenderer/ButtonRenderer.vue"));
+const FlexLayoutRenderer = defineAsyncComponent(() => import("@/components/formDesigner/formRenderer/FlexLayoutRenderer.vue"));
 
 export default defineComponent({
   name: "ComponentRenderer",
@@ -22,7 +22,7 @@ export default defineComponent({
     InputDateRenderer,
     LabelRenderer,
     ButtonRenderer,
-    FlexLayoutRenderer,
+    FlexLayoutRenderer, // Jetzt wird es erst geladen, wenn nötig
   },
   props: {
     element: {
@@ -32,8 +32,6 @@ export default defineComponent({
   },
   computed: {
     resolvedComponent() {
-      console.log("ComponentRenderer - Rendering:", this.element.type, this.element);
-
       const componentMap = {
         FlexLayout: "FlexLayoutRenderer",
         Label: "LabelRenderer",
@@ -42,16 +40,7 @@ export default defineComponent({
         InputDate: "InputDateRenderer",
         Button: "ButtonRenderer",
       };
-
-      const resolved = componentMap[this.element.type];
-
-      if (!resolved) {
-        console.warn(`⚠ WARNUNG: Unbekannter Typ in ComponentRenderer -> ${this.element.type}`);
-      } else {
-        console.log(`✅ Vue rendert ${resolved}`);
-      }
-
-      return resolved || null;
+      return componentMap[this.element.type] || null;
     },
   },
 });
diff --git a/src/components/formDesigner/formRenderer/FlexLayoutRenderer.vue b/src/components/formDesigner/formRenderer/FlexLayoutRenderer.vue
index d5453ea..335dbfd 100644
--- a/src/components/formDesigner/formRenderer/FlexLayoutRenderer.vue
+++ b/src/components/formDesigner/formRenderer/FlexLayoutRenderer.vue
@@ -1,6 +1,5 @@
 <template>
   <div>
-    <p style="color: red; font-weight: bold">🔥 FlexLayoutRenderer geladen! ({{ direction }})</p>
     <div class="flex-layout" :class="computedDirection">
       <component-renderer v-for="(item, key) in items" :key="key" :element="item" />
     </div>
@@ -24,8 +23,10 @@ export default defineComponent({
       required: true,
     },
   },
-  created() {
-    console.log("🔥 `FlexLayoutRenderer` wurde geladen!", this.direction, this.items);
+  computed: {
+    computedDirection() {
+      return this.direction === "horizontal" ? "horizontal" : "vertical";
+    },
   },
 });
 </script>