@marianmeres/stuic 1.125.0 → 2.0.0-next.2

package/dist/components/ModalDialog/ModalDialog.svelte

@@ -1,94 +1,150 @@
-<script context="module">import { createEventDispatcher, onMount } from "svelte";
-import { focusTrap } from "../../actions/focus-trap.js";
-import { writable } from "svelte/store";
-</script>
+<script lang="ts">
+	import { onClickOutside } from "runed";
+	import { onMount, tick, type Snippet } from "svelte";
+	import { focusTrap } from "../../actions/focus-trap.js";
+	import { stopPropagation } from "../../utils/event-modifiers.js";
+	import { twMerge } from "../../utils/tw-merge.js";
+	import { createClog } from "@marianmeres/clog";
+	import { waitForNextRepaint } from "../../utils/paint.js";
+
+	const clog = createClog("ModalDialog").debug;
+
+	interface Props {
+		// idea is, that the `dialog` element, should not be needed to customize
+		classDialog?: string;
+		class?: string;
+		children: Snippet;
+		noClickOutsideClose?: boolean;
+		noEscapeClose?: boolean;
+		// optional ui hint
+		type?: string;
+		// pre close hooks... escape is considered special close strategy which may be
+		// handled separately
+		preEscapeClose?: () => any;
+		preClose?: () => any;
+	}
+
+	let {
+		class: classProp,
+		classDialog,
+		children,
+		noClickOutsideClose,
+		type,
+		noEscapeClose,
+		preEscapeClose,
+		preClose,
+	}: Props = $props();
 
-<script>const dispatch = createEventDispatcher();
-export let openOnMount = false;
-export let closeOnOutsideClick = true;
-export let closeOnEscape = true;
-let _class = "";
-export { _class as class };
-export let style = "";
-export let backdropFadeIn = "normal";
-let _el;
-let _open = !!openOnMount;
-export function toggle() {
-  _open = !_open;
-}
-export function open() {
-  _open = true;
-}
-export function close() {
-  _open = false;
-}
-$:
-  _open ? _el?.showModal() : _el?.close();
-$:
-  dispatch(_open ? "open" : "close");
-export const isOpen = writable(_open);
-$:
-  $isOpen = _open;
-onMount(() => {
-  const _unsubs = [];
-  const _handleClose = (e) => close();
-  _el.addEventListener("close", _handleClose);
-  _unsubs.push(() => _el.removeEventListener("close", _handleClose));
-  const _handleCancel = (e) => e.preventDefault();
-  _el.addEventListener("cancel", _handleCancel);
-  _unsubs.push(() => _el.removeEventListener("cancel", _handleCancel));
-  const _handleKeyDown = (e) => {
-    if (_open && closeOnEscape && e.key === "Escape") {
-      e.stopPropagation();
-      close();
-    }
-  };
-  document.addEventListener("keydown", _handleKeyDown, true);
-  _unsubs.push(() => document.removeEventListener("keydown", _handleKeyDown, true));
-  const _handleClick = (e) => {
-    if (_open) {
-      e.stopPropagation();
-      if (closeOnOutsideClick && e.target === _el)
-        return close();
-    }
-  };
-  _el.addEventListener("click", _handleClick);
-  _unsubs.push(() => _el.removeEventListener("click", _handleClick));
-  return () => _unsubs.forEach((fn) => fn());
-});
+	let visible = $state(false);
+	let dialog = $state<HTMLDialogElement>()!;
+	let box = $state<HTMLDivElement>()!;
+	let _opener: undefined | null | HTMLElement = $state();
+
+	export function open(openerOrEvent?: null | HTMLElement | MouseEvent) {
+		visible = true;
+		setOpener(
+			(openerOrEvent as any)?.currentTarget ?? openerOrEvent ?? document.activeElement
+		);
+		// clog("will showModal");
+		// dialog must be rendered in the DOM before it can be opened...
+		waitForNextRepaint().then(() => {
+			// clog("dialog.showModal()");
+			dialog.showModal();
+		});
+	}
+
+	export function close() {
+		(async () => {
+			const allowed = await preClose?.();
+			// explicit false prevents close
+			if (allowed !== false) {
+				// clog("dialog.close()");
+				dialog?.close();
+				visible = false;
+				_opener?.focus();
+				_opener = null;
+			}
+		})();
+	}
+
+	export function setOpener(opener?: null | HTMLElement) {
+		_opener = opener;
+	}
+
+	onClickOutside(
+		() => box,
+		() => !noClickOutsideClose && close()
+	);
+
+	// $inspect("Modal dialog mounted, is visible:", visible).with(clog);
 </script>
 
-<!-- 
-    NOTE: the below padding:0 is important because of otherwise not-trivial onOutsideClick implementation
--->
-<dialog
-	bind:this={_el}
-	use:focusTrap={{ enabled: _open }}
-	style="{style ? `${style}; ` : ''}padding: 0 !important;"
-	class={`${_class} ${backdropFadeIn || ''}`}
->
-	{#if _open}
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+{#if visible}
+	<dialog
+		bind:this={dialog}
+		use:focusTrap
+		data-type={type}
+		class={twMerge(
+			"stuic-modal-dialog",
+			"fixed inset-4 m-auto size-auto",
+			"flex justify-center items-center",
+			"focus:outline-none focus-visible:outline-none",
+			"bg-transparent backdrop:bg-black/40",
+			classDialog
+		)}
+		onkeydown={async (e) => {
+			if (e.key === "Escape" && visible) {
+				clog("on Escape keydown, preventing default and stopping propagation");
+
+				// do not allow built-in close on escape
+				e.preventDefault();
+				// do not bubble
+				e.stopPropagation();
+				// ???: do not allow additional onkeydown listeners on this dialog (should there be any...)
+				e.stopImmediatePropagation();
+
+				if (!noEscapeClose) {
+					// explicit false prevents close
+					let allowed = await preEscapeClose?.();
+					if (allowed !== false) {
+						// `preClose` will be handled next
+						close();
+					}
+				}
+			}
+		}}
+	>
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<!-- 
-			wrapping into relative full h/w div so that the inner click will never trigger close 
-			(this could be achieved in many different ways, but this seems to be the most 
-			pragmatic when taking into account the consumer usage) 
+			The `onpointerdown={stopPropagation()}` is for cases where we have
+			multiple dialogs on top of each other (which is questionable by itself) and we
+			do not want close the below ones just by interacting (clicking) on the top one 
+			(the `onClickOutside` uses `onpointerdown` with potential `onclick`)
 		-->
-		<div class="relative w-full h-full">
-			<slot />
+		<div
+			bind:this={box}
+			onpointerdown={stopPropagation()}
+			onclick={stopPropagation()}
+			data-type={type}
+			class={twMerge(
+				`box relative size-full overflow-auto
+				text-black dark:text-white bg-white dark:bg-neutral-800`,
+				classProp
+			)}
+		>
+			{@render children?.()}
 		</div>
-	{/if}
-</dialog>
+	</dialog>
+{/if}
 
 <style>
-	dialog.normal[open]::backdrop {
-		animation: fade 0.15s ease-out;
-	}
-
-	dialog.slow[open]::backdrop {
-		animation: fade 0.5s ease-out;
+	dialog[open]::backdrop {
+		animation: fadeIn 0.15s ease-out;
 	}
 
-	@keyframes fade {
+	@keyframes fadeIn {
 		from {
 			opacity: 0;
 		}

package/dist/components/ModalDialog/ModalDialog.svelte.d.ts

@@ -1,39 +1,18 @@
-import { SvelteComponent } from "svelte";
-import { type Writable } from 'svelte/store';
-export interface ModalDialogAPI {
-    open: () => void;
-    close: () => void;
-    isOpen: Writable<boolean>;
-}
-declare const __propDef: {
-    props: {
-        openOnMount?: boolean;
-        closeOnOutsideClick?: boolean;
-        closeOnEscape?: boolean;
-        class?: string;
-        style?: string;
-        backdropFadeIn?: false | "normal" | "slow";
-        toggle?: () => void;
-        open?: () => void;
-        close?: () => void;
-        isOpen?: Writable<boolean>;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type ModalDialogProps = typeof __propDef.props;
-export type ModalDialogEvents = typeof __propDef.events;
-export type ModalDialogSlots = typeof __propDef.slots;
-export default class ModalDialog extends SvelteComponent<ModalDialogProps, ModalDialogEvents, ModalDialogSlots> {
-    get toggle(): () => void;
-    get open(): () => void;
-    get close(): () => void;
-    get isOpen(): Writable<boolean>;
+import { type Snippet } from "svelte";
+interface Props {
+    classDialog?: string;
+    class?: string;
+    children: Snippet;
+    noClickOutsideClose?: boolean;
+    noEscapeClose?: boolean;
+    type?: string;
+    preEscapeClose?: () => any;
+    preClose?: () => any;
 }
-export {};
+declare const ModalDialog: import("svelte").Component<Props, {
+    open: (openerOrEvent?: null | HTMLElement | MouseEvent) => void;
+    close: () => void;
+    setOpener: (opener?: null | HTMLElement) => void;
+}, "">;
+type ModalDialog = ReturnType<typeof ModalDialog>;
+export default ModalDialog;

package/dist/components/ModalDialog/index.d.ts

@@ -0,0 +1 @@
+export { default as ModalDialog } from "./ModalDialog.svelte";

package/dist/components/ModalDialog/index.js

@@ -0,0 +1 @@
+export { default as ModalDialog } from "./ModalDialog.svelte";