Added dynamic layouts to the composite loader
This commit is contained in:
@ -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>
|
||||
|
Reference in New Issue
Block a user