vgapp 1.5.7 → 1.5.8

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;