vgapp 1.3.9 → 1.4.1

package/app/modules/vgdynamictable/js/utils/common.js

@@ -1,48 +1,48 @@
 export function normalizeNonNegativeInt(value, fallback = 0) {
-    const parsed = Number.parseInt(value, 10);
-    return Number.isFinite(parsed) && parsed >= 0 ? parsed : fallback;
+	const parsed = Number.parseInt(value, 10);
+	return Number.isFinite(parsed) && parsed >= 0 ? parsed : fallback;
 }
 
 export function normalizeBooleanOption(value, fallback = false) {
-    if (value === undefined || value === null) {
-        return fallback;
-    }
-    const normalized = String(value).toLowerCase().trim();
-    if (normalized === 'true' || normalized === '1') {
-        return true;
-    }
-    if (normalized === 'false' || normalized === '0') {
-        return false;
-    }
-    return Boolean(value);
+	if (value === undefined || value === null) {
+		return fallback;
+	}
+	const normalized = String(value).toLowerCase().trim();
+	if (normalized === 'true' || normalized === '1') {
+		return true;
+	}
+	if (normalized === 'false' || normalized === '0') {
+		return false;
+	}
+	return Boolean(value);
 }
 
 export function normalizeEnabledFlag(value, fallback = true) {
-    if (value === undefined || value === null) {
-        return fallback;
-    }
-    const normalized = String(value).toLowerCase().trim();
-    return normalized !== 'false' && normalized !== '0';
+	if (value === undefined || value === null) {
+		return fallback;
+	}
+	const normalized = String(value).toLowerCase().trim();
+	return normalized !== 'false' && normalized !== '0';
 }
 
 export function safeQuerySelector(selector, root = document) {
-    const normalized = String(selector || '').trim();
-    if (!normalized || !root || typeof root.querySelector !== 'function') {
-        return null;
-    }
-    try {
-        return root.querySelector(normalized);
-    } catch (error) {
-        return null;
-    }
+	const normalized = String(selector || '').trim();
+	if (!normalized || !root || typeof root.querySelector !== 'function') {
+		return null;
+	}
+	try {
+		return root.querySelector(normalized);
+	} catch (error) {
+		return null;
+	}
 }
 
 export function toQueryParamValue(value) {
-    if (!Array.isArray(value)) {
-        return value;
-    }
-    return value
-        .map((item) => String(item || '').trim())
-        .filter((item) => item !== '')
-        .join(',');
+	if (!Array.isArray(value)) {
+		return value;
+	}
+	return value
+		.map((item) => String(item || '').trim())
+		.filter((item) => item !== '')
+		.join(',');
 }

package/app/modules/vgdynamictable/js/vgdynamictable.js

@@ -3026,12 +3026,34 @@ class VGDynamicTable extends BaseModule {
 		return false;
 	}
 
-	_isCloneStickyHeaderEnabled() {
-		if (this._parent && this._parent.classList.contains('table-sticky')) {
-			return true;
-		}
-		return Boolean(this._element && this._element.classList.contains('table-sticky'));
-	}
+	_isCloneStickyHeaderEnabled() {
+		const sticky = this._params.stickyHeader || {};
+		const cloneAttr = this._element.getAttribute('data-sticky-header-clone');
+		if (cloneAttr !== null) {
+			const normalized = String(cloneAttr).toLowerCase().trim();
+			return normalized !== 'false' && normalized !== '0';
+		}
+
+		if (sticky.clone !== undefined && sticky.clone !== null) {
+			const normalized = String(sticky.clone).toLowerCase().trim();
+			if (normalized === 'true' || normalized === '1') {
+				return true;
+			}
+			if (normalized === 'false' || normalized === '0') {
+				return false;
+			}
+			return Boolean(sticky.clone);
+		}
+
+		if (this._parent && this._parent.classList.contains('table-sticky')) {
+			return true;
+		}
+		if (this._element && this._element.classList.contains('table-sticky')) {
+			return true;
+		}
+
+		return this._isStickyHeaderEnabled();
+	}
 
 	_refreshStickyAndFixedLayout(options = {}) {
 		const immediate = Boolean(options && options.immediate);
@@ -3137,12 +3159,13 @@ class VGDynamicTable extends BaseModule {
 		};
 	}
 
-	_getCloneStickyHeaderOffsets() {
-		return {
-			top: this._readCssSizeVar('--vgdt-sticky-top', 0),
-			maxHeight: this._readCssSizeVar('--vgdt-sticky-max-height', 0),
-		};
-	}
+	_getCloneStickyHeaderOffsets() {
+		const configured = this._getStickyHeaderOffsets();
+		return {
+			top: configured.top || this._readCssSizeVar('--vgdt-sticky-top', 0),
+			maxHeight: configured.maxHeight || this._readCssSizeVar('--vgdt-sticky-max-height', 0),
+		};
+	}
 
 	_readCssSizeVar(name, fallback = 0) {
 		const sources = [this._parent, this._element, this._tableViewport].filter(Boolean);
@@ -3235,12 +3258,13 @@ class VGDynamicTable extends BaseModule {
 			}
 			if (state && state.headerWrap && state.headerWrap.parentElement) {
 				state.headerWrap.parentElement.removeChild(state.headerWrap);
-			}
-			this._cloneStickyState = null;
-			this._parent.style.removeProperty('--vgdt-sticky-clone-height');
-			if (scrollTarget && !this._isStickyHeaderEnabled()) {
-				scrollTarget.classList.remove('table-sticky-scroll');
-				scrollTarget.style.removeProperty('--vgdt-sticky-max-height');
+			}
+			this._cloneStickyState = null;
+			this._parent.style.removeProperty('--vgdt-sticky-clone-height');
+			this._parent.style.removeProperty('--vgdt-sticky-top');
+			if (scrollTarget && !this._isStickyHeaderEnabled()) {
+				scrollTarget.classList.remove('table-sticky-scroll');
+				scrollTarget.style.removeProperty('--vgdt-sticky-max-height');
 			}
 			this._updateLayoutResizeBinding();
 			return;
@@ -3252,10 +3276,11 @@ class VGDynamicTable extends BaseModule {
 
 		const offsets = this._getCloneStickyHeaderOffsets();
 
-		if (scrollTarget) {
-			if (offsets.maxHeight > 0) {
-				scrollTarget.classList.add('table-sticky-scroll');
-				scrollTarget.style.setProperty('--vgdt-sticky-max-height', `${offsets.maxHeight}px`);
+		if (scrollTarget) {
+			this._parent.style.setProperty('--vgdt-sticky-top', `${offsets.top}px`);
+			if (offsets.maxHeight > 0) {
+				scrollTarget.classList.add('table-sticky-scroll');
+				scrollTarget.style.setProperty('--vgdt-sticky-max-height', `${offsets.maxHeight}px`);
 			} else {
 				scrollTarget.classList.remove('table-sticky-scroll');
 				scrollTarget.style.removeProperty('--vgdt-sticky-max-height');
@@ -3693,17 +3718,20 @@ class VGDynamicTable extends BaseModule {
 		this._refreshStickyAndFixedLayout();
 	}
 
-	_scrollToPaginationTop() {
-		if (!this._isPaginationScrollToTopEnabled()) {
-			return;
-		}
-		if (this._tableViewport) {
-			this._tableViewport.scrollTop = 0;
-			this._tableViewport.scrollLeft = 0;
-		}
-		if (typeof window === 'undefined' || !this._parent) {
-			return;
-		}
+	_scrollToPaginationTop() {
+		if (!this._isPaginationScrollToTopEnabled()) {
+			return;
+		}
+		if (this._tableViewport) {
+			this._tableViewport.scrollTop = 0;
+			this._tableViewport.scrollLeft = 0;
+		}
+		if (this._hasFixedHeightViewport()) {
+			return;
+		}
+		if (typeof window === 'undefined' || !this._parent) {
+			return;
+		}
 
 		const targetTop = this._getPaginationScrollTopTarget();
 		const currentTop = window.pageYOffset || window.scrollY || 0;
@@ -3720,11 +3748,24 @@ class VGDynamicTable extends BaseModule {
 		window.scrollTo({
 			top: Math.max(0, Math.round(targetTop)),
 			behavior: prefersReducedMotion ? 'auto' : 'smooth',
-		});
-	}
-
-	_getPaginationScrollTopTarget() {
-		if (this._isPaginationScrollToWindowTopEnabled()) {
+		});
+	}
+
+	_hasFixedHeightViewport() {
+		if (this._tableViewport && this._tableViewport.classList.contains('table-sticky-scroll')) {
+			return true;
+		}
+
+		const offsets = this._getStickyHeaderOffsets();
+		if (offsets.maxHeight > 0) {
+			return true;
+		}
+
+		return this._readCssSizeVar('--vgdt-sticky-max-height', 0) > 0;
+	}
+
+	_getPaginationScrollTopTarget() {
+		if (this._isPaginationScrollToWindowTopEnabled()) {
 			return 0;
 		}
 		const rect = this._parent.getBoundingClientRect();

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

@@ -155,12 +155,14 @@
 	&.table-sticky-head {
 		overflow: visible;
 
-		.vgdt-table-viewport > table {
-			thead th {
-				position: sticky;
-				top: var(--vgdt-sticky-top, 0px);
-				z-index: 3;
-				background: var(--vg-dynamic-table-header-background);
+		.vgdt-table-viewport > table {
+			overflow: visible;
+
+			thead th {
+				position: sticky;
+				top: var(--vgdt-sticky-top, 0px);
+				z-index: 3;
+				background: var(--vg-dynamic-table-header-background);
 				box-shadow: 0 1px 0 var(--vg-dynamic-table-cell-border-color);
 			}
 
@@ -258,10 +260,11 @@
 			overflow: auto;
 		}
 
-		.vgdt-table-viewport > table {
-			margin-top: calc(-1 * var(--vgdt-sticky-clone-height, 0px));
-		}
-	}
+		.vgdt-table-viewport > table {
+			overflow: visible;
+			margin-top: calc(-1 * var(--vgdt-sticky-clone-height, 0px));
+		}
+	}
 
 }
 

package/app/modules/vgmodal/js/vgmodal.interaction.js

@@ -0,0 +1,216 @@
+import Selectors from "../../../utils/js/dom/selectors";
+import VGModalDrag from "./vgmodal.drag";
+import VGModalResize from "./vgmodal.resize";
+
+const DEFAULTS = {
+	drag: {
+		enable: false,
+		selector: '.vg-modal-content',
+		threshold: 4,
+		resizeEdgeSize: 8,
+		debug: false,
+	},
+	resize: {
+		enable: false,
+		edgeSize: 8,
+		minWidth: 300,
+		minHeight: 160,
+		debug: false,
+	},
+};
+
+class VGModalInteraction {
+	constructor(modalElement, dialogElement, contentElement, getParams) {
+		this._modalElement = modalElement;
+		this._dialogElement = dialogElement;
+		this._contentElement = contentElement;
+		this._getParams = typeof getParams === 'function' ? getParams : () => ({});
+		this._dragHandler = new VGModalDrag(this._modalElement, this._dialogElement);
+		this._resizeHandler = new VGModalResize(this._modalElement, this._dialogElement);
+		this._config = this._resolveConfig();
+
+		this._bindHandlers();
+	}
+
+	toggleHandlers() {
+		this._config = this._resolveConfig();
+		this._bindHandlers();
+
+		if (this._config.drag.enable) {
+			this._dragHandler.enable();
+		} else {
+			this._dragHandler.disable();
+		}
+
+		if (this._config.resize.enable) {
+			this._resizeHandler.enable();
+		} else {
+			this._resizeHandler.disable();
+		}
+	}
+
+	disableHandlers() {
+		this._dragHandler.disable();
+		this._resizeHandler.disable();
+	}
+
+	syncBounds() {
+		if (this._config.resize.enable) {
+			this._resizeHandler.syncToViewport();
+		}
+
+		if (this._config.drag.enable) {
+			this._dragHandler.syncPosition();
+		}
+	}
+
+	saveState() {
+		const stateConfig = this._getStateConfig();
+		const storageKey = this._getStateStorageKey(stateConfig);
+		if (!stateConfig.enable || !storageKey || typeof window === 'undefined' || !window.localStorage) return;
+
+		try {
+			window.localStorage.setItem(storageKey, JSON.stringify(this._captureState()));
+		} catch (error) {
+		}
+	}
+
+	restoreState() {
+		const stateConfig = this._getStateConfig();
+		const storageKey = this._getStateStorageKey(stateConfig);
+		if (!stateConfig.enable || !storageKey || typeof window === 'undefined' || !window.localStorage) return false;
+
+		try {
+			const rawState = window.localStorage.getItem(storageKey);
+			if (!rawState) return false;
+
+			const parsedState = JSON.parse(rawState);
+			this._applyState(parsedState);
+			return true;
+		} catch (error) {
+			return false;
+		}
+	}
+
+	dispose() {
+		this.disableHandlers();
+	}
+
+	_bindHandlers() {
+		this._dragHandler.setOptions(this._config.drag);
+		this._resizeHandler.setOptions(this._config.resize);
+	}
+
+	_resolveConfig() {
+		const params = this._getParams();
+
+		return {
+			drag: this._normalizeInteractionParams(params.drag, DEFAULTS.drag),
+			resize: this._normalizeInteractionParams(params.resize, DEFAULTS.resize),
+		};
+	}
+
+	_normalizeInteractionParams(paramsValue, defaults) {
+		if (typeof paramsValue === 'boolean') {
+			return {...defaults, enable: paramsValue};
+		}
+
+		if (paramsValue && typeof paramsValue === 'object') {
+			const hasEnable = Object.prototype.hasOwnProperty.call(paramsValue, 'enable');
+			return {
+				...defaults,
+				...paramsValue,
+				enable: hasEnable ? Boolean(paramsValue.enable) : true,
+			};
+		}
+
+		return {...defaults};
+	}
+
+	_getStateConfig() {
+		const params = this._getParams();
+		return this._normalizeStateParams(params.state);
+	}
+
+	_normalizeStateParams(paramsValue, defaults = { enable: true, key: '' }) {
+		if (typeof paramsValue === 'boolean') {
+			return {...defaults, enable: paramsValue};
+		}
+
+		if (paramsValue && typeof paramsValue === 'object') {
+			const hasEnable = Object.prototype.hasOwnProperty.call(paramsValue, 'enable');
+			const key = typeof paramsValue.key === 'string' ? paramsValue.key.trim() : '';
+			return {
+				...defaults,
+				...paramsValue,
+				key,
+				enable: hasEnable ? Boolean(paramsValue.enable) : true,
+			};
+		}
+
+		return {...defaults};
+	}
+
+	_getStateStorageKey(stateConfig = this._getStateConfig()) {
+		if (!stateConfig.enable) return '';
+
+		if (typeof stateConfig.key === 'string' && stateConfig.key.trim()) {
+			return stateConfig.key.trim();
+		}
+
+		if (!this._modalElement || !this._modalElement.id) return '';
+
+		return `vg.modal.state:${window.location.pathname}:${this._modalElement.id}`;
+	}
+
+	_captureState() {
+		const dialogStyle = this._dialogElement ? this._dialogElement.style : null;
+		const contentElement = this._contentElement || Selectors.find('.vg-modal-content', this._dialogElement);
+		const contentStyle = contentElement ? contentElement.style : null;
+
+		return {
+			dialog: dialogStyle ? {
+				position: dialogStyle.position,
+				margin: dialogStyle.margin,
+				left: dialogStyle.left,
+				top: dialogStyle.top,
+				width: dialogStyle.width,
+				height: dialogStyle.height,
+				transform: dialogStyle.transform,
+				maxWidth: dialogStyle.maxWidth,
+				maxHeight: dialogStyle.maxHeight,
+				minHeight: dialogStyle.minHeight,
+				overflow: dialogStyle.overflow,
+				pointerEvents: dialogStyle.pointerEvents,
+				transition: dialogStyle.transition,
+				willChange: dialogStyle.willChange,
+			} : {},
+			content: contentStyle ? {
+				height: contentStyle.height,
+				maxHeight: contentStyle.maxHeight,
+				overflow: contentStyle.overflow,
+			} : {},
+		};
+	}
+
+	_applyState(state) {
+		if (!state || typeof state !== 'object') return;
+
+		const dialogState = state.dialog && typeof state.dialog === 'object' ? state.dialog : {};
+		const contentState = state.content && typeof state.content === 'object' ? state.content : {};
+		if (this._dialogElement) {
+			Object.keys(dialogState).forEach(propertyName => {
+				this._dialogElement.style[propertyName] = dialogState[propertyName] || '';
+			});
+		}
+
+		const contentElement = this._contentElement || Selectors.find('.vg-modal-content', this._dialogElement);
+		if (contentElement) {
+			Object.keys(contentState).forEach(propertyName => {
+				contentElement.style[propertyName] = contentState[propertyName] || '';
+			});
+		}
+	}
+}
+
+export default VGModalInteraction;