ropav 0.1.7 → 0.1.8

package/dist/useFlatOptionCollection.js

@@ -0,0 +1,134 @@
+import { n as getNextEnabledIndex, t as getEnabledIndexes } from "./collectionNavigation.js";
+import { n as isEventWithinElement } from "./events.js";
+import { computed, defineVaporComponent, markRaw, onBeforeUnmount, onMounted, shallowRef, template, watch } from "vue";
+//#region ~icons/lucide/chevrons-up-down
+var t0 = template("<svg viewBox=\"0 0 24 24\"width=1.2em height=1.2em><path fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2 d=\"m7 15l5 5l5-5M7 9l5-5l5 5\">", 3, 1);
+function render(_ctx) {
+	return t0();
+}
+var chevrons_up_down_default = markRaw(defineVaporComponent({
+	name: "lucide-chevrons-up-down",
+	render
+}));
+//#endregion
+//#region src/internal/composables/useClickOutside.ts
+function useClickOutside(target, active, callback) {
+	const targets = Array.isArray(target) ? target : [target];
+	const listeningDocuments = /* @__PURE__ */ new Set();
+	let stopWatch;
+	function handler(event) {
+		if (!targets.some((current) => {
+			const element = current.value;
+			return element ? isEventWithinElement(event, element) : false;
+		})) callback(event);
+	}
+	function detachListeners() {
+		for (const document of listeningDocuments) document.removeEventListener("click", handler, true);
+		listeningDocuments.clear();
+	}
+	function syncListeners() {
+		detachListeners();
+		if (!active.value) return;
+		for (const current of targets) {
+			const document = current.value?.ownerDocument;
+			if (!document || listeningDocuments.has(document)) continue;
+			document.addEventListener("click", handler, true);
+			listeningDocuments.add(document);
+		}
+	}
+	onMounted(() => {
+		stopWatch = watch([active, ...targets], syncListeners, { immediate: true });
+	});
+	onBeforeUnmount(() => {
+		stopWatch?.();
+		detachListeners();
+	});
+}
+//#endregion
+//#region src/internal/composables/useFlatOptionCollection.ts
+function findActiveDescendant(collection, id) {
+	const documentMatch = collection.ownerDocument.getElementById(id);
+	if (documentMatch && collection.contains(documentMatch)) return documentMatch;
+	return [...collection.querySelectorAll("[id]")].find((element) => element.id === id);
+}
+function useFlatOptionCollection(options) {
+	const activeKey = shallowRef(null);
+	const isDisabled = options.isDisabled ?? (() => false);
+	const isSelected = options.isSelected ?? (() => false);
+	const loop = options.loop ?? true;
+	const activeIndex = computed(() => {
+		if (activeKey.value == null) return -1;
+		return options.items().findIndex((item) => options.getKey(item) === activeKey.value && !isDisabled(item));
+	});
+	const enabledIndexes = computed(() => getEnabledIndexes(options.items(), isDisabled));
+	const optionStates = computed(() => options.items().map((option, index) => ({
+		option,
+		id: `${options.baseId}-option-${index}`,
+		active: index === activeIndex.value,
+		disabled: isDisabled(option),
+		selected: isSelected(option)
+	})));
+	const activeDescendantId = computed(() => {
+		if (!options.isOpen()) return void 0;
+		return optionStates.value[activeIndex.value]?.id;
+	});
+	function reset() {
+		activeKey.value = null;
+	}
+	function activateIndex(index) {
+		const item = options.items()[index];
+		if (!item || isDisabled(item)) return;
+		activeKey.value = options.getKey(item);
+	}
+	function activate(target) {
+		if (target === "first") {
+			const first = enabledIndexes.value[0];
+			if (first === void 0) reset();
+			else activateIndex(first);
+			return;
+		}
+		if (target === "last") {
+			const indexes = enabledIndexes.value;
+			const last = indexes[indexes.length - 1];
+			if (last === void 0) reset();
+			else activateIndex(last);
+			return;
+		}
+		if (target === "selected") {
+			const selectedIndex = options.items().findIndex((item) => isSelected(item) && !isDisabled(item));
+			if (selectedIndex >= 0) activateIndex(selectedIndex);
+			else activate("first");
+			return;
+		}
+		if (!isDisabled(target)) activeKey.value = options.getKey(target);
+	}
+	function move(direction) {
+		if (activeIndex.value < 0) {
+			activate(direction === 1 ? "first" : "last");
+			return;
+		}
+		const nextIndex = getNextEnabledIndex(options.items(), activeIndex.value, direction, isDisabled, loop);
+		if (nextIndex === void 0) reset();
+		else activateIndex(nextIndex);
+	}
+	watch(activeIndex, (index) => {
+		if (activeKey.value != null && index < 0) reset();
+	}, { flush: "sync" });
+	watch([activeDescendantId, options.collectionRef], ([id, collection]) => {
+		if (!id || !collection) return;
+		findActiveDescendant(collection, id)?.scrollIntoView?.({ block: "nearest" });
+	}, {
+		flush: "post",
+		immediate: true
+	});
+	return {
+		options: optionStates,
+		activeIndex,
+		activeDescendantId,
+		activate,
+		move,
+		reset
+	};
+}
+//#endregion
+export { useClickOutside as n, chevrons_up_down_default as r, useFlatOptionCollection as t };

package/dist/useFloatingPosition.js

@@ -1,132 +1,7 @@
-import { i as querySelectorSafe, t as isElement } from "./query.js";
-import { t as createRafScheduler } from "./rafScheduler.js";
-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/utils/dom/ancestry.ts
-function getFrameElement(documentNode) {
-	try {
-		const frameElement = documentNode.defaultView?.frameElement;
-		return isElement(frameElement) ? frameElement : null;
-	} catch {
-		return null;
-	}
-}
-function getComposedParent(node) {
-	if (isElement(node) && node.assignedSlot) return node.assignedSlot;
-	if (node.parentNode) return node.parentNode;
-	if (node.nodeType === 9) return getFrameElement(node);
-	const host = "host" in node ? node.host : null;
-	return isElement(host) ? host : null;
-}
-function getComposedAncestry(node) {
-	const ancestry = [];
-	let current = node ?? null;
-	while (current) {
-		current = getComposedParent(current);
-		if (current) ancestry.push(current);
-	}
-	return ancestry;
-}
-function areNodeListsIdentical(left, right) {
-	return left.length === right.length && left.every((node, index) => node === right[index]);
-}
-function readComposedAncestryPaths(nodes) {
-	return nodes.map((node) => node ? [node, ...getComposedAncestry(node)] : []);
-}
-function areAncestryPathsIdentical(left, right) {
-	return left.length === right.length && left.every((path, index) => areNodeListsIdentical(path, right[index] ?? []));
-}
-function getNodeDocument(node) {
-	return node.nodeType === 9 ? node : node.ownerDocument;
-}
-function getMutationObserverConstructor(node) {
-	return getNodeDocument(node)?.defaultView?.MutationObserver ?? globalThis.MutationObserver;
-}
-function isShadowRootNode(node) {
-	return node.nodeType === 11 && "host" in node && isElement(node.host);
-}
-function hasDisconnectedAncestry(nodes) {
-	return nodes.some((node) => node != null && [node, ...getComposedAncestry(node)].some((ancestor) => !ancestor.isConnected));
-}
-function observeComposedAncestry(getNodes, onChange, options = {}) {
-	let paths = readComposedAncestryPaths(getNodes());
-	let mutationObservers = [];
-	let slotRoots = [];
-	let disposed = false;
-	const reconnectScheduler = createRafScheduler(check, getView);
-	function getView() {
-		for (const node of getNodes()) {
-			const view = node ? getNodeDocument(node)?.defaultView : null;
-			if (view) return view;
-		}
-		return null;
-	}
-	function scheduleReconnectCheck(nodes) {
-		if (!hasDisconnectedAncestry(nodes)) return;
-		if (!getView()?.requestAnimationFrame) return;
-		reconnectScheduler.schedule();
-	}
-	function disconnectTargets() {
-		for (const observer of mutationObservers) observer.disconnect();
-		mutationObservers = [];
-		for (const root of slotRoots) root.removeEventListener("slotchange", check);
-		slotRoots = [];
-	}
-	function observeTargets(nodes, nextPaths) {
-		const observedNodes = new Set(nextPaths.flat());
-		const nextSlotRoots = /* @__PURE__ */ new Set();
-		const observersByConstructor = /* @__PURE__ */ new Map();
-		for (const node of observedNodes) {
-			if (isElement(node) && node.shadowRoot) nextSlotRoots.add(node.shadowRoot);
-			if (isShadowRootNode(node)) nextSlotRoots.add(node);
-			const MutationObserverConstructor = getMutationObserverConstructor(node);
-			if (!MutationObserverConstructor) continue;
-			let observer = observersByConstructor.get(MutationObserverConstructor);
-			if (!observer) {
-				observer = new MutationObserverConstructor(check);
-				observersByConstructor.set(MutationObserverConstructor, observer);
-			}
-			if (isElement(node)) observer.observe(node, {
-				childList: true,
-				attributes: true,
-				attributeFilter: ["slot", "name"]
-			});
-			else observer.observe(node, { childList: true });
-		}
-		mutationObservers = [...observersByConstructor.values()];
-		slotRoots = [...nextSlotRoots];
-		for (const root of slotRoots) root.addEventListener("slotchange", check);
-		scheduleReconnectCheck(nodes);
-	}
-	function rebind(nodes, nextPaths) {
-		disconnectTargets();
-		paths = nextPaths;
-		observeTargets(nodes, paths);
-	}
-	function check() {
-		if (disposed) return;
-		const nodes = getNodes();
-		if (options.deferWhileDisconnected && hasDisconnectedAncestry(nodes)) {
-			scheduleReconnectCheck(nodes);
-			return;
-		}
-		reconnectScheduler.cancel();
-		const nextPaths = readComposedAncestryPaths(nodes);
-		if (areAncestryPathsIdentical(paths, nextPaths)) return;
-		rebind(nodes, nextPaths);
-		onChange();
-	}
-	const initialNodes = getNodes();
-	paths = readComposedAncestryPaths(initialNodes);
-	observeTargets(initialNodes, paths);
-	return () => {
-		if (disposed) return;
-		disposed = true;
-		reconnectScheduler.cancel();
-		disconnectTargets();
-	};
-}
-//#endregion
 //#region src/components/floating/useFloatingPosition.ts
 var DEFAULT_ARROW_PADDING = 4;
 var DEFAULT_COLLISION_PADDING = 8;
@@ -137,37 +12,6 @@ function getReferenceElement(reference) {
 	if (isElement(reference)) return reference;
 	return reference && isElement(reference.contextElement) ? reference.contextElement : null;
 }
-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 resolveFloatingTarget(target) {
-	if (!target) return null;
-	if (typeof target !== "string") return isVirtualReference(target) ? target : null;
-	return querySelectorSafe(target);
-}
-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 useFloatingPosition(options) {
 	const actualPlacement = ref(getPlacement());
 	const isPositioned = ref(false);
@@ -322,4 +166,4 @@ function useFloatingPosition(options) {
 	};
 }
 //#endregion
-export { useFloatingTarget as n, useFloatingPosition 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);
 			});