vgapp 1.2.5 → 1.3.0

package/app/modules/vgdynamictable/js/skeleton.js

@@ -0,0 +1,136 @@
+const skeletonMethods = {
+    _renderLoadingSkeleton() {
+        const body = this._getBody();
+        const columns = this._getRenderedColumnsCount();
+        const columnWidths = this._getCurrentColumnWidthsPx();
+        const rowsCount = this._getSkeletonRowsCount();
+        const rowHeight = this._getSkeletonRowHeightPx();
+        const rowHeightStyle = Number.isFinite(rowHeight) && rowHeight > 0
+            ? `height:${rowHeight}px;--vgdt-skeleton-row-height:${rowHeight}px;`
+            : '';
+
+        const rowHtml = Array.from({ length: rowsCount }).map((_, rowIndex) => {
+            const cells = Array.from({ length: columns }).map((_, columnIndex) => {
+                const width = Number.isFinite(columnWidths[columnIndex]) ? Math.round(columnWidths[columnIndex]) : 0;
+                const widthStyle = width > 0
+                    ? ` style="width:${width}px;min-width:${width}px;max-width:${width}px;"`
+                    : '';
+                return `<td${widthStyle}><div class="skeleton-cell"><div class="skeleton-line"></div></div></td>`;
+            }).join('');
+            return `<tr class="skeleton-row" style="${rowHeightStyle}--skeleton-delay:${(rowIndex * 0.08).toFixed(2)}s">${cells}</tr>`;
+        }).join('');
+
+        body.innerHTML = rowHtml;
+        this._updatePanHintVisibility();
+        this._refreshStickyAndFixedLayout();
+    },
+
+    _getRenderedColumnsCount() {
+        const headerCount = this._getHeaderCells().length;
+        const fieldsCount = this._fields.length;
+        const resolved = Math.max(headerCount, fieldsCount);
+        return resolved > 0 ? resolved : 1;
+    },
+
+    _getCurrentColumnWidthsPx() {
+        const headers = this._getHeaderCells();
+        const headerWidths = headers.map((header) => {
+            if (!header || typeof header.getBoundingClientRect !== 'function') {
+                return 0;
+            }
+            const rect = header.getBoundingClientRect();
+            return rect && Number.isFinite(rect.width) && rect.width > 0 ? rect.width : 0;
+        });
+
+        if (headerWidths.some((width) => width > 0)) {
+            return headerWidths;
+        }
+
+        const body = this._getBody();
+        const firstRow = body && body.rows && body.rows.length ? body.rows[0] : null;
+        if (!firstRow || !firstRow.cells || !firstRow.cells.length) {
+            return [];
+        }
+
+        return Array.from(firstRow.cells).map((cell) => {
+            if (!cell || typeof cell.getBoundingClientRect !== 'function') {
+                return 0;
+            }
+            const rect = cell.getBoundingClientRect();
+            return rect && Number.isFinite(rect.width) && rect.width > 0 ? rect.width : 0;
+        });
+    },
+
+    _getSkeletonRowsCount() {
+        const fromPerPageControl = this._getPerPageControlValue();
+        if (Number.isFinite(fromPerPageControl) && fromPerPageControl > 0) {
+            return fromPerPageControl;
+        }
+
+        const loadingOptions = this._params.loading || {};
+        const explicit = Number.parseInt(loadingOptions.skeleton, 10);
+        if (Number.isFinite(explicit) && explicit > 0) {
+            return explicit;
+        }
+
+        const renderedRows = this._getRenderedDataRows();
+        if (renderedRows.length > 0) {
+            return renderedRows.length;
+        }
+
+        const fromState = Number.parseInt(this._pageState && this._pageState.perPage, 10);
+        if (Number.isFinite(fromState) && fromState > 0) {
+            return fromState;
+        }
+
+        const pagination = this._params.pagination || {};
+        const fromParams = Number.parseInt(pagination.perPage, 10);
+        if (Number.isFinite(fromParams) && fromParams > 0) {
+            return fromParams;
+        }
+
+        return 10;
+    },
+
+    _getPerPageControlValue() {
+        if (!this._parent) {
+            return NaN;
+        }
+        const perPageControl = this._parent.querySelector('[data-per-page]');
+        if (!perPageControl) {
+            return NaN;
+        }
+        const value = Number.parseInt(perPageControl.value, 10);
+        return Number.isFinite(value) ? this._clampPerPage(value, 10) : NaN;
+    },
+
+    _getSkeletonRowHeightPx() {
+        const renderedRows = this._getRenderedDataRows();
+        if (!renderedRows.length) {
+            return null;
+        }
+
+        const firstRow = renderedRows[0];
+        const rect = firstRow.getBoundingClientRect();
+        if (!rect || !Number.isFinite(rect.height) || rect.height <= 0) {
+            return null;
+        }
+
+        return Math.round(rect.height);
+    },
+
+    _getRenderedDataRows() {
+        const body = this._getBody();
+        return Array.from(body.rows || []).filter((row) => {
+            if (!row || row.classList.contains('skeleton-row')) {
+                return false;
+            }
+            if (row.querySelector('[data-table-state]')) {
+                return false;
+            }
+            return true;
+        });
+    },
+};
+
+export default skeletonMethods;

package/app/modules/vgdynamictable/js/sortable.js

@@ -0,0 +1,442 @@
+class Sortable {
+    constructor(table, options = {}) {
+        this._table = table;
+        this._options = Object.assign({
+            initialField: '',
+            initialDir: 'asc',
+            directions: ['asc', 'desc'],
+            ascLabel: 'Сортировка по возрастанию',
+            descLabel: 'Сортировка по убыванию',
+            isColumnSortable: null,
+            onChange: null,
+            multiSort: false,
+            multiSortWithShift: true,
+            hideUnsortedArrows: false,
+        }, options);
+
+        this._headers = [];
+        this._sorts = [];
+        this._headerControls = new WeakMap();
+        this._boundClick = this._handleClick.bind(this);
+        this._boundKeyDown = this._handleKeyDown.bind(this);
+    }
+
+    init() {
+        this._headers = this._getHeaders();
+        if (!this._headers.length) {
+            return;
+        }
+        this._syncControlsVisibilityMode();
+
+        this._headers.forEach((header, index) => {
+            if (!this._isSortable(header, index)) {
+                header.setAttribute('aria-sort', 'none');
+                return;
+            }
+
+            header.dataset.sortable = '1';
+            header.tabIndex = 0;
+            header.setAttribute('role', 'button');
+            header.setAttribute('aria-sort', 'none');
+            this._decorateHeader(header);
+        });
+
+        this._table.addEventListener('click', this._boundClick);
+        this._table.addEventListener('keydown', this._boundKeyDown);
+        this._applyInitialState();
+    }
+
+    setState(payload = {}) {
+        if (Array.isArray(payload.sorts)) {
+            const normalized = this._normalizeSorts(payload.sorts);
+            this._setSorts(normalized, false);
+            return;
+        }
+
+        const index = this._resolveIndex(payload);
+        if (index < 0) {
+            this._setSorts([], false);
+            return;
+        }
+        if (!this._isSortable(this._headers[index], index)) {
+            return;
+        }
+        this._setSorts([{ index, dir: this._normalizeDir(payload.dir) }], false);
+    }
+
+    refresh(payload = {}) {
+        this._headers = this._getHeaders();
+        if (!this._headers.length) {
+            return;
+        }
+        this._syncControlsVisibilityMode();
+
+        this._headers.forEach((header, index) => {
+            if (!this._isSortable(header, index)) {
+                header.removeAttribute('data-sortable');
+                header.removeAttribute('data-sort-direction');
+                header.removeAttribute('data-sort-priority');
+                header.setAttribute('aria-sort', 'none');
+                return;
+            }
+
+            header.dataset.sortable = '1';
+            header.tabIndex = 0;
+            header.setAttribute('role', 'button');
+            if (!header.hasAttribute('aria-sort')) {
+                header.setAttribute('aria-sort', 'none');
+            }
+            this._decorateHeader(header);
+        });
+
+        if (Array.isArray(payload.sorts)) {
+            this._setSorts(this._normalizeSorts(payload.sorts), false);
+            return;
+        }
+
+        this._setSorts(this._normalizeSorts(this._sorts), false);
+    }
+
+    _applyInitialState() {
+        const index = this._resolveIndex({
+            field: this._options.initialField,
+            columnIndex: -1,
+        });
+        if (index < 0 || !this._isSortable(this._headers[index], index)) {
+            this._setSorts([], false);
+            return;
+        }
+        this._setSorts([{ index, dir: this._normalizeDir(this._options.initialDir) }], false);
+    }
+
+    _getHeaders() {
+        const head = this._table.tHead || this._table.querySelector('thead');
+        if (!head || !head.rows.length) {
+            return [];
+        }
+        return Array.from(head.rows[0].cells);
+    }
+
+    _isSortable(header, index) {
+        if (typeof this._options.isColumnSortable === 'function') {
+            return Boolean(this._options.isColumnSortable(header, index));
+        }
+        return true;
+    }
+
+    _handleClick(event) {
+        const header = event.target.closest('th');
+        if (!header || !this._table.contains(header)) {
+            return;
+        }
+
+        const index = this._headers.indexOf(header);
+        if (index < 0 || !this._isSortable(header, index)) {
+            return;
+        }
+
+        const arrow = event.target.closest('[data-sort-arrow]');
+        const multiMode = this._isMultiMode(event);
+        if (arrow && header.contains(arrow)) {
+            const dir = this._normalizeDir(arrow.getAttribute('data-sort-arrow'));
+            this._applyColumnDirection(index, dir, multiMode, true);
+            return;
+        }
+
+        this._cycleColumn(index, multiMode);
+    }
+
+    _handleKeyDown(event) {
+        if (event.key !== 'Enter' && event.key !== ' ') {
+            return;
+        }
+
+        const header = event.target.closest('th');
+        if (!header || !this._table.contains(header)) {
+            return;
+        }
+
+        const index = this._headers.indexOf(header);
+        if (index < 0 || !this._isSortable(header, index)) {
+            return;
+        }
+
+        event.preventDefault();
+        this._cycleColumn(index, this._isMultiMode(event));
+    }
+
+    _isMultiMode(event) {
+        if (!this._options.multiSort) {
+            return false;
+        }
+        if (!this._options.multiSortWithShift) {
+            return true;
+        }
+        return Boolean(event && event.shiftKey);
+    }
+
+    _cycleColumn(index, multiMode) {
+        const current = this._sorts.find((item) => item.index === index) || null;
+        const directions = this._getDirections();
+        const firstDir = directions[0];
+        const secondDir = directions[1] || firstDir;
+
+        if (!current) {
+            this._applyColumnDirection(index, firstDir, multiMode, true);
+            return;
+        }
+        if (current.dir === firstDir) {
+            this._applyColumnDirection(index, secondDir, multiMode, true);
+            return;
+        }
+        this._removeColumnDirection(index, multiMode, true);
+    }
+
+    _applyColumnDirection(index, dir, multiMode, emit) {
+        let next = this._sorts.slice();
+        next = next.filter((item) => item.index !== index);
+        if (!multiMode) {
+            next = [];
+        }
+        next.push({ index, dir: this._normalizeDir(dir) });
+        this._setSorts(next, emit);
+    }
+
+    _removeColumnDirection(index, multiMode, emit) {
+        let next = this._sorts.slice();
+        next = next.filter((item) => item.index !== index);
+        if (!multiMode) {
+            next = [];
+        }
+        this._setSorts(next, emit);
+    }
+
+    _setSorts(nextSorts, emit) {
+        this._sorts = this._normalizeSorts(nextSorts);
+        const sortByIndex = new Map();
+        this._sorts.forEach((item, index) => {
+            sortByIndex.set(item.index, {
+                dir: item.dir,
+                priority: index + 1,
+            });
+        });
+
+        this._headers.forEach((header, headerIndex) => {
+            const sort = sortByIndex.has(headerIndex) ? sortByIndex.get(headerIndex) : null;
+            if (!this._isSortable(header, headerIndex)) {
+                header.removeAttribute('data-sort-direction');
+                header.removeAttribute('data-sort-priority');
+                header.setAttribute('aria-sort', 'none');
+                return;
+            }
+
+            const controls = this._getHeaderControls(header);
+            const controlsNode = controls.controlsNode;
+            const ascButton = controls.ascButton;
+            const descButton = controls.descButton;
+            const shouldHideControls = Boolean(this._options.hideUnsortedArrows && !sort);
+
+            if (controlsNode) {
+                controlsNode.hidden = shouldHideControls;
+            }
+
+            if (sort) {
+                header.dataset.sortDirection = sort.dir;
+                header.dataset.sortPriority = String(sort.priority);
+                header.setAttribute('aria-sort', sort.dir === 'asc' ? 'ascending' : 'descending');
+                if (ascButton) ascButton.setAttribute('aria-pressed', sort.dir === 'asc' ? 'true' : 'false');
+                if (descButton) descButton.setAttribute('aria-pressed', sort.dir === 'desc' ? 'true' : 'false');
+            } else {
+                header.removeAttribute('data-sort-direction');
+                header.removeAttribute('data-sort-priority');
+                header.setAttribute('aria-sort', 'none');
+                if (ascButton) ascButton.setAttribute('aria-pressed', 'false');
+                if (descButton) descButton.setAttribute('aria-pressed', 'false');
+            }
+        });
+        this._syncSortedColumnsHighlight();
+
+        if (!emit || typeof this._options.onChange !== 'function') {
+            return;
+        }
+
+        const first = this._sorts[0] || null;
+        this._options.onChange({
+            field: first ? this._getFieldByIndex(first.index) : '',
+            dir: first ? first.dir : this._normalizeDir(this._options.initialDir),
+            columnIndex: first ? first.index : -1,
+            sorts: this._sorts.map((item) => ({
+                field: this._getFieldByIndex(item.index),
+                dir: item.dir,
+                columnIndex: item.index,
+            })),
+        });
+    }
+
+    _normalizeSorts(items) {
+        const unique = [];
+        const seen = new Set();
+        (Array.isArray(items) ? items : []).forEach((item) => {
+            const index = Number.parseInt(item.index ?? item.columnIndex, 10);
+            if (!Number.isInteger(index) || index < 0 || index >= this._headers.length) {
+                return;
+            }
+            if (!this._isSortable(this._headers[index], index)) {
+                return;
+            }
+            if (seen.has(index)) {
+                return;
+            }
+            seen.add(index);
+            unique.push({
+                index,
+                dir: this._normalizeDir(item.dir),
+            });
+        });
+        return unique;
+    }
+
+    _syncSortedColumnsHighlight() {
+        const rows = this._getAllRows();
+        if (!rows.length) {
+            return;
+        }
+
+        rows.forEach((row) => {
+            Array.from(row.cells || []).forEach((cell) => {
+                cell.removeAttribute('data-sorted-column');
+                cell.removeAttribute('data-sorted-priority');
+            });
+        });
+
+        this._sorts.forEach((sort, index) => {
+            rows.forEach((row) => {
+                const cell = row.cells && row.cells[sort.index] ? row.cells[sort.index] : null;
+                if (!cell) {
+                    return;
+                }
+                cell.setAttribute('data-sorted-column', '1');
+                cell.setAttribute('data-sorted-priority', String(index + 1));
+            });
+        });
+    }
+
+    _getAllRows() {
+        const rows = [];
+        const sections = ['tHead', 'tBodies', 'tFoot'];
+
+        sections.forEach((section) => {
+            const value = this._table[section];
+            if (!value) {
+                return;
+            }
+            if (section === 'tBodies') {
+                Array.from(value).forEach((body) => {
+                    rows.push(...Array.from(body.rows || []));
+                });
+                return;
+            }
+            rows.push(...Array.from(value.rows || []));
+        });
+
+        return rows;
+    }
+
+    _decorateHeader(header) {
+        if (header.querySelector('.vgdt-sort-controls')) {
+            this._headerControls.delete(header);
+            return;
+        }
+
+        const label = document.createElement('span');
+        label.className = 'vgdt-sort-label';
+        while (header.firstChild) {
+            label.appendChild(header.firstChild);
+        }
+
+        const controls = document.createElement('span');
+        controls.className = 'vgdt-sort-controls';
+        controls.innerHTML = `
+            <button type="button" class="vgdt-sort-arrow vgdt-sort-arrow--asc" data-sort-arrow="asc" aria-label="${this._escapeAttr(this._options.ascLabel)}" aria-pressed="false">&#9650;</button>
+            <button type="button" class="vgdt-sort-arrow vgdt-sort-arrow--desc" data-sort-arrow="desc" aria-label="${this._escapeAttr(this._options.descLabel)}" aria-pressed="false">&#9660;</button>
+        `;
+
+        label.appendChild(controls);
+        header.appendChild(label);
+        this._headerControls.delete(header);
+    }
+
+    _getHeaderControls(header) {
+        if (this._headerControls.has(header)) {
+            return this._headerControls.get(header);
+        }
+        const controls = {
+            controlsNode: header.querySelector('.vgdt-sort-controls'),
+            ascButton: header.querySelector('[data-sort-arrow="asc"]'),
+            descButton: header.querySelector('[data-sort-arrow="desc"]'),
+        };
+        this._headerControls.set(header, controls);
+        return controls;
+    }
+
+    _getFieldByIndex(index) {
+        const header = this._headers[index];
+        if (!header) {
+            return '';
+        }
+        return (header.getAttribute('data-field') || '').trim();
+    }
+
+    _resolveIndex(payload = {}) {
+        const field = (payload.field || '').toString().trim();
+        if (field) {
+            const byField = this._headers.findIndex((header) => {
+                return (header.getAttribute('data-field') || '').trim() === field;
+            });
+            if (byField >= 0) {
+                return byField;
+            }
+        }
+
+        const byIndex = Number.parseInt(payload.columnIndex, 10);
+        if (Number.isInteger(byIndex) && byIndex >= 0 && byIndex < this._headers.length) {
+            return byIndex;
+        }
+
+        return -1;
+    }
+
+    _normalizeDir(dir) {
+        const normalized = String(dir).toLowerCase();
+        const directions = this._getDirections();
+        return directions.includes(normalized) ? normalized : directions[0];
+    }
+
+    _getDirections() {
+        const list = Array.isArray(this._options.directions) ? this._options.directions : ['asc', 'desc'];
+        const normalized = list
+            .map((item) => String(item).toLowerCase().trim())
+            .filter((item) => item === 'asc' || item === 'desc');
+        return normalized.length ? Array.from(new Set(normalized)) : ['asc', 'desc'];
+    }
+
+    _syncControlsVisibilityMode() {
+        if (this._options.hideUnsortedArrows) {
+            this._table.setAttribute('data-sort-hide-unsorted-arrows', '1');
+            return;
+        }
+        this._table.removeAttribute('data-sort-hide-unsorted-arrows');
+    }
+
+    _escapeAttr(value) {
+        return String(value)
+            .replace(/&/g, '&amp;')
+            .replace(/"/g, '&quot;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;');
+    }
+}
+
+export default Sortable;
+
+