69 lines
1.1 KiB
Svelte
69 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import { slide } from 'svelte/transition';
|
|
|
|
export let hide = false;
|
|
let hidden = true;
|
|
</script>
|
|
|
|
<section class="labelborder" class:hide class:hidden>
|
|
<header
|
|
on:click={() => {
|
|
if (hide) hidden = !hidden;
|
|
}}
|
|
on:keydown={(ev) => {
|
|
if (['Space', 'Enter'].includes(ev.key) && hide) hidden = !hidden;
|
|
}}
|
|
role="button"
|
|
tabindex="0"
|
|
>
|
|
<slot name="header-full">
|
|
<h3>
|
|
<slot name="header" />
|
|
</h3>
|
|
</slot>
|
|
</header>
|
|
{#if !hide || !hidden}
|
|
<div class="content" transition:slide>
|
|
<slot />
|
|
</div>
|
|
{:else}
|
|
<div class="hidden-indicator" />
|
|
{/if}
|
|
</section>
|
|
|
|
<style>
|
|
section.labelborder {
|
|
margin-top: 0.66rem;
|
|
transition: opacity 0.5s ease-in-out;
|
|
|
|
& header {
|
|
display: flex;
|
|
align-items: end;
|
|
justify-content: space-between;
|
|
|
|
border-bottom: 1px solid var(--foreground);
|
|
padding-bottom: 0.33rem;
|
|
margin-bottom: 0.33rem;
|
|
|
|
& h3 {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
&.hide {
|
|
& header {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
&.hide.hidden {
|
|
opacity: 0.66;
|
|
}
|
|
|
|
& .hidden-indicator {
|
|
border-top: 1px solid var(--foreground);
|
|
margin-top: calc(-0.33rem + 2px);
|
|
}
|
|
}
|
|
</style>
|