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 8bb8fdfb18
commit 302e001eb5
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,6 +83,7 @@
/>
<div class="bindings-editor">
<Detail size="L">Bindings</Detail>
{#if mounted}
<Tabs selected="Template">
<Tab title="Template">
<TemplateBindings
@ -94,6 +100,7 @@
/>
</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);
}