@smartnet360/svelte-components 0.0.103 → 0.0.105

package/dist/core/CellTable/CellTable.svelte

@@ -0,0 +1,456 @@
+<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,
+		DataChangeEvent
+	} from './types';
+	import {
+		getColumnsForPreset,
+		getGroupHeaderFormatter,
+		DEFAULT_TECH_COLORS,
+		DEFAULT_STATUS_COLORS
+	} from './column-config';
+
+	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;
+		/** 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 = false,
+		storageKey = 'cell-table-layout',
+		onselectionchange,
+		onrowclick,
+		onrowdblclick,
+		ondatachange
+	}: Props = $props();
+
+	let tableContainer: HTMLDivElement;
+	let table: Tabulator | null = null;
+	let isInitialized = $state(false);
+
+	// Reactive column configuration
+	let columns = $derived(getColumnsForPreset(columnPreset, techColors, statusColors, headerFilters));
+
+	// Build Tabulator options
+	function buildOptions(): Options {
+		const baseOptions: Options = {
+			data: cells,
+			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,
+			
+			// Sorting
+			initialSort: [{ column: 'siteId', dir: 'asc' }],
+			
+			// Row selection
+			selectable: selectable ? (multiSelect ? true : 1) : false,
+			selectableRangeMode: 'click',
+			
+			// Persistence
+			persistence: persistLayout ? {
+				sort: true,
+				filter: true,
+				columns: ['width', 'visible'],
+			} : false,
+			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('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;
+		});
+	}
+
+	// Update table data when cells change
+	$effect(() => {
+		if (isInitialized && table && cells) {
+			table.replaceData(cells);
+			if (ondatachange) {
+				ondatachange({
+					type: 'load',
+					rowCount: cells.length,
+					filteredCount: cells.length
+				});
+			}
+		}
+	});
+
+	// Update grouping when groupBy changes
+	$effect(() => {
+		if (isInitialized && table) {
+			if (groupBy === 'none') {
+				table.setGroupBy(false);
+			} else {
+				table.setGroupBy(groupBy);
+				table.setGroupHeader(getGroupHeaderFormatter(groupBy));
+			}
+			// Force redraw after grouping change
+			table.redraw(true);
+		}
+	});
+
+	// Update columns when preset changes
+	$effect(() => {
+		if (isInitialized && table && columns) {
+			table.setColumns(columns);
+			table.redraw(true);
+		}
+	});
+
+	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 {
+		table?.clearFilter();
+	}
+
+	export function redraw(): void {
+		table?.redraw(true);
+	}
+</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

@@ -0,0 +1,27 @@
+import { TabulatorFull as Tabulator } from 'tabulator-tables';
+import 'tabulator-tables/dist/css/tabulator_bootstrap5.min.css';
+import type { CellTableProps, CellData, RowSelectionEvent, RowClickEvent, RowDblClickEvent, 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;
+    /** 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;
+}, "">;
+type CellTable = ReturnType<typeof CellTable>;
+export default CellTable;

package/dist/core/CellTable/CellTableDemo.svelte

@@ -0,0 +1,145 @@
+<script lang="ts">
+	import CellTablePanel from './CellTablePanel.svelte';
+	import type { CellTableGroupField, ColumnPreset, RowClickEvent, RowSelectionEvent, CellData } from './types';
+	import { demoCells } from './demo-data';
+
+	let groupBy: CellTableGroupField = $state('none');
+	let columnPreset: ColumnPreset = $state('default');
+	let lastClickedCell: CellData | null = $state(null);
+	let selectedIds: string[] = $state([]);
+
+	function handleRowClick(event: RowClickEvent) {
+		lastClickedCell = event.row;
+		console.log('Row clicked:', event.row);
+	}
+
+	function handleSelectionChange(event: RowSelectionEvent) {
+		selectedIds = event.ids;
+		console.log('Selection changed:', event.ids);
+	}
+</script>
+
+<div class="cell-table-demo container-fluid py-3">
+	<div class="row mb-3">
+		<div class="col">
+			<h2 class="d-flex align-items-center gap-2">
+				<i class="bi bi-table text-primary"></i>
+				CellTable Component Demo
+			</h2>
+			<p class="text-muted">
+				A Bootstrap-themed Tabulator wrapper for displaying cell data with grouping, filtering, and export capabilities.
+			</p>
+		</div>
+	</div>
+
+	<div class="row" style="height: calc(100vh - 200px);">
+		<div class="col-12 col-lg-9 h-100">
+			<CellTablePanel
+				cells={demoCells}
+				bind:groupBy
+				bind:columnPreset
+				selectable={true}
+				multiSelect={true}
+				title="Cell Data Table"
+				showToolbar={true}
+				showExport={true}
+				headerFilters={true}
+				onrowclick={handleRowClick}
+				onselectionchange={handleSelectionChange}
+			>
+				{#snippet footer({ selectedRows, selectedCount })}
+					<div class="d-flex align-items-center justify-content-between">
+						<span class="text-muted small">
+							{#if selectedCount > 0}
+								{selectedCount} cell(s) selected
+							{:else}
+								Click rows to select
+							{/if}
+						</span>
+						<div class="btn-group">
+							<button
+								type="button"
+								class="btn btn-sm btn-outline-primary"
+								disabled={selectedCount === 0}
+								onclick={() => console.log('Process:', selectedRows.map(r => r.id))}
+							>
+								<i class="bi bi-gear"></i> Process Selected
+							</button>
+							<button
+								type="button"
+								class="btn btn-sm btn-outline-secondary"
+								disabled={selectedCount === 0}
+								onclick={() => console.log('View:', selectedRows.map(r => r.id))}
+							>
+								<i class="bi bi-eye"></i> View Details
+							</button>
+						</div>
+					</div>
+				{/snippet}
+			</CellTablePanel>
+		</div>
+
+		<div class="col-12 col-lg-3 h-100 overflow-auto">
+			<div class="card h-100">
+				<div class="card-header">
+					<h6 class="mb-0">
+						<i class="bi bi-info-circle"></i> Cell Details
+					</h6>
+				</div>
+				<div class="card-body">
+					{#if lastClickedCell}
+						<dl class="row mb-0 small">
+							<dt class="col-5">ID</dt>
+							<dd class="col-7"><code>{lastClickedCell.id}</code></dd>
+
+							<dt class="col-5">Cell Name</dt>
+							<dd class="col-7">{lastClickedCell.cellName}</dd>
+
+							<dt class="col-5">Site</dt>
+							<dd class="col-7">{lastClickedCell.siteId}</dd>
+
+							<dt class="col-5">Technology</dt>
+							<dd class="col-7">
+								<span class="badge bg-secondary">{lastClickedCell.tech}</span>
+							</dd>
+
+							<dt class="col-5">Band</dt>
+							<dd class="col-7">
+								<span class="badge bg-info">{lastClickedCell.fband}</span>
+							</dd>
+
+							<dt class="col-5">Status</dt>
+							<dd class="col-7">
+								<span class="badge bg-success">{lastClickedCell.status.replace(/_/g, ' ')}</span>
+							</dd>
+
+							<dt class="col-5">Azimuth</dt>
+							<dd class="col-7">{lastClickedCell.azimuth}°</dd>
+
+							<dt class="col-5">Height</dt>
+							<dd class="col-7">{lastClickedCell.height}m</dd>
+
+							<dt class="col-5">Antenna</dt>
+							<dd class="col-7 text-truncate" title={lastClickedCell.antenna}>
+								{lastClickedCell.antenna}
+							</dd>
+
+							<dt class="col-5">Planner</dt>
+							<dd class="col-7">{lastClickedCell.planner}</dd>
+
+							{#if lastClickedCell.comment}
+								<dt class="col-5">Comment</dt>
+								<dd class="col-7 text-muted">{lastClickedCell.comment}</dd>
+							{/if}
+						</dl>
+					{:else}
+						<p class="text-muted text-center">
+							<i class="bi bi-hand-index"></i><br>
+							Click a row to see details
+						</p>
+					{/if}
+				</div>
+			</div>
+		</div>
+	</div>
+</div>

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

@@ -0,0 +1,3 @@
+declare const CellTableDemo: import("svelte").Component<Record<string, never>, {}, "">;
+type CellTableDemo = ReturnType<typeof CellTableDemo>;
+export default CellTableDemo;