web/dialogs: move buttons to own component & add optional timeout

This commit is contained in:
wukko
2024-07-28 14:49:12 +06:00
parent a2ead8a813
commit 11d3d71937
3 changed files with 60 additions and 23 deletions

View File

@@ -1,23 +1,14 @@
<script lang="ts">
import type { DialogButton } from "$lib/types/dialog";
import type { DialogButton as DialogButtonType } from "$lib/types/dialog";
import DialogButton from "$components/dialog/DialogButton.svelte";
export let buttons: DialogButton[];
export let buttons: DialogButtonType[];
export let closeFunc: () => void;
</script>
<div class="popup-buttons">
{#each buttons as button}
<button
class="button elevated popup-button {button.color}"
class:color={button.color}
class:active={button.main}
on:click={async () => {
await button.action();
closeFunc();
}}
>
{button.text}
</button>
<DialogButton {button} {closeFunc} />
{/each}
</div>
@@ -31,14 +22,4 @@
border-radius: var(--border-radius);
min-height: 40px;
}
.popup-button {
width: 100%;
height: 40px;
}
.popup-button.red {
background-color: var(--red);
color: var(--white);
}
</style>