vgapp 1.5.7 → 1.5.8

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

@@ -1,239 +1,239 @@
-/**
-*--------------------------------------------------------------------------
-* Module: VGRangeSlider
-*--------------------------------------------------------------------------
-**/
-
-@forward "variables";
-@use "../../../utils/scss" as vg;
-@use "variables" as vars;
-
-.vg-range-slider {
-	@include vg.mix-vars('range-slider', vars.$range-slider-map);
-
-	--vg-range-slider-ruler-height: calc(
-		var(--vg-range-slider-ruler-mark-height) +
-		var(--vg-range-slider-ruler-label-offset) +
-		(var(--vg-range-slider-ruler-label-font-size) * var(--vg-range-slider-ruler-label-line-height))
-	);
-	--vg-range-slider-ruler-offset-y: calc(var(--vg-range-slider-ruler-gap-y) * -1);
-	--vg-range-slider-wrapper-padding-bottom-ruler: calc(
-		var(--vg-range-slider-ruler-height) + var(--vg-range-slider-ruler-gap-y)
-	);
-
-	position: relative;
-	display: grid;
-	gap: var(--vg-range-slider-gap);
-	color: var(--vg-range-slider-text);
-
-	&.disabled {
-		opacity: .65;
-	}
-
-	&__wrapper {
-		position: relative;
-		min-height: var(--vg-range-slider-wrapper-min-height);
-		padding: var(--vg-range-slider-wrapper-padding-top) 0 var(--vg-range-slider-wrapper-padding-bottom);
-	}
-
-	&.is-skin-ruler {
-		.vg-range-slider__wrapper {
-			padding-bottom: var(--vg-range-slider-wrapper-padding-bottom-ruler);
-		}
-
-		.vg-range-slider__labels {
-			display: none;
-		}
-	}
-
-	&.is-ruler-dim-inactive {
-		.vg-range-slider__ruler-item {
-			opacity: var(--vg-range-slider-ruler-inactive-opacity);
-		}
-
-		.vg-range-slider__ruler-item.is-active {
-			opacity: var(--vg-range-slider-ruler-active-opacity);
-		}
-	}
-
-	&.is-skin-status {
-		&.is-status-success {
-			--vg-range-slider-fill: var(--vg-range-slider-status-success);
-			--vg-range-slider-thumb-border: var(--vg-range-slider-status-success);
-			--vg-range-slider-tooltip-bg: var(--vg-range-slider-status-success);
-			--vg-range-slider-tooltip-color: var(--vg-range-slider-status-success-contrast);
-		}
-
-		&.is-status-warning {
-			--vg-range-slider-fill: var(--vg-range-slider-status-warning);
-			--vg-range-slider-thumb-border: var(--vg-range-slider-status-warning);
-			--vg-range-slider-tooltip-bg: var(--vg-range-slider-status-warning);
-			--vg-range-slider-tooltip-color: var(--vg-range-slider-status-warning-contrast);
-		}
-
-		&.is-status-danger {
-			--vg-range-slider-fill: var(--vg-range-slider-status-danger);
-			--vg-range-slider-thumb-border: var(--vg-range-slider-status-danger);
-			--vg-range-slider-tooltip-bg: var(--vg-range-slider-status-danger);
-			--vg-range-slider-tooltip-color: var(--vg-range-slider-status-danger-contrast);
-		}
-	}
-
-	&__track,
-	&__fill {
-		position: absolute;
-		top: 50%;
-		transform: translateY(-50%);
-		height: var(--vg-range-slider-height);
-		border-radius: var(--vg-range-slider-radius);
-	}
-
-	&__track {
-		left: 0;
-		right: 0;
-		z-index: var(--vg-range-slider-z-track);
-		background: var(--vg-range-slider-bg);
-	}
-
-	&__fill {
-		left: 0;
-		width: 0;
-		z-index: var(--vg-range-slider-z-fill);
-		background: var(--vg-range-slider-fill);
-	}
-
-	&__input {
-		position: absolute;
-		top: 50%;
-		left: 0;
-		width: 100%;
-		height: var(--vg-range-slider-input-height);
-		transform: translateY(-50%);
-		margin: 0;
-		background: transparent;
-		pointer-events: none;
-		z-index: var(--vg-range-slider-z-input);
-		appearance: none;
-		-webkit-appearance: none;
-
-		&::-webkit-slider-runnable-track {
-			height: var(--vg-range-slider-height);
-			background: transparent;
-		}
-
-		&::-moz-range-track {
-			height: var(--vg-range-slider-height);
-			background: transparent;
-		}
-
-		&::-webkit-slider-thumb {
-			width: var(--vg-range-slider-thumb-size);
-			height: var(--vg-range-slider-thumb-size);
-			margin-top: calc((var(--vg-range-slider-height) - var(--vg-range-slider-thumb-size)) / 2);
-			border: var(--vg-range-slider-thumb-border-width) solid var(--vg-range-slider-thumb-border);
-			border-radius: 50%;
-			background: var(--vg-range-slider-thumb);
-			box-shadow: var(--vg-range-slider-thumb-shadow);
-			cursor: pointer;
-			pointer-events: auto;
-			appearance: none;
-			-webkit-appearance: none;
-		}
-
-		&::-moz-range-thumb {
-			width: var(--vg-range-slider-thumb-size);
-			height: var(--vg-range-slider-thumb-size);
-			border: var(--vg-range-slider-thumb-border-width) solid var(--vg-range-slider-thumb-border);
-			border-radius: 50%;
-			background: var(--vg-range-slider-thumb);
-			box-shadow: var(--vg-range-slider-thumb-shadow);
-			cursor: pointer;
-			pointer-events: auto;
-		}
-
-		&:focus {
-			outline: none;
-		}
-	}
-
-	&__tooltip {
-		position: absolute;
-		top: 0;
-		z-index: var(--vg-range-slider-z-tooltip);
-		transform: translate(-50%, -100%);
-		padding: var(--vg-range-slider-tooltip-padding-y) var(--vg-range-slider-tooltip-padding-x);
-		border-radius: var(--vg-range-slider-tooltip-radius);
-		background: var(--vg-range-slider-tooltip-bg);
-		box-shadow: var(--vg-range-slider-tooltip-shadow);
-		color: var(--vg-range-slider-tooltip-color);
-		font-size: var(--vg-range-slider-tooltip-font-size);
-		line-height: var(--vg-range-slider-tooltip-line-height);
-		white-space: nowrap;
-		pointer-events: none;
-
-		&.is-hidden {
-			opacity: 0;
-			visibility: hidden;
-		}
-	}
-
-	&__labels {
-		display: flex;
-		align-items: center;
-		gap: var(--vg-range-slider-labels-gap);
-		font-size: var(--vg-range-slider-labels-font-size);
-		line-height: var(--vg-range-slider-labels-line-height);
-	}
-
-	&__label {
-		font-weight: var(--vg-range-slider-label-font-weight);
-	}
-
-	&__separator {
-		color: var(--vg-range-slider-muted);
-	}
-
-	&__ruler {
-		position: absolute;
-		left: 0;
-		right: 0;
-		bottom: var(--vg-range-slider-ruler-offset-y);
-		z-index: var(--vg-range-slider-z-ruler);
-		height: var(--vg-range-slider-ruler-height);
-		pointer-events: none;
-	}
-
-	&__ruler-item {
-		position: absolute;
-		bottom: 0;
-		transform: translateX(-50%);
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		transition: opacity .2s ease;
-
-		&.is-active {
-			.vg-range-slider__ruler-mark {
-				background: var(--vg-range-slider-ruler-active-mark-bg);
-			}
-
-			.vg-range-slider__ruler-label {
-				color: var(--vg-range-slider-ruler-active-label-color);
-			}
-		}
-	}
-
-	&__ruler-mark {
-		width: var(--vg-range-slider-ruler-mark-width);
-		height: var(--vg-range-slider-ruler-mark-height);
-		background: var(--vg-range-slider-ruler-mark-bg);
-	}
-
-	&__ruler-label {
-		margin-top: var(--vg-range-slider-ruler-label-offset);
-		font-size: var(--vg-range-slider-ruler-label-font-size);
-		line-height: var(--vg-range-slider-ruler-label-line-height);
-		color: var(--vg-range-slider-ruler-label-color);
-		white-space: nowrap;
-	}
-}
+/**
+*--------------------------------------------------------------------------
+* Module: VGRangeSlider
+*--------------------------------------------------------------------------
+**/
+
+@forward "variables";
+@use "../../../utils/scss" as vg;
+@use "variables" as vars;
+
+.vg-range-slider {
+	@include vg.mix-vars('range-slider', vars.$range-slider-map);
+
+	--vg-range-slider-ruler-height: calc(
+		var(--vg-range-slider-ruler-mark-height) +
+		var(--vg-range-slider-ruler-label-offset) +
+		(var(--vg-range-slider-ruler-label-font-size) * var(--vg-range-slider-ruler-label-line-height))
+	);
+	--vg-range-slider-ruler-offset-y: calc(var(--vg-range-slider-ruler-gap-y) * -1);
+	--vg-range-slider-wrapper-padding-bottom-ruler: calc(
+		var(--vg-range-slider-ruler-height) + var(--vg-range-slider-ruler-gap-y)
+	);
+
+	position: relative;
+	display: grid;
+	gap: var(--vg-range-slider-gap);
+	color: var(--vg-range-slider-text);
+
+	&.disabled {
+		opacity: .65;
+	}
+
+	&__wrapper {
+		position: relative;
+		min-height: var(--vg-range-slider-wrapper-min-height);
+		padding: var(--vg-range-slider-wrapper-padding-top) 0 var(--vg-range-slider-wrapper-padding-bottom);
+	}
+
+	&.is-skin-ruler {
+		.vg-range-slider__wrapper {
+			padding-bottom: var(--vg-range-slider-wrapper-padding-bottom-ruler);
+		}
+
+		.vg-range-slider__labels {
+			display: none;
+		}
+	}
+
+	&.is-ruler-dim-inactive {
+		.vg-range-slider__ruler-item {
+			opacity: var(--vg-range-slider-ruler-inactive-opacity);
+		}
+
+		.vg-range-slider__ruler-item.is-active {
+			opacity: var(--vg-range-slider-ruler-active-opacity);
+		}
+	}
+
+	&.is-skin-status {
+		&.is-status-success {
+			--vg-range-slider-fill: var(--vg-range-slider-status-success);
+			--vg-range-slider-thumb-border: var(--vg-range-slider-status-success);
+			--vg-range-slider-tooltip-bg: var(--vg-range-slider-status-success);
+			--vg-range-slider-tooltip-color: var(--vg-range-slider-status-success-contrast);
+		}
+
+		&.is-status-warning {
+			--vg-range-slider-fill: var(--vg-range-slider-status-warning);
+			--vg-range-slider-thumb-border: var(--vg-range-slider-status-warning);
+			--vg-range-slider-tooltip-bg: var(--vg-range-slider-status-warning);
+			--vg-range-slider-tooltip-color: var(--vg-range-slider-status-warning-contrast);
+		}
+
+		&.is-status-danger {
+			--vg-range-slider-fill: var(--vg-range-slider-status-danger);
+			--vg-range-slider-thumb-border: var(--vg-range-slider-status-danger);
+			--vg-range-slider-tooltip-bg: var(--vg-range-slider-status-danger);
+			--vg-range-slider-tooltip-color: var(--vg-range-slider-status-danger-contrast);
+		}
+	}
+
+	&__track,
+	&__fill {
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%);
+		height: var(--vg-range-slider-height);
+		border-radius: var(--vg-range-slider-radius);
+	}
+
+	&__track {
+		left: 0;
+		right: 0;
+		z-index: var(--vg-range-slider-z-track);
+		background: var(--vg-range-slider-bg);
+	}
+
+	&__fill {
+		left: 0;
+		width: 0;
+		z-index: var(--vg-range-slider-z-fill);
+		background: var(--vg-range-slider-fill);
+	}
+
+	&__input {
+		position: absolute;
+		top: 50%;
+		left: 0;
+		width: 100%;
+		height: var(--vg-range-slider-input-height);
+		transform: translateY(-50%);
+		margin: 0;
+		background: transparent;
+		pointer-events: none;
+		z-index: var(--vg-range-slider-z-input);
+		appearance: none;
+		-webkit-appearance: none;
+
+		&::-webkit-slider-runnable-track {
+			height: var(--vg-range-slider-height);
+			background: transparent;
+		}
+
+		&::-moz-range-track {
+			height: var(--vg-range-slider-height);
+			background: transparent;
+		}
+
+		&::-webkit-slider-thumb {
+			width: var(--vg-range-slider-thumb-size);
+			height: var(--vg-range-slider-thumb-size);
+			margin-top: calc((var(--vg-range-slider-height) - var(--vg-range-slider-thumb-size)) / 2);
+			border: var(--vg-range-slider-thumb-border-width) solid var(--vg-range-slider-thumb-border);
+			border-radius: 50%;
+			background: var(--vg-range-slider-thumb);
+			box-shadow: var(--vg-range-slider-thumb-shadow);
+			cursor: pointer;
+			pointer-events: auto;
+			appearance: none;
+			-webkit-appearance: none;
+		}
+
+		&::-moz-range-thumb {
+			width: var(--vg-range-slider-thumb-size);
+			height: var(--vg-range-slider-thumb-size);
+			border: var(--vg-range-slider-thumb-border-width) solid var(--vg-range-slider-thumb-border);
+			border-radius: 50%;
+			background: var(--vg-range-slider-thumb);
+			box-shadow: var(--vg-range-slider-thumb-shadow);
+			cursor: pointer;
+			pointer-events: auto;
+		}
+
+		&:focus {
+			outline: none;
+		}
+	}
+
+	&__tooltip {
+		position: absolute;
+		top: 0;
+		z-index: var(--vg-range-slider-z-tooltip);
+		transform: translate(-50%, -100%);
+		padding: var(--vg-range-slider-tooltip-padding-y) var(--vg-range-slider-tooltip-padding-x);
+		border-radius: var(--vg-range-slider-tooltip-radius);
+		background: var(--vg-range-slider-tooltip-bg);
+		box-shadow: var(--vg-range-slider-tooltip-shadow);
+		color: var(--vg-range-slider-tooltip-color);
+		font-size: var(--vg-range-slider-tooltip-font-size);
+		line-height: var(--vg-range-slider-tooltip-line-height);
+		white-space: nowrap;
+		pointer-events: none;
+
+		&.is-hidden {
+			opacity: 0;
+			visibility: hidden;
+		}
+	}
+
+	&__labels {
+		display: flex;
+		align-items: center;
+		gap: var(--vg-range-slider-labels-gap);
+		font-size: var(--vg-range-slider-labels-font-size);
+		line-height: var(--vg-range-slider-labels-line-height);
+	}
+
+	&__label {
+		font-weight: var(--vg-range-slider-label-font-weight);
+	}
+
+	&__separator {
+		color: var(--vg-range-slider-muted);
+	}
+
+	&__ruler {
+		position: absolute;
+		left: 0;
+		right: 0;
+		bottom: var(--vg-range-slider-ruler-offset-y);
+		z-index: var(--vg-range-slider-z-ruler);
+		height: var(--vg-range-slider-ruler-height);
+		pointer-events: none;
+	}
+
+	&__ruler-item {
+		position: absolute;
+		bottom: 0;
+		transform: translateX(-50%);
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		transition: opacity .2s ease;
+
+		&.is-active {
+			.vg-range-slider__ruler-mark {
+				background: var(--vg-range-slider-ruler-active-mark-bg);
+			}
+
+			.vg-range-slider__ruler-label {
+				color: var(--vg-range-slider-ruler-active-label-color);
+			}
+		}
+	}
+
+	&__ruler-mark {
+		width: var(--vg-range-slider-ruler-mark-width);
+		height: var(--vg-range-slider-ruler-mark-height);
+		background: var(--vg-range-slider-ruler-mark-bg);
+	}
+
+	&__ruler-label {
+		margin-top: var(--vg-range-slider-ruler-label-offset);
+		font-size: var(--vg-range-slider-ruler-label-font-size);
+		line-height: var(--vg-range-slider-ruler-label-line-height);
+		color: var(--vg-range-slider-ruler-label-color);
+		white-space: nowrap;
+	}
+}

package/app/modules/vgrollup/js/vgrollup.js

@@ -1,8 +1,8 @@
-/**
- * Описание: сворачивание текста и списков VGRollup.
- * Возможности: ограничение высоты, строк и количества элементов, локализация кнопок, Data API, callbacks и события.
- */
-import BaseModule from "../../base-module";
+/**
+ * Описание: сворачивание текста и списков VGRollup.
+ * Возможности: ограничение высоты, строк и количества элементов, локализация кнопок, Data API, callbacks и события.
+ */
+import BaseModule from "../../base-module";
 import { execute, isDisabled, mergeDeepObject } from "../../../utils/js/functions";
 import EventHandler from "../../../utils/js/dom/event";
 import Selectors from "../../../utils/js/dom/selectors";
@@ -102,7 +102,7 @@ class VGRollup extends BaseModule {
 			}
 		};
 
-		const lang = Manipulator.get(element, 'data-lang') || params.lang || defaultParams.lang;
+		const lang = Manipulator.get(element, 'data-lang') || params.lang || defaultParams.lang;
 
 		// Локализация текстов кнопок
 		defaultParams.button.more = lang_buttons(lang, NAME)['show'];
@@ -292,8 +292,8 @@ class VGRollup extends BaseModule {
 
 		if (isEllipsis && line) {
 			Classes.add(element, this.classes.ellipsis);
-			element.style.lineClamp  = Number(line);
-			element.style.setProperty('-webkit-line-clamp', String(Number(line)));
+			element.style.lineClamp  = Number(line);
+			element.style.setProperty('-webkit-line-clamp', String(Number(line)));
 		} else if (isEllipsis) {
 			console.error("Переменная [data-line] или параметр[line] не должны быть пустыми");
 		}
@@ -382,14 +382,14 @@ class VGRollup extends BaseModule {
 
 				if (this._params.ellipsis.line) {
 					Classes.add(el, this.classes.ellipsis);
-					el.style.lineClamp = this._params.ellipsis.line;
-					el.style.setProperty('-webkit-line-clamp', String(this._params.ellipsis.line));
+					el.style.lineClamp = this._params.ellipsis.line;
+					el.style.setProperty('-webkit-line-clamp', String(this._params.ellipsis.line));
 				}
 
 				if (this._params.fade) Classes.add(el, this.classes.fade);
 				if (this._params.transition) Classes.add(el, this.classes.transition);
 
-				execute(this._params.callbacks.collapse, [el, this])
+				execute(this._params.callbacks.collapse, [el, this])
 			} else if (content === 'elements') {
 				const items = Selectors.findAll('.' + this._params.elements, el);
 				items.forEach((item, index) => {
@@ -405,9 +405,9 @@ class VGRollup extends BaseModule {
 		} else {
 			const { hidden, ellipsis, fade } = this.classes;
 			Classes.remove(el, [hidden, ellipsis, fade]);
-			el.style.removeProperty('height');
-			el.style.removeProperty('line-clamp');
-			el.style.removeProperty('-webkit-line-clamp');
+			el.style.removeProperty('height');
+			el.style.removeProperty('line-clamp');
+			el.style.removeProperty('-webkit-line-clamp');
 
 			if (this._params.content === 'elements') {
 				const items = Selectors.findAll('.' + this._params.elements, el);
@@ -463,4 +463,4 @@ EventHandler.on(document, EVENT_KEY_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, functi
 	VGRollup.toggle(target, this);
 });
 
-export default VGRollup;
+export default VGRollup;

package/app/modules/vgrollup/scss/_variables.scss

@@ -1,15 +1,15 @@
-@use "../../../utils/scss" as vg;
-
-$rollup-map: (
-		transition: vg.$transition-base,
-		fade-height: 100px,
-		fade-background: linear-gradient(
-			180deg,
-			var(--vg-surface-transparent, rgba(255, 255, 255, 0)) 0%,
-			var(--vg-surface-bg, #{vg.$surface-bg}) 100%
-		)
-) !default;
-
-$rollup-button-map: (
-		align: center
-) !default;
+@use "../../../utils/scss" as vg;
+
+$rollup-map: (
+		transition: vg.$transition-base,
+		fade-height: 100px,
+		fade-background: linear-gradient(
+			180deg,
+			var(--vg-surface-transparent, rgba(255, 255, 255, 0)) 0%,
+			var(--vg-surface-bg, #{vg.$surface-bg}) 100%
+		)
+) !default;
+
+$rollup-button-map: (
+		align: center
+) !default;

package/app/modules/vgrollup/scss/vgrollup.scss

@@ -6,16 +6,16 @@
 *--------------------------------------------------------------------------
 **/
 
-@forward "variables";
-@use "../../../utils/scss" as vg;
-@use "variables" as vars;
+@forward "variables";
+@use "../../../utils/scss" as vg;
+@use "variables" as vars;
 
 .vg-rollup {
-	@include vg.mix-vars('rollup', vars.$rollup-map);
+	@include vg.mix-vars('rollup', vars.$rollup-map);
 	transform: var(--vg-rollup-transition);
 
 	&-button {
-		@include vg.mix-vars('rollup-button', vars.$rollup-button-map);
+		@include vg.mix-vars('rollup-button', vars.$rollup-button-map);
 		text-align: var(--vg-rollup-button-align);
 	}
 
@@ -51,4 +51,4 @@
 			display: none !important;
 		}
 	}
-}
+}

package/app/modules/vgselect/js/handlers.js

@@ -1,8 +1,8 @@
-/**
- * Описание: делегированные обработчики интерфейса VGSelect.
- * Возможности: открытие списка, выбор опций, теги, клавиатура и сброс формы.
- */
-import VGSelect from "./vgselect";
+/**
+ * Описание: делегированные обработчики интерфейса VGSelect.
+ * Возможности: открытие списка, выбор опций, теги, клавиатура и сброс формы.
+ */
+import VGSelect from "./vgselect";
 import EventHandler from "../../../utils/js/dom/event";
 import Selectors from "../../../utils/js/dom/selectors";
 import {Manipulator} from "../../../utils/js/dom/manipulator";
@@ -189,4 +189,4 @@ const _handlersVGSelect = () => {
 	});
 }
 
-export default _handlersVGSelect;
+export default _handlersVGSelect;