@smartnet360/svelte-components 0.0.133 → 0.0.135

package/dist/core/CellTableV2/composables/useColumnVisibility.svelte.d.ts

@@ -0,0 +1,45 @@
+/**
+ * useColumnVisibility - Column visibility management composable
+ *
+ * Manages column preset selection and per-preset column visibility customization.
+ * Uses Svelte 5 runes for reactive state.
+ */
+import type { ColumnPreset } from '../types';
+import type { ColumnMeta } from '../column-config';
+export interface UseColumnVisibilityOptions {
+    /** Base storage key for persistence */
+    storageKey: string;
+    /** Column metadata for the column picker */
+    columnMeta: ColumnMeta[];
+    /** Initial column preset */
+    initialPreset?: ColumnPreset;
+    /** Whether to persist settings to localStorage */
+    persistSettings?: boolean;
+}
+export interface UseColumnVisibilityReturn {
+    /** Current column preset (reactive) */
+    readonly columnPreset: ColumnPreset;
+    /** Currently visible column fields (reactive) */
+    readonly visibleColumns: string[];
+    /** Column metadata */
+    readonly columnMeta: ColumnMeta[];
+    /** Load saved columns for a preset (or default if none saved) */
+    loadColumnsForPreset: (preset: ColumnPreset) => string[];
+    /** Set the column preset and load its columns */
+    setPreset: (preset: ColumnPreset) => void;
+    /** Toggle a single column's visibility */
+    toggleColumn: (field: string, visible: boolean) => void;
+    /** Reset current preset to its default columns */
+    resetToDefaults: () => void;
+    /** Apply column visibility to a CellTable instance */
+    applyToTable: (table: {
+        showColumn: (f: string) => void;
+        hideColumn: (f: string) => void;
+    } | undefined) => void;
+    /** Save current visibility state */
+    saveVisibility: () => void;
+}
+/**
+ * Create column visibility management for a cell table
+ */
+export declare function useColumnVisibility(options: UseColumnVisibilityOptions): UseColumnVisibilityReturn;

package/dist/core/CellTableV2/composables/useColumnVisibility.svelte.js

@@ -0,0 +1,98 @@
+/**
+ * useColumnVisibility - Column visibility management composable
+ *
+ * Manages column preset selection and per-preset column visibility customization.
+ * Uses Svelte 5 runes for reactive state.
+ */
+import { getPresetVisibleFields } from '../column-config';
+import { usePersistence } from './usePersistence.svelte';
+/**
+ * Create column visibility management for a cell table
+ */
+export function useColumnVisibility(options) {
+    const { storageKey, columnMeta, initialPreset = 'default', persistSettings = true } = options;
+    // Persistence utilities
+    const persistence = usePersistence({ storageKey, enabled: persistSettings });
+    // Storage key for per-preset column visibility
+    function getColumnsKey(preset) {
+        return `visibleColumns-${preset}`;
+    }
+    /**
+     * Load saved columns for a preset (or default if none saved)
+     */
+    function loadColumnsForPreset(preset) {
+        const saved = persistence.load(getColumnsKey(preset), null);
+        if (saved && Array.isArray(saved)) {
+            return saved;
+        }
+        return getPresetVisibleFields(preset);
+    }
+    // Load initial preset from storage
+    const savedPreset = persistence.loadString('columnPreset', initialPreset);
+    // Reactive state
+    let _columnPreset = $state(savedPreset);
+    let _visibleColumns = $state(loadColumnsForPreset(savedPreset));
+    /**
+     * Save current column visibility for current preset
+     */
+    function saveVisibility() {
+        persistence.save(getColumnsKey(_columnPreset), _visibleColumns);
+    }
+    /**
+     * Set the column preset and load its saved columns
+     */
+    function setPreset(preset) {
+        _columnPreset = preset;
+        _visibleColumns = loadColumnsForPreset(preset);
+        persistence.saveString('columnPreset', preset);
+    }
+    /**
+     * Toggle a single column's visibility
+     */
+    function toggleColumn(field, visible) {
+        if (visible) {
+            if (!_visibleColumns.includes(field)) {
+                _visibleColumns = [..._visibleColumns, field];
+            }
+        }
+        else {
+            _visibleColumns = _visibleColumns.filter(f => f !== field);
+        }
+        saveVisibility();
+    }
+    /**
+     * Reset current preset to its default columns
+     */
+    function resetToDefaults() {
+        _visibleColumns = getPresetVisibleFields(_columnPreset);
+        // Remove saved customization
+        persistence.remove(getColumnsKey(_columnPreset));
+    }
+    /**
+     * Apply column visibility to a CellTable instance
+     */
+    function applyToTable(table) {
+        if (!table)
+            return;
+        columnMeta.forEach(col => {
+            if (_visibleColumns.includes(col.field)) {
+                table.showColumn(col.field);
+            }
+            else {
+                table.hideColumn(col.field);
+            }
+        });
+    }
+    // Return with getters for reactivity
+    return {
+        get columnPreset() { return _columnPreset; },
+        get visibleColumns() { return _visibleColumns; },
+        columnMeta,
+        loadColumnsForPreset,
+        setPreset,
+        toggleColumn,
+        resetToDefaults,
+        applyToTable,
+        saveVisibility
+    };
+}

package/dist/core/CellTableV2/composables/usePersistence.svelte.d.ts

@@ -0,0 +1,28 @@
+/**
+ * usePersistence - localStorage persistence utility
+ *
+ * Provides namespaced read/write/remove functions for persisting UI state.
+ * Does not use reactive state - just utility functions.
+ */
+export interface UsePersistenceOptions {
+    /** Base storage key prefix for namespacing */
+    storageKey: string;
+    /** Whether persistence is enabled */
+    enabled?: boolean;
+}
+export interface UsePersistenceReturn {
+    /** Load a value from localStorage */
+    load: <T>(key: string, defaultValue: T) => T;
+    /** Save a value to localStorage */
+    save: <T>(key: string, value: T) => void;
+    /** Remove a value from localStorage */
+    remove: (key: string) => void;
+    /** Load a string value (no JSON parsing) */
+    loadString: (key: string, defaultValue: string) => string;
+    /** Save a string value (no JSON stringifying) */
+    saveString: (key: string, value: string) => void;
+}
+/**
+ * Create persistence utilities for a given storage namespace
+ */
+export declare function usePersistence(options: UsePersistenceOptions): UsePersistenceReturn;

package/dist/core/CellTableV2/composables/usePersistence.svelte.js

@@ -0,0 +1,101 @@
+/**
+ * usePersistence - localStorage persistence utility
+ *
+ * Provides namespaced read/write/remove functions for persisting UI state.
+ * Does not use reactive state - just utility functions.
+ */
+/**
+ * Create persistence utilities for a given storage namespace
+ */
+export function usePersistence(options) {
+    const { storageKey, enabled = true } = options;
+    /**
+     * Get full storage key with namespace
+     */
+    function getKey(key) {
+        return `${storageKey}-${key}`;
+    }
+    /**
+     * Load a JSON value from localStorage
+     */
+    function load(key, defaultValue) {
+        if (!enabled || typeof localStorage === 'undefined') {
+            return defaultValue;
+        }
+        try {
+            const saved = localStorage.getItem(getKey(key));
+            if (saved !== null) {
+                return JSON.parse(saved);
+            }
+        }
+        catch (e) {
+            console.warn(`Failed to load ${key}:`, e);
+        }
+        return defaultValue;
+    }
+    /**
+     * Save a JSON value to localStorage
+     */
+    function save(key, value) {
+        if (!enabled || typeof localStorage === 'undefined') {
+            return;
+        }
+        try {
+            localStorage.setItem(getKey(key), JSON.stringify(value));
+        }
+        catch (e) {
+            console.warn(`Failed to save ${key}:`, e);
+        }
+    }
+    /**
+     * Remove a value from localStorage
+     */
+    function remove(key) {
+        if (!enabled || typeof localStorage === 'undefined') {
+            return;
+        }
+        try {
+            localStorage.removeItem(getKey(key));
+        }
+        catch (e) {
+            console.warn(`Failed to remove ${key}:`, e);
+        }
+    }
+    /**
+     * Load a string value (no JSON parsing)
+     */
+    function loadString(key, defaultValue) {
+        if (!enabled || typeof localStorage === 'undefined') {
+            return defaultValue;
+        }
+        try {
+            const saved = localStorage.getItem(getKey(key));
+            return saved ?? defaultValue;
+        }
+        catch (e) {
+            console.warn(`Failed to load string ${key}:`, e);
+            return defaultValue;
+        }
+    }
+    /**
+     * Save a string value (no JSON stringifying)
+     */
+    function saveString(key, value) {
+        if (!enabled || typeof localStorage === 'undefined') {
+            return;
+        }
+        try {
+            localStorage.setItem(getKey(key), value);
+        }
+        catch (e) {
+            console.warn(`Failed to save string ${key}:`, e);
+        }
+    }
+    return {
+        load,
+        save,
+        remove,
+        loadString,
+        saveString
+    };
+}

package/dist/core/CellTableV2/composables/useScrollSpy.svelte.d.ts

@@ -0,0 +1,44 @@
+/**
+ * useScrollSpy - ScrollSpy navigation composable
+ *
+ * Manages group-based scroll navigation for grouped tables.
+ * Uses Svelte 5 runes for reactive state.
+ */
+export interface ScrollSpyGroup {
+    key: string;
+    count: number;
+}
+export interface CellTableRef {
+    getGroups: () => ScrollSpyGroup[];
+    scrollToGroup: (key: string) => void;
+}
+export interface UseScrollSpyOptions {
+    /** Base storage key for persistence */
+    storageKey: string;
+    /** Initial enabled state */
+    initialEnabled?: boolean;
+    /** Whether to persist settings */
+    persistSettings?: boolean;
+}
+export interface UseScrollSpyReturn {
+    /** ScrollSpy groups (reactive) */
+    readonly groups: ScrollSpyGroup[];
+    /** Whether scrollspy is enabled (reactive) */
+    readonly enabled: boolean;
+    /** Toggle scrollspy on/off */
+    toggle: () => void;
+    /** Enable scrollspy */
+    enable: () => void;
+    /** Disable scrollspy */
+    disable: () => void;
+    /** Update groups from table data */
+    updateGroups: (table: CellTableRef | undefined) => void;
+    /** Scroll to a specific group */
+    scrollToGroup: (table: CellTableRef | undefined, key: string) => void;
+    /** Clear groups */
+    clearGroups: () => void;
+}
+/**
+ * Create scrollspy navigation for a grouped table
+ */
+export declare function useScrollSpy(options: UseScrollSpyOptions): UseScrollSpyReturn;

package/dist/core/CellTableV2/composables/useScrollSpy.svelte.js

@@ -0,0 +1,91 @@
+/**
+ * useScrollSpy - ScrollSpy navigation composable
+ *
+ * Manages group-based scroll navigation for grouped tables.
+ * Uses Svelte 5 runes for reactive state.
+ */
+import { usePersistence } from './usePersistence.svelte';
+/**
+ * Create scrollspy navigation for a grouped table
+ */
+export function useScrollSpy(options) {
+    const { storageKey, initialEnabled = false, persistSettings = true } = options;
+    // Persistence utilities
+    const persistence = usePersistence({ storageKey, enabled: persistSettings });
+    // Load initial state
+    const savedEnabled = persistence.loadString('scrollSpyEnabled', String(initialEnabled)) === 'true';
+    // Reactive state
+    let _groups = $state([]);
+    let _enabled = $state(savedEnabled);
+    /**
+     * Toggle scrollspy on/off
+     */
+    function toggle() {
+        _enabled = !_enabled;
+        persistence.saveString('scrollSpyEnabled', String(_enabled));
+        if (!_enabled) {
+            _groups = [];
+        }
+    }
+    /**
+     * Enable scrollspy
+     */
+    function enable() {
+        _enabled = true;
+        persistence.saveString('scrollSpyEnabled', 'true');
+    }
+    /**
+     * Disable scrollspy
+     */
+    function disable() {
+        _enabled = false;
+        persistence.saveString('scrollSpyEnabled', 'false');
+        _groups = [];
+    }
+    /**
+     * Update groups from table data
+     */
+    function updateGroups(table) {
+        if (!table || !_enabled) {
+            _groups = [];
+            return;
+        }
+        try {
+            _groups = table.getGroups();
+        }
+        catch (e) {
+            console.warn('Failed to get groups:', e);
+            _groups = [];
+        }
+    }
+    /**
+     * Scroll to a specific group
+     */
+    function scrollToGroup(table, key) {
+        if (!table)
+            return;
+        try {
+            table.scrollToGroup(key);
+        }
+        catch (e) {
+            console.warn('Failed to scroll to group:', e);
+        }
+    }
+    /**
+     * Clear groups
+     */
+    function clearGroups() {
+        _groups = [];
+    }
+    // Return with getters for reactivity
+    return {
+        get groups() { return _groups; },
+        get enabled() { return _enabled; },
+        toggle,
+        enable,
+        disable,
+        updateGroups,
+        scrollToGroup,
+        clearGroups
+    };
+}

package/dist/core/CellTableV2/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * CellTableV2 - Main Exports
+ *
+ * Composable-based cell table components with reusable logic hooks.
+ */
+export { default as CellTable } from './CellTable.svelte';
+export { default as CellTablePanel } from './CellTablePanel.svelte';
+export { default as CellTableToolbar } from './CellTableToolbar.svelte';
+export { default as ColumnPicker } from './ColumnPicker.svelte';
+export * from './composables';
+export { DEFAULT_TECH_COLORS, DEFAULT_STATUS_COLORS, FBAND_COLORS, COLUMN_GROUPS, getColumnMetadata, getColumnsForPreset, getPresetVisibleFields, getAllColumns, } from './column-config';
+export type { CellData, CellTableColumn, CellTableGroupField, CellTableProps, ColumnPreset, GroupOption, RowSelectionEvent, RowClickEvent, RowDblClickEvent, RowContextMenuEvent, DataChangeEvent, TechColorMap, StatusColorMap, } from './types';

package/dist/core/CellTableV2/index.js

@@ -0,0 +1,14 @@
+/**
+ * CellTableV2 - Main Exports
+ *
+ * Composable-based cell table components with reusable logic hooks.
+ */
+// Core components
+export { default as CellTable } from './CellTable.svelte';
+export { default as CellTablePanel } from './CellTablePanel.svelte';
+export { default as CellTableToolbar } from './CellTableToolbar.svelte';
+export { default as ColumnPicker } from './ColumnPicker.svelte';
+// Composables
+export * from './composables';
+// Column configuration
+export { DEFAULT_TECH_COLORS, DEFAULT_STATUS_COLORS, FBAND_COLORS, COLUMN_GROUPS, getColumnMetadata, getColumnsForPreset, getPresetVisibleFields, getAllColumns, } from './column-config';

package/dist/core/CellTableV2/types.d.ts

@@ -0,0 +1,172 @@
+/**
+ * CellTable Component - Type Definitions
+ *
+ * Types for the Tabulator-based cell data table component
+ */
+import type { ColumnDefinition, Options } from 'tabulator-tables';
+import type { Cell, CellGroupingField } from '../../shared/demo';
+/**
+ * Cell data model - re-exported from shared for convenience
+ */
+export type CellData = Cell;
+/**
+ * Available grouping fields for the table - extends shared type with 'none' option
+ */
+export type CellTableGroupField = CellGroupingField | 'none';
+/**
+ * Column preset configurations
+ * Note: 'history' and 'kpi' presets moved to separate modules (CellHistory, CellKPI)
+ */
+export type ColumnPreset = 'default' | 'compact' | 'full' | 'physical' | 'network' | 'planning' | 'compare';
+/**
+ * Column visibility configuration
+ */
+export interface ColumnVisibility {
+    [key: string]: boolean;
+}
+/**
+ * Grouping option for toolbar dropdown
+ */
+export interface GroupOption {
+    /** Field name to group by (or 'none') */
+    value: string;
+    /** Display label in dropdown */
+    label: string;
+}
+/**
+ * Technology color mapping
+ */
+export interface TechColorMap {
+    [tech: string]: string;
+}
+/**
+ * Status color mapping
+ */
+export interface StatusColorMap {
+    [status: string]: string;
+}
+/**
+ * CellTable component props
+ */
+export interface CellTableProps {
+    /** Cell data array to display */
+    cells: CellData[];
+    /** Field to group rows by */
+    groupBy?: CellTableGroupField;
+    /** Initial column preset */
+    columnPreset?: ColumnPreset;
+    /** Custom column visibility overrides */
+    columnVisibility?: ColumnVisibility;
+    /** Enable row selection */
+    selectable?: boolean;
+    /** Enable multi-row selection */
+    multiSelect?: boolean;
+    /** Table height (CSS value) */
+    height?: string;
+    /** Enable virtual DOM for large datasets */
+    virtualDom?: boolean;
+    /** Custom Tabulator options override */
+    tabulatorOptions?: Partial<Options>;
+    /** Technology color mapping */
+    techColors?: TechColorMap;
+    /** Status color mapping */
+    statusColors?: StatusColorMap;
+    /** Enable header filters */
+    headerFilters?: boolean;
+    /** Enable column resizing */
+    resizableColumns?: boolean;
+    /** Enable movable columns */
+    movableColumns?: boolean;
+    /** Persist column layout to localStorage */
+    persistLayout?: boolean;
+    /** Storage key for persisted layout */
+    storageKey?: string;
+}
+/**
+ * Row selection event data
+ */
+export interface RowSelectionEvent {
+    rows: CellData[];
+    ids: string[];
+}
+/**
+ * Row click event data
+ */
+export interface RowClickEvent {
+    row: CellData;
+    event: MouseEvent;
+}
+/**
+ * Row double-click event data
+ */
+export interface RowDblClickEvent {
+    row: CellData;
+    event: MouseEvent;
+}
+/**
+ * Row context menu (right-click) event data
+ */
+export interface RowContextMenuEvent {
+    row: CellData;
+    event: MouseEvent;
+}
+/**
+ * Data change event data
+ */
+export interface DataChangeEvent {
+    type: 'load' | 'update' | 'filter' | 'sort' | 'group';
+    rowCount: number;
+    filteredCount: number;
+}
+/**
+ * Column definition with Bootstrap styling helpers
+ */
+export interface CellTableColumn extends ColumnDefinition {
+    /** Bootstrap badge variant for cell rendering */
+    badgeVariant?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark';
+    /** Use technology-based coloring */
+    techColored?: boolean;
+    /** Use status-based coloring */
+    statusColored?: boolean;
+}
+/**
+ * Predefined column groups for presets
+ * Note: 'kpi' and 'history' groups moved to separate modules
+ */
+export interface ColumnGroups {
+    core: string[];
+    physical: string[];
+    network: string[];
+    planning: string[];
+    atoll: string[];
+    position: string[];
+    compare: string[];
+}
+/**
+ * Cell configuration history record
+ * Each record represents a point in time where a cell's configuration changed
+ */
+export interface CellHistoryData {
+    /** Cell name identifier */
+    CELLNAME: string;
+    /** Frequency in MHz (e.g., 1800, 2100, 3500) */
+    FREQUENCY: number;
+    /** Date of configuration change (ISO 8601 format) */
+    CONFIG_DATE: string;
+    /** Current antenna type at this config date */
+    ANTENNA_TYPE: string;
+    /** Previous antenna type before this change */
+    PREV_ANTENNA_TYPE: string;
+    /** Current antenna output power (dBm) */
+    ANTOUTPUTPWR: number;
+    /** Previous antenna output power */
+    PREV_ANTOUTPUTPWR: number;
+    /** Current mechanical tilt (degrees) */
+    MECHANIC_TILT: number;
+    /** Previous mechanical tilt */
+    PREV_MECHANIC_TILT: number;
+    /** Current electrical tilt (degrees) */
+    ELECTRONIC_TILT: number;
+    /** Previous electrical tilt */
+    PREV_ELECTRONIC_TILT: number;
+}

package/dist/core/CellTableV2/types.js

@@ -0,0 +1,6 @@
+/**
+ * CellTable Component - Type Definitions
+ *
+ * Types for the Tabulator-based cell data table component
+ */
+export {};

package/dist/core/index.d.ts

@@ -4,6 +4,8 @@ export * from './TreeView/index.js';
 export * from './Settings/index.js';
 export * from './logger/index.js';
 export * from './CellTable/index.js';
+export * as CellTableV2 from './CellTableV2/index.js';
+export * from './CellHistory/index.js';
 export * from './FeatureRegistry/index.js';
 export * from './Benchmark/index.js';
 export * from './Auth/index.js';

package/dist/core/index.js

@@ -12,6 +12,11 @@ export * from './Settings/index.js';
 export * from './logger/index.js';
 // CellTable - Tabulator-based cell data table with Bootstrap theming
 export * from './CellTable/index.js';
+// CellTableV2 - Refactored with composables architecture
+// Use namespaced import to avoid conflicts with V1: import { CellTableV2 } from './'
+export * as CellTableV2 from './CellTableV2/index.js';
+// CellHistory - Cell configuration history feature (uses CellTableV2)
+export * from './CellHistory/index.js';
 // Map component - Mapbox GL + Deck.GL integration
 // TODO: Moved to top-level src/lib/map module
 // export * from './Map/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@smartnet360/svelte-components",
-	"version": "0.0.133",
+	"version": "0.0.135",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",