From d021281df378d9dd66caf9da76981b7b4da2f810 Mon Sep 17 00:00:00 2001 From: Samuel Andert Date: Sat, 22 Jul 2023 09:58:26 +0200 Subject: [PATCH] Added dynamic layouts to the composite loader --- src/lib/components/Composite.svelte | 25 +++++++-------- src/routes/+layout.svelte | 5 ++- src/routes/+page.svelte | 50 +++++++++++++++++------------ 3 files changed, 45 insertions(+), 35 deletions(-) diff --git a/src/lib/components/Composite.svelte b/src/lib/components/Composite.svelte index b12f1bc..0bdab60 100644 --- a/src/lib/components/Composite.svelte +++ b/src/lib/components/Composite.svelte @@ -1,7 +1,6 @@ -{#each componentsData as component (component.id)} - {#await getComponent(component.componentName) then Component} - {#if Component} - - {:else} -

Component {component.componentName} not found.

- {/if} - {/await} -{/each} +
+ {#each componentsData.children as component (component.id)} + {#await getComponent(component.componentName) then Component} + {#if Component} + + {:else} +

Component {component.componentName} not found.

+ {/if} + {/await} + {/each} +
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 9c99ca6..fab569f 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -4,4 +4,7 @@ - + +
+ +
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 5187726..9c95329 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -10,32 +10,42 @@ import MessageInput from '$lib/components/MessageInput.svelte'; import Composite from '$lib/components/Composite.svelte'; - let componentsData = [ - { - id: 2, - componentName: 'Composite', - name: 'Nested Composite', - components: [ - { - id: 3, - componentName: 'LitStatus', - name: 'LitStatus' - }, - { - id: 4, - componentName: 'MessageInput', - name: 'MessageInput' - } - ] - } - ]; let pkpWallet; let authSig; let pkpPubKey = '046da3ba67065fd1e2726242ca01cd4601524893f4aa4b0042578fa6cbec28fa8c9a28eb9f7893932fc09717edc9e1db57e157a21eed346247c1db5a722a01f571'; + let componentsData = { + layout: ` + grid-template-areas: + "header" + "main" + "footer"; + grid-template-rows: auto 1fr auto; + `, + children: [ + { + id: 1, + componentName: 'LitStatus', + props: {}, + slot: 'header' + }, + { + id: 2, + componentName: 'Messages', + props: {}, + slot: 'main' + }, + { + id: 3, + componentName: 'MessageInput', + props: {}, + slot: 'footer' + } + ] + }; - +