apex-grid 1.0.1 → 2.0.0

package/components/grid.js

@@ -0,0 +1,620 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { ContextProvider } from '@lit/context';
+import { html, nothing } from 'lit';
+import { eventOptions, property, query, queryAll, state } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+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, getColumnLabel, resolveExportColumns, resolveExportRows, resolveExportValue, } 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, getDisplayColumns, getFilterOperandsFor, } from '../internal/utils.js';
+import { watch } from '../internal/watch.js';
+import { buildXLSX } from '../internal/xlsx.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 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 {
+    static get tagName() {
+        return GRID_TAG;
+    }
+    static { this.styles = bootstrap; }
+    static register() {
+        registerComponent(ApexGrid, ApexVirtualizer, ApexGridRow, ApexGridHeaderRow, ApexFilterRow, ApexGridPaginator, ApexGridToolbar);
+    }
+    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) {
+            this.sort(expressions);
+        }
+    }
+    get sortExpressions() {
+        return Array.from(this.stateController.sorting.state.values());
+    }
+    set filterExpressions(expressions) {
+        if (expressions.length) {
+            this.filter(expressions);
+        }
+    }
+    get filterExpressions() {
+        const expressions = [];
+        for (const each of this.stateController.filtering.state.values) {
+            expressions.push(...each.all);
+        }
+        return expressions;
+    }
+    get rows() {
+        return Array.from(this._rows);
+    }
+    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() {
+        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([...this.data], this.stateController);
+        this.stateController.pagination.reclamp();
+    }
+    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();
+        }
+    }
+    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,
+        };
+        this.quickFilter = '';
+        this.showQuickFilter = false;
+        this.showExport = false;
+        this.columnReordering = false;
+        addThemingController(this, {
+            light: { bootstrap, material, fluent, indigo },
+            dark: { bootstrap, material, fluent, indigo },
+        });
+    }
+    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'
+            ?
+                Object.assign(each, {
+                    condition: getFilterOperandsFor(this.getColumn(each.key))[each.condition],
+                })
+            : each));
+    }
+    sort(expressions) {
+        this.stateController.sorting.sort(expressions);
+    }
+    clearSort(key) {
+        this.stateController.sorting.reset(key);
+        this.requestUpdate(PIPELINE);
+    }
+    clearFilter(key) {
+        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) {
+        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;
+    }
+    exportToXLSX(options = {}) {
+        const columns = resolveExportColumns(this, options);
+        const rows = resolveExportRows(this, options.source);
+        const includeHeader = options.includeHeader ?? true;
+        const sheet = {
+            name: options.sheetName ?? 'Sheet1',
+            headers: includeHeader ? columns.map((column) => getColumnLabel(column)) : [],
+            rows: rows.map((row) => columns.map((column) => resolveExportValue(column, row, options))),
+        };
+        const bytes = buildXLSX(sheet);
+        const filename = options.filename;
+        const mime = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
+        if (filename) {
+            downloadBlob(`${filename}.xlsx`, bytes, mime);
+        }
+        else if (filename === undefined) {
+            downloadBlob('data.xlsx', bytes, mime);
+        }
+        return bytes;
+    }
+    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) {
+            this.stateController.active = {
+                column: target.column.key,
+                row: target.row.index,
+            };
+        }
+    }
+    bodyKeydownHandler(event) {
+        if (this.scrollContainer.isSameNode(event.target)) {
+            this.stateController.navigation.navigate(event);
+        }
+    }
+    renderHeaderRow() {
+        return html `
+      <apex-grid-header-row
+      style=${styleMap(this.DOM.columnSizes)}
+      .columns=${this.DOM.displayColumns}
+      .pinOffsets=${this.DOM.pinOffsets}
+      ></apex-grid-header-row>
+    `;
+    }
+    renderBody() {
+        return html `
+      <apex-virtualizer
+        .items=${this.pageItems}
+        .renderItem=${this.DOM.rowRenderer}
+        @click=${this.bodyClickHandler}
+        @keydown=${this.bodyKeydownHandler}
+      ></apex-virtualizer>
+    `;
+    }
+    renderFilterRow() {
+        return this.columns.some((column) => column.filter)
+            ? 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)
+], ApexGrid.prototype, "scrollContainer", void 0);
+__decorate([
+    query(ApexGridHeaderRow.tagName)
+], ApexGrid.prototype, "headerRow", void 0);
+__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);
+__decorate([
+    queryAll(ApexGridRow.tagName)
+], ApexGrid.prototype, "_rows", void 0);
+__decorate([
+    property({ attribute: false })
+], ApexGrid.prototype, "columns", void 0);
+__decorate([
+    property({ attribute: false })
+], ApexGrid.prototype, "data", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'auto-generate' })
+], ApexGrid.prototype, "autoGenerate", void 0);
+__decorate([
+    property({ attribute: false })
+], ApexGrid.prototype, "sortConfiguration", void 0);
+__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);
+__decorate([
+    watch('data')
+], ApexGrid.prototype, "dataChanged", null);
+__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);
+//# sourceMappingURL=grid.js.map