workaround to strange onMount bug with many Tabs components

This commit is contained in:
Keviin Åberg Kultalahti 2021-05-20 16:46:20 +02:00
parent 1a4a13d431
commit 8175fdd7a0
1 changed files with 24 additions and 17 deletions

View File

@ -1,4 +1,5 @@
<script> <script>
import { onMount } from "svelte"
import { import {
Button, Button,
Detail, Detail,
@ -19,6 +20,7 @@
export let template export let template
let htmlEditor let htmlEditor
let mounted = false
$: selectedTemplate = $email?.templates?.find( $: selectedTemplate = $email?.templates?.find(
({ purpose }) => purpose === template ({ purpose }) => purpose === template
@ -39,6 +41,9 @@
function setTemplateBinding(binding) { function setTemplateBinding(binding) {
htmlEditor.update((selectedTemplate.contents += `{{ ${binding.name} }}`)) htmlEditor.update((selectedTemplate.contents += `{{ ${binding.name} }}`))
} }
onMount(() => {
mounted = true
})
</script> </script>
<Page wide> <Page wide>
@ -78,22 +83,24 @@
/> />
<div class="bindings-editor"> <div class="bindings-editor">
<Detail size="L">Bindings</Detail> <Detail size="L">Bindings</Detail>
<Tabs selected="Template"> {#if mounted}
<Tab title="Template"> <Tabs selected="Template">
<TemplateBindings <Tab title="Template">
title="Template Bindings" <TemplateBindings
bindings={templateBindings} title="Template Bindings"
onBindingClick={setTemplateBinding} bindings={templateBindings}
/> onBindingClick={setTemplateBinding}
</Tab> />
<Tab title="Common"> </Tab>
<TemplateBindings <Tab title="Common">
title="Common Bindings" <TemplateBindings
bindings={$email?.definitions?.bindings?.common} title="Common Bindings"
onBindingClick={setTemplateBinding} bindings={$email?.definitions?.bindings?.common}
/> onBindingClick={setTemplateBinding}
</Tab> />
</Tabs> </Tab>
</Tabs>
{/if}
</div> </div>
</div></Tab </div></Tab
> >
@ -108,7 +115,7 @@
<style> <style>
.template-editor { .template-editor {
display: grid; display: grid;
grid-template-columns: 1fr 20%; grid-template-columns: 1fr minmax(250px, 20%);
grid-gap: var(--spacing-xl); grid-gap: var(--spacing-xl);
margin-top: var(--spacing-xl); margin-top: var(--spacing-xl);
} }