workaround to strange onMount bug with many Tabs components
This commit is contained in:
parent
1a4a13d431
commit
8175fdd7a0
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue