mirror of
https://github.com/immich-app/immich.git
synced 2025-06-05 14:48:26 -04:00
bce916e4c8
* wrapper * no more callback * refactor: wip * refactor: wip * refactor: wip * pr feedback * fix * pr feedback
80 lines
2.4 KiB
Svelte
80 lines
2.4 KiB
Svelte
<script lang="ts">
|
|
import { clickOutside } from '$lib/actions/click-outside';
|
|
import { fade } from 'svelte/transition';
|
|
import FocusTrap from '$lib/components/shared-components/focus-trap.svelte';
|
|
import ModalHeader from '$lib/components/shared-components/modal-header.svelte';
|
|
|
|
export let onClose: () => void;
|
|
|
|
/**
|
|
* Unique identifier for the modal.
|
|
*/
|
|
export let id: string;
|
|
export let title: string;
|
|
/**
|
|
* If true, the logo will be displayed next to the modal title.
|
|
*/
|
|
export let showLogo = false;
|
|
/**
|
|
* Optional icon to display next to the modal title, if `showLogo` is false.
|
|
*/
|
|
export let icon: string | undefined = undefined;
|
|
/**
|
|
* Sets the width of the modal.
|
|
*
|
|
* - `wide`: 750px
|
|
* - `narrow`: 450px
|
|
* - `auto`: fits the width of the modal content, up to a maximum of 550px
|
|
*/
|
|
export let width: 'wide' | 'narrow' | 'auto' = 'narrow';
|
|
|
|
$: titleId = `${id}-title`;
|
|
$: isStickyBottom = !!$$slots['sticky-bottom'];
|
|
|
|
let modalWidth: string;
|
|
$: {
|
|
if (width === 'wide') {
|
|
modalWidth = 'w-[750px]';
|
|
} else if (width === 'narrow') {
|
|
modalWidth = 'w-[450px]';
|
|
} else {
|
|
modalWidth = 'sm:max-w-[550px]';
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<section
|
|
role="presentation"
|
|
in:fade={{ duration: 100 }}
|
|
out:fade={{ duration: 100 }}
|
|
class="fixed left-0 top-0 z-[9999] flex h-screen w-screen place-content-center place-items-center bg-black/40"
|
|
on:keydown={(event) => {
|
|
event.stopPropagation();
|
|
}}
|
|
>
|
|
<FocusTrap>
|
|
<div
|
|
class="z-[9999] max-w-[95vw] max-h-[95vh] {modalWidth} overflow-y-auto rounded-3xl bg-immich-bg shadow-md dark:bg-immich-dark-gray dark:text-immich-dark-fg immich-scrollbar"
|
|
style="max-height: min(95vh, 900px);"
|
|
use:clickOutside={{ onOutclick: onClose, onEscape: onClose }}
|
|
tabindex="-1"
|
|
aria-modal="true"
|
|
aria-labelledby={titleId}
|
|
class:scroll-pb-40={isStickyBottom}
|
|
class:sm:scroll-p-24={isStickyBottom}
|
|
>
|
|
<ModalHeader id={titleId} {title} {showLogo} {icon} {onClose} />
|
|
<div class="p-5 pt-0">
|
|
<slot />
|
|
</div>
|
|
{#if isStickyBottom}
|
|
<div
|
|
class="flex flex-col sm:flex-row justify-end w-full gap-2 sm:gap-4 sticky bottom-0 py-4 px-5 bg-immich-bg dark:bg-immich-dark-gray border-t border-gray-200 dark:border-gray-500 shadow"
|
|
>
|
|
<slot name="sticky-bottom" />
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</FocusTrap>
|
|
</section>
|