vgapp 1.5.7 → 1.5.8

package/app/modules/vgselect/scss/_variables.scss

@@ -1,11 +1,11 @@
-@use "../../../utils/scss" as vg;
-
-$select-current-map: (
-		background-color: var(--vg-control-bg, #ffffff),
-		color: var(--vg-text-color, #{vg.$color}),
-		border-width: vg.$border-width,
-		border-style: vg.$border-style,
-		border-color: var(--vg-control-border-color, #dddddd),
+@use "../../../utils/scss" as vg;
+
+$select-current-map: (
+		background-color: var(--vg-control-bg, #ffffff),
+		color: var(--vg-text-color, #{vg.$color}),
+		border-width: vg.$border-width,
+		border-style: vg.$border-style,
+		border-color: var(--vg-control-border-color, #dddddd),
 		border-radius: 5px,
 		padding-left: 16px,
 		padding-right: 40px,
@@ -16,69 +16,69 @@ $select-current-map: (
 		z-index: 10,
 ) !default;
 
-$select-placeholder-map: (
-		placehoder-color: var(--vg-text-placeholder-color, rgba(0, 0, 0, .32)),
-		placehoder-font-size: 16px,
-) !default;
+$select-placeholder-map: (
+		placehoder-color: var(--vg-text-placeholder-color, rgba(0, 0, 0, .32)),
+		placehoder-font-size: 16px,
+) !default;
 
 $select-current-svg: '<svg aria-hidden="true" focusable="false" data-prefix="fa-light" data-icon="chevron-down" class="svg-inline--fa fa-chevron-down fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M4 181C7 178 12 176 16 176C20 176 24 177 27 180L224 362L421 180C428 174 438 175 444 181C450 188 449 198 443 204L235 396C229 401 219 401 213 396L5 204C-1 198 -2 188 4 181Z" fill="gray"/></svg>' !default;
 
-$select-dropdown-map: (
-		background-color: var(--vg-control-bg, #ffffff),
-		color: var(--vg-text-color, #{vg.$color}),
-		border-width: vg.$border-width,
-		border-style: vg.$border-style,
-		border-color: var(--vg-control-border-color, #dddddd),
-		border-radius: vg.$border-radius,
-		box-shadow: 0 7px 12px 1px var(--vg-shadow-soft-color, rgba(68, 68, 68, .11)),
+$select-dropdown-map: (
+		background-color: var(--vg-control-bg, #ffffff),
+		color: var(--vg-text-color, #{vg.$color}),
+		border-width: vg.$border-width,
+		border-style: vg.$border-style,
+		border-color: var(--vg-control-border-color, #dddddd),
+		border-radius: vg.$border-radius,
+		box-shadow: 0 7px 12px 1px var(--vg-shadow-soft-color, rgba(68, 68, 68, .11)),
 		z-index: 15,
 ) !default;
 
-$select-list-map: (
-		background-color: transparent,
-		color: var(--vg-text-color, #{vg.$color}),
+$select-list-map: (
+		background-color: transparent,
+		color: var(--vg-text-color, #{vg.$color}),
 		padding-left: 8px,
 		padding-right: 8px,
 		padding-top: 8px,
 		padding-bottom: 8px,
-		border-bottom-width: vg.$border-width,
-		border-bottom-style: vg.$border-style,
-		border-bottom-color: var(--vg-border-disabled-color, #f5f5f5),
+		border-bottom-width: vg.$border-width,
+		border-bottom-style: vg.$border-style,
+		border-bottom-color: var(--vg-border-disabled-color, #f5f5f5),
 ) !default;
 
-$select-optgroup-map: (
-		background-color: transparent,
-		color: var(--vg-text-color, #{vg.$color}),
+$select-optgroup-map: (
+		background-color: transparent,
+		color: var(--vg-text-color, #{vg.$color}),
 		padding-left: 8px,
 		padding-right: 8px,
 		padding-top: 8px,
 		padding-bottom: 8px,
-		border-bottom-width: vg.$border-width,
-		border-bottom-style: vg.$border-style,
-		border-bottom-color: var(--vg-border-strong-color, #838383),
+		border-bottom-width: vg.$border-width,
+		border-bottom-style: vg.$border-style,
+		border-bottom-color: var(--vg-border-strong-color, #838383),
 		font-weight: 500,
 ) !default;
 
-$select-list-max-height: 286px !default;
+$select-list-max-height: 300px !default;
 $select-list-scrollbar-width: 6px !default;
-$select-list-scrollbar-bg: var(--vg-surface-muted-bg, #f5f5f5) !default;
-$select-list-scrollbar-thumb: var(--vg-text-muted-color, #999999) !default;
+$select-list-scrollbar-bg: var(--vg-surface-muted-bg, #f5f5f5) !default;
+$select-list-scrollbar-thumb: var(--vg-text-muted-color, #999999) !default;
 
-$select-list-hover-map: (
-		background-color: var(--vg-surface-hover-bg, #f7f7f7),
-		color: var(--vg-text-color, #{vg.$color}),
-		border-bottom-color: var(--vg-border-disabled-color, #f5f5f5),
+$select-list-hover-map: (
+		background-color: var(--vg-surface-hover-bg, #f7f7f7),
+		color: var(--vg-text-color, #{vg.$color}),
+		border-bottom-color: var(--vg-border-disabled-color, #f5f5f5),
 ) !default;
 
-$select-optgroup-hover-map: (
-		background-color: var(--vg-surface-hover-bg, #f7f7f7),
-		color: var(--vg-text-color, #{vg.$color}),
-		border-bottom-color: var(--vg-border-disabled-color, #f5f5f5),
+$select-optgroup-hover-map: (
+		background-color: var(--vg-surface-hover-bg, #f7f7f7),
+		color: var(--vg-text-color, #{vg.$color}),
+		border-bottom-color: var(--vg-border-disabled-color, #f5f5f5),
 ) !default;
 
-$select-search-map: (
-		background-color: var(--vg-control-muted-bg, #f2f2f2),
-		color: var(--vg-text-color, #{vg.$color})
+$select-search-map: (
+		background-color: var(--vg-control-muted-bg, #f2f2f2),
+		color: var(--vg-text-color, #{vg.$color})
 ) !default;
 
 $select-tags-map: (
@@ -88,15 +88,15 @@ $select-tags-map: (
 		padding: 2px 0
 ) !default;
 
-$select-tag-map: (
-		gap: 4px,
-		background: var(--vg-primary-color, #0d6efd),
-		color: var(--vg-primary-contrast-color, #ffffff),
+$select-tag-map: (
+		gap: 4px,
+		background: var(--vg-primary-color, #0d6efd),
+		color: var(--vg-primary-contrast-color, #ffffff),
 		padding: 2px 6px,
 		border-radius: 4px,
 		font-size: 14px,
 		remove-width: 12px,
 		remove-height: 12px,
-		remove-stroke: var(--vg-primary-contrast-color, #ffffff),
+		remove-stroke: var(--vg-primary-contrast-color, #ffffff),
 		remove-stroke-width: 2
 ) !default;

package/app/modules/vgselect/scss/vgselect.scss

@@ -11,7 +11,7 @@
 @use "variables" as vars;
 
 select {
-	&.vg-select[data-inited="true"] {
+	&.vg-select[data-inited="true"] {
 		position: absolute;
 		left: 0;
 		top: 0;

package/app/modules/vgsidebar/js/vgsidebar.js

@@ -1,8 +1,8 @@
-/**
- * Описание: боковые панели VGSidebar с декларативным и программным управлением.
- * Возможности: четыре стороны экрана, backdrop, прокрутка, URL-хэш, AJAX, события и доступность.
- */
-import BaseModule from "../../base-module";
+/**
+ * Описание: боковые панели VGSidebar с декларативным и программным управлением.
+ * Возможности: четыре стороны экрана, backdrop, прокрутка, URL-хэш, AJAX, события и доступность.
+ */
+import BaseModule from "../../base-module";
 import { isDisabled, isVisible, mergeDeepObject } from "../../../utils/js/functions";
 import EventHandler from "../../../utils/js/dom/event";
 import { dismissTrigger } from "../../module-fn";
@@ -215,8 +215,8 @@ class VGSidebar extends BaseModule {
 			EventHandler.on(window, EVENT_KEYS.POPSTATE_DATA_API, this._showPopstateHandler);
 		}
 
-		this._element.classList.add(CLASS_NAME_SHOW);
-		this._element.removeAttribute('aria-hidden');
+		this._element.classList.add(CLASS_NAME_SHOW);
+		this._element.removeAttribute('aria-hidden');
 		document.body.classList.add(CLASS_NAME_OPEN);
 
 		const completeCallback = () => {
@@ -242,8 +242,8 @@ class VGSidebar extends BaseModule {
 		const hideEvent = EventHandler.trigger(this._element, EVENT_KEYS.HIDE);
 		if (hideEvent.defaultPrevented) return;
 
-		this._element.classList.remove(CLASS_NAME_SHOW);
-		this._element.setAttribute('aria-hidden', 'true');
+		this._element.classList.remove(CLASS_NAME_SHOW);
+		this._element.setAttribute('aria-hidden', 'true');
 		const remainingOpenSidebars = VGSidebar.getOpenSidebars(this._element);
 		if (!remainingOpenSidebars.length) {
 			document.body.classList.remove(CLASS_NAME_OPEN);
@@ -294,17 +294,17 @@ class VGSidebar extends BaseModule {
 	 * Очищает ресурсы модуля.
 	 * @override
 	 */
-	dispose() {
-		if (!this._element) return;
-		EventHandler.off(document, EVENT_KEYS.KEYDOWN_DISMISS, this._keydownHandler);
-		EventHandler.off(this._element, EVENT_KEYS.HIDE);
+	dispose() {
+		if (!this._element) return;
+		EventHandler.off(document, EVENT_KEYS.KEYDOWN_DISMISS, this._keydownHandler);
+		EventHandler.off(this._element, EVENT_KEYS.HIDE);
 		if (this._showPopstateHandler) {
 			EventHandler.off(window, EVENT_KEYS.POPSTATE_DATA_API, this._showPopstateHandler);
 		}
-		if (!VGSidebar.getOpenSidebars(this._element).length && !Backdrop.isActive()) {
-			this._scrollBar.reset();
-		}
-		super.dispose();
+		if (!VGSidebar.getOpenSidebars(this._element).length && !Backdrop.isActive()) {
+			this._scrollBar.reset();
+		}
+		super.dispose();
 	}
 
 	/**
@@ -321,16 +321,16 @@ class VGSidebar extends BaseModule {
 	 * @private
 	 */
 	_addEventListeners() {
-		this._keydownHandler = (event) => {
-			if (event.key !== 'Escape' || !this._isShown()) return;
+		this._keydownHandler = (event) => {
+			if (event.key !== 'Escape' || !this._isShown()) return;
 
 			if (this._params.keyboard) {
 				this.hide();
 			} else {
 				EventHandler.trigger(this._element, EVENT_KEYS.HIDE_PREVENTED);
 			}
-		};
-		EventHandler.on(document, EVENT_KEYS.KEYDOWN_DISMISS, this._keydownHandler);
+		};
+		EventHandler.on(document, EVENT_KEYS.KEYDOWN_DISMISS, this._keydownHandler);
 	}
 }
 

package/app/modules/vgsidebar/scss/_variables.scss

@@ -1,6 +1,6 @@
-@use "../../../utils/scss" as vg;
-
-$sidebar-map: (
+@use "../../../utils/scss" as vg;
+
+$sidebar-map: (
 		horizontal: (
 				width: 400px,
 				height: 100vh,
@@ -9,13 +9,13 @@ $sidebar-map: (
 				width: 100vw,
 				height: 30vh,
 		),
-		bg-color:                  var(--vg-surface-bg, #{vg.$surface-bg}),
-		color:                     var(--vg-text-color, #{vg.$color}),
-		box-shadow:                var(--vg-box-shadow, #{vg.$box-shadow}),
+		bg-color:                  var(--vg-surface-bg, #{vg.$surface-bg}),
+		color:                     var(--vg-text-color, #{vg.$color}),
+		box-shadow:                var(--vg-box-shadow, #{vg.$box-shadow}),
 		header-height:             60px,
 		footer-height:             70px,
 		padding:                   1rem,
-		border:                    vg.$border-width vg.$border-style var(--vg-border-color, #{vg.$border-color}),
-		z-index:                   vg.$sidebar-index,
-		transition:                vg.$transition-base,
-) !default;
+		border:                    vg.$border-width vg.$border-style var(--vg-border-color, #{vg.$border-color}),
+		z-index:                   vg.$sidebar-index,
+		transition:                vg.$transition-base,
+) !default;

package/app/modules/vgsidebar/scss/vgsidebar.scss

@@ -6,12 +6,12 @@
 *--------------------------------------------------------------------------
 **/
 
-@forward "variables";
-@use "../../../utils/scss" as vg;
-@use "variables" as vars;
+@forward "variables";
+@use "../../../utils/scss" as vg;
+@use "variables" as vars;
 
 .vg-sidebar {
-	@include vg.mix-vars('sidebar', vars.$sidebar-map);
+	@include vg.mix-vars('sidebar', vars.$sidebar-map);
 	position: fixed;
 	width: auto;
 	height: auto;
@@ -90,4 +90,4 @@
 		padding: var(--vg-sidebar-padding);
 		border-top: var(--vg-sidebar-border);
 	}
-}
+}

package/app/modules/vgspy/js/vgspy.js

@@ -1,9 +1,9 @@
-/**
- * Описание: отслеживание активных секций и навигация по якорям.
- * Возможности: Data API, нативная и виртуальная прокрутка, вложенные меню и обновление секций.
- */
-import BaseModule from "../../base-module";
-import { getElement, isDisabled, isVisible, normalizeData } from "../../../utils/js/functions";
+/**
+ * Описание: отслеживание активных секций и навигация по якорям.
+ * Возможности: Data API, нативная и виртуальная прокрутка, вложенные меню и обновление секций.
+ */
+import BaseModule from "../../base-module";
+import { getElement, isDisabled, isVisible, normalizeData } from "../../../utils/js/functions";
 import EventHandler from "../../../utils/js/dom/event";
 import Selectors from "../../../utils/js/dom/selectors";
 
@@ -56,7 +56,7 @@ class VGSpy extends BaseModule {
 		 * @property {number[]|string} threshold - пороги видимости (0.1, 0.5, 1)
 		 */
 		this._params = this._configAfterMerge(
-			Object.assign(
+			Object.assign(
 				{
 					offset: null, // Устаревшее, для обратной совместимости
 					rootMargin: '0px 0px -25%',
@@ -64,8 +64,8 @@ class VGSpy extends BaseModule {
 					target: this._element,
 					threshold: [0.1, 0.5, 1],
 				},
-				params,
-				this._getDataOptions()
+				params,
+				this._getDataOptions()
 			)
 		);
 
@@ -135,27 +135,27 @@ class VGSpy extends BaseModule {
 	 * Ключ модуля (для хранения в data)
 	 * @returns {string}
 	 */
-	static get NAME_KEY() {
-		return NAME_KEY;
-	}
-
-	_getDataOptions() {
-		const options = {};
-		for (const name of ['target', 'offset', 'rootMargin', 'smoothScroll', 'threshold']) {
-			const attribute = `data-${name.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`)}`;
-			if (this._element.hasAttribute(attribute)) {
-				options[name] = normalizeData(this._element.getAttribute(attribute));
-			}
-		}
-		return options;
-	}
+	static get NAME_KEY() {
+		return NAME_KEY;
+	}
+
+	_getDataOptions() {
+		const options = {};
+		for (const name of ['target', 'offset', 'rootMargin', 'smoothScroll', 'threshold']) {
+			const attribute = `data-${name.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`)}`;
+			if (this._element.hasAttribute(attribute)) {
+				options[name] = normalizeData(this._element.getAttribute(attribute));
+			}
+		}
+		return options;
+	}
 
 	/**
 	 * Инициализирует или перезапускает модуль: находит ссылки и секции, создаёт observer
 	 */
-	refresh() {
-		this._process(null);
-		this._initializeTargetsAndObservables();
+	refresh() {
+		this._process(null);
+		this._initializeTargetsAndObservables();
 		this._updateRootElement();
 		this._maybeEnableSmoothScroll();
 
@@ -180,8 +180,8 @@ class VGSpy extends BaseModule {
 
 		// Smooth Scrollbar can be initialized after the spy; retry once on the next tick.
 		if (this._rootElement && !this._isScrollableSelf(this._rootElement) && window.Scrollbar) {
-			setTimeout(() => {
-				if (!this._element || this._scrollbar) return;
+			setTimeout(() => {
+				if (!this._element || this._scrollbar) return;
 				this._updateSmoothScrollbar();
 				if (this._scrollbar) this._setupScrollbarTracking();
 			}, 0);
@@ -373,9 +373,9 @@ class VGSpy extends BaseModule {
 		return window.scrollY || document.documentElement.scrollTop || 0;
 	}
 
-	dispose() {
-		if (!this._element) return;
-		this._process(null);
+	dispose() {
+		if (!this._element) return;
+		this._process(null);
 		if (this._observer) {
 			this._observer.disconnect();
 		}
@@ -434,9 +434,9 @@ class VGSpy extends BaseModule {
 			// If the target section is currently hidden (tabs/collapses/lazy layout),
 			// don't hijack the click; allow UI to reveal it, then retry.
 			if (!isVisible(section)) {
-				setTimeout(() => {
-					if (!this._element) return;
-					const revealed = Selectors.findID(id);
+				setTimeout(() => {
+					if (!this._element) return;
+					const revealed = Selectors.findID(id);
 					if (!revealed || !isVisible(revealed)) return;
 
 					this._targetLinks.set(revealed.id, link);
@@ -525,10 +525,10 @@ class VGSpy extends BaseModule {
 		const userScrollsDown = parentScrollTop >= this._previousScrollData.parentScrollTop;
 		this._previousScrollData.parentScrollTop = parentScrollTop;
 
-		for (const entry of entries) {
-			if (!entry.isIntersecting) {
-				if (getTargetLink(entry) === this._activeTarget) this._process(null);
-				continue;
+		for (const entry of entries) {
+			if (!entry.isIntersecting) {
+				if (getTargetLink(entry) === this._activeTarget) this._process(null);
+				continue;
 			}
 
 			const entryTop = this._getSectionTop(entry.target);
@@ -536,7 +536,7 @@ class VGSpy extends BaseModule {
 			const shouldActivate =
 				(userScrollsDown && isEntryBelow) || (!userScrollsDown && !isEntryBelow);
 
-			if (shouldActivate || !this._activeTarget) {
+			if (shouldActivate || !this._activeTarget) {
 				this._previousScrollData.visibleEntryTop = entryTop;
 				this._process(getTargetLink(entry));
 			}
@@ -615,7 +615,7 @@ class VGSpy extends BaseModule {
 		parent.classList.remove(CLASS_NAME_ACTIVE);
 
 		const activeLinks = Selectors.findAll(
-			`[href].${CLASS_NAME_ACTIVE}, [data-vg-target].${CLASS_NAME_ACTIVE}, ${SELECTOR_DROPDOWN_TOGGLE}.${CLASS_NAME_ACTIVE}`,
+			`[href].${CLASS_NAME_ACTIVE}, [data-vg-target].${CLASS_NAME_ACTIVE}, ${SELECTOR_DROPDOWN_TOGGLE}.${CLASS_NAME_ACTIVE}`,
 			parent
 		);
 		for (const link of activeLinks) {
@@ -623,9 +623,9 @@ class VGSpy extends BaseModule {
 		}
 	}
 
-	_getTargetIdFromTrigger(trigger) {
-		if (!trigger || typeof trigger.getAttribute !== 'function') return null;
-		if (isDisabled(trigger) || trigger.matches(SELECTOR_DROPDOWN_TOGGLE)) return null;
+	_getTargetIdFromTrigger(trigger) {
+		if (!trigger || typeof trigger.getAttribute !== 'function') return null;
+		if (isDisabled(trigger) || trigger.matches(SELECTOR_DROPDOWN_TOGGLE)) return null;
 
 		const dataTarget = (trigger.getAttribute('data-vg-target') || '').trim();
 		const href = (trigger.getAttribute('href') || '').trim();

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

@@ -2,7 +2,8 @@
  * Описание: форма локальных и remote-фильтров VGTable.
  * Возможности: auto/manual применение, debounce, операторы, reset и публичное состояние.
  */
-import EventHandler from "../../../utils/js/dom/event";
+import EventHandler from "../../../utils/js/dom/event";
+import VGSelect from "../../vgselect/js/vgselect";
 
 const EVENT_CHANGE = 'filterschange.vg.table';
 
@@ -112,11 +113,14 @@ class _filters {
 		return this.getState();
 	}
 
-	reset(options = {}) {
-		this._controls.forEach((control) => this._resetControl(control));
-		if (options.emit !== false) this._emit(String(options.source || 'reset'));
-		return this.getState();
-	}
+	reset(options = {}) {
+		this._controls.forEach((control) => {
+			this._resetControl(control);
+			if (control.tagName === 'SELECT') VGSelect.updateUI(control);
+		});
+		if (options.emit !== false) this._emit(String(options.source || 'reset'));
+		return this.getState();
+	}
 
 	_handleInput(event) {
 		if (!this._isControl(event.target) || this._isManual()) return;

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

@@ -1,13 +1,13 @@
 /**
  * Описание: константы и параметры по умолчанию базовой таблицы VGTable.
- * Возможности: единая настройка Data API, i18n, wrapper, remote, фильтров, sticky, колонок, строк, выбора и адаптивной пагинации.
- */
+ * Возможности: единая настройка Data API, i18n, wrapper, remote, фильтров, sticky, колонок, строк, выбора и адаптивной пагинации.
+ */
 
 /**
  * Служебные константы модуля.
  */
 // Имя компонента в публичном API. Варианты: фиксированное значение 'table'.
-const NAME = 'table';
+const NAME = 'table';
 // Ключ экземпляра в Data API. Варианты: фиксированное значение 'vg.table'.
 const NAME_KEY = `vg.${NAME}`;
 // Селектор автоматической инициализации. Варианты: элементы с атрибутом data-vg-table.
@@ -21,16 +21,16 @@ const TABLE_CONTAINER_SELECTOR = '.vg-table-container';
 // Маркер container, созданного компонентом. Варианты: пустой data-атрибут.
 const GENERATED_TABLE_CONTAINER_ATTRIBUTE = 'data-vg-table-generated-container';
 
-const DEFAULT_OPTIONS = {
-	/** Профили представления: базовые параметры + все достигнутые границы xs–xxl. */
-	responsive: {
-		// Включается явно; Data API: data-responsive-enabled.
-		enabled: false,
-		// Локальные переопределения границ общего Responsive; пустой объект сохраняет глобальные значения.
-		breakpoints: {},
-		// Профили принимают pagination: maxButtons, align, position, size.enabled/label, quick.enabled.
-		xs: {}, sm: {}, md: {}, lg: {}, xl: {}, xxl: {},
-	},
+const DEFAULT_OPTIONS = {
+	/** Профили представления: базовые параметры + все достигнутые границы xs–xxl. */
+	responsive: {
+		// Включается явно; Data API: data-responsive-enabled.
+		enabled: false,
+		// Локальные переопределения границ общего Responsive; пустой объект сохраняет глобальные значения.
+		breakpoints: {},
+		// Профили принимают pagination: maxButtons, align, position, size.enabled/label, quick.enabled.
+		xs: {}, sm: {}, md: {}, lg: {}, xl: {}, xxl: {},
+	},
 	// Активная локаль встроенного интерфейса. Data API: data-locale. Варианты: 'ru' | 'en' | региональный BCP 47 код.
 	locale: 'ru',
 	// Пользовательские словари, объединяемые со встроенными ru/en. Data API отсутствует; варианты: объект {locale: {group: {key: value}}}.
@@ -368,9 +368,9 @@ const DEFAULT_OPTIONS = {
 		// Задаёт число страниц, после которого разрешены многоточие и quick='auto'. Варианты: целое число >= 1.
 		threshold: 5,
 		// Задаёт максимальное число соседних страниц между первой и последней. Варианты: целое число >= 1.
-		visible: 5,
-		// Лимит номеров и многоточий без prev/next; null сохраняет visible/threshold. Data API: data-pagination-max-buttons.
-		maxButtons: null,
+		visible: 5,
+		// Лимит номеров и многоточий без prev/next; null сохраняет visible/threshold. Data API: data-pagination-max-buttons.
+		maxButtons: null,
 
 		/** Поле и VGDropdown для выбора количества строк. */
 		size: {