@rkosafo/cai.components 0.0.79 → 0.0.81

package/dist/ui/modal/Modal.svelte

@@ -1,3 +1,7 @@
+<script lang="ts" module>
+	let openModalCount = 0;
+</script>
+
 <script lang="ts">
 	import clsx, { type ClassValue } from 'clsx';
 	import { sineIn } from 'svelte/easing';
@@ -64,57 +68,52 @@
 		close: closeCls
 	} = $derived(modalStyle({ placement, size }));
 
-	const close = (dlg: HTMLDialogElement) => (open = false);
-	// @ts-expect-error: dlg.requestClose may not be supported
-	const cancel = (dlg: HTMLDialogElement) =>
-		typeof dlg.requestClose === 'function' ? dlg.requestClose() : close();
-
-	function _oncancel(ev: Event & { currentTarget: HTMLDialogElement }) {
-		if (ev.target !== ev.currentTarget) {
-			return; // ignore if not on dialog
-		}
+	const close = () => (open = false);
 
-		// this event gets called when user canceled the dialog:
-		// pressesed ESC key, clicked outside, pressed submit button with no 'value' like close button
+	function _oncancel(ev: Event) {
 		oncancel?.(ev);
 		if (ev.defaultPrevented) return;
-
-		ev.preventDefault(); // prevent anyway, we need clean close
-		if (!permanent) close(ev.currentTarget);
+		ev.preventDefault();
+		if (!permanent) close();
 	}
 
-	function _onclick(ev: Event & { currentTarget: HTMLDialogElement }) {
-		const dlg: HTMLDialogElement = ev.currentTarget;
-		if (outsideclose && ev.target === dlg) {
-			return cancel(dlg);
+	function _onclick(ev: MouseEvent) {
+		const target = ev.target as HTMLElement;
+		if (outsideclose && target.dataset.modalBackdrop === 'true') {
+			const cancelEvent = new Event('cancel', { cancelable: true });
+			oncancel?.(cancelEvent);
+			if (!cancelEvent.defaultPrevented && !permanent) {
+				close();
+			}
+			return;
 		}
 
-		if (autoclose && ev.target instanceof HTMLButtonElement && !permanent) {
-			return close(dlg);
+		if (autoclose && target instanceof HTMLButtonElement && !permanent) {
+			close();
 		}
 	}
 
-	function _onsubmit(ev: SubmitEvent & { currentTarget: HTMLDialogElement }) {
+	function _onsubmit(ev: SubmitEvent & { currentTarget: HTMLFormElement }) {
 		// When dialog contains the <form method="dialog"> and when child with type="submit" was pressed
 
 		onsubmit?.(ev);
 		if (ev.defaultPrevented) return;
 
-		ev.preventDefault(); // stop dialog.close()
-
-		const dlg: HTMLDialogElement = ev.currentTarget;
+		ev.preventDefault();
+		const panel: HTMLElement = ref as HTMLElement;
 
 		if (ev.submitter instanceof HTMLButtonElement || ev.submitter instanceof HTMLInputElement) {
-			dlg.returnValue = ev.submitter.value;
+			panel.dataset.returnValue = ev.submitter.value;
 		}
 
-		if (!dlg.returnValue) {
-			return cancel(dlg); // if no action - treat that as cancel
+		const returnValue = panel.dataset.returnValue ?? '';
+		if (!returnValue) {
+			return _oncancel(new Event('cancel', { cancelable: true }));
 		}
 
 		// MAIN APPROACH: Use only the first nested form's data
 		let formData: FormData;
-		const nestedForms = dlg.querySelectorAll('form');
+		const nestedForms = panel.querySelectorAll('form');
 
 		if (nestedForms.length > 0) {
 			// Use the first nested form (assuming it contains the input fields)
@@ -127,7 +126,7 @@
 		// ALTERNATIVE APPROACH: Combine data from all nested forms (uncomment to use)
 
 		const combinedFormData = new FormData();
-		const allForms = dlg.querySelectorAll('form');
+		const allForms = panel.querySelectorAll('form');
 
 		allForms.forEach((form) => {
 			new FormData(form).forEach((value, key) => {
@@ -141,26 +140,40 @@
 		// explicit false from onaction blocks the form closing
 		if (
 			typeof onaction === 'function' &&
-			onaction({ action: dlg.returnValue, data: formData }) === false
+			onaction({ action: returnValue, data: formData }) === false
 		)
 			return;
 
-		close(dlg);
-	}
-
-	function _ontoggle(ev: ToggleEvent & { currentTarget: HTMLDialogElement }) {
-		ontoggle?.(ev);
-		open = ev.newState === 'open'; // for cases when toggle by other means
-	}
-
-	function init(dlg: HTMLDialogElement) {
-		modal ? dlg.showModal() : dlg.show();
-		return () => dlg.close();
+		close();
 	}
 
 	const focusTrap = (node: HTMLElement) => (focustrap ? trapFocus(node) : undefined);
 
-	let ref: HTMLDialogElement | undefined = $state(undefined);
+	let ref: HTMLDivElement | undefined = $state(undefined);
+
+	let previousOpen = false;
+	$effect(() => {
+		if (open && !previousOpen) {
+			openModalCount += 1;
+			if (modal) document.body.style.overflow = 'hidden';
+			ontoggle?.({ newState: 'open', oldState: 'closed' } as ToggleEvent);
+		}
+		if (!open && previousOpen) {
+			openModalCount = Math.max(0, openModalCount - 1);
+			if (modal && openModalCount === 0) document.body.style.overflow = '';
+			ontoggle?.({ newState: 'closed', oldState: 'open' } as ToggleEvent);
+		}
+		previousOpen = open;
+	});
+
+	$effect(() => {
+		return () => {
+			if (previousOpen) {
+				openModalCount = Math.max(0, openModalCount - 1);
+				if (modal && openModalCount === 0) document.body.style.overflow = '';
+			}
+		};
+	});
 
 	function close_handler(ev: MouseEvent) {
 		if (form) {
@@ -168,7 +181,9 @@
 			return;
 		}
 
-		ref?.dispatchEvent(new Event('cancel', { bubbles: true, cancelable: true }));
+		const cancelEvent = new Event('cancel', { cancelable: true });
+		oncancel?.(cancelEvent);
+		if (!cancelEvent.defaultPrevented && !permanent) close();
 	}
 
 	createDismissableContext(close_handler);
@@ -180,7 +195,14 @@
 			{#if title}
 				<h3>{title}</h3>
 				{#if dismissable && !permanent}
-					<CloseButton type="submit" formnovalidate class={clsx(styling.close)} />
+					<CloseButton
+						type={form ? 'submit' : 'button'}
+						formnovalidate
+						class={clsx(styling.close)}
+						onclick={() => {
+							if (!form) close();
+						}}
+					/>
 				{/if}
 			{:else if header}
 				{@render header()}
@@ -197,24 +219,46 @@
 	{/if}
 	{#if dismissable && !permanent && !title}
 		<CloseButton
-			type="submit"
+			type={form ? 'submit' : 'button'}
 			formnovalidate
 			class={closeCls({ class: clsx(theme?.close, styling.close) })}
+			onclick={() => {
+				if (!form) close();
+			}}
 		/>
 	{/if}
 {/snippet}
 
 {#if open}
-	<dialog
-		{@attach init}
+	<div
 		bind:this={ref}
 		use:focusTrap
-		class={base({ fullscreen, class: clsx(theme?.base, className) })}
+		class="fixed inset-0 z-40 flex items-center justify-center p-4"
+		onclick={_onclick}
+		onkeydown={(ev) => {
+			if (ev.key === 'Escape' && !permanent) {
+				_oncancel(new Event('cancel', { cancelable: true }));
+			}
+		}}
+		tabindex="-1"
+		aria-modal={modal ? 'true' : undefined}
+		role="dialog"
+	>
+		{#if modal}
+			<div class="absolute inset-0 bg-black/80" data-modal-backdrop="true"></div>
+		{/if}
+		<div
+			class={base({
+				fullscreen,
+				class: clsx(
+					theme?.base,
+					className,
+					'relative z-10',
+					!modal && 'shadow-xl'
+				)
+			})}
 		tabindex="-1"
 		onsubmit={_onsubmit}
-		oncancel={_oncancel}
-		onclick={_onclick}
-		ontoggle={_ontoggle}
 		transition:transition|global={paramsOptions as ParamsType}
 		{...restProps}
 	>
@@ -225,7 +269,8 @@
 		{:else}
 			{@render content()}
 		{/if}
-	</dialog>
+		</div>
+	</div>
 {/if}
 
 <!--

package/dist/ui/pageLoader/PageLoader2.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+	import clsx from 'clsx';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface PageLoader2Props extends HTMLAttributes<HTMLDivElement> {
+		/** Optional message below the spinner */
+		message?: string;
+		/** Use full-screen overlay (fixed, centered, dimmed background) */
+		fullScreen?: boolean;
+		/** Loader size in pixels */
+		size?: number;
+		/** Overlay background classes when fullScreen is true */
+		overlayColor?: string;
+		/** Static outer ring border color class */
+		ringBaseColor?: string;
+		/** Rotating outer ring accent classes */
+		ringOuterColor?: string;
+		/** Rotating inner ring accent classes */
+		ringInnerColor?: string;
+		/** Center dot and bounce dots color class */
+		dotColor?: string;
+		/** Message text color class */
+		textColor?: string;
+	}
+
+	let {
+		message,
+		fullScreen = true,
+		size = 56,
+		overlayColor = 'bg-background/80',
+		ringBaseColor = 'border-muted',
+		ringOuterColor = 'border-t-accent border-r-accent/60',
+		ringInnerColor = 'border-b-primary border-l-primary/40',
+		dotColor = 'bg-accent',
+		textColor = 'text-muted-foreground',
+		class: className,
+		...restProps
+	}: PageLoader2Props = $props();
+</script>
+
+<div
+	{...restProps}
+	class={clsx(
+		'flex flex-col items-center justify-center gap-6',
+		fullScreen && ['fixed inset-0 z-50 backdrop-blur-sm', overlayColor],
+		className
+	)}
+	role="status"
+	aria-live="polite"
+	aria-label={message ?? 'Loading'}
+>
+	<div class="relative" style={`width: ${size}px; height: ${size}px;`} aria-hidden="true">
+		<div class={clsx('absolute inset-0 rounded-full border-2', ringBaseColor)}></div>
+		<div
+			class={clsx(
+				'absolute inset-0 rounded-full border-2 border-transparent animate-[spin_0.8s_linear_infinite]',
+				ringOuterColor
+			)}
+		></div>
+		<div
+			class={clsx(
+				'absolute inset-1 rounded-full border-2 border-transparent animate-[spin_1.2s_linear_infinite_reverse]',
+				ringInnerColor
+			)}
+		></div>
+		<div class="absolute inset-0 flex items-center justify-center">
+			<div class={clsx('h-2 w-2 rounded-full animate-pulse', dotColor)}></div>
+		</div>
+	</div>
+
+	{#if message}
+		<div class="flex flex-col items-center gap-2">
+			<p class={clsx('text-sm font-medium', textColor)}>{message}</p>
+			<div class="flex gap-1.5" aria-hidden="true">
+				<span
+					class={clsx(
+						'h-1.5 w-1.5 rounded-full animate-[page-loader-bounce_1.4s_ease-in-out_infinite_both]',
+						dotColor
+					)}
+					style="animation-delay: 0ms;"
+				></span>
+				<span
+					class={clsx(
+						'h-1.5 w-1.5 rounded-full animate-[page-loader-bounce_1.4s_ease-in-out_infinite_both]',
+						dotColor
+					)}
+					style="animation-delay: 160ms;"
+				></span>
+				<span
+					class={clsx(
+						'h-1.5 w-1.5 rounded-full animate-[page-loader-bounce_1.4s_ease-in-out_infinite_both]',
+						dotColor
+					)}
+					style="animation-delay: 320ms;"
+				></span>
+			</div>
+		</div>
+	{/if}
+</div>

package/dist/ui/pageLoader/PageLoader2.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { HTMLAttributes } from 'svelte/elements';
+interface PageLoader2Props extends HTMLAttributes<HTMLDivElement> {
+    /** Optional message below the spinner */
+    message?: string;
+    /** Use full-screen overlay (fixed, centered, dimmed background) */
+    fullScreen?: boolean;
+    /** Loader size in pixels */
+    size?: number;
+    /** Overlay background classes when fullScreen is true */
+    overlayColor?: string;
+    /** Static outer ring border color class */
+    ringBaseColor?: string;
+    /** Rotating outer ring accent classes */
+    ringOuterColor?: string;
+    /** Rotating inner ring accent classes */
+    ringInnerColor?: string;
+    /** Center dot and bounce dots color class */
+    dotColor?: string;
+    /** Message text color class */
+    textColor?: string;
+}
+declare const PageLoader2: import("svelte").Component<PageLoader2Props, {}, "">;
+type PageLoader2 = ReturnType<typeof PageLoader2>;
+export default PageLoader2;

package/dist/ui/pageLoader/index.d.ts

@@ -1 +1,2 @@
-export { default as PageLoader } from "./PageLoader.svelte";
+export { default as PageLoader } from './PageLoader.svelte';
+export { default as PageLoader2 } from './PageLoader2.svelte';

package/dist/ui/pageLoader/index.js

@@ -1 +1,2 @@
-export { default as PageLoader } from "./PageLoader.svelte";
+export { default as PageLoader } from './PageLoader.svelte';
+export { default as PageLoader2 } from './PageLoader2.svelte';