88 Zeilen
2.3 KiB
Svelte
88 Zeilen
2.3 KiB
Svelte
<!--
|
|
- This file is a part of the SteamWar software.
|
|
-
|
|
- Copyright (C) 2024 SteamWar.de-Serverteam
|
|
-
|
|
- This program is free software: you can redistribute it and/or modify
|
|
- it under the terms of the GNU Affero General Public License as published by
|
|
- the Free Software Foundation, either version 3 of the License, or
|
|
- (at your option) any later version.
|
|
-
|
|
- This program is distributed in the hope that it will be useful,
|
|
- but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
- GNU Affero General Public License for more details.
|
|
-
|
|
- You should have received a copy of the GNU Affero General Public License
|
|
- along with this program. If not, see <https://www.gnu.org/licenses/>.
|
|
-->
|
|
|
|
<script lang="ts">
|
|
import {createEventDispatcher, onMount} from "svelte";
|
|
|
|
export let title: string;
|
|
export let open: boolean;
|
|
let internalOpen = open;
|
|
|
|
const dispatch = createEventDispatcher();
|
|
|
|
$: if (open && !internalOpen) {
|
|
dialog.showModal();
|
|
internalOpen = true;
|
|
} else if (!open && internalOpen) {
|
|
dialog.close();
|
|
internalOpen = false;
|
|
}
|
|
|
|
let dialog: HTMLDialogElement;
|
|
|
|
onMount(() => {
|
|
if (open) {
|
|
dialog.showModal();
|
|
internalOpen = true;
|
|
}
|
|
});
|
|
|
|
function close() {
|
|
open = false;
|
|
internalOpen = false;
|
|
dispatch("close");
|
|
}
|
|
</script>
|
|
|
|
<dialog bind:this={dialog} on:close={close} on:cancel={close} on:click={() => dialog.close()} aria-hidden="true">
|
|
<div on:click|stopPropagation aria-hidden="true">
|
|
<div class="spaced bordered">
|
|
<h1>{title}</h1>
|
|
</div>
|
|
<div class="spaced main bordered">
|
|
<slot />
|
|
</div>
|
|
<div class="footer spaced" on:click={() => dialog.close()} aria-hidden="true">
|
|
<slot name="footer" />
|
|
</div>
|
|
</div>
|
|
</dialog>
|
|
|
|
<style lang="scss">
|
|
h1 {
|
|
@apply text-4xl font-bold;
|
|
}
|
|
|
|
dialog {
|
|
@apply max-h-full max-w-md w-full rounded-lg shadow-lg
|
|
dark:bg-neutral-800 dark:text-neutral-100;
|
|
}
|
|
|
|
.spaced {
|
|
@apply p-6;
|
|
}
|
|
|
|
.bordered {
|
|
@apply border-b border-neutral-200 dark:border-neutral-700;
|
|
}
|
|
|
|
.footer {
|
|
@apply flex mx-4 my-2;
|
|
}
|
|
</style> |