2020-02-15 00:51:45 +13:00
|
|
|
<script>
|
2020-02-26 04:21:23 +13:00
|
|
|
import { cssVars, createClasses } from "./cssVars"
|
2020-02-22 00:43:21 +13:00
|
|
|
|
2020-02-26 04:21:23 +13:00
|
|
|
export let className = ""
|
|
|
|
export let onLoad
|
2020-03-05 04:20:53 +13:00
|
|
|
export let type = "div"
|
2020-02-26 04:21:23 +13:00
|
|
|
export let _bb
|
2020-02-22 00:43:21 +13:00
|
|
|
|
2020-02-26 04:21:23 +13:00
|
|
|
let containerElement
|
|
|
|
let hasLoaded
|
|
|
|
let currentChildren
|
2020-02-22 00:43:21 +13:00
|
|
|
|
2020-02-26 04:21:23 +13:00
|
|
|
$: {
|
|
|
|
if (containerElement) {
|
|
|
|
_bb.attachChildren(containerElement)
|
|
|
|
if (!hasLoaded) {
|
|
|
|
_bb.call(onLoad)
|
|
|
|
hasLoaded = true
|
|
|
|
}
|
2020-02-15 00:51:45 +13:00
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
2020-02-26 04:21:23 +13:00
|
|
|
{#if type === 'div'}
|
2020-05-20 04:00:53 +12:00
|
|
|
<div bind:this={containerElement} />
|
2020-02-26 04:21:23 +13:00
|
|
|
{:else if type === 'header'}
|
2020-05-20 04:00:53 +12:00
|
|
|
<header bind:this={containerElement} />
|
2020-02-26 04:21:23 +13:00
|
|
|
{:else if type === 'main'}
|
2020-05-20 04:00:53 +12:00
|
|
|
<main bind:this={containerElement} />
|
2020-02-26 04:21:23 +13:00
|
|
|
{:else if type === 'footer'}
|
2020-05-20 04:00:53 +12:00
|
|
|
<footer bind:this={containerElement} />
|
2020-02-26 04:21:23 +13:00
|
|
|
{:else if type === 'aside'}
|
2020-05-20 04:00:53 +12:00
|
|
|
<aside bind:this={containerElement} />
|
2020-02-26 04:21:23 +13:00
|
|
|
{:else if type === 'summary'}
|
2020-05-20 04:00:53 +12:00
|
|
|
<summary bind:this={containerElement} />
|
2020-02-26 04:21:23 +13:00
|
|
|
{:else if type === 'details'}
|
2020-05-20 04:00:53 +12:00
|
|
|
<details bind:this={containerElement} />
|
2020-02-26 04:21:23 +13:00
|
|
|
{:else if type === 'article'}
|
2020-05-20 04:00:53 +12:00
|
|
|
<article bind:this={containerElement} />
|
2020-02-26 04:21:23 +13:00
|
|
|
{:else if type === 'nav'}
|
2020-05-20 04:00:53 +12:00
|
|
|
<nav bind:this={containerElement} />
|
2020-02-26 04:21:23 +13:00
|
|
|
{:else if type === 'mark'}
|
2020-05-20 04:00:53 +12:00
|
|
|
<mark bind:this={containerElement} />
|
2020-02-26 04:21:23 +13:00
|
|
|
{:else if type === 'figure'}
|
2020-05-20 04:00:53 +12:00
|
|
|
<figure bind:this={containerElement} />
|
2020-02-26 04:21:23 +13:00
|
|
|
{:else if type === 'figcaption'}
|
2020-05-20 04:00:53 +12:00
|
|
|
<figcaption bind:this={containerElement} />
|
2020-02-26 04:21:23 +13:00
|
|
|
{:else if type === 'paragraph'}
|
2020-05-20 04:00:53 +12:00
|
|
|
<p bind:this={containerElement} />
|
2020-02-15 00:51:45 +13:00
|
|
|
{/if}
|