@smartnet360/svelte-components 0.0.134 → 0.0.136

package/dist/core/{CellTable → CellTableV2}/CellTablePanel.svelte

@@ -1,8 +1,18 @@
 <script lang="ts">
+	/**
+	 * CellTablePanel V2 - Composable-based Cell Table Panel
+	 * 
+	 * Uses composables for reusable logic:
+	 * - usePersistence: localStorage read/write
+	 * - useColumnVisibility: column preset and visibility management
+	 * - useScrollSpy: group navigation
+	 */
 	import type { Snippet } from 'svelte';
+	import type { ColumnDefinition } from 'tabulator-tables';
 	import CellTable from './CellTable.svelte';
 	import CellTableToolbar from './CellTableToolbar.svelte';
 	import { getColumnMetadata, getPresetVisibleFields, DEFAULT_TECH_COLORS, DEFAULT_STATUS_COLORS, FBAND_COLORS } from './column-config';
+	import type { ColumnMetadataOptions } from './column-config';
 	import type {
 		CellData,
 		CellTableGroupField,
@@ -16,6 +26,9 @@
 		StatusColorMap,
 		GroupOption
 	} from './types';
+	import { usePersistence } from './composables/usePersistence.svelte';
+	import { useColumnVisibility } from './composables/useColumnVisibility.svelte';
+	import { useScrollSpy } from './composables/useScrollSpy.svelte';
 
 	interface Props {
 		/** Cell data array to display */
@@ -26,6 +39,10 @@
 		groupOptions?: GroupOption[];
 		/** Initial column preset */
 		columnPreset?: ColumnPreset;
+		/** Custom column definitions (overrides columnPreset when provided) */
+		customColumns?: ColumnDefinition[];
+		/** Column metadata filter options */
+		columnMetadataOptions?: ColumnMetadataOptions;
 		/** Enable row selection */
 		selectable?: boolean;
 		/** Enable multi-row selection */
@@ -52,7 +69,7 @@
 		showDetailsSidebar?: boolean;
 		/** Sidebar width in pixels */
 		sidebarWidth?: number;
-		/** Persist settings (groupBy, visibleColumns) to localStorage */
+		/** Persist settings to localStorage */
 		persistSettings?: boolean;
 		/** Storage key prefix for persisted settings */
 		storageKey?: string;
@@ -84,7 +101,9 @@
 		cells = [],
 		groupBy = $bindable('none'),
 		groupOptions,
-		columnPreset = $bindable('default'),
+		columnPreset: initialPreset = 'default',
+		customColumns,
+		columnMetadataOptions,
 		selectable = true,
 		multiSelect = true,
 		height = '100%',
@@ -99,7 +118,7 @@
 		showDetailsSidebar = false,
 		sidebarWidth = 320,
 		persistSettings = true,
-		storageKey = 'cell-table',
+		storageKey = 'cell-table-v2',
 		persistLayout = true,
 		showScrollSpy = false,
 		tableRef = $bindable(null),
@@ -113,122 +132,28 @@
 		contextMenu
 	}: Props = $props();
 
-	// Context menu state
-	let contextMenuVisible = $state(false);
-	let contextMenuRow: CellData | null = $state(null);
-	let contextMenuPosition = $state({ x: 0, y: 0 });
-
-	// Storage keys
-	const STORAGE_KEY_GROUP = `${storageKey}-groupBy`;
-	const STORAGE_KEY_FILTERS = `${storageKey}-filtersVisible`;
-	const STORAGE_KEY_SCROLLSPY = `${storageKey}-scrollSpyEnabled`;
-	const STORAGE_KEY_PRESET = `${storageKey}-columnPreset`;
+	// ========== Composables ==========
 	
-	// Per-preset column visibility storage key
-	function getColumnsStorageKey(preset: ColumnPreset): string {
-		return `${storageKey}-visibleColumns-${preset}`;
-	}
-
-	// Load persisted settings
-	function loadPersistedSettings() {
-		if (!persistSettings || typeof localStorage === 'undefined') return { filtersVisible: true, scrollSpyEnabled: showScrollSpy, preset: null };
-		
-		let filters = true;
-		let scrollSpy = showScrollSpy;
-		let preset: ColumnPreset | null = null;
-		
-		try {
-			const savedGroup = localStorage.getItem(STORAGE_KEY_GROUP);
-			if (savedGroup) {
-				groupBy = savedGroup as CellTableGroupField;
-			}
-			
-			const savedPreset = localStorage.getItem(STORAGE_KEY_PRESET);
-			if (savedPreset) {
-				preset = savedPreset as ColumnPreset;
-			}
-			
-			const savedFilters = localStorage.getItem(STORAGE_KEY_FILTERS);
-			if (savedFilters !== null) {
-				filters = savedFilters === 'true';
-			}
-			
-			const savedScrollSpy = localStorage.getItem(STORAGE_KEY_SCROLLSPY);
-			if (savedScrollSpy !== null) {
-				scrollSpy = savedScrollSpy === 'true';
-			}
-		} catch (e) {
-			console.warn('Failed to load CellTable settings:', e);
-		}
-		return { filtersVisible: filters, scrollSpyEnabled: scrollSpy, preset };
-	}
+	// Persistence utilities
+	const persistence = usePersistence({ storageKey, enabled: persistSettings });
 	
-	// Load columns for a specific preset
-	function loadColumnsForPreset(preset: ColumnPreset): string[] {
-		if (!persistSettings || typeof localStorage === 'undefined') {
-			return getPresetVisibleFields(preset);
-		}
-		try {
-			const saved = localStorage.getItem(getColumnsStorageKey(preset));
-			if (saved) {
-				return JSON.parse(saved) as string[];
-			}
-		} catch (e) {
-			console.warn('Failed to load columns for preset:', e);
-		}
-		return getPresetVisibleFields(preset);
-	}
-
-	// Save group setting
-	function saveGroupSetting(group: CellTableGroupField) {
-		if (!persistSettings || typeof localStorage === 'undefined') return;
-		try {
-			localStorage.setItem(STORAGE_KEY_GROUP, group);
-		} catch (e) {
-			console.warn('Failed to save group setting:', e);
-		}
-	}
-
-	// Save column visibility for current preset
-	function saveColumnVisibility(columns: string[]) {
-		if (!persistSettings || typeof localStorage === 'undefined') return;
-		try {
-			localStorage.setItem(getColumnsStorageKey(columnPreset), JSON.stringify(columns));
-		} catch (e) {
-			console.warn('Failed to save column visibility:', e);
-		}
-	}
-
-	// Save filter visibility
-	function saveFilterVisibility(visible: boolean) {
-		if (!persistSettings || typeof localStorage === 'undefined') return;
-		try {
-			localStorage.setItem(STORAGE_KEY_FILTERS, String(visible));
-		} catch (e) {
-			console.warn('Failed to save filter visibility:', e);
-		}
-	}
-
-	// Save scrollspy state
-	function saveScrollSpyState(enabled: boolean) {
-		if (!persistSettings || typeof localStorage === 'undefined') return;
-		try {
-			localStorage.setItem(STORAGE_KEY_SCROLLSPY, String(enabled));
-		} catch (e) {
-			console.warn('Failed to save scrollspy state:', e);
-		}
-	}
-
-	// Save column preset
-	function savePreset(preset: ColumnPreset) {
-		if (!persistSettings || typeof localStorage === 'undefined') return;
-		try {
-			localStorage.setItem(STORAGE_KEY_PRESET, preset);
-		} catch (e) {
-			console.warn('Failed to save preset:', e);
-		}
-	}
+	// Column visibility management
+	const columnVis = useColumnVisibility({
+		storageKey,
+		columnMeta: getColumnMetadata(columnMetadataOptions),
+		initialPreset,
+		persistSettings
+	});
+	
+	// ScrollSpy navigation
+	const scrollSpy = useScrollSpy({
+		storageKey,
+		initialEnabled: showScrollSpy,
+		persistSettings
+	});
 
+	// ========== Local State ==========
+	
 	let cellTable: CellTable;
 	let selectedCount = $state(0);
 	let selectedRows = $state<CellData[]>([]);
@@ -236,50 +161,28 @@
 	let sidebarOpen = $state(false);
 	let clickedCell: CellData | null = $state(null);
 	let tableRefSet = false;
-
-	// Column visibility management
-	const columnMeta = getColumnMetadata();
+	let filtersVisible = $state(persistence.load('filtersVisible', true));
 	
-	// Initialize from storage or defaults
-	const persistedSettings = loadPersistedSettings();
-	let filtersVisible = $state(persistedSettings.filtersVisible);
-	
-	// Apply persisted preset if available
-	if (persistedSettings.preset) {
-		columnPreset = persistedSettings.preset;
+	// Context menu state
+	let contextMenuVisible = $state(false);
+	let contextMenuRow: CellData | null = $state(null);
+	let contextMenuPosition = $state({ x: 0, y: 0 });
+
+	// Load initial groupBy from persistence
+	const savedGroupBy = persistence.loadString('groupBy', groupBy);
+	if (savedGroupBy && savedGroupBy !== groupBy) {
+		groupBy = savedGroupBy as CellTableGroupField;
 	}
-	
-	// Load columns for the current preset (with any saved customizations)
-	let visibleColumns = $state<string[]>(loadColumnsForPreset(columnPreset));
-	
-	// ScrollSpy state - initialize from persisted settings
-	let scrollSpyGroups = $state<{ key: string; count: number }[]>([]);
-	let scrollSpyEnabled = $state(persistedSettings.scrollSpyEnabled);
 
-	// Track preset changes to load per-preset columns
-	let prevPreset: ColumnPreset | null = columnPreset;
+	// ========== Effects ==========
 	
-	// Apply column visibility to Tabulator
-	function applyColumnVisibility(columns: string[]) {
-		if (!cellTable) return;
-		columnMeta.forEach(col => {
-			if (columns.includes(col.field)) {
-				cellTable.showColumn(col.field);
-			} else {
-				cellTable.hideColumn(col.field);
-			}
-		});
-	}
+	// Track preset changes to apply column visibility
+	let prevPreset: ColumnPreset | null = columnVis.columnPreset;
 	
-	// Update visible columns when preset changes - load saved customizations for that preset
 	$effect(() => {
-		if (columnPreset !== prevPreset) {
-			prevPreset = columnPreset;
-			// Load saved columns for this preset (or preset defaults if none saved)
-			const newColumns = loadColumnsForPreset(columnPreset);
-			visibleColumns = newColumns;
-			// Apply to Tabulator
-			applyColumnVisibility(newColumns);
+		if (columnVis.columnPreset !== prevPreset) {
+			prevPreset = columnVis.columnPreset;
+			columnVis.applyToTable(cellTable);
 		}
 	});
 
@@ -291,7 +194,7 @@
 				redraw: () => cellTable?.redraw()
 			};
 			// Apply persisted column visibility after table is ready
-			setTimeout(() => applyColumnVisibility(visibleColumns), 100);
+			setTimeout(() => columnVis.applyToTable(cellTable), 100);
 			// Apply persisted filter visibility after table is ready
 			if (!filtersVisible) {
 				setTimeout(() => cellTable?.toggleHeaderFilters(false), 100);
@@ -299,6 +202,8 @@
 		}
 	});
 
+	// ========== Event Handlers ==========
+
 	function handleSelectionChange(event: RowSelectionEvent) {
 		selectedCount = event.rows.length;
 		selectedRows = event.rows;
@@ -317,7 +222,9 @@
 	function handleDataChange(event: DataChangeEvent) {
 		filteredCount = event.filteredCount;
 		// Update scrollspy groups when data changes
-		updateScrollSpyGroups();
+		if (scrollSpy.enabled && groupBy !== 'none') {
+			setTimeout(() => scrollSpy.updateGroups(cellTable), 50);
+		}
 	}
 
 	function handleRowContextMenu(event: RowContextMenuEvent) {
@@ -340,43 +247,28 @@
 		}
 	}
 
-	function updateScrollSpyGroups() {
-		if (scrollSpyEnabled && groupBy !== 'none') {
-			// Small delay to ensure table has updated
-			setTimeout(() => {
-				scrollSpyGroups = cellTable?.getGroups() ?? [];
-			}, 50);
-		} else {
-			scrollSpyGroups = [];
-		}
-	}
-
 	function handleScrollToGroup(key: string) {
-		cellTable?.scrollToGroup(key);
+		scrollSpy.scrollToGroup(cellTable, key);
 	}
 
 	function handleToggleScrollSpy() {
-		scrollSpyEnabled = !scrollSpyEnabled;
-		saveScrollSpyState(scrollSpyEnabled);
-		if (scrollSpyEnabled && groupBy !== 'none') {
-			updateScrollSpyGroups();
-		} else {
-			scrollSpyGroups = [];
+		scrollSpy.toggle();
+		if (scrollSpy.enabled && groupBy !== 'none') {
+			setTimeout(() => scrollSpy.updateGroups(cellTable), 100);
 		}
 	}
 
 	function handleGroupChange(group: CellTableGroupField) {
 		groupBy = group;
-		saveGroupSetting(group);
+		persistence.saveString('groupBy', group);
 		// Update scrollspy groups after grouping changes
-		if (scrollSpyEnabled) {
-			setTimeout(() => updateScrollSpyGroups(), 100);
+		if (scrollSpy.enabled) {
+			setTimeout(() => scrollSpy.updateGroups(cellTable), 100);
 		}
 	}
 
 	function handlePresetChange(preset: ColumnPreset) {
-		columnPreset = preset;
-		savePreset(preset);
+		columnVis.setPreset(preset);
 	}
 
 	function handleExportCSV() {
@@ -402,41 +294,21 @@
 	function handleToggleFilters() {
 		filtersVisible = !filtersVisible;
 		cellTable?.toggleHeaderFilters(filtersVisible);
-		saveFilterVisibility(filtersVisible);
+		persistence.save('filtersVisible', filtersVisible);
 	}
 
 	function handleColumnVisibilityChange(field: string, visible: boolean) {
+		columnVis.toggleColumn(field, visible);
 		if (visible) {
-			if (!visibleColumns.includes(field)) {
-				visibleColumns = [...visibleColumns, field];
-			}
 			cellTable?.showColumn(field);
 		} else {
-			visibleColumns = visibleColumns.filter(f => f !== field);
 			cellTable?.hideColumn(field);
 		}
-		saveColumnVisibility(visibleColumns);
 	}
 
 	function handleResetColumns() {
-		const defaultFields = getPresetVisibleFields(columnPreset);
-		visibleColumns = defaultFields;
-		// Show/hide columns to match preset
-		columnMeta.forEach(col => {
-			if (defaultFields.includes(col.field)) {
-				cellTable?.showColumn(col.field);
-			} else {
-				cellTable?.hideColumn(col.field);
-			}
-		});
-		// Clear persisted column visibility for this preset (use preset defaults)
-		if (persistSettings && typeof localStorage !== 'undefined') {
-			try {
-				localStorage.removeItem(getColumnsStorageKey(columnPreset));
-			} catch (e) {
-				console.warn('Failed to clear column visibility:', e);
-			}
-		}
+		columnVis.resetToDefaults();
+		columnVis.applyToTable(cellTable);
 	}
 
 	function toggleSidebar() {
@@ -449,7 +321,8 @@
 		setTimeout(() => cellTable?.redraw(), 320);
 	}
 
-	// Expose table methods
+	// ========== Public API ==========
+	
 	export function getSelectedRows(): CellData[] {
 		return cellTable?.getSelectedRows() ?? [];
 	}
@@ -497,6 +370,7 @@
 					class:btn-secondary={sidebarOpen}
 					onclick={toggleSidebar}
 					title={sidebarOpen ? 'Hide details' : 'Show details'}
+					aria-label={sidebarOpen ? 'Hide details' : 'Show details'}
 				>
 					<i class="bi" class:bi-layout-sidebar-reverse={!sidebarOpen} class:bi-x-lg={sidebarOpen}></i>
 				</button>
@@ -509,7 +383,7 @@
 		<CellTableToolbar
 			{groupBy}
 			{groupOptions}
-			{columnPreset}
+			columnPreset={columnVis.columnPreset}
 			totalCount={cells.length}
 			{filteredCount}
 			{selectedCount}
@@ -525,23 +399,23 @@
 			onexpandall={handleExpandAll}
 			{filtersVisible}
 			ontogglefilters={handleToggleFilters}
-			{columnMeta}
-			{visibleColumns}
+			columnMeta={columnVis.columnMeta}
+			visibleColumns={columnVis.visibleColumns}
 			oncolumnvisibilitychange={handleColumnVisibilityChange}
 			onresetcolumns={handleResetColumns}
-			{scrollSpyEnabled}
+			scrollSpyEnabled={scrollSpy.enabled}
 			showScrollSpyToggle={showScrollSpy}
 			ontogglescrollspy={handleToggleScrollSpy}
 		/>
 	{/if}
 
 	<!-- ScrollSpy Navigation Bar -->
-	{#if scrollSpyEnabled && groupBy !== 'none' && scrollSpyGroups.length > 0}
+	{#if scrollSpy.enabled && groupBy !== 'none' && scrollSpy.groups.length > 0}
 		<div class="scrollspy-bar d-flex align-items-center gap-2 px-3 py-2 bg-body-tertiary border-bottom overflow-auto">
 			<span class="text-muted small me-1">
 				<i class="bi bi-signpost-split"></i> Jump to:
 			</span>
-			{#each scrollSpyGroups as group (group.key)}
+			{#each scrollSpy.groups as group (group.key)}
 				{@const bgColor = groupBy === 'tech' 
 					? (techColors?.[group.key] ?? DEFAULT_TECH_COLORS[group.key] ?? '#6c757d')
 					: groupBy === 'fband'
@@ -571,7 +445,8 @@
 				bind:this={cellTable}
 				{cells}
 				{groupBy}
-				{columnPreset}
+				columnPreset={columnVis.columnPreset}
+				{customColumns}
 				{selectable}
 				{multiSelect}
 				height="100%"
@@ -604,6 +479,7 @@
 							class="btn btn-sm btn-outline-secondary" 
 							onclick={closeSidebar}
 							title="Close"
+							aria-label="Close sidebar"
 						>
 							<i class="bi bi-x-lg"></i>
 						</button>
@@ -681,30 +557,6 @@
 									<dt class="col-5 text-muted">Comment</dt>
 									<dd class="col-7 fst-italic">{clickedCell.comment}</dd>
 								{/if}
-
-								<!-- Dynamic Other Properties -->
-								{#if clickedCell.other && Object.keys(clickedCell.other).length > 0}
-									<dt class="col-12 text-muted mt-2 mb-1 border-top pt-2">Other</dt>
-									
-									{#each Object.entries(clickedCell.other) as [key, value]}
-										<dt class="col-5 text-muted text-capitalize">{key.replace(/_/g, ' ')}</dt>
-										<dd class="col-7">
-											{#if value === null || value === undefined}
-												<span class="text-muted fst-italic">—</span>
-											{:else if typeof value === 'boolean'}
-												<span class="badge" class:bg-success={value} class:bg-secondary={!value}>
-													{value ? 'Yes' : 'No'}
-												</span>
-											{:else if typeof value === 'number'}
-												<code>{value}</code>
-											{:else if typeof value === 'object'}
-												<code class="small text-break">{JSON.stringify(value)}</code>
-											{:else}
-												{String(value)}
-											{/if}
-										</dd>
-									{/each}
-								{/if}
 							</dl>
 						{:else}
 							<div class="text-center text-muted py-5">

package/dist/core/{CellTable → CellTableV2}/CellTablePanel.svelte.d.ts

@@ -1,4 +1,14 @@
+/**
+     * CellTablePanel V2 - Composable-based Cell Table Panel
+     *
+     * Uses composables for reusable logic:
+     * - usePersistence: localStorage read/write
+     * - useColumnVisibility: column preset and visibility management
+     * - useScrollSpy: group navigation
+     */
 import type { Snippet } from 'svelte';
+import type { ColumnDefinition } from 'tabulator-tables';
+import type { ColumnMetadataOptions } from './column-config';
 import type { CellData, CellTableGroupField, ColumnPreset, RowSelectionEvent, RowClickEvent, RowDblClickEvent, TechColorMap, StatusColorMap, GroupOption } from './types';
 interface Props {
     /** Cell data array to display */
@@ -9,6 +19,10 @@ interface Props {
     groupOptions?: GroupOption[];
     /** Initial column preset */
     columnPreset?: ColumnPreset;
+    /** Custom column definitions (overrides columnPreset when provided) */
+    customColumns?: ColumnDefinition[];
+    /** Column metadata filter options */
+    columnMetadataOptions?: ColumnMetadataOptions;
     /** Enable row selection */
     selectable?: boolean;
     /** Enable multi-row selection */
@@ -35,7 +49,7 @@ interface Props {
     showDetailsSidebar?: boolean;
     /** Sidebar width in pixels */
     sidebarWidth?: number;
-    /** Persist settings (groupBy, visibleColumns) to localStorage */
+    /** Persist settings to localStorage */
     persistSettings?: boolean;
     /** Storage key prefix for persisted settings */
     storageKey?: string;
@@ -79,6 +93,6 @@ declare const CellTablePanel: import("svelte").Component<Props, {
     scrollToRow: (id: string) => void;
     redraw: () => void;
     openSidebar: () => void;
-}, "groupBy" | "columnPreset" | "tableRef">;
+}, "groupBy" | "tableRef">;
 type CellTablePanel = ReturnType<typeof CellTablePanel>;
 export default CellTablePanel;

package/dist/core/{CellTable → CellTableV2}/CellTableToolbar.svelte

@@ -107,7 +107,6 @@
 		{ value: 'network', label: 'Network' },
 		{ value: 'planning', label: 'Planning' },
 		{ value: 'compare', label: 'Compare (Atoll/NW)' },
-		{ value: 'kpi', label: 'KPI Trends' }
 	];
 
 	function handleGroupChange(e: Event) {

package/dist/core/{CellTable → CellTableV2}/column-config.d.ts

@@ -61,35 +61,6 @@ export declare function heightFormatter(cell: CellComponent): string;
  * - Gray: one or both values missing
  */
 export declare function createCompareFormatter(atollField: string, nwtField: string): (cell: CellComponent) => string;
-/**
- * Create a history change formatter for showing current vs previous values
- * Highlights changes in yellow/amber, unchanged values in muted style
- *
- * @param currentField - Field name for current value
- * @param prevField - Field name for previous value
- */
-export declare function createHistoryChangeFormatter(currentField: string, prevField: string): (cell: CellComponent) => string;
-/**
- * Format ISO date string to YYYY.MM.DD format for history display
- */
-export declare function historyDateFormatter(cell: CellComponent): string;
-/**
- * Creates a sparkline SVG formatter for KPI time-series data
- * Renders a mini line chart showing trend over time
- *
- * @param options Configuration for the sparkline
- */
-export interface SparklineOptions {
-    width?: number;
-    height?: number;
-    lineColor?: string;
-    fillColor?: string;
-    showDots?: boolean;
-    showLastValue?: boolean;
-    unit?: string;
-    decimals?: number;
-}
-export declare function createSparklineFormatter(options?: SparklineOptions): (cell: CellComponent) => string;
 /**
  * Custom sorter for fband - extracts numeric portion and sorts numerically
  * Examples: LTE700 → 700, GSM900 → 900, LTE1800 → 1800, 5G-3500 → 3500
@@ -129,10 +100,20 @@ export interface ColumnMeta {
     title: string;
     group: string;
 }
+/**
+ * Options for filtering column metadata
+ */
+export interface ColumnMetadataOptions {
+    /** Include only these groups (if specified, only these groups are included) */
+    include?: string[];
+    /** Exclude these groups (applied after include filter) */
+    exclude?: string[];
+}
 /**
  * Get column metadata for the column picker UI
+ * @param options Filter options for including/excluding column groups
  */
-export declare function getColumnMetadata(): ColumnMeta[];
+export declare function getColumnMetadata(options?: ColumnMetadataOptions): ColumnMeta[];
 /**
  * Get default visible columns for a preset
  */