@smartnet360/svelte-components 0.0.22 → 0.0.23

package/dist/core/TreeView/TreeView.svelte

@@ -0,0 +1,163 @@
+<script lang="ts">
+	import type { TreeStoreValue } from './tree.model';
+	import TreeNode from './TreeNode.svelte';
+
+	interface Props {
+		store: TreeStoreValue;
+		showIndeterminate?: boolean;
+		showControls?: boolean;
+		height?: string;
+	}
+
+	let {
+		store,
+		showIndeterminate = true,
+		showControls = true,
+		height = '100%'
+	}: Props = $props();
+
+	// Get root nodes
+	let rootNodes = $derived(
+		store.state.rootPaths
+			.map(path => store.state.nodes.get(path))
+			.filter(node => node !== undefined)
+	);
+
+	// Stats
+	let totalNodes = $derived(store.state.nodes.size);
+	let checkedCount = $derived(store.state.checkedPaths.size);
+	let allExpanded = $derived(
+		Array.from(store.state.nodes.values()).every(
+			node => node.childPaths.length === 0 || store.state.expandedPaths.has(node.path)
+		)
+	);
+
+	function handleExpandAll() {
+		store.expandAll();
+	}
+
+	function handleCollapseAll() {
+		store.collapseAll();
+	}
+
+	function handleCheckAll() {
+		store.checkAll();
+	}
+
+	function handleUncheckAll() {
+		store.uncheckAll();
+	}
+</script>
+
+<div class="tree-view" style:height>
+	{#if showControls}
+		<div class="tree-controls">
+			<div class="btn-group btn-group-sm" role="group">
+				<button type="button" class="btn btn-outline-secondary" onclick={handleExpandAll}>
+					<i class="bi bi-arrows-expand"></i>
+					Expand All
+				</button>
+				<button type="button" class="btn btn-outline-secondary" onclick={handleCollapseAll}>
+					<i class="bi bi-arrows-collapse"></i>
+					Collapse All
+				</button>
+			</div>
+
+			<div class="btn-group btn-group-sm ms-2" role="group">
+				<button type="button" class="btn btn-outline-primary" onclick={handleCheckAll}>
+					<i class="bi bi-check-square"></i>
+					Check All
+				</button>
+				<button type="button" class="btn btn-outline-primary" onclick={handleUncheckAll}>
+					<i class="bi bi-square"></i>
+					Uncheck All
+				</button>
+			</div>
+
+			<div class="tree-stats ms-auto">
+				<span class="badge bg-primary">{checkedCount} / {totalNodes} selected</span>
+			</div>
+		</div>
+	{/if}
+
+	<div class="tree-content">
+		<div class="tree-help-text">
+			<small class="text-muted">
+				<i class="bi bi-info-circle"></i>
+				Click checkboxes to select/deselect. Click arrows to expand/collapse.
+			</small>
+		</div>
+
+		<div class="tree-nodes">
+			{#each rootNodes as rootNode (rootNode.path)}
+				<TreeNode nodeState={rootNode} {store} {showIndeterminate} />
+			{/each}
+		</div>
+	</div>
+</div>
+
+<style>
+	.tree-view {
+		display: flex;
+		flex-direction: column;
+		background-color: #fff;
+		border: 1px solid #dee2e6;
+		border-radius: 0.375rem;
+		overflow: hidden;
+	}
+
+	.tree-controls {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.75rem;
+		border-bottom: 1px solid #dee2e6;
+		background-color: #f8f9fa;
+		flex-shrink: 0;
+	}
+
+	.tree-stats {
+		display: flex;
+		align-items: center;
+	}
+
+	.tree-content {
+		flex: 1;
+		overflow-y: auto;
+		overflow-x: hidden;
+	}
+
+	.tree-help-text {
+		padding: 0.75rem 1rem;
+		border-bottom: 1px solid #e9ecef;
+		background-color: #f8f9fa;
+	}
+
+	.tree-help-text small {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
+
+	.tree-nodes {
+		padding: 0.5rem;
+	}
+
+	/* Scrollbar styling */
+	.tree-content::-webkit-scrollbar {
+		width: 8px;
+	}
+
+	.tree-content::-webkit-scrollbar-track {
+		background: #f1f1f1;
+	}
+
+	.tree-content::-webkit-scrollbar-thumb {
+		background: #888;
+		border-radius: 4px;
+	}
+
+	.tree-content::-webkit-scrollbar-thumb:hover {
+		background: #555;
+	}
+</style>

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

@@ -0,0 +1,10 @@
+import type { TreeStoreValue } from './tree.model';
+interface Props {
+    store: TreeStoreValue;
+    showIndeterminate?: boolean;
+    showControls?: boolean;
+    height?: string;
+}
+declare const TreeView: import("svelte").Component<Props, {}, "">;
+type TreeView = ReturnType<typeof TreeView>;
+export default TreeView;

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

@@ -0,0 +1,48 @@
+/**
+ * TreeView - Generic hierarchical tree component
+ *
+ * Features:
+ * - JSON-driven tree structure
+ * - Flattened state management (O(1) lookups)
+ * - Cascading checkbox selection
+ * - Indeterminate states for partial selection
+ * - Expand/collapse functionality
+ * - LocalStorage persistence
+ * - Svelte store for reactive state
+ * - Bootstrap styling
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { TreeView, createTreeStore } from './';
+ *
+ *   const config = {
+ *     nodes: [
+ *       {
+ *         id: 'site-a',
+ *         label: 'Site A',
+ *         icon: '📡',
+ *         children: [
+ *           { id: 'sector-1', label: 'Sector 1', children: [...] }
+ *         ]
+ *       }
+ *     ],
+ *     namespace: 'my-app',
+ *     persistState: true
+ *   };
+ *
+ *   const treeStore = createTreeStore(config);
+ *
+ *   $effect(() => {
+ *     console.log('Checked paths:', $treeStore.state.checkedPaths);
+ *   });
+ * </script>
+ *
+ * <TreeView store={treeStore} />
+ * ```
+ */
+export { default as TreeView } from './TreeView.svelte';
+export { default as TreeNodeComponent } from './TreeNode.svelte';
+export { createTreeStore } from './tree.store';
+export type { TreeNode, TreeConfig, TreeState, NodeState, TreeStoreValue } from './tree.model';
+export { getParentPath, getAncestorPaths, isAncestor, getPathLevel, flattenTree, calculateIndeterminateStates, getDescendantPaths, buildInitialState } from './tree-utils';

package/dist/core/TreeView/index.js

@@ -0,0 +1,50 @@
+/**
+ * TreeView - Generic hierarchical tree component
+ *
+ * Features:
+ * - JSON-driven tree structure
+ * - Flattened state management (O(1) lookups)
+ * - Cascading checkbox selection
+ * - Indeterminate states for partial selection
+ * - Expand/collapse functionality
+ * - LocalStorage persistence
+ * - Svelte store for reactive state
+ * - Bootstrap styling
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { TreeView, createTreeStore } from './';
+ *
+ *   const config = {
+ *     nodes: [
+ *       {
+ *         id: 'site-a',
+ *         label: 'Site A',
+ *         icon: '📡',
+ *         children: [
+ *           { id: 'sector-1', label: 'Sector 1', children: [...] }
+ *         ]
+ *       }
+ *     ],
+ *     namespace: 'my-app',
+ *     persistState: true
+ *   };
+ *
+ *   const treeStore = createTreeStore(config);
+ *
+ *   $effect(() => {
+ *     console.log('Checked paths:', $treeStore.state.checkedPaths);
+ *   });
+ * </script>
+ *
+ * <TreeView store={treeStore} />
+ * ```
+ */
+// Components
+export { default as TreeView } from './TreeView.svelte';
+export { default as TreeNodeComponent } from './TreeNode.svelte';
+// Store
+export { createTreeStore } from './tree.store';
+// Utilities (for advanced usage)
+export { getParentPath, getAncestorPaths, isAncestor, getPathLevel, flattenTree, calculateIndeterminateStates, getDescendantPaths, buildInitialState } from './tree-utils';

package/dist/core/TreeView/tree-utils.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Tree utility functions
+ * Helper functions for path manipulation, tree flattening, and state management
+ */
+import type { TreeNode, NodeState, TreeState, TreeConfig } from './tree.model';
+/**
+ * Get parent path from a node path
+ * @example getParentPath("site-a:sector-1:700", ":") => "site-a:sector-1"
+ */
+export declare function getParentPath(path: string, separator?: string): string;
+/**
+ * Get all ancestor paths
+ * @example getAncestorPaths("a:b:c") => ["a", "a:b"]
+ */
+export declare function getAncestorPaths(path: string, separator?: string): string[];
+/**
+ * Check if one path is ancestor of another
+ */
+export declare function isAncestor(ancestorPath: string, descendantPath: string, separator?: string): boolean;
+/**
+ * Get depth level of a path
+ * @example getPathLevel("a:b:c") => 2
+ */
+export declare function getPathLevel(path: string, separator?: string): number;
+/**
+ * Flatten tree structure into map of NodeState
+ */
+export declare function flattenTree<T = any>(nodes: TreeNode<T>[], config: TreeConfig<T>, parentPath?: string, level?: number): Map<string, NodeState>;
+/**
+ * Calculate which nodes should be indeterminate
+ */
+export declare function calculateIndeterminateStates(nodes: Map<string, NodeState>, checkedPaths: Set<string>): Set<string>;
+/**
+ * Get all descendant paths of a node
+ */
+export declare function getDescendantPaths(path: string, nodes: Map<string, NodeState>, separator?: string): string[];
+/**
+ * Build initial TreeState from flattened nodes
+ */
+export declare function buildInitialState(nodes: Map<string, NodeState>, config: TreeConfig): TreeState;
+/**
+ * LocalStorage key builder
+ */
+export declare function getStorageKey(namespace: string, key: string): string;
+/**
+ * Save state to localStorage
+ */
+export declare function saveStateToStorage(namespace: string, state: TreeState): void;
+/**
+ * Load state from localStorage
+ */
+export declare function loadStateFromStorage(namespace: string, state: TreeState): Partial<TreeState>;
+/**
+ * Clear localStorage for a namespace
+ */
+export declare function clearStorageForNamespace(namespace: string): void;

package/dist/core/TreeView/tree-utils.js

@@ -0,0 +1,194 @@
+/**
+ * Tree utility functions
+ * Helper functions for path manipulation, tree flattening, and state management
+ */
+/**
+ * Get parent path from a node path
+ * @example getParentPath("site-a:sector-1:700", ":") => "site-a:sector-1"
+ */
+export function getParentPath(path, separator = ':') {
+    const lastIndex = path.lastIndexOf(separator);
+    return lastIndex === -1 ? '' : path.substring(0, lastIndex);
+}
+/**
+ * Get all ancestor paths
+ * @example getAncestorPaths("a:b:c") => ["a", "a:b"]
+ */
+export function getAncestorPaths(path, separator = ':') {
+    const ancestors = [];
+    let current = path;
+    while (true) {
+        const parent = getParentPath(current, separator);
+        if (!parent)
+            break;
+        ancestors.push(parent);
+        current = parent;
+    }
+    return ancestors.reverse(); // Return from root to immediate parent
+}
+/**
+ * Check if one path is ancestor of another
+ */
+export function isAncestor(ancestorPath, descendantPath, separator = ':') {
+    return descendantPath.startsWith(ancestorPath + separator);
+}
+/**
+ * Get depth level of a path
+ * @example getPathLevel("a:b:c") => 2
+ */
+export function getPathLevel(path, separator = ':') {
+    return path.split(separator).length - 1;
+}
+/**
+ * Flatten tree structure into map of NodeState
+ */
+export function flattenTree(nodes, config, parentPath = '', level = 0) {
+    const map = new Map();
+    const separator = config.pathSeparator || ':';
+    for (const node of nodes) {
+        const path = parentPath ? `${parentPath}${separator}${node.id}` : node.id;
+        // Collect child paths
+        const childPaths = [];
+        if (node.children && node.children.length > 0) {
+            for (const child of node.children) {
+                childPaths.push(parentPath ? `${path}${separator}${child.id}` : `${path}${separator}${child.id}`);
+            }
+        }
+        const nodeState = {
+            path,
+            checked: node.defaultChecked ?? true,
+            indeterminate: false,
+            expanded: node.defaultExpanded ?? (config.defaultExpandAll || false),
+            node,
+            parentPath,
+            childPaths,
+            level
+        };
+        map.set(path, nodeState);
+        // Recursively flatten children
+        if (node.children && node.children.length > 0) {
+            const childMap = flattenTree(node.children, config, path, level + 1);
+            childMap.forEach((value, key) => map.set(key, value));
+        }
+    }
+    return map;
+}
+/**
+ * Calculate which nodes should be indeterminate
+ */
+export function calculateIndeterminateStates(nodes, checkedPaths) {
+    const indeterminate = new Set();
+    // For each node with children
+    nodes.forEach((nodeState, path) => {
+        if (nodeState.childPaths.length === 0)
+            return; // Leaf nodes can't be indeterminate
+        const checkedChildren = nodeState.childPaths.filter(childPath => checkedPaths.has(childPath));
+        const allChecked = checkedChildren.length === nodeState.childPaths.length;
+        const noneChecked = checkedChildren.length === 0;
+        // Indeterminate if some (but not all) children are checked
+        if (!allChecked && !noneChecked) {
+            indeterminate.add(path);
+        }
+    });
+    return indeterminate;
+}
+/**
+ * Get all descendant paths of a node
+ */
+export function getDescendantPaths(path, nodes, separator = ':') {
+    const descendants = [];
+    nodes.forEach((nodeState, nodePath) => {
+        if (nodePath !== path && nodePath.startsWith(path + separator)) {
+            descendants.push(nodePath);
+        }
+    });
+    return descendants;
+}
+/**
+ * Build initial TreeState from flattened nodes
+ */
+export function buildInitialState(nodes, config) {
+    const checkedPaths = new Set();
+    const expandedPaths = new Set();
+    const rootPaths = [];
+    nodes.forEach((nodeState, path) => {
+        if (nodeState.checked) {
+            checkedPaths.add(path);
+        }
+        if (nodeState.expanded) {
+            expandedPaths.add(path);
+        }
+        if (nodeState.level === 0) {
+            rootPaths.push(path);
+        }
+    });
+    const indeterminatePaths = calculateIndeterminateStates(nodes, checkedPaths);
+    return {
+        nodes,
+        checkedPaths,
+        expandedPaths,
+        indeterminatePaths,
+        rootPaths
+    };
+}
+/**
+ * LocalStorage key builder
+ */
+export function getStorageKey(namespace, key) {
+    return `${namespace}:${key}`;
+}
+/**
+ * Save state to localStorage
+ */
+export function saveStateToStorage(namespace, state) {
+    if (!namespace)
+        return;
+    try {
+        localStorage.setItem(getStorageKey(namespace, 'checked'), JSON.stringify(Array.from(state.checkedPaths)));
+        localStorage.setItem(getStorageKey(namespace, 'expanded'), JSON.stringify(Array.from(state.expandedPaths)));
+    }
+    catch (error) {
+        console.warn('Failed to save tree state to localStorage:', error);
+    }
+}
+/**
+ * Load state from localStorage
+ */
+export function loadStateFromStorage(namespace, state) {
+    if (!namespace)
+        return {};
+    try {
+        const checkedJson = localStorage.getItem(getStorageKey(namespace, 'checked'));
+        const expandedJson = localStorage.getItem(getStorageKey(namespace, 'expanded'));
+        const updates = {};
+        if (checkedJson) {
+            const checkedArray = JSON.parse(checkedJson);
+            updates.checkedPaths = new Set(checkedArray);
+            // Recalculate indeterminate states
+            updates.indeterminatePaths = calculateIndeterminateStates(state.nodes, updates.checkedPaths);
+        }
+        if (expandedJson) {
+            const expandedArray = JSON.parse(expandedJson);
+            updates.expandedPaths = new Set(expandedArray);
+        }
+        return updates;
+    }
+    catch (error) {
+        console.warn('Failed to load tree state from localStorage:', error);
+        return {};
+    }
+}
+/**
+ * Clear localStorage for a namespace
+ */
+export function clearStorageForNamespace(namespace) {
+    if (!namespace)
+        return;
+    try {
+        localStorage.removeItem(getStorageKey(namespace, 'checked'));
+        localStorage.removeItem(getStorageKey(namespace, 'expanded'));
+    }
+    catch (error) {
+        console.warn('Failed to clear tree state from localStorage:', error);
+    }
+}

package/dist/core/TreeView/tree.model.d.ts

@@ -0,0 +1,104 @@
+/**
+ * Generic TreeView Model
+ * Supports hierarchical tree structures with checkboxes, expand/collapse, and state persistence
+ */
+/**
+ * Individual tree node configuration
+ * @template T - Type of custom metadata
+ */
+export interface TreeNode<T = any> {
+    /** Unique identifier for this node */
+    id: string;
+    /** Display label */
+    label: string;
+    /** Optional child nodes */
+    children?: TreeNode<T>[];
+    /** Custom metadata (colors, icons, data, etc.) */
+    metadata?: T;
+    /** Initial checked state (default: true) */
+    defaultChecked?: boolean;
+    /** Initial expanded state (default: false) */
+    defaultExpanded?: boolean;
+    /** Optional icon class or emoji */
+    icon?: string;
+}
+/**
+ * State of a single node
+ */
+export interface NodeState {
+    /** Full path to this node (e.g., "site-a:sector-1:700") */
+    path: string;
+    /** Is this node checked? */
+    checked: boolean;
+    /** Is this node in indeterminate state? (some children checked) */
+    indeterminate: boolean;
+    /** Is this node expanded? (showing children) */
+    expanded: boolean;
+    /** Reference to original node config */
+    node: TreeNode;
+    /** Parent path (empty string for root nodes) */
+    parentPath: string;
+    /** Child paths */
+    childPaths: string[];
+    /** Depth level (0 = root) */
+    level: number;
+}
+/**
+ * Complete tree state
+ */
+export interface TreeState {
+    /** Flattened map of all nodes by path */
+    nodes: Map<string, NodeState>;
+    /** Set of checked node paths */
+    checkedPaths: Set<string>;
+    /** Set of expanded node paths */
+    expandedPaths: Set<string>;
+    /** Set of indeterminate node paths */
+    indeterminatePaths: Set<string>;
+    /** Root node paths */
+    rootPaths: string[];
+}
+/**
+ * TreeView configuration
+ */
+export interface TreeConfig<T = any> {
+    /** Root nodes */
+    nodes: TreeNode<T>[];
+    /** Expand all nodes by default */
+    defaultExpandAll?: boolean;
+    /** Path separator (default: ":") */
+    pathSeparator?: string;
+    /** LocalStorage namespace for persistence */
+    namespace?: string;
+    /** Enable localStorage persistence */
+    persistState?: boolean;
+    /** Show indeterminate checkbox states */
+    showIndeterminate?: boolean;
+}
+/**
+ * Store value exposed to consumers
+ */
+export interface TreeStoreValue {
+    /** Current tree state */
+    state: TreeState;
+    /** Config used */
+    config: TreeConfig;
+    /** Toggle a node's checked state */
+    toggle: (path: string) => void;
+    /** Expand/collapse a node */
+    toggleExpand: (path: string) => void;
+    /** Expand all nodes */
+    expandAll: () => void;
+    /** Collapse all nodes */
+    collapseAll: () => void;
+    /** Check all nodes */
+    checkAll: () => void;
+    /** Uncheck all nodes */
+    uncheckAll: () => void;
+    /** Get all checked paths */
+    getCheckedPaths: () => string[];
+    /** Get all checked leaf paths (nodes without children) */
+    getCheckedLeafPaths: () => string[];
+    /** Clear localStorage */
+    clearStorage: () => void;
+}

package/dist/core/TreeView/tree.model.js

@@ -0,0 +1,5 @@
+/**
+ * Generic TreeView Model
+ * Supports hierarchical tree structures with checkboxes, expand/collapse, and state persistence
+ */
+export {};

package/dist/core/TreeView/tree.store.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Tree Store
+ * Svelte writable store for managing tree state with persistence
+ */
+import { type Writable } from 'svelte/store';
+import type { TreeConfig, TreeStoreValue } from './tree.model';
+/**
+ * Create a tree store with state management and persistence
+ */
+export declare function createTreeStore<T = any>(config: TreeConfig<T>): Writable<TreeStoreValue>;