vgapp 1.5.2 → 1.5.4

package/app/modules/vgfiles/scss/_mixins.scss

@@ -28,7 +28,8 @@
 		&.pending,
 		&.loading,
 		&.failing {
-			.file-actions {
+			.file-actions,
+			.file-custom > :not(.file-remove):not(.file-info) {
 				display: none;
 			}
 		}

package/app/modules/vgtable/js/_sticky-header.js

@@ -5,7 +5,8 @@
 
 const MODE_CLASSES = ['vg-table-wrapper--sticky-container', 'vg-table-wrapper--sticky-page'];
 const CONTAINER_MODE_CLASSES = ['vg-table-container--sticky-container', 'vg-table-container--sticky-page'];
-const STYLE_PROPERTIES = ['--vg-table-sticky-top', '--vg-table-sticky-max-height'];
+const CONTENT_MIN_WIDTH_PROPERTY = '--vg-table-sticky-content-min-width';
+const STYLE_PROPERTIES = ['--vg-table-sticky-top', '--vg-table-sticky-max-height', CONTENT_MIN_WIDTH_PROPERTY];
 const GENERATED_LAYER_ATTRIBUTE = 'data-vg-table-sticky-generated';
 
 class _stickyHeader {
@@ -23,6 +24,7 @@ class _stickyHeader {
 		this._previousStyles = new Map();
 		this._columnWeights = new Map();
 		this._hardColumnWidths = new Map();
+		this._columnMinimumWidths = new Map();
 		this._hasSourceColgroup = false;
 		this._resizeObserver = null;
 		this._resizeFrame = null;
@@ -75,13 +77,20 @@ class _stickyHeader {
 		return this;
 	}
 
-	refresh() {
-		if (!this._header || !this._headerTable || !this._body) return this;
-
-		const widths = this._resolveLayoutWidths();
-		this._applyColgroup(this._headerTable, widths);
-		this._applyColgroup(this._element, widths);
-		const scrollbar = Math.max(0, this._body.offsetWidth - this._body.clientWidth);
+	refresh() {
+		if (!this._header || !this._headerTable || !this._body) return this;
+
+		let widths = this._resolveLayoutWidths();
+		const attempts = this._getHeaders().length + 2;
+		for (let attempt = 0; attempt < attempts; attempt += 1) {
+			this._applyColgroup(this._headerTable, widths);
+			this._applyColgroup(this._element, widths);
+			const headerChanged = this._captureOverflowingHeaderMinimums();
+			const contentChanged = this._syncContentMinimumWidth(widths);
+			if (!headerChanged && !contentChanged) break;
+			widths = this._resolveLayoutWidths();
+		}
+		const scrollbar = Math.max(0, this._body.offsetWidth - this._body.clientWidth);
 		this._header.style.paddingInlineEnd = `${scrollbar}px`;
 		this._header.style.setProperty('--vg-table-sticky-scrollbar-width', `${scrollbar}px`);
 		this._header.classList.toggle('vg-table-header--scrollbar', scrollbar > 0);
@@ -215,6 +224,8 @@ class _stickyHeader {
 			this._columnWeights.set(key, widths[index] > 0 ? widths[index] : 1);
 			if (this._hasDeclaredWidth(header) || this._hasDeclaredWidth(sourceCols[index])) {
 				this._hardColumnWidths.set(key, widths[index] > 0 ? widths[index] : 0);
+			} else if (this._isEmptyHeader(header) && widths[index] > 0) {
+				this._columnMinimumWidths.set(key, widths[index]);
 			}
 		});
 	}
@@ -252,20 +263,87 @@ class _stickyHeader {
 		hard.forEach((width, index) => { widths[index] = width; });
 
 		if (!flexible.length) return widths;
-		const weights = flexible.map((index) => {
+		this._distributeFlexibleWidths(widths, flexible, available, headers, measured);
+		return widths;
+	}
+
+	_distributeFlexibleWidths(widths, indexes, available, headers, measured) {
+		let pending = indexes.slice();
+		let remaining = available;
+		const minimumTotal = pending.reduce((total, index) => {
 			const key = this._columnKey(headers[index], index);
-			return this._columnWeights.get(key) || measured[index] || 1;
-		});
-		const weightTotal = weights.reduce((total, weight) => total + weight, 0) || flexible.length;
-		let distributed = 0;
-		flexible.forEach((index, position) => {
-			const width = position === flexible.length - 1
-				? Math.max(0, available - distributed)
-				: available * weights[position] / weightTotal;
-			widths[index] = width;
-			distributed += width;
+			return total + (this._columnMinimumWidths.get(key) || 0);
+		}, 0);
+
+		if (minimumTotal > remaining) {
+			pending.forEach((index) => {
+				const key = this._columnKey(headers[index], index);
+				widths[index] = this._columnMinimumWidths.get(key) || 0;
+			});
+			return;
+		}
+
+		while (pending.length) {
+			const weights = pending.map((index) => {
+				const key = this._columnKey(headers[index], index);
+				return this._columnWeights.get(key) || measured[index] || 1;
+			});
+			const weightTotal = weights.reduce((total, weight) => total + weight, 0) || pending.length;
+			const constrained = pending.filter((index, position) => {
+				const key = this._columnKey(headers[index], index);
+				const minimum = this._columnMinimumWidths.get(key) || 0;
+				return minimum > remaining * weights[position] / weightTotal;
+			});
+
+			if (!constrained.length) {
+				let distributed = 0;
+				pending.forEach((index, position) => {
+					const width = position === pending.length - 1
+						? Math.max(0, remaining - distributed)
+						: remaining * weights[position] / weightTotal;
+					widths[index] = width;
+					distributed += width;
+				});
+				return;
+			}
+
+			constrained.forEach((index) => {
+				const key = this._columnKey(headers[index], index);
+				const minimum = this._columnMinimumWidths.get(key) || 0;
+				widths[index] = minimum;
+				remaining -= minimum;
+			});
+			pending = pending.filter((index) => !constrained.includes(index));
+		}
+	}
+
+	_captureOverflowingHeaderMinimums() {
+		let changed = false;
+		this._getHeaders().forEach((header, index) => {
+			const key = this._columnKey(header, index);
+			if (this._hasDeclaredWidth(header) || this._hardColumnWidths.has(key)) return;
+
+			const rendered = header.getBoundingClientRect?.().width || header.clientWidth || 0;
+			const required = header.scrollWidth || 0;
+			const current = this._columnMinimumWidths.get(key) || 0;
+			if (required <= rendered + 1 || required <= current + 1) return;
+
+			this._columnMinimumWidths.set(key, required);
+			changed = true;
 		});
-		return widths;
+		return changed;
+	}
+
+	_syncContentMinimumWidth(widths) {
+		const total = widths.reduce((sum, width) => sum + width, 0);
+		const viewport = this._body?.clientWidth || this._container?.clientWidth || total;
+		const previous = this._previousStyles.get(CONTENT_MIN_WIDTH_PROPERTY);
+		const required = Math.max(total, this._element?.scrollWidth || 0);
+		const next = required > viewport + 1 ? `${Math.ceil(required)}px` : previous;
+		const current = this._container.style.getPropertyValue(CONTENT_MIN_WIDTH_PROPERTY);
+		if (next) this._container.style.setProperty(CONTENT_MIN_WIDTH_PROPERTY, next);
+		else this._container.style.removeProperty(CONTENT_MIN_WIDTH_PROPERTY);
+		return current !== (next || '');
 	}
 
 	_getHeaders() {
@@ -277,6 +355,10 @@ class _stickyHeader {
 		return String(header?.getAttribute('data-field') || index).trim();
 	}
 
+	_isEmptyHeader(header) {
+		return Boolean(header) && header.childElementCount === 0 && String(header.textContent || '').trim() === '';
+	}
+
 	_hasDeclaredWidth(element) {
 		if (!element) return false;
 		return element.hasAttribute('width')
@@ -295,9 +377,10 @@ class _stickyHeader {
 	}
 
 	_readTableMinimumWidth() {
-		if (typeof getComputedStyle !== 'function') return 0;
-		const value = Number.parseFloat(getComputedStyle(this._element).minWidth || '0');
-		return Number.isFinite(value) ? value : 0;
+		const generated = Number.parseFloat(this._container?.style.getPropertyValue(CONTENT_MIN_WIDTH_PROPERTY) || '0');
+		if (typeof getComputedStyle !== 'function') return Number.isFinite(generated) ? generated : 0;
+		const declared = Number.parseFloat(getComputedStyle(this._element).minWidth || '0');
+		return Math.max(Number.isFinite(generated) ? generated : 0, Number.isFinite(declared) ? declared : 0);
 	}
 
 	_syncScroll() {

package/app/modules/vgtable/js/vgtable.js

@@ -34,7 +34,8 @@ import {
 	WRAPPER_SELECTOR,
 } from "./_options.js";
 
-const FILTER_HIDDEN_ATTRIBUTE = 'data-vg-table-filter-hidden';
+const FILTER_HIDDEN_ATTRIBUTE = 'data-vg-table-filter-hidden';
+const NOT_SPLITTER_CLASS = 'not-splitter';
 
 class VGTable extends BaseModule {
 	constructor(element, params = {}) {
@@ -77,8 +78,11 @@ class VGTable extends BaseModule {
 		this._fixedColumns = null;
 		this._columns = null;
 		this._rowReorder = null;
-		this._remote = null;
-		this._isRemote = Boolean(String(this._params.request.route || '').trim());
+		this._remote = null;
+		this._autoNotSplitterHeaders = new Set();
+		this._emptyHeaderSortOptions = new Map();
+		this._emptyHeaderSplittersSynced = false;
+		this._isRemote = Boolean(String(this._params.request.route || '').trim());
 		this._complex = false;
 		this._wrapper = null;
 		this._ownsWrapper = false;
@@ -108,8 +112,9 @@ class VGTable extends BaseModule {
 	 */
 	init() {
 		this._ensureWrapper();
-		this._ensureTableContainer();
-		this._syncComplexState();
+		this._ensureTableContainer();
+		this._syncComplexState();
+		this._syncEmptyHeaderSplitters();
 
 		// Включаем нативный sticky-заголовок без клонирования DOM
 		if (!this._stickyHeader && this._params.stickyHeader.enabled === true) {
@@ -141,11 +146,12 @@ class VGTable extends BaseModule {
 		if (!this._complex && !this._sorting && this._params.sort.enabled === true && this._params.rowReorder.enabled !== true) {
 			this._sorting = new _sorting(this._element, Object.assign({}, this._params.sort, {remote: this._isRemote}), this._stickyHeader?.getHeaderTable());
 			this._sorting.init();
-			this._element.addEventListener(
-				'sortchange.vg.table',
-				this._isRemote ? this._boundRemoteSortChange : this._boundLocalSortChange
-			);
-		}
+			this._element.addEventListener(
+				'sortchange.vg.table',
+				this._isRemote ? this._boundRemoteSortChange : this._boundLocalSortChange
+			);
+			this._stickyHeader?.refresh?.();
+		}
 
 		// Фиксируем настоящие ячейки через native sticky, включая отдельный слой Fixed Header
 		if (!this._complex && !this._fixedColumns && this._params.fixedColumns.enabled === true) {
@@ -445,15 +451,38 @@ class VGTable extends BaseModule {
 	 * Определяет таблицу с многострочным thead, colspan или rowspan.
 	 * @private
 	 */
-	_syncComplexState() {
+	_syncComplexState() {
 		const rows = this._isRemote
 			? Array.from(this._element.tHead?.rows || [])
 			: Array.from(this._element.rows || []);
 		const hasSpans = rows.some((row) => Array.from(row.cells || []).some((cell) => cell.colSpan > 1 || cell.rowSpan > 1));
 		this._complex = Boolean((this._element.tHead?.rows.length || 0) > 1 || hasSpans);
 		this._element.classList.toggle('vg-table-complex', this._complex);
-		this._element.toggleAttribute('data-vg-table-complex', this._complex);
-	}
+		this._element.toggleAttribute('data-vg-table-complex', this._complex);
+	}
+
+	/**
+	 * Скрывает разделитель и отключает сортировку у пустых заголовочных ячеек.
+	 * @private
+	 */
+	_syncEmptyHeaderSplitters() {
+		if (this._emptyHeaderSplittersSynced) return;
+
+		Array.from(this._element.tHead?.querySelectorAll('th') || []).forEach((header) => {
+			const isEmpty = header.childElementCount === 0 && String(header.textContent || '').trim() === '';
+			if (!isEmpty) return;
+
+			if (!header.classList.contains(NOT_SPLITTER_CLASS)) {
+				header.classList.add(NOT_SPLITTER_CLASS);
+				this._autoNotSplitterHeaders.add(header);
+			}
+			if (String(header.getAttribute('data-sort-enabled')).toLowerCase() !== 'false') {
+				this._emptyHeaderSortOptions.set(header, header.getAttribute('data-sort-enabled'));
+				header.setAttribute('data-sort-enabled', 'false');
+			}
+		});
+		this._emptyHeaderSplittersSynced = true;
+	}
 
 	/**
 	 * Подготовка переменных для пагинации
@@ -1426,8 +1455,15 @@ class VGTable extends BaseModule {
 		this._element.removeEventListener('sortchange.vg.table', this._boundPaginationRefresh);
 		this._element.removeEventListener('sortchange.vg.table', this._boundLocalSortChange);
 		this._element.removeEventListener('sortchange.vg.table', this._boundRemoteSortChange);
-		if (this._pagination) this._pagination.dispose();
-		this._element.classList.remove('vg-table-complex');
+		if (this._pagination) this._pagination.dispose();
+		this._autoNotSplitterHeaders.forEach((header) => header.classList.remove(NOT_SPLITTER_CLASS));
+		this._autoNotSplitterHeaders.clear();
+		this._emptyHeaderSortOptions.forEach((value, header) => {
+			if (value === null) header.removeAttribute('data-sort-enabled');
+			else header.setAttribute('data-sort-enabled', value);
+		});
+		this._emptyHeaderSortOptions.clear();
+		this._element.classList.remove('vg-table-complex');
 		this._element.removeAttribute('data-vg-table-complex');
 		this._removeGeneratedTableContainer();
 		this._removeGeneratedWrapper();

package/app/modules/vgtable/scss/_sticky-header.scss

@@ -57,9 +57,9 @@
 
 		.vg-table-header__table,
 		.vg-table-body > .vg-table {
-			width: 100%;
-			min-width: 100%;
-			table-layout: fixed;
+			width: 100%;
+			min-width: max(100%, var(--vg-table-sticky-content-min-width, 0px));
+			table-layout: fixed;
 			overflow: visible;
 			border: 0;
 			border-radius: 0;