@sandlada/vue-mdc
Version:
154 lines (153 loc) • 4.7 kB
JavaScript
/**
* @license
* Copyright 2025 Sandlada & Kai Orion
* SPDX-License-Identifier: MIT
*/
import { ref, onMounted, onBeforeUnmount } from "vue";
import { isServer } from "../../utils/is-server.js";
import { detectPlatform } from "../../utils/platform.js";
const STooltipController = Symbol("tooltipController");
var ETooltipPosition;
(function(ETooltipPosition2) {
ETooltipPosition2["Left"] = "left";
ETooltipPosition2["Above"] = "above";
ETooltipPosition2["Right"] = "right";
ETooltipPosition2["Below"] = "below";
ETooltipPosition2["Before"] = "before";
ETooltipPosition2["After"] = "after";
})(ETooltipPosition || (ETooltipPosition = {}));
function useTooltip(surfaceRef, anchorRef, options) {
const { position, touchGestures, visibility, disabled } = options;
let animationTimer = ref(null);
const platformSupportsMouseEvents = () => {
return detectPlatform().isDesktop;
};
const disableNativeGesturesIfNecessary = () => {
const gestures = options?.touchGestures?.value ?? "auto";
const host = surfaceRef.value;
if (!host) {
return;
}
if (gestures !== "off") {
const style = host.style;
if (gestures === "on" || host.nodeName !== "INPUT" && host.nodeName !== "TEXTAREA") {
style.userSelect = style.msUserSelect = style.webkitUserSelect = style.MozUserSelect = "none";
}
if (gestures === "on" || !host.draggable) {
style.webkitUserDrag = "none";
}
style.touchAction = "none";
style.webkitTapHighlightColor = "transparent";
}
};
const show = (delay, origin) => {
if (!surfaceRef.value) {
return;
}
visibility.value = true;
};
const hide = (delay) => {
if (!surfaceRef.value) {
return;
}
visibility.value = false;
};
const handleAnchorMouseEnter = (event2) => {
if (disabled.value || !anchorRef.value) {
return;
}
if (animationTimer.value) {
clearTimeout(animationTimer.value);
}
if (event2.x !== void 0 && event2.y !== void 0) ;
animationTimer.value = setTimeout(() => {
show();
}, 500);
anchorRef.value.addEventListener("mouseleave", handleAnchorMouseLeave);
anchorRef.value.addEventListener("wheel", handleWheel, { passive: true });
};
const handleAnchorMouseLeave = (e) => {
if (!anchorRef.value) {
return;
}
const newTarget = event.relatedTarget;
if (!newTarget || !anchorRef.value.contains(newTarget)) ;
if (animationTimer.value) {
clearTimeout(animationTimer.value);
}
anchorRef.value.removeEventListener("mouseleave", handleAnchorMouseLeave);
anchorRef.value.removeEventListener("wheel", handleAnchorMouseLeave);
animationTimer.value = setTimeout(() => {
hide();
}, 500);
};
const handleWheel = (event2) => {
if (visibility.value) {
const elementUnderPointer = document.elementFromPoint(event2.clientX, event2.clientY);
const element = surfaceRef.value;
if (elementUnderPointer !== element && !element?.contains(elementUnderPointer)) {
hide();
}
}
};
const handleSurfaceMouseEnter = () => {
if (!surfaceRef.value || !visibility.value) {
return;
}
if (animationTimer.value) {
clearTimeout(animationTimer.value);
}
animationTimer.value = setTimeout(() => {
show();
}, 500);
surfaceRef.value.addEventListener("mouseleave", handleSurfaceMouseLeave);
surfaceRef.value.addEventListener("wheel", handleWheel, { passive: true });
};
const handleSurfaceMouseLeave = () => {
if (!surfaceRef.value) {
return;
}
if (animationTimer.value) {
clearTimeout(animationTimer.value);
}
surfaceRef.value.removeEventListener("mouseleave", handleSurfaceMouseLeave);
surfaceRef.value.removeEventListener("wheel", handleWheel, { passive: true });
animationTimer.value = setTimeout(() => {
hide();
}, 500);
};
onMounted(() => {
if (isServer()) {
return;
}
const host = surfaceRef.value;
if (!host) {
return;
}
if (platformSupportsMouseEvents()) {
anchorRef.value?.addEventListener("mouseenter", handleAnchorMouseEnter, { passive: true });
surfaceRef.value?.addEventListener("mouseenter", handleSurfaceMouseEnter, { passive: true });
} else if (touchGestures.value !== "off") {
disableNativeGesturesIfNecessary();
}
});
onBeforeUnmount(() => {
if (isServer()) {
return;
}
const host = surfaceRef.value;
if (!host) {
return;
}
});
return {
show,
hide
};
}
export {
ETooltipPosition,
STooltipController,
useTooltip
};
//# sourceMappingURL=tooltip-controller.js.map