Improve combo refresh logic

This commit is contained in:
space-nuko
2023-05-10 15:35:22 -05:00
parent 9097705a1a
commit 7aa17581d0
7 changed files with 204 additions and 75 deletions

View File

@@ -0,0 +1,44 @@
<script lang="ts">
import { createEventDispatcher } from "svelte";
export let label: string = "";
export let open: boolean = true;
const dispatch = createEventDispatcher<{
click: boolean;
}>();
function handleClick() {
open = !open;
dispatch("click", open);
}
</script>
<div on:click={handleClick} class="label-wrap" class:open>
<span>{label}</span>
<span style:transform={open ? "rotate(0)" : "rotate(90deg)"} class="icon">
</span>
</div>
<div style:display={open ? "block" : "none"}>
<slot />
</div>
<style>
span {
font-weight: var(--section-header-text-weight);
font-size: var(--section-header-text-size);
}
.label-wrap {
display: flex;
justify-content: space-between;
cursor: pointer;
width: var(--size-full);
}
.label-wrap.open {
margin-bottom: var(--size-2);
}
.icon {
transition: 150ms;
}
</style>