samuelandert.eth/auth.andert.me
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(Composite.svelte): update layout interface

Browse Source 
Refactor the Composite component to support a new layout format with additional customization through the customTailwind property. This change simplifies the way layouts are defined and provides greater flexibility for design customizations.

BREAKING CHANGE: The layout interface in Composite.svelte has been modified. Components that depend on the old layout structure may need to be updated.
This commit is contained in:
Samuel Andert
2023-07-25 16:10:15 +02:00
parent b560897e17
commit 75d58eafea
2 changed files with 16 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/lib/components/Composite.svelte
View File

@ -8,6 +8,12 @@
layout: '',
children: []
};
$: layoutStyle = `
grid-template-areas: ${componentsData.layout.areas};
gap: ${componentsData.layout.gap || '0px'};
grid-template-columns: ${componentsData.layout.columns || '1fr'};
grid-template-rows: ${componentsData.layout.rows || 'auto'};
`;
function initializeComponentState(child) {
child.store = createComponentStore(child.id, child.state || {});
@ -86,7 +92,10 @@
}
</script>
<div class="grid w-full h-full" style="display: grid; {componentsData.layout || ''}">
<div
class={`grid w-full h-full ${componentsData.layout.customTailwind || ''}`}
style="display: grid; {layoutStyle}"
>
{#each componentsData.children as component (component.id)}
{#await Promise.all( [getComponent(component.componentName), getServiceProps(component)] ) then [Component, serviceProps]}
{#if Component}