@smartnet360/svelte-grid 0.1.0

package/dist/components/Cell.svelte

@@ -0,0 +1,249 @@
+<script lang="ts" generics="T">
+	import type { Snippet } from 'svelte';
+	import type { ColumnDefinition, CellContext, GridEvents } from '../types.js';
+
+	interface Props {
+		value: unknown;
+		row: T;
+		column: ColumnDefinition<T>;
+		rowIndex: number;
+		columnIndex: number;
+		columnWidth?: number;
+		oncellclick?: GridEvents<T>['cellclick'];
+		cell?: Snippet<[CellContext<T>]>;
+		frozenPosition?: { side: 'left' | 'right'; offset: number };
+	}
+
+	let { value, row, column, rowIndex, columnIndex, columnWidth, oncellclick, cell, frozenPosition }: Props =
+		$props();
+
+	// ============================================
+	// Cell Context for custom renderers
+	// ============================================
+
+	const cellContext = $derived<CellContext<T>>({
+		value,
+		row,
+		column,
+		rowIndex,
+		columnIndex
+	});
+
+	// ============================================
+	// Computed Styles
+	// ============================================
+
+	const cellStyle = $derived.by(() => {
+		const styles: string[] = [];
+
+		// Use columnWidth (from resize) if available, else column.width
+		const width = columnWidth ?? column.width;
+
+		if (width) {
+			const w = typeof width === 'number' ? `${width}px` : width;
+			styles.push(`width: ${w}`);
+			styles.push(`min-width: ${w}`);
+		} else {
+			styles.push('flex: 1');
+			styles.push('min-width: 100px');
+		}
+
+		if (column.minWidth && !columnWidth) {
+			styles.push(`min-width: ${column.minWidth}px`);
+		}
+
+		if (column.maxWidth) {
+			styles.push(`max-width: ${column.maxWidth}px`);
+		}
+
+		// Frozen column positioning
+		if (frozenPosition) {
+			styles.push('position: sticky');
+			styles.push(`${frozenPosition.side}: ${frozenPosition.offset}px`);
+			styles.push('z-index: 1');
+		}
+
+		return styles.join('; ');
+	});
+
+	const isFrozen = $derived(!!frozenPosition);
+
+	const alignClass = $derived.by(() => {
+		if (column.hAlign === 'center') return 'sg-align-center';
+		if (column.hAlign === 'right') return 'sg-align-right';
+		return 'sg-align-left';
+	});
+
+	const vAlignClass = $derived.by(() => {
+		if (column.vAlign === 'top') return 'sg-valign-top';
+		if (column.vAlign === 'bottom') return 'sg-valign-bottom';
+		return 'sg-valign-middle';
+	});
+
+	// ============================================
+	// Formatting
+	// ============================================
+
+	const formattedValue = $derived.by(() => {
+		if (value === null || value === undefined) {
+			return '';
+		}
+
+		// Custom formatter function
+		if (typeof column.formatter === 'function') {
+			return column.formatter(cellContext);
+		}
+
+		// Built-in formatters
+		switch (column.formatter) {
+			case 'number':
+				return typeof value === 'number' ? value.toLocaleString() : String(value);
+
+			case 'money':
+				return typeof value === 'number'
+					? value.toLocaleString(undefined, { style: 'currency', currency: 'USD' })
+					: String(value);
+
+			case 'date':
+				if (value instanceof Date) {
+					return value.toLocaleDateString();
+				}
+				if (typeof value === 'string' || typeof value === 'number') {
+					return new Date(value).toLocaleDateString();
+				}
+				return String(value);
+
+			case 'datetime':
+				if (value instanceof Date) {
+					return value.toLocaleString();
+				}
+				if (typeof value === 'string' || typeof value === 'number') {
+					return new Date(value).toLocaleString();
+				}
+				return String(value);
+
+			case 'boolean':
+				return value ? '✓' : '✗';
+
+			case 'text':
+			default:
+				return String(value);
+		}
+	});
+
+	// ============================================
+	// Tooltip
+	// ============================================
+
+	const tooltipText = $derived.by(() => {
+		if (!column.tooltip) return undefined;
+
+		if (typeof column.tooltip === 'function') {
+			return column.tooltip(cellContext);
+		}
+
+		return column.tooltip;
+	});
+
+	// ============================================
+	// Event Handlers
+	// ============================================
+
+	function handleClick(event: MouseEvent) {
+		event.stopPropagation(); // Prevent row click
+		oncellclick?.(cellContext, event);
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Enter' || event.key === ' ') {
+			event.preventDefault();
+			oncellclick?.(cellContext, event as unknown as MouseEvent);
+		}
+	}
+</script>
+
+<div
+	class="sg-cell {alignClass} {vAlignClass} {column.cssClass ?? ''}"
+	class:sg-frozen={isFrozen}
+	class:sg-frozen-left={frozenPosition?.side === 'left'}
+	class:sg-frozen-right={frozenPosition?.side === 'right'}
+	style={cellStyle}
+	role="gridcell"
+	aria-colindex={columnIndex + 1}
+	tabindex="-1"
+	title={tooltipText}
+	onclick={handleClick}
+	onkeydown={handleKeydown}
+>
+	{#if cell}
+		{@render cell(cellContext)}
+	{:else}
+		<span class="sg-cell-content">
+			{formattedValue}
+		</span>
+	{/if}
+</div>
+
+<style>
+	.sg-cell {
+		display: flex;
+		padding: var(--sg-cell-padding-y) var(--sg-cell-padding-x);
+		overflow: hidden;
+		box-sizing: border-box;
+		border-bottom: 1px solid var(--sg-border-color, #f1f5f9);
+		font-feature-settings: 'tnum' 1; /* Tabular numbers for data */
+		transition: background-color var(--sg-transition-fast, 0.1s ease);
+	}
+
+	.sg-cell-content {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		width: 100%;
+		color: #334155;
+	}
+
+	/* Horizontal Alignment */
+	.sg-align-left {
+		justify-content: flex-start;
+		text-align: left;
+	}
+
+	.sg-align-center {
+		justify-content: center;
+		text-align: center;
+	}
+
+	.sg-align-right {
+		justify-content: flex-end;
+		text-align: right;
+	}
+
+	/* Vertical Alignment */
+	.sg-valign-top {
+		align-items: flex-start;
+	}
+
+	.sg-valign-middle {
+		align-items: center;
+	}
+
+	.sg-valign-bottom {
+		align-items: flex-end;
+	}
+
+	/* Frozen column styles */
+	.sg-frozen {
+		background: inherit;
+	}
+
+	.sg-frozen-left {
+		border-right: 2px solid var(--sg-frozen-border-color, #cbd5e1);
+		box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
+	}
+
+	.sg-frozen-right {
+		border-left: 2px solid var(--sg-frozen-border-color, #cbd5e1);
+		box-shadow: -2px 0 4px rgba(0, 0, 0, 0.05);
+	}
+</style>

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

@@ -0,0 +1,39 @@
+import type { Snippet } from 'svelte';
+import type { ColumnDefinition, CellContext, GridEvents } from '../types.js';
+declare function $$render<T>(): {
+    props: {
+        value: unknown;
+        row: T;
+        column: ColumnDefinition<T>;
+        rowIndex: number;
+        columnIndex: number;
+        columnWidth?: number;
+        oncellclick?: GridEvents<T>["cellclick"];
+        cell?: Snippet<[CellContext<T>]>;
+        frozenPosition?: {
+            side: "left" | "right";
+            offset: number;
+        };
+    };
+    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 Cell: $$IsomorphicComponent;
+type Cell<T> = InstanceType<typeof Cell<T>>;
+export default Cell;