@smartnet360/svelte-components 0.0.102 → 0.0.104

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/CellTablePanel.svelte

@@ -0,0 +1,211 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import CellTable from './CellTable.svelte';
+	import CellTableToolbar from './CellTableToolbar.svelte';
+	import type {
+		CellData,
+		CellTableGroupField,
+		ColumnPreset,
+		RowSelectionEvent,
+		RowClickEvent,
+		RowDblClickEvent,
+		DataChangeEvent,
+		TechColorMap,
+		StatusColorMap
+	} from './types';
+
+	interface Props {
+		/** Cell data array to display */
+		cells: CellData[];
+		/** Initial grouping field */
+		groupBy?: CellTableGroupField;
+		/** Initial column preset */
+		columnPreset?: ColumnPreset;
+		/** Enable row selection */
+		selectable?: boolean;
+		/** Enable multi-row selection */
+		multiSelect?: boolean;
+		/** Panel height (CSS value) */
+		height?: string;
+		/** Show toolbar */
+		showToolbar?: boolean;
+		/** Show export buttons */
+		showExport?: boolean;
+		/** Technology color mapping */
+		techColors?: TechColorMap;
+		/** Status color mapping */
+		statusColors?: StatusColorMap;
+		/** Enable header filters */
+		headerFilters?: boolean;
+		/** Panel title */
+		title?: string;
+		/** Row selection change event */
+		onselectionchange?: (event: RowSelectionEvent) => void;
+		/** Row click event */
+		onrowclick?: (event: RowClickEvent) => void;
+		/** Row double-click event */
+		onrowdblclick?: (event: RowDblClickEvent) => void;
+		/** Custom header actions slot */
+		headerActions?: Snippet;
+		/** Custom footer slot */
+		footer?: Snippet<[{ selectedRows: CellData[]; selectedCount: number }]>;
+	}
+
+	let {
+		cells = [],
+		groupBy = $bindable('none'),
+		columnPreset = $bindable('default'),
+		selectable = true,
+		multiSelect = true,
+		height = '100%',
+		showToolbar = true,
+		showExport = true,
+		techColors,
+		statusColors,
+		headerFilters = true,
+		title = 'Cell Data',
+		onselectionchange,
+		onrowclick,
+		onrowdblclick,
+		headerActions,
+		footer
+	}: Props = $props();
+
+	let cellTable: CellTable;
+	let selectedCount = $state(0);
+	let selectedRows = $state<CellData[]>([]);
+	let filteredCount = $state(cells.length);
+
+	function handleSelectionChange(event: RowSelectionEvent) {
+		selectedCount = event.rows.length;
+		selectedRows = event.rows;
+		onselectionchange?.(event);
+	}
+
+	function handleDataChange(event: DataChangeEvent) {
+		filteredCount = event.filteredCount;
+	}
+
+	function handleGroupChange(group: CellTableGroupField) {
+		groupBy = group;
+	}
+
+	function handlePresetChange(preset: ColumnPreset) {
+		columnPreset = preset;
+	}
+
+	function handleExportCSV() {
+		cellTable?.downloadCSV(`cells-${new Date().toISOString().slice(0, 10)}.csv`);
+	}
+
+	function handleExportJSON() {
+		cellTable?.downloadJSON(`cells-${new Date().toISOString().slice(0, 10)}.json`);
+	}
+
+	function handleClearFilters() {
+		cellTable?.clearFilters();
+	}
+
+	// Expose table methods
+	export function getSelectedRows(): CellData[] {
+		return cellTable?.getSelectedRows() ?? [];
+	}
+
+	export function clearSelection(): void {
+		cellTable?.clearSelection();
+	}
+
+	export function scrollToRow(id: string): void {
+		cellTable?.scrollToRow(id);
+	}
+
+	export function redraw(): void {
+		cellTable?.redraw();
+	}
+</script>
+
+<div class="cell-table-panel d-flex flex-column" style:height>
+	<!-- Header -->
+	<div class="panel-header d-flex align-items-center justify-content-between px-3 py-2 bg-body-secondary border-bottom">
+		<h6 class="mb-0 d-flex align-items-center gap-2">
+			<i class="bi bi-table text-primary"></i>
+			{title}
+		</h6>
+		{#if headerActions}
+			<div class="header-actions">
+				{@render headerActions()}
+			</div>
+		{/if}
+	</div>
+
+	<!-- Toolbar -->
+	{#if showToolbar}
+		<CellTableToolbar
+			{groupBy}
+			{columnPreset}
+			totalCount={cells.length}
+			{filteredCount}
+			{selectedCount}
+			{showExport}
+			ongroupchange={handleGroupChange}
+			onpresetchange={handlePresetChange}
+			onexportcsv={handleExportCSV}
+			onexportjson={handleExportJSON}
+			onclearfilters={handleClearFilters}
+		/>
+	{/if}
+
+	<!-- Table -->
+	<div class="table-wrapper flex-grow-1">
+		<CellTable
+			bind:this={cellTable}
+			{cells}
+			{groupBy}
+			{columnPreset}
+			{selectable}
+			{multiSelect}
+			height="100%"
+			{techColors}
+			{statusColors}
+			{headerFilters}
+			onselectionchange={handleSelectionChange}
+			ondatachange={handleDataChange}
+			{onrowclick}
+			{onrowdblclick}
+		/>
+	</div>
+
+	<!-- Footer -->
+	{#if footer}
+		<div class="panel-footer border-top p-2 bg-body-tertiary">
+			{@render footer({ selectedRows, selectedCount })}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.cell-table-panel {
+		background-color: var(--bs-body-bg, #fff);
+		border: 1px solid var(--bs-border-color, #dee2e6);
+		border-radius: var(--bs-border-radius, 0.375rem);
+		overflow: hidden;
+	}
+
+	.panel-header {
+		min-height: 48px;
+	}
+
+	.panel-header h6 {
+		font-weight: 600;
+		color: var(--bs-body-color, #212529);
+	}
+
+	.table-wrapper {
+		min-height: 0;
+		overflow: hidden;
+	}
+
+	.panel-footer {
+		min-height: 48px;
+	}
+</style>