vgapp 1.3.0 → 1.3.1

package/app/modules/vgdynamictable/scss/_variables.scss

@@ -16,38 +16,38 @@ $sizes-4: map-get($spacers, 4);
 $sizes-5: map-get($spacers, 5);
 
 $dynamic-table-map: (
-	wrap: (
-		border-radius: 14px,
-		box-shadow: none,
-		border-width: 1px,
-		background: transparent,
-		border-color: transparent,
-	),
-	cell: (
-		padding: $sizes-3 $sizes-4,
-		font-size: $sizes-3,
-		row-content-height: 20px,
-		border-color: transparent,
-		text-color: #1f1f1f,
-	),
-	header: (
-		font-weight: 600,
-		background: #f7f4ef,
-		text-color: #1f1f1f,
-	),
-	bordered: (
-		border-width: 1px,
-		border-color: rgba(0, 0, 0, 0.1),
-	),
-	striped: (
-		background: rgba(0, 0, 0, 0.03),
-	),
-	hover: (
-		background: rgba(0, 0, 0, 0.05),
-	),
-	table: (
-		min-width: 640px,
-	),
+	wrap: (
+		border-radius: 14px,
+		box-shadow: none,
+		border-width: 1px,
+		background: transparent,
+		border-color: transparent,
+	),
+	cell: (
+		padding: $sizes-3 $sizes-4,
+		font-size: $sizes-3,
+		row-content-height: 20px,
+		border-color: transparent,
+		text-color: #1f1f1f,
+	),
+	header: (
+		font-weight: 600,
+		background: #f7f4ef,
+		text-color: #1f1f1f,
+	),
+	bordered: (
+		border-width: 1px,
+		border-color: rgba(0, 0, 0, 0.1),
+	),
+	striped: (
+		background: rgba(0, 0, 0, 0.03),
+	),
+	hover: (
+		background: rgba(0, 0, 0, 0.05),
+	),
+	table: (
+		min-width: 640px,
+	),
 	table-sm: (
 		padding: $sizes-1 $sizes-2,
 	),
@@ -60,9 +60,9 @@ $dynamic-table-map: (
 	table-xl: (
 		padding: $sizes-4 $sizes-5,
 	),
-	pagination: (
-		padding-y: 12px,
-		padding-x: 14px,
+	pagination: (
+		padding-y: 12px,
+		padding-x: 14px,
 		gap: 12px,
 		toolbar-radius: 12px,
 		toolbar-padding-y: 8px,
@@ -78,53 +78,53 @@ $dynamic-table-map: (
 		button-disabled-opacity: 0.45,
 		per-page-radius: 10px,
 		per-page-height: 36px,
-		per-page-padding-x: 10px,
-		jump-width: 64px,
-		jump-gap: 6px,
-		jump-button-min-width: 54px,
-		border-color: rgba(0, 0, 0, 0.08),
-		toolbar-bg: #faf8f4,
-		label-color: #5f5a52,
-		button-border: 1px solid rgba(0, 0, 0, 0.12),
-		button-border-color: rgba(0, 0, 0, 0.12),
-		button-bg: #ffffff,
-		button-text: #2e2a24,
-		button-hover-bg: #f1ece4,
-		button-hover-border: rgba(0, 0, 0, 0.2),
-		button-active-bg: #24201b,
-		button-active-text: #ffffff,
-		button-active-border: #24201b,
-		per-page-bg: #ffffff,
-		per-page-border-color: rgba(0, 0, 0, 0.12),
-		per-page-text: #2e2a24,
-	),
-	sortable: (
-		header-padding-right: 1.8rem,
-		controls-right: 0.6rem,
+		per-page-padding-x: 10px,
+		jump-width: 64px,
+		jump-gap: 6px,
+		jump-button-min-width: 54px,
+		border-color: rgba(0, 0, 0, 0.08),
+		toolbar-bg: #faf8f4,
+		label-color: #5f5a52,
+		button-border: 1px solid rgba(0, 0, 0, 0.12),
+		button-border-color: rgba(0, 0, 0, 0.12),
+		button-bg: #ffffff,
+		button-text: #2e2a24,
+		button-hover-bg: #f1ece4,
+		button-hover-border: rgba(0, 0, 0, 0.2),
+		button-active-bg: #24201b,
+		button-active-text: #ffffff,
+		button-active-border: #24201b,
+		per-page-bg: #ffffff,
+		per-page-border-color: rgba(0, 0, 0, 0.12),
+		per-page-text: #2e2a24,
+	),
+	sortable: (
+		header-padding-right: 1.8rem,
+		controls-right: 0.6rem,
 		controls-gap: 0,
 		arrow-width: 14px,
 		arrow-height: 10px,
-		arrow-line-height: 0.7rem,
-		arrow-font-size: 0.55rem,
-		arrow-opacity: 0.35,
-		arrow-active-opacity: 1,
-		arrow-color: currentColor,
-		column-highlight-background: rgba(191, 153, 92, 0.14),
-	),
-	fixed: (
-		shadow-width: 14px,
-		shadow-color: rgba(0, 0, 0, 0.16),
-		cell-background: rgba(247, 244, 239, 0.92),
-	),
-	skeleton: (
-		padding: 12px 14px,
-		line-height: 10px,
-		radius: 999px,
-		duration: 1.2s,
-		row-bg: rgba(255, 255, 255, 0.5),
-		border-color: rgba(0, 0, 0, 0.04),
-		glow: rgba(255, 255, 255, 0.55),
+		arrow-line-height: 0.7rem,
+		arrow-font-size: 0.55rem,
+		arrow-opacity: 0.35,
+		arrow-active-opacity: 1,
+		arrow-color: currentColor,
+		column-highlight-background: rgba(191, 153, 92, 0.14),
+	),
+	fixed: (
+		shadow-width: 14px,
+		shadow-color: rgba(0, 0, 0, 0.16),
+		cell-background: rgba(247, 244, 239, 0.92),
+	),
+	skeleton: (
+		padding: 12px 14px,
+		line-height: 10px,
+		radius: 999px,
+		duration: 1.2s,
+		row-bg: rgba(255, 255, 255, 0.5),
+		border-color: rgba(0, 0, 0, 0.04),
+		glow: rgba(255, 255, 255, 0.55),
 		gradient-1: #ebe6df,
 		gradient-2: #f5f1ea,
 	),
-);
+);

package/app/modules/vgdynamictable/scss/vgdynamictable.scss

@@ -11,9 +11,9 @@
 @import "../../../utils/scss/variables";
 @import "variables";
 
-.vg-dynamic-table {
-	@include mix-vars('dynamic-table', $dynamic-table-map);
-	background: var(--vg-dynamic-table-wrap-background);
+.vg-dynamic-table {
+	@include mix-vars('dynamic-table', $dynamic-table-map);
+	background: var(--vg-dynamic-table-wrap-background);
 	border-radius: var(--vg-dynamic-table-wrap-border-radius);
 	box-shadow: var(--vg-dynamic-table-wrap-box-shadow);
 	overflow: visible;
@@ -62,30 +62,30 @@
 	@import "skeleton";
 	@import "actions";
 
-	&.table-striped {
-		tbody {
-			tr:nth-of-type(odd) {
-				background-color: var(--vg-dynamic-table-striped-background);
-			}
-
-			tr[data-virtual-spacer="1"] {
-				background-color: transparent;
-			}
-		}
-
-		tbody tr:nth-of-type(odd) td[data-fixed-side][data-fixed-overlap="1"] {
-			background: var(--vg-dynamic-table-striped-background);
-		}
-	}
-
-	tbody tr[data-virtual-spacer="1"] > td {
-		padding: 0;
-		border: 0;
-		height: 0;
-		background: transparent;
-		line-height: 0;
-		pointer-events: none;
-	}
+	&.table-striped {
+		tbody {
+			tr:nth-of-type(odd) {
+				background-color: var(--vg-dynamic-table-striped-background);
+			}
+
+			tr[data-virtual-spacer="1"] {
+				background-color: transparent;
+			}
+		}
+
+		tbody tr:nth-of-type(odd) td[data-fixed-side][data-fixed-overlap="1"] {
+			background: var(--vg-dynamic-table-striped-background);
+		}
+	}
+
+	tbody tr[data-virtual-spacer="1"] > td {
+		padding: 0;
+		border: 0;
+		height: 0;
+		background: transparent;
+		line-height: 0;
+		pointer-events: none;
+	}
 
 	&.table-bordered {
 		border: var(--vg-dynamic-table-bordered-border-width) solid var(--vg-dynamic-table-bordered-border-color);

package/app/modules/vgfilepreview/js/i18n.js

@@ -1,56 +1,56 @@
-import { lang_buttons, lang_messages } from "../../../utils/js/components/lang";
-
-const SUPPORTED_LANGS = new Set(["ru", "en"]);
-
-const normalizeLang = (value, fallback = "ru") => {
-	const candidate = String(value || "").trim().toLowerCase();
-	if (!candidate) {
-		return fallback;
-	}
-
-	const short = candidate.split("-")[0];
-	return SUPPORTED_LANGS.has(short) ? short : fallback;
-};
-
-const resolveFilePreviewLang = (paramsLang, element) => {
-	const fromParams = normalizeLang(paramsLang, "");
-	if (fromParams) {
-		return fromParams;
-	}
-
-	const fromElement = normalizeLang(element?.getAttribute("lang"), "");
-	if (fromElement) {
-		return fromElement;
-	}
-
-	const fromClosest = normalizeLang(element?.closest("[lang]")?.getAttribute("lang"), "");
-	if (fromClosest) {
-		return fromClosest;
-	}
-
-	const fromHtml = normalizeLang(document?.documentElement?.getAttribute("lang"), "");
-	if (fromHtml) {
-		return fromHtml;
-	}
-
-	const fromNavigator = normalizeLang(window?.navigator?.language, "");
-	if (fromNavigator) {
-		return fromNavigator;
-	}
-
-	return "ru";
-};
-
-const createFilePreviewI18n = (lang = "ru") => {
-	const normalizedLang = normalizeLang(lang, "ru");
-	const messages = lang_messages(normalizedLang, "filepreview") || {};
-	const buttons = lang_buttons(normalizedLang, "filepreview") || {};
-
-	return {
-		lang: normalizedLang,
-		message: (key, fallback = "") => messages[key] || fallback,
-		button: (key, fallback = "") => buttons[key] || fallback
-	};
-};
-
-export { createFilePreviewI18n, resolveFilePreviewLang };
+import { lang_buttons, lang_messages } from "../../../utils/js/components/lang";
+
+const SUPPORTED_LANGS = new Set(["ru", "en"]);
+
+const normalizeLang = (value, fallback = "ru") => {
+	const candidate = String(value || "").trim().toLowerCase();
+	if (!candidate) {
+		return fallback;
+	}
+
+	const short = candidate.split("-")[0];
+	return SUPPORTED_LANGS.has(short) ? short : fallback;
+};
+
+const resolveFilePreviewLang = (paramsLang, element) => {
+	const fromParams = normalizeLang(paramsLang, "");
+	if (fromParams) {
+		return fromParams;
+	}
+
+	const fromElement = normalizeLang(element?.getAttribute("lang"), "");
+	if (fromElement) {
+		return fromElement;
+	}
+
+	const fromClosest = normalizeLang(element?.closest("[lang]")?.getAttribute("lang"), "");
+	if (fromClosest) {
+		return fromClosest;
+	}
+
+	const fromHtml = normalizeLang(document?.documentElement?.getAttribute("lang"), "");
+	if (fromHtml) {
+		return fromHtml;
+	}
+
+	const fromNavigator = normalizeLang(window?.navigator?.language, "");
+	if (fromNavigator) {
+		return fromNavigator;
+	}
+
+	return "ru";
+};
+
+const createFilePreviewI18n = (lang = "ru") => {
+	const normalizedLang = normalizeLang(lang, "ru");
+	const messages = lang_messages(normalizedLang, "filepreview") || {};
+	const buttons = lang_buttons(normalizedLang, "filepreview") || {};
+
+	return {
+		lang: normalizedLang,
+		message: (key, fallback = "") => messages[key] || fallback,
+		button: (key, fallback = "") => buttons[key] || fallback
+	};
+};
+
+export { createFilePreviewI18n, resolveFilePreviewLang };

package/app/modules/vgfilepreview/js/renderers/image-modal.js

@@ -1,145 +1,145 @@
-import VGModal from "../../../vgmodal";
-
-class ImageModal {
-	constructor() {
-		this._modalId = 'vg-filepreview-image-modal';
-	}
-
-	static getInstance() {
-		if (!ImageModal._instance) {
-			ImageModal._instance = new ImageModal();
-		}
-
-		return ImageModal._instance;
-	}
-
-	open(payload = {}) {
-		const src = String(payload.src || '').trim();
-		if (!src) {
-			return;
-		}
-
-		this._ensureModal();
-		if (!this._modal || !this._image) {
-			return;
-		}
-
-		const defaultTitle = String(payload.defaultTitle || '').trim();
-		const title = String(payload.title || '').trim();
-		this._title.textContent = title || defaultTitle;
-		this._image.src = src;
-		this._image.alt = title || defaultTitle;
-
-		this._modal.show();
-	}
-
-	close() {
-		if (!this._modal) {
-			return;
-		}
-
-		this._modal.hide();
-	}
-
-	_ensureModal() {
-		if (this._modal && this._root) {
-			return;
-		}
-
-		this._initModal();
-	}
-
-	_initModal() {
-		const params = {
-			centered: true,
-			dismiss: true,
-			backdrop: true,
-			keyboard: true,
-			sizes: {
-				width: 'fit-content',
-			},
-			animation: {
-				enable: false
-			}
-		};
-
-		const existed = document.getElementById(this._modalId);
-		if (existed) {
-			this._root = existed;
-			this._modal = VGModal.getOrCreateInstance(existed, params);
-			this._bindElements(existed);
-			this._bindLifecycle(existed);
-			return;
-		}
-
-		this._modal = VGModal.build(this._modalId, params, (modalInstance) => {
-			const element = modalInstance._element;
-			this._root = element;
-			element.classList.add('vg-filepreview-image-modal');
-
-			const body = element.querySelector('.vg-modal-body');
-			const content = element.querySelector('.vg-modal-content');
-			if (!body || !content) {
-				return;
-			}
-
-			body.classList.add('vg-filepreview-image-modal__body');
-			body.innerHTML = '';
-
-			let header = element.querySelector('.vg-modal-header');
-			if (!header) {
-				header = document.createElement('div');
-				header.className = 'vg-modal-header';
-				content.prepend(header);
-			}
-
-			this._title = document.createElement('div');
-			this._title.className = 'vg-modal-title';
-			this._title.textContent = '';
-
-			this._image = document.createElement('img');
-			this._image.className = 'vg-filepreview-image-modal__img';
-			this._image.loading = 'eager';
-			this._image.decoding = 'async';
-
-			header.appendChild(this._title);
-			body.appendChild(this._image);
-
-			this._bindLifecycle(element);
-		});
-	}
-
-	_bindElements(root) {
-		this._title = root.querySelector('.vg-filepreview-image-modal__title');
-		this._image = root.querySelector('.vg-filepreview-image-modal__img');
-	}
-
-	_bindLifecycle(root) {
-		if (!root || root.hasAttribute('data-vg-filepreview-image-lifecycle-bind')) {
-			return;
-		}
-
-		root.setAttribute('data-vg-filepreview-image-lifecycle-bind', 'true');
-		root.addEventListener('vg.modal.hidden', () => {
-			this._destroyModal();
-		});
-	}
-
-	_destroyModal() {
-		if (this._modal && typeof this._modal.dispose === 'function') {
-			this._modal.dispose();
-		}
-
-		if (this._root && this._root.parentNode) {
-			this._root.parentNode.removeChild(this._root);
-		}
-
-		this._root = null;
-		this._modal = null;
-		this._title = null;
-		this._image = null;
-	}
-
-}
-
-export default ImageModal;
+import VGModal from "../../../vgmodal";
+
+class ImageModal {
+	constructor() {
+		this._modalId = 'vg-filepreview-image-modal';
+	}
+
+	static getInstance() {
+		if (!ImageModal._instance) {
+			ImageModal._instance = new ImageModal();
+		}
+
+		return ImageModal._instance;
+	}
+
+	open(payload = {}) {
+		const src = String(payload.src || '').trim();
+		if (!src) {
+			return;
+		}
+
+		this._ensureModal();
+		if (!this._modal || !this._image) {
+			return;
+		}
+
+		const defaultTitle = String(payload.defaultTitle || '').trim();
+		const title = String(payload.title || '').trim();
+		this._title.textContent = title || defaultTitle;
+		this._image.src = src;
+		this._image.alt = title || defaultTitle;
+
+		this._modal.show();
+	}
+
+	close() {
+		if (!this._modal) {
+			return;
+		}
+
+		this._modal.hide();
+	}
+
+	_ensureModal() {
+		if (this._modal && this._root) {
+			return;
+		}
+
+		this._initModal();
+	}
+
+	_initModal() {
+		const params = {
+			centered: true,
+			dismiss: true,
+			backdrop: true,
+			keyboard: true,
+			sizes: {
+				width: 'fit-content',
+			},
+			animation: {
+				enable: false
+			}
+		};
+
+		const existed = document.getElementById(this._modalId);
+		if (existed) {
+			this._root = existed;
+			this._modal = VGModal.getOrCreateInstance(existed, params);
+			this._bindElements(existed);
+			this._bindLifecycle(existed);
+			return;
+		}
+
+		this._modal = VGModal.build(this._modalId, params, (modalInstance) => {
+			const element = modalInstance._element;
+			this._root = element;
+			element.classList.add('vg-filepreview-image-modal');
+
+			const body = element.querySelector('.vg-modal-body');
+			const content = element.querySelector('.vg-modal-content');
+			if (!body || !content) {
+				return;
+			}
+
+			body.classList.add('vg-filepreview-image-modal__body');
+			body.innerHTML = '';
+
+			let header = element.querySelector('.vg-modal-header');
+			if (!header) {
+				header = document.createElement('div');
+				header.className = 'vg-modal-header';
+				content.prepend(header);
+			}
+
+			this._title = document.createElement('div');
+			this._title.className = 'vg-modal-title';
+			this._title.textContent = '';
+
+			this._image = document.createElement('img');
+			this._image.className = 'vg-filepreview-image-modal__img';
+			this._image.loading = 'eager';
+			this._image.decoding = 'async';
+
+			header.appendChild(this._title);
+			body.appendChild(this._image);
+
+			this._bindLifecycle(element);
+		});
+	}
+
+	_bindElements(root) {
+		this._title = root.querySelector('.vg-filepreview-image-modal__title');
+		this._image = root.querySelector('.vg-filepreview-image-modal__img');
+	}
+
+	_bindLifecycle(root) {
+		if (!root || root.hasAttribute('data-vg-filepreview-image-lifecycle-bind')) {
+			return;
+		}
+
+		root.setAttribute('data-vg-filepreview-image-lifecycle-bind', 'true');
+		root.addEventListener('vg.modal.hidden', () => {
+			this._destroyModal();
+		});
+	}
+
+	_destroyModal() {
+		if (this._modal && typeof this._modal.dispose === 'function') {
+			this._modal.dispose();
+		}
+
+		if (this._root && this._root.parentNode) {
+			this._root.parentNode.removeChild(this._root);
+		}
+
+		this._root = null;
+		this._modal = null;
+		this._title = null;
+		this._image = null;
+	}
+
+}
+
+export default ImageModal;