vgapp 1.5.0 → 1.5.1

package/app/modules/vgfilepreview/scss/_variables.scss

@@ -22,11 +22,11 @@ $filepreview-map: (
 				toggle-size: 24px,
 				icon-size: 18px,
 				toggle-radius: 999px,
-				toggle-bg: var(--vg-media-border-color, rgba(255, 255, 255, .12)),
-				toggle-color: var(--vg-media-text-color, #ffffff),
+				toggle-bg: rgba(0, 0, 0, .12),
+				toggle-color: #000000,
 				name-line-height: 1.2,
-				progress-track: var(--vg-media-subtle-bg, rgba(255, 255, 255, .06)),
-				progress-fill: var(--vg-media-active-bg, rgba(255, 255, 255, .16)),
+				progress-track: rgba(0, 0, 0, .16),
+				progress-fill: rgba(0, 0, 0, .16),
 				progress-radius: 6px,
 				progress-padding-x: 4px,
 		),

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

@@ -393,7 +393,7 @@
 						.vg-filepreview-download-trigger {
 							padding: 0;
 							background: transparent;
-							color: var(--vg-secondary);
+							color: var(--vg-body-color);
 							border-radius: 0;
 							font-size: var(--vg-files-info-size-font-size);
 							font-weight: 500;

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

@@ -1,7 +1,7 @@
-/**
- * Описание: разметка Fixed Header с отдельными слоями заголовка и тела VGTable.
- * Возможности: перенос настоящего thead без клона, синхронизация ширин колонок и горизонтальной прокрутки.
- */
+/**
+ * Описание: разметка Fixed Header с отдельными слоями заголовка и тела VGTable.
+ * Возможности: перенос настоящего thead без клона, автоматическая синхронизация ширин колонок и горизонтальной прокрутки.
+ */
 
 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'];
@@ -18,19 +18,24 @@ class _stickyHeader {
 		this._header = null;
 		this._headerTable = null;
 		this._body = null;
-		this._previousClasses = new Map();
+		this._previousClasses = new Map();
 		this._previousContainerClasses = new Map();
 		this._previousStyles = new Map();
-		this._previousHeaderWidths = new Map();
-		this._boundScroll = this._syncScroll.bind(this);
-		this._boundResize = this.refresh.bind(this);
-		this._boundPageScroll = this._syncStickyState.bind(this);
+		this._columnWeights = new Map();
+		this._hardColumnWidths = new Map();
+		this._hasSourceColgroup = false;
+		this._resizeObserver = null;
+		this._resizeFrame = null;
+		this._boundScroll = this._syncScroll.bind(this);
+		this._boundResize = this._scheduleRefresh.bind(this);
+		this._boundPageScroll = this._syncStickyState.bind(this);
 	}
 
 	init() {
-		if (!this._wrapper || !this._container || !this._head) return this;
-
-		const widths = this._measureColumns();
+		if (!this._wrapper || !this._container || !this._head) return this;
+
+		const widths = this._measureColumns();
+		this._rememberColumnGeometry(widths);
 		MODE_CLASSES.forEach((className) => this._previousClasses.set(className, this._wrapper.classList.contains(className)));
 		CONTAINER_MODE_CLASSES.forEach((className) => this._previousContainerClasses.set(className, this._container.classList.contains(className)));
 		STYLE_PROPERTIES.forEach((property) => this._previousStyles.set(property, this._container.style.getPropertyValue(property)));
@@ -43,13 +48,17 @@ class _stickyHeader {
 		this._container.style.setProperty('--vg-table-sticky-max-height', this._toCssLength(this._params.maxHeight, '24rem'));
 		this._element.setAttribute('data-vg-table-sticky-header', this._params.mode);
 
-		this._buildLayers(widths);
-		this._body.addEventListener('scroll', this._boundScroll, {passive: true});
-		if (typeof window !== 'undefined') {
-			window.addEventListener('resize', this._boundResize);
-			if (this._params.mode === 'page') window.addEventListener('scroll', this._boundPageScroll, {passive: true});
-		}
-		this.refresh();
+		this._buildLayers(widths);
+		this._body.addEventListener('scroll', this._boundScroll, {passive: true});
+		if (typeof ResizeObserver !== 'undefined') {
+			this._resizeObserver = new ResizeObserver(this._boundResize);
+			this._resizeObserver.observe(this._container);
+			this._resizeObserver.observe(this._body);
+		} else if (typeof window !== 'undefined') {
+			window.addEventListener('resize', this._boundResize);
+		}
+		if (this._params.mode === 'page' && typeof window !== 'undefined') window.addEventListener('scroll', this._boundPageScroll, {passive: true});
+		this.refresh();
 		return this;
 	}
 
@@ -69,10 +78,9 @@ class _stickyHeader {
 	refresh() {
 		if (!this._header || !this._headerTable || !this._body) return this;
 
-		const widths = this._measureBodyColumns();
+		const widths = this._resolveLayoutWidths();
 		this._applyColgroup(this._headerTable, widths);
 		this._applyColgroup(this._element, widths);
-		this._applyHeaderWidths(widths);
 		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`);
@@ -83,12 +91,17 @@ class _stickyHeader {
 		return this;
 	}
 
-	dispose() {
-		if (this._body) this._body.removeEventListener('scroll', this._boundScroll);
-		if (typeof window !== 'undefined') {
-			window.removeEventListener('resize', this._boundResize);
-			window.removeEventListener('scroll', this._boundPageScroll);
-		}
+	dispose() {
+		if (this._body) this._body.removeEventListener('scroll', this._boundScroll);
+		this._resizeObserver?.disconnect();
+		if (this._resizeFrame !== null && typeof cancelAnimationFrame === 'function') {
+			cancelAnimationFrame(this._resizeFrame);
+			this._resizeFrame = null;
+		}
+		if (typeof window !== 'undefined') {
+			if (!this._resizeObserver) window.removeEventListener('resize', this._boundResize);
+			window.removeEventListener('scroll', this._boundPageScroll);
+		}
 		this._header?.classList.remove('is-stuck');
 		if (this._head && this._headerTable?.contains(this._head)) this._element.prepend(this._head);
 		this._header?.remove();
@@ -108,12 +121,20 @@ class _stickyHeader {
 			if (previous) this._container.style.setProperty(property, previous);
 			else this._container.style.removeProperty(property);
 		});
-		this._previousHeaderWidths.forEach((width, cell) => {
-			cell.style.width = width;
-		});
-		this._previousHeaderWidths.clear();
 		this._element.removeAttribute('data-vg-table-sticky-header');
-	}
+	}
+
+	_scheduleRefresh() {
+		if (this._resizeFrame !== null) return;
+		if (typeof requestAnimationFrame !== 'function') {
+			this.refresh();
+			return;
+		}
+		this._resizeFrame = requestAnimationFrame(() => {
+			this._resizeFrame = null;
+			this.refresh();
+		});
+	}
 
 	_buildLayers(widths) {
 		this._header = this._element.ownerDocument.createElement('div');
@@ -154,7 +175,7 @@ class _stickyHeader {
 		return headerWidths;
 	}
 
-	_measureRow(row) {
+	_measureRow(row) {
 		if (!row) return [];
 		return Array.from(row.cells).flatMap((cell) => {
 			const span = Math.max(1, cell.colSpan || 1);
@@ -164,34 +185,121 @@ class _stickyHeader {
 	}
 
 	_applyColgroup(table, widths) {
-		if (!widths.length) return;
-		if (table.querySelector(':scope > colgroup:not([data-vg-table-sticky-colgroup])')) return;
-		let colgroup = table.querySelector(':scope > colgroup[data-vg-table-sticky-colgroup]');
+		if (!widths.length) return;
+		if (table.querySelector(':scope > colgroup:not([data-vg-table-sticky-colgroup])')) return;
+		let colgroup = table.querySelector(':scope > colgroup[data-vg-table-sticky-colgroup]');
 		if (!colgroup) {
 			colgroup = table.ownerDocument.createElement('colgroup');
-			colgroup.setAttribute('data-vg-table-sticky-colgroup', '');
-			table.prepend(colgroup);
-		}
-		colgroup.replaceChildren(...widths.map((width) => {
-			const col = table.ownerDocument.createElement('col');
-			if (width > 0) col.style.width = `${width}px`;
-			return col;
-		}));
+			colgroup.setAttribute('data-vg-table-sticky-colgroup', '');
+			table.prepend(colgroup);
+		}
+		while (colgroup.children.length < widths.length) colgroup.append(table.ownerDocument.createElement('col'));
+		while (colgroup.children.length > widths.length) colgroup.lastElementChild.remove();
+		const headers = this._getHeaders();
+		widths.forEach((width, index) => {
+			const col = colgroup.children[index];
+			if (width > 0) col.style.width = `${width}px`;
+			else col.style.removeProperty('width');
+			const hidden = headers[index]?.hidden === true;
+			col.hidden = hidden;
+			col.toggleAttribute('data-vg-table-column-hidden', hidden);
+		});
 	}
 
-	_applyHeaderWidths(widths) {
-		const row = this._head?.rows[this._head.rows.length - 1];
-		if (!row || !widths.length) return;
-		let columnIndex = 0;
-		Array.from(row.cells).forEach((cell) => {
-			if (!this._previousHeaderWidths.has(cell)) this._previousHeaderWidths.set(cell, cell.style.width);
-			const span = Math.max(1, cell.colSpan || 1);
-			const width = widths.slice(columnIndex, columnIndex + span).reduce((total, value) => total + value, 0);
-			if (width > 0) cell.style.width = `${width}px`;
-			columnIndex += span;
+	_rememberColumnGeometry(widths) {
+		const headers = this._getHeaders();
+		const sourceCols = Array.from(this._element.querySelector(':scope > colgroup:not([data-vg-table-sticky-colgroup])')?.children || []);
+		this._hasSourceColgroup = sourceCols.length > 0;
+		headers.forEach((header, index) => {
+			const key = this._columnKey(header, index);
+			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);
+			}
 		});
 	}
-
+
+	_resolveLayoutWidths() {
+		const headers = this._getHeaders();
+		const measured = this._measureBodyColumns();
+		if (this._hasSourceColgroup || !headers.length) return measured;
+
+		const bodyRow = Array.from(this._element.tBodies || [])
+			.flatMap((body) => Array.from(body.rows || []))
+			.find((row) => !row.hidden && !row.hasAttribute('data-vg-table-state-row'));
+		const hard = new Map();
+		const flexible = [];
+		headers.forEach((header, index) => {
+			const key = this._columnKey(header, index);
+			const bodyCell = bodyRow?.cells[index];
+			if (this._hasDeclaredWidth(header) || this._hasDeclaredWidth(bodyCell) || this._hardColumnWidths.has(key)) {
+				const declared = this._readDeclaredPixelWidth(header) || this._readDeclaredPixelWidth(bodyCell);
+				const width = declared || this._hardColumnWidths.get(key) || measured[index] || 0;
+				this._hardColumnWidths.set(key, width);
+				hard.set(index, width);
+			} else {
+				flexible.push(index);
+			}
+		});
+
+		const measuredTotal = measured.reduce((total, width) => total + width, 0);
+		const viewport = this._body?.clientWidth || this._container?.clientWidth || measuredTotal;
+		const minimum = this._readTableMinimumWidth();
+		const target = Math.max(viewport, minimum, 0);
+		const hardTotal = Array.from(hard.values()).reduce((total, width) => total + width, 0);
+		const available = Math.max(0, target - hardTotal);
+		const widths = Array(headers.length).fill(0);
+		hard.forEach((width, index) => { widths[index] = width; });
+
+		if (!flexible.length) return widths;
+		const weights = flexible.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) || 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 widths;
+	}
+
+	_getHeaders() {
+		const rows = Array.from(this._head?.rows || []);
+		return rows.length ? Array.from(rows.at(-1).cells || []) : [];
+	}
+
+	_columnKey(header, index) {
+		return String(header?.getAttribute('data-field') || index).trim();
+	}
+
+	_hasDeclaredWidth(element) {
+		if (!element) return false;
+		return element.hasAttribute('width')
+			|| element.hasAttribute('data-column-width')
+			|| Boolean(element.style?.width || element.style?.minWidth || element.style?.maxWidth);
+	}
+
+	_readDeclaredPixelWidth(element) {
+		if (!element || !this._hasDeclaredWidth(element)) return 0;
+		const fixed = element.style?.minWidth && element.style.minWidth === element.style.maxWidth
+			? Number.parseFloat(element.style.width || element.style.minWidth)
+			: 0;
+		if (Number.isFinite(fixed) && fixed > 0) return fixed;
+		const measured = element.getBoundingClientRect?.().width || element.offsetWidth || 0;
+		return measured > 0 ? measured : 0;
+	}
+
+	_readTableMinimumWidth() {
+		if (typeof getComputedStyle !== 'function') return 0;
+		const value = Number.parseFloat(getComputedStyle(this._element).minWidth || '0');
+		return Number.isFinite(value) ? value : 0;
+	}
+
 	_syncScroll() {
 		if (this._header && this._body) this._header.scrollLeft = this._body.scrollLeft;
 	}

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

@@ -121,7 +121,8 @@
 		}
 
 		.vg-table-body {
-			overflow: auto;
+			overflow-x: auto;
+			overflow-y: hidden;
 		}
 	}
 }

package/app/modules/vgtable/scss/vgtable.scss

@@ -113,6 +113,12 @@
 						display: none;
 					}
 				}
+
+				&.not-splitter {
+					&:before {
+						display: none;
+					}
+				}
 			}
 		}