ropav 0.0.9 → 0.0.11

package/dist/tooltip.js

@@ -1,8 +1,11 @@
 import './tooltip.css';
 import { t as bem } from "./bem.js";
+import { n as useStylesApi, t as presence } from "./styles-api.js";
 import { i as getComponentVariantColorRoles } from "./componentColors.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { VaporTransition, applyVShow, computed, createComponent, createIf, createInvoker, createSlot, defineVaporComponent, delegateEvents, extend, isRef, on, onBeforeUnmount, onMounted, ref, renderEffect, setAttr, setClass, setInsertionState, setProp, setStyle, setText, template, toDisplayString, unref, useId, useSlots, watch } from "vue";
+import { n as useFloatingPosition, r as useFloatingTarget, t as isElementReference } from "./useFloatingPosition.js";
+import { n as useTeleportTarget } from "./useTeleportTarget.js";
+import { VaporTeleport, VaporTransition, applyVShow, computed, createComponent, createIf, createSlot, createTemplateRefSetter, defineVaporComponent, extend, onBeforeUnmount, ref, renderEffect, setAttr, setDynamicProps, setInsertionState, setStaticTemplateRef, setStyle, setText, template, toDisplayString, unref, useId, useSlots, watch } from "vue";
 //#region src/composables/useDelayedOpen.ts
 function readOption(value, fallback) {
 	return typeof value === "function" ? value() ?? fallback : value ?? fallback;
@@ -54,30 +57,7 @@ function useDelayedOpen(options = {}) {
 }
 //#endregion
 //#region src/components/tooltip/useTooltip.ts
-function isHTMLElement(value) {
-	return typeof HTMLElement !== "undefined" && value instanceof HTMLElement;
-}
-function getTargetPosition(rect, placement) {
-	switch (placement) {
-		case "right": return {
-			x: rect.right,
-			y: rect.top + rect.height / 2
-		};
-		case "bottom": return {
-			x: rect.left + rect.width / 2,
-			y: rect.bottom
-		};
-		case "left": return {
-			x: rect.left,
-			y: rect.top + rect.height / 2
-		};
-		default: return {
-			x: rect.left + rect.width / 2,
-			y: rect.top
-		};
-	}
-}
-function resolveOffsetStyle(offset) {
+function resolveTooltipOffsetStyle(offset) {
 	if (offset == null) return void 0;
 	if (typeof offset === "number") return { "--_rp-tooltip-main-axis-offset": `${offset}px` };
 	const style = {};
@@ -101,21 +81,19 @@ function resolveTooltipColorStyleWithContrast(color, autoContrast) {
 function useTooltip(props, emitOpenChange) {
 	const slots = useSlots();
 	const generatedId = useId();
-	const targetElement = ref(null);
-	const targetPosition = ref(null);
-	let isMounted = false;
-	let removeTargetListeners;
-	let removePositionListeners;
-	let describedTarget = null;
-	let previousTargetDescribedby = null;
+	const rootRef = ref(null);
+	const contentRef = ref(null);
+	const arrowRef = ref(null);
 	const tooltipId = computed(() => props.id ?? `${generatedId}-tooltip`);
 	const placement = computed(() => props.placement ?? "top");
-	const isTargetMode = computed(() => props.target != null && props.target !== "");
-	const hasContent = computed(() => Boolean(props.content || slots.content));
 	const isDecorative = computed(() => Boolean(props.decorative));
+	const hasContent = computed(() => Boolean(props.content || slots.content));
 	const isDisabled = computed(() => Boolean(props.disabled || !hasContent.value));
 	const shouldRenderContent = computed(() => !isDisabled.value);
 	const shouldDescribeContent = computed(() => shouldRenderContent.value && !isDecorative.value);
+	const teleportTo = useTeleportTarget(() => props.teleportTo);
+	const { isExplicitTarget, reference, resolvedTarget } = useFloatingTarget(() => props.target, rootRef);
+	const targetElement = computed(() => isElementReference(resolvedTarget.value) ? resolvedTarget.value : null);
 	const { isOpen, open, closeImmediate } = useDelayedOpen({
 		open: () => props.open,
 		openDelay: () => props.openDelay ?? 300,
@@ -123,28 +101,36 @@ function useTooltip(props, emitOpenChange) {
 		onOpenChange: emitOpenChange
 	});
 	const isVisible = computed(() => isOpen.value && !isDisabled.value);
+	const floating = useFloatingPosition({
+		reference,
+		floating: contentRef,
+		arrow: arrowRef,
+		open: isVisible,
+		placement: () => placement.value,
+		strategy: () => props.strategy ?? "absolute",
+		offset: () => props.offset,
+		flip: () => props.flip !== false,
+		shift: () => props.shift !== false,
+		collisionPadding: () => props.collisionPadding ?? 8,
+		arrowEnabled: () => Boolean(props.arrow),
+		restartKey: () => teleportTo.value
+	});
+	const placementSide = computed(() => floating.actualPlacement.value.split("-")[0]);
 	const rootClass = computed(() => bem("rp-tooltip", {
-		[`placement-${placement.value}`]: true,
+		[`placement-${floating.actualPlacement.value}`]: true,
 		arrow: props.arrow,
-		target: isTargetMode.value,
+		target: isExplicitTarget.value,
 		open: isVisible.value,
 		disabled: props.disabled
 	}));
 	const triggerProps = computed(() => ({ "aria-describedby": shouldDescribeContent.value ? tooltipId.value : void 0 }));
 	const contentRole = computed(() => isDecorative.value ? void 0 : "tooltip");
 	const contentAriaHidden = computed(() => isDecorative.value ? "true" : void 0);
-	const contentStyle = computed(() => {
-		const style = {
-			...resolveOffsetStyle(props.offset),
-			...resolveTooltipColorStyleWithContrast(props.color, props.autoContrast)
-		};
-		if (!isTargetMode.value || !targetPosition.value) return Object.keys(style).length > 0 ? style : void 0;
-		return {
-			...style,
-			"--_rp-tooltip-target-x": `${targetPosition.value.x}px`,
-			"--_rp-tooltip-target-y": `${targetPosition.value.y}px`
-		};
-	});
+	const contentStyle = computed(() => ({
+		...floating.floatingStyle.value,
+		...resolveTooltipOffsetStyle(props.offset),
+		...resolveTooltipColorStyleWithContrast(props.color, props.autoContrast)
+	}));
 	function openTooltip() {
 		open();
 	}
@@ -154,150 +140,59 @@ function useTooltip(props, emitOpenChange) {
 	function onKeydown(event) {
 		if (event.key === "Escape") closeTooltip();
 	}
-	function readTarget() {
-		return isRef(props.target) ? props.target.value : props.target;
-	}
-	function resolveTarget() {
-		const target = readTarget();
-		if (!target) return null;
-		if (typeof target === "string") {
-			if (typeof document === "undefined") return null;
-			try {
-				const element = document.querySelector(target);
-				return isHTMLElement(element) ? element : null;
-			} catch {
-				return null;
-			}
-		}
-		return isHTMLElement(target) ? target : null;
-	}
-	function restoreTargetDescription() {
-		if (!describedTarget) return;
-		if (previousTargetDescribedby) describedTarget.setAttribute("aria-describedby", previousTargetDescribedby);
-		else describedTarget.removeAttribute("aria-describedby");
-		describedTarget = null;
-		previousTargetDescribedby = null;
-	}
-	function syncTargetDescription() {
-		restoreTargetDescription();
-		if (!isTargetMode.value || !shouldDescribeContent.value || !targetElement.value) return;
-		describedTarget = targetElement.value;
-		previousTargetDescribedby = describedTarget.getAttribute("aria-describedby");
-		const ids = (previousTargetDescribedby ?? "").split(/\s+/).filter(Boolean);
-		if (!ids.includes(tooltipId.value)) ids.push(tooltipId.value);
-		describedTarget.setAttribute("aria-describedby", ids.join(" "));
-	}
-	function updateTargetPosition() {
-		if (!isTargetMode.value || !targetElement.value) {
-			targetPosition.value = null;
-			return;
-		}
-		targetPosition.value = getTargetPosition(targetElement.value.getBoundingClientRect(), placement.value);
-	}
-	function onTargetOpen() {
-		updateTargetPosition();
-		openTooltip();
-	}
-	function bindTargetListeners(element) {
-		removeTargetListeners?.();
-		element.addEventListener("mouseenter", onTargetOpen);
-		element.addEventListener("mouseleave", closeTooltip);
-		element.addEventListener("focusin", onTargetOpen);
-		element.addEventListener("focusout", closeTooltip);
-		element.addEventListener("keydown", onKeydown);
-		removeTargetListeners = () => {
-			element.removeEventListener("mouseenter", onTargetOpen);
-			element.removeEventListener("mouseleave", closeTooltip);
-			element.removeEventListener("focusin", onTargetOpen);
-			element.removeEventListener("focusout", closeTooltip);
-			element.removeEventListener("keydown", onKeydown);
-			removeTargetListeners = void 0;
-		};
-	}
-	function removeViewportListeners() {
-		removePositionListeners?.();
-		removePositionListeners = void 0;
-	}
-	function bindViewportListeners() {
-		if (typeof window === "undefined" || removePositionListeners) return;
-		window.addEventListener("resize", updateTargetPosition);
-		window.addEventListener("scroll", updateTargetPosition, true);
-		removePositionListeners = () => {
-			window.removeEventListener("resize", updateTargetPosition);
-			window.removeEventListener("scroll", updateTargetPosition, true);
-		};
-	}
-	function syncTarget() {
-		if (!isTargetMode.value) {
-			removeTargetListeners?.();
-			removeViewportListeners();
-			restoreTargetDescription();
-			targetElement.value = null;
-			targetPosition.value = null;
-			return;
-		}
-		const nextTarget = resolveTarget();
-		if (targetElement.value === nextTarget) {
-			syncTargetDescription();
-			updateTargetPosition();
-			return;
-		}
-		removeTargetListeners?.();
-		removeViewportListeners();
-		restoreTargetDescription();
-		targetElement.value = nextTarget;
-		if (!nextTarget) {
-			targetPosition.value = null;
-			return;
-		}
-		bindTargetListeners(nextTarget);
-		syncTargetDescription();
-		updateTargetPosition();
-	}
 	watch(isDisabled, (disabled) => {
 		if (disabled) closeTooltip();
 	});
-	watch(() => readTarget(), () => {
-		if (isMounted) syncTarget();
-	}, { flush: "post" });
+	watch([isExplicitTarget, targetElement], ([explicit, target], _previous, onCleanup) => {
+		if (!explicit || !target) return;
+		target.addEventListener("mouseenter", openTooltip);
+		target.addEventListener("mouseleave", closeTooltip);
+		target.addEventListener("focusin", openTooltip);
+		target.addEventListener("focusout", closeTooltip);
+		target.addEventListener("keydown", onKeydown);
+		onCleanup(() => {
+			target.removeEventListener("mouseenter", openTooltip);
+			target.removeEventListener("mouseleave", closeTooltip);
+			target.removeEventListener("focusin", openTooltip);
+			target.removeEventListener("focusout", closeTooltip);
+			target.removeEventListener("keydown", onKeydown);
+		});
+	}, { flush: "sync" });
 	watch([
-		isTargetMode,
+		isExplicitTarget,
+		targetElement,
 		shouldDescribeContent,
 		tooltipId
-	], () => {
-		if (isMounted) syncTargetDescription();
-	});
-	watch([placement, isVisible], () => {
-		if (isMounted && isVisible.value) updateTargetPosition();
-	});
-	watch(isVisible, (visible) => {
-		if (!isMounted || !isTargetMode.value) return;
-		if (visible) {
-			updateTargetPosition();
-			bindViewportListeners();
-		} else removeViewportListeners();
-	});
-	onMounted(() => {
-		isMounted = true;
-		syncTarget();
-	});
-	onBeforeUnmount(() => {
-		isMounted = false;
-		removeTargetListeners?.();
-		removeViewportListeners();
-		restoreTargetDescription();
-	});
+	], ([explicit, target, shouldDescribe, id], _previous, onCleanup) => {
+		if (!explicit || !target || !shouldDescribe) return;
+		const previous = target.getAttribute("aria-describedby");
+		const ids = (previous ?? "").split(/\s+/).filter(Boolean);
+		if (!ids.includes(id)) ids.push(id);
+		target.setAttribute("aria-describedby", ids.join(" "));
+		onCleanup(() => {
+			if (previous == null) target.removeAttribute("aria-describedby");
+			else target.setAttribute("aria-describedby", previous);
+		});
+	}, { flush: "sync" });
 	return {
+		rootRef,
+		contentRef,
+		arrowRef,
 		tooltipId,
 		isOpen,
+		isDisabled,
 		isVisible,
-		isTargetMode,
+		isTargetMode: isExplicitTarget,
 		shouldRenderContent,
 		rootClass,
 		triggerProps,
 		contentRole,
 		contentAriaHidden,
 		contentStyle,
+		actualPlacement: floating.actualPlacement,
+		placementSide,
+		arrowStyle: floating.arrowStyle,
+		teleportTo,
 		openTooltip,
 		closeTooltip,
 		onKeydown
@@ -305,84 +200,148 @@ function useTooltip(props, emitOpenChange) {
 }
 //#endregion
 //#region src/components/tooltip/tooltip.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template(" ");
-var t1 = template("<span data-v-13c39164 class=rp-tooltip__content>");
-var t2 = template("<span data-v-13c39164>", 1);
-delegateEvents("focusin", "focusout", "keydown");
+var t0 = template("<span data-v-38bfcb12 class=rp-tooltip__arrow aria-hidden=true>");
+var t1 = template(" ");
+var t2 = template("<span data-v-38bfcb12>");
+var t3 = template("<span data-v-38bfcb12>", 1);
 //#endregion
 //#region src/components/tooltip/tooltip.vue
 var tooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
 	name: "RpTooltip",
+	inheritAttrs: false,
 	__name: "tooltip",
 	props: {
 		id: {},
 		content: { default: "" },
-		target: {},
-		placement: { default: "top" },
 		color: {},
 		autoContrast: { type: Boolean },
-		offset: {},
 		open: {
 			type: Boolean,
 			default: void 0
 		},
 		openDelay: { default: 300 },
-		arrow: {
+		disabled: {
 			type: Boolean,
 			default: false
 		},
-		disabled: {
+		decorative: {
 			type: Boolean,
 			default: false
 		},
-		decorative: {
+		target: {},
+		placement: { default: "top" },
+		strategy: { default: "absolute" },
+		offset: {},
+		flip: {
+			type: Boolean,
+			default: true
+		},
+		shift: {
+			type: Boolean,
+			default: true
+		},
+		collisionPadding: { default: 8 },
+		arrow: {
 			type: Boolean,
 			default: false
-		}
+		},
+		teleport: {
+			type: Boolean,
+			default: true
+		},
+		teleportTo: {},
+		classNames: {},
+		styles: {}
 	},
 	emits: ["update:open"],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
-		const { tooltipId, isVisible, isTargetMode, shouldRenderContent, rootClass, triggerProps, contentRole, contentAriaHidden, contentStyle, openTooltip, closeTooltip, onKeydown } = useTooltip(props, (open) => {
+		const { rootRef, contentRef, arrowRef, tooltipId, isDisabled, isVisible, isTargetMode, shouldRenderContent, rootClass, triggerProps, contentRole, contentAriaHidden, contentStyle, actualPlacement, placementSide, arrowStyle, teleportTo, openTooltip, closeTooltip, onKeydown } = useTooltip(props, (open) => {
 			emit("update:open", open);
 		});
-		const n10 = t2();
-		renderEffect(() => setClass(n10, unref(rootClass)));
-		setInsertionState(n10, null, 0);
+		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
+		const state = computed(() => isVisible.value ? "open" : "closed");
+		const rootAttrs = computed(() => getRootAttrs({
+			class: rootClass.value,
+			"data-state": state.value,
+			"data-disabled": presence(isDisabled.value),
+			onMouseenter: openTooltip,
+			onMouseleave: closeTooltip,
+			onFocusin: openTooltip,
+			onFocusout: closeTooltip,
+			onKeydown
+		}));
+		const publicTriggerProps = computed(() => {
+			const partAttrs = getPartAttrs("trigger");
+			return {
+				...triggerProps.value,
+				...props.classNames?.trigger !== void 0 ? { class: partAttrs.class } : {},
+				...props.styles?.trigger !== void 0 ? { style: partAttrs.style } : {},
+				"data-state": state.value,
+				"data-disabled": presence(isDisabled.value)
+			};
+		});
+		const contentAttrs = computed(() => ({
+			...getPartAttrs("content", {
+				class: "rp-tooltip__content",
+				style: contentStyle.value
+			}),
+			"data-state": state.value,
+			"data-placement": actualPlacement.value
+		}));
+		const _setTemplateRef = createTemplateRefSetter();
+		const n14 = t3();
+		renderEffect(() => setDynamicProps(n14, [rootAttrs.value]));
+		setInsertionState(n14, null, 0);
 		createIf(() => !unref(isTargetMode), () => {
-			return createSlot("default", { triggerProps: () => unref(triggerProps) }, null, 1);
+			return createSlot("default", { triggerProps: () => publicTriggerProps.value }, null, 1);
+		});
+		setInsertionState(n14, null, 1);
+		createComponent(VaporTeleport, {
+			to: () => unref(teleportTo),
+			disabled: () => !__props.teleport
+		}, () => {
+			return createComponent(VaporTransition, {
+				name: "rp-tooltip-content",
+				persisted: ""
+			}, extend(() => {
+				return createIf(() => unref(shouldRenderContent), () => {
+					const n11 = t2();
+					renderEffect(() => setDynamicProps(n11, [
+						{ id: unref(tooltipId) },
+						contentAttrs.value,
+						{
+							role: unref(contentRole),
+							"aria-hidden": unref(contentAriaHidden),
+							"data-side": unref(placementSide)
+						}
+					]));
+					setInsertionState(n11, null, 0);
+					createIf(() => __props.arrow, () => {
+						const n7 = t0();
+						_setTemplateRef(n7, arrowRef, null, "arrowRef");
+						renderEffect(() => {
+							setAttr(n7, "data-side", unref(placementSide));
+							setStyle(n7, unref(arrowStyle));
+						});
+						return n7;
+					});
+					setInsertionState(n11, null, 1);
+					createSlot("content", null, () => {
+						const n10 = t1();
+						renderEffect(() => setText(n10, toDisplayString(__props.content)));
+						return n10;
+					}, 1);
+					applyVShow(n11, () => unref(isVisible));
+					_setTemplateRef(n11, contentRef, null, "contentRef");
+					return n11;
+				}, null, 129);
+			}, { _: 8 }));
 		});
-		setInsertionState(n10, null, 1);
-		createComponent(VaporTransition, {
-			name: "rp-tooltip-content",
-			persisted: ""
-		}, extend(() => {
-			return createIf(() => unref(shouldRenderContent), () => {
-				const n8 = t1();
-				renderEffect(() => {
-					setProp(n8, "id", unref(tooltipId));
-					setProp(n8, "role", unref(contentRole));
-					setAttr(n8, "aria-hidden", unref(contentAriaHidden));
-					setStyle(n8, unref(contentStyle));
-				});
-				setInsertionState(n8, null, 0);
-				createSlot("content", null, () => {
-					const n7 = t0();
-					renderEffect(() => setText(n7, toDisplayString(__props.content)));
-					return n7;
-				}, 1);
-				applyVShow(n8, () => unref(isVisible));
-				return n8;
-			}, null, 129);
-		}, { _: 8 }));
-		on(n10, "mouseenter", (e) => unref(openTooltip)(e));
-		on(n10, "mouseleave", (e) => unref(closeTooltip)(e));
-		n10.$evtfocusin = createInvoker((e) => unref(openTooltip)(e));
-		n10.$evtfocusout = createInvoker((e) => unref(closeTooltip)(e));
-		n10.$evtkeydown = createInvoker((e) => unref(onKeydown)(e));
-		return n10;
+		setStaticTemplateRef(n14, rootRef, null, "rootRef");
+		return n14;
 	}
-}), [["__scopeId", "data-v-13c39164"]]);
+}), [["__scopeId", "data-v-38bfcb12"]]);
 //#endregion
-export { useDelayedOpen as n, tooltip_default as t };
+export { useDelayedOpen as i, resolveTooltipColorStyleWithContrast as n, resolveTooltipOffsetStyle as r, tooltip_default as t };

package/dist/tooltip2.js

@@ -0,0 +1,8 @@
+//#region src/components/tooltip/types.ts
+var tooltipParts = [
+	"root",
+	"trigger",
+	"content"
+];
+//#endregion
+export { tooltipParts as t };

package/dist/useClickOutside.js

@@ -4,7 +4,7 @@ function useClickOutside(target, active, callback) {
 	let isListening = false;
 	let stopWatch;
 	function handler(e) {
-		if (target.value && !target.value.contains(e.target)) callback();
+		if (!(Array.isArray(target) ? target : [target]).some((current) => current.value?.contains(e.target))) callback(e);
 	}
 	function setListening(value) {
 		if (typeof document === "undefined" || value === isListening) return;