Added dynamic layouts to the composite loader

This commit is contained in:
Samuel Andert 2023-07-22 09:58:26 +02:00
parent 1ba7a9a28b
commit d021281df3
3 changed files with 45 additions and 35 deletions

View File

@ -1,7 +1,6 @@
<script lang="ts">
import components from '$lib/components.ts';
export let componentsData = [];
export let name = '';
async function getComponent(componentName) {
if (components[componentName]) {
@ -12,16 +11,14 @@
}
</script>
{#each componentsData as component (component.id)}
{#await getComponent(component.componentName) then Component}
{#if Component}
<svelte:component
this={Component}
name={component.name}
componentsData={component.components}
/>
{:else}
<p>Component {component.componentName} not found.</p>
{/if}
{/await}
{/each}
<div class="grid" style="display: grid; {componentsData.layout || ''}">
{#each componentsData.children as component (component.id)}
{#await getComponent(component.componentName) then Component}
{#if Component}
<svelte:component this={Component} {...component.props} class={component.slot} />
{:else}
<p>Component {component.componentName} not found.</p>
{/if}
{/await}
{/each}
</div>

View File

@ -4,4 +4,7 @@
</script>
<Provider />
<slot />
<div class="w-screen h-screen overflow-hidden relative">
<slot />
</div>

View File

@ -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'
}
]
};
</script>
<Composite {componentsData} name="Main Composite" />
<Composite {componentsData} />
<!-- <LitStatus />
<AuthSign /> -->