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>