vgapp 1.5.8 → 1.6.0

package/app/modules/vgtooltip/js/vgtooltip.js

@@ -1,6 +1,6 @@
 /**
  * Описание: всплывающие подсказки и информационные popover VGApp.
- * Возможности: Data API, позиционирование, события и очистка при удалении триггера.
+ * Возможности: Data API, подавление нативного title, позиционирование со стрелкой без зазоров и очистка при удалении триггера.
  */
 import BaseModule from "../../base-module";
 import {isDisabled, makeRandomString, mergeDeepObject} from "../../../utils/js/functions";
@@ -94,7 +94,8 @@ class VGTooltip extends BaseModule {
 		this._isHiding = false;
 		this._showTimeout = null;
 		this._hideTimeout = null;
-		this._triggerObserver = null;
+		this._triggerObserver = null;
+		this._titleSuppressed = false;
 
 		this._fixTitle();
 
@@ -122,10 +123,15 @@ class VGTooltip extends BaseModule {
 		return this._isShown() ? this.hide() : this.show(relatedTarget);
 	}
 
-	show(relatedTarget) {
-		if (isDisabled(this._element) || this._isShown()) return;
-
-		this._clearTimeouts();
+	show(relatedTarget) {
+		if (!this._element || isDisabled(this._element)) return;
+
+		this._fixTitle();
+		this._clearTimeouts();
+		if (this._isShown()) {
+			if (!this._isHiding) this._observeTrigger();
+			return;
+		}
 
 		this._showTimeout = setTimeout(() => {
 			this._showTimeout = null;
@@ -226,7 +232,9 @@ class VGTooltip extends BaseModule {
 
 			if (Object.prototype.hasOwnProperty.call(this._element.dataset, 'vgOriginalTitle')) {
 				this._element.setAttribute('title', this._element.dataset.vgOriginalTitle);
-				this._element.removeAttribute('data-vg-original-title');
+				this._element.removeAttribute('data-vg-original-title');
+			} else {
+				this._element.removeAttribute('title');
 			}
 		}
 
@@ -319,10 +327,12 @@ class VGTooltip extends BaseModule {
 	_fixTitle() {
 		const title = this._element.getAttribute('title');
 
-		if (title === null) return;
-
-		this._element.setAttribute('data-vg-original-title', title);
-		this._element.removeAttribute('title');
+		if (title !== null && (title !== '' || !this._titleSuppressed)) {
+			this._element.setAttribute('data-vg-original-title', title);
+		}
+		// Пустой title также блокирует нативную подсказку, унаследованную от предка.
+		this._element.setAttribute('title', '');
+		this._titleSuppressed = true;
 	}
 
 	_setPlacement() {
@@ -378,12 +388,12 @@ class VGTooltip extends BaseModule {
 			);
 
 			arrow.style.left = `${arrowLeft}px`;
-			arrow.style.transform = 'translateX(-50%) rotate(45deg)';
+			arrow.style.transform = 'translateX(-50%)';
 
 			if (placement.startsWith('top')) {
-				arrow.style.bottom = '-4px';
+				arrow.style.bottom = 'calc(var(--vg-tooltip-arrow-height) / -2 + 1px)';
 			} else {
-				arrow.style.top = '-4px';
+				arrow.style.top = 'calc(var(--vg-tooltip-arrow-height) / -2 + 1px)';
 			}
 		}
 
@@ -396,12 +406,12 @@ class VGTooltip extends BaseModule {
 			);
 
 			arrow.style.top = `${arrowTop}px`;
-			arrow.style.transform = 'translateY(-50%) rotate(45deg)';
+			arrow.style.transform = 'translateY(-50%)';
 
 			if (placement.startsWith('left')) {
-				arrow.style.right = '-4px';
+				arrow.style.right = 'calc(var(--vg-tooltip-arrow-width) / -2 + 1px)';
 			} else {
-				arrow.style.left = '-4px';
+				arrow.style.left = 'calc(var(--vg-tooltip-arrow-width) / -2 + 1px)';
 			}
 		}
 	}

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

@@ -11,7 +11,7 @@ $tooltip-map: (
 		border-radius: 6px,
 		box-shadow: 0 6px 20px var(--vg-shadow-soft-color, rgba(0, 0, 0, .18)),
 		word-break: break-word,
-		arrow-width: 8px,
-		arrow-height: 8px,
+		arrow-width: 10px,
+		arrow-height: 10px,
 		border-color: var(--vg-border-color, #{vg.$border-color}),
 ) !default;

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

@@ -12,7 +12,9 @@
 
 .vg-tooltip {
 	@include vg.mix-vars('tooltip', vars.$tooltip-map);
-	position: absolute;
+	position: absolute;
+	// Координатами управляет Placement; общие data-vg-placement правила не должны задавать противоположный край.
+	inset: auto;
 	z-index: var(--vg-tooltip-zindex);
 	pointer-events: none;
 	opacity: 0;
@@ -42,9 +44,28 @@
 		position: absolute;
 		width: var(--vg-tooltip-arrow-width);
 		height: var(--vg-tooltip-arrow-height);
-		background: var(--vg-tooltip-background, #222);
-		transform: rotate(45deg);
-	}
+		background: var(--vg-tooltip-background, #222);
+	}
+
+	&[data-vg-placement^="top"] &-arrow {
+		height: calc(var(--vg-tooltip-arrow-height) / 2);
+		clip-path: polygon(0 0, 100% 0, 50% 100%);
+	}
+
+	&[data-vg-placement^="bottom"] &-arrow {
+		height: calc(var(--vg-tooltip-arrow-height) / 2);
+		clip-path: polygon(50% 0, 100% 100%, 0 100%);
+	}
+
+	&[data-vg-placement^="left"] &-arrow {
+		width: calc(var(--vg-tooltip-arrow-width) / 2);
+		clip-path: polygon(0 0, 100% 50%, 0 100%);
+	}
+
+	&[data-vg-placement^="right"] &-arrow {
+		width: calc(var(--vg-tooltip-arrow-width) / 2);
+		clip-path: polygon(100% 0, 100% 100%, 0 50%);
+	}
 
 	&-popover {
 		.vg-tooltip-inner {

package/app/utils/js/dom/event.js

@@ -1,4 +1,6 @@
-/**
+/**
+ * Описание: управление DOM-событиями VGApp.
+ * Возможности: делегирование, пространства имён, одноразовые подписки и границы mouseenter/mouseleave.
  * --------------------------------------------------------------------------
  * Bootstrap event.js (рефакторинг)
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
@@ -79,9 +81,10 @@ const getElementEvents = (element) => {
  * @param {boolean} isOneOff
  * @returns {Function}
  */
-const createHandler = (element, fn, isOneOff) => {
-	const handler = function (event) {
-		hydrateObj(event, { delegateTarget: element });
+const createHandler = (element, fn, isOneOff, checkRelatedTarget) => {
+	const handler = function (event) {
+		hydrateObj(event, { delegateTarget: element });
+		if (checkRelatedTarget && isRelatedTargetInside(event)) return;
 
 		if (isOneOff) {
 			EventHandler.off(element, event.type, fn);
@@ -106,13 +109,14 @@ const createHandler = (element, fn, isOneOff) => {
  * @param {boolean} isOneOff
  * @returns {Function}
  */
-const createDelegatedHandler = (element, selector, fn, isOneOff) => {
+const createDelegatedHandler = (element, selector, fn, isOneOff, checkRelatedTarget) => {
 	const handler = function (event) {
 		const candidates = Array.from(element.querySelectorAll(selector));
 		for (let target = event.target; target && target !== element; target = target.parentNode) {
 			if (!candidates.includes(target)) continue;
 
-			hydrateObj(event, { delegateTarget: target });
+			hydrateObj(event, { delegateTarget: target });
+			if (checkRelatedTarget && isRelatedTargetInside(event)) return;
 
 			if (isOneOff) {
 				EventHandler.off(element, event.type, selector, fn);
@@ -131,19 +135,16 @@ const createDelegatedHandler = (element, selector, fn, isOneOff) => {
 };
 
 /**
- * Обёртка для mouseenter/mouseleave.
- * @param {Function} fn
- * @returns {Function}
- */
-const withRelatedTargetCheck = (fn) => {
-	return function (event) {
-		if (
-			!event.relatedTarget ||
-			(event.relatedTarget !== event.delegateTarget && !event.delegateTarget.contains(event.relatedTarget))
-		) {
-			return fn.call(this, event);
-		}
-	};
+ * Проверяет переход внутри одного триггера mouseenter/mouseleave.
+ * @param {Event} event
+ * @returns {boolean}
+ */
+const isRelatedTargetInside = (event) => {
+	const relatedTarget = event.relatedTarget;
+	return !!relatedTarget && (
+		relatedTarget === event.delegateTarget ||
+		(relatedTarget.nodeType && event.delegateTarget.contains(relatedTarget))
+	);
 };
 
 /**
@@ -193,9 +194,10 @@ const addHandler = (element, originalTypeEvent, handler, delegationFunction, one
 		return;
 	}
 
-	let fn = isDelegated
-		? createDelegatedHandler(element, handler, callable, oneOff)
-		: createHandler(element, callable, oneOff);
+	const checkRelatedTarget = Boolean(customEvents[originalTypeEvent.replace(STRIP_NAME_REGEX, '')]);
+	let fn = isDelegated
+		? createDelegatedHandler(element, handler, callable, oneOff, checkRelatedTarget)
+		: createHandler(element, callable, oneOff, checkRelatedTarget);
 
 	const uid = makeEventUid(fn, originalTypeEvent.replace(NAMESPACE_REGEX, ''));
 	fn.uidEvent = uid;
@@ -362,4 +364,4 @@ const EventHandler = {
 	}
 };
 
-export default EventHandler;
+export default EventHandler;