vgapp 1.2.4 → 1.2.6

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

@@ -0,0 +1,240 @@
+/**
+*--------------------------------------------------------------------------
+* Module: VGRangeSlider
+*--------------------------------------------------------------------------
+**/
+
+@import "../../../utils/scss/functions";
+@import "../../../utils/scss/mixin";
+@import "../../../utils/scss/variables";
+@import "variables";
+
+.vg-range-slider {
+	@include mix-vars('range-slider', $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/vgtoast/js/vgtoast.js

@@ -184,11 +184,11 @@ class VGToast extends BaseModule {
 		this._dismissElement();
 		this._addEventListeners();
 
-		/** @private */
-		this._timeout = null;
-		this._hideTimeout = null;
-		this._isHiding = false;
-	}
+		/** @private */
+		this._timeout = null;
+		this._hideTimeout = null;
+		this._isHiding = false;
+	}
 
 	/**
 	 * Имя модуля
@@ -318,7 +318,7 @@ class VGToast extends BaseModule {
 	/**
 	 * Переключает состояние (показать/скрыть)
 	 * @param {Element} [relatedTarget] - Элемент, вызвавший тост.
-	 * @returns {VGToast}
+	 * @returns {void}
 	 */
 	toggle(relatedTarget) {
 		return this._isShown() ? this.hide() : this.show(relatedTarget);
@@ -329,105 +329,105 @@ class VGToast extends BaseModule {
 	 * @param {Element} [relatedTarget] - Элемент, инициировавший показ.
 	 * @returns {void}
 	 */
-	show(relatedTarget) {
-		if (isDisabled(this._element)) return;
-
-		const element = this._element;
-		this._clearTimeout();
-		this._clearHideTimeout();
-		this._isHiding = false;
-		this._disableInteractionHandlers();
-
-		this._params = this._getParams(relatedTarget || {}, this._params);
-		this._route((status, data) => {
-			if (this._element !== element) return;
-			EventHandler.trigger(element, EVENT_KEY_LOADED, { stats: status, data });
-		});
-
-		const showEvent = EventHandler.trigger(element, EVENT_KEY_SHOW, { relatedTarget });
-		if (showEvent.defaultPrevented) return;
-
-		element.classList.remove(CLASS_NAME_SHOWN);
-		element.classList.add(CLASS_NAME_SHOW);
-		document.body.classList.add(CLASS_NAME_OPEN);
-
-		this._setPlacement();
-
-		const completeCallBack = () => {
-			if (this._element !== element || this._isHiding) return;
-
-			element.classList.add(CLASS_NAME_SHOWN);
-			this._toggleInteractionHandlers();
-			this._syncInteractiveBounds();
-			this._scheduleHide();
-			EventHandler.trigger(element, EVENT_KEY_SHOWN, { relatedTarget });
-		};
-
-		this._queueCallback(completeCallBack, element, true, this._params.animation.delay);
-	}
+	show(relatedTarget) {
+		if (isDisabled(this._element)) return;
+
+		const element = this._element;
+		this._clearTimeout();
+		this._clearHideTimeout();
+		this._isHiding = false;
+		this._disableInteractionHandlers();
+
+		this._params = this._getParams(relatedTarget || {}, this._params);
+		this._route((status, data) => {
+			if (this._element !== element) return;
+			EventHandler.trigger(element, EVENT_KEY_LOADED, { stats: status, data });
+		});
+
+		const showEvent = EventHandler.trigger(element, EVENT_KEY_SHOW, { relatedTarget });
+		if (showEvent.defaultPrevented) return;
+
+		element.classList.remove(CLASS_NAME_SHOWN);
+		element.classList.add(CLASS_NAME_SHOW);
+		document.body.classList.add(CLASS_NAME_OPEN);
+
+		this._setPlacement();
+
+		const completeCallBack = () => {
+			if (this._element !== element || this._isHiding) return;
+
+			element.classList.add(CLASS_NAME_SHOWN);
+			this._toggleInteractionHandlers();
+			this._syncInteractiveBounds();
+			this._scheduleHide();
+			EventHandler.trigger(element, EVENT_KEY_SHOWN, { relatedTarget });
+		};
+
+		this._queueCallback(completeCallBack, element, true, this._params.animation.delay);
+	}
 
 	/**
 	 * Скрывает тост
 	 * @returns {void}
 	 */
-	hide() {
-		if (isDisabled(this._element) || this._isHiding) return;
-
-		const element = this._element;
-		this._clearTimeout();
-		this._clearHideTimeout();
-
-		const hideEvent = EventHandler.trigger(element, EVENT_KEY_HIDE);
-		if (hideEvent.defaultPrevented) return;
-
-		this._isHiding = true;
-		element.classList.remove(CLASS_NAME_SHOWN);
-		this._disableInteractionHandlers();
-
-		this._hideTimeout = setTimeout(() => {
-			this._hideTimeout = null;
-			if (this._element !== element) return;
-
-			element.classList.remove(CLASS_NAME_SHOW);
-			if (this._params.stack.enable) {
-				this._setPlacement();
-			}
-
-			const completeCallback = () => {
-				if (this._element !== element) return;
-
-				if (!Selectors.find('.vg-toast.show')) {
-					document.body.classList.remove(CLASS_NAME_OPEN);
-				}
-
-				const shouldDispose = !this._params.static;
-				this._isHiding = false;
-				EventHandler.trigger(element, EVENT_KEY_HIDDEN);
-
-				if (this._element !== element) return;
-				if (shouldDispose) {
-					this.dispose();
-				}
-			};
-
-			this._queueCallback(completeCallback, element, false, this._params.animation.delay);
-		}, this._params.animation.delay);
-	}
+	hide() {
+		if (isDisabled(this._element) || this._isHiding) return;
+
+		const element = this._element;
+		this._clearTimeout();
+		this._clearHideTimeout();
+
+		const hideEvent = EventHandler.trigger(element, EVENT_KEY_HIDE);
+		if (hideEvent.defaultPrevented) return;
+
+		this._isHiding = true;
+		element.classList.remove(CLASS_NAME_SHOWN);
+		this._disableInteractionHandlers();
+
+		this._hideTimeout = setTimeout(() => {
+			this._hideTimeout = null;
+			if (this._element !== element) return;
+
+			element.classList.remove(CLASS_NAME_SHOW);
+			if (this._params.stack.enable) {
+				this._setPlacement();
+			}
+
+			const completeCallback = () => {
+				if (this._element !== element) return;
+
+				if (!Selectors.find('.vg-toast.show')) {
+					document.body.classList.remove(CLASS_NAME_OPEN);
+				}
+
+				const shouldDispose = !this._params.static;
+				this._isHiding = false;
+				EventHandler.trigger(element, EVENT_KEY_HIDDEN);
+
+				if (this._element !== element) return;
+				if (shouldDispose) {
+					this.dispose();
+				}
+			};
+
+			this._queueCallback(completeCallback, element, false, this._params.animation.delay);
+		}, this._params.animation.delay);
+	}
 
 	/**
 	 * Удаляет тост из DOM и снимает обработчики
 	 * @override
 	 */
-	dispose() {
-		if (!this._element) return;
-
-		this._clearTimeout();
-		this._clearHideTimeout();
-		this._disableInteractionHandlers();
-		if (!this._params.static) {
-			this._element.remove();
-		}
-		super.dispose();
+	dispose() {
+		if (!this._element) return;
+
+		this._clearTimeout();
+		this._clearHideTimeout();
+		this._disableInteractionHandlers();
+		if (!this._params.static) {
+			this._element.remove();
+		}
+		super.dispose();
 	}
 
 	/**
@@ -446,9 +446,9 @@ class VGToast extends BaseModule {
 	 * @private
 	 * @returns {boolean}
 	 */
-	_isShown() {
-		return !!this._element && this._element.classList.contains(CLASS_NAME_SHOW);
-	}
+	_isShown() {
+		return !!this._element && this._element.classList.contains(CLASS_NAME_SHOW);
+	}
 
 	/**
 	 * Возвращает список активных тостов с вертикальными смещениями
@@ -641,19 +641,19 @@ class VGToast extends BaseModule {
 		return effectValue.trim();
 	}
 
-	_clearTimeout() {
-		if (this._timeout) {
-			clearTimeout(this._timeout);
-			this._timeout = null;
-		}
-	}
-
-	_clearHideTimeout() {
-		if (this._hideTimeout) {
-			clearTimeout(this._hideTimeout);
-			this._hideTimeout = null;
-		}
-	}
+	_clearTimeout() {
+		if (this._timeout) {
+			clearTimeout(this._timeout);
+			this._timeout = null;
+		}
+	}
+
+	_clearHideTimeout() {
+		if (this._hideTimeout) {
+			clearTimeout(this._hideTimeout);
+			this._hideTimeout = null;
+		}
+	}
 
 	/**
 	 * Назначает обработчики событий

package/app/modules/vgtooltip/index.js

@@ -0,0 +1,3 @@
+import VGTooltip from "./js/vgtooltip";
+
+export default VGTooltip;