ropav 0.1.6 → 0.1.8

package/dist/useFloatingPosition.js

@@ -1,4 +1,6 @@
-import { computed, isRef, nextTick, onBeforeUnmount, onMounted, readonly, ref, shallowRef, toValue, watch } from "vue";
+import { t as isElement } from "./query.js";
+import { n as observeComposedAncestry } from "./ancestry.js";
+import { nextTick, onBeforeUnmount, readonly, ref, toValue, watch } from "vue";
 import { arrow, autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
 //#region src/components/floating/useFloatingPosition.ts
 var DEFAULT_ARROW_PADDING = 4;
@@ -6,44 +8,9 @@ var DEFAULT_COLLISION_PADDING = 8;
 var DEFAULT_OFFSET = 8;
 var DEFAULT_PLACEMENT = "bottom";
 var DEFAULT_STRATEGY = "absolute";
-function readFloatingTarget(target) {
-	return isRef(target) ? target.value : target;
-}
-function isVirtualReference(value) {
-	if (value == null || typeof value !== "object") return false;
-	return "getBoundingClientRect" in value && typeof value.getBoundingClientRect === "function";
-}
-function isElementReference(value) {
-	return typeof Element !== "undefined" && value instanceof Element;
-}
-function resolveFloatingTarget(target) {
-	if (!target) return null;
-	if (typeof target !== "string") return isVirtualReference(target) ? target : null;
-	if (typeof document === "undefined") return null;
-	try {
-		return document.querySelector(target);
-	} catch {
-		return null;
-	}
-}
-function useFloatingTarget(getTarget, fallback) {
-	const resolvedTarget = shallowRef(null);
-	const isExplicitTarget = computed(() => {
-		const target = readFloatingTarget(getTarget());
-		return target != null && target !== "";
-	});
-	const reference = computed(() => isExplicitTarget.value ? resolvedTarget.value : fallback.value);
-	function syncTarget() {
-		resolvedTarget.value = isExplicitTarget.value ? resolveFloatingTarget(readFloatingTarget(getTarget())) : null;
-	}
-	watch(() => readFloatingTarget(getTarget()), syncTarget, { flush: "post" });
-	onMounted(syncTarget);
-	return {
-		isExplicitTarget,
-		reference,
-		resolvedTarget,
-		syncTarget
-	};
+function getReferenceElement(reference) {
+	if (isElement(reference)) return reference;
+	return reference && isElement(reference.contextElement) ? reference.contextElement : null;
 }
 function useFloatingPosition(options) {
 	const actualPlacement = ref(getPlacement());
@@ -51,6 +18,7 @@ function useFloatingPosition(options) {
 	const floatingStyle = ref(getHiddenStyle());
 	const arrowStyle = ref();
 	let cleanup;
+	let cleanupPositioningAncestry;
 	let generation = 0;
 	let request = 0;
 	function getReference() {
@@ -106,9 +74,14 @@ function useFloatingPosition(options) {
 	function stop() {
 		cleanup?.();
 		cleanup = void 0;
+		cleanupPositioningAncestry?.();
+		cleanupPositioningAncestry = void 0;
 		generation += 1;
 		request += 1;
 	}
+	function observePositioningAncestry() {
+		cleanupPositioningAncestry = observeComposedAncestry(() => [getReferenceElement(getReference()), getFloating()], start, { deferWhileDisconnected: true });
+	}
 	function getMiddleware() {
 		const middleware = [offset(getOffset())];
 		const padding = getCollisionPadding();
@@ -162,6 +135,7 @@ function useFloatingPosition(options) {
 			const updatePosition = () => void update();
 			const animationFrame = getAutoUpdateAnimationFrame();
 			cleanup = animationFrame == null ? autoUpdate(reference, floating, updatePosition) : autoUpdate(reference, floating, updatePosition, { animationFrame });
+			observePositioningAncestry();
 		});
 	}
 	watch([
@@ -192,4 +166,4 @@ function useFloatingPosition(options) {
 	};
 }
 //#endregion
-export { useFloatingPosition as n, useFloatingTarget as r, isElementReference as t };
+export { useFloatingPosition as t };

package/dist/useFloatingTargetLifecycle.js

@@ -0,0 +1,127 @@
+import { i as querySelectorSafe, t as isElement } from "./query.js";
+import { a as snapshotAttributes, i as restoreAttributes } from "./attributes2.js";
+import { computed, isRef, onBeforeUnmount, onMounted, shallowRef, watch, watchEffect } from "vue";
+//#region src/components/floating/useFloatingTargetLifecycle.ts
+var SELECTOR_OBSERVER_OPTIONS = {
+	attributes: true,
+	childList: true,
+	subtree: true
+};
+function readTarget(target) {
+	return isRef(target) ? target.value : target;
+}
+function isVirtualReference(value) {
+	if (value == null || typeof value !== "object") return false;
+	return "getBoundingClientRect" in value && typeof value.getBoundingClientRect === "function";
+}
+function resolveTarget(target) {
+	if (!target) return null;
+	if (typeof target !== "string") return isVirtualReference(target) ? target : null;
+	return querySelectorSafe(target);
+}
+function getMutationObserverConstructor() {
+	if (typeof document === "undefined") return void 0;
+	return document.defaultView?.MutationObserver ?? globalThis.MutationObserver;
+}
+function useFloatingTargetLifecycle({ target, fallback, getTargetElement }) {
+	const resolvedTarget = shallowRef(null);
+	const isExplicitTarget = computed(() => {
+		const currentTarget = readTarget(target());
+		return currentTarget != null && currentTarget !== "";
+	});
+	const reference = computed(() => isExplicitTarget.value ? resolvedTarget.value : fallback.value);
+	const targetElement = computed(() => {
+		const currentTarget = resolvedTarget.value;
+		if (!currentTarget) return null;
+		if (getTargetElement) return getTargetElement(currentTarget);
+		return isElement(currentTarget) ? currentTarget : null;
+	});
+	let selectorObserver;
+	let selectorObserverActive = false;
+	let ownedAttributeMutationDepth = 0;
+	let selectorSyncScheduled = false;
+	function syncTarget() {
+		resolvedTarget.value = isExplicitTarget.value ? resolveTarget(readTarget(target())) : null;
+	}
+	function stopObservingSelector() {
+		selectorObserverActive = false;
+		selectorObserver?.disconnect();
+		selectorObserver = void 0;
+	}
+	function scheduleSelectorSync() {
+		if (selectorSyncScheduled) return;
+		selectorSyncScheduled = true;
+		queueMicrotask(() => {
+			selectorSyncScheduled = false;
+			if (selectorObserverActive) syncTarget();
+		});
+	}
+	function mutateWithoutSelectorObservation(mutate) {
+		const observer = selectorObserver;
+		const shouldPause = observer !== void 0 && selectorObserverActive && ownedAttributeMutationDepth === 0;
+		ownedAttributeMutationDepth += 1;
+		if (shouldPause) {
+			if (observer.takeRecords().length > 0) scheduleSelectorSync();
+			observer.disconnect();
+		}
+		try {
+			mutate();
+		} finally {
+			ownedAttributeMutationDepth -= 1;
+			if (shouldPause && selectorObserverActive && selectorObserver === observer && typeof document !== "undefined") observer.observe(document, SELECTOR_OBSERVER_OPTIONS);
+		}
+	}
+	function observeSelector() {
+		stopObservingSelector();
+		const currentTarget = readTarget(target());
+		const MutationObserverConstructor = getMutationObserverConstructor();
+		if (typeof currentTarget !== "string" || !MutationObserverConstructor || typeof document === "undefined") return;
+		const observer = new MutationObserverConstructor(syncTarget);
+		selectorObserver = observer;
+		selectorObserverActive = true;
+		observer.observe(document, SELECTOR_OBSERVER_OPTIONS);
+	}
+	function syncLifecycle() {
+		syncTarget();
+		observeSelector();
+	}
+	function bindTarget(adapter) {
+		watchEffect((onCleanup) => {
+			const currentTarget = targetElement.value;
+			if (!currentTarget) return;
+			const disconnect = adapter.connect?.(currentTarget);
+			const listeners = adapter.listeners ?? [];
+			for (const [type, listener, options] of listeners) currentTarget.addEventListener(type, listener, options);
+			onCleanup(() => {
+				for (const [type, listener, options] of listeners) currentTarget.removeEventListener(type, listener, options);
+				disconnect?.();
+			});
+		}, { flush: "sync" });
+		const attributeAdapter = adapter.attributes;
+		if (!attributeAdapter) return;
+		watchEffect((onCleanup) => {
+			const currentTarget = targetElement.value;
+			if (!currentTarget || attributeAdapter.isActive?.() === false) return;
+			const snapshot = snapshotAttributes(currentTarget, attributeAdapter.names);
+			mutateWithoutSelectorObservation(() => {
+				attributeAdapter.apply(currentTarget, snapshot);
+			});
+			onCleanup(() => {
+				mutateWithoutSelectorObservation(() => {
+					restoreAttributes(currentTarget, snapshot);
+				});
+			});
+		}, { flush: "sync" });
+	}
+	watch(() => readTarget(target()), syncLifecycle, { flush: "post" });
+	onMounted(syncLifecycle);
+	onBeforeUnmount(stopObservingSelector);
+	return {
+		bindTarget,
+		isExplicitTarget,
+		reference,
+		targetElement
+	};
+}
+//#endregion
+export { useFloatingTargetLifecycle as t };

package/dist/useFormControl.js

@@ -37,6 +37,7 @@ function useFormControl(options) {
 			const elements = getElements(options).filter((element) => element.form === form);
 			if (elements.length === 0) return;
 			queueMicrotask(() => {
+				if (event.defaultPrevented) return;
 				if (options.isControlled()) options.syncControlledValue(elements);
 				else options.readResetValue(elements);
 			});