vgapp 1.5.7 → 1.5.8

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

@@ -1,6 +1,6 @@
 /**
  * Описание: локальная и remote-пагинация строк базовой таблицы VGTable.
- * Возможности: выбор страницы и размера, серверная meta, лимит кнопок, responsive-представление без запросов, многоточия, быстрый переход и сохранение.
+ * Возможности: выбор страницы и размера, серверная meta, лимит кнопок, responsive-представление без запросов, многоточия, быстрый переход и сохранение.
  */
 import EventHandler from "../../../utils/js/dom/event";
 import VGDropdown from "../../vgdropdown";
@@ -16,10 +16,10 @@ class _pagination {
 		this._options = options;
 		this._host = table.closest('.vg-table-wrapper') || table.parentElement;
 		this._containers = [];
-		this._dropdowns = [];
-		this._externalVisibility = new Map();
-		this._manageExternalVisibility = options.responsive === true;
-		this._updatingPresentation = false;
+		this._dropdowns = [];
+		this._externalVisibility = new Map();
+		this._manageExternalVisibility = options.responsive === true;
+		this._updatingPresentation = false;
 		this._page = this._positiveInt(options.page, 1);
 		this._perPage = this._clampPerPage(options.per);
 		this._remote = options.remote === true;
@@ -32,24 +32,24 @@ class _pagination {
 		this._boundFocusOut = this._handleFocusOut.bind(this);
 	}
 
-	init() {
-		this._restoreState();
-		this._containers = this._resolveContainers();
-		this._bindContainers();
-		this.refresh();
-	}
-
-	_bindContainers() {
-		this._containers.forEach((container) => {
+	init() {
+		this._restoreState();
+		this._containers = this._resolveContainers();
+		this._bindContainers();
+		this.refresh();
+	}
+
+	_bindContainers() {
+		this._containers.forEach((container) => {
 			container.addEventListener('click', this._boundClick);
 			container.addEventListener('change', this._boundChange);
 			container.addEventListener('keydown', this._boundKeydown);
 			container.addEventListener('focusin', this._boundFocusIn);
 			container.addEventListener('focusout', this._boundFocusOut);
 		});
-	}
-
-	_releaseContainers() {
+	}
+
+	_releaseContainers() {
 		this._disposeDropdowns();
 		this._containers.forEach((container) => {
 			container.removeEventListener('click', this._boundClick);
@@ -57,69 +57,69 @@ class _pagination {
 			container.removeEventListener('keydown', this._boundKeydown);
 			container.removeEventListener('focusin', this._boundFocusIn);
 			container.removeEventListener('focusout', this._boundFocusOut);
-			if (container.hasAttribute(GENERATED_ATTRIBUTE)) container.remove();
-		});
-		this._containers = [];
-	}
-
-	dispose() {
-		this._releaseContainers();
-		this._externalVisibility.forEach((hidden, container) => { container.hidden = hidden; });
-		this._externalVisibility.clear();
+			if (container.hasAttribute(GENERATED_ATTRIBUTE)) container.remove();
+		});
+		this._containers = [];
+	}
+
+	dispose() {
+		this._releaseContainers();
+		this._externalVisibility.forEach((hidden, container) => { container.hidden = hidden; });
+		this._externalVisibility.clear();
 		this._rows().forEach((row) => {
 			row.hidden = row.getAttribute('data-vg-table-expand-hidden') === 'true'
 				|| row.hasAttribute('data-vg-table-filter-hidden');
 			row.removeAttribute('data-vg-table-page-row');
 		});
-		this._containers = [];
-	}
-
-	/** Обновляет только панели: не трогает строки, page/per, storage, scroll или onChange. */
-	updatePresentation(options) {
-		const focus = this._captureFocus();
-		const position = this._position();
-		this._updatingPresentation = true;
-		try {
-			this._options = {...this._options, ...options};
-			if (position !== this._position()) {
-				this._manageExternalVisibility = true;
-				this._releaseContainers();
-				this._containers = this._resolveContainers();
-				this._bindContainers();
-			}
-			this._renderControls();
-		} finally {
-			this._updatingPresentation = false;
-		}
-		this._restoreFocus(focus);
-	}
-
-	_captureFocus() {
-		const active = this._table.ownerDocument.activeElement;
-		const container = this._containers.find((item) => item.contains(active));
-		if (!container) return null;
-		const attribute = ['data-pagination-page', 'data-pagination-per-page', 'data-pagination-quick-input', 'data-pagination-quick-button']
-			.find((name) => active.hasAttribute(name));
-		return {
-			position: this._positionFor(container), attribute, value: attribute ? active.getAttribute(attribute) : null,
-			inputValue: active.tagName === 'INPUT' ? active.value : null,
-			start: active.selectionStart, end: active.selectionEnd,
-		};
-	}
-
-	_restoreFocus(focus) {
-		if (!focus) return;
-		const container = this._containers.find((item) => this._positionFor(item) === focus.position) || this._containers[0];
-		if (!container) return;
-		const matching = focus.attribute ? Array.from(container.querySelectorAll(`[${focus.attribute}]`))
-			.find((item) => !item.disabled && item.getAttribute(focus.attribute) === focus.value) : null;
-		const target = matching || container.querySelector('[aria-current="page"]');
-		target?.focus({preventScroll: true});
-		if (matching && focus.inputValue !== null) {
-			matching.value = focus.inputValue;
-			if (focus.start !== null && focus.start !== undefined) matching.setSelectionRange(focus.start, focus.end);
-		}
-	}
+		this._containers = [];
+	}
+
+	/** Обновляет только панели: не трогает строки, page/per, storage, scroll или onChange. */
+	updatePresentation(options) {
+		const focus = this._captureFocus();
+		const position = this._position();
+		this._updatingPresentation = true;
+		try {
+			this._options = {...this._options, ...options};
+			if (position !== this._position()) {
+				this._manageExternalVisibility = true;
+				this._releaseContainers();
+				this._containers = this._resolveContainers();
+				this._bindContainers();
+			}
+			this._renderControls();
+		} finally {
+			this._updatingPresentation = false;
+		}
+		this._restoreFocus(focus);
+	}
+
+	_captureFocus() {
+		const active = this._table.ownerDocument.activeElement;
+		const container = this._containers.find((item) => item.contains(active));
+		if (!container) return null;
+		const attribute = ['data-pagination-page', 'data-pagination-per-page', 'data-pagination-quick-input', 'data-pagination-quick-button']
+			.find((name) => active.hasAttribute(name));
+		return {
+			position: this._positionFor(container), attribute, value: attribute ? active.getAttribute(attribute) : null,
+			inputValue: active.tagName === 'INPUT' ? active.value : null,
+			start: active.selectionStart, end: active.selectionEnd,
+		};
+	}
+
+	_restoreFocus(focus) {
+		if (!focus) return;
+		const container = this._containers.find((item) => this._positionFor(item) === focus.position) || this._containers[0];
+		if (!container) return;
+		const matching = focus.attribute ? Array.from(container.querySelectorAll(`[${focus.attribute}]`))
+			.find((item) => !item.disabled && item.getAttribute(focus.attribute) === focus.value) : null;
+		const target = matching || container.querySelector('[aria-current="page"]');
+		target?.focus({preventScroll: true});
+		if (matching && focus.inputValue !== null) {
+			matching.value = focus.inputValue;
+			if (focus.start !== null && focus.start !== undefined) matching.setSelectionRange(focus.start, focus.end);
+		}
+	}
 
 	setPage(page, emit = false, source = 'api') {
 		const nextPage = this._clampPage(page);
@@ -192,11 +192,11 @@ class _pagination {
 			});
 		}
 
-		this._renderControls();
-	}
-
-	_renderControls() {
-		const markup = this._buildMarkup();
+		this._renderControls();
+	}
+
+	_renderControls() {
+		const markup = this._buildMarkup();
 		this._disposeDropdowns();
 		this._containers.forEach((container) => {
 			container.className = `vg-table-pagination vg-table-pagination--${this._positionFor(container)}`;
@@ -286,10 +286,10 @@ class _pagination {
 		return `<svg class="vg-table-page__ellipsis-chevron vg-table-page__ellipsis-chevron--${direction}" viewBox="0 0 20 20" focusable="false" aria-hidden="true">${paths}</svg>`;
 	}
 
-	_buildPages() {
-		const total = this._totalPages();
-		const maxButtons = this._options.maxButtons;
-		if (Number.isInteger(maxButtons) && maxButtons >= 3) return this._buildLimitedPages(total, maxButtons);
+	_buildPages() {
+		const total = this._totalPages();
+		const maxButtons = this._options.maxButtons;
+		if (Number.isInteger(maxButtons) && maxButtons >= 3) return this._buildLimitedPages(total, maxButtons);
 		const visible = Math.max(1, this._positiveInt(this._options.visible, 5));
 		const threshold = Math.max(1, this._positiveInt(this._options.threshold, 5));
 		if (this._options.ellipsis === false || total <= threshold || total <= visible + 2) {
@@ -304,30 +304,30 @@ class _pagination {
 		for (let page = start; page <= end; page += 1) pages.push(page);
 		if (end < total - 1) pages.push({direction: 'next'});
 		pages.push(total);
-		return pages;
-	}
-
-	_buildLimitedPages(total, maximum) {
-		if (total <= maximum) return this._range(1, total);
-		if (maximum < 5 || this._options.ellipsis === false) {
-			const start = Math.max(1, Math.min(this._page - Math.floor(maximum / 2), total - maximum + 1));
-			return this._range(start, start + maximum - 1);
-		}
-		// Резервируем края и подбираем наибольшее окно, учитывая оба многоточия в лимите.
-		for (let count = maximum - 2; count >= 1; count -= 1) {
-			const start = Math.max(2, Math.min(this._page - Math.floor(count / 2), total - count));
-			const end = start + count - 1;
-			const pages = [1];
-			if (start === 3) pages.push(2);
-			else if (start > 3) pages.push({direction: 'prev'});
-			pages.push(...this._range(start, end));
-			if (end === total - 2) pages.push(total - 1);
-			else if (end < total - 2) pages.push({direction: 'next'});
-			pages.push(total);
-			if (pages.length <= maximum) return pages;
-		}
-		return [this._page];
-	}
+		return pages;
+	}
+
+	_buildLimitedPages(total, maximum) {
+		if (total <= maximum) return this._range(1, total);
+		if (maximum < 5 || this._options.ellipsis === false) {
+			const start = Math.max(1, Math.min(this._page - Math.floor(maximum / 2), total - maximum + 1));
+			return this._range(start, start + maximum - 1);
+		}
+		// Резервируем края и подбираем наибольшее окно, учитывая оба многоточия в лимите.
+		for (let count = maximum - 2; count >= 1; count -= 1) {
+			const start = Math.max(2, Math.min(this._page - Math.floor(count / 2), total - count));
+			const end = start + count - 1;
+			const pages = [1];
+			if (start === 3) pages.push(2);
+			else if (start > 3) pages.push({direction: 'prev'});
+			pages.push(...this._range(start, end));
+			if (end === total - 2) pages.push(total - 1);
+			else if (end < total - 2) pages.push({direction: 'next'});
+			pages.push(total);
+			if (pages.length <= maximum) return pages;
+		}
+		return [this._page];
+	}
 
 	_handleClick(event) {
 		const sizeOption = event.target.closest('[data-pagination-per-page-option]');
@@ -386,8 +386,8 @@ class _pagination {
 		if (input) input.value = String(this._perPage);
 	}
 
-	_handleFocusOut(event) {
-		if (this._updatingPresentation) return;
+	_handleFocusOut(event) {
+		if (this._updatingPresentation) return;
 		const input = event.target.closest('[data-pagination-per-page]');
 		if (!input) return;
 		const related = event.relatedTarget instanceof Element ? event.relatedTarget : null;
@@ -413,14 +413,14 @@ class _pagination {
 	_resolveContainers() {
 		if (!this._host) return [];
 		const position = this._position();
-		const existing = Array.from(this._host.querySelectorAll('[data-vg-table-pagination]'));
-		if (existing.length) {
-			const selected = position === 'both' ? existing : [existing.find((item) => item.getAttribute('data-position') === position) || existing[0]];
-			if (this._manageExternalVisibility) existing.forEach((container) => {
-				if (!this._externalVisibility.has(container)) this._externalVisibility.set(container, container.hidden);
-				container.hidden = !selected.includes(container);
-			});
-			return selected;
+		const existing = Array.from(this._host.querySelectorAll('[data-vg-table-pagination]'));
+		if (existing.length) {
+			const selected = position === 'both' ? existing : [existing.find((item) => item.getAttribute('data-position') === position) || existing[0]];
+			if (this._manageExternalVisibility) existing.forEach((container) => {
+				if (!this._externalVisibility.has(container)) this._externalVisibility.set(container, container.hidden);
+				container.hidden = !selected.includes(container);
+			});
+			return selected;
 		}
 
 		const positions = position === 'both' ? ['top', 'bottom'] : [position];

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

@@ -1,79 +1,79 @@
-/**
- * Описание: адаптер общего Responsive для представления VGTable.
- * Возможности: отбор безопасных параметров пагинации и события таблицы; границы, наследование и подписки делегируются Responsive.
- */
-import EventHandler from "../../../utils/js/dom/event";
-import {Responsive} from "../../../utils/js/components/responsive";
-
-const object = (value) => value && typeof value === 'object' && !Array.isArray(value);
-
-// Только представление: page/per, callbacks, storage и параметры запросов не принимаются.
-const paginationProfile = (value) => {
-	const result = {};
-	if (!object(value)) return result;
-	if (value.maxButtons === null || (Number.isInteger(value.maxButtons) && value.maxButtons >= 3)) result.maxButtons = value.maxButtons;
-	if (['left', 'center', 'right', 'between'].includes(value.align)) result.align = value.align;
-	if (['top', 'bottom', 'both'].includes(value.position)) result.position = value.position;
-	if (object(value.size)) {
-		result.size = {};
-		if (typeof value.size.enabled === 'boolean') result.size.enabled = value.size.enabled;
-		if (value.size.label === false || typeof value.size.label === 'string') result.size.label = value.size.label;
-	}
-	if (object(value.quick) && [true, false, 'auto'].includes(value.quick.enabled)) result.quick = {enabled: value.quick.enabled};
-	return result;
-};
-
-class _responsive {
-	constructor(table, options, onChange) {
-		this._table = table;
-		this._onChange = onChange;
-		this._responsive = new Responsive({breakpoints: options.breakpoints, window: table.ownerDocument.defaultView});
-		this._profiles = Object.fromEntries(Object.keys(this._responsive.breakpoints).map((name) => [name, paginationProfile(options[name]?.pagination)]));
-		this._breakpoint = null;
-		this._pagination = {};
-		this._width = 0;
-		this._valid = this._responsive.isValid();
-	}
-
-	init() {
-		if (!this._valid) {
-			console.warn('VGTable: responsive.breakpoints must start at xs: 0 and increase through xxl.');
-			return this;
-		}
-		this.refresh();
-		this._responsive.subscribe(() => this.refresh());
-		return this;
-	}
-
-	refresh(force = false) {
-		if (!this._valid || !this._responsive) return this.getState();
-		this._width = this._responsive.viewport().width;
-		const breakpoint = this._responsive.getBreakpointKey(this._width);
-		if (!force && breakpoint === this._breakpoint) return this.getState();
-		const previous = this._breakpoint;
-		this._breakpoint = breakpoint;
-		this._pagination = this._responsive.resolve(this._profiles, {}, this._width);
-		this._onChange();
-		if (previous !== null && previous !== breakpoint) {
-			EventHandler.trigger(this._table, 'responsivechange.vg.table', {...this.getState(), previous});
-		}
-		return this.getState();
-	}
-
-	getState() {
-		return {
-			breakpoint: this._breakpoint,
-			width: this._responsive?.viewport().width ?? this._width,
-			reason: this._valid ? null : 'invalid-breakpoints',
-			pagination: {...this._pagination, size: {...this._pagination.size}, quick: {...this._pagination.quick}},
-		};
-	}
-
-	dispose() {
-		this._width = this._responsive?.viewport().width ?? this._width;
-		this._responsive?.dispose();
-		this._responsive = null;
-	}
-}
-
-export default _responsive;
+/**
+ * Описание: адаптер общего Responsive для представления VGTable.
+ * Возможности: отбор безопасных параметров пагинации и события таблицы; границы, наследование и подписки делегируются Responsive.
+ */
+import EventHandler from "../../../utils/js/dom/event";
+import {Responsive} from "../../../utils/js/components/responsive";
+
+const object = (value) => value && typeof value === 'object' && !Array.isArray(value);
+
+// Только представление: page/per, callbacks, storage и параметры запросов не принимаются.
+const paginationProfile = (value) => {
+	const result = {};
+	if (!object(value)) return result;
+	if (value.maxButtons === null || (Number.isInteger(value.maxButtons) && value.maxButtons >= 3)) result.maxButtons = value.maxButtons;
+	if (['left', 'center', 'right', 'between'].includes(value.align)) result.align = value.align;
+	if (['top', 'bottom', 'both'].includes(value.position)) result.position = value.position;
+	if (object(value.size)) {
+		result.size = {};
+		if (typeof value.size.enabled === 'boolean') result.size.enabled = value.size.enabled;
+		if (value.size.label === false || typeof value.size.label === 'string') result.size.label = value.size.label;
+	}
+	if (object(value.quick) && [true, false, 'auto'].includes(value.quick.enabled)) result.quick = {enabled: value.quick.enabled};
+	return result;
+};
+
+class _responsive {
+	constructor(table, options, onChange) {
+		this._table = table;
+		this._onChange = onChange;
+		this._responsive = new Responsive({breakpoints: options.breakpoints, window: table.ownerDocument.defaultView});
+		this._profiles = Object.fromEntries(Object.keys(this._responsive.breakpoints).map((name) => [name, paginationProfile(options[name]?.pagination)]));
+		this._breakpoint = null;
+		this._pagination = {};
+		this._width = 0;
+		this._valid = this._responsive.isValid();
+	}
+
+	init() {
+		if (!this._valid) {
+			console.warn('VGTable: responsive.breakpoints must start at xs: 0 and increase through xxl.');
+			return this;
+		}
+		this.refresh();
+		this._responsive.subscribe(() => this.refresh());
+		return this;
+	}
+
+	refresh(force = false) {
+		if (!this._valid || !this._responsive) return this.getState();
+		this._width = this._responsive.viewport().width;
+		const breakpoint = this._responsive.getBreakpointKey(this._width);
+		if (!force && breakpoint === this._breakpoint) return this.getState();
+		const previous = this._breakpoint;
+		this._breakpoint = breakpoint;
+		this._pagination = this._responsive.resolve(this._profiles, {}, this._width);
+		this._onChange();
+		if (previous !== null && previous !== breakpoint) {
+			EventHandler.trigger(this._table, 'responsivechange.vg.table', {...this.getState(), previous});
+		}
+		return this.getState();
+	}
+
+	getState() {
+		return {
+			breakpoint: this._breakpoint,
+			width: this._responsive?.viewport().width ?? this._width,
+			reason: this._valid ? null : 'invalid-breakpoints',
+			pagination: {...this._pagination, size: {...this._pagination.size}, quick: {...this._pagination.quick}},
+		};
+	}
+
+	dispose() {
+		this._width = this._responsive?.viewport().width ?? this._width;
+		this._responsive?.dispose();
+		this._responsive = null;
+	}
+}
+
+export default _responsive;