1
0
mirror of https://github.com/garraflavatra/rolens.git synced 2025-01-19 13:27:58 +00:00
rolens/frontend/src/components/details.svelte

69 lines
1.3 KiB
Svelte
Raw Normal View History

2023-01-31 20:12:31 +00:00
<script>
import { createEventDispatcher, onMount } from 'svelte';
import Icon from './icon.svelte';
export let title = '';
export let initiallyOpen = false;
export let deletable = false;
const dispatch = createEventDispatcher();
/** @type {HTMLDetailsElement} */ let detailsElement;
onMount(() => {
if (initiallyOpen && detailsElement) {
detailsElement.open = initiallyOpen;
}
});
</script>
<details bind:this={detailsElement}>
<summary>
<Icon name="chev-d" />
{title}
{#if deletable}
2023-02-15 18:53:49 +00:00
<button class="delete" on:click={() => dispatch('delete')} type="button">
2023-01-31 20:12:31 +00:00
<Icon name="trash" />
</button>
{/if}
</summary>
<slot />
</details>
<style>
details {
border: 1px solid #aaa;
border-radius: 4px;
padding: 0.5em 0.5em 0;
margin-bottom: 0.5rem;
2023-02-05 08:39:52 +00:00
background-color: #fff;
2023-01-31 20:12:31 +00:00
}
details[open] {
padding: 0.5em;
}
summary {
font-weight: 700;
margin: -0.5em -0.5em 0;
padding: 0.5em;
display: flex;
gap: 0.5rem;
align-items: center;
cursor: pointer;
}
summary :global(svg) {
width: 14px;
height: 14px;
}
details[open] summary {
border-bottom: 1px solid #aaa;
margin-bottom: 0.5em;
}
button.delete {
margin-left: auto;
color: #c00;
}
</style>