timo/client
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Anpassung Formular-Editor

Browse Source
This commit is contained in:
= 2025-02-23 19:13:47 +01:00
parent ea9f6bcf7c
commit a83b49608c
2 changed files with 14 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/formDesigner/ComponentRenderer.vue
View File

@ -1,18 +1,18 @@
<template> <template>
<div> <div>
{{ resolvedComponent }} --
<component :is="resolvedComponent" v-bind="element" /> <component :is="resolvedComponent" v-bind="element" />
</div> </div>
</template> </template>
<script> <script>
import { defineComponent } from "vue"; import { defineComponent, defineAsyncComponent } from "vue";
import InputTextRenderer from "@/components/formDesigner/formRenderer/InputTextRenderer.vue";
import InputNumberRenderer from "@/components/formDesigner/formRenderer/InputNumberRenderer.vue"; const InputTextRenderer = defineAsyncComponent(() => import("@/components/formDesigner/formRenderer/InputTextRenderer.vue"));
import InputDateRenderer from "@/components/formDesigner/formRenderer/InputDateRenderer.vue"; const InputNumberRenderer = defineAsyncComponent(() => import("@/components/formDesigner/formRenderer/InputNumberRenderer.vue"));
import LabelRenderer from "@/components/formDesigner/formRenderer/LabelRenderer.vue"; const InputDateRenderer = defineAsyncComponent(() => import("@/components/formDesigner/formRenderer/InputDateRenderer.vue"));
import ButtonRenderer from "@/components/formDesigner/formRenderer/ButtonRenderer.vue"; const LabelRenderer = defineAsyncComponent(() => import("@/components/formDesigner/formRenderer/LabelRenderer.vue"));
import FlexLayoutRenderer from "@/components/formDesigner/formRenderer/FlexLayoutRenderer.vue"; const ButtonRenderer = defineAsyncComponent(() => import("@/components/formDesigner/formRenderer/ButtonRenderer.vue"));
const FlexLayoutRenderer = defineAsyncComponent(() => import("@/components/formDesigner/formRenderer/FlexLayoutRenderer.vue"));
export default defineComponent({ export default defineComponent({
name: "ComponentRenderer", name: "ComponentRenderer",
@ -22,7 +22,7 @@ export default defineComponent({
InputDateRenderer, InputDateRenderer,
LabelRenderer, LabelRenderer,
ButtonRenderer, ButtonRenderer,
FlexLayoutRenderer, FlexLayoutRenderer, // Jetzt wird es erst geladen, wenn nötig
}, },
props: { props: {
element: { element: {
@ -32,8 +32,6 @@ export default defineComponent({
}, },
computed: { computed: {
resolvedComponent() { resolvedComponent() {
console.log("ComponentRenderer - Rendering:", this.element.type, this.element);
const componentMap = { const componentMap = {
FlexLayout: "FlexLayoutRenderer", FlexLayout: "FlexLayoutRenderer",
Label: "LabelRenderer", Label: "LabelRenderer",
@ -42,16 +40,7 @@ export default defineComponent({
InputDate: "InputDateRenderer", InputDate: "InputDateRenderer",
Button: "ButtonRenderer", Button: "ButtonRenderer",
}; };
return componentMap[this.element.type] || null;
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;
}, },
}, },
}); });

7
src/components/formDesigner/formRenderer/FlexLayoutRenderer.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<div> <div>
<p style="color: red; font-weight: bold">🔥 FlexLayoutRenderer geladen! ({{ direction }})</p>
<div class="flex-layout" :class="computedDirection"> <div class="flex-layout" :class="computedDirection">
<component-renderer v-for="(item, key) in items" :key="key" :element="item" /> <component-renderer v-for="(item, key) in items" :key="key" :element="item" />
</div> </div>
@ -24,8 +23,10 @@ export default defineComponent({
required: true, required: true,
}, },
}, },
created() { computed: {
console.log("🔥 `FlexLayoutRenderer` wurde geladen!", this.direction, this.items); computedDirection() {
return this.direction === "horizontal" ? "horizontal" : "vertical";
},
}, },
}); });
</script> </script>