vgapp 1.3.8 → 1.4.0

package/app/modules/vgdynamictable/js/fixed.js

@@ -13,56 +13,56 @@ const fixedColumnsMethods = {
         return String(raw || '').trim();
     },
 
-    _hasFixedColumnsConfig() {
-        const attr = this._getFixedColumnsConfigRaw();
-        if (attr !== '') {
-            return true;
-        }
+    _hasFixedColumnsConfig() {
+        const attr = this._getFixedColumnsConfigRaw();
+        if (attr !== '') {
+            return true;
+        }
         const headers = this._element && this._element.tHead
             ? Array.from(this._element.tHead.querySelectorAll('th'))
             : [];
         return headers.some((header) => {
             const fixedAttr = String(header.getAttribute('data-fixed') || '').toLowerCase().trim();
             const fixedColumnAttr = String(header.getAttribute('data-fixed-column') || '').toLowerCase().trim();
-            return fixedAttr === 'left' || fixedAttr === 'right' || fixedColumnAttr === 'left' || fixedColumnAttr === 'right';
-        });
-    },
-
-    _buildFixedColumnsStateMap(fixed) {
-        const state = new Map();
-        const left = Array.isArray(fixed && fixed.left) ? fixed.left : [];
-        const right = Array.isArray(fixed && fixed.right) ? fixed.right : [];
-        left.forEach((index) => {
-            if (Number.isInteger(index) && index >= 0) {
-                state.set(index, 'left');
-            }
-        });
-        right.forEach((index) => {
-            if (Number.isInteger(index) && index >= 0 && !state.has(index)) {
-                state.set(index, 'right');
-            }
-        });
-        return state;
-    },
-
-    _collectFixedColumnsTransitions(nextState) {
-        const previousState = this._fixedColumnsLastStateMap instanceof Map
-            ? this._fixedColumnsLastStateMap
-            : new Map();
-        const transitions = [];
-        nextState.forEach((side, index) => {
-            if (previousState.get(index) !== side) {
-                transitions.push({ index, side });
-            }
-        });
-        this._fixedColumnsLastStateMap = nextState;
-        return transitions;
-    },
-
-    _applyFixedColumnsLayout() {
-        if (!this._element) {
-            return;
-        }
+            return fixedAttr === 'left' || fixedAttr === 'right' || fixedColumnAttr === 'left' || fixedColumnAttr === 'right';
+        });
+    },
+
+    _buildFixedColumnsStateMap(fixed) {
+        const state = new Map();
+        const left = Array.isArray(fixed && fixed.left) ? fixed.left : [];
+        const right = Array.isArray(fixed && fixed.right) ? fixed.right : [];
+        left.forEach((index) => {
+            if (Number.isInteger(index) && index >= 0) {
+                state.set(index, 'left');
+            }
+        });
+        right.forEach((index) => {
+            if (Number.isInteger(index) && index >= 0 && !state.has(index)) {
+                state.set(index, 'right');
+            }
+        });
+        return state;
+    },
+
+    _collectFixedColumnsTransitions(nextState) {
+        const previousState = this._fixedColumnsLastStateMap instanceof Map
+            ? this._fixedColumnsLastStateMap
+            : new Map();
+        const transitions = [];
+        nextState.forEach((side, index) => {
+            if (previousState.get(index) !== side) {
+                transitions.push({ index, side });
+            }
+        });
+        this._fixedColumnsLastStateMap = nextState;
+        return transitions;
+    },
+
+    _applyFixedColumnsLayout() {
+        if (!this._element) {
+            return;
+        }
         const suppressFixedColumns = Boolean(this._fixedColumnsSuppressed);
 
         const sourceHeaders = this._element.tHead ? Array.from(this._element.tHead.querySelectorAll('th')) : [];
@@ -74,40 +74,40 @@ const fixedColumnsMethods = {
             ? { left: [], right: [] }
             : this._applyMobileFixedColumnsGuard(this._element, sourceFixedRaw);
         const hasSourceFixed = sourceFixed.left.length > 0 || sourceFixed.right.length > 0;
-        this._element.classList.toggle('table-fixed-cols', hasSourceFixed);
-        if (this._parent) {
-            this._parent.classList.toggle('table-fixed-cols', hasSourceFixed);
-        }
-        const sourceFixedTransitions = this._collectFixedColumnsTransitions(
-            this._buildFixedColumnsStateMap(sourceFixed)
-        );
-        this._applyFixedColumnsToTable(this._element, sourceFixed, {
-            includeBody: true,
-            emitAction: true,
-            transitionedColumns: sourceFixedTransitions,
-        });
-        this._toggleFixedColumnsScrollBinding(hasSourceFixed);
-
-        const cloneTable = this._cloneStickyState && this._cloneStickyState.table
-            ? this._cloneStickyState.table
-            : null;
+        this._element.classList.toggle('table-fixed-cols', hasSourceFixed);
+        if (this._parent) {
+            this._parent.classList.toggle('table-fixed-cols', hasSourceFixed);
+        }
+        const sourceFixedTransitions = this._collectFixedColumnsTransitions(
+            this._buildFixedColumnsStateMap(sourceFixed)
+        );
+        this._applyFixedColumnsToTable(this._element, sourceFixed, {
+            includeBody: true,
+            emitAction: true,
+            transitionedColumns: sourceFixedTransitions,
+        });
+        this._toggleFixedColumnsScrollBinding(hasSourceFixed);
+
+        const cloneTable = this._cloneStickyState && this._cloneStickyState.table
+            ? this._cloneStickyState.table
+            : null;
         if (cloneTable) {
             const cloneHeaders = cloneTable.tHead ? Array.from(cloneTable.tHead.querySelectorAll('th')) : [];
             const cloneFixedRaw = this._getFixedColumnsByHeaders(cloneHeaders, {
                 parseTableAttr: false,
                 fallbackByPosition: false,
             });
-            const cloneFixed = hasSourceFixed
-                ? this._applyMobileFixedColumnsGuard(cloneTable, cloneFixedRaw)
-                : { left: [], right: [] };
-            this._applyFixedColumnsToTable(cloneTable, cloneFixed, {
-                includeBody: false,
-                emitAction: false,
-            });
-        }
-        this._rebuildFixedColumnsCellsCache();
-        this._syncFixedColumnsScroll({ immediate: true });
-    },
+            const cloneFixed = hasSourceFixed
+                ? this._applyMobileFixedColumnsGuard(cloneTable, cloneFixedRaw)
+                : { left: [], right: [] };
+            this._applyFixedColumnsToTable(cloneTable, cloneFixed, {
+                includeBody: false,
+                emitAction: false,
+            });
+        }
+        this._rebuildFixedColumnsCellsCache();
+        this._syncFixedColumnsScroll({ immediate: true });
+    },
 
     _applyMobileFixedColumnsGuard(table, fixed) {
         const next = {
@@ -234,19 +234,19 @@ const fixedColumnsMethods = {
         return { left, right };
     },
 
-    _applyFixedColumnsToTable(table, fixed, options = {}) {
-        if (!table) {
-            return;
-        }
-        const includeBody = options.includeBody !== false;
-        const shouldEmitAction = options.emitAction !== false;
-        const transitionedColumns = Array.isArray(options.transitionedColumns)
-            ? options.transitionedColumns
-            : [];
-        const sections = [];
-        if (table.tHead) {
-            sections.push(table.tHead);
-        }
+    _applyFixedColumnsToTable(table, fixed, options = {}) {
+        if (!table) {
+            return;
+        }
+        const includeBody = options.includeBody !== false;
+        const shouldEmitAction = options.emitAction !== false;
+        const transitionedColumns = Array.isArray(options.transitionedColumns)
+            ? options.transitionedColumns
+            : [];
+        const sections = [];
+        if (table.tHead) {
+            sections.push(table.tHead);
+        }
         if (includeBody && table.tBodies && table.tBodies.length) {
             sections.push(...Array.from(table.tBodies));
         }
@@ -282,17 +282,17 @@ const fixedColumnsMethods = {
             ? viewportMetrics.effectiveWidth
             : tableRect.width;
         const metrics = {};
-        headerCells.forEach((cell, index) => {
-            const rect = cell.getBoundingClientRect();
-            metrics[index] = {
-                width: Math.max(0, rect.width),
-                left: Math.max(0, rect.left - tableRect.left),
-                height: Math.max(0, rect.height),
-                top: Math.max(0, rect.top - tableRect.top),
-            };
-        });
-        const leftOffsets = {};
-        let leftOffset = 0;
+        headerCells.forEach((cell, index) => {
+            const rect = cell.getBoundingClientRect();
+            metrics[index] = {
+                width: Math.max(0, rect.width),
+                left: Math.max(0, rect.left - tableRect.left),
+                height: Math.max(0, rect.height),
+                top: Math.max(0, rect.top - tableRect.top),
+            };
+        });
+        const leftOffsets = {};
+        let leftOffset = 0;
         fixed.left.forEach((index) => {
             const width = metrics[index] ? metrics[index].width : 0;
             leftOffsets[index] = leftOffset;
@@ -318,10 +318,10 @@ const fixedColumnsMethods = {
                 if (!cell) {
                     return;
                 }
-                const metric = metrics[index] || { left: 0 };
-                const baseShift = leftOffsets[index] - metric.left;
-                cell.setAttribute('data-fixed-side', 'left');
-                cell.setAttribute('data-fixed-shift', String(baseShift));
+                const metric = metrics[index] || { left: 0 };
+                const baseShift = leftOffsets[index] - metric.left;
+                cell.setAttribute('data-fixed-side', 'left');
+                cell.setAttribute('data-fixed-shift', String(baseShift));
                 cell.style.zIndex = String(zIndex);
                 if (index === leftEdgeIndex) {
                     cell.setAttribute('data-fixed-edge', 'right');
@@ -333,83 +333,83 @@ const fixedColumnsMethods = {
                 if (!cell) {
                     return;
                 }
-                const metric = metrics[index] || { left: 0, width: 0 };
-                const desiredLeft = viewportWidth - rightOffsets[index] - metric.width;
-                const baseShift = desiredLeft - metric.left;
-                cell.setAttribute('data-fixed-side', 'right');
+                const metric = metrics[index] || { left: 0, width: 0 };
+                const desiredLeft = viewportWidth - rightOffsets[index] - metric.width;
+                const baseShift = desiredLeft - metric.left;
+                cell.setAttribute('data-fixed-side', 'right');
                 cell.setAttribute('data-fixed-shift', String(baseShift));
                 cell.style.zIndex = String(zIndex);
                 if (index === rightEdgeIndex) {
                     cell.setAttribute('data-fixed-edge', 'left');
-                }
-            });
-        });
-
-        if (!shouldEmitAction || typeof this._emitAction !== 'function' || !transitionedColumns.length) {
-            return;
-        }
-
-        transitionedColumns.forEach((entry) => {
-            const index = Number.isInteger(entry && entry.index) ? entry.index : -1;
-            const side = entry && (entry.side === 'left' || entry.side === 'right')
-                ? entry.side
-                : '';
-            const headerCell = index >= 0 && index < headerCells.length
-                ? headerCells[index]
-                : null;
-            if (!headerCell || !side) {
-                return;
-            }
-
-            const metric = metrics[index] || { left: 0, width: 0, top: 0, height: 0 };
-            const width = metric.width || 0;
-            const height = metric.height || 0;
-            const left = side === 'left'
-                ? (leftOffsets[index] || 0)
-                : Math.max(0, viewportWidth - (rightOffsets[index] || 0) - width);
-            const right = side === 'right'
-                ? (rightOffsets[index] || 0)
-                : Math.max(0, viewportWidth - left - width);
-            const top = metric.top || 0;
-            const bottom = Math.max(0, tableRect.height - top - height);
-            const field = String(headerCell.getAttribute('data-field') || '').trim();
-            const fallbackBaseShift = left - (metric.left || 0);
-            const attrBaseShift = Number.parseFloat(headerCell.getAttribute('data-fixed-shift') || '');
-            const baseShift = Number.isFinite(attrBaseShift) ? attrBaseShift : fallbackBaseShift;
-            const scrollLeft = this._tableViewport ? (this._tableViewport.scrollLeft || 0) : 0;
-            const fixedAtTs = Date.now();
-
-            this._emitAction('columnfixed', {
-                columnIndex: index,
-                side,
-                phase: 'fixed',
-                field,
-                column: {
-                    index,
-                    side,
-                    field,
-                    width,
-                    height,
-                    element: headerCell,
-                },
-                offsets: {
-                    left,
-                    right,
-                    top,
-                    bottom,
-                },
-                shift: {
-                    base: baseShift,
-                    current: baseShift + scrollLeft,
-                    scrollLeft,
-                },
-                fixedAt: {
-                    timestamp: fixedAtTs,
-                    iso: new Date(fixedAtTs).toISOString(),
-                },
-            });
-        });
-    },
+                }
+            });
+        });
+
+        if (!shouldEmitAction || typeof this._emitAction !== 'function' || !transitionedColumns.length) {
+            return;
+        }
+
+        transitionedColumns.forEach((entry) => {
+            const index = Number.isInteger(entry && entry.index) ? entry.index : -1;
+            const side = entry && (entry.side === 'left' || entry.side === 'right')
+                ? entry.side
+                : '';
+            const headerCell = index >= 0 && index < headerCells.length
+                ? headerCells[index]
+                : null;
+            if (!headerCell || !side) {
+                return;
+            }
+
+            const metric = metrics[index] || { left: 0, width: 0, top: 0, height: 0 };
+            const width = metric.width || 0;
+            const height = metric.height || 0;
+            const left = side === 'left'
+                ? (leftOffsets[index] || 0)
+                : Math.max(0, viewportWidth - (rightOffsets[index] || 0) - width);
+            const right = side === 'right'
+                ? (rightOffsets[index] || 0)
+                : Math.max(0, viewportWidth - left - width);
+            const top = metric.top || 0;
+            const bottom = Math.max(0, tableRect.height - top - height);
+            const field = String(headerCell.getAttribute('data-field') || '').trim();
+            const fallbackBaseShift = left - (metric.left || 0);
+            const attrBaseShift = Number.parseFloat(headerCell.getAttribute('data-fixed-shift') || '');
+            const baseShift = Number.isFinite(attrBaseShift) ? attrBaseShift : fallbackBaseShift;
+            const scrollLeft = this._tableViewport ? (this._tableViewport.scrollLeft || 0) : 0;
+            const fixedAtTs = Date.now();
+
+            this._emitAction('columnfixed', {
+                columnIndex: index,
+                side,
+                phase: 'fixed',
+                field,
+                column: {
+                    index,
+                    side,
+                    field,
+                    width,
+                    height,
+                    element: headerCell,
+                },
+                offsets: {
+                    left,
+                    right,
+                    top,
+                    bottom,
+                },
+                shift: {
+                    base: baseShift,
+                    current: baseShift + scrollLeft,
+                    scrollLeft,
+                },
+                fixedAt: {
+                    timestamp: fixedAtTs,
+                    iso: new Date(fixedAtTs).toISOString(),
+                },
+            });
+        });
+    },
 
     _toggleFixedColumnsScrollBinding(enabled) {
         if (!this._tableViewport) {
@@ -436,12 +436,12 @@ const fixedColumnsMethods = {
         }
         this._fixedColumnsSyncFrame = 0;
         this._fixedColumnsLastScrollLeft = 0;
-        this._fixedColumnsLastAppliedScrollLeft = Number.NaN;
-        this._fixedColumnsLastShadowStateKey = '';
-        this._fixedColumnsCellsCache = [];
-        this._fixedColumnsShadowTargetsCache = [];
-        this._fixedColumnsLastStateMap = new Map();
-    },
+        this._fixedColumnsLastAppliedScrollLeft = Number.NaN;
+        this._fixedColumnsLastShadowStateKey = '';
+        this._fixedColumnsCellsCache = [];
+        this._fixedColumnsShadowTargetsCache = [];
+        this._fixedColumnsLastStateMap = new Map();
+    },
 
     _rebuildFixedColumnsCellsCache() {
         const tables = [this._element];

package/app/modules/vgdynamictable/js/options.js

@@ -401,10 +401,14 @@ const DEFAULT_OPTIONS = {
         // Отступ сверху для sticky-header (px).
         // data-атрибуты: data-sticky-header-top-offset | data-stickyHeader-top
         top: 0,
-        // Максимальная высота viewport таблицы.
-        // data-атрибуты: data-sticky-header-max-height | data-stickyHeader-max
-        max: 0,
-    },
+        // Максимальная высота viewport таблицы.
+        // data-атрибуты: data-sticky-header-max-height | data-stickyHeader-max
+        max: 0,
+        // Рендерить отдельный sticky clone вместо sticky th.
+        // По умолчанию наследует stickyHeader.enable.
+        // data-attributes: data-sticky-header-clone
+        clone: null,
+    },
 
     search: {
         // Canonical key for enable flag.

package/app/modules/vgdynamictable/js/pagination.js

@@ -1,4 +1,4 @@
-import VGDropdown from "../../vgdropdown";
+import VGDropdown from "../../vgdropdown";
 
 class Pagination {
 	constructor(el, params = {}) {

package/app/modules/vgdynamictable/js/search.js

@@ -1,6 +1,6 @@
-import {normalizeNonNegativeInt, safeQuerySelector} from "./utils/common";
-
-class Search {
+import {normalizeNonNegativeInt, safeQuerySelector} from "./utils/common";
+
+class Search {
     constructor(options = {}) {
         this._options = Object.assign({
             enabled: true,
@@ -27,10 +27,10 @@ class Search {
             return;
         }
 
-        const input = safeQuerySelector(selector);
-        if (!input) {
-            return;
-        }
+        const input = safeQuerySelector(selector);
+        if (!input) {
+            return;
+        }
 
         this._input = input;
         this._input.addEventListener('input', this._boundInput);
@@ -50,10 +50,10 @@ class Search {
     }
 
     _handleInput() {
-        clearTimeout(this._timer);
-        this._timer = setTimeout(() => {
-            this._emit();
-        }, normalizeNonNegativeInt(this._options.debounceMs, 300));
+        clearTimeout(this._timer);
+        this._timer = setTimeout(() => {
+            this._emit();
+        }, normalizeNonNegativeInt(this._options.debounceMs, 300));
     }
 
     _handleKeyDown(event) {
@@ -76,7 +76,7 @@ class Search {
             param: String(this._options.param || 'q'),
         });
     }
-}
+}
 
 export default Search;