vgapp 1.2.5 → 1.3.0

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/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/vgapp.js

@@ -0,0 +1,107 @@
+import VGAlert from './modules/vgalert';
+import VGCollapse from './modules/vgcollapse';
+import VGDropdown from './modules/vgdropdown';
+import { VGDynamicTable } from './modules/vgdynamictable';
+import VGFiles from './modules/vgfiles';
+import VGFilePreview from './modules/vgfilepreview';
+import VGFormSender from './modules/vgformsender';
+import VGLawCookie from './modules/vglawcookie';
+import VGLoadMore from './modules/vgloadmore';
+import VGModal from './modules/vgmodal';
+import VGNav from './modules/vgnav';
+import VGNestable from './modules/vgnestable';
+import VGRangeSlider from './modules/vgrangeslider';
+import VGRollup from './modules/vgrollup';
+import VGSelect from './modules/vgselect';
+import VGSidebar from './modules/vgsidebar';
+import VGSpy from './modules/vgspy';
+import VGTabs from './modules/vgtabs';
+import VGToast from './modules/vgtoast';
+import VGTooltip from './modules/vgtooltip';
+
+class VGApp {
+	constructor() {
+		this._modules = new Map();
+	}
+
+	register(...entries) {
+		const modules = entries.flatMap((entry) => {
+			if (Array.isArray(entry)) {
+				return entry;
+			}
+
+			return entry ? [entry] : [];
+		});
+
+		for (const Module of modules) {
+			const name = String(Module?.NAME || '').trim();
+
+			if (!name) {
+				throw new Error('VGApp.register() ожидает модуль со статическим NAME.');
+			}
+
+			this._modules.set(name, Module);
+		}
+
+		return this;
+	}
+
+	boot(config = {}) {
+		for (const [name, Module] of this._modules) {
+			if (typeof Module?.boot !== 'function') {
+				continue;
+			}
+
+			const moduleConfig = this._resolveModuleConfig(name, config);
+			Module.boot(moduleConfig);
+		}
+
+		return this;
+	}
+
+	get(name) {
+		return this._modules.get(String(name).trim());
+	}
+
+	has(name) {
+		return this._modules.has(String(name).trim());
+	}
+
+	_resolveModuleConfig(name, config) {
+		if (!config || typeof config !== 'object') {
+			return undefined;
+		}
+
+		return Object.prototype.hasOwnProperty.call(config, name)
+			? config[name]
+			: undefined;
+	}
+}
+
+const vgapp = new VGApp();
+
+vgapp.register(
+	VGAlert,
+	VGCollapse,
+	VGDropdown,
+	VGDynamicTable,
+	VGFiles,
+	VGFilePreview,
+	VGFormSender,
+	VGLawCookie,
+	VGLoadMore,
+	VGModal,
+	VGNav,
+	VGNestable,
+	VGRangeSlider,
+	VGRollup,
+	VGSelect,
+	VGSidebar,
+	VGSpy,
+	VGTabs,
+	VGToast,
+	VGTooltip,
+);
+
+export { VGApp, vgapp };
+export default vgapp;