@finsweet/webflow-apps-utils 1.0.1 → 1.0.3

package/dist/ui/components/modal/Modal.svelte

@@ -0,0 +1,490 @@
+<script lang="ts">
+	import type { Component, Snippet } from 'svelte';
+	import { onMount, tick } from 'svelte';
+
+	import { CloseIcon } from '../../icons';
+	import { Button, LoadingScreen, Text } from '../';
+
+	interface Props {
+		/**
+		 * Whether the modal is open/visible
+		 */
+		open?: boolean;
+		/**
+		 * Whether to show the header bar
+		 */
+		showHeader?: boolean;
+		/**
+		 * Whether to show the footer bar
+		 */
+		showFooter?: boolean;
+		/**
+		 * Whether to show the close button in header
+		 */
+		showCloseButton?: boolean;
+		/**
+		 * Whether the modal can be closed by clicking overlay
+		 */
+		closeOnOverlayClick?: boolean;
+		/**
+		 * Whether the modal can be closed by pressing Escape key
+		 */
+		closeOnEscape?: boolean;
+		/**
+		 * Whether the modal is in loading state
+		 */
+		loading?: boolean;
+		/**
+		 * Loading message to display
+		 */
+		loadingMessage?: string;
+		/**
+		 * Global padding for modal content
+		 */
+		padding?: string;
+		/**
+		 * Specific padding for header section
+		 */
+		headerPadding?: string;
+		/**
+		 * Specific padding for content section
+		 */
+		contentPadding?: string;
+		/**
+		 * Specific padding for footer section
+		 */
+		footerPadding?: string;
+		/**
+		 * Custom width for modal
+		 */
+		width?: string;
+		/**
+		 * Custom height for modal
+		 */
+		height?: string;
+		/**
+		 * CSS position property for the modal overlay
+		 */
+		position?: 'fixed' | 'absolute';
+		/**
+		 * Additional CSS classes
+		 */
+		class?: string;
+		/**
+		 * Custom styles
+		 */
+		style?: string;
+		/**
+		 * Z-index for the modal
+		 */
+		zIndex?: number;
+		/**
+		 * Background color for overlay
+		 */
+		overlayColor?: string;
+		/**
+		 * Default header title text
+		 */
+		title?: string;
+		/**
+		 * Default action button text
+		 */
+		actionText?: string;
+		/**
+		 * Default cancel button text
+		 */
+		cancelText?: string;
+		/**
+		 * Header content snippet
+		 */
+		header?: Snippet;
+		/**
+		 * Main content snippet
+		 */
+		children?: Snippet;
+		/**
+		 * Footer content snippet
+		 */
+		footer?: Snippet;
+		/**
+		 * Custom close button icon
+		 */
+		closeIcon?: Component;
+		/**
+		 * Event handler for when modal requests to close
+		 */
+		onOpenChange?: (open: boolean) => void;
+		/**
+		 * Event handler for overlay click
+		 */
+		onOverlayClick?: () => void;
+		/**
+		 * Event handler for escape key press
+		 */
+		onEscapeKeyDown?: () => void;
+		/**
+		 * Event handler for default action button click
+		 */
+		onAction?: () => void;
+		/**
+		 * Event handler for default cancel button click
+		 */
+		onCancel?: () => void;
+	}
+
+	let {
+		open = false,
+		showHeader = true,
+		showFooter = true,
+		showCloseButton = true,
+		closeOnOverlayClick = true,
+		closeOnEscape = true,
+		loading = false,
+		loadingMessage = 'Loading content...',
+		padding = '8px 12px',
+		headerPadding,
+		contentPadding,
+		footerPadding,
+		width = '28em',
+		height = 'auto',
+		position = 'fixed',
+		class: className = '',
+		style: customStyle = '',
+		zIndex = 99999999997,
+		overlayColor = 'rgba(0, 0, 0, 0.4)',
+		title = 'Modal',
+		actionText = 'Action',
+		cancelText = 'Cancel',
+		header,
+		children,
+		footer,
+		closeIcon = CloseIcon,
+		onOpenChange,
+		onOverlayClick,
+		onEscapeKeyDown,
+		onAction,
+		onCancel,
+		...restProps
+	}: Props = $props();
+
+	// Component state
+	let modalElement = $state<HTMLElement>();
+	let overlayElement = $state<HTMLElement>();
+	let closeButtonElement = $state<HTMLButtonElement>();
+	let previouslyFocusedElement = $state<HTMLElement>();
+
+	// Track if modal was opened in this render cycle
+	let previousOpen = $state(open);
+
+	// Icon component binding
+	let CloseIconComponent = $derived(closeIcon);
+
+	// Computed CSS classes
+	let overlayClasses = $derived.by(() => {
+		const classes = ['modal-overlay'];
+		if (!closeOnOverlayClick) classes.push('prevent-overlay-close');
+		if (className) classes.push(className);
+		return classes.join(' ');
+	});
+
+	// Computed CSS styles for modal container
+	let modalStyles = $derived.by(() => {
+		const styles = [`width: ${width}`, `height: ${height}`];
+		if (customStyle) styles.push(customStyle);
+		return styles.join('; ');
+	});
+
+	// Computed padding styles for each section
+	let headerStyles = $derived(`padding: ${headerPadding || padding}`);
+	let contentStyles = $derived(`padding: ${contentPadding || padding}`);
+	let footerStyles = $derived(`padding: ${footerPadding || padding}`);
+
+	// Computed overlay styles
+	let overlayStyles = $derived.by(() => {
+		const styles = [`position: ${position}`, `background: ${overlayColor}`, `z-index: ${zIndex}`];
+		return styles.join('; ');
+	});
+
+	// Focus management - Store the previously focused element when modal opens
+	$effect(() => {
+		if (open && !previousOpen) {
+			// Modal is opening
+			previouslyFocusedElement = document.activeElement as HTMLElement;
+		} else if (!open && previousOpen) {
+			// Modal is closing
+			if (previouslyFocusedElement) {
+				tick().then(() => {
+					previouslyFocusedElement?.focus();
+				});
+			}
+		}
+		previousOpen = open;
+	});
+
+	// Body scroll lock effect
+	$effect(() => {
+		if (open) {
+			document.body.style.overflow = 'hidden';
+		} else {
+			document.body.style.overflow = '';
+		}
+
+		// Cleanup when component unmounts
+		return () => {
+			document.body.style.overflow = '';
+		};
+	});
+
+	// Focus the close button when modal opens
+	onMount(async () => {
+		if (open) {
+			await tick();
+			closeButtonElement?.focus();
+		}
+	});
+
+	// Watch for open changes and focus management
+	$effect(() => {
+		if (open && closeButtonElement) {
+			tick().then(() => {
+				closeButtonElement?.focus();
+			});
+		}
+	});
+
+	/**
+	 * Close the modal
+	 */
+	function closeModal() {
+		onOpenChange?.(false);
+	}
+
+	/**
+	 * Handle overlay click
+	 */
+	function handleOverlayClick() {
+		onOverlayClick?.();
+
+		if (closeOnOverlayClick) {
+			closeModal();
+		}
+	}
+
+	/**
+	 * Handle escape key press
+	 */
+	function handleEscapeKey() {
+		onEscapeKeyDown?.();
+
+		if (closeOnEscape) {
+			closeModal();
+		}
+	}
+
+	/**
+	 * Handle keydown events for modal
+	 */
+	function handleKeyDown(event: KeyboardEvent) {
+		if (event.key === 'Escape') {
+			event.preventDefault();
+			handleEscapeKey();
+		}
+	}
+
+	/**
+	 * Focus trap implementation
+	 */
+	function trapFocus(event: KeyboardEvent) {
+		if (!modalElement || event.key !== 'Tab') return;
+
+		const focusableElements = modalElement.querySelectorAll(
+			'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+		) as NodeListOf<HTMLElement>;
+
+		const firstElement = focusableElements[0];
+		const lastElement = focusableElements[focusableElements.length - 1];
+
+		if (event.shiftKey) {
+			// Shift + Tab
+			if (document.activeElement === firstElement) {
+				event.preventDefault();
+				lastElement?.focus();
+			}
+		} else {
+			// Tab
+			if (document.activeElement === lastElement) {
+				event.preventDefault();
+				firstElement?.focus();
+			}
+		}
+	}
+</script>
+
+{#if open}
+	<div
+		class={overlayClasses}
+		bind:this={overlayElement}
+		style={overlayStyles}
+		onclick={handleOverlayClick}
+		onkeydown={handleKeyDown}
+		tabindex="-1"
+		role="dialog"
+		aria-modal="true"
+		aria-labelledby={showHeader ? 'modal-header' : undefined}
+		{...restProps}
+	>
+		<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+		<div
+			class="modal-content"
+			bind:this={modalElement}
+			style={modalStyles}
+			onclick={(e) => e.stopPropagation()}
+			onkeydown={trapFocus}
+			role="document"
+		>
+			{#if loading}
+				<LoadingScreen
+					message={loadingMessage}
+					active={true}
+					spinnerSize={20}
+					position="absolute"
+				/>
+			{/if}
+
+			{#if showHeader}
+				<div class="header-bar" id="modal-header" style={headerStyles}>
+					{#if header}
+						{@render header()}
+					{:else}
+						<Text label={title} fontWeight="600" />
+					{/if}
+
+					{#if showCloseButton}
+						<button
+							bind:this={closeButtonElement}
+							onclick={closeModal}
+							aria-label="Close modal"
+							type="button"
+						>
+							<CloseIconComponent />
+						</button>
+					{/if}
+				</div>
+			{/if}
+
+			<div class="modal-body" style={contentStyles}>
+				{#if children}
+					{@render children()}
+				{/if}
+			</div>
+
+			{#if showFooter}
+				<div class="modal-footer" style={footerStyles}>
+					{#if footer}
+						{@render footer()}
+					{:else}
+						<div class="footer-buttons">
+							<Button variant="secondary" onclick={onCancel}>{cancelText}</Button>
+							<Button variant="primary" onclick={onAction}>{actionText}</Button>
+						</div>
+					{/if}
+				</div>
+			{/if}
+		</div>
+	</div>
+{/if}
+
+<style>
+	.modal-overlay {
+		top: 0;
+		left: 0;
+		width: 100vw;
+		height: 100vh;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.modal-content {
+		border-radius: var(--border-radius);
+		background: var(--background1);
+		color: var(--text1);
+		animation: zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		min-height: 0;
+	}
+
+	@keyframes zoom {
+		from {
+			transform: scale(0.95);
+		}
+		to {
+			transform: scale(1);
+		}
+	}
+
+	@keyframes fade {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	button {
+		border: none;
+		user-select: none;
+		width: 24px;
+		padding: 0px 4px;
+		font-family: inherit;
+		font-size: inherit;
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 24px;
+		border-radius: 4px;
+		color: rgb(171, 171, 171);
+		background: transparent;
+		box-sizing: border-box;
+		box-shadow: none;
+		align-self: center;
+		cursor: pointer;
+	}
+
+	button:hover {
+		filter: brightness(1.1);
+	}
+
+	.header-bar {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		border-bottom: 1px solid var(--border1);
+		gap: 4px;
+		width: 100%;
+	}
+
+	.prevent-overlay-close {
+		cursor: progress;
+	}
+
+	.modal-body {
+		flex: 1;
+		min-height: 0;
+		overflow: auto;
+	}
+
+	.modal-footer {
+		border-top: 1px solid var(--border1);
+	}
+
+	.footer-buttons {
+		display: flex;
+		gap: 8px;
+		justify-content: flex-end;
+	}
+</style>

package/dist/ui/components/modal/Modal.svelte.d.ts

@@ -0,0 +1,130 @@
+import type { Component, Snippet } from 'svelte';
+interface Props {
+    /**
+     * Whether the modal is open/visible
+     */
+    open?: boolean;
+    /**
+     * Whether to show the header bar
+     */
+    showHeader?: boolean;
+    /**
+     * Whether to show the footer bar
+     */
+    showFooter?: boolean;
+    /**
+     * Whether to show the close button in header
+     */
+    showCloseButton?: boolean;
+    /**
+     * Whether the modal can be closed by clicking overlay
+     */
+    closeOnOverlayClick?: boolean;
+    /**
+     * Whether the modal can be closed by pressing Escape key
+     */
+    closeOnEscape?: boolean;
+    /**
+     * Whether the modal is in loading state
+     */
+    loading?: boolean;
+    /**
+     * Loading message to display
+     */
+    loadingMessage?: string;
+    /**
+     * Global padding for modal content
+     */
+    padding?: string;
+    /**
+     * Specific padding for header section
+     */
+    headerPadding?: string;
+    /**
+     * Specific padding for content section
+     */
+    contentPadding?: string;
+    /**
+     * Specific padding for footer section
+     */
+    footerPadding?: string;
+    /**
+     * Custom width for modal
+     */
+    width?: string;
+    /**
+     * Custom height for modal
+     */
+    height?: string;
+    /**
+     * CSS position property for the modal overlay
+     */
+    position?: 'fixed' | 'absolute';
+    /**
+     * Additional CSS classes
+     */
+    class?: string;
+    /**
+     * Custom styles
+     */
+    style?: string;
+    /**
+     * Z-index for the modal
+     */
+    zIndex?: number;
+    /**
+     * Background color for overlay
+     */
+    overlayColor?: string;
+    /**
+     * Default header title text
+     */
+    title?: string;
+    /**
+     * Default action button text
+     */
+    actionText?: string;
+    /**
+     * Default cancel button text
+     */
+    cancelText?: string;
+    /**
+     * Header content snippet
+     */
+    header?: Snippet;
+    /**
+     * Main content snippet
+     */
+    children?: Snippet;
+    /**
+     * Footer content snippet
+     */
+    footer?: Snippet;
+    /**
+     * Custom close button icon
+     */
+    closeIcon?: Component;
+    /**
+     * Event handler for when modal requests to close
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Event handler for overlay click
+     */
+    onOverlayClick?: () => void;
+    /**
+     * Event handler for escape key press
+     */
+    onEscapeKeyDown?: () => void;
+    /**
+     * Event handler for default action button click
+     */
+    onAction?: () => void;
+    /**
+     * Event handler for default cancel button click
+     */
+    onCancel?: () => void;
+}
+declare const Modal: Component<Props, {}, "">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;

package/dist/ui/components/modal/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Modal } from './Modal.svelte';
+export type { ModalProps, ModalContext } from './types.js';

package/dist/ui/components/modal/index.js

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

package/dist/ui/components/modal/types.d.ts

@@ -0,0 +1,75 @@
+import type { Component, Snippet } from 'svelte';
+/**
+ * Modal component props interface
+ */
+export interface ModalProps {
+    /** Whether the modal is open/visible */
+    open?: boolean;
+    /** Whether to show the header bar */
+    showHeader?: boolean;
+    /** Whether to show the footer bar */
+    showFooter?: boolean;
+    /** Whether to show the close button in header */
+    showCloseButton?: boolean;
+    /** Whether the modal can be closed by clicking overlay */
+    closeOnOverlayClick?: boolean;
+    /** Whether the modal can be closed by pressing Escape key */
+    closeOnEscape?: boolean;
+    /** Whether the modal is in loading state */
+    loading?: boolean;
+    /** Loading message to display */
+    loadingMessage?: string;
+    /** Global padding for modal content (fallback for individual sections) */
+    padding?: string;
+    /** Specific padding for header section */
+    headerPadding?: string;
+    /** Specific padding for content section */
+    contentPadding?: string;
+    /** Specific padding for footer section */
+    footerPadding?: string;
+    /** Custom width for modal */
+    width?: string;
+    /** Custom height for modal */
+    height?: string;
+    /** CSS position property for the modal overlay */
+    position?: 'fixed' | 'absolute';
+    /** Additional CSS classes */
+    class?: string;
+    /** Custom styles */
+    style?: string;
+    /** Z-index for the modal */
+    zIndex?: number;
+    /** Background color for overlay */
+    overlayColor?: string;
+    /** Default header title text */
+    title?: string;
+    /** Default action button text */
+    actionText?: string;
+    /** Default cancel button text */
+    cancelText?: string;
+    /** Header content snippet */
+    header?: Snippet;
+    /** Main content snippet */
+    children?: Snippet;
+    /** Footer content snippet */
+    footer?: Snippet;
+    /** Custom close button icon */
+    closeIcon?: Component;
+    /** Event handler for when modal requests to close */
+    onOpenChange?: (open: boolean) => void;
+    /** Event handler for overlay click */
+    onOverlayClick?: () => void;
+    /** Event handler for escape key press */
+    onEscapeKeyDown?: () => void;
+    /** Event handler for default action button click */
+    onAction?: () => void;
+    /** Event handler for default cancel button click */
+    onCancel?: () => void;
+}
+/**
+ * Modal context for compound components
+ */
+export interface ModalContext {
+    open: boolean;
+    close: () => void;
+}

package/dist/ui/components/modal/types.js

@@ -0,0 +1 @@
+export {};