@smartnet360/svelte-grid 0.1.0

package/dist/components/Menu.svelte

@@ -0,0 +1,215 @@
+<script lang="ts" generics="T">
+	import type { MenuItemDefinition, MenuContext, MenuItemAction } from '../types.js';
+	import Menu from './Menu.svelte';
+
+	interface Props {
+		/** Menu items */
+		items: MenuItemDefinition<T>[];
+		/** Context passed to menu actions */
+		context: MenuContext<T>;
+		/** CSS class */
+		class?: string;
+	}
+
+	let { items, context, class: className = '' }: Props = $props();
+
+	// ============================================
+	// Submenu State
+	// ============================================
+
+	let activeSubmenuIndex = $state<number | null>(null);
+	let submenuRect = $state<DOMRect | null>(null);
+	let menuItemRefs: (HTMLDivElement | undefined)[] = $state([]);
+
+	// ============================================
+	// Event Handlers
+	// ============================================
+
+	// Type guard for action items
+	function isActionItem(item: MenuItemDefinition<T>): item is MenuItemAction<T> {
+		return !item.separator;
+	}
+
+	function handleItemClick(item: MenuItemAction<T>, event: MouseEvent) {
+		event.stopPropagation();
+
+		// Check if disabled
+		const disabled =
+			typeof item.disabled === 'function' ? item.disabled(context) : item.disabled;
+
+		if (disabled) return;
+
+		// If has submenu, toggle it
+		if (item.menu && item.menu.length > 0) {
+			return;
+		}
+
+		// Execute action and close
+		item.action?.(context);
+		context.closeMenu();
+	}
+
+	function handleItemMouseEnter(index: number, item: MenuItemAction<T>) {
+		if (item.menu && item.menu.length > 0) {
+			activeSubmenuIndex = index;
+			const ref = menuItemRefs[index];
+			if (ref) {
+				submenuRect = ref.getBoundingClientRect();
+			}
+		} else {
+			activeSubmenuIndex = null;
+		}
+	}
+
+	function handleItemMouseLeave() {
+		// Keep submenu open when hovering over it
+	}
+
+	function handleKeydown(event: KeyboardEvent, item: MenuItemAction<T>, index: number) {
+		if (event.key === 'Enter' || event.key === ' ') {
+			event.preventDefault();
+			handleItemClick(item, event as unknown as MouseEvent);
+		} else if (event.key === 'ArrowRight' && item.menu) {
+			event.preventDefault();
+			activeSubmenuIndex = index;
+			const ref = menuItemRefs[index];
+			if (ref) {
+				submenuRect = ref.getBoundingClientRect();
+			}
+		} else if (event.key === 'ArrowLeft' && activeSubmenuIndex !== null) {
+			event.preventDefault();
+			activeSubmenuIndex = null;
+		}
+	}
+
+	// ============================================
+	// Computed
+	// ============================================
+
+	function isDisabled(item: MenuItemAction<T>): boolean {
+		if (typeof item.disabled === 'function') {
+			return item.disabled(context);
+		}
+		return item.disabled === true;
+	}
+</script>
+
+<div class="sg-menu {className}" role="menu">
+	{#each items as item, index (index)}
+		{#if item.separator}
+			<div class="sg-menu-separator" role="separator"></div>
+		{:else if isActionItem(item)}
+			{@const disabled = isDisabled(item)}
+			<div
+				bind:this={menuItemRefs[index]}
+				class="sg-menu-item {item.cssClass ?? ''}"
+				class:sg-menu-item-disabled={disabled}
+				class:sg-menu-item-has-submenu={item.menu && item.menu.length > 0}
+				class:sg-menu-item-active={activeSubmenuIndex === index}
+				role="menuitem"
+				tabindex={disabled ? -1 : 0}
+				aria-disabled={disabled}
+				onclick={(e) => handleItemClick(item, e)}
+				onmouseenter={() => handleItemMouseEnter(index, item)}
+				onmouseleave={handleItemMouseLeave}
+				onkeydown={(e) => handleKeydown(e, item, index)}
+			>
+				{#if item.icon}
+					<span class="sg-menu-item-icon">{@html item.icon}</span>
+				{/if}
+				<span class="sg-menu-item-label">{item.label}</span>
+				{#if item.menu && item.menu.length > 0}
+					<span class="sg-menu-item-arrow">›</span>
+				{/if}
+			</div>
+
+			<!-- Submenu -->
+			{#if item.menu && item.menu.length > 0 && activeSubmenuIndex === index && submenuRect}
+				<div
+					class="sg-submenu"
+					role="menu"
+					tabindex="-1"
+					style="top: {submenuRect.top}px; left: {submenuRect.right}px;"
+					onmouseenter={() => (activeSubmenuIndex = index)}
+					onmouseleave={() => (activeSubmenuIndex = null)}
+				>
+					<Menu items={item.menu} {context} />
+				</div>
+			{/if}
+		{/if}
+	{/each}
+</div>
+
+<style>
+	.sg-menu {
+		padding: 4px 0;
+		min-width: 160px;
+	}
+
+	.sg-menu-item {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		padding: 8px 12px;
+		cursor: pointer;
+		font-size: 14px;
+		color: var(--sg-menu-text, #1e293b);
+		transition: background-color 0.1s ease;
+	}
+
+	.sg-menu-item:hover:not(.sg-menu-item-disabled) {
+		background: var(--sg-menu-hover-bg, #f1f5f9);
+	}
+
+	.sg-menu-item:focus {
+		outline: none;
+		background: var(--sg-menu-focus-bg, #e2e8f0);
+	}
+
+	.sg-menu-item-active {
+		background: var(--sg-menu-hover-bg, #f1f5f9);
+	}
+
+	.sg-menu-item-disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.sg-menu-item-icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 16px;
+		height: 16px;
+		flex-shrink: 0;
+	}
+
+	.sg-menu-item-label {
+		flex: 1;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.sg-menu-item-arrow {
+		color: var(--sg-menu-arrow, #94a3b8);
+		font-size: 16px;
+		margin-left: auto;
+	}
+
+	.sg-menu-separator {
+		height: 1px;
+		background: var(--sg-menu-separator, #e2e8f0);
+		margin: 4px 0;
+	}
+
+	.sg-submenu {
+		position: fixed;
+		z-index: 1001;
+		background: var(--sg-popup-bg, #ffffff);
+		border: 1px solid var(--sg-popup-border, #e2e8f0);
+		border-radius: 6px;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+		min-width: 160px;
+	}
+</style>

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

@@ -0,0 +1,33 @@
+import type { MenuItemDefinition, MenuContext } from '../types.js';
+import Menu from './Menu.svelte';
+declare function $$render<T>(): {
+    props: {
+        /** Menu items */
+        items: MenuItemDefinition<T>[];
+        /** Context passed to menu actions */
+        context: MenuContext<T>;
+        /** CSS class */
+        class?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Menu: $$IsomorphicComponent;
+type Menu<T> = InstanceType<typeof Menu<T>>;
+export default Menu;

package/dist/components/Popup.svelte

@@ -0,0 +1,189 @@
+<script lang="ts">
+	import { onMount, onDestroy } from 'svelte';
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		/** Whether the popup is visible */
+		open: boolean;
+		/** Target element to position relative to */
+		targetRect: DOMRect | null;
+		/** Preferred position relative to target */
+		position?: 'bottom' | 'top' | 'left' | 'right' | 'bottom-start' | 'bottom-end';
+		/** Close callback */
+		onclose?: () => void;
+		/** CSS class for the popup */
+		class?: string;
+		/** Popup content */
+		children: Snippet;
+	}
+
+	let {
+		open,
+		targetRect,
+		position = 'bottom-start',
+		onclose,
+		class: className = '',
+		children
+	}: Props = $props();
+
+	let popupRef: HTMLDivElement | undefined = $state();
+	let popupStyle = $state('');
+
+	// ============================================
+	// Positioning
+	// ============================================
+
+	function updatePosition() {
+		if (!popupRef || !targetRect || !open) return;
+
+		const popupRect = popupRef.getBoundingClientRect();
+		const viewportWidth = window.innerWidth;
+		const viewportHeight = window.innerHeight;
+		const scrollX = window.scrollX;
+		const scrollY = window.scrollY;
+
+		let top = 0;
+		let left = 0;
+
+		// Calculate base position
+		switch (position) {
+			case 'bottom':
+				top = targetRect.bottom + scrollY;
+				left = targetRect.left + scrollX + (targetRect.width - popupRect.width) / 2;
+				break;
+			case 'bottom-start':
+				top = targetRect.bottom + scrollY;
+				left = targetRect.left + scrollX;
+				break;
+			case 'bottom-end':
+				top = targetRect.bottom + scrollY;
+				left = targetRect.right + scrollX - popupRect.width;
+				break;
+			case 'top':
+				top = targetRect.top + scrollY - popupRect.height;
+				left = targetRect.left + scrollX + (targetRect.width - popupRect.width) / 2;
+				break;
+			case 'left':
+				top = targetRect.top + scrollY + (targetRect.height - popupRect.height) / 2;
+				left = targetRect.left + scrollX - popupRect.width;
+				break;
+			case 'right':
+				top = targetRect.top + scrollY + (targetRect.height - popupRect.height) / 2;
+				left = targetRect.right + scrollX;
+				break;
+		}
+
+		// Viewport collision detection - flip if needed
+		if (left + popupRect.width > viewportWidth + scrollX) {
+			left = viewportWidth + scrollX - popupRect.width - 8;
+		}
+		if (left < scrollX) {
+			left = scrollX + 8;
+		}
+		if (top + popupRect.height > viewportHeight + scrollY) {
+			// Flip to top
+			top = targetRect.top + scrollY - popupRect.height;
+		}
+		if (top < scrollY) {
+			top = scrollY + 8;
+		}
+
+		popupStyle = `top: ${top}px; left: ${left}px;`;
+	}
+
+	// ============================================
+	// Effects
+	// ============================================
+
+	$effect(() => {
+		if (open && targetRect && popupRef) {
+			// Use requestAnimationFrame to ensure DOM is updated
+			requestAnimationFrame(updatePosition);
+		}
+	});
+
+	// ============================================
+	// Event Handlers
+	// ============================================
+
+	function handleClickOutside(event: MouseEvent) {
+		if (!open || !popupRef) return;
+
+		const target = event.target as Node;
+		if (!popupRef.contains(target)) {
+			onclose?.();
+		}
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (!open) return;
+
+		if (event.key === 'Escape') {
+			event.preventDefault();
+			onclose?.();
+		}
+	}
+
+	function handleScroll() {
+		if (open) {
+			onclose?.();
+		}
+	}
+
+	// ============================================
+	// Lifecycle
+	// ============================================
+
+	onMount(() => {
+		// Delay to avoid immediate close from the click that opened it
+		setTimeout(() => {
+			document.addEventListener('mousedown', handleClickOutside);
+		}, 0);
+		document.addEventListener('keydown', handleKeydown);
+		window.addEventListener('scroll', handleScroll, true);
+	});
+
+	onDestroy(() => {
+		document.removeEventListener('mousedown', handleClickOutside);
+		document.removeEventListener('keydown', handleKeydown);
+		window.removeEventListener('scroll', handleScroll, true);
+	});
+</script>
+
+{#if open}
+	<div
+		bind:this={popupRef}
+		class="sg-popup {className}"
+		style={popupStyle}
+		role="dialog"
+		aria-modal="true"
+	>
+		{@render children()}
+	</div>
+{/if}
+
+<style>
+	.sg-popup {
+		position: fixed;
+		z-index: 1000;
+		background: var(--sg-popup-bg, #ffffff);
+		border: 1px solid var(--sg-popup-border, #e2e8f0);
+		border-radius: 6px;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+		min-width: 120px;
+		max-width: 320px;
+		overflow: hidden;
+		animation: sg-popup-fade-in 0.15s ease-out;
+	}
+
+	@keyframes sg-popup-fade-in {
+		from {
+			opacity: 0;
+			transform: translateY(-4px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+</style>

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

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Whether the popup is visible */
+    open: boolean;
+    /** Target element to position relative to */
+    targetRect: DOMRect | null;
+    /** Preferred position relative to target */
+    position?: 'bottom' | 'top' | 'left' | 'right' | 'bottom-start' | 'bottom-end';
+    /** Close callback */
+    onclose?: () => void;
+    /** CSS class for the popup */
+    class?: string;
+    /** Popup content */
+    children: Snippet;
+}
+declare const Popup: import("svelte").Component<Props, {}, "">;
+type Popup = ReturnType<typeof Popup>;
+export default Popup;

package/dist/components/Row.svelte

@@ -0,0 +1,115 @@
+<script lang="ts" generics="T">
+	import { getContext } from 'svelte';
+	import type { Snippet } from 'svelte';
+	import type { ColumnDefinition, CellContext, GridEvents } from '../types.js';
+	import { GRID_CONTEXT_KEY, type GridStateManager } from '../state/gridState.svelte.js';
+	import Cell from './Cell.svelte';
+
+	interface Props {
+		row: T;
+		columns: ColumnDefinition<T>[];
+		rowIndex: number;
+		rowHeight: number;
+		onrowclick?: GridEvents<T>['rowclick'];
+		onrowdblclick?: GridEvents<T>['rowdblclick'];
+		oncellclick?: GridEvents<T>['cellclick'];
+		cell?: Snippet<[CellContext<T>]>;
+		onrowcontextmenu?: (row: T, rowIndex: number, event: MouseEvent) => void;
+	}
+
+	let {
+		row,
+		columns,
+		rowIndex,
+		rowHeight,
+		onrowclick,
+		onrowdblclick,
+		oncellclick,
+		cell,
+		onrowcontextmenu
+	}: Props = $props();
+
+	// Get grid state for column widths
+	const gridState = getContext<GridStateManager<T>>(GRID_CONTEXT_KEY);
+
+	// ============================================
+	// Event Handlers
+	// ============================================
+
+	function handleClick(event: MouseEvent) {
+		onrowclick?.(row, rowIndex, event);
+	}
+
+	function handleDblClick(event: MouseEvent) {
+		onrowdblclick?.(row, rowIndex, event);
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Enter') {
+			onrowclick?.(row, rowIndex, event as unknown as MouseEvent);
+		}
+	}
+
+	function handleContextMenu(event: MouseEvent) {
+		onrowcontextmenu?.(row, rowIndex, event);
+	}
+</script>
+
+<div
+	class="sg-row"
+	role="row"
+	aria-rowindex={rowIndex + 1}
+	tabindex="0"
+	style="height: {rowHeight}px;"
+	onclick={handleClick}
+	ondblclick={handleDblClick}
+	onkeydown={handleKeydown}
+	oncontextmenu={onrowcontextmenu ? handleContextMenu : undefined}
+>
+	{#each columns as column, columnIndex (column.field)}
+		{@const frozenLeft = column.frozen === true || column.frozen === 'left'}
+		{@const frozenRight = column.frozen === 'right'}
+		{@const frozenPosition = frozenLeft
+			? { side: 'left' as const, offset: gridState?.getFrozenLeftPosition(column.field) ?? 0 }
+			: frozenRight
+				? { side: 'right' as const, offset: gridState?.getFrozenRightPosition(column.field) ?? 0 }
+				: undefined}
+		<Cell
+			value={(row as Record<string, unknown>)[column.field]}
+			{row}
+			{column}
+			{rowIndex}
+			{columnIndex}
+			columnWidth={gridState?.getColumnWidth(column.field)}
+			{oncellclick}
+			{cell}
+			{frozenPosition}
+		/>
+	{/each}
+</div>
+
+<style>
+	.sg-row {
+		display: flex;
+		min-width: 100%;
+		background: var(--sg-row-bg, #ffffff);
+		box-sizing: border-box;
+		transition: background-color var(--sg-transition-fast, 0.1s ease);
+	}
+
+	.sg-row:focus {
+		outline: 2px solid var(--sg-primary-color, #3b82f6);
+		outline-offset: -2px;
+		z-index: 1;
+	}
+
+	/* Striped rows (applied via parent) */
+	:global(.sg-striped) .sg-row:nth-child(even) {
+		background: var(--sg-row-alt-bg, #f8fafc);
+	}
+
+	/* Hover state (applied via parent) */
+	:global(.sg-row-hover) .sg-row:hover {
+		background: var(--sg-row-hover-bg, #f1f5f9);
+	}
+</style>

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

@@ -0,0 +1,36 @@
+import type { Snippet } from 'svelte';
+import type { ColumnDefinition, CellContext, GridEvents } from '../types.js';
+declare function $$render<T>(): {
+    props: {
+        row: T;
+        columns: ColumnDefinition<T>[];
+        rowIndex: number;
+        rowHeight: number;
+        onrowclick?: GridEvents<T>["rowclick"];
+        onrowdblclick?: GridEvents<T>["rowdblclick"];
+        oncellclick?: GridEvents<T>["cellclick"];
+        cell?: Snippet<[CellContext<T>]>;
+        onrowcontextmenu?: (row: T, rowIndex: number, event: MouseEvent) => void;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Row: $$IsomorphicComponent;
+type Row<T> = InstanceType<typeof Row<T>>;
+export default Row;

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+/**
+ * svelte-grid - A Svelte 5 table/grid library
+ *
+ * @packageDocumentation
+ */
+export { default as Grid } from './components/Grid.svelte';
+export { default as GridHeader } from './components/GridHeader.svelte';
+export { default as GridBody } from './components/GridBody.svelte';
+export { default as HeaderCell } from './components/HeaderCell.svelte';
+export { default as Row } from './components/Row.svelte';
+export { default as Cell } from './components/Cell.svelte';
+export { default as Popup } from './components/Popup.svelte';
+export { default as Menu } from './components/Menu.svelte';
+export { default as GroupHeader } from './components/GroupHeader.svelte';
+export { createGridState, GridStateManager, GRID_CONTEXT_KEY } from './state/gridState.svelte.js';
+export { themes, defaultTheme, tailwindBlue, tailwindEmerald, tailwindRose, tailwindAmber, tailwindSlate, darkTheme, themeToStyle, createTheme } from './themes.js';
+export type { GridTheme, ThemeName } from './themes.js';
+export type { RowData, ColumnDefinition, FormatterType, FormatterFunction, CellContext, RowContext, GridOptions, GridState, TablePlugin, PluginContext, PluginInstance, GridEvents, GridSnippets, MenuItemDefinition, MenuItemAction, MenuItemSeparator, MenuAction, MenuContext, PopupContent, PopupContext, GroupBy, GroupConfig, GroupInfo, GroupAggregates, DisplayRow } from './types.js';

package/dist/index.js

@@ -0,0 +1,20 @@
+/**
+ * svelte-grid - A Svelte 5 table/grid library
+ *
+ * @packageDocumentation
+ */
+// Main Grid Component
+export { default as Grid } from './components/Grid.svelte';
+// Individual components (for advanced use cases)
+export { default as GridHeader } from './components/GridHeader.svelte';
+export { default as GridBody } from './components/GridBody.svelte';
+export { default as HeaderCell } from './components/HeaderCell.svelte';
+export { default as Row } from './components/Row.svelte';
+export { default as Cell } from './components/Cell.svelte';
+export { default as Popup } from './components/Popup.svelte';
+export { default as Menu } from './components/Menu.svelte';
+export { default as GroupHeader } from './components/GroupHeader.svelte';
+// State Management
+export { createGridState, GridStateManager, GRID_CONTEXT_KEY } from './state/gridState.svelte.js';
+// Theming
+export { themes, defaultTheme, tailwindBlue, tailwindEmerald, tailwindRose, tailwindAmber, tailwindSlate, darkTheme, themeToStyle, createTheme } from './themes.js';