anitrack/frontend/src/modal/Modal.svelte

156 lines
6.2 KiB
Svelte
Raw Normal View History

<script>import { twMerge } from "tailwind-merge";
import { Frame } from "flowbite-svelte";
import { createEventDispatcher } from "svelte";
import {CloseButton} from "flowbite-svelte";
import focusTrap from "../../node_modules/flowbite-svelte/dist/utils/focusTrap.js";
export let open = false;
export let title = "";
export let size = "md";
export let color = "default";
export let placement = "center";
export let autoclose = false;
export let outsideclose = false;
export let dismissable = true;
export let backdropClass = "fixed inset-0 z-20 bg-gray-900 bg-opacity-50 dark:bg-opacity-80";
export let classBackdrop = void 0;
export let dialogClass = "fixed top-0 start-0 end-0 h-modal md:inset-0 md:h-full z-30 w-full p-4 flex";
export let classDialog = void 0;
export let defaultClass = "relative flex flex-col mx-auto";
export let headerClass = "flex justify-between items-center p-4 md:p-5 rounded-t-lg";
export let classHeader = void 0;
export let bodyClass = "p-4 md:p-5 space-y-4 flex-1 overflow-y-auto overscroll-contain";
export let classBody = void 0;
export let footerClass = "flex items-center p-4 md:p-5 space-x-3 rtl:space-x-reverse rounded-b-lg";
export let classFooter = void 0;
const dispatch = createEventDispatcher();
$: dispatch(open ? "open" : "close");
function prepareFocus(node) {
const walker = document.createTreeWalker(node, NodeFilter.SHOW_ELEMENT);
let n;
while (n = walker.nextNode()) {
if (n instanceof HTMLElement) {
const el = n;
const [x, y] = isScrollable(el);
if (x || y) el.tabIndex = 0;
}
}
node.focus();
}
const getPlacementClasses = (placement2) => {
switch (placement2) {
case "top-left":
return ["justify-start", "items-start"];
case "top-center":
return ["justify-center", "items-start"];
case "top-right":
return ["justify-end", "items-start"];
case "center-left":
return ["justify-start", "items-center"];
case "center":
return ["justify-center", "items-center"];
case "center-right":
return ["justify-end", "items-center"];
case "bottom-left":
return ["justify-start", "items-end"];
case "bottom-center":
return ["justify-center", "items-end"];
case "bottom-right":
return ["justify-end", "items-end"];
default:
return ["justify-center", "items-center"];
}
};
const sizes = {
xs: "max-w-md",
sm: "max-w-lg",
md: "max-w-2xl",
lg: "max-w-4xl",
xl: "max-w-6xl"
};
const onAutoClose = (e) => {
const target = e.target;
if (autoclose && target?.tagName === "BUTTON") hide(e);
};
const onOutsideClose = (e) => {
const target = e.target;
if (outsideclose && target === e.currentTarget) hide(e);
};
const hide = (e) => {
e.preventDefault();
open = false;
};
const isScrollable = (e) => [e.scrollWidth > e.clientWidth && ["scroll", "auto"].indexOf(getComputedStyle(e).overflowX) >= 0, e.scrollHeight > e.clientHeight && ["scroll", "auto"].indexOf(getComputedStyle(e).overflowY) >= 0];
function handleKeys(e) {
if (e.key === "Escape" && dismissable) return hide(e);
}
$: backdropCls = twMerge(backdropClass, classBackdrop);
$: dialogCls = twMerge(dialogClass, classDialog, getPlacementClasses(placement));
$: frameCls = twMerge(defaultClass, "w-full divide-y", $$props.class);
$: headerCls = twMerge(headerClass, classHeader);
$: bodyCls = twMerge(bodyClass, classBody);
$: footerCls = twMerge(footerClass, classFooter);
</script>
{#if open}
<!-- backdrop -->
<div class={backdropCls}></div>
<!-- dialog -->
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<div on:keydown={handleKeys} on:wheel|preventDefault|nonpassive use:prepareFocus use:focusTrap on:click={onAutoClose} on:mousedown={onOutsideClose} class={dialogCls} tabindex="-1" aria-modal="true" role="dialog">
<div class="flex relative {sizes[size]} w-full max-h-full">
<!-- Modal content -->
<Frame rounded shadow {...$$restProps} class={frameCls} {color}>
<!-- Modal header -->
{#if $$slots.header || title}
<Frame class={headerCls} {color}>
<slot name="header">
<h3 class="text-xl font-semibold {color === 'default' ? '' : 'text-gray-900 dark:text-white'} p-0">
{title}
</h3>
</slot>
{#if dismissable}<CloseButton name="Close modal" {color} on:click={hide} />{/if}
</Frame>
{/if}
<!-- Modal body -->
<div class={bodyCls} role="document" on:keydown|stopPropagation={handleKeys} on:wheel|stopPropagation|passive>
{#if dismissable && !$$slots.header && !title}
<CloseButton name="Close modal" class="absolute top-3 end-2.5" {color} on:click={hide} />
{/if}
<slot></slot>
</div>
<!-- Modal footer -->
{#if $$slots.footer}
<Frame class={footerCls} {color}>
<slot name="footer"></slot>
</Frame>
{/if}
</Frame>
</div>
</div>
{/if}
<!--
@component
[Go to docs](https://flowbite-svelte.com/)
## Props
@prop export let open: boolean = false;
@prop export let title: string = '';
@prop export let size: SizeType = 'md';
@prop export let color: ComponentProps<Frame>['color'] = 'default';
@prop export let placement: ModalPlacementType = 'center';
@prop export let autoclose: boolean = false;
@prop export let outsideclose: boolean = false;
@prop export let dismissable: boolean = true;
@prop export let backdropClass: string = 'fixed inset-0 z-40 bg-gray-900 bg-opacity-50 dark:bg-opacity-80';
@prop export let classBackdrop: string | undefined = undefined;
@prop export let dialogClass: string = 'fixed top-0 start-0 end-0 h-modal md:inset-0 md:h-full z-50 w-full p-4 flex';
@prop export let classDialog: string | undefined = undefined;
@prop export let defaultClass: string = 'relative flex flex-col mx-auto';
@prop export let headerClass: string = 'flex justify-between items-center p-4 md:p-5 rounded-t-lg';
@prop export let classHeader: string | undefined = undefined;
@prop export let bodyClass: string = 'p-4 md:p-5 space-y-4 flex-1 overflow-y-auto overscroll-contain';
@prop export let classBody: string | undefined = undefined;
@prop export let footerClass: string = 'flex items-center p-4 md:p-5 space-x-3 rtl:space-x-reverse rounded-b-lg';
@prop export let classFooter: string | undefined = undefined;
-->