@alaarab/ogrid-js 2.0.0-beta

package/dist/esm/components/ColumnChooser.js

@@ -0,0 +1,68 @@
+export class ColumnChooser {
+    constructor(container, state) {
+        this.el = null;
+        this.dropdown = null;
+        this.isOpen = false;
+        this.container = container;
+        this.state = state;
+    }
+    render() {
+        if (this.el)
+            this.el.remove();
+        this.el = document.createElement('div');
+        this.el.className = 'ogrid-column-chooser';
+        const btn = document.createElement('button');
+        btn.className = 'ogrid-column-chooser-btn';
+        btn.textContent = 'Columns';
+        btn.addEventListener('click', () => this.toggle());
+        this.el.appendChild(btn);
+        this.container.appendChild(this.el);
+    }
+    toggle() {
+        if (this.isOpen) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    open() {
+        if (this.dropdown)
+            return;
+        this.isOpen = true;
+        this.dropdown = document.createElement('div');
+        this.dropdown.className = 'ogrid-column-chooser-dropdown';
+        for (const col of this.state.columns) {
+            const label = document.createElement('label');
+            label.className = 'ogrid-column-chooser-item';
+            const checkbox = document.createElement('input');
+            checkbox.type = 'checkbox';
+            checkbox.checked = this.state.visibleColumns.has(col.columnId);
+            checkbox.disabled = !!col.required;
+            checkbox.addEventListener('change', () => {
+                const next = new Set(this.state.visibleColumns);
+                if (checkbox.checked) {
+                    next.add(col.columnId);
+                }
+                else {
+                    next.delete(col.columnId);
+                }
+                this.state.setVisibleColumns(next);
+            });
+            label.appendChild(checkbox);
+            label.appendChild(document.createTextNode(' ' + col.name));
+            this.dropdown.appendChild(label);
+        }
+        this.el.appendChild(this.dropdown);
+    }
+    close() {
+        this.isOpen = false;
+        this.dropdown?.remove();
+        this.dropdown = null;
+    }
+    destroy() {
+        this.close();
+        this.el?.remove();
+        this.el = null;
+    }
+}

package/dist/esm/components/ContextMenu.js

@@ -0,0 +1,122 @@
+import { GRID_CONTEXT_MENU_ITEMS, formatShortcut } from '@alaarab/ogrid-core';
+const MENU_STYLE = {
+    position: 'fixed',
+    backgroundColor: 'white',
+    border: '1px solid #ccc',
+    boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+    zIndex: '10000',
+    minWidth: '180px',
+    padding: '4px 0',
+    fontFamily: 'system-ui, -apple-system, sans-serif',
+    fontSize: '14px',
+};
+const ITEM_STYLE = {
+    padding: '6px 12px',
+    cursor: 'pointer',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+};
+const DIVIDER_STYLE = {
+    height: '1px',
+    backgroundColor: '#e0e0e0',
+    margin: '4px 0',
+};
+export class ContextMenu {
+    constructor() {
+        this.menu = null;
+        this.handlers = null;
+    }
+    show(x, y, handlers, canUndo, canRedo, selectionRange) {
+        this.close();
+        this.handlers = handlers;
+        this.menu = document.createElement('div');
+        Object.assign(this.menu.style, MENU_STYLE);
+        this.menu.style.left = `${x}px`;
+        this.menu.style.top = `${y}px`;
+        for (const item of GRID_CONTEXT_MENU_ITEMS) {
+            if (item.dividerBefore) {
+                const divider = document.createElement('div');
+                Object.assign(divider.style, DIVIDER_STYLE);
+                this.menu.appendChild(divider);
+            }
+            const menuItem = document.createElement('div');
+            Object.assign(menuItem.style, ITEM_STYLE);
+            const label = document.createElement('span');
+            label.textContent = item.label;
+            menuItem.appendChild(label);
+            if (item.shortcut) {
+                const shortcut = document.createElement('span');
+                shortcut.textContent = formatShortcut(item.shortcut);
+                shortcut.style.marginLeft = '20px';
+                shortcut.style.color = '#666';
+                shortcut.style.fontSize = '12px';
+                menuItem.appendChild(shortcut);
+            }
+            const isDisabled = (item.id === 'undo' && !canUndo) ||
+                (item.id === 'redo' && !canRedo) ||
+                (item.disabledWhenNoSelection && selectionRange == null);
+            if (isDisabled) {
+                menuItem.style.color = '#aaa';
+                menuItem.style.cursor = 'not-allowed';
+            }
+            else {
+                menuItem.addEventListener('mouseenter', () => {
+                    menuItem.style.backgroundColor = '#f0f0f0';
+                });
+                menuItem.addEventListener('mouseleave', () => {
+                    menuItem.style.backgroundColor = 'white';
+                });
+                menuItem.addEventListener('click', () => {
+                    this.handleItemClick(item.id);
+                });
+            }
+            this.menu.appendChild(menuItem);
+        }
+        document.body.appendChild(this.menu);
+        const handleClickOutside = (e) => {
+            if (this.menu && !this.menu.contains(e.target)) {
+                this.close();
+                document.removeEventListener('mousedown', handleClickOutside);
+            }
+        };
+        setTimeout(() => {
+            document.addEventListener('mousedown', handleClickOutside);
+        }, 0);
+    }
+    close() {
+        if (this.menu) {
+            this.menu.remove();
+            this.menu = null;
+        }
+        this.handlers = null;
+    }
+    handleItemClick(id) {
+        if (!this.handlers)
+            return;
+        switch (id) {
+            case 'undo':
+                this.handlers.onUndo();
+                break;
+            case 'redo':
+                this.handlers.onRedo();
+                break;
+            case 'copy':
+                this.handlers.onCopy();
+                break;
+            case 'cut':
+                this.handlers.onCut();
+                break;
+            case 'paste':
+                this.handlers.onPaste();
+                break;
+            case 'selectAll':
+                this.handlers.onSelectAll();
+                break;
+        }
+        this.close();
+    }
+    destroy() {
+        this.close();
+    }
+}

package/dist/esm/components/HeaderFilter.js

@@ -0,0 +1,281 @@
+/**
+ * Renders header filter popover (dropdown) in DOM.
+ * Instantiated by OGrid, reads state from HeaderFilterState.
+ */
+export class HeaderFilter {
+    constructor(state) {
+        this.popoverEl = null;
+        this.state = state;
+    }
+    /**
+     * Render the popover for the currently open filter.
+     * Call this whenever HeaderFilterState changes.
+     */
+    render(config) {
+        this.cleanup();
+        if (!config || !this.state.openColumnId || !this.state.popoverPosition)
+            return;
+        const pos = this.state.popoverPosition;
+        this.popoverEl = document.createElement('div');
+        this.popoverEl.className = 'ogrid-header-filter-popover';
+        this.popoverEl.style.position = 'fixed';
+        this.popoverEl.style.top = `${pos.top}px`;
+        this.popoverEl.style.left = `${pos.left}px`;
+        this.popoverEl.style.zIndex = '9999';
+        this.popoverEl.style.background = 'var(--ogrid-bg, #fff)';
+        this.popoverEl.style.color = 'var(--ogrid-fg, #242424)';
+        this.popoverEl.style.border = '1px solid var(--ogrid-border, #e0e0e0)';
+        this.popoverEl.style.borderRadius = '4px';
+        this.popoverEl.style.boxShadow = '0 2px 8px rgba(0,0,0,0.15)';
+        this.popoverEl.style.padding = '8px';
+        this.popoverEl.style.minWidth = '200px';
+        this.popoverEl.style.maxHeight = '320px';
+        this.popoverEl.style.overflowY = 'auto';
+        // Stop clicks within popover from propagating
+        this.popoverEl.addEventListener('click', (e) => e.stopPropagation());
+        this.popoverEl.addEventListener('mousedown', (e) => e.stopPropagation());
+        if (config.filterType === 'text') {
+            this.renderTextFilter(config);
+        }
+        else if (config.filterType === 'multiSelect') {
+            this.renderMultiSelectFilter(config);
+        }
+        else if (config.filterType === 'date') {
+            this.renderDateFilter(config);
+        }
+        document.body.appendChild(this.popoverEl);
+    }
+    renderTextFilter(config) {
+        if (!this.popoverEl)
+            return;
+        const input = document.createElement('input');
+        input.type = 'text';
+        input.value = this.state.tempTextValue;
+        input.placeholder = 'Filter...';
+        input.setAttribute('aria-label', 'Text filter');
+        input.className = 'ogrid-filter-text-input';
+        this.applyInputStyle(input);
+        input.style.marginBottom = '8px';
+        input.addEventListener('input', () => {
+            this.state.setTempTextValue(input.value);
+        });
+        input.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') {
+                this.state.applyTextFilter(config.filterField);
+            }
+            e.stopPropagation();
+        });
+        this.popoverEl.appendChild(input);
+        // Buttons
+        const btnRow = document.createElement('div');
+        btnRow.style.display = 'flex';
+        btnRow.style.gap = '8px';
+        const applyBtn = document.createElement('button');
+        applyBtn.textContent = 'Apply';
+        applyBtn.className = 'ogrid-filter-apply-btn';
+        this.applyButtonStyle(applyBtn);
+        applyBtn.addEventListener('click', () => this.state.applyTextFilter(config.filterField));
+        btnRow.appendChild(applyBtn);
+        const clearBtn = document.createElement('button');
+        clearBtn.textContent = 'Clear';
+        clearBtn.className = 'ogrid-filter-clear-btn';
+        this.applyButtonStyle(clearBtn);
+        clearBtn.addEventListener('click', () => this.state.clearTextFilter(config.filterField));
+        btnRow.appendChild(clearBtn);
+        this.popoverEl.appendChild(btnRow);
+        // Focus input
+        setTimeout(() => input.focus(), 0);
+    }
+    renderMultiSelectFilter(config) {
+        if (!this.popoverEl)
+            return;
+        // Search box
+        const searchInput = document.createElement('input');
+        searchInput.type = 'text';
+        searchInput.value = this.state.searchText;
+        searchInput.placeholder = 'Search...';
+        searchInput.setAttribute('aria-label', 'Search filter options');
+        searchInput.className = 'ogrid-filter-search-input';
+        this.applyInputStyle(searchInput);
+        searchInput.style.marginBottom = '8px';
+        searchInput.addEventListener('input', () => {
+            this.state.setSearchText(searchInput.value);
+            this.updateCheckboxList(config, checkboxContainer);
+        });
+        searchInput.addEventListener('keydown', (e) => e.stopPropagation());
+        this.popoverEl.appendChild(searchInput);
+        // Select all / Clear all buttons
+        const actionRow = document.createElement('div');
+        actionRow.style.display = 'flex';
+        actionRow.style.gap = '8px';
+        actionRow.style.marginBottom = '8px';
+        const selectAllBtn = document.createElement('button');
+        selectAllBtn.textContent = 'Select All';
+        selectAllBtn.className = 'ogrid-filter-select-all-btn';
+        this.applySmallButtonStyle(selectAllBtn);
+        selectAllBtn.addEventListener('click', () => {
+            this.state.handleSelectAll(config.filterField);
+            this.updateCheckboxList(config, checkboxContainer);
+        });
+        actionRow.appendChild(selectAllBtn);
+        const clearSelBtn = document.createElement('button');
+        clearSelBtn.textContent = 'Clear';
+        clearSelBtn.className = 'ogrid-filter-clear-sel-btn';
+        this.applySmallButtonStyle(clearSelBtn);
+        clearSelBtn.addEventListener('click', () => {
+            this.state.handleClearSelection();
+            this.updateCheckboxList(config, checkboxContainer);
+        });
+        actionRow.appendChild(clearSelBtn);
+        this.popoverEl.appendChild(actionRow);
+        // Checkbox list container
+        const checkboxContainer = document.createElement('div');
+        checkboxContainer.className = 'ogrid-filter-checkbox-list';
+        checkboxContainer.style.maxHeight = '160px';
+        checkboxContainer.style.overflowY = 'auto';
+        checkboxContainer.style.marginBottom = '8px';
+        checkboxContainer.setAttribute('role', 'group');
+        checkboxContainer.setAttribute('aria-label', 'Filter options');
+        this.updateCheckboxList(config, checkboxContainer);
+        this.popoverEl.appendChild(checkboxContainer);
+        // Apply button
+        const applyBtn = document.createElement('button');
+        applyBtn.textContent = 'Apply';
+        applyBtn.className = 'ogrid-filter-apply-btn';
+        this.applyButtonStyle(applyBtn);
+        applyBtn.addEventListener('click', () => this.state.applyMultiSelectFilter(config.filterField));
+        this.popoverEl.appendChild(applyBtn);
+    }
+    updateCheckboxList(config, container) {
+        container.innerHTML = '';
+        const options = this.state.getFilteredOptions(config.filterField);
+        const selected = this.state.tempSelected;
+        for (const opt of options) {
+            const label = document.createElement('label');
+            label.style.display = 'flex';
+            label.style.alignItems = 'center';
+            label.style.gap = '4px';
+            label.style.padding = '2px 0';
+            label.style.cursor = 'pointer';
+            label.style.fontSize = '13px';
+            const checkbox = document.createElement('input');
+            checkbox.type = 'checkbox';
+            checkbox.checked = selected.has(opt);
+            checkbox.addEventListener('change', () => {
+                this.state.handleCheckboxChange(opt, checkbox.checked);
+            });
+            const text = document.createElement('span');
+            text.textContent = opt;
+            label.appendChild(checkbox);
+            label.appendChild(text);
+            container.appendChild(label);
+        }
+        if (options.length === 0) {
+            const empty = document.createElement('div');
+            empty.style.color = 'var(--ogrid-muted, #999)';
+            empty.style.fontStyle = 'italic';
+            empty.style.padding = '4px 0';
+            empty.textContent = 'No options';
+            container.appendChild(empty);
+        }
+    }
+    renderDateFilter(config) {
+        if (!this.popoverEl)
+            return;
+        const container = document.createElement('div');
+        container.style.display = 'flex';
+        container.style.flexDirection = 'column';
+        container.style.gap = '8px';
+        // From date
+        const fromLabel = document.createElement('label');
+        fromLabel.style.display = 'flex';
+        fromLabel.style.alignItems = 'center';
+        fromLabel.style.gap = '4px';
+        fromLabel.style.fontSize = '13px';
+        fromLabel.textContent = 'From: ';
+        const fromInput = document.createElement('input');
+        fromInput.type = 'date';
+        fromInput.value = this.state.tempDateFrom;
+        fromInput.setAttribute('aria-label', 'From date');
+        this.applyInputStyle(fromInput);
+        fromInput.addEventListener('change', () => {
+            this.state.setTempDateFrom(fromInput.value);
+        });
+        fromInput.addEventListener('keydown', (e) => e.stopPropagation());
+        fromLabel.appendChild(fromInput);
+        container.appendChild(fromLabel);
+        // To date
+        const toLabel = document.createElement('label');
+        toLabel.style.display = 'flex';
+        toLabel.style.alignItems = 'center';
+        toLabel.style.gap = '4px';
+        toLabel.style.fontSize = '13px';
+        toLabel.textContent = 'To: ';
+        const toInput = document.createElement('input');
+        toInput.type = 'date';
+        toInput.value = this.state.tempDateTo;
+        toInput.setAttribute('aria-label', 'To date');
+        this.applyInputStyle(toInput);
+        toInput.addEventListener('change', () => {
+            this.state.setTempDateTo(toInput.value);
+        });
+        toInput.addEventListener('keydown', (e) => e.stopPropagation());
+        toLabel.appendChild(toInput);
+        container.appendChild(toLabel);
+        this.popoverEl.appendChild(container);
+        // Buttons
+        const btnRow = document.createElement('div');
+        btnRow.style.display = 'flex';
+        btnRow.style.gap = '8px';
+        btnRow.style.marginTop = '8px';
+        const applyBtn = document.createElement('button');
+        applyBtn.textContent = 'Apply';
+        applyBtn.className = 'ogrid-filter-apply-btn';
+        this.applyButtonStyle(applyBtn);
+        applyBtn.addEventListener('click', () => this.state.applyDateFilter(config.filterField));
+        btnRow.appendChild(applyBtn);
+        const clearBtn = document.createElement('button');
+        clearBtn.textContent = 'Clear';
+        clearBtn.className = 'ogrid-filter-clear-btn';
+        this.applyButtonStyle(clearBtn);
+        clearBtn.addEventListener('click', () => this.state.clearDateFilter(config.filterField));
+        btnRow.appendChild(clearBtn);
+        this.popoverEl.appendChild(btnRow);
+    }
+    applyInputStyle(input) {
+        input.style.width = '100%';
+        input.style.boxSizing = 'border-box';
+        input.style.padding = '4px 6px';
+        input.style.background = 'var(--ogrid-bg, #fff)';
+        input.style.color = 'var(--ogrid-fg, #242424)';
+        input.style.border = '1px solid var(--ogrid-border, #e0e0e0)';
+        input.style.borderRadius = '4px';
+    }
+    applyButtonStyle(btn) {
+        btn.style.flex = '1';
+        btn.style.cursor = 'pointer';
+        btn.style.padding = '6px 12px';
+        btn.style.background = 'var(--ogrid-bg-subtle, #f3f2f1)';
+        btn.style.color = 'var(--ogrid-fg, #242424)';
+        btn.style.border = '1px solid var(--ogrid-border, #e0e0e0)';
+        btn.style.borderRadius = '4px';
+    }
+    applySmallButtonStyle(btn) {
+        btn.style.cursor = 'pointer';
+        btn.style.padding = '2px 8px';
+        btn.style.fontSize = '12px';
+        btn.style.background = 'transparent';
+        btn.style.color = 'var(--ogrid-fg, #242424)';
+        btn.style.border = '1px solid var(--ogrid-border, #e0e0e0)';
+        btn.style.borderRadius = '4px';
+    }
+    cleanup() {
+        if (this.popoverEl) {
+            this.popoverEl.remove();
+            this.popoverEl = null;
+        }
+    }
+    destroy() {
+        this.cleanup();
+    }
+}