@alaarab/ogrid-js 2.0.0-beta

package/dist/esm/components/InlineCellEditor.js

@@ -0,0 +1,278 @@
+import { getCellValue } from '@alaarab/ogrid-core';
+const EDITOR_STYLE = {
+    position: 'absolute',
+    zIndex: '1000',
+    boxSizing: 'border-box',
+    border: '2px solid #0078d4',
+    outline: 'none',
+    fontFamily: 'inherit',
+    fontSize: 'inherit',
+};
+export class InlineCellEditor {
+    constructor(container) {
+        this.editor = null;
+        this.editingCell = null;
+        this.onCommit = null;
+        this.onCancel = null;
+        this.container = container;
+    }
+    startEdit(rowId, columnId, item, column, cell, onCommit, onCancel) {
+        this.closeEditor();
+        this.editingCell = { rowId, columnId };
+        this.onCommit = onCommit;
+        this.onCancel = onCancel;
+        const value = getCellValue(item, column);
+        const rect = cell.getBoundingClientRect();
+        const containerRect = this.container.getBoundingClientRect();
+        const editor = this.createEditor(column, item, value, cell);
+        editor.style.position = 'absolute';
+        editor.style.left = `${rect.left - containerRect.left + this.container.scrollLeft}px`;
+        editor.style.top = `${rect.top - containerRect.top + this.container.scrollTop}px`;
+        editor.style.width = `${rect.width}px`;
+        editor.style.height = `${rect.height}px`;
+        this.editor = editor;
+        this.container.appendChild(editor);
+        editor.focus();
+    }
+    /** Returns the cell currently being edited, or null if no editor is open. */
+    getEditingCell() {
+        return this.editingCell;
+    }
+    closeEditor() {
+        if (this.editor) {
+            this.editor.remove();
+            this.editor = null;
+        }
+        this.editingCell = null;
+        this.onCommit = null;
+        this.onCancel = null;
+    }
+    createEditor(column, item, value, cell) {
+        const editorType = column.cellEditor;
+        if (typeof editorType === 'function') {
+            const context = {
+                value,
+                onValueChange: (newValue) => {
+                    if (this.editingCell) {
+                        this.onCommit?.(this.editingCell.rowId, this.editingCell.columnId, newValue);
+                    }
+                },
+                onCommit: () => this.closeEditor(),
+                onCancel: () => {
+                    this.onCancel?.();
+                    this.closeEditor();
+                },
+                item,
+                column,
+                cell,
+                cellEditorParams: column.cellEditorParams,
+            };
+            return editorType(context);
+        }
+        // Built-in editor types
+        if (editorType === 'checkbox' || column.type === 'boolean') {
+            return this.createCheckboxEditor(value);
+        }
+        if (editorType === 'select') {
+            return this.createSelectEditor(value, column);
+        }
+        if (editorType === 'richSelect') {
+            return this.createRichSelectEditor(value, column);
+        }
+        if (editorType === 'date' || column.type === 'date') {
+            return this.createDateEditor(value);
+        }
+        // Default: text editor
+        return this.createTextEditor(value);
+    }
+    createTextEditor(value) {
+        const input = document.createElement('input');
+        input.type = 'text';
+        input.value = value != null ? String(value) : '';
+        Object.assign(input.style, EDITOR_STYLE);
+        input.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                if (this.editingCell) {
+                    this.onCommit?.(this.editingCell.rowId, this.editingCell.columnId, input.value);
+                }
+                this.closeEditor();
+            }
+            else if (e.key === 'Escape') {
+                e.preventDefault();
+                this.onCancel?.();
+                this.closeEditor();
+            }
+        });
+        input.addEventListener('blur', () => {
+            if (this.editingCell) {
+                this.onCommit?.(this.editingCell.rowId, this.editingCell.columnId, input.value);
+            }
+            this.closeEditor();
+        });
+        setTimeout(() => input.select(), 0);
+        return input;
+    }
+    createCheckboxEditor(value) {
+        const input = document.createElement('input');
+        input.type = 'checkbox';
+        input.checked = Boolean(value);
+        Object.assign(input.style, EDITOR_STYLE);
+        input.style.width = '20px';
+        input.style.height = '20px';
+        input.addEventListener('change', () => {
+            if (this.editingCell) {
+                this.onCommit?.(this.editingCell.rowId, this.editingCell.columnId, input.checked);
+            }
+            this.closeEditor();
+        });
+        input.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                this.onCancel?.();
+                this.closeEditor();
+            }
+        });
+        return input;
+    }
+    createDateEditor(value) {
+        const input = document.createElement('input');
+        input.type = 'date';
+        if (value != null) {
+            const dateStr = String(value);
+            if (dateStr.match(/^\d{4}-\d{2}-\d{2}/)) {
+                input.value = dateStr.substring(0, 10);
+            }
+        }
+        Object.assign(input.style, EDITOR_STYLE);
+        input.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                if (this.editingCell) {
+                    this.onCommit?.(this.editingCell.rowId, this.editingCell.columnId, input.value);
+                }
+                this.closeEditor();
+            }
+            else if (e.key === 'Escape') {
+                e.preventDefault();
+                this.onCancel?.();
+                this.closeEditor();
+            }
+        });
+        input.addEventListener('blur', () => {
+            if (this.editingCell) {
+                this.onCommit?.(this.editingCell.rowId, this.editingCell.columnId, input.value);
+            }
+            this.closeEditor();
+        });
+        return input;
+    }
+    createSelectEditor(value, column) {
+        const select = document.createElement('select');
+        const values = column.cellEditorParams?.values ?? [];
+        for (const val of values) {
+            const option = document.createElement('option');
+            option.value = String(val);
+            option.textContent = String(val);
+            select.appendChild(option);
+        }
+        select.value = value != null ? String(value) : '';
+        Object.assign(select.style, EDITOR_STYLE);
+        select.addEventListener('change', () => {
+            if (this.editingCell) {
+                this.onCommit?.(this.editingCell.rowId, this.editingCell.columnId, select.value);
+            }
+            this.closeEditor();
+        });
+        select.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                this.onCancel?.();
+                this.closeEditor();
+            }
+        });
+        return select;
+    }
+    createRichSelectEditor(value, column) {
+        const wrapper = document.createElement('div');
+        Object.assign(wrapper.style, EDITOR_STYLE);
+        wrapper.style.padding = '0';
+        const input = document.createElement('input');
+        input.type = 'text';
+        input.value = value != null ? String(value) : '';
+        input.style.width = '100%';
+        input.style.border = 'none';
+        input.style.outline = 'none';
+        input.style.padding = '4px';
+        input.style.boxSizing = 'border-box';
+        wrapper.appendChild(input);
+        const dropdown = document.createElement('div');
+        dropdown.style.position = 'absolute';
+        dropdown.style.top = '100%';
+        dropdown.style.left = '0';
+        dropdown.style.width = '100%';
+        dropdown.style.maxHeight = '200px';
+        dropdown.style.overflowY = 'auto';
+        dropdown.style.backgroundColor = 'white';
+        dropdown.style.border = '1px solid #ccc';
+        dropdown.style.zIndex = '1001';
+        wrapper.appendChild(dropdown);
+        const values = column.cellEditorParams?.values ?? [];
+        const formatValue = column.cellEditorParams?.formatValue ?? ((v) => String(v));
+        const renderOptions = (filter) => {
+            dropdown.innerHTML = '';
+            const filtered = values.filter((v) => String(formatValue(v)).toLowerCase().includes(filter.toLowerCase()));
+            for (const val of filtered) {
+                const option = document.createElement('div');
+                option.textContent = String(formatValue(val));
+                option.style.padding = '4px 8px';
+                option.style.cursor = 'pointer';
+                option.addEventListener('mousedown', (e) => {
+                    e.preventDefault();
+                    if (this.editingCell) {
+                        this.onCommit?.(this.editingCell.rowId, this.editingCell.columnId, val);
+                    }
+                    this.closeEditor();
+                });
+                option.addEventListener('mouseenter', () => {
+                    option.style.backgroundColor = '#f0f0f0';
+                });
+                option.addEventListener('mouseleave', () => {
+                    option.style.backgroundColor = 'white';
+                });
+                dropdown.appendChild(option);
+            }
+        };
+        input.addEventListener('input', () => {
+            renderOptions(input.value);
+        });
+        input.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                if (this.editingCell) {
+                    this.onCommit?.(this.editingCell.rowId, this.editingCell.columnId, input.value);
+                }
+                this.closeEditor();
+            }
+            else if (e.key === 'Escape') {
+                e.preventDefault();
+                this.onCancel?.();
+                this.closeEditor();
+            }
+        });
+        input.addEventListener('blur', () => {
+            setTimeout(() => {
+                if (this.editingCell) {
+                    this.onCommit?.(this.editingCell.rowId, this.editingCell.columnId, input.value);
+                }
+                this.closeEditor();
+            }, 200);
+        });
+        renderOptions('');
+        setTimeout(() => input.select(), 0);
+        return wrapper;
+    }
+    destroy() {
+        this.closeEditor();
+    }
+}

package/dist/esm/components/MarchingAntsOverlay.js

@@ -0,0 +1,170 @@
+/** Inject the @keyframes rule once into <head> (deduplicates across multiple instances). */
+function ensureKeyframes() {
+    if (typeof document === 'undefined')
+        return;
+    if (document.getElementById('ogrid-marching-ants-keyframes'))
+        return;
+    const style = document.createElement('style');
+    style.id = 'ogrid-marching-ants-keyframes';
+    style.textContent =
+        '@keyframes ogrid-marching-ants{to{stroke-dashoffset:-8}}';
+    document.head.appendChild(style);
+}
+/** Measure the bounding rect of a range within a container. */
+function measureRange(container, range, colOffset) {
+    const startGlobalCol = range.startCol + colOffset;
+    const endGlobalCol = range.endCol + colOffset;
+    const topLeft = container.querySelector(`[data-row-index="${range.startRow}"][data-col-index="${startGlobalCol}"]`);
+    const bottomRight = container.querySelector(`[data-row-index="${range.endRow}"][data-col-index="${endGlobalCol}"]`);
+    if (!topLeft || !bottomRight)
+        return null;
+    const cRect = container.getBoundingClientRect();
+    const tlRect = topLeft.getBoundingClientRect();
+    const brRect = bottomRight.getBoundingClientRect();
+    return {
+        top: tlRect.top - cRect.top + container.scrollTop,
+        left: tlRect.left - cRect.left + container.scrollLeft,
+        width: brRect.right - tlRect.left,
+        height: brRect.bottom - tlRect.top,
+    };
+}
+function rangesEqual(a, b) {
+    if (a === b)
+        return true;
+    if (!a || !b)
+        return false;
+    return a.startRow === b.startRow && a.endRow === b.endRow &&
+        a.startCol === b.startCol && a.endCol === b.endCol;
+}
+/**
+ * MarchingAntsOverlay — renders SVG overlays on top of the grid:
+ * 1. Selection range: solid green border
+ * 2. Copy/Cut range: animated dashed border (marching ants)
+ *
+ * Vanilla JS equivalent of React's MarchingAntsOverlay component.
+ */
+export class MarchingAntsOverlay {
+    constructor(container, colOffset = 0) {
+        this.selSvg = null;
+        this.clipSvg = null;
+        this.selectionRange = null;
+        this.copyRange = null;
+        this.cutRange = null;
+        this.rafHandle = 0;
+        this.container = container;
+        this.colOffset = colOffset;
+        ensureKeyframes();
+        // The container must be positioned for absolute SVGs
+        const pos = getComputedStyle(container).position;
+        if (pos === 'static' || pos === '') {
+            container.style.position = 'relative';
+        }
+    }
+    update(selectionRange, copyRange, cutRange) {
+        // Skip if nothing changed
+        if (rangesEqual(this.selectionRange, selectionRange) &&
+            rangesEqual(this.copyRange, copyRange) &&
+            rangesEqual(this.cutRange, cutRange)) {
+            return;
+        }
+        this.selectionRange = selectionRange;
+        this.copyRange = copyRange;
+        this.cutRange = cutRange;
+        // Delay one frame so cells are rendered
+        if (this.rafHandle)
+            cancelAnimationFrame(this.rafHandle);
+        this.rafHandle = requestAnimationFrame(() => {
+            this.rafHandle = 0;
+            this.render();
+        });
+    }
+    render() {
+        const clipRange = this.copyRange ?? this.cutRange;
+        // Selection range SVG
+        const selRect = this.selectionRange
+            ? measureRange(this.container, this.selectionRange, this.colOffset)
+            : null;
+        // When clipboard range matches selection, hide selection border so marching ants show
+        const clipRangeMatchesSel = this.selectionRange != null &&
+            clipRange != null &&
+            rangesEqual(this.selectionRange, clipRange);
+        if (selRect && !clipRangeMatchesSel) {
+            if (!this.selSvg) {
+                this.selSvg = this.createSvg(4);
+                this.container.appendChild(this.selSvg);
+            }
+            this.positionSvg(this.selSvg, selRect);
+            const rect = this.selSvg.querySelector('rect');
+            if (rect) {
+                rect.setAttribute('width', String(Math.max(0, selRect.width - 2)));
+                rect.setAttribute('height', String(Math.max(0, selRect.height - 2)));
+                rect.setAttribute('stroke', 'var(--ogrid-selection, #217346)');
+                rect.setAttribute('stroke-width', '2');
+                rect.removeAttribute('stroke-dasharray');
+                rect.style.animation = '';
+            }
+        }
+        else {
+            this.removeSvg('sel');
+        }
+        // Copy/Cut range SVG (marching ants)
+        const clipRect = clipRange
+            ? measureRange(this.container, clipRange, this.colOffset)
+            : null;
+        if (clipRect) {
+            if (!this.clipSvg) {
+                this.clipSvg = this.createSvg(5);
+                this.container.appendChild(this.clipSvg);
+            }
+            this.positionSvg(this.clipSvg, clipRect);
+            const rect = this.clipSvg.querySelector('rect');
+            if (rect) {
+                rect.setAttribute('width', String(Math.max(0, clipRect.width - 2)));
+                rect.setAttribute('height', String(Math.max(0, clipRect.height - 2)));
+                rect.setAttribute('stroke', 'var(--ogrid-selection, #217346)');
+                rect.setAttribute('stroke-width', '2');
+                rect.setAttribute('stroke-dasharray', '4 4');
+                rect.style.animation = 'ogrid-marching-ants 0.5s linear infinite';
+            }
+        }
+        else {
+            this.removeSvg('clip');
+        }
+    }
+    createSvg(zIndex) {
+        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        svg.setAttribute('aria-hidden', 'true');
+        svg.style.position = 'absolute';
+        svg.style.pointerEvents = 'none';
+        svg.style.zIndex = String(zIndex);
+        svg.style.overflow = 'visible';
+        const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+        rect.setAttribute('x', '1');
+        rect.setAttribute('y', '1');
+        rect.setAttribute('fill', 'none');
+        svg.appendChild(rect);
+        return svg;
+    }
+    positionSvg(svg, rect) {
+        svg.style.top = `${rect.top}px`;
+        svg.style.left = `${rect.left}px`;
+        svg.style.width = `${rect.width}px`;
+        svg.style.height = `${rect.height}px`;
+    }
+    removeSvg(which) {
+        if (which === 'sel' && this.selSvg) {
+            this.selSvg.remove();
+            this.selSvg = null;
+        }
+        else if (which === 'clip' && this.clipSvg) {
+            this.clipSvg.remove();
+            this.clipSvg = null;
+        }
+    }
+    destroy() {
+        if (this.rafHandle)
+            cancelAnimationFrame(this.rafHandle);
+        this.removeSvg('sel');
+        this.removeSvg('clip');
+    }
+}

package/dist/esm/components/PaginationControls.js

@@ -0,0 +1,85 @@
+import { getPaginationViewModel } from '@alaarab/ogrid-core';
+export class PaginationControls {
+    constructor(container, state) {
+        this.el = null;
+        this.container = container;
+        this.state = state;
+    }
+    render(totalCount) {
+        if (this.el)
+            this.el.remove();
+        const vm = getPaginationViewModel(this.state.page, this.state.pageSize, totalCount);
+        if (!vm)
+            return; // No pagination if totalCount is 0
+        this.el = document.createElement('div');
+        this.el.className = 'ogrid-pagination';
+        // Page size selector
+        const pageSizeDiv = document.createElement('div');
+        pageSizeDiv.className = 'ogrid-pagination-size';
+        const label = document.createElement('span');
+        label.textContent = 'Rows per page: ';
+        pageSizeDiv.appendChild(label);
+        const select = document.createElement('select');
+        select.className = 'ogrid-page-size-select';
+        for (const size of vm.pageSizeOptions) {
+            const option = document.createElement('option');
+            option.value = String(size);
+            option.textContent = String(size);
+            option.selected = size === this.state.pageSize;
+            select.appendChild(option);
+        }
+        select.addEventListener('change', () => {
+            this.state.setPageSize(Number(select.value));
+        });
+        pageSizeDiv.appendChild(select);
+        this.el.appendChild(pageSizeDiv);
+        // Page info
+        const info = document.createElement('span');
+        info.className = 'ogrid-pagination-info';
+        info.textContent = `${vm.startItem}-${vm.endItem} of ${totalCount}`;
+        this.el.appendChild(info);
+        // Navigation buttons
+        const nav = document.createElement('div');
+        nav.className = 'ogrid-pagination-nav';
+        const prevBtn = document.createElement('button');
+        prevBtn.textContent = '\u25C0';
+        prevBtn.className = 'ogrid-pagination-btn';
+        prevBtn.disabled = this.state.page === 1;
+        prevBtn.addEventListener('click', () => this.state.setPage(this.state.page - 1));
+        nav.appendChild(prevBtn);
+        // Start ellipsis
+        if (vm.showStartEllipsis) {
+            const ellipsis = document.createElement('span');
+            ellipsis.textContent = '...';
+            ellipsis.className = 'ogrid-pagination-ellipsis';
+            nav.appendChild(ellipsis);
+        }
+        // Page number buttons
+        for (const pageNum of vm.pageNumbers) {
+            const btn = document.createElement('button');
+            btn.textContent = String(pageNum);
+            btn.className = 'ogrid-pagination-btn' + (pageNum === this.state.page ? ' ogrid-pagination-active' : '');
+            btn.addEventListener('click', () => this.state.setPage(pageNum));
+            nav.appendChild(btn);
+        }
+        // End ellipsis
+        if (vm.showEndEllipsis) {
+            const ellipsis = document.createElement('span');
+            ellipsis.textContent = '...';
+            ellipsis.className = 'ogrid-pagination-ellipsis';
+            nav.appendChild(ellipsis);
+        }
+        const nextBtn = document.createElement('button');
+        nextBtn.textContent = '\u25B6';
+        nextBtn.className = 'ogrid-pagination-btn';
+        nextBtn.disabled = this.state.page === vm.totalPages;
+        nextBtn.addEventListener('click', () => this.state.setPage(this.state.page + 1));
+        nav.appendChild(nextBtn);
+        this.el.appendChild(nav);
+        this.container.appendChild(this.el);
+    }
+    destroy() {
+        this.el?.remove();
+        this.el = null;
+    }
+}