63 lines
1.4 KiB
Svelte
63 lines
1.4 KiB
Svelte
<script>
|
|
import { onMount } from 'svelte'
|
|
import {buildStyle} from "./buildStyle";
|
|
|
|
export let gridTemplateRows ="";
|
|
export let gridTemplateColumns ="";
|
|
export let children = [];
|
|
export let width = "auto";
|
|
export let height = "auto";
|
|
export let containerClass="";
|
|
export let itemContainerClass="";
|
|
|
|
/*"gridColumnStart":"string",
|
|
"gridColumnEnd":"string",
|
|
"gridRowStart":"string",
|
|
"gridRowEnd":"string"*/
|
|
|
|
|
|
export let _bb;
|
|
|
|
let style="";
|
|
let htmlElements = {};
|
|
|
|
$ : {
|
|
if(_bb && htmlElements) {
|
|
for(let el in htmlElements) {
|
|
_bb.initialiseComponent(
|
|
children[el].control,
|
|
htmlElements[el]
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
const childStyle = child =>
|
|
buildStyle({
|
|
"grid-column-start": child.gridColumnStart,
|
|
"grid-column-end": child.gridColumnEnd,
|
|
"grid-column": child.gridColumn,
|
|
"grid-row-start": child.gridRowStart,
|
|
"grid-row-end": child.gridRowStart,
|
|
"grid-row": child.gridRow,
|
|
});
|
|
|
|
</script>
|
|
|
|
<div class="root {containerClass}"
|
|
style="width: {width}; height: {height}; grid-template-columns: {gridTemplateColumns}; grid-template-rows: {gridTemplateRows};">
|
|
{#each children as child, index}
|
|
<div class="{itemContainerClass}"
|
|
style={childStyle(child)}
|
|
bind:this={htmlElements[index]}>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
|
|
<style>
|
|
|
|
.root {
|
|
display: grid;
|
|
}
|
|
|
|
</style> |