vgapp 1.5.7 → 1.5.8

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

@@ -1,6 +1,6 @@
 /**
  * Описание: основной модуль базовых таблиц VGTable.
- * Возможности: i18n, wrapper/container, состояния и URL state, local/remote, sticky, колонки и строки, сортировка, дерево, responsive-пагинация, выбор и panning.
+ * Возможности: i18n, wrapper/container, состояния и URL state, local/remote, sticky, колонки и строки, сортировка, дерево, responsive-пагинация, выбор и panning.
  */
 import BaseModule from "../../base-module";
 import {mergeDeepObject} from "../../../utils/js/functions";
@@ -9,8 +9,8 @@ import Selectors from "../../../utils/js/dom/selectors";
 import _sorting from "./_sorting.js";
 import _panning from "./_panning.js";
 import _selection from "./_selection.js";
-import _pagination from "./_pagination.js";
-import _responsive from "./_responsive.js";
+import _pagination from "./_pagination.js";
+import _responsive from "./_responsive.js";
 import _expandable from "./_expandable.js";
 import _stickyHeader from "./_sticky-header.js";
 import _fixedColumns from "./_fixed-columns.js";
@@ -35,8 +35,8 @@ import {
 	WRAPPER_SELECTOR,
 } from "./_options.js";
 
-const FILTER_HIDDEN_ATTRIBUTE = 'data-vg-table-filter-hidden';
-const NOT_SPLITTER_CLASS = 'not-splitter';
+const FILTER_HIDDEN_ATTRIBUTE = 'data-vg-table-filter-hidden';
+const NOT_SPLITTER_CLASS = 'not-splitter';
 
 class VGTable extends BaseModule {
 	constructor(element, params = {}) {
@@ -64,8 +64,8 @@ class VGTable extends BaseModule {
 		this._panning = null;
 		this._selection = null;
 		this._expandable = null;
-		this._pagination = null;
-		this._responsive = null;
+		this._pagination = null;
+		this._responsive = null;
 		this._filters = null;
 		this._search = null;
 		this._skeleton = null;
@@ -80,11 +80,11 @@ class VGTable extends BaseModule {
 		this._fixedColumns = null;
 		this._columns = null;
 		this._rowReorder = null;
-		this._remote = null;
-		this._autoNotSplitterHeaders = new Set();
-		this._emptyHeaderSortOptions = new Map();
-		this._emptyHeaderSplittersSynced = false;
-		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;
@@ -114,9 +114,9 @@ class VGTable extends BaseModule {
 	 */
 	init() {
 		this._ensureWrapper();
-		this._ensureTableContainer();
-		this._syncComplexState();
-		this._syncEmptyHeaderSplitters();
+		this._ensureTableContainer();
+		this._syncComplexState();
+		this._syncEmptyHeaderSplitters();
 
 		// Включаем нативный sticky-заголовок без клонирования DOM
 		if (!this._stickyHeader && this._params.stickyHeader.enabled === true) {
@@ -148,12 +148,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._stickyHeader?.refreshIntrinsicMinimums?.();
+			this._element.addEventListener(
+				'sortchange.vg.table',
+				this._isRemote ? this._boundRemoteSortChange : this._boundLocalSortChange
+			);
+		}
+		this._stickyHeader?.refreshIntrinsicMinimums?.();
 
 		// Фиксируем настоящие ячейки через native sticky, включая отдельный слой Fixed Header
 		if (!this._complex && !this._fixedColumns && this._params.fixedColumns.enabled === true) {
@@ -189,17 +189,17 @@ class VGTable extends BaseModule {
 			this._expandable.init();
 		}
 
-		if (!this._responsive && this._params.responsive?.enabled === true) {
-			this._responsive = new _responsive(this._element, this._params.responsive, () => {
-				this._pagination?.updatePresentation(this._paginationOptions());
-			});
-			this._responsive.init();
-		}
-
-		// Включаем локальную или серверную пагинацию
-		if (!this._pagination && this._params.pagination.enabled === true) {
-			this._pagination = new _pagination(this._element, Object.assign({}, this._paginationOptions(), {
-				responsive: this._responsive?.getState().reason === null,
+		if (!this._responsive && this._params.responsive?.enabled === true) {
+			this._responsive = new _responsive(this._element, this._params.responsive, () => {
+				this._pagination?.updatePresentation(this._paginationOptions());
+			});
+			this._responsive.init();
+		}
+
+		// Включаем локальную или серверную пагинацию
+		if (!this._pagination && this._params.pagination.enabled === true) {
+			this._pagination = new _pagination(this._element, Object.assign({}, this._paginationOptions(), {
+				responsive: this._responsive?.getState().reason === null,
 				remote: this._isRemote,
 				onChange: (state) => this._handlePaginationChange(state),
 			}));
@@ -310,27 +310,27 @@ class VGTable extends BaseModule {
 		this._normalizeColumnsDataOptions();
 		this._normalizeRowReorderDataOptions();
 		if (this._remote) this._remote._options.labels = this._dictionary.remote || {};
-		this._pagination?.updatePresentation(this._paginationOptions());
+		this._pagination?.updatePresentation(this._paginationOptions());
 		this._expandable?.refresh?.();
 		this._columns?.refresh?.();
 		this._rowReorder?.refresh?.();
 		const state = this._states?.getState?.();
 		if (state) this._states.render(state.type);
 		EventHandler.trigger(this._element, 'localechange.vg.table', {locale: normalized});
-		return normalized;
-	}
-
-	/** Текущий брейкпоинт и накопленные переопределения; null при выключенном responsive. */
-	getResponsiveState() { return this._responsive?.getState() || null; }
-
-	/** Принудительно обновляет только адаптивное представление, без загрузки данных. */
-	refreshResponsive() { return this._responsive?.refresh(true) || null; }
-
-	_paginationOptions() {
-		const base = this._params.pagination;
-		const profile = this._responsive?.getState().pagination || {};
-		return {...base, ...profile, size: {...base.size, ...profile.size}, quick: {...base.quick, ...profile.quick}};
-	}
+		return normalized;
+	}
+
+	/** Текущий брейкпоинт и накопленные переопределения; null при выключенном responsive. */
+	getResponsiveState() { return this._responsive?.getState() || null; }
+
+	/** Принудительно обновляет только адаптивное представление, без загрузки данных. */
+	refreshResponsive() { return this._responsive?.refresh(true) || null; }
+
+	_paginationOptions() {
+		const base = this._params.pagination;
+		const profile = this._responsive?.getState().pagination || {};
+		return {...base, ...profile, size: {...base.size, ...profile.size}, quick: {...base.quick, ...profile.quick}};
+	}
 
 	_mergeLocale(target, source) {
 		if (!target || !source || typeof source !== 'object') return target;
@@ -473,38 +473,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);
-	}
-
-	/**
-	 * Скрывает разделитель и отключает сортировку у пустых заголовочных ячеек.
-	 * @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;
-	}
+		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;
+	}
 
 	/**
 	 * Подготовка переменных для пагинации
@@ -546,11 +546,11 @@ class VGTable extends BaseModule {
 		assign('ellipsis', (value) => { pagination.ellipsis = boolean(value); });
 		assign('ellipsis-hover', (value) => { pagination.ellipsisHover = boolean(value); });
 		assign('ellipsis-after', (value) => { pagination.threshold = number(value, pagination.threshold); });
-		assign('max-visible-pages', (value) => { pagination.visible = number(value, pagination.visible); });
-		assign('max-buttons', (value) => {
-			const parsed = Number(value);
-			pagination.maxButtons = Number.isInteger(parsed) && parsed >= 3 ? parsed : null;
-		});
+		assign('max-visible-pages', (value) => { pagination.visible = number(value, pagination.visible); });
+		assign('max-buttons', (value) => {
+			const parsed = Number(value);
+			pagination.maxButtons = Number.isInteger(parsed) && parsed >= 3 ? parsed : null;
+		});
 		assign('show-per-page', (value) => { pagination.size.enabled = boolean(value); });
 		assign('show-per-page-label', (value) => { pagination.size.label = boolean(value) ? 'Строк на странице' : false; });
 		assign('per-page-label', (value) => { pagination.size.label = value; });
@@ -1080,9 +1080,9 @@ class VGTable extends BaseModule {
 		return this._remote ? this._remote.export(format, options) : '';
 	}
 
-	refreshStickyHeader() {
-		return this._stickyHeader ? this._stickyHeader.refresh() : null;
-	}
+	refreshStickyHeader() {
+		return this._stickyHeader ? this._stickyHeader.refreshIntrinsicMinimums() : null;
+	}
 
 	refreshFixedColumns() {
 		return this._fixedColumns ? this._fixedColumns.refresh() : null;
@@ -1163,7 +1163,7 @@ class VGTable extends BaseModule {
 
 	_refreshColumnsLayout(structure = false) {
 		this._sorting?.refresh?.(structure);
-		this._stickyHeader?.refreshIntrinsicMinimums?.();
+		this._stickyHeader?.refreshIntrinsicMinimums?.();
 		this._fixedColumns?.refresh?.();
 	}
 
@@ -1452,18 +1452,18 @@ class VGTable extends BaseModule {
 	_afterRemoteRender(detail = {}) {
 		if (detail.renderedCount > 0) this._states?.clear();
 		this._columns?.refresh?.();
-		this._sorting?.refresh?.();
-		this._expandable?.refresh?.();
-		this._rowReorder?.refresh?.();
-		this._stickyHeader?.refreshIntrinsicMinimums?.();
-		this._fixedColumns?.refresh?.();
+		this._sorting?.refresh?.();
+		this._expandable?.refresh?.();
+		this._rowReorder?.refresh?.();
+		this._stickyHeader?.refreshIntrinsicMinimums?.();
+		this._fixedColumns?.refresh?.();
 	}
 
 	/**
 	 * Очистка ресурсов
 	 */
-	dispose() {
-		this._responsive?.dispose();
+	dispose() {
+		this._responsive?.dispose();
 		if (this._remote) this._remote.dispose();
 		if (this._skeleton) this._skeleton.dispose();
 		if (this._urlState) this._urlState.dispose();
@@ -1482,15 +1482,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._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');
+		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/_sorting.scss

@@ -1,7 +1,7 @@
 @mixin styles {
-	tr {
-		> th.vg-table-sortable {
-			padding-inline-end: var(--vg-table-sort-padding-inline-end);
+	tr {
+		> th.vg-table-sortable {
+			padding-inline-end: calc(var(--vg-table-sort-padding-inline-end) + var(--vg-table-sort-controls-space));
 			cursor: var(--vg-table-sort-cursor);
 			user-select: var(--vg-table-sort-user-select);
 
@@ -68,9 +68,9 @@
 		}
 	}
 
-	&.vg-table-sort-multiple tr > th.vg-table-sortable {
-		padding-inline-end: var(--vg-table-sort-multiple-padding-inline-end);
-	}
+	&.vg-table-sort-multiple tr > th.vg-table-sortable {
+		padding-inline-end: calc(var(--vg-table-sort-multiple-padding-inline-end) + var(--vg-table-sort-multiple-controls-space));
+	}
 
 	&.vg-table-sort-hover {
 		.vg-table-sortable:not([data-sort-direction]) {

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

@@ -23,18 +23,18 @@
 		border-radius: var(--vg-table-sticky-radius);
 		background: var(--vg-table-sticky-bg);
 
-		.vg-table-header,
-		.vg-table-body {
-			width: 100%;
-		}
-
-		.vg-table-header {
-			position: relative;
-			z-index: var(--vg-table-sticky-z-index);
-			overflow: hidden;
-			background: var(--vg-table-thead-bg);
-			border-start-start-radius: var(--vg-table-sticky-inner-radius);
-			border-start-end-radius: var(--vg-table-sticky-inner-radius);
+		.vg-table-header,
+		.vg-table-body {
+			width: 100%;
+		}
+
+		.vg-table-header {
+			position: relative;
+			z-index: var(--vg-table-sticky-z-index);
+			overflow: hidden;
+			background: var(--vg-table-thead-bg);
+			border-start-start-radius: var(--vg-table-sticky-inner-radius);
+			border-start-end-radius: var(--vg-table-sticky-inner-radius);
 
 			&--scrollbar::after {
 				content: "";
@@ -47,19 +47,19 @@
 				border-bottom: var(--vg-table-sticky-border-width) var(--vg-table-sticky-border-style) var(--vg-table-sticky-border-color);
 				background: var(--vg-table-fixed-header-bg, var(--vg-table-thead-bg));
 				pointer-events: none;
-			}
-		}
-
-		.vg-table-body {
-			position: relative;
-			z-index: 0;
-		}
-
-		.vg-table-header__table,
-		.vg-table-body > .vg-table {
-			width: 100%;
-			min-width: max(100%, var(--vg-table-sticky-content-min-width, 0px));
-			table-layout: fixed;
+			}
+		}
+
+		.vg-table-body {
+			position: relative;
+			z-index: 0;
+		}
+
+		.vg-table-header__table,
+		.vg-table-body > .vg-table {
+			width: 100%;
+			min-width: max(100%, var(--vg-table-sticky-content-min-width, 0px));
+			table-layout: fixed;
 			overflow: visible;
 			border: 0;
 			border-radius: 0;
@@ -120,9 +120,9 @@
 			}
 		}
 
-		.vg-table-body {
-			overflow-x: auto;
-			overflow-y: hidden;
-		}
-	}
-}
+		.vg-table-body {
+			overflow-x: auto;
+			overflow-y: hidden;
+		}
+	}
+}

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

@@ -79,10 +79,12 @@ $table-sizing: (
 
 // Локальная сортировка: зона заголовка, шевроны, focus-состояние и подсветка колонки.
 // Формирует переменные --vg-table-sort-*.
-$table-sort: (
-		padding-inline-end: calc(var(--vg-table-cell-padding-inline) + 1.25rem),
-		multiple-padding-inline-end: calc(var(--vg-table-cell-padding-inline) + 2.5rem),
-		cursor: pointer,
+$table-sort: (
+		padding-inline-end: var(--vg-table-cell-padding-inline),
+		multiple-padding-inline-end: var(--vg-table-sort-padding-inline-end),
+		controls-space: 1.25rem,
+		multiple-controls-space: 2.5rem,
+		cursor: pointer,
 		user-select: none,
 		controls-position: absolute,
 		controls-inset-inline-end: .75rem,

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

@@ -25,7 +25,9 @@
 	@include vg.mix-vars('table', table.$table-prop);
 	@include vg.mix-vars('table-wrapper', table.$table-wrapper);
 	@include vg.mix-vars('table-container', table.$table-container);
-	@include vg.mix-vars('table-sort', table.$table-sort);
+	// Размерные padding-переменные сортировки объявляются ниже на .vg-table:
+	// wrapper не может ссылаться на --vg-table-cell-padding-inline дочерней таблицы.
+	@include vg.mix-vars('table-sort', map.remove(table.$table-sort, 'padding-inline-end', 'multiple-padding-inline-end'));
 	@include vg.mix-vars('table-columns', table.$table-columns);
 	@include vg.mix-vars('table-row-reorder', table.$table-row-reorder);
 	@include vg.mix-vars('table-pan', table.$table-pan);
@@ -61,9 +63,11 @@
 		}
 	}
 	
-	.vg-table {
-		@include vg.mix-vars('table', map.get(table.$table-sizing, md));
-		@include vg.mix-vars('table-skeleton', table.$table-skeleton);
+	.vg-table {
+		@include vg.mix-vars('table', map.get(table.$table-sizing, md));
+		@include vg.mix-vars('table-skeleton', table.$table-skeleton);
+		--vg-table-sort-padding-inline-end: #{map.get(table.$table-sort, 'padding-inline-end')};
+		--vg-table-sort-multiple-padding-inline-end: #{map.get(table.$table-sort, 'multiple-padding-inline-end')};
 		border: 0;
 		border-radius: 0;
 		background: var(--vg-table-bg);