apex-grid 1.1.0 → 3.0.0

package/components/grid.js

@@ -5,7 +5,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { ContextProvider } from '@lit/context';
-import { IgcButtonComponent, IgcChipComponent, IgcDropdownComponent, IgcInputComponent, } from 'igniteui-webcomponents';
 import { html, nothing } from 'lit';
 import { eventOptions, property, query, queryAll, state } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
@@ -13,28 +12,118 @@ import { DataOperationsController } from '../controllers/data-operation.js';
 import { GridDOMController } from '../controllers/dom.js';
 import { gridStateContext, StateController } from '../controllers/state.js';
 import { DEFAULT_COLUMN_CONFIG, PIPELINE } from '../internal/constants.js';
+import { buildCSV, downloadBlob, } from '../internal/export.js';
 import { EventEmitterBase } from '../internal/mixins/event-emitter.js';
 import { registerComponent } from '../internal/register.js';
 import { GRID_TAG } from '../internal/tags.js';
-import { addThemingController } from '../internal/theming.js';
-import { asArray, autoGenerateColumns, getFilterOperandsFor } from '../internal/utils.js';
+import { asArray, autoGenerateColumns, getDisplayColumns, getFilterOperandsFor, } from '../internal/utils.js';
 import { watch } from '../internal/watch.js';
-import { styles as bootstrap } from '../styles/grid/themes/light/grid.bootstrap.css.js';
-import { styles as fluent } from '../styles/grid/themes/light/grid.fluent.css.js';
-import { styles as indigo } from '../styles/grid/themes/light/grid.indigo.css.js';
-import { styles as material } from '../styles/grid/themes/light/grid.material.css.js';
+import { styles as gridStyles } from '../styles/grid/grid.css.js';
 import ApexGridCell from './cell.js';
 import ApexFilterRow from './filter-row.js';
 import ApexGridHeaderRow from './header-row.js';
+import ApexGridPaginator from './paginator.js';
 import ApexGridRow from './row.js';
+import ApexGridToolbar from './toolbar.js';
 import ApexVirtualizer from './virtualizer.js';
 export class ApexGrid extends EventEmitterBase {
+    constructor() {
+        super(...arguments);
+        this.stateController = this.createStateController();
+        this.DOM = new GridDOMController(this, this.stateController);
+        this.dataController = new DataOperationsController(this);
+        this.stateProvider = new ContextProvider(this, {
+            context: gridStateContext,
+            initialValue: this.stateController,
+        });
+        this.dataState = [];
+        this.columns = [];
+        this.data = [];
+        this.autoGenerate = false;
+        this.sortConfiguration = {
+            multiple: true,
+            triState: true,
+        };
+        this.quickFilter = '';
+        this.showQuickFilter = false;
+        this.showExport = false;
+        this.columnReordering = false;
+    }
     static get tagName() {
         return GRID_TAG;
     }
-    static { this.styles = bootstrap; }
+    static { this.styles = gridStyles; }
     static register() {
-        registerComponent(ApexGrid, ApexVirtualizer, ApexGridRow, ApexGridHeaderRow, ApexFilterRow, IgcButtonComponent, IgcChipComponent, IgcInputComponent, IgcDropdownComponent);
+        registerComponent(ApexGrid, ApexVirtualizer, ApexGridRow, ApexGridHeaderRow, ApexFilterRow, ApexGridPaginator, ApexGridToolbar);
+    }
+    createStateController() {
+        return new StateController(this);
+    }
+    get selectedRows() {
+        return this.stateController.selection.selectedRows();
+    }
+    set selectedRows(rows) {
+        void this.stateController.selection.replaceSelection(rows);
+    }
+    selectRow(row) {
+        return this.stateController.selection.selectRow(row);
+    }
+    deselectRow(row) {
+        return this.stateController.selection.deselectRow(row);
+    }
+    toggleRowSelection(row) {
+        return this.stateController.selection.toggleRow(row);
+    }
+    selectAllRows() {
+        return this.stateController.selection.selectAll();
+    }
+    clearSelection() {
+        return this.stateController.selection.clear();
+    }
+    isRowSelected(row) {
+        return this.stateController.selection.isSelected(row);
+    }
+    get expandedRows() {
+        return this.stateController.expansion.expandedRows();
+    }
+    set expandedRows(rows) {
+        void this.stateController.expansion.replaceExpansion(rows);
+    }
+    expandRow(row) {
+        return this.stateController.expansion.expandRow(row);
+    }
+    collapseRow(row) {
+        return this.stateController.expansion.collapseRow(row);
+    }
+    toggleRowExpansion(row) {
+        return this.stateController.expansion.toggleRow(row);
+    }
+    expandAllRows() {
+        return this.stateController.expansion.expandAll();
+    }
+    collapseAllRows() {
+        return this.stateController.expansion.collapseAll();
+    }
+    isRowExpanded(row) {
+        return this.stateController.expansion.isExpanded(row);
+    }
+    toggleTreeRow(row) {
+        return this.stateController.tree.toggleRow(row);
+    }
+    expandTreeRow(row) {
+        return this.stateController.tree.expandRow(row);
+    }
+    collapseTreeRow(row) {
+        return this.stateController.tree.collapseRow(row);
+    }
+    expandAllTreeRows() {
+        return this.stateController.tree.expandAll();
+    }
+    collapseAllTreeRows() {
+        return this.stateController.tree.collapseAll();
+    }
+    isTreeRowExpanded(row) {
+        return this.stateController.tree.isExpanded(row);
     }
     set sortExpressions(expressions) {
         if (expressions.length) {
@@ -62,43 +151,97 @@ export class ApexGrid extends EventEmitterBase {
     get dataView() {
         return this.dataState;
     }
+    get displayColumns() {
+        return getDisplayColumns(this.columns);
+    }
     get totalItems() {
+        if (this.pagination?.mode === 'remote') {
+            return Math.max(0, this.pagination?.totalItems ?? 0);
+        }
         return this.dataState.length;
     }
+    get pageItems() {
+        if (!this.stateController.pagination.enabled)
+            return this.dataState;
+        if (this.pagination?.mode === 'remote')
+            return this.dataState;
+        const { page, pageSize } = this.stateController.pagination;
+        if (!pageSize)
+            return this.dataState;
+        const start = page * pageSize;
+        return this.dataState.slice(start, start + pageSize);
+    }
+    get page() {
+        return this.stateController.pagination.page;
+    }
+    set page(value) {
+        this.stateController.pagination.gotoPage(value);
+    }
+    get pageSize() {
+        return this.stateController.pagination.pageSize;
+    }
+    set pageSize(value) {
+        this.stateController.pagination.setPageSize(value);
+    }
+    get pageCount() {
+        return this.stateController.pagination.pageCount;
+    }
     watchColumns(_, newConfig = []) {
         this.columns = newConfig.map((config) => ({ ...DEFAULT_COLUMN_CONFIG, ...config }));
     }
     dataChanged() {
-        this.dataState = structuredClone(this.data);
+        let next = [...this.data];
         autoGenerateColumns(this);
+        this.stateController?.tree?.resetForDataChange();
+        if (this.stateController?.tree?.enabled) {
+            next = this.stateController.tree.process(next);
+        }
+        this.dataState = next;
         if (this.hasUpdated) {
             this.pipeline();
         }
     }
     async pipeline() {
-        this.dataState = await this.dataController.apply(structuredClone(this.data), this.stateController);
+        this.dataState = await this.dataController.apply([...this.data], this.stateController);
+        this.stateController.pagination.reclamp();
     }
-    constructor() {
-        super();
-        this.stateController = new StateController(this);
-        this.DOM = new GridDOMController(this, this.stateController);
-        this.dataController = new DataOperationsController(this);
-        this.stateProvider = new ContextProvider(this, {
-            context: gridStateContext,
-            initialValue: this.stateController,
-        });
-        this.dataState = [];
-        this.columns = [];
-        this.data = [];
-        this.autoGenerate = false;
-        this.sortConfiguration = {
-            multiple: true,
-            triState: true,
-        };
-        addThemingController(this, {
-            light: { bootstrap, material, fluent, indigo },
-            dark: { bootstrap, material, fluent, indigo },
-        });
+    paginationChanged() {
+        const ctrl = this.stateController?.pagination;
+        if (!ctrl)
+            return;
+        const next = this.pagination ?? {};
+        if (typeof next.pageSize === 'number' && next.pageSize > 0) {
+            ctrl.pageSize = next.pageSize;
+        }
+        if (typeof next.page === 'number') {
+            ctrl.page = next.page;
+        }
+        if (this.hasUpdated) {
+            this.pipeline();
+        }
+    }
+    quickFilterChanged() {
+        if (this.hasUpdated) {
+            this.pipeline();
+        }
+    }
+    updated() {
+        this.setAttribute('role', this.stateController.tree.enabled ? 'treegrid' : 'grid');
+        const hasFilter = this.columns.some((column) => column.filter);
+        const headerRows = hasFilter ? 2 : 1;
+        this.setAttribute('aria-rowcount', String(headerRows + this.pageItems.length));
+        const visibleColumns = this.columns.filter((column) => !column.hidden).length;
+        const extras = (this.stateController.selection.showCheckboxColumn ? 1 : 0) +
+            (this.stateController.expansion.showToggleColumn ? 1 : 0);
+        this.setAttribute('aria-colcount', String(visibleColumns + extras));
+    }
+    firstUpdated() {
+        if (typeof getComputedStyle === 'function' && getComputedStyle(this).display !== 'grid') {
+            console.warn('[apex-grid] Host `display` has been overridden. The grid requires ' +
+                '`display: grid` for its internal track layout and will not render correctly. ' +
+                'Remove any CSS rule that sets `display` on <apex-grid>. ' +
+                'See: https://github.com/apexcharts/apexgrid#4-size-the-host');
+        }
     }
     filter(config) {
         this.stateController.filtering.filter(asArray(config).map((each) => typeof each.condition === 'string'
@@ -119,20 +262,165 @@ export class ApexGrid extends EventEmitterBase {
         this.stateController.filtering.reset(key);
         this.requestUpdate(PIPELINE);
     }
+    gotoPage(page) {
+        return this.stateController.pagination.gotoPage(page);
+    }
+    setPageSize(size) {
+        return this.stateController.pagination.setPageSize(size);
+    }
+    nextPage() {
+        return this.stateController.pagination.nextPage();
+    }
+    previousPage() {
+        return this.stateController.pagination.previousPage();
+    }
+    firstPage() {
+        return this.stateController.pagination.firstPage();
+    }
+    lastPage() {
+        return this.stateController.pagination.lastPage();
+    }
+    async setQuickFilter(value) {
+        const next = value ?? '';
+        if (next === this.quickFilter)
+            return false;
+        const proceed = this.emitEvent('quickFilterChanging', {
+            detail: { value: this.quickFilter, nextValue: next },
+            cancelable: true,
+        });
+        if (!proceed)
+            return false;
+        this.quickFilter = next;
+        this.stateController.pagination.page = 0;
+        await this.updateComplete;
+        this.emitEvent('quickFilterChanged', { detail: { value: this.quickFilter } });
+        return true;
+    }
     getColumn(id) {
         return typeof id === 'number'
             ? this.columns.at(id)
             : this.columns.find(({ key }) => key === id);
     }
     updateColumns(columns) {
-        for (const column of asArray(columns)) {
-            const instance = this.columns.find((curr) => curr.key === column.key);
-            if (instance) {
-                Object.assign(instance, column);
-            }
-        }
+        const updates = new Map(asArray(columns).map((c) => [c.key, c]));
+        if (updates.size === 0)
+            return;
+        let touched = false;
+        const next = this.columns.map((column) => {
+            const patch = updates.get(column.key);
+            if (!patch)
+                return column;
+            touched = true;
+            return { ...column, ...patch };
+        });
+        if (!touched)
+            return;
+        this.columns = next;
         this.requestUpdate(PIPELINE);
     }
+    async pinColumn(key, position) {
+        const column = this.getColumn(key);
+        if (!column)
+            return false;
+        const previous = column.pinned ?? null;
+        const next = position ?? null;
+        if (previous === next)
+            return false;
+        const proceed = this.emitEvent('columnPinning', {
+            detail: { key, previous, next },
+            cancelable: true,
+        });
+        if (!proceed)
+            return false;
+        column.pinned = next ?? undefined;
+        this.columns = [...this.columns];
+        await this.updateComplete;
+        this.emitEvent('columnPinned', { detail: { key, pinned: next } });
+        return true;
+    }
+    unpinColumn(key) {
+        return this.pinColumn(key, null);
+    }
+    get editingCell() {
+        const active = this.stateController.editing.activeCell;
+        return active ? { rowIndex: active.rowIndex, columnKey: active.columnKey } : null;
+    }
+    get editingRow() {
+        return this.stateController.editing.activeRow?.rowIndex ?? null;
+    }
+    editCell(rowIndex, columnKey) {
+        return this.stateController.editing.editCell(rowIndex, columnKey);
+    }
+    editRow(rowIndex) {
+        return this.stateController.editing.editRow(rowIndex);
+    }
+    commitEdit() {
+        const editing = this.stateController.editing;
+        return editing.mode === 'row' ? editing.commitRow() : editing.commitCell();
+    }
+    cancelEdit() {
+        const editing = this.stateController.editing;
+        if (editing.mode === 'row') {
+            editing.cancelRow();
+        }
+        else {
+            editing.cancelCell();
+        }
+    }
+    exportToCSV(options = {}) {
+        const csv = buildCSV(this, options);
+        const filename = options.filename;
+        if (filename) {
+            downloadBlob(`${filename}.csv`, csv, 'text/csv;charset=utf-8;');
+        }
+        else if (filename === undefined) {
+            downloadBlob('data.csv', csv, 'text/csv;charset=utf-8;');
+        }
+        return csv;
+    }
+    get exportFormats() {
+        return [{ id: 'csv', label: 'Export CSV' }];
+    }
+    exportAs(formatId, options = {}) {
+        if (formatId === 'csv') {
+            this.exportToCSV(options);
+        }
+    }
+    async moveColumn(fromKey, toKey, position = 'before') {
+        if (fromKey === toKey)
+            return false;
+        const fromIndex = this.columns.findIndex((column) => column.key === fromKey);
+        const toIndex = this.columns.findIndex((column) => column.key === toKey);
+        if (fromIndex < 0 || toIndex < 0)
+            return false;
+        const source = this.columns[fromIndex];
+        const target = this.columns[toIndex];
+        if ((source.pinned ?? null) !== (target.pinned ?? null))
+            return false;
+        const proceed = this.emitEvent('columnMoving', {
+            detail: { key: fromKey, fromIndex, toKey, position },
+            cancelable: true,
+        });
+        if (!proceed)
+            return false;
+        const next = this.columns.slice();
+        const [moved] = next.splice(fromIndex, 1);
+        let insertIndex = next.findIndex((column) => column.key === toKey);
+        if (insertIndex < 0)
+            return false;
+        if (position === 'after')
+            insertIndex += 1;
+        next.splice(insertIndex, 0, moved);
+        if (next.every((column, index) => column === this.columns[index]))
+            return false;
+        this.columns = next;
+        await this.updateComplete;
+        const resolvedIndex = this.columns.findIndex((column) => column.key === fromKey);
+        this.emitEvent('columnMoved', {
+            detail: { key: fromKey, fromIndex, toIndex: resolvedIndex },
+        });
+        return true;
+    }
     bodyClickHandler(event) {
         const target = event.composedPath().find((el) => el instanceof ApexGridCell);
         if (target) {
@@ -151,14 +439,15 @@ export class ApexGrid extends EventEmitterBase {
         return html `
       <apex-grid-header-row
       style=${styleMap(this.DOM.columnSizes)}
-      .columns=${this.columns}
+      .columns=${this.DOM.displayColumns}
+      .pinOffsets=${this.DOM.pinOffsets}
       ></apex-grid-header-row>
     `;
     }
     renderBody() {
         return html `
       <apex-virtualizer
-        .items=${this.dataState}
+        .items=${this.pageItems}
         .renderItem=${this.DOM.rowRenderer}
         @click=${this.bodyClickHandler}
         @keydown=${this.bodyKeydownHandler}
@@ -170,14 +459,52 @@ export class ApexGrid extends EventEmitterBase {
             ? html `<apex-filter-row style=${styleMap(this.DOM.columnSizes)}></apex-filter-row>`
             : nothing;
     }
+    renderToolbar() {
+        if (!this.showQuickFilter && !this.showExport)
+            return nothing;
+        return html `<apex-grid-toolbar
+      .value=${this.quickFilter}
+      .showQuickFilter=${this.showQuickFilter}
+      .showExport=${this.showExport}
+      @apex-quick-filter=${(event) => {
+            event.stopPropagation();
+            this.setQuickFilter(event.detail);
+        }}
+    ></apex-grid-toolbar>`;
+    }
+    renderPaginator() {
+        if (!this.stateController.pagination.enabled)
+            return nothing;
+        const options = this.pagination?.pageSizeOptions && this.pagination.pageSizeOptions.length > 0
+            ? this.pagination.pageSizeOptions
+            : [10, 25, 50, 100];
+        return html `<apex-grid-paginator .pageSizeOptions=${options}></apex-grid-paginator>`;
+    }
+    renderLiveRegion() {
+        return html `<div
+      part="live-region"
+      role="status"
+      aria-live="polite"
+      aria-atomic="true"
+      style="position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;"
+    >
+      ${this.stateController.announcement}
+    </div>`;
+    }
     render() {
         return html `
       ${this.stateController.resizing.renderIndicator()}
+      ${this.renderToolbar()}
       ${this.renderHeaderRow()}
       ${this.renderFilterRow()}
       ${this.renderBody()}
+      ${this.renderPaginator()}
+      ${this.renderLiveRegion()}
     `;
     }
+    announce(message) {
+        this.stateController.setAnnouncement(message);
+    }
 }
 __decorate([
     query(ApexVirtualizer.tagName)
@@ -188,6 +515,12 @@ __decorate([
 __decorate([
     query(ApexFilterRow.tagName)
 ], ApexGrid.prototype, "filterRow", void 0);
+__decorate([
+    query(ApexGridPaginator.tagName)
+], ApexGrid.prototype, "paginator", void 0);
+__decorate([
+    query(ApexGridToolbar.tagName)
+], ApexGrid.prototype, "toolbar", void 0);
 __decorate([
     state()
 ], ApexGrid.prototype, "dataState", void 0);
@@ -209,12 +542,45 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], ApexGrid.prototype, "dataPipelineConfiguration", void 0);
+__decorate([
+    property({ attribute: false })
+], ApexGrid.prototype, "pagination", void 0);
+__decorate([
+    property({ type: String, attribute: 'quick-filter' })
+], ApexGrid.prototype, "quickFilter", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-quick-filter' })
+], ApexGrid.prototype, "showQuickFilter", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-export' })
+], ApexGrid.prototype, "showExport", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'column-reordering' })
+], ApexGrid.prototype, "columnReordering", void 0);
+__decorate([
+    property({ attribute: false })
+], ApexGrid.prototype, "editing", void 0);
+__decorate([
+    property({ attribute: false })
+], ApexGrid.prototype, "selection", void 0);
+__decorate([
+    property({ attribute: false })
+], ApexGrid.prototype, "expansion", void 0);
+__decorate([
+    property({ attribute: false })
+], ApexGrid.prototype, "tree", void 0);
 __decorate([
     property({ attribute: false })
 ], ApexGrid.prototype, "sortExpressions", null);
 __decorate([
     property({ attribute: false })
 ], ApexGrid.prototype, "filterExpressions", null);
+__decorate([
+    property({ attribute: false })
+], ApexGrid.prototype, "page", null);
+__decorate([
+    property({ attribute: false })
+], ApexGrid.prototype, "pageSize", null);
 __decorate([
     watch('columns')
 ], ApexGrid.prototype, "watchColumns", null);
@@ -224,6 +590,12 @@ __decorate([
 __decorate([
     watch(PIPELINE)
 ], ApexGrid.prototype, "pipeline", null);
+__decorate([
+    watch('pagination')
+], ApexGrid.prototype, "paginationChanged", null);
+__decorate([
+    watch('quickFilter')
+], ApexGrid.prototype, "quickFilterChanged", null);
 __decorate([
     eventOptions({ capture: true })
 ], ApexGrid.prototype, "bodyClickHandler", null);