budibase/packages/standard-components/src/Container.svelte

<script>
  import { cssVars, createClasses } from "./cssVars"

  export let className = ""
  export let onLoad
  export let type = "div"
  export let backgroundColor
  export let color
  export let width
  export let height
  export let borderWidth
  export let borderColor
  export let borderStyle
  export let _bb

  let containerElement
  let hasLoaded
  let currentChildren

  $: cssVariables = {
    backgroundColor,
    color,
    height,
    width,
    borderWidth,
    borderColor,
    borderStyle,
  }
  $: classes = `${createClasses(cssVariables)} ${className}`

  $: {
    if (containerElement) {
      _bb.attachChildren(containerElement)
      if (!hasLoaded) {
        _bb.call(onLoad)
        hasLoaded = true
      }
    }
  }
</script>

{#if type === 'div'}
  <div
    class={classes}
    bind:this={containerElement}
    use:cssVars={cssVariables} />
{:else if type === 'header'}
  <header
    class={classes}
    bind:this={containerElement}
    use:cssVars={cssVariables} />
{:else if type === 'main'}
  <main
    class={classes}
    bind:this={containerElement}
    use:cssVars={cssVariables} />
{:else if type === 'footer'}
  <footer
    class={classes}
    bind:this={containerElement}
    use:cssVars={cssVariables} />
{:else if type === 'aside'}
  <aside
    class={classes}
    bind:this={containerElement}
    use:cssVars={cssVariables} />
{:else if type === 'summary'}
  <summary
    class={classes}
    bind:this={containerElement}
    use:cssVars={cssVariables} />
{:else if type === 'details'}
  <details
    class={classes}
    bind:this={containerElement}
    use:cssVars={cssVariables} />
{:else if type === 'article'}
  <article
    class={classes}
    bind:this={containerElement}
    use:cssVars={cssVariables} />
{:else if type === 'nav'}
  <nav
    class={classes}
    bind:this={containerElement}
    use:cssVars={cssVariables} />
{:else if type === 'mark'}
  <mark
    class={classes}
    bind:this={containerElement}
    use:cssVars={cssVariables} />
{:else if type === 'figure'}
  <figure
    class={classes}
    bind:this={containerElement}
    use:cssVars={cssVariables} />
{:else if type === 'figcaption'}
  <figcaption
    class={classes}
    bind:this={containerElement}
    use:cssVars={cssVariables} />
{:else if type === 'paragraph'}
  <p class={classes} bind:this={containerElement} use:cssVars={cssVariables} />
{/if}

<style>
  .backgroundColor {
    background-color: var(--backgroundColor);
  }

  .color {
    color: var(--color);
  }

  .height {
    height: var(--height);
  }

  .width {
    width: var(--width);
  }

  .borderColor {
    border-color: var(--borderColor);
  }

  .borderWidth {
    border-width: var(--borderWidth);
  }

  .borderStyle {
    border-style: var(--borderStyle);
  }
</style>