folding

docs/md/projektkonfig/collections/fields.md

@@ -142,3 +142,78 @@ Wenn man das Input element direkt bearbeiten möchte (Bspw. readonly oder ähnli
 ```yaml
 inputProps: { readonly: true, placeholder: { de: "Wert wird automatisch gesetzt", en: "Value is set automatically" } }
 ```
+
+## folding
+
+Das folding Objekt ist ebenfalls ein Teil im Meta object und dient dazu, type ObjectArray einen Wert in den Header im HTML einzuschreiben (von den einzelnen Objekten). Es wird vorallem dazu genutzt, die Rows bzw. Columns der Website rein zu rendern, um praktisch ein direktes Prview zu haben. die Generelle struktur verdeutlicht folgendes Code Beispiel:
+
+```yaml
+folding:
+    previewUnfolded:
+        raw: true
+        eval: |
+            //js
+            (() => {
+              return $this?.title ? "<h2 style=\"\">" + $this.title + "</h2>" : ""
+            })()
+            //!js
+    previewFolded:
+        eval: |
+            //js
+            (async () => {
+                const { getRenderedElement, Row } = await import($projectBase + "_/assets/dist/admin.mjs")
+
+                const container = getRenderedElement(Row, {
+                    props: {
+                        row: Object.assign({}, $this),
+                        contentId: $?.id,
+                        apiBaseURL: $projectBase,
+                    },
+                    addCss: [
+                        $projectBase + "_/assets/dist/index.css",
+                        $projectBase + "_/assets/dist/admin.css",
+                    ],
+                })
+                let style = "max-width: 1220px;"
+                container.style = style
+                return container
+            })()
+            //!js
+```
+
+Hierbei ist raw dafür da, das ganze als HTML direkt zu rendern, wenn es true ist. Der prefiewFolded bereich rendert letzten endes die Seite selbst, für diese Funktionallität ist mehreres notwendig.
+
+-   `Row und Column Komponenten`: Dies sind letzenendes jene komponenten die gerendert werden, daher muss man sie natürlich auch bereits programmiert haben.
+-   `admin.ts file`: Dieses file wird im src Folder platziert und durch ES-Build über den oben genutzen Pfad verfügbar gemacht. Hier ist ein Beispiel:
+
+```ts
+import Row from "./components/Row.svelte"
+import Col from "./components/Col.svelte"
+
+function getRenderedElement(component, options?: { props: { [key: string]: any }; addCss?: string[] }) {
+    const el = document.createElement("div")
+    el.attachShadow({ mode: "open" })
+
+    const target = document.createElement("body")
+    el.shadowRoot.appendChild(target)
+
+    options?.addCss?.forEach((css) => {
+        const link = document.createElement("link")
+        link.rel = "stylesheet"
+        link.href = css
+        link.type = "text/css"
+        el.shadowRoot.appendChild(link)
+    })
+
+    new component({
+        target: target,
+        props: options?.props,
+    })
+
+    return el
+}
+
+export { getRenderedElement, Row, Col }
+```
+
+Das props Attribut nimmt ein Objekt entgegen, welches als keys die namen hat, wie in der svelte Komponente über export exportiert wurde. Die Komponenten werden in eine Shadow Dom geladen, um sie seperat vom restlichen code halten zu können.