forked from MapComplete/MapComplete
63 lines
1.6 KiB
Svelte
63 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
import { Modal } from "flowbite-svelte"
|
|
import { UIEventSource } from "../../Logic/UIEventSource"
|
|
|
|
/**
|
|
* Basically a flowbite-svelte modal made more ergonomical
|
|
*/
|
|
|
|
export let fullscreen: boolean = false
|
|
export let bodyPadding = "p-4 md:p-5 "
|
|
export let shown: UIEventSource<boolean>
|
|
export let dismissable = false
|
|
/**
|
|
* Default: 50
|
|
*/
|
|
export let zIndex: string = "z-50"
|
|
|
|
const shared =
|
|
"in-page normal-background dark:bg-gray-800 rounded-lg border-gray-200 dark:border-gray-700 border-gray-200 dark:border-gray-700 divide-gray-200 dark:divide-gray-700 shadow-md"
|
|
let defaultClass = "relative flex flex-col mx-auto w-full divide-y " + shared
|
|
if (fullscreen) {
|
|
defaultClass = shared
|
|
}
|
|
let dialogClass = "fixed top-0 start-0 end-0 h-modal inset-0 w-full p-4 flex " + zIndex
|
|
if (fullscreen) {
|
|
dialogClass += " h-full-child"
|
|
}
|
|
let bodyClass = bodyPadding + " h-full space-y-4 flex-1 overflow-y-auto overscroll-contain"
|
|
|
|
let headerClass = "flex justify-between items-center p-2 px-4 md:px-5 rounded-t-lg"
|
|
if (!$$slots.header) {
|
|
headerClass = "hidden"
|
|
}
|
|
let _shown = false
|
|
shown.addCallbackAndRun((sh) => {
|
|
_shown = sh
|
|
})
|
|
</script>
|
|
|
|
<Modal
|
|
open={_shown}
|
|
on:close={() => shown.set(false)}
|
|
outsideclose
|
|
size="xl"
|
|
{dismissable}
|
|
{defaultClass}
|
|
{bodyClass}
|
|
{dialogClass}
|
|
{headerClass}
|
|
color="none"
|
|
>
|
|
<svelte:fragment slot="header">
|
|
{#if $$slots.header}
|
|
<h1 class="page-header w-full">
|
|
<slot name="header" />
|
|
</h1>
|
|
{/if}
|
|
</svelte:fragment>
|
|
<slot />
|
|
{#if $$slots.footer}
|
|
<slot name="footer" />
|
|
{/if}
|
|
</Modal>
|