Website/src/components/styled/SWModal.svelte

88 Zeilen
2.3 KiB
Svelte

2024-01-06 15:08:54 +01:00
<!--
- 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>