atomicuilibrary 0.0.1

package/dist/collection/components/splitter/splitter.js

@@ -0,0 +1,713 @@
+import { h } from "@stencil/core";
+export class AppSplitter {
+    el;
+    // Basic Props
+    direction = 'horizontal';
+    gutterSize = 8;
+    gutterColor = '#e5e7eb';
+    gutterHoverColor = '#0de44dff';
+    // Panel Configuration
+    panels = [];
+    sizes = [];
+    // Premium Features
+    snapThreshold = 20; // Snap to min/max when within threshold
+    animated = true;
+    persistState = false;
+    storageKey = 'splitter-state';
+    showGutterIcon = true;
+    doubleClickCollapse = true;
+    keyboardNavigation = true;
+    rtl = false;
+    // Styling
+    theme = 'auto';
+    rounded = false;
+    elevated = false;
+    isDragging = false;
+    activeGutterIndex = -1;
+    hoveredGutterIndex = -1;
+    collapsedPanels = new Set();
+    sizeChange;
+    panelCollapse;
+    splitterDragStart;
+    splitterDragEnd;
+    startPos = 0;
+    startSizes = [];
+    panelRefs = [];
+    componentWillLoad() {
+        this.initializeSizes();
+        if (this.persistState) {
+            this.loadState();
+        }
+    }
+    componentDidLoad() {
+        // Re-initialize sizes if slots weren't detected during componentWillLoad
+        if (this.sizes.length === 0) {
+            this.initializeSizes();
+        }
+        if (this.keyboardNavigation) {
+            document.addEventListener('keydown', this.handleKeyDown);
+        }
+    }
+    disconnectedCallback() {
+        if (this.keyboardNavigation) {
+            document.removeEventListener('keydown', this.handleKeyDown);
+        }
+        document.removeEventListener('mousemove', this.handleMouseMove);
+        document.removeEventListener('mouseup', this.handleMouseUp);
+    }
+    handlePanelsChange() {
+        this.initializeSizes();
+    }
+    initializeSizes() {
+        const panelCount = this.getPanelCount();
+        if (panelCount === 0)
+            return;
+        // Only initialize if sizes array is empty or doesn't match panel count
+        if (this.sizes.length !== panelCount) {
+            // Initialize with equal sizes or from panel config
+            this.sizes = Array(panelCount).fill(0).map((_, i) => {
+                return this.panels[i]?.size || (100 / panelCount);
+            });
+        }
+    }
+    getPanelCount() {
+        const slots = this.el.querySelectorAll('[slot^="panel-"]');
+        return Math.max(slots.length, this.panels.length);
+    }
+    loadState() {
+        try {
+            const stored = localStorage.getItem(this.storageKey);
+            if (stored) {
+                const state = JSON.parse(stored);
+                this.sizes = state.sizes || this.sizes;
+                this.collapsedPanels = new Set(state.collapsed || []);
+            }
+        }
+        catch (e) {
+            console.error('Failed to load splitter state:', e);
+        }
+    }
+    saveState() {
+        if (!this.persistState)
+            return;
+        try {
+            const state = {
+                sizes: this.sizes,
+                collapsed: Array.from(this.collapsedPanels)
+            };
+            localStorage.setItem(this.storageKey, JSON.stringify(state));
+        }
+        catch (e) {
+            console.error('Failed to save splitter state:', e);
+        }
+    }
+    handleMouseDown = (e, gutterIndex) => {
+        e.preventDefault();
+        this.isDragging = true;
+        this.activeGutterIndex = gutterIndex;
+        this.startPos = this.direction === 'horizontal' ? e.clientX : e.clientY;
+        this.startSizes = [...this.sizes];
+        document.addEventListener('mousemove', this.handleMouseMove);
+        document.addEventListener('mouseup', this.handleMouseUp);
+        this.splitterDragStart.emit({ index: gutterIndex });
+    };
+    handleMouseMove = (e) => {
+        if (!this.isDragging || this.activeGutterIndex === -1)
+            return;
+        const currentPos = this.direction === 'horizontal' ? e.clientX : e.clientY;
+        const delta = currentPos - this.startPos;
+        const finalDelta = (this.rtl && this.direction === 'horizontal') ? -delta : delta;
+        const containerSize = this.direction === 'horizontal'
+            ? this.el.offsetWidth
+            : this.el.offsetHeight;
+        const deltaPercent = (finalDelta / containerSize) * 100;
+        const newSizes = [...this.startSizes];
+        const leftIndex = this.activeGutterIndex;
+        const rightIndex = this.activeGutterIndex + 1;
+        const leftPanel = this.panels[leftIndex];
+        const rightPanel = this.panels[rightIndex];
+        // Theoretical new sizes without clamping
+        let nextLeft = this.startSizes[leftIndex] + deltaPercent;
+        // Calculate the effective range for the gutter movement
+        // Left movement (decreasing left panel size)
+        const leftMin = leftPanel?.minSize !== undefined ? leftPanel.minSize : 0;
+        const leftMax = leftPanel?.maxSize !== undefined ? leftPanel.maxSize : 100;
+        // Right movement (decreasing right panel size)
+        const rightMin = rightPanel?.minSize !== undefined ? rightPanel.minSize : 0;
+        const rightMax = rightPanel?.maxSize !== undefined ? rightPanel.maxSize : 100;
+        // The gutter can move in a range defined by BOTH panels
+        // To decrease left size, we are limited by leftMin AND rightMax
+        // To increase left size, we are limited by leftMax AND rightMin
+        const combinedMin = Math.max(leftMin, (this.startSizes[leftIndex] + this.startSizes[rightIndex]) - rightMax);
+        const combinedMax = Math.min(leftMax, (this.startSizes[leftIndex] + this.startSizes[rightIndex]) - rightMin);
+        let finalLeft = Math.max(combinedMin, Math.min(combinedMax, nextLeft));
+        // Snap to min/max if within threshold
+        if (this.snapThreshold > 0) {
+            if (Math.abs(finalLeft - leftMin) < this.snapThreshold)
+                finalLeft = leftMin;
+            if (Math.abs(this.startSizes[leftIndex] + this.startSizes[rightIndex] - finalLeft - rightMin) < this.snapThreshold) {
+                finalLeft = this.startSizes[leftIndex] + this.startSizes[rightIndex] - rightMin;
+            }
+        }
+        newSizes[leftIndex] = finalLeft;
+        newSizes[rightIndex] = (this.startSizes[leftIndex] + this.startSizes[rightIndex]) - finalLeft;
+        this.sizes = newSizes;
+        this.sizeChange.emit({ sizes: this.sizes, index: this.activeGutterIndex });
+    };
+    handleMouseUp = () => {
+        if (this.isDragging) {
+            this.isDragging = false;
+            this.splitterDragEnd.emit({ index: this.activeGutterIndex, sizes: this.sizes });
+            this.activeGutterIndex = -1;
+            this.saveState();
+        }
+        document.removeEventListener('mousemove', this.handleMouseMove);
+        document.removeEventListener('mouseup', this.handleMouseUp);
+    };
+    handleGutterDoubleClick = (gutterIndex) => {
+        if (!this.doubleClickCollapse)
+            return;
+        const panel = this.panels[gutterIndex];
+        if (!panel?.collapsible)
+            return;
+        this.toggleCollapse(gutterIndex);
+    };
+    toggleCollapse(panelIndex) {
+        const isCollapsed = this.collapsedPanels.has(panelIndex);
+        if (isCollapsed) {
+            this.collapsedPanels.delete(panelIndex);
+        }
+        else {
+            this.collapsedPanels.add(panelIndex);
+            // Collapse to minSize or 0
+            const minSize = this.panels[panelIndex]?.minSize || 0;
+            this.sizes[panelIndex] = minSize;
+        }
+        this.collapsedPanels = new Set(this.collapsedPanels);
+        this.panelCollapse.emit({ index: panelIndex, collapsed: !isCollapsed });
+        this.saveState();
+    }
+    handleKeyDown = (e) => {
+        if (!this.keyboardNavigation || this.activeGutterIndex === -1)
+            return;
+        const step = 5; // 5% step
+        if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+            e.preventDefault();
+            this.adjustSize(this.activeGutterIndex, -step);
+        }
+        else if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+            e.preventDefault();
+            this.adjustSize(this.activeGutterIndex, step);
+        }
+    };
+    adjustSize(gutterIndex, delta) {
+        const newSizes = [...this.sizes];
+        newSizes[gutterIndex] += delta;
+        newSizes[gutterIndex + 1] -= delta;
+        this.sizes = newSizes;
+        this.sizeChange.emit({ sizes: this.sizes, index: gutterIndex });
+    }
+    renderGutter(index) {
+        const isActive = this.activeGutterIndex === index;
+        const isHovered = this.hoveredGutterIndex === index;
+        const gutterClasses = {
+            'splitter-gutter': true,
+            'splitter-gutter-active': isActive,
+            'splitter-gutter-hovered': isHovered,
+            'splitter-gutter-horizontal': this.direction === 'horizontal',
+            'splitter-gutter-vertical': this.direction === 'vertical',
+        };
+        return (h("div", { class: gutterClasses, style: {
+                width: this.direction === 'horizontal' ? `${this.gutterSize}px` : '100%',
+                height: this.direction === 'vertical' ? `${this.gutterSize}px` : '100%',
+                background: isHovered || isActive ? this.gutterHoverColor : this.gutterColor,
+            }, onMouseDown: (e) => this.handleMouseDown(e, index), onDblClick: () => this.handleGutterDoubleClick(index), onMouseEnter: () => this.hoveredGutterIndex = index, onMouseLeave: () => this.hoveredGutterIndex = -1 }, this.showGutterIcon && (h("ui-icon", { name: `grip-${this.direction === 'horizontal' ? 'vertical' : 'lines'}`, library: "fontawesome" }))));
+    }
+    renderPanel(index) {
+        const size = this.sizes[index] || 0;
+        const isCollapsed = this.collapsedPanels.has(index);
+        const panel = this.panels[index];
+        const panelClasses = {
+            'splitter-panel': true,
+            'splitter-panel-collapsed': isCollapsed,
+            'splitter-panel-animated': this.animated && !this.isDragging,
+        };
+        const panelStyle = {
+            [this.direction === 'horizontal' ? 'width' : 'height']: `${size}%`,
+            [this.direction === 'horizontal' ? 'height' : 'width']: '100%',
+        };
+        return (h("div", { ref: (el) => this.panelRefs[index] = el, class: panelClasses, style: panelStyle }, h("slot", { name: `panel-${index}` }), panel?.collapsible && (h("ui-button", { variant: "ghost", onClick: () => this.toggleCollapse(index), ariaLabel: isCollapsed ? 'Expand' : 'Collapse', icon: `chevron-${isCollapsed ? 'right' : 'left'}`, iconLibrary: "fontawesome", iconOnly: true, size: "sm" }))));
+    }
+    render() {
+        const panelCount = this.getPanelCount();
+        const panels = [];
+        for (let i = 0; i < panelCount; i++) {
+            panels.push(this.renderPanel(i));
+            // Add gutter between panels (not after last panel)
+            if (i < panelCount - 1) {
+                panels.push(this.renderGutter(i));
+            }
+        }
+        const containerClasses = {
+            'splitter-container': true,
+            [`splitter-${this.direction}`]: true,
+            [`splitter-theme-${this.theme}`]: true,
+            'splitter-rounded': this.rounded,
+            'splitter-elevated': this.elevated,
+            'splitter-dragging': this.isDragging,
+            'splitter-rtl': this.rtl,
+        };
+        return (h("div", { key: 'e4576c74bbbb36dd9e15f0e7860efd48e878656c', class: containerClasses }, panels));
+    }
+    static get is() { return "ui-splitter"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["splitter.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["splitter.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "direction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Orientation",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "Orientation": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::Orientation",
+                            "referenceLocation": "Orientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "direction",
+                "defaultValue": "'horizontal'"
+            },
+            "gutterSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "gutter-size",
+                "defaultValue": "8"
+            },
+            "gutterColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "gutter-color",
+                "defaultValue": "'#e5e7eb'"
+            },
+            "gutterHoverColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "gutter-hover-color",
+                "defaultValue": "'#0de44dff'"
+            },
+            "panels": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SplitterPanel[]",
+                    "resolved": "SplitterPanel[]",
+                    "references": {
+                        "SplitterPanel": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/splitter/types.ts::SplitterPanel",
+                            "referenceLocation": "SplitterPanel"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "sizes": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "number[]",
+                    "resolved": "number[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "snapThreshold": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "snap-threshold",
+                "defaultValue": "20"
+            },
+            "animated": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "animated",
+                "defaultValue": "true"
+            },
+            "persistState": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "persist-state",
+                "defaultValue": "false"
+            },
+            "storageKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "storage-key",
+                "defaultValue": "'splitter-state'"
+            },
+            "showGutterIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-gutter-icon",
+                "defaultValue": "true"
+            },
+            "doubleClickCollapse": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "double-click-collapse",
+                "defaultValue": "true"
+            },
+            "keyboardNavigation": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "keyboard-navigation",
+                "defaultValue": "true"
+            },
+            "rtl": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rtl",
+                "defaultValue": "false"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Theme",
+                    "resolved": "\"auto\" | \"dark\" | \"default\" | \"green\" | \"light\"",
+                    "references": {
+                        "Theme": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::Theme",
+                            "referenceLocation": "Theme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "theme",
+                "defaultValue": "'auto'"
+            },
+            "rounded": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rounded",
+                "defaultValue": "false"
+            },
+            "elevated": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "elevated",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isDragging": {},
+            "activeGutterIndex": {},
+            "hoveredGutterIndex": {},
+            "collapsedPanels": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sizeChange",
+                "name": "sizeChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ sizes: number[]; index: number }",
+                    "resolved": "{ sizes: number[]; index: number; }",
+                    "references": {}
+                }
+            }, {
+                "method": "panelCollapse",
+                "name": "panelCollapse",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ index: number; collapsed: boolean }",
+                    "resolved": "{ index: number; collapsed: boolean; }",
+                    "references": {}
+                }
+            }, {
+                "method": "splitterDragStart",
+                "name": "splitterDragStart",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ index: number }",
+                    "resolved": "{ index: number; }",
+                    "references": {}
+                }
+            }, {
+                "method": "splitterDragEnd",
+                "name": "splitterDragEnd",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ index: number; sizes: number[] }",
+                    "resolved": "{ index: number; sizes: number[]; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "panels",
+                "methodName": "handlePanelsChange"
+            }];
+    }
+}