vgapp 1.2.4 → 1.2.6

package/app/modules/vgtooltip/scss/vgtooltip.scss

@@ -0,0 +1,64 @@
+/**
+*--------------------------------------------------------------------------
+* Модуль: VGTooltip
+* Автор: Vegas DEV
+* Лицензия: смотри LICENSE
+*--------------------------------------------------------------------------
+**/
+
+@import "../../../utils/scss/functions";
+@import "../../../utils/scss/mixin";
+@import "../../../utils/scss/variables";
+@import "variables";
+
+.vg-tooltip {
+	@include mix-vars('tooltip', $tooltip-map );
+	position: absolute;
+	z-index: var(--vg-tooltip-zindex);
+	pointer-events: none;
+	opacity: 0;
+	visibility: hidden;
+	transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
+	transform: none !important;
+
+	&.show {
+		opacity: 1;
+		visibility: visible;
+	}
+
+	&-inner {
+		position: relative;
+		max-width: var(--vg-tooltip-max-width);
+		padding: var(--vg-tooltip-padding);
+		font-size: var(--vg-tooltip-font-size);
+		line-height: var(--vg-tooltip-line-height);
+		color: var(--vg-tooltip-color);
+		background: var(--vg-tooltip-background);
+		border-radius: var(--vg-tooltip-border-radius);
+		box-shadow: var(--vg-tooltip-box-shadow);
+		word-break: var(--vg-tooltip-word-break);
+	}
+
+	&-arrow {
+		position: absolute;
+		width: var(--vg-tooltip-arrow-width);
+		height: var(--vg-tooltip-arrow-height);
+		background: var(--vg-tooltip-background, #222);
+		transform: rotate(45deg);
+	}
+
+	&-popover {
+		.vg-tooltip-inner {
+			padding: 0;
+
+			&--title {
+				padding: var(--vg-tooltip-padding);
+				border-bottom: 1px solid var(--vg-tooltip-border-color);
+			}
+
+			&--content {
+				padding: var(--vg-tooltip-padding);
+			}
+		}
+	}
+}

package/app/utils/js/components/ajax.js

@@ -1,7 +1,117 @@
-import { mergeDeepObject, noop, normalizeData } from "../functions";
+import { isObject, noop, normalizeData } from "../functions";
 
-class Ajax {
-	/**
+class Ajax {
+	static _toRouteQueryParamValue(value) {
+		if (!Array.isArray(value)) {
+			return value;
+		}
+
+		return value
+			.map((item) => String(item || '').trim())
+			.filter((item) => item !== '')
+			.join(',');
+	}
+
+	static buildRouteUrl(route, options = {}) {
+		const target = String(route || '').trim();
+		if (!target) {
+			throw new Error('Request endpoint is empty');
+		}
+
+		const baseParams = isObject(options.baseParams) ? options.baseParams : {};
+		const params = isObject(options.params) ? options.params : {};
+		const url = new URL(target, window.location.origin);
+		const merged = { ...baseParams, ...params };
+
+		Object.keys(merged).forEach((key) => {
+			const value = this._toRouteQueryParamValue(merged[key]);
+			if (value === undefined || value === null || value === '') {
+				return;
+			}
+
+			url.searchParams.set(key, String(value));
+		});
+
+		return url;
+	}
+
+	static async requestRoute(options = {}) {
+		const method = String(options.method || 'GET').toUpperCase().trim() || 'GET';
+		const headers = isObject(options.headers) ? { ...options.headers } : {};
+		const credentials = String(options.credentials || 'same-origin').trim() || 'same-origin';
+		const baseParams = isObject(options.baseParams) ? options.baseParams : {};
+		const params = isObject(options.params) ? options.params : {};
+		const hasBody = options.body !== undefined && options.body !== null;
+		const isGetLike = method === 'GET' || method === 'HEAD';
+		const route = String(options.route || options.endpoint || '').trim();
+		const url = this.buildRouteUrl(route, {
+			baseParams,
+			params: isGetLike ? params : {},
+		});
+		const requestOptions = {
+			method,
+			credentials,
+			headers,
+			signal: options.signal || undefined,
+		};
+
+		if (!isGetLike && hasBody) {
+			const body = options.body;
+			const isFormData = typeof FormData !== 'undefined' && body instanceof FormData;
+
+			if (isFormData) {
+				delete requestOptions.headers['Content-Type'];
+				requestOptions.body = body;
+			} else if (typeof body === 'string') {
+				if (!requestOptions.headers['Content-Type']) {
+					requestOptions.headers['Content-Type'] = 'application/json';
+				}
+				requestOptions.body = body;
+			} else {
+				if (!requestOptions.headers['Content-Type']) {
+					requestOptions.headers['Content-Type'] = 'application/json';
+				}
+				requestOptions.body = JSON.stringify(body);
+			}
+		}
+
+		const response = await fetch(url.toString(), requestOptions);
+		const contentType = String(response.headers.get('content-type') || '').toLowerCase();
+		const expectsJson = options.responseType === 'json'
+			|| (options.responseType !== 'text' && contentType.includes('application/json'));
+		const payload = await (async () => {
+			if (expectsJson) {
+				try {
+					return await response.json();
+				} catch (error) {
+					return await response.text();
+				}
+			}
+
+			return response.text();
+		})();
+
+		if (!response.ok) {
+			const apiError = payload && typeof payload === 'object' && payload.error && typeof payload.error === 'object'
+				? payload.error
+				: {};
+			const fallbackMessage = typeof payload === 'string' && payload.trim()
+				? payload
+				: response.statusText;
+			const message = String(apiError.message || fallbackMessage || 'Request failed');
+			const error = new Error(message);
+			error.status = response.status;
+			error.code = apiError.code || 'REQUEST_FAILED';
+			error.details = Array.isArray(apiError.details) ? apiError.details : [];
+			error.requestId = apiError.request_id || response.headers.get('X-Request-Id') || '';
+			error.response = payload;
+			throw error;
+		}
+
+		return payload;
+	}
+
+	/**
 	 * Конфигурация запроса
 	 * @param {Object} options
 	 * @param {string} options.baseUrl - Базовый URL API (опционально)
@@ -121,7 +231,7 @@ class Ajax {
 			method,
 			headers,
 			signal,
-			withCredentials,
+			credentials: withCredentials ? 'include' : 'same-origin',
 			...(body !== undefined && { body }),
 		};
 
@@ -157,8 +267,7 @@ class Ajax {
 						() => {}
 					);
 				} else {
-					console.log(data)
-					onSuccess(data);
+					onSuccess(data);
 				}
 			})
 			.catch((error) => {
@@ -284,4 +393,4 @@ class Ajax {
 	}
 }
 
-export default Ajax;
+export default Ajax;

package/app/utils/js/components/placement.js

@@ -1,9 +1,4 @@
-import {mergeDeepObject, normalizeData} from "../functions";
-import {Classes} from "../dom/manipulator";
-
-/**
- * Класс Placement, определяет и устанавливает местоположение элемента на странице.
- */
+import {mergeDeepObject} from "../functions";
 
 class Placement {
 	constructor(config) {
@@ -16,20 +11,9 @@ class Placement {
 		this.placement = config.placement || 'bottom';
 		this.fallbackPlacements = config.fallbackPlacements || [];
 
-		this._builtInPlacements = {
-			top: 'top',
-			'top-start': 'top-start',
-			'top-end': 'top-end',
-			bottom: 'bottom',
-			'bottom-start': 'bottom-start',
-			'bottom-end': 'bottom-end',
-			left: 'left',
-			'left-start': 'left-start',
-			'left-end': 'left-end',
-			right: 'right',
-			'right-start': 'right-start',
-			'right-end': 'right-end'
-		};
+		this.clamp = config.clamp === true;
+		this.clampPadding = config.clampPadding ?? 8;
+		this.isMerge = config.isMerge !== false;
 	}
 
 	_getPlacementRect(element) {
@@ -38,6 +22,7 @@ class Placement {
 
 	_getViewportRect() {
 		const doc = document.documentElement;
+
 		return {
 			width: doc.clientWidth,
 			height: doc.clientHeight,
@@ -60,56 +45,102 @@ class Placement {
 			const fallbacks = [this.placement, ...this.fallbackPlacements];
 			let best = null;
 
-			for (let p of fallbacks) {
-				let pos = this._calculatePosition(p, refRect, dropRect, xOffset, yOffset);
-				let overflow = this._calculateOverflow(pos, viewRect);
+			for (const p of fallbacks) {
+				const position = this._calculatePosition(p, refRect, dropRect, xOffset, yOffset);
+				const overflow = this._calculateOverflow(position, dropRect, viewRect);
 
 				if (!best || overflow < best.overflow) {
-					best = { placement: p, position: pos, overflow };
+					best = { placement: p, position, overflow };
+
 					if (overflow === 0) break;
 				}
 			}
 
 			placement = best.placement;
-			this._setStyles(best.position);
+
+			const finalPosition = this.clamp
+				? this._clampPosition(best.position, dropRect, viewRect)
+				: best.position;
+
+			this._setStyles(finalPosition);
 		} else {
-			const pos = this._calculatePosition(placement, refRect, dropRect, xOffset, yOffset);
-			this._setStyles(pos);
+			const position = this._calculatePosition(placement, refRect, dropRect, xOffset, yOffset);
+
+			const finalPosition = this.clamp
+				? this._clampPosition(position, dropRect, viewRect)
+				: position;
+
+			this._setStyles(finalPosition);
 		}
 
 		this.drop.setAttribute('data-vg-placement', placement);
 	}
 
 	_calculatePosition(placement, refRect, dropRect, xOffset = 0, yOffset = 0) {
-		let top, left;
+		let top;
+		let left;
 
 		switch (placement) {
 			case 'top':
+				top = refRect.top - dropRect.height - yOffset;
+				left = refRect.left + (refRect.width - dropRect.width) / 2;
+				break;
+
 			case 'top-start':
 				top = refRect.top - dropRect.height - yOffset;
-				left = placement === 'top-start' ? refRect.left + xOffset : refRect.left + (refRect.width - dropRect.width) / 2;
+				left = refRect.left + xOffset;
 				break;
+
 			case 'top-end':
 				top = refRect.top - dropRect.height - yOffset;
 				left = refRect.right - dropRect.width - xOffset;
 				break;
+
 			case 'bottom':
+				top = refRect.bottom + yOffset;
+				left = refRect.left + (refRect.width - dropRect.width) / 2;
+				break;
+
 			case 'bottom-start':
 				top = refRect.bottom + yOffset;
-				left = placement === 'bottom-start' ? refRect.left + xOffset : refRect.left + (refRect.width - dropRect.width) / 2;
+				left = refRect.left + xOffset;
 				break;
+
 			case 'bottom-end':
 				top = refRect.bottom + yOffset;
 				left = refRect.right - dropRect.width - xOffset;
 				break;
+
 			case 'left':
 				top = refRect.top + (refRect.height - dropRect.height) / 2;
 				left = refRect.left - dropRect.width - xOffset;
 				break;
+
+			case 'left-start':
+				top = refRect.top + yOffset;
+				left = refRect.left - dropRect.width - xOffset;
+				break;
+
+			case 'left-end':
+				top = refRect.bottom - dropRect.height - yOffset;
+				left = refRect.left - dropRect.width - xOffset;
+				break;
+
 			case 'right':
 				top = refRect.top + (refRect.height - dropRect.height) / 2;
 				left = refRect.right + xOffset;
 				break;
+
+			case 'right-start':
+				top = refRect.top + yOffset;
+				left = refRect.right + xOffset;
+				break;
+
+			case 'right-end':
+				top = refRect.bottom - dropRect.height - yOffset;
+				left = refRect.right + xOffset;
+				break;
+
 			default:
 				top = refRect.bottom + yOffset;
 				left = refRect.left + xOffset;
@@ -118,22 +149,62 @@ class Placement {
 		return { top, left };
 	}
 
-	_calculateOverflow(pos, viewRect) {
+	_calculateOverflow(pos, dropRect, viewRect) {
 		let overflow = 0;
-		if (pos.left < viewRect.left) overflow += viewRect.left - pos.left;
-		if (pos.top < viewRect.top) overflow += viewRect.top - pos.top;
-		if (pos.left + this.drop.offsetWidth > viewRect.right) overflow += (pos.left + this.drop.offsetWidth) - viewRect.right;
-		if (pos.top + this.drop.offsetHeight > viewRect.bottom) overflow += (pos.top + this.drop.offsetHeight) - viewRect.bottom;
+
+		if (pos.left < viewRect.left) {
+			overflow += viewRect.left - pos.left;
+		}
+
+		if (pos.top < viewRect.top) {
+			overflow += viewRect.top - pos.top;
+		}
+
+		if (pos.left + dropRect.width > viewRect.right) {
+			overflow += (pos.left + dropRect.width) - viewRect.right;
+		}
+
+		if (pos.top + dropRect.height > viewRect.bottom) {
+			overflow += (pos.top + dropRect.height) - viewRect.bottom;
+		}
+
 		return overflow;
 	}
 
+	_clampPosition(pos, dropRect, viewRect) {
+		const padding = this.clampPadding;
+
+		const maxTop = viewRect.bottom - dropRect.height - padding;
+		const maxLeft = viewRect.right - dropRect.width - padding;
+
+		return {
+			top: Math.min(
+				Math.max(pos.top, viewRect.top + padding),
+				maxTop
+			),
+			left: Math.min(
+				Math.max(pos.left, viewRect.left + padding),
+				maxLeft
+			)
+		};
+	}
+
 	_setStyles(pos) {
-		mergeDeepObject(this.drop.style, {
-			position: 'absolute',
-			top: `${pos.top}px`,
-			left: `${pos.left}px`,
-			margin: 0
-		})
+		if (!pos || !this.drop) return;
+
+		if (this.isMerge) {
+			mergeDeepObject(this.drop.style, {
+				position: 'absolute',
+				top: `${pos.top + window.pageYOffset}px`,
+				left: `${pos.left + window.pageXOffset}px`,
+				margin: '0'
+			});
+		} else {
+			this.drop.style.position = 'absolute';
+			this.drop.style.top = `${pos.top + window.pageYOffset}px`;
+			this.drop.style.left = `${pos.left + window.pageXOffset}px`;
+			this.drop.style.margin = '0';
+		}
 	}
 
 	_setPlacement() {