@smartnet360/svelte-grid 0.1.0

package/dist/components/Grid.svelte

@@ -0,0 +1,504 @@
+<script lang="ts" generics="T">
+	import { setContext, onMount, onDestroy } from 'svelte';
+	import type { Snippet } from 'svelte';
+	import type { ColumnDefinition, CellContext, GridEvents, MenuItemDefinition, MenuContext, PopupContent, PopupContext, GroupBy, GroupInfo } from '../types.js';
+	import { createGridState, GRID_CONTEXT_KEY } from '../state/gridState.svelte.js';
+	import { themes, themeToStyle, type GridTheme, type ThemeName } from '../themes.js';
+	import GridHeader from './GridHeader.svelte';
+	import GridBody from './GridBody.svelte';
+	import Popup from './Popup.svelte';
+	import Menu from './Menu.svelte';
+
+	// ============================================
+	// Props
+	// ============================================
+
+	interface Props {
+		/** Array of data objects */
+		data: T[];
+		/** Column definitions */
+		columns: ColumnDefinition<T>[];
+		/** Unique key field in data for row identification */
+		rowKey?: string;
+		/** Fixed height for the grid container */
+		height?: string | number;
+		/** Fixed row height in pixels */
+		rowHeight?: number;
+		/** Placeholder text when no data */
+		placeholder?: string;
+		/** Enable row hover highlighting */
+		rowHover?: boolean;
+		/** Enable alternating row colors */
+		stripedRows?: boolean;
+		/** Enable grid borders */
+		bordered?: boolean;
+		/** Grid density */
+		density?: 'compact' | 'normal' | 'comfortable';
+		/** Enable column resizing */
+		resizableColumns?: boolean;
+		/** Number of rows to freeze at the top */
+		frozenRows?: number;
+		/** CSS class for the grid container */
+		class?: string;
+
+		// Events
+		/** Row click handler */
+		onrowclick?: GridEvents<T>['rowclick'];
+		/** Row double-click handler */
+		onrowdblclick?: GridEvents<T>['rowdblclick'];
+		/** Cell click handler */
+		oncellclick?: GridEvents<T>['cellclick'];
+		/** Header click handler */
+		onheaderclick?: GridEvents<T>['headerclick'];
+
+		// Snippets for custom rendering
+		/** Custom cell renderer */
+		cell?: Snippet<[CellContext<T>]>;
+		/** Custom header cell renderer */
+		headerCell?: Snippet<[ColumnDefinition<T>]>;
+		/** Custom empty state renderer */
+		empty?: Snippet<[]>;
+
+		// Menus & Popups
+		/** Row context menu (right-click) */
+		rowContextMenu?: MenuItemDefinition<T>[] | ((row: T, rowIndex: number) => MenuItemDefinition<T>[]);
+		/** Row click popup content */
+		rowClickPopup?: PopupContent<T>;
+
+		// Grouping
+		/** Group data by field(s) */
+		groupBy?: GroupBy<T>;
+		/** Custom group header snippet */
+		groupHeader?: Snippet<[GroupInfo<T>]>;
+		/** Height of group header rows */
+		groupHeaderHeight?: number;
+
+		// Theming
+		/** Theme name or custom theme object */
+		theme?: ThemeName | GridTheme;
+	}
+
+	let {
+		data,
+		columns,
+		rowKey = 'id',
+		height = '400px',
+		rowHeight = 40,
+		placeholder = 'No data available',
+		rowHover = true,
+		stripedRows = false,
+		bordered = true,
+		density = 'normal',
+		resizableColumns = false,
+		frozenRows = 0,
+		class: className = '',
+		onrowclick,
+		onrowdblclick,
+		oncellclick,
+		onheaderclick,
+		cell,
+		headerCell,
+		empty,
+		rowContextMenu,
+		rowClickPopup,
+		groupBy,
+		groupHeader,
+		groupHeaderHeight = 36,
+		theme
+	}: Props = $props();
+
+	// ============================================
+	// State Management
+	// ============================================
+
+	// Initialize state manager - typed with generic T
+	// Use empty defaults; $effect will sync actual values
+	const gridState = createGridState<T>({
+		data: [],
+		columns: [],
+		rowHeight: 40
+	});
+
+	// Provide state via context for child components
+	setContext(GRID_CONTEXT_KEY, gridState);
+
+	// ============================================
+	// Reactive Updates
+	// ============================================
+
+	// Sync props to state reactively
+	$effect(() => {
+		gridState.setData(data);
+	});
+
+	$effect(() => {
+		gridState.setColumns(columns);
+	});
+
+	$effect(() => {
+		gridState.rowHeight = rowHeight;
+	});
+
+	$effect(() => {
+		gridState.setFrozenRowCount(frozenRows);
+	});
+
+	$effect(() => {
+		gridState.setGroupBy(groupBy);
+	});
+
+	$effect(() => {
+		gridState.setGroupHeaderHeight(groupHeaderHeight);
+	});
+
+	// ============================================
+	// Scroll Handler
+	// ============================================
+
+	function handleBodyScroll(scrollTop: number, scrollLeft: number) {
+		gridState.setScrollPosition(scrollTop, scrollLeft);
+	}
+
+	// ============================================
+	// Context Menu State
+	// ============================================
+
+	let contextMenuOpen = $state(false);
+	let contextMenuRect = $state<DOMRect | null>(null);
+	let contextMenuRow = $state<T | null>(null);
+	let contextMenuRowIndex = $state<number>(-1);
+
+	// Get context menu items (resolve function if needed)
+	const contextMenuItems = $derived.by((): MenuItemDefinition<T>[] => {
+		if (!rowContextMenu || !contextMenuRow) return [];
+		if (typeof rowContextMenu === 'function') {
+			return rowContextMenu(contextMenuRow, contextMenuRowIndex);
+		}
+		return rowContextMenu;
+	});
+
+	// Context menu context
+	const contextMenuContext = $derived<MenuContext<T>>({
+		row: contextMenuRow ?? undefined,
+		rowIndex: contextMenuRowIndex,
+		closeMenu: () => {
+			contextMenuOpen = false;
+		}
+	});
+
+	function handleRowContextMenu(row: T, rowIndex: number, event: MouseEvent) {
+		if (!rowContextMenu) return;
+
+		event.preventDefault();
+		contextMenuRow = row;
+		contextMenuRowIndex = rowIndex;
+
+		// Create a rect at the mouse position
+		contextMenuRect = new DOMRect(event.clientX, event.clientY, 0, 0);
+		contextMenuOpen = true;
+		rowClickPopupOpen = false; // Close popup if open
+	}
+
+	function closeContextMenu() {
+		contextMenuOpen = false;
+	}
+
+	// ============================================
+	// Row Click Popup State
+	// ============================================
+
+	let rowClickPopupOpen = $state(false);
+	let rowClickPopupRect = $state<DOMRect | null>(null);
+	let rowClickPopupRow = $state<T | null>(null);
+	let rowClickPopupRowIndex = $state<number>(-1);
+
+	// Popup context
+	const rowPopupContext = $derived<PopupContext<T>>({
+		row: rowClickPopupRow ?? undefined,
+		rowIndex: rowClickPopupRowIndex,
+		closePopup: () => {
+			rowClickPopupOpen = false;
+		}
+	});
+
+	function handleRowClickForPopup(row: T, rowIndex: number, event: MouseEvent) {
+		if (!rowClickPopup) return;
+
+		const target = event.currentTarget as HTMLElement;
+		rowClickPopupRow = row;
+		rowClickPopupRowIndex = rowIndex;
+		rowClickPopupRect = target.getBoundingClientRect();
+		rowClickPopupOpen = true;
+		contextMenuOpen = false; // Close context menu if open
+	}
+
+	function closeRowPopup() {
+		rowClickPopupOpen = false;
+	}
+
+	// Combined row click handler
+	function handleRowClick(row: T, rowIndex: number, event: MouseEvent) {
+		// Call user's onrowclick if provided
+		onrowclick?.(row, rowIndex, event);
+
+		// Handle popup if configured
+		if (rowClickPopup) {
+			handleRowClickForPopup(row, rowIndex, event);
+		}
+	}
+
+	// ============================================
+	// Popup Content Rendering
+	// ============================================
+
+	function getRowPopupContent(): string | null {
+		if (!rowClickPopup || !rowClickPopupRow) return null;
+		if (typeof rowClickPopup === 'string') {
+			return rowClickPopup;
+		}
+		if (typeof rowClickPopup === 'function') {
+			const result = rowClickPopup(rowPopupContext);
+			return typeof result === 'string' ? result : null;
+		}
+		return null;
+	}
+
+	const isSnippetRowPopup = $derived(
+		rowClickPopup !== undefined &&
+			typeof rowClickPopup !== 'string' &&
+			typeof rowClickPopup !== 'function'
+	);
+
+	// ============================================
+	// Container Reference & Resize Observer
+	// ============================================
+
+	let containerRef: HTMLDivElement | undefined = $state();
+	let resizeObserver: ResizeObserver | undefined;
+
+	onMount(() => {
+		if (containerRef) {
+			// Set initial dimensions
+			gridState.setContainerDimensions(containerRef.clientWidth, containerRef.clientHeight);
+
+			// Observe resize
+			resizeObserver = new ResizeObserver((entries) => {
+				for (const entry of entries) {
+					gridState.setContainerDimensions(
+						entry.contentRect.width,
+						entry.contentRect.height
+					);
+				}
+			});
+			resizeObserver.observe(containerRef);
+		}
+	});
+
+	onDestroy(() => {
+		resizeObserver?.disconnect();
+		gridState.destroy();
+	});
+
+	// ============================================
+	// Computed Styles
+	// ============================================
+
+	// Resolve theme to GridTheme object
+	const resolvedTheme = $derived.by((): GridTheme | undefined => {
+		if (!theme) return undefined;
+		if (typeof theme === 'string') {
+			return themes[theme];
+		}
+		return theme;
+	});
+
+	const containerStyle = $derived.by(() => {
+		const h = typeof height === 'number' ? `${height}px` : height;
+		const baseStyle = `height: ${h};`;
+
+		if (resolvedTheme) {
+			return `${baseStyle} ${themeToStyle(resolvedTheme)}`;
+		}
+		return baseStyle;
+	});
+
+	const densityClass = $derived.by(() => {
+		const densityMap = {
+			compact: 'sg-density-compact',
+			normal: 'sg-density-normal',
+			comfortable: 'sg-density-comfortable'
+		};
+		return densityMap[density];
+	});
+
+	const gridClasses = $derived.by(() => {
+		const classes = ['sg-grid', densityClass];
+		if (bordered) classes.push('sg-bordered');
+		if (stripedRows) classes.push('sg-striped');
+		if (rowHover) classes.push('sg-row-hover');
+		if (className) classes.push(className);
+		return classes.join(' ');
+	});
+</script>
+
+<div
+	bind:this={containerRef}
+	class={gridClasses}
+	style={containerStyle}
+	role="grid"
+	aria-rowcount={gridState.totalRows}
+	aria-colcount={gridState.visibleColumns.length}
+>
+	<GridHeader
+		columns={gridState.visibleColumns}
+		{onheaderclick}
+		{headerCell}
+		resizable={resizableColumns}
+	/>
+
+	{#if gridState.totalRows === 0}
+		<div class="sg-empty" role="status">
+			{#if empty}
+				{@render empty()}
+			{:else}
+				<span class="sg-empty-text">{placeholder}</span>
+			{/if}
+		</div>
+	{:else}
+		<GridBody
+			displayRows={gridState.isGrouped ? gridState.visibleDisplayRows : undefined}
+			rows={gridState.isGrouped ? undefined : gridState.visibleRows}
+			columns={gridState.visibleColumns}
+			{rowKey}
+			startIndex={gridState.startIndex}
+			totalHeight={gridState.totalHeight}
+			offsetY={gridState.offsetY}
+			{rowHeight}
+			{groupHeaderHeight}
+			{groupHeader}
+			onrowclick={handleRowClick}
+			{onrowdblclick}
+			{oncellclick}
+			onscroll={handleBodyScroll}
+			{cell}
+			frozenRows={gridState.frozenRows}
+			frozenRowCount={gridState.frozenRowCount}
+			onrowcontextmenu={rowContextMenu ? handleRowContextMenu : undefined}
+		/>
+	{/if}
+
+	<!-- Row context menu -->
+	{#if rowContextMenu && contextMenuOpen}
+		<Popup open={contextMenuOpen} targetRect={contextMenuRect} position="bottom-start" onclose={closeContextMenu}>
+			<Menu items={contextMenuItems} context={contextMenuContext} />
+		</Popup>
+	{/if}
+
+	<!-- Row click popup -->
+	{#if rowClickPopup && rowClickPopupOpen}
+		<Popup open={rowClickPopupOpen} targetRect={rowClickPopupRect} position="bottom-start" onclose={closeRowPopup}>
+			<div class="sg-row-popup-content">
+				{#if isSnippetRowPopup && rowClickPopup}
+					{@render (rowClickPopup as import('svelte').Snippet<[PopupContext<T>]>)(rowPopupContext)}
+				{:else}
+					{@html getRowPopupContent() ?? ''}
+				{/if}
+			</div>
+		</Popup>
+	{/if}
+</div>
+
+<style>
+	/* ============================================
+	   Grid Container - Modern Tailwind-inspired Design
+	   ============================================ */
+	.sg-grid {
+		/* Colors - Refined slate palette */
+		--sg-border-color: #e2e8f0;
+		--sg-header-bg: linear-gradient(to bottom, #f8fafc, #f1f5f9);
+		--sg-header-color: #0f172a;
+		--sg-header-border: #cbd5e1;
+		--sg-row-bg: #ffffff;
+		--sg-row-alt-bg: #f8fafc;
+		--sg-row-hover-bg: #f1f5f9;
+		--sg-primary-color: #3b82f6;
+		--sg-primary-light: #dbeafe;
+
+		/* Spacing */
+		--sg-cell-padding-x: 14px;
+		--sg-cell-padding-y: 10px;
+
+		/* Typography */
+		--sg-font-size: 13.5px;
+		--sg-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+		--sg-header-font-weight: 600;
+		--sg-header-font-size: 12px;
+		--sg-header-letter-spacing: 0.025em;
+
+		/* Shadows & Effects */
+		--sg-header-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+		--sg-frozen-shadow: 4px 0 8px -2px rgba(0, 0, 0, 0.08);
+
+		/* Transitions */
+		--sg-transition-fast: 0.1s ease;
+		--sg-transition-normal: 0.15s ease;
+
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+		font-family: var(--sg-font-family);
+		font-size: var(--sg-font-size);
+		background: var(--sg-row-bg);
+		color: #334155;
+		line-height: 1.5;
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+	}
+
+	.sg-bordered {
+		border: 1px solid var(--sg-border-color);
+		border-radius: 8px;
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
+	}
+
+	/* Density Variants */
+	.sg-density-compact {
+		--sg-cell-padding-x: 10px;
+		--sg-cell-padding-y: 6px;
+		--sg-font-size: 12.5px;
+	}
+
+	.sg-density-normal {
+		--sg-cell-padding-x: 14px;
+		--sg-cell-padding-y: 10px;
+		--sg-font-size: 13.5px;
+	}
+
+	.sg-density-comfortable {
+		--sg-cell-padding-x: 18px;
+		--sg-cell-padding-y: 14px;
+		--sg-font-size: 14px;
+	}
+
+	/* ============================================
+	   Empty State
+	   ============================================ */
+	.sg-empty {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex: 1;
+		padding: 48px 24px;
+		color: #94a3b8;
+	}
+
+	.sg-empty-text {
+		font-size: 14px;
+	}
+
+	/* Row popup content */
+	.sg-row-popup-content {
+		padding: 12px;
+		font-size: 13px;
+	}
+</style>

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

@@ -0,0 +1,80 @@
+import type { Snippet } from 'svelte';
+import type { ColumnDefinition, CellContext, GridEvents, MenuItemDefinition, PopupContent, GroupBy, GroupInfo } from '../types.js';
+import { type GridTheme, type ThemeName } from '../themes.js';
+declare function $$render<T>(): {
+    props: {
+        /** Array of data objects */
+        data: T[];
+        /** Column definitions */
+        columns: ColumnDefinition<T>[];
+        /** Unique key field in data for row identification */
+        rowKey?: string;
+        /** Fixed height for the grid container */
+        height?: string | number;
+        /** Fixed row height in pixels */
+        rowHeight?: number;
+        /** Placeholder text when no data */
+        placeholder?: string;
+        /** Enable row hover highlighting */
+        rowHover?: boolean;
+        /** Enable alternating row colors */
+        stripedRows?: boolean;
+        /** Enable grid borders */
+        bordered?: boolean;
+        /** Grid density */
+        density?: "compact" | "normal" | "comfortable";
+        /** Enable column resizing */
+        resizableColumns?: boolean;
+        /** Number of rows to freeze at the top */
+        frozenRows?: number;
+        /** CSS class for the grid container */
+        class?: string;
+        /** Row click handler */
+        onrowclick?: GridEvents<T>["rowclick"];
+        /** Row double-click handler */
+        onrowdblclick?: GridEvents<T>["rowdblclick"];
+        /** Cell click handler */
+        oncellclick?: GridEvents<T>["cellclick"];
+        /** Header click handler */
+        onheaderclick?: GridEvents<T>["headerclick"];
+        /** Custom cell renderer */
+        cell?: Snippet<[CellContext<T>]>;
+        /** Custom header cell renderer */
+        headerCell?: Snippet<[ColumnDefinition<T>]>;
+        /** Custom empty state renderer */
+        empty?: Snippet<[]>;
+        /** Row context menu (right-click) */
+        rowContextMenu?: MenuItemDefinition<T>[] | ((row: T, rowIndex: number) => MenuItemDefinition<T>[]);
+        /** Row click popup content */
+        rowClickPopup?: PopupContent<T>;
+        /** Group data by field(s) */
+        groupBy?: GroupBy<T>;
+        /** Custom group header snippet */
+        groupHeader?: Snippet<[GroupInfo<T>]>;
+        /** Height of group header rows */
+        groupHeaderHeight?: number;
+        /** Theme name or custom theme object */
+        theme?: ThemeName | GridTheme;
+    };
+    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 Grid: $$IsomorphicComponent;
+type Grid<T> = InstanceType<typeof Grid<T>>;
+export default Grid;