@smartnet360/svelte-grid 0.1.0

package/dist/components/HeaderCell.svelte

@@ -0,0 +1,623 @@
+<script lang="ts" generics="T">
+	import { getContext } from 'svelte';
+	import type { Snippet } from 'svelte';
+	import type { ColumnDefinition, GridEvents, SortDirection, MenuItemDefinition, MenuContext, PopupContext } from '../types.js';
+	import { GRID_CONTEXT_KEY, type GridStateManager } from '../state/gridState.svelte.js';
+	import Popup from './Popup.svelte';
+	import Menu from './Menu.svelte';
+
+	interface Props {
+		column: ColumnDefinition<T>;
+		index: number;
+		columnWidth?: number;
+		onheaderclick?: GridEvents<T>['headerclick'];
+		headerCell?: Snippet<[ColumnDefinition<T>]>;
+		onsort?: (field: string, direction: SortDirection, multiSort: boolean) => void;
+		sortDirection?: SortDirection;
+		sortIndex?: number;
+		onresizestart?: (field: string, startX: number, startWidth: number) => void;
+		frozenPosition?: { side: 'left' | 'right'; offset: number };
+	}
+
+	let {
+		column,
+		index,
+		columnWidth,
+		onheaderclick,
+		headerCell,
+		onsort,
+		sortDirection = 'none',
+		sortIndex = -1,
+		onresizestart,
+		frozenPosition
+	}: Props = $props();
+
+	// Get grid state for filtering
+	const gridState = getContext<GridStateManager<T>>(GRID_CONTEXT_KEY);
+
+	// ============================================
+	// Menu & Popup State
+	// ============================================
+
+	let menuOpen = $state(false);
+	let menuTargetRect = $state<DOMRect | null>(null);
+	let menuButtonRef: HTMLButtonElement | undefined = $state();
+
+	let popupOpen = $state(false);
+	let popupTargetRect = $state<DOMRect | null>(null);
+	let popupButtonRef: HTMLButtonElement | undefined = $state();
+
+	// Computed: Does this column have a header menu?
+	const hasHeaderMenu = $derived(
+		column.headerMenu !== undefined &&
+			(Array.isArray(column.headerMenu) ? column.headerMenu.length > 0 : true)
+	);
+
+	// Computed: Does this column have a header popup?
+	const hasHeaderPopup = $derived(column.headerPopup !== undefined);
+	const showPopupIcon = $derived(column.headerPopupIcon !== undefined && column.headerPopupIcon !== false);
+
+	// Get menu items (resolve function if needed)
+	const menuItems = $derived.by((): MenuItemDefinition<T>[] => {
+		if (!column.headerMenu) return [];
+		if (typeof column.headerMenu === 'function') {
+			return column.headerMenu(column);
+		}
+		return column.headerMenu;
+	});
+
+	// Menu context
+	const menuContext = $derived<MenuContext<T>>({
+		column,
+		closeMenu: () => {
+			menuOpen = false;
+		}
+	});
+
+	// Popup context
+	const popupContext = $derived<PopupContext<T>>({
+		column,
+		closePopup: () => {
+			popupOpen = false;
+		}
+	});
+
+	// Get popup icon
+	const popupIcon = $derived.by(() => {
+		if (typeof column.headerPopupIcon === 'string') {
+			return column.headerPopupIcon;
+		}
+		// Default filter icon
+		return '⚙';
+	});
+
+	// ============================================
+	// Menu/Popup Handlers
+	// ============================================
+
+	function handleMenuClick(event: MouseEvent) {
+		event.stopPropagation();
+		if (menuButtonRef) {
+			menuTargetRect = menuButtonRef.getBoundingClientRect();
+		}
+		menuOpen = !menuOpen;
+		popupOpen = false; // Close popup if open
+	}
+
+	function handlePopupClick(event: MouseEvent) {
+		event.stopPropagation();
+		if (popupButtonRef) {
+			popupTargetRect = popupButtonRef.getBoundingClientRect();
+		}
+		popupOpen = !popupOpen;
+		menuOpen = false; // Close menu if open
+	}
+
+	function closeMenu() {
+		menuOpen = false;
+	}
+
+	function closePopup() {
+		popupOpen = false;
+	}
+
+	// ============================================
+	// Popup Content Rendering
+	// ============================================
+
+	function getPopupContent(): string | null {
+		if (!column.headerPopup) return null;
+		if (typeof column.headerPopup === 'string') {
+			return column.headerPopup;
+		}
+		if (typeof column.headerPopup === 'function') {
+			const result = column.headerPopup(popupContext);
+			return typeof result === 'string' ? result : null;
+		}
+		return null;
+	}
+
+	const isSnippetPopup = $derived(
+		column.headerPopup !== undefined &&
+			typeof column.headerPopup !== 'string' &&
+			typeof column.headerPopup !== 'function'
+	);
+
+	// ============================================
+	// Computed
+	// ============================================
+
+	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: 2');
+		}
+
+		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 sortable = $derived(column.sortable === true);
+	const filterable = $derived(column.headerFilter === true);
+
+	const ariaSort = $derived.by(() => {
+		if (sortDirection === 'asc') return 'ascending';
+		if (sortDirection === 'desc') return 'descending';
+		return 'none';
+	});
+
+	// ============================================
+	// Event Handlers
+	// ============================================
+
+	function handleClick(event: MouseEvent) {
+		// Don't trigger sort if clicking on filter input
+		if ((event.target as HTMLElement).closest('.sg-header-filter')) {
+			return;
+		}
+
+		// Don't trigger sort if clicking on menu/popup buttons
+		if ((event.target as HTMLElement).closest('.sg-header-menu-btn, .sg-header-popup-btn')) {
+			return;
+		}
+
+		// Don't trigger sort if clicking near the resize handle area (right 12px)
+		if (onresizestart) {
+			const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
+			const clickX = event.clientX - rect.left;
+			const rightEdgeZone = rect.width - 12; // 12px dead zone for resize
+			if (clickX > rightEdgeZone) {
+				return;
+			}
+		}
+
+		if (sortable) {
+			const multiSort = event.shiftKey;
+			onsort?.(column.field, sortDirection, multiSort);
+		}
+
+		onheaderclick?.(column, event);
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Enter' || event.key === ' ') {
+			event.preventDefault();
+			if (sortable) {
+				const multiSort = event.shiftKey;
+				onsort?.(column.field, sortDirection, multiSort);
+			}
+			onheaderclick?.(column, event as unknown as MouseEvent);
+		}
+	}
+
+	function handleFilterInput(event: Event) {
+		const value = (event.target as HTMLInputElement).value;
+		gridState?.setHeaderFilter(column.field, value);
+	}
+
+	function handleResizeMouseDown(event: MouseEvent) {
+		event.preventDefault();
+		event.stopPropagation();
+		const currentWidth = columnWidth ?? (typeof column.width === 'number' ? column.width : 150);
+		onresizestart?.(column.field, event.clientX, currentWidth);
+	}
+
+	function handleResizeDblClick(event: MouseEvent) {
+		event.preventDefault();
+		event.stopPropagation();
+		// Auto-fit column width on double-click
+		gridState?.autoFitColumn(column.field);
+	}
+</script>
+
+<div
+	class="sg-header-cell {alignClass} {column.cssClass ?? ''}"
+	class:sg-sortable={sortable}
+	class:sg-sorted={sortDirection !== 'none'}
+	class:sg-frozen={isFrozen}
+	class:sg-frozen-left={frozenPosition?.side === 'left'}
+	class:sg-frozen-right={frozenPosition?.side === 'right'}
+	style={cellStyle}
+	role="columnheader"
+	aria-colindex={index + 1}
+	aria-sort={ariaSort}
+	tabindex={sortable ? 0 : -1}
+	title={column.headerTooltip ?? column.title}
+	onclick={handleClick}
+	onkeydown={handleKeydown}
+>
+	<div class="sg-header-cell-main">
+		{#if headerCell}
+			{@render headerCell(column)}
+		{:else}
+			<span class="sg-header-cell-content">
+				{column.title}
+			</span>
+		{/if}
+
+		<!-- Sort indicator -->
+		{#if sortable}
+			<span class="sg-sort-indicator" class:sg-sort-active={sortDirection !== 'none'}>
+				{#if sortDirection === 'asc'}
+					<svg class="sg-sort-icon" viewBox="0 0 24 24" fill="currentColor">
+						<path d="M7 14l5-5 5 5H7z" />
+					</svg>
+				{:else if sortDirection === 'desc'}
+					<svg class="sg-sort-icon" viewBox="0 0 24 24" fill="currentColor">
+						<path d="M7 10l5 5 5-5H7z" />
+					</svg>
+				{:else}
+					<svg class="sg-sort-icon sg-sort-icon-inactive" viewBox="0 0 24 24" fill="currentColor">
+						<path d="M7 10l5-5 5 5H7z M7 14l5 5 5-5H7z" />
+					</svg>
+				{/if}
+				{#if sortIndex >= 0}
+					<span class="sg-sort-index">{sortIndex + 1}</span>
+				{/if}
+			</span>
+		{/if}
+
+		<!-- Header popup icon -->
+		{#if showPopupIcon && hasHeaderPopup}
+			<button
+				bind:this={popupButtonRef}
+				class="sg-header-popup-btn"
+				class:sg-popup-open={popupOpen}
+				onclick={handlePopupClick}
+				title="Open popup"
+				aria-label="Open column popup"
+				aria-expanded={popupOpen}
+			>
+				{popupIcon}
+			</button>
+		{/if}
+
+		<!-- Header menu button -->
+		{#if hasHeaderMenu}
+			<button
+				bind:this={menuButtonRef}
+				class="sg-header-menu-btn"
+				class:sg-menu-open={menuOpen}
+				onclick={handleMenuClick}
+				title="Open menu"
+				aria-label="Open column menu"
+				aria-haspopup="menu"
+				aria-expanded={menuOpen}
+			>
+				<svg viewBox="0 0 24 24" fill="currentColor" width="14" height="14">
+					<path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
+				</svg>
+			</button>
+		{/if}
+	</div>
+
+	<!-- Header menu popup -->
+	{#if hasHeaderMenu && menuOpen}
+		<Popup open={menuOpen} targetRect={menuTargetRect} position="bottom-end" onclose={closeMenu}>
+			<Menu items={menuItems} context={menuContext} />
+		</Popup>
+	{/if}
+
+	<!-- Header popup -->
+	{#if hasHeaderPopup && popupOpen}
+		<Popup open={popupOpen} targetRect={popupTargetRect} position="bottom-start" onclose={closePopup}>
+			<div class="sg-header-popup-content">
+				{#if isSnippetPopup && column.headerPopup}
+					{@render (column.headerPopup as import('svelte').Snippet<[PopupContext<T>]>)(popupContext)}
+				{:else}
+					{@html getPopupContent() ?? ''}
+				{/if}
+			</div>
+		</Popup>
+	{/if}
+
+	<!-- Header filter input -->
+	{#if filterable}
+		<div class="sg-header-filter">
+			<input
+				type="text"
+				class="sg-header-filter-input"
+				placeholder="Filter..."
+				value={gridState?.getHeaderFilter(column.field) ?? ''}
+				oninput={handleFilterInput}
+				onclick={(e) => e.stopPropagation()}
+			/>
+		</div>
+	{/if}
+
+	<!-- Resize handle -->
+	{#if onresizestart}
+		<div
+			class="sg-resize-handle"
+			onmousedown={handleResizeMouseDown}
+			ondblclick={handleResizeDblClick}
+			role="separator"
+			aria-orientation="vertical"
+			title="Drag to resize, double-click to auto-fit"
+		></div>
+	{/if}
+</div>
+
+<style>
+	.sg-header-cell {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		padding: var(--sg-cell-padding-y) var(--sg-cell-padding-x);
+		font-weight: var(--sg-header-font-weight, 600);
+		font-size: var(--sg-header-font-size, 12px);
+		letter-spacing: var(--sg-header-letter-spacing, 0.025em);
+		text-transform: uppercase;
+		color: var(--sg-header-color, #475569);
+		user-select: none;
+		overflow: hidden;
+		box-sizing: border-box;
+		position: relative;
+		transition: background-color var(--sg-transition-fast, 0.1s ease);
+	}
+
+	.sg-header-cell.sg-sortable {
+		cursor: pointer;
+	}
+
+	.sg-header-cell.sg-sortable:hover {
+		background-color: var(--sg-header-hover-bg, rgba(0, 0, 0, 0.04));
+	}
+
+	.sg-header-cell.sg-sorted {
+		background-color: var(--sg-header-sorted-bg, rgba(59, 130, 246, 0.08));
+	}
+
+	.sg-header-cell:focus {
+		outline: 2px solid var(--sg-primary-color, #3b82f6);
+		outline-offset: -2px;
+	}
+
+	.sg-header-cell-main {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		min-height: 24px;
+	}
+
+	.sg-header-cell-content {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		flex: 1;
+	}
+
+	/* Alignment */
+	.sg-align-left .sg-header-cell-main {
+		justify-content: flex-start;
+		text-align: left;
+	}
+
+	.sg-align-center .sg-header-cell-main {
+		justify-content: center;
+		text-align: center;
+	}
+
+	.sg-align-right .sg-header-cell-main {
+		justify-content: flex-end;
+		text-align: right;
+	}
+
+	/* Sort indicator */
+	.sg-sort-indicator {
+		display: flex;
+		align-items: center;
+		gap: 2px;
+		flex-shrink: 0;
+		opacity: 0.4;
+		transition: opacity 0.15s ease;
+	}
+
+	.sg-sortable:hover .sg-sort-indicator {
+		opacity: 0.7;
+	}
+
+	.sg-sort-indicator.sg-sort-active {
+		opacity: 1;
+		color: var(--sg-primary-color, #3b82f6);
+	}
+
+	.sg-sort-icon {
+		width: 16px;
+		height: 16px;
+	}
+
+	.sg-sort-icon-inactive {
+		opacity: 0.5;
+	}
+
+	.sg-sort-index {
+		font-size: 10px;
+		font-weight: 700;
+		color: var(--sg-primary-color, #3b82f6);
+	}
+
+	/* Header filter */
+	.sg-header-filter {
+		margin-top: 4px;
+	}
+
+	.sg-header-filter-input {
+		width: 100%;
+		padding: 4px 8px;
+		font-size: 12px;
+		border: 1px solid var(--sg-border-color, #e2e8f0);
+		border-radius: 4px;
+		background: var(--sg-filter-input-bg, #fff);
+		color: var(--sg-text-color, #1e293b);
+		box-sizing: border-box;
+	}
+
+	.sg-header-filter-input:focus {
+		outline: none;
+		border-color: var(--sg-primary-color, #3b82f6);
+		box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+	}
+
+	.sg-header-filter-input::placeholder {
+		color: var(--sg-placeholder-color, #94a3b8);
+	}
+
+	/* Resize handle */
+	.sg-resize-handle {
+		position: absolute;
+		top: 0;
+		right: 0;
+		width: 10px;
+		height: 100%;
+		cursor: col-resize;
+		background: transparent;
+		transition: background-color 0.15s ease;
+	}
+
+	.sg-resize-handle:hover {
+		background-color: var(--sg-primary-color, #3b82f6);
+	}
+
+	.sg-resize-handle:active {
+		background-color: var(--sg-primary-color, #3b82f6);
+	}
+
+	/* Frozen column styles */
+	.sg-frozen {
+		background: var(--sg-header-bg, #f8fafc);
+	}
+
+	.sg-frozen-left {
+		border-right: 2px solid var(--sg-frozen-border-color, #cbd5e1);
+		box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
+	}
+
+	.sg-frozen-right {
+		border-left: 2px solid var(--sg-frozen-border-color, #cbd5e1);
+		box-shadow: -2px 0 4px rgba(0, 0, 0, 0.1);
+	}
+
+	/* Header menu button */
+	.sg-header-menu-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 20px;
+		height: 20px;
+		padding: 0;
+		border: none;
+		background: transparent;
+		color: var(--sg-header-icon-color, #64748b);
+		cursor: pointer;
+		border-radius: 4px;
+		flex-shrink: 0;
+		opacity: 0;
+		transition: opacity 0.15s ease, background-color 0.15s ease;
+	}
+
+	.sg-header-cell:hover .sg-header-menu-btn,
+	.sg-header-menu-btn.sg-menu-open {
+		opacity: 1;
+	}
+
+	.sg-header-menu-btn:hover {
+		background: var(--sg-header-icon-hover-bg, rgba(0, 0, 0, 0.1));
+	}
+
+	.sg-header-menu-btn.sg-menu-open {
+		background: var(--sg-header-icon-active-bg, rgba(59, 130, 246, 0.2));
+		color: var(--sg-primary-color, #3b82f6);
+	}
+
+	/* Header popup button */
+	.sg-header-popup-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 20px;
+		height: 20px;
+		padding: 0;
+		border: none;
+		background: transparent;
+		color: var(--sg-header-icon-color, #64748b);
+		cursor: pointer;
+		border-radius: 4px;
+		flex-shrink: 0;
+		font-size: 12px;
+		opacity: 0;
+		transition: opacity 0.15s ease, background-color 0.15s ease;
+	}
+
+	.sg-header-cell:hover .sg-header-popup-btn,
+	.sg-header-popup-btn.sg-popup-open {
+		opacity: 1;
+	}
+
+	.sg-header-popup-btn:hover {
+		background: var(--sg-header-icon-hover-bg, rgba(0, 0, 0, 0.1));
+	}
+
+	.sg-header-popup-btn.sg-popup-open {
+		background: var(--sg-header-icon-active-bg, rgba(59, 130, 246, 0.2));
+		color: var(--sg-primary-color, #3b82f6);
+	}
+
+	/* Header popup content */
+	.sg-header-popup-content {
+		padding: 12px;
+		font-size: 13px;
+		font-weight: normal;
+	}
+</style>

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

@@ -0,0 +1,40 @@
+import type { Snippet } from 'svelte';
+import type { ColumnDefinition, GridEvents, SortDirection } from '../types.js';
+declare function $$render<T>(): {
+    props: {
+        column: ColumnDefinition<T>;
+        index: number;
+        columnWidth?: number;
+        onheaderclick?: GridEvents<T>["headerclick"];
+        headerCell?: Snippet<[ColumnDefinition<T>]>;
+        onsort?: (field: string, direction: SortDirection, multiSort: boolean) => void;
+        sortDirection?: SortDirection;
+        sortIndex?: number;
+        onresizestart?: (field: string, startX: number, startWidth: number) => void;
+        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 HeaderCell: $$IsomorphicComponent;
+type HeaderCell<T> = InstanceType<typeof HeaderCell<T>>;
+export default HeaderCell;