vgapp 1.5.7 → 1.5.9

package/app/modules/vgnav/scss/vgnav.scss

@@ -6,23 +6,23 @@
 *--------------------------------------------------------------------------
 **/
 
-@forward "variables";
-@forward "breakpoints";
-@use "sass:map";
-@use "../../../utils/scss" as vg;
-@use "breakpoints";
-@use "hamburger";
-@use "placement";
-@use "toggle";
-@use "variables" as vars;
+@forward "variables";
+@forward "breakpoints";
+@use "sass:map";
+@use "../../../utils/scss" as vg;
+@use "breakpoints";
+@use "hamburger";
+@use "placement";
+@use "toggle";
+@use "variables" as vars;
 
 .vg-nav {
-	@include vg.mix-vars('nav', vars.$nav-map);
-	@include vg.mix-vars('nav-item', vars.$nav-item-map);
-	@include vg.mix-vars('nav-drop', vars.$nav-drop-map);
-	@include vg.mix-vars('nav-drop-mega', vars.$nav-drop-mega-map);
-	@include vg.mix-vars('nav-drop-item', vars.$nav-drop-item-map);
-	@include vg.mix-vars('nav-hamburger', vars.$hamburger-map);
+	@include vg.mix-vars('nav', vars.$nav-map);
+	@include vg.mix-vars('nav-item', vars.$nav-item-map);
+	@include vg.mix-vars('nav-drop', vars.$nav-drop-map);
+	@include vg.mix-vars('nav-drop-mega', vars.$nav-drop-mega-map);
+	@include vg.mix-vars('nav-drop-item', vars.$nav-drop-item-map);
+	@include vg.mix-vars('nav-hamburger', vars.$hamburger-map);
 
 	.vg-nav-wrapper {
 		display: flex;
@@ -52,7 +52,7 @@
 		li {
 			a {
 				/** set toggle **/
-				@include toggle.toggle();
+				@include toggle.toggle();
 			}
 		}
 
@@ -74,9 +74,9 @@
 				background-color: var(--vg-nav-drop-bg);
 				overflow: visible;
 
-				&:not(.show) {
-					display: none;
-				}
+				&:not(.show) {
+					display: none;
+				}
 
 				&.fade {
 					visibility: visible;
@@ -133,32 +133,32 @@
 					}
 				}
 			}
-		}
-	}
-
-	&.vg-nav-drop-list-scroll {
-		.vg-nav-wrapper {
-			.dropdown {
-				.dropdown-content {
-					> .vg-nav-drop-list {
-						max-height: var(--vg-nav-drop-max-height);
-						overflow-y: var(--vg-nav-drop-overflow-y);
-						overflow-x: var(--vg-nav-drop-overflow-x);
-					}
-				}
-			}
-		}
-	}
-
-	/** set placement **/
-	@include placement.placement();
+		}
+	}
+
+	&.vg-nav-drop-list-scroll {
+		.vg-nav-wrapper {
+			.dropdown {
+				.dropdown-content {
+					> .vg-nav-drop-list {
+						max-height: var(--vg-nav-drop-max-height);
+						overflow-y: var(--vg-nav-drop-overflow-y);
+						overflow-x: var(--vg-nav-drop-overflow-x);
+					}
+				}
+			}
+		}
+	}
+
+	/** set placement **/
+	@include placement.placement();
 
 	/** set hamburger **/
-	@include hamburger.hamburger();
+	@include hamburger.hamburger();
 
 	&:not(.vg-nav-expand) {
-		@each $breakpoint in map.keys(vars.$grid-breakpoints) {
-			@include breakpoints.media-breakpoint-down($breakpoint, vars.$grid-breakpoints) {
+		@each $breakpoint in map.keys(vars.$grid-breakpoints) {
+			@include breakpoints.media-breakpoint-down($breakpoint, vars.$grid-breakpoints) {
 				&.vg-nav-#{$breakpoint} {
 					.vg-nav-hamburger {
 						display: flex;

package/app/modules/vgnestable/README.md

@@ -69,18 +69,18 @@ const nestable = VGNestable.getOrCreateInstance("#myNestable", {
 Значения по умолчанию:
 
 ```js
-{
-  disabled: false,
-  disabledattribute: "data-disabled",
-  listselector: ".vg-nestable-list",
+{
+  disabled: false,
+  disabledattribute: "data-disabled",
+  listselector: ".vg-nestable-list",
   itemselector: ".vg-nestable-item",
   handleselector: ".vg-nestable-handle",
   idattribute: "data-id",
   childlistclass: "vg-nestable-list",
   handleicon: "",
-  indent: 18,
+  indent: 18,
   maxdepth: 6,
-  hoverthreshold: 0.25,
+  hoverthreshold: 0.25,
   neighborchangethreshold: 0,
   showplaceholder: true,
   group: "",
@@ -119,49 +119,49 @@ const nestable = VGNestable.getOrCreateInstance("#myNestable", {
 }
 ```
 
-### Пояснение параметров
-
-- `disabled`: полностью отключает изменение дерева мышью, touch и клавиатурой. Также читается из `data-disabled="true"` корневого элемента.
-- `disabledattribute`: атрибут блокировки отдельных элементов и вложенных списков (`data-disabled` по умолчанию).
-- `listselector`: селектор корневого/вложенных списков.
+### Пояснение параметров
+
+- `disabled`: полностью отключает изменение дерева мышью, touch и клавиатурой. Также читается из `data-disabled="true"` корневого элемента.
+- `disabledattribute`: атрибут блокировки отдельных элементов и вложенных списков (`data-disabled` по умолчанию).
+- `listselector`: селектор корневого/вложенных списков.
 - `itemselector`: селектор sortable-элемента.
 - `handleselector`: селектор зоны, за которую можно начинать drag.
 - `idattribute`: атрибут, из которого берется `id` в `serialize()`.
 - `childlistclass`: классы для автосозданного дочернего списка.
 - `handleicon`: HTML/SVG иконки хэндла (проходит SVG-санитизацию).
-- `indent`: ширина одного горизонтального шага вложенности. Каждый следующий шаг вправо переносит элемент ещё на один доступный уровень под предыдущий элемент.
+- `indent`: ширина одного горизонтального шага вложенности. Каждый следующий шаг вправо переносит элемент ещё на один доступный уровень под предыдущий элемент.
 - `maxdepth`: максимальная глубина дерева.
-- `hoverthreshold`: половина высоты центральной зоны (0.05..0.45), используемой для вложения; выше и ниже неё находятся зоны `before/after`.
+- `hoverthreshold`: половина высоты центральной зоны (0.05..0.45), используемой для вложения; выше и ниже неё находятся зоны `before/after`.
 - `neighborchangethreshold`: порог в процентах (0..49), альтернативная логика смены позиции по краям элемента.
 - `showplaceholder`: показывать/скрывать placeholder во время drag.
 - `group`: имя группы списков для межспискового dnd.
 - `connect`: включить связь списков внутри группы.
-- `accept(item, sourceInstance, targetInstance)`: функция-фильтр разрешения дропа в target.
-
-### Блокировка перетаскивания
-
-Заблокировать всё дерево, в том числе запретить перенос в него из связанного списка:
-
-```html
-<div class="vg-nestable" data-vg-toggle="nestable" data-disabled="true">
-  <ol class="vg-nestable-list">...</ol>
-</div>
-```
-
-Заблокировать только конкретный элемент. Другие элементы по-прежнему могут вставляться до/после него, поэтому его индекс в результате может измениться:
-
-```html
-<li class="vg-nestable-item" data-id="2" data-disabled="true">...</li>
-```
-
-Заблокировать внутреннюю группу. Её элементы нельзя переносить отдельно или добавлять в эту группу, но родительскую ветку можно перемещать целиком:
-
-```html
-<li class="vg-nestable-item" data-id="1">
-  <div class="vg-nestable-inner">...</div>
-  <ol class="vg-nestable-list" data-disabled="true">...</ol>
-</li>
-```
+- `accept(item, sourceInstance, targetInstance)`: функция-фильтр разрешения дропа в target.
+
+### Блокировка перетаскивания
+
+Заблокировать всё дерево, в том числе запретить перенос в него из связанного списка:
+
+```html
+<div class="vg-nestable" data-vg-toggle="nestable" data-disabled="true">
+  <ol class="vg-nestable-list">...</ol>
+</div>
+```
+
+Заблокировать только конкретный элемент. Другие элементы по-прежнему могут вставляться до/после него, поэтому его индекс в результате может измениться:
+
+```html
+<li class="vg-nestable-item" data-id="2" data-disabled="true">...</li>
+```
+
+Заблокировать внутреннюю группу. Её элементы нельзя переносить отдельно или добавлять в эту группу, но родительскую ветку можно перемещать целиком:
+
+```html
+<li class="vg-nestable-item" data-id="1">
+  <div class="vg-nestable-inner">...</div>
+  <ol class="vg-nestable-list" data-disabled="true">...</ol>
+</li>
+```
 
 #### `collapse`
 

package/app/modules/vgrangeslider/js/skins.js

@@ -1,8 +1,8 @@
-/**
- * Описание: визуальные режимы VGRangeSlider — default, ruler и status.
- * Возможности: шкала с адаптивными координатами, активные отметки и пороговые цвета с текстовыми статусами.
- */
-const SKIN_CLASS_DEFAULT = 'is-skin-default';
+/**
+ * Описание: визуальные режимы VGRangeSlider — default, ruler и status.
+ * Возможности: шкала с адаптивными координатами, активные отметки и пороговые цвета с текстовыми статусами.
+ */
+const SKIN_CLASS_DEFAULT = 'is-skin-default';
 const SKIN_CLASS_RULER = 'is-skin-ruler';
 const SKIN_CLASS_STATUS = 'is-skin-status';
 const SKIN_CLASS_RULER_DIM = 'is-ruler-dim-inactive';
@@ -210,9 +210,9 @@ const syncRangeSliderSkin = (skin, state, helpers) => {
 
 	const isRange = state.from !== state.to || helpers.isRange;
 
-	skin.ticks.forEach((tick, index) => {
-		const value = skin.values[index];
-		tick.style.left = `${helpers.toPositionPx(value)}px`;
+	skin.ticks.forEach((tick, index) => {
+		const value = skin.values[index];
+		tick.style.left = `${helpers.toPositionPx(value)}px`;
 		const isActive = isRange
 			? value >= state.from && value <= state.to
 			: value <= state.from;

package/app/modules/vgrangeslider/js/vgrangeslider.js

@@ -1,8 +1,8 @@
-/**
- * Описание: одиночные и диапазонные слайдеры VGRangeSlider на нативных range-input.
- * Возможности: Data API, шкала и статусы, форматирование, синхронизация формы, события и управление значениями.
- */
-import BaseModule from "../../base-module";
+/**
+ * Описание: одиночные и диапазонные слайдеры VGRangeSlider на нативных range-input.
+ * Возможности: Data API, шкала и статусы, форматирование, синхронизация формы, события и управление значениями.
+ */
+import BaseModule from "../../base-module";
 import EventHandler from "../../../utils/js/dom/event";
 import Selectors from "../../../utils/js/dom/selectors";
 import { mergeDeepObject, normalizeData } from "../../../utils/js/functions";
@@ -263,10 +263,10 @@ class VGRangeSlider extends BaseModule {
 		this._dom.labelFrom = Selectors.find('.vg-range-slider__label--from', root);
 		this._dom.labelTo = Selectors.find('.vg-range-slider__label--to', root);
 		this._dom.labelSeparator = Selectors.find('.vg-range-slider__separator', root);
-		this._dom.hiddenMin ||= root.querySelector('input[data-vgrangeslider-hidden="min"]');
-		this._dom.hiddenMax ||= root.querySelector('input[data-vgrangeslider-hidden="max"]');
-		this._dom.skin = applyRangeSliderSkin(root, this._params, this._state, {
-			isRange: this._isRange,
+		this._dom.hiddenMin ||= root.querySelector('input[data-vgrangeslider-hidden="min"]');
+		this._dom.hiddenMax ||= root.querySelector('input[data-vgrangeslider-hidden="max"]');
+		this._dom.skin = applyRangeSliderSkin(root, this._params, this._state, {
+			isRange: this._isRange,
 			formatValue: (value) => this._formatValue(value),
 			toPositionPx: (value) => this._toPositionPx(value),
 		});
@@ -343,11 +343,11 @@ class VGRangeSlider extends BaseModule {
 			root.appendChild(this._createLabels(this._isRange));
 		}
 
-		if (this._isRange) {
-			this._dom.hiddenMin = this._ensureHiddenInput(root, 'min', this._params.input?.min, this._params.name?.min);
-			this._dom.hiddenMax = this._ensureHiddenInput(root, 'max', this._params.input?.max, this._params.name?.max);
-		} else if (this._params.name?.min) {
-			this._dom.hiddenMin = this._ensureHiddenInput(root, 'min', this._params.input?.min, this._params.name.min);
+		if (this._isRange) {
+			this._dom.hiddenMin = this._ensureHiddenInput(root, 'min', this._params.input?.min, this._params.name?.min);
+			this._dom.hiddenMax = this._ensureHiddenInput(root, 'max', this._params.input?.max, this._params.name?.max);
+		} else if (this._params.name?.min) {
+			this._dom.hiddenMin = this._ensureHiddenInput(root, 'min', this._params.input?.min, this._params.name.min);
 		}
 
 		return root;
@@ -404,8 +404,8 @@ class VGRangeSlider extends BaseModule {
 			if (name) input.name = name;
 			root.appendChild(input);
 		}
-		input.setAttribute('data-vgrangeslider-hidden', role);
-		return input;
+		input.setAttribute('data-vgrangeslider-hidden', role);
+		return input;
 	}
 
 	_bindEvents() {
@@ -448,8 +448,8 @@ class VGRangeSlider extends BaseModule {
 		window.addEventListener('resize', this._handleResize);
 	}
 
-	_syncUI() {
-		if (!this._isRange) this._state.to = this._state.from;
+	_syncUI() {
+		if (!this._isRange) this._state.to = this._state.from;
 		const fromPercent = this._toPercent(this._state.from);
 		const toPercent = this._toPercent(this._isRange ? this._state.to : this._state.from);
 		const fromPosition = this._toPositionPx(this._state.from);
@@ -474,11 +474,11 @@ class VGRangeSlider extends BaseModule {
 		if (this._dom.labelSeparator) this._dom.labelSeparator.hidden = !this._isRange;
 
 		this._syncTargets();
-		syncRangeSliderSkin(this._dom.skin, this._state, {
-			isRange: this._isRange,
-			params: this._params,
-			dom: this._dom,
-			toPositionPx: (value) => this._toPositionPx(value),
+		syncRangeSliderSkin(this._dom.skin, this._state, {
+			isRange: this._isRange,
+			params: this._params,
+			dom: this._dom,
+			toPositionPx: (value) => this._toPositionPx(value),
 		});
 	}
 
@@ -573,12 +573,12 @@ class VGRangeSlider extends BaseModule {
 		const numeric = Number(normalizeData(value));
 		const safeValue = Number.isFinite(numeric) ? numeric : fallback;
 		const clamped = Math.min(Math.max(safeValue, min), max);
-		const configuredStep = Number(this._state?.step ?? this._params.step);
-		const step = Number.isFinite(configuredStep) && configuredStep > 0 ? configuredStep : 1;
-		// Округление не должно выводить значение за max или с нативной сетки шага.
-		const maxSteps = Math.floor((max - min) / step + 1e-9);
-		const steps = Math.min(Math.round((clamped - min) / step), maxSteps);
-		const stepped = steps * step + min;
+		const configuredStep = Number(this._state?.step ?? this._params.step);
+		const step = Number.isFinite(configuredStep) && configuredStep > 0 ? configuredStep : 1;
+		// Округление не должно выводить значение за max или с нативной сетки шага.
+		const maxSteps = Math.floor((max - min) / step + 1e-9);
+		const steps = Math.min(Math.round((clamped - min) / step), maxSteps);
+		const stepped = steps * step + min;
 		return Number(stepped.toFixed(5));
 	}
 

package/app/modules/vgrangeslider/scss/_variables.scss

@@ -1,55 +1,55 @@
-@use "../../../utils/scss" as vg;
-
-$range-slider-map: (
-	bg: var(--vg-control-muted-bg, #f1f4f8),
-	fill: var(--vg-control-strong-color, #111827),
-	thumb: var(--vg-control-bg, #ffffff),
-	thumb-border: var(--vg-control-strong-color, #111827),
-	text: var(--vg-control-strong-color, #111827),
-	muted: var(--vg-text-muted-color, #6b7280),
-	gap: 10px,
-	height: 6px,
-	radius: 999px,
-	z-ruler: 1,
-	z-track: 2,
-	z-fill: 3,
-	z-input: 4,
-	z-tooltip: 5,
-	wrapper-min-height: 36px,
-	wrapper-padding-top: 12px,
-	wrapper-padding-bottom: 6px,
-	input-height: 24px,
-	thumb-size: 18px,
-	thumb-border-width: 2px,
-	thumb-shadow: 0 2px 10px var(--vg-shadow-soft-color, rgba(17, 24, 39, .16)),
-	tooltip-bg: var(--vg-surface-inverse-bg, #111827),
-	tooltip-color: var(--vg-text-inverse-color, #ffffff),
-	tooltip-padding-y: 4px,
-	tooltip-padding-x: 8px,
-	tooltip-radius: 6px,
-	tooltip-shadow: 0 6px 18px var(--vg-shadow-soft-color, rgba(17, 24, 39, .18)),
-	tooltip-font-size: 12px,
-	tooltip-line-height: 1.2,
-	labels-gap: 6px,
-	labels-font-size: 13px,
-	labels-line-height: 1.4,
-	label-font-weight: 500,
-	ruler-mark-width: 1px,
-	ruler-mark-height: 8px,
-	ruler-mark-bg: var(--vg-control-mark-color, #cbd5e1),
-	ruler-gap-y: 13px,
-	ruler-label-offset: 8px,
-	ruler-label-font-size: 11px,
-	ruler-label-line-height: 1.2,
-	ruler-label-color: var(--vg-text-muted-color, #6b7280),
-	ruler-active-mark-bg: var(--vg-control-strong-color, #111827),
-	ruler-active-label-color: var(--vg-control-strong-color, #111827),
-	ruler-inactive-opacity: .5,
-	ruler-active-opacity: 1,
-	status-success: var(--vg-success-color, #{vg.$success}),
-	status-warning: var(--vg-warning-color, #{vg.$warning}),
-	status-danger: var(--vg-danger-color, #{vg.$danger}),
-	status-success-contrast: var(--vg-success-contrast-color, #ffffff),
-	status-warning-contrast: var(--vg-warning-contrast-color, #111827),
-	status-danger-contrast: var(--vg-danger-contrast-color, #ffffff),
-) !default;
+@use "../../../utils/scss" as vg;
+
+$range-slider-map: (
+	bg: var(--vg-control-muted-bg, #f1f4f8),
+	fill: var(--vg-control-strong-color, #111827),
+	thumb: var(--vg-control-bg, #ffffff),
+	thumb-border: var(--vg-control-strong-color, #111827),
+	text: var(--vg-control-strong-color, #111827),
+	muted: var(--vg-text-muted-color, #6b7280),
+	gap: 10px,
+	height: 6px,
+	radius: 999px,
+	z-ruler: 1,
+	z-track: 2,
+	z-fill: 3,
+	z-input: 4,
+	z-tooltip: 5,
+	wrapper-min-height: 36px,
+	wrapper-padding-top: 12px,
+	wrapper-padding-bottom: 6px,
+	input-height: 24px,
+	thumb-size: 18px,
+	thumb-border-width: 2px,
+	thumb-shadow: 0 2px 10px var(--vg-shadow-soft-color, rgba(17, 24, 39, .16)),
+	tooltip-bg: var(--vg-surface-inverse-bg, #111827),
+	tooltip-color: var(--vg-text-inverse-color, #ffffff),
+	tooltip-padding-y: 4px,
+	tooltip-padding-x: 8px,
+	tooltip-radius: 6px,
+	tooltip-shadow: 0 6px 18px var(--vg-shadow-soft-color, rgba(17, 24, 39, .18)),
+	tooltip-font-size: 12px,
+	tooltip-line-height: 1.2,
+	labels-gap: 6px,
+	labels-font-size: 13px,
+	labels-line-height: 1.4,
+	label-font-weight: 500,
+	ruler-mark-width: 1px,
+	ruler-mark-height: 8px,
+	ruler-mark-bg: var(--vg-control-mark-color, #cbd5e1),
+	ruler-gap-y: 13px,
+	ruler-label-offset: 8px,
+	ruler-label-font-size: 11px,
+	ruler-label-line-height: 1.2,
+	ruler-label-color: var(--vg-text-muted-color, #6b7280),
+	ruler-active-mark-bg: var(--vg-control-strong-color, #111827),
+	ruler-active-label-color: var(--vg-control-strong-color, #111827),
+	ruler-inactive-opacity: .5,
+	ruler-active-opacity: 1,
+	status-success: var(--vg-success-color, #{vg.$success}),
+	status-warning: var(--vg-warning-color, #{vg.$warning}),
+	status-danger: var(--vg-danger-color, #{vg.$danger}),
+	status-success-contrast: var(--vg-success-contrast-color, #ffffff),
+	status-warning-contrast: var(--vg-warning-contrast-color, #111827),
+	status-danger-contrast: var(--vg-danger-contrast-color, #ffffff),
+) !default;