@smartnet360/svelte-components 0.0.135 → 0.0.137

package/dist/core/CellTable/CellTable.svelte

@@ -1,597 +0,0 @@
-<script lang="ts">
-	import { onMount, onDestroy } from 'svelte';
-	import { TabulatorFull as Tabulator } from 'tabulator-tables';
-	// Import Bootstrap 5 theme for proper styling
-	import 'tabulator-tables/dist/css/tabulator_bootstrap5.min.css';
-	import type { Options, RowComponent } from 'tabulator-tables';
-	import type {
-		CellTableProps,
-		CellData,
-		RowSelectionEvent,
-		RowClickEvent,
-		RowDblClickEvent,
-		RowContextMenuEvent,
-		DataChangeEvent
-	} from './types';
-	import {
-		getColumnsForPreset,
-		getGroupHeaderFormatter,
-		DEFAULT_TECH_COLORS,
-		DEFAULT_STATUS_COLORS,
-		cellDataSorter
-	} from './column-config';
-
-	// Type for Tabulator group component (not exported from tabulator-tables)
-	interface TabulatorGroup {
-		getKey(): string | number | boolean;
-		getRows(): RowComponent[];
-		scrollTo(): Promise<void>;
-	}
-
-	interface Props extends CellTableProps {
-		/** Row selection change event */
-		onselectionchange?: (event: RowSelectionEvent) => void;
-		/** Row click event */
-		onrowclick?: (event: RowClickEvent) => void;
-		/** Row double-click event */
-		onrowdblclick?: (event: RowDblClickEvent) => void;
-		/** Row context menu (right-click) event */
-		onrowcontextmenu?: (event: RowContextMenuEvent) => void;
-		/** Data change event (filter, sort, etc.) */
-		ondatachange?: (event: DataChangeEvent) => void;
-	}
-
-	let {
-		cells = [],
-		groupBy = 'none',
-		columnPreset = 'default',
-		columnVisibility,
-		selectable = false,
-		multiSelect = true,
-		height = '100%',
-		virtualDom = true,
-		tabulatorOptions,
-		techColors = DEFAULT_TECH_COLORS,
-		statusColors = DEFAULT_STATUS_COLORS,
-		headerFilters = true,
-		resizableColumns = true,
-		movableColumns = true,
-		persistLayout = true,
-		storageKey = 'cell-table-layout',
-		onselectionchange,
-		onrowclick,
-		onrowdblclick,
-		onrowcontextmenu,
-		ondatachange
-	}: Props = $props();
-
-	let tableContainer: HTMLDivElement;
-	let table: Tabulator | null = null;
-	let isInitialized = $state(false);
-
-	// Reactive column configuration - only changes when preset changes
-	let columns = $derived.by(() => {
-		// Get base columns from preset
-		const baseColumns = getColumnsForPreset(columnPreset, techColors, statusColors, headerFilters);
-		
-		// Add row selection checkbox column if selectable
-		if (selectable) {
-			const selectColumn = {
-				title: '',
-				formatter: 'rowSelection',
-				titleFormatter: multiSelect ? 'rowSelection' : undefined,
-				hozAlign: 'center' as const,
-				headerSort: false,
-				width: 40,
-				frozen: true,
-				cssClass: 'cell-table-select-column',
-			};
-			return [selectColumn, ...baseColumns];
-		}
-		
-		return baseColumns;
-	});
-
-	// Pre-sort data using our custom multi-level sorter
-	let sortedCells = $derived.by(() => {
-		return [...cells].sort(cellDataSorter);
-	});
-
-	// Build Tabulator options
-	function buildOptions(): Options {
-		const baseOptions: Options = {
-			data: sortedCells,
-			columns: columns,
-			layout: 'fitDataFill',
-			height: height,
-			placeholder: 'No cells to display',
-			
-			// Virtual DOM for performance with large datasets
-			renderVertical: virtualDom ? 'virtual' : 'basic',
-			
-			// Interactivity
-			resizableColumns: resizableColumns,
-			movableColumns: movableColumns,
-			
-			// No initialSort - data is pre-sorted by cellDataSorter (tech → fband → sector)
-			
-			// Row selection
-			selectable: selectable ? (multiSelect ? true : 1) : false,
-			selectableRangeMode: 'click',
-			
-			// Persistence - save column widths, order, visibility and group settings
-			persistence: persistLayout ? {
-				columns: ['width', 'visible', 'order'],
-				group: true,
-			} : false,
-			persistenceMode: persistLayout ? 'local' : undefined,
-			persistenceID: persistLayout ? storageKey : undefined,
-			
-			// Grouping
-			...(groupBy !== 'none' ? {
-				groupBy: groupBy,
-				groupStartOpen: true,
-				groupHeader: getGroupHeaderFormatter(groupBy),
-				groupToggleElement: 'header',
-			} : {}),
-			
-			// Pagination (optional, disabled by default for virtual scrolling)
-			// pagination: true,
-			// paginationSize: 50,
-			
-			// Clipboard
-			clipboard: true,
-			clipboardCopyRowRange: 'selected',
-		};
-
-		// Merge with custom options
-		return { ...baseOptions, ...tabulatorOptions };
-	}
-
-	// Initialize table
-	function initTable() {
-		if (!tableContainer) return;
-
-		const options = buildOptions();
-		table = new Tabulator(tableContainer, options);
-
-		// Bind events
-		table.on('rowClick', (e, row) => {
-			if (onrowclick) {
-				onrowclick({
-					row: (row as RowComponent).getData() as CellData,
-					event: e as MouseEvent
-				});
-			}
-		});
-
-		table.on('rowDblClick', (e, row) => {
-			if (onrowdblclick) {
-				onrowdblclick({
-					row: (row as RowComponent).getData() as CellData,
-					event: e as MouseEvent
-				});
-			}
-		});
-
-		table.on('rowContext', (e, row) => {
-			if (onrowcontextmenu) {
-				(e as MouseEvent).preventDefault();
-				onrowcontextmenu({
-					row: (row as RowComponent).getData() as CellData,
-					event: e as MouseEvent
-				});
-			}
-		});
-
-		table.on('rowSelectionChanged', (data, rows) => {
-			if (onselectionchange) {
-				const cellData = data as CellData[];
-				onselectionchange({
-					rows: cellData,
-					ids: cellData.map(d => d.id)
-				});
-			}
-		});
-
-		table.on('dataFiltered', (filters, rows) => {
-			if (ondatachange) {
-				ondatachange({
-					type: 'filter',
-					rowCount: cells.length,
-					filteredCount: (rows as RowComponent[]).length
-				});
-			}
-		});
-
-		table.on('dataSorted', () => {
-			if (ondatachange) {
-				ondatachange({
-					type: 'sort',
-					rowCount: cells.length,
-					filteredCount: table?.getDataCount('active') ?? 0
-				});
-			}
-		});
-
-		// Mark as initialized after table is ready
-		table.on('tableBuilt', () => {
-			isInitialized = true;
-			// Fire initial data change event
-			if (ondatachange) {
-				ondatachange({
-					type: 'load',
-					rowCount: cells.length,
-					filteredCount: cells.length
-				});
-			}
-		});
-	}
-
-	// Track previous values to avoid unnecessary updates
-	let prevCellsRef: unknown[] | null = null;
-	let prevGroupBy: string | null = null;
-	// Initialize with current preset to prevent setColumns on first load (which would override persisted layout)
-	let prevColumnPreset: string | null = columnPreset;
-
-	// Update table data when cells change (reference comparison)
-	$effect(() => {
-		// Track the cells array reference to detect any change
-		const currentRef = sortedCells;
-		
-		// Update if reference changed (new array assignment)
-		if (isInitialized && table && currentRef !== prevCellsRef) {
-			prevCellsRef = currentRef;
-			table.replaceData(sortedCells);
-			ondatachange?.({
-				type: 'load',
-				rowCount: sortedCells.length,
-				filteredCount: sortedCells.length
-			});
-		}
-	});
-
-	// Update grouping when groupBy changes
-	$effect(() => {
-		if (isInitialized && table && groupBy !== prevGroupBy) {
-			prevGroupBy = groupBy;
-			if (groupBy === 'none') {
-				table.setGroupBy(false);
-			} else {
-				table.setGroupBy(groupBy);
-				table.setGroupHeader(getGroupHeaderFormatter(groupBy));
-			}
-		}
-	});
-
-	// Update columns when preset changes
-	$effect(() => {
-		if (isInitialized && table && columnPreset !== prevColumnPreset) {
-			prevColumnPreset = columnPreset;
-			table.setColumns(columns);
-		}
-	});
-
-	onMount(() => {
-		initTable();
-	});
-
-	onDestroy(() => {
-		if (table) {
-			table.destroy();
-			table = null;
-		}
-	});
-
-	// Public API methods
-	export function getTable(): Tabulator | null {
-		return table;
-	}
-
-	export function getSelectedRows(): CellData[] {
-		return table?.getSelectedData() as CellData[] ?? [];
-	}
-
-	export function clearSelection(): void {
-		table?.deselectRow();
-	}
-
-	export function selectRow(id: string): void {
-		const row = table?.getRow(id);
-		if (row) row.select();
-	}
-
-	export function scrollToRow(id: string): void {
-		table?.scrollToRow(id, 'top', true);
-	}
-
-	export function downloadCSV(filename: string = 'cells.csv'): void {
-		table?.download('csv', filename);
-	}
-
-	export function downloadJSON(filename: string = 'cells.json'): void {
-		table?.download('json', filename);
-	}
-
-	export function setFilter(field: string, type: string, value: unknown): void {
-		table?.setFilter(field, type as any, value);
-	}
-
-	export function clearFilters(): void {
-		if (!table) return;
-		// Clear programmatic filters
-		table.clearFilter();
-		// Clear header filter inputs
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		(table as any).clearHeaderFilter();
-	}
-
-	export function redraw(): void {
-		table?.redraw(true);
-	}
-
-	export function collapseAll(): void {
-		if (!table) return;
-		// Use setGroupStartOpen to collapse all groups, then refresh data to apply
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		(table as any).setGroupStartOpen(false);
-		table.setData(table.getData());
-	}
-
-	export function expandAll(): void {
-		if (!table) return;
-		// Use setGroupStartOpen to expand all groups, then refresh data to apply
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		(table as any).setGroupStartOpen(true);
-		table.setData(table.getData());
-	}
-
-	export function toggleHeaderFilters(visible: boolean): void {
-		if (!table) return;
-		const headerFiltersElement = tableContainer.querySelector('.tabulator-header-filter');
-		if (headerFiltersElement) {
-			// Toggle all header filter rows
-			const filterRows = tableContainer.querySelectorAll('.tabulator-col .tabulator-header-filter');
-			filterRows.forEach(el => {
-				(el as HTMLElement).style.display = visible ? '' : 'none';
-			});
-			table.redraw();
-		}
-	}
-
-	export function showColumn(field: string): void {
-		table?.showColumn(field);
-	}
-
-	export function hideColumn(field: string): void {
-		table?.hideColumn(field);
-	}
-
-	export function getVisibleColumns(): string[] {
-		if (!table) return [];
-		const columns = table.getColumns();
-		return columns
-			.filter(col => col.isVisible())
-			.map(col => col.getField())
-			.filter((field): field is string => !!field);
-	}
-
-	/** Get all group keys (when grouping is active) */
-	export function getGroups(): { key: string; count: number }[] {
-		if (!table || groupBy === 'none') return [];
-		try {
-			const groups = table.getGroups() as TabulatorGroup[];
-			return groups.map(g => ({
-				key: String(g.getKey()),
-				count: g.getRows().length
-			}));
-		} catch {
-			return [];
-		}
-	}
-
-	/** Scroll to a specific group by key */
-	export function scrollToGroup(key: string): void {
-		if (!table || groupBy === 'none') return;
-		try {
-			const groups = table.getGroups() as TabulatorGroup[];
-			const group = groups.find(g => String(g.getKey()) === key);
-			if (group) {
-				group.scrollTo();
-			}
-		} catch (e) {
-			console.warn('Failed to scroll to group:', e);
-		}
-	}
-</script>
-
-<div class="cell-table-container">
-	<div bind:this={tableContainer} class="cell-table"></div>
-</div>
-
-<style>
-	.cell-table-container {
-		width: 100%;
-		height: 100%;
-		display: flex;
-		flex-direction: column;
-	}
-
-	.cell-table {
-		flex: 1;
-		min-height: 0;
-	}
-
-	/* Bootstrap-aligned Tabulator theme overrides */
-	:global(.cell-table-container .tabulator) {
-		font-family: var(--bs-body-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
-		font-size: 0.875rem;
-		border: 1px solid var(--bs-border-color, #dee2e6);
-		border-radius: var(--bs-border-radius, 0.375rem);
-		background-color: var(--bs-body-bg, #fff);
-	}
-
-	/* Header styling */
-	:global(.cell-table-container .tabulator-header) {
-		background-color: var(--bs-tertiary-bg, #f8f9fa);
-		border-bottom: 2px solid var(--bs-border-color, #dee2e6);
-	}
-
-	:global(.cell-table-container .tabulator-col) {
-		background-color: var(--bs-tertiary-bg, #f8f9fa);
-		border-right: 1px solid var(--bs-border-color, #dee2e6);
-	}
-
-	:global(.cell-table-container .tabulator-col-title) {
-		font-weight: 600;
-		color: var(--bs-body-color, #212529);
-		padding: 0.5rem 0.75rem;
-	}
-
-	:global(.cell-table-container .tabulator-col-sorter) {
-		color: var(--bs-secondary-color, #6c757d);
-	}
-
-	/* Header filter inputs */
-	:global(.cell-table-container .tabulator-header-filter input) {
-		font-size: 0.75rem;
-		padding: 0.25rem 0.5rem;
-		border: 1px solid var(--bs-border-color, #dee2e6);
-		border-radius: var(--bs-border-radius-sm, 0.25rem);
-		background-color: var(--bs-body-bg, #fff);
-		color: var(--bs-body-color, #212529);
-	}
-
-	:global(.cell-table-container .tabulator-header-filter input:focus) {
-		border-color: var(--bs-primary, #0d6efd);
-		outline: 0;
-		box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
-	}
-
-	/* Row styling */
-	:global(.cell-table-container .tabulator-row) {
-		border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.1));
-	}
-
-	:global(.cell-table-container .tabulator-row:hover) {
-		background-color: var(--bs-tertiary-bg, #f8f9fa);
-	}
-
-	:global(.cell-table-container .tabulator-row.tabulator-row-even) {
-		background-color: var(--bs-body-bg, #fff);
-	}
-
-	:global(.cell-table-container .tabulator-row.tabulator-row-odd) {
-		background-color: rgba(var(--bs-tertiary-bg-rgb, 248, 249, 250), 0.5);
-	}
-
-	:global(.cell-table-container .tabulator-row.tabulator-selected) {
-		background-color: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.1);
-	}
-
-	:global(.cell-table-container .tabulator-row.tabulator-selected:hover) {
-		background-color: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.15);
-	}
-
-	/* Cell styling */
-	:global(.cell-table-container .tabulator-cell) {
-		padding: 0.5rem 0.75rem;
-		border-right: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.05));
-		color: var(--bs-body-color, #212529);
-	}
-
-	:global(.cell-table-container .tabulator-cell.tabulator-frozen) {
-		background-color: var(--bs-tertiary-bg, #f8f9fa);
-		border-right: 2px solid var(--bs-border-color, #dee2e6);
-	}
-
-	/* Group header styling */
-	:global(.cell-table-container .tabulator-row.tabulator-group) {
-		background-color: var(--bs-secondary-bg, #e9ecef);
-		border-bottom: 1px solid var(--bs-border-color, #dee2e6);
-		font-weight: 500;
-		min-height: 36px;
-	}
-
-	:global(.cell-table-container .tabulator-row.tabulator-group:hover) {
-		background-color: var(--bs-secondary-bg, #e9ecef);
-		cursor: pointer;
-	}
-
-	:global(.cell-table-container .tabulator-row.tabulator-group span) {
-		color: var(--bs-body-color, #212529);
-	}
-
-	/* Group toggle arrow */
-	:global(.cell-table-container .tabulator-group-toggle) {
-		margin-right: 0.5rem;
-	}
-
-	/* Scrollbar styling */
-	:global(.cell-table-container .tabulator-tableholder::-webkit-scrollbar) {
-		width: 8px;
-		height: 8px;
-	}
-
-	:global(.cell-table-container .tabulator-tableholder::-webkit-scrollbar-track) {
-		background: var(--bs-tertiary-bg, #f8f9fa);
-	}
-
-	:global(.cell-table-container .tabulator-tableholder::-webkit-scrollbar-thumb) {
-		background: var(--bs-secondary-color, #6c757d);
-		border-radius: 4px;
-	}
-
-	:global(.cell-table-container .tabulator-tableholder::-webkit-scrollbar-thumb:hover) {
-		background: var(--bs-body-color, #212529);
-	}
-
-	/* Placeholder */
-	:global(.cell-table-container .tabulator-placeholder) {
-		color: var(--bs-secondary-color, #6c757d);
-		font-style: italic;
-	}
-
-	/* Resize handle */
-	:global(.cell-table-container .tabulator-col-resize-handle) {
-		width: 6px;
-		right: 0;
-	}
-
-	:global(.cell-table-container .tabulator-col-resize-handle:hover) {
-		background-color: var(--bs-primary, #0d6efd);
-	}
-
-	/* Footer/pagination (if enabled) */
-	:global(.cell-table-container .tabulator-footer) {
-		background-color: var(--bs-tertiary-bg, #f8f9fa);
-		border-top: 1px solid var(--bs-border-color, #dee2e6);
-		padding: 0.5rem;
-	}
-
-	:global(.cell-table-container .tabulator-page) {
-		padding: 0.25rem 0.5rem;
-		margin: 0 0.125rem;
-		border: 1px solid var(--bs-border-color, #dee2e6);
-		border-radius: var(--bs-border-radius-sm, 0.25rem);
-		background-color: var(--bs-body-bg, #fff);
-		color: var(--bs-body-color, #212529);
-	}
-
-	:global(.cell-table-container .tabulator-page:hover) {
-		background-color: var(--bs-tertiary-bg, #f8f9fa);
-	}
-
-	:global(.cell-table-container .tabulator-page.active) {
-		background-color: var(--bs-primary, #0d6efd);
-		border-color: var(--bs-primary, #0d6efd);
-		color: white;
-	}
-
-	/* Badge styling in cells */
-	:global(.cell-table-container .badge) {
-		font-weight: 500;
-		padding: 0.25em 0.5em;
-		border-radius: var(--bs-border-radius-sm, 0.25rem);
-	}
-</style>

package/dist/core/CellTable/CellTable.svelte.d.ts

@@ -1,40 +0,0 @@
-import { TabulatorFull as Tabulator } from 'tabulator-tables';
-import 'tabulator-tables/dist/css/tabulator_bootstrap5.min.css';
-import type { CellTableProps, CellData, RowSelectionEvent, RowClickEvent, RowDblClickEvent, RowContextMenuEvent, DataChangeEvent } from './types';
-interface Props extends CellTableProps {
-    /** Row selection change event */
-    onselectionchange?: (event: RowSelectionEvent) => void;
-    /** Row click event */
-    onrowclick?: (event: RowClickEvent) => void;
-    /** Row double-click event */
-    onrowdblclick?: (event: RowDblClickEvent) => void;
-    /** Row context menu (right-click) event */
-    onrowcontextmenu?: (event: RowContextMenuEvent) => void;
-    /** Data change event (filter, sort, etc.) */
-    ondatachange?: (event: DataChangeEvent) => void;
-}
-declare const CellTable: import("svelte").Component<Props, {
-    getTable: () => Tabulator | null;
-    getSelectedRows: () => CellData[];
-    clearSelection: () => void;
-    selectRow: (id: string) => void;
-    scrollToRow: (id: string) => void;
-    downloadCSV: (filename?: string) => void;
-    downloadJSON: (filename?: string) => void;
-    setFilter: (field: string, type: string, value: unknown) => void;
-    clearFilters: () => void;
-    redraw: () => void;
-    collapseAll: () => void;
-    expandAll: () => void;
-    toggleHeaderFilters: (visible: boolean) => void;
-    showColumn: (field: string) => void;
-    hideColumn: (field: string) => void;
-    getVisibleColumns: () => string[];
-    getGroups: () => {
-        key: string;
-        count: number;
-    }[];
-    scrollToGroup: (key: string) => void;
-}, "">;
-type CellTable = ReturnType<typeof CellTable>;
-export default CellTable;