@rkosafo/cai.components 0.0.78 → 0.0.80

package/dist/ui/modal/Modal.svelte

@@ -1,265 +1,265 @@
-<script lang="ts">
-	import clsx, { type ClassValue } from 'clsx';
-	import { sineIn } from 'svelte/easing';
-	import { fade } from 'svelte/transition';
-	import { modal as modalStyle } from './index.js';
-	import { getTheme, warnThemeDeprecation } from '../../themes/themeUtils.js';
-	import { createDismissableContext } from '../../utils/dismissable.js';
-	import { CloseButton } from '../../utils/closeButton/index.js';
-	import type { ModalProps, ParamsType, TransitionFunc } from '../../types/index.js';
-	import { trapFocus } from '../../utils/action.js';
-
-	let {
-		children,
-		onaction = () => true,
-		oncancel,
-		onsubmit,
-		ontoggle,
-		form = false,
-		modal = true,
-		autoclose = false,
-		focustrap = false,
-		header,
-		footer,
-		title,
-		open = $bindable(false),
-		permanent = false,
-		dismissable = true,
-		closeBtnClass,
-		headerClass,
-		bodyClass,
-		footerClass,
-		outsideclose = true,
-		size = 'md',
-		placement,
-		class: className,
-		classes,
-		params,
-		transition = fade,
-		fullscreen = false,
-		...restProps
-	}: ModalProps = $props();
-
-	// form, header, footer, body, close
-	warnThemeDeprecation(
-		'Modal',
-		{ headerClass, bodyClass, footerClass, closeBtnClass },
-		{ bodyClass: 'body', headerClass: 'header', footerClass: 'footer', closeBtnClass: 'close' }
-	);
-	const styling = $derived(
-		classes ?? { header: headerClass, body: bodyClass, footer: footerClass, close: closeBtnClass }
-	);
-
-	const theme = getTheme('modal');
-
-	const paramsDefault = { duration: 100, easing: sineIn };
-	const paramsOptions = $derived(params ?? paramsDefault);
-
-	const {
-		base,
-		form: formCls,
-		header: headerCls,
-		footer: footerCls,
-		body,
-		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
-		}
-
-		// this event gets called when user canceled the dialog:
-		// pressesed ESC key, clicked outside, pressed submit button with no 'value' like close button
-		oncancel?.(ev);
-		if (ev.defaultPrevented) return;
-
-		ev.preventDefault(); // prevent anyway, we need clean close
-		if (!permanent) close(ev.currentTarget);
-	}
-
-	function _onclick(ev: Event & { currentTarget: HTMLDialogElement }) {
-		const dlg: HTMLDialogElement = ev.currentTarget;
-		if (outsideclose && ev.target === dlg) {
-			return cancel(dlg);
-		}
-
-		if (autoclose && ev.target instanceof HTMLButtonElement && !permanent) {
-			return close(dlg);
-		}
-	}
-
-	function _onsubmit(ev: SubmitEvent & { currentTarget: HTMLDialogElement }) {
-		// 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;
-
-		if (ev.submitter instanceof HTMLButtonElement || ev.submitter instanceof HTMLInputElement) {
-			dlg.returnValue = ev.submitter.value;
-		}
-
-		if (!dlg.returnValue) {
-			return cancel(dlg); // if no action - treat that as cancel
-		}
-
-		// MAIN APPROACH: Use only the first nested form's data
-		let formData: FormData;
-		const nestedForms = dlg.querySelectorAll('form');
-
-		if (nestedForms.length > 0) {
-			// Use the first nested form (assuming it contains the input fields)
-			formData = new FormData(nestedForms[0]);
-		} else {
-			// Fallback: use the target form if no nested forms found
-			formData = new FormData(ev.target as HTMLFormElement);
-		}
-
-		// ALTERNATIVE APPROACH: Combine data from all nested forms (uncomment to use)
-
-		const combinedFormData = new FormData();
-		const allForms = dlg.querySelectorAll('form');
-
-		allForms.forEach((form) => {
-			new FormData(form).forEach((value, key) => {
-				combinedFormData.append(key, value);
-			});
-		});
-
-		// Use the alternative approach
-		formData = combinedFormData;
-
-		// explicit false from onaction blocks the form closing
-		if (
-			typeof onaction === 'function' &&
-			onaction({ action: dlg.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();
-	}
-
-	const focusTrap = (node: HTMLElement) => (focustrap ? trapFocus(node) : undefined);
-
-	let ref: HTMLDialogElement | undefined = $state(undefined);
-
-	function close_handler(ev: MouseEvent) {
-		if (form) {
-			// dialog/form mechanism will close the dialog
-			return;
-		}
-
-		ref?.dispatchEvent(new Event('cancel', { bubbles: true, cancelable: true }));
-	}
-
-	createDismissableContext(close_handler);
-</script>
-
-{#snippet content()}
-	{#if title || header}
-		<div class={headerCls({ class: clsx(theme?.header, styling.header) })}>
-			{#if title}
-				<h3>{title}</h3>
-				{#if dismissable && !permanent}
-					<CloseButton type="submit" formnovalidate class={clsx(styling.close)} />
-				{/if}
-			{:else if header}
-				{@render header()}
-			{/if}
-		</div>
-	{/if}
-	<div class={body({ class: clsx(theme?.body, styling.body) })}>
-		{@render children?.()}
-	</div>
-	{#if footer}
-		<div class={footerCls({ class: clsx(theme?.footer, styling.footer) })}>
-			{@render footer()}
-		</div>
-	{/if}
-	{#if dismissable && !permanent && !title}
-		<CloseButton
-			type="submit"
-			formnovalidate
-			class={closeCls({ class: clsx(theme?.close, styling.close) })}
-		/>
-	{/if}
-{/snippet}
-
-{#if open}
-	<dialog
-		{@attach init}
-		bind:this={ref}
-		use:focusTrap
-		class={base({ fullscreen, class: clsx(theme?.base, className) })}
-		tabindex="-1"
-		onsubmit={_onsubmit}
-		oncancel={_oncancel}
-		onclick={_onclick}
-		ontoggle={_ontoggle}
-		transition:transition|global={paramsOptions as ParamsType}
-		{...restProps}
-	>
-		{#if form}
-			<form method="dialog" class={formCls({ class: clsx(theme?.form) })}>
-				{@render content()}
-			</form>
-		{:else}
-			{@render content()}
-		{/if}
-	</dialog>
-{/if}
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Type
-[ModalProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1038)
-## Props
-@prop children
-@prop onaction = ()
-@prop oncancel
-@prop onsubmit
-@prop ontoggle
-@prop form = false
-@prop modal = true
-@prop autoclose = false
-@prop focustrap = false
-@prop header
-@prop footer
-@prop title
-@prop open = $bindable(false)
-@prop permanent = false
-@prop dismissable = true
-@prop closeBtnClass
-@prop headerClass
-@prop bodyClass
-@prop footerClass
-@prop outsideclose = true
-@prop size = "md"
-@prop placement
-@prop class: className
-@prop classes
-@prop params
-@prop transition = fade
-@prop fullscreen = false
-@prop ...restProps
--->
+<script lang="ts">
+	import clsx, { type ClassValue } from 'clsx';
+	import { sineIn } from 'svelte/easing';
+	import { fade } from 'svelte/transition';
+	import { modal as modalStyle } from './index.js';
+	import { getTheme, warnThemeDeprecation } from '../../themes/themeUtils.js';
+	import { createDismissableContext } from '../../utils/dismissable.js';
+	import { CloseButton } from '../../utils/closeButton/index.js';
+	import type { ModalProps, ParamsType, TransitionFunc } from '../../types/index.js';
+	import { trapFocus } from '../../utils/action.js';
+
+	let {
+		children,
+		onaction = () => true,
+		oncancel,
+		onsubmit,
+		ontoggle,
+		form = false,
+		modal = true,
+		autoclose = false,
+		focustrap = false,
+		header,
+		footer,
+		title,
+		open = $bindable(false),
+		permanent = false,
+		dismissable = true,
+		closeBtnClass,
+		headerClass,
+		bodyClass,
+		footerClass,
+		outsideclose = true,
+		size = 'md',
+		placement,
+		class: className,
+		classes,
+		params,
+		transition = fade,
+		fullscreen = false,
+		...restProps
+	}: ModalProps = $props();
+
+	// form, header, footer, body, close
+	warnThemeDeprecation(
+		'Modal',
+		{ headerClass, bodyClass, footerClass, closeBtnClass },
+		{ bodyClass: 'body', headerClass: 'header', footerClass: 'footer', closeBtnClass: 'close' }
+	);
+	const styling = $derived(
+		classes ?? { header: headerClass, body: bodyClass, footer: footerClass, close: closeBtnClass }
+	);
+
+	const theme = getTheme('modal');
+
+	const paramsDefault = { duration: 100, easing: sineIn };
+	const paramsOptions = $derived(params ?? paramsDefault);
+
+	const {
+		base,
+		form: formCls,
+		header: headerCls,
+		footer: footerCls,
+		body,
+		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
+		}
+
+		// this event gets called when user canceled the dialog:
+		// pressesed ESC key, clicked outside, pressed submit button with no 'value' like close button
+		oncancel?.(ev);
+		if (ev.defaultPrevented) return;
+
+		ev.preventDefault(); // prevent anyway, we need clean close
+		if (!permanent) close(ev.currentTarget);
+	}
+
+	function _onclick(ev: Event & { currentTarget: HTMLDialogElement }) {
+		const dlg: HTMLDialogElement = ev.currentTarget;
+		if (outsideclose && ev.target === dlg) {
+			return cancel(dlg);
+		}
+
+		if (autoclose && ev.target instanceof HTMLButtonElement && !permanent) {
+			return close(dlg);
+		}
+	}
+
+	function _onsubmit(ev: SubmitEvent & { currentTarget: HTMLDialogElement }) {
+		// 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;
+
+		if (ev.submitter instanceof HTMLButtonElement || ev.submitter instanceof HTMLInputElement) {
+			dlg.returnValue = ev.submitter.value;
+		}
+
+		if (!dlg.returnValue) {
+			return cancel(dlg); // if no action - treat that as cancel
+		}
+
+		// MAIN APPROACH: Use only the first nested form's data
+		let formData: FormData;
+		const nestedForms = dlg.querySelectorAll('form');
+
+		if (nestedForms.length > 0) {
+			// Use the first nested form (assuming it contains the input fields)
+			formData = new FormData(nestedForms[0]);
+		} else {
+			// Fallback: use the target form if no nested forms found
+			formData = new FormData(ev.target as HTMLFormElement);
+		}
+
+		// ALTERNATIVE APPROACH: Combine data from all nested forms (uncomment to use)
+
+		const combinedFormData = new FormData();
+		const allForms = dlg.querySelectorAll('form');
+
+		allForms.forEach((form) => {
+			new FormData(form).forEach((value, key) => {
+				combinedFormData.append(key, value);
+			});
+		});
+
+		// Use the alternative approach
+		formData = combinedFormData;
+
+		// explicit false from onaction blocks the form closing
+		if (
+			typeof onaction === 'function' &&
+			onaction({ action: dlg.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();
+	}
+
+	const focusTrap = (node: HTMLElement) => (focustrap ? trapFocus(node) : undefined);
+
+	let ref: HTMLDialogElement | undefined = $state(undefined);
+
+	function close_handler(ev: MouseEvent) {
+		if (form) {
+			// dialog/form mechanism will close the dialog
+			return;
+		}
+
+		ref?.dispatchEvent(new Event('cancel', { bubbles: true, cancelable: true }));
+	}
+
+	createDismissableContext(close_handler);
+</script>
+
+{#snippet content()}
+	{#if title || header}
+		<div class={headerCls({ class: clsx(theme?.header, styling.header) })}>
+			{#if title}
+				<h3>{title}</h3>
+				{#if dismissable && !permanent}
+					<CloseButton type="submit" formnovalidate class={clsx(styling.close)} />
+				{/if}
+			{:else if header}
+				{@render header()}
+			{/if}
+		</div>
+	{/if}
+	<div class={body({ class: clsx(theme?.body, styling.body) })}>
+		{@render children?.()}
+	</div>
+	{#if footer}
+		<div class={footerCls({ class: clsx(theme?.footer, styling.footer) })}>
+			{@render footer()}
+		</div>
+	{/if}
+	{#if dismissable && !permanent && !title}
+		<CloseButton
+			type="submit"
+			formnovalidate
+			class={closeCls({ class: clsx(theme?.close, styling.close) })}
+		/>
+	{/if}
+{/snippet}
+
+{#if open}
+	<dialog
+		{@attach init}
+		bind:this={ref}
+		use:focusTrap
+		class={base({ fullscreen, class: clsx(theme?.base, className) })}
+		tabindex="-1"
+		onsubmit={_onsubmit}
+		oncancel={_oncancel}
+		onclick={_onclick}
+		ontoggle={_ontoggle}
+		transition:transition|global={paramsOptions as ParamsType}
+		{...restProps}
+	>
+		{#if form}
+			<form method="dialog" class={formCls({ class: clsx(theme?.form) })}>
+				{@render content()}
+			</form>
+		{:else}
+			{@render content()}
+		{/if}
+	</dialog>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[ModalProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1038)
+## Props
+@prop children
+@prop onaction = ()
+@prop oncancel
+@prop onsubmit
+@prop ontoggle
+@prop form = false
+@prop modal = true
+@prop autoclose = false
+@prop focustrap = false
+@prop header
+@prop footer
+@prop title
+@prop open = $bindable(false)
+@prop permanent = false
+@prop dismissable = true
+@prop closeBtnClass
+@prop headerClass
+@prop bodyClass
+@prop footerClass
+@prop outsideclose = true
+@prop size = "md"
+@prop placement
+@prop class: className
+@prop classes
+@prop params
+@prop transition = fade
+@prop fullscreen = false
+@prop ...restProps
+-->