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>
<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;
},
},
});

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

@ -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>