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