ropav 0.0.11 → 0.0.12

package/dist/tooltip.js

@@ -4,7 +4,7 @@ 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 { n as useFloatingPosition, r as useFloatingTarget, t as isElementReference } from "./useFloatingPosition.js";
-import { n as useTeleportTarget } from "./useTeleportTarget.js";
+import { n as useTeleportPositioningKey, r 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) {
@@ -92,6 +92,7 @@ function useTooltip(props, emitOpenChange) {
 	const shouldRenderContent = computed(() => !isDisabled.value);
 	const shouldDescribeContent = computed(() => shouldRenderContent.value && !isDecorative.value);
 	const teleportTo = useTeleportTarget(() => props.teleportTo);
+	const teleportPositioningKey = useTeleportPositioningKey();
 	const { isExplicitTarget, reference, resolvedTarget } = useFloatingTarget(() => props.target, rootRef);
 	const targetElement = computed(() => isElementReference(resolvedTarget.value) ? resolvedTarget.value : null);
 	const { isOpen, open, closeImmediate } = useDelayedOpen({
@@ -112,8 +113,11 @@ function useTooltip(props, emitOpenChange) {
 		flip: () => props.flip !== false,
 		shift: () => props.shift !== false,
 		collisionPadding: () => props.collisionPadding ?? 8,
-		arrowEnabled: () => Boolean(props.arrow),
-		restartKey: () => teleportTo.value
+		restartKey: () => [
+			Boolean(props.teleport),
+			teleportTo.value,
+			teleportPositioningKey.value
+		]
 	});
 	const placementSide = computed(() => floating.actualPlacement.value.split("-")[0]);
 	const rootClass = computed(() => bem("rp-tooltip", {

package/dist/useControlState.js

@@ -6,6 +6,7 @@ function mergeIds(...values) {
 }
 function useControlState(options = {}) {
 	const id = computed(() => options.id);
+	const form = computed(() => options.form);
 	const disabled = computed(() => options.disabled ?? false);
 	const required = computed(() => options.required ?? false);
 	const invalid = computed(() => options.invalid ?? false);
@@ -16,6 +17,9 @@ function useControlState(options = {}) {
 		get id() {
 			return id.value;
 		},
+		get form() {
+			return form.value;
+		},
 		get disabled() {
 			return disabled.value;
 		},

package/dist/useFloatingPosition.js

@@ -1,4 +1,4 @@
-import { computed, isRef, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, watch } from "vue";
+import { computed, isRef, nextTick, onBeforeUnmount, onMounted, readonly, ref, shallowRef, toValue, watch } from "vue";
 //#region node_modules/.pnpm/@floating-ui+utils@0.2.12/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
 var min = Math.min;
 var max = Math.max;
@@ -1138,6 +1138,10 @@ var computePosition = (reference, floating, options) => {
 //#endregion
 //#region src/components/floating/useFloatingPosition.ts
 var DEFAULT_ARROW_PADDING = 4;
+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;
 }
@@ -1178,23 +1182,53 @@ function useFloatingTarget(getTarget, fallback) {
 	};
 }
 function useFloatingPosition(options) {
-	const actualPlacement = ref(options.placement());
+	const actualPlacement = ref(getPlacement());
 	const isPositioned = ref(false);
 	const floatingStyle = ref(getHiddenStyle());
 	const arrowStyle = ref();
 	let cleanup;
 	let generation = 0;
 	let request = 0;
+	function getReference() {
+		return toValue(options.reference);
+	}
+	function getFloating() {
+		return toValue(options.floating);
+	}
+	function getArrow() {
+		return toValue(options.arrow);
+	}
+	function getOpen() {
+		return toValue(options.open) !== false;
+	}
+	function getPlacement() {
+		return toValue(options.placement) ?? DEFAULT_PLACEMENT;
+	}
+	function getStrategy() {
+		return toValue(options.strategy) ?? DEFAULT_STRATEGY;
+	}
+	function getOffset() {
+		return toValue(options.offset) ?? DEFAULT_OFFSET;
+	}
+	function getFlip() {
+		return toValue(options.flip) !== false;
+	}
+	function getShift() {
+		return toValue(options.shift) !== false;
+	}
+	function getCollisionPadding() {
+		return toValue(options.collisionPadding) ?? DEFAULT_COLLISION_PADDING;
+	}
 	function getHiddenStyle() {
 		return {
-			position: options.strategy(),
+			position: getStrategy(),
 			top: "0",
 			left: "0",
 			visibility: "hidden"
 		};
 	}
 	function resetPosition() {
-		actualPlacement.value = options.placement();
+		actualPlacement.value = getPlacement();
 		isPositioned.value = false;
 		floatingStyle.value = getHiddenStyle();
 		arrowStyle.value = void 0;
@@ -1206,28 +1240,29 @@ function useFloatingPosition(options) {
 		request += 1;
 	}
 	function getMiddleware() {
-		const middleware = [offset(options.offset() ?? 8)];
-		const padding = options.collisionPadding();
-		if (options.flip()) middleware.push(flip({ padding }));
-		if (options.shift()) middleware.push(shift({ padding }));
-		if (options.arrowEnabled() && options.arrow?.value) middleware.push(arrow({
-			element: options.arrow.value,
+		const middleware = [offset(getOffset())];
+		const padding = getCollisionPadding();
+		if (getFlip()) middleware.push(flip({ padding }));
+		if (getShift()) middleware.push(shift({ padding }));
+		const arrow$2 = getArrow();
+		if (arrow$2) middleware.push(arrow({
+			element: arrow$2,
 			padding: DEFAULT_ARROW_PADDING
 		}));
 		return middleware;
 	}
 	async function update() {
-		const reference = options.reference.value;
-		const floating = options.floating.value;
-		if (!reference || !floating || !options.open.value) return;
+		const reference = getReference();
+		const floating = getFloating();
+		if (!reference || !floating || !getOpen()) return;
 		const currentGeneration = generation;
 		const currentRequest = ++request;
 		const result = await computePosition(reference, floating, {
-			placement: options.placement(),
-			strategy: options.strategy(),
+			placement: getPlacement(),
+			strategy: getStrategy(),
 			middleware: getMiddleware()
 		});
-		if (currentGeneration !== generation || currentRequest !== request || !options.open.value) return;
+		if (currentGeneration !== generation || currentRequest !== request || !getOpen()) return;
 		actualPlacement.value = result.placement;
 		floatingStyle.value = {
 			position: result.strategy,
@@ -1243,40 +1278,38 @@ function useFloatingPosition(options) {
 	}
 	function start() {
 		stop();
+		if (!getOpen()) return;
 		resetPosition();
-		if (!options.open.value) return;
+		const currentGeneration = generation;
 		nextTick(() => {
-			const reference = options.reference.value;
-			const floating = options.floating.value;
-			if (!reference || !floating || !options.open.value) return;
+			const reference = getReference();
+			const floating = getFloating();
+			if (currentGeneration !== generation || !reference || !floating || !getOpen()) return;
 			cleanup = autoUpdate(reference, floating, () => void update());
 		});
 	}
 	watch([
-		options.open,
-		options.reference,
-		options.floating,
-		() => options.arrow?.value,
-		options.placement,
-		options.strategy,
-		options.offset,
-		options.flip,
-		options.shift,
-		options.collisionPadding,
-		options.arrowEnabled,
-		() => options.restartKey?.()
+		getOpen,
+		getReference,
+		getFloating,
+		getArrow,
+		getPlacement,
+		getStrategy,
+		getOffset,
+		getFlip,
+		getShift,
+		getCollisionPadding,
+		() => toValue(options.restartKey)
 	], start, {
 		flush: "post",
 		immediate: true
 	});
 	onBeforeUnmount(stop);
 	return {
-		actualPlacement,
-		arrowStyle,
-		floatingStyle,
-		isPositioned,
-		start,
-		stop,
+		actualPlacement: readonly(actualPlacement),
+		arrowStyle: readonly(arrowStyle),
+		floatingStyle: readonly(floatingStyle),
+		isPositioned: readonly(isPositioned),
 		update
 	};
 }

package/dist/useFormControl.js

@@ -0,0 +1,107 @@
+import { computed, inject, provide, shallowRef, watch, watchEffect } from "vue";
+//#region src/composables/useControllableValue.ts
+function useControllableValue(options) {
+	const initialValue = options.defaultValue();
+	const uncontrolledValue = shallowRef(initialValue);
+	const isControlled = computed(() => options.modelValue() !== void 0);
+	watch(options.modelValue, (value) => {
+		if (value !== void 0) uncontrolledValue.value = value;
+	}, { immediate: true });
+	const value = computed(() => options.modelValue() ?? uncontrolledValue.value);
+	function setValue(nextValue) {
+		if (!isControlled.value) uncontrolledValue.value = nextValue;
+		options.onChange(nextValue);
+	}
+	function resetValue(nextValue = initialValue) {
+		if (!isControlled.value) uncontrolledValue.value = nextValue;
+	}
+	return {
+		initialValue,
+		isControlled,
+		value,
+		setValue,
+		resetValue
+	};
+}
+//#endregion
+//#region src/composables/useFormControl.ts
+var nestedFormControlOwnerKey = Symbol("nestedFormControlOwner");
+function provideNestedFormControlOwner() {
+	let claimed = false;
+	provide(nestedFormControlOwnerKey, () => {
+		if (claimed) return false;
+		claimed = true;
+		return true;
+	});
+}
+function claimNestedFormControlOwner() {
+	return inject(nestedFormControlOwnerKey, void 0)?.() ?? false;
+}
+function getElements(options) {
+	return options.elements().filter((element) => Boolean(element));
+}
+function useFormControl(options) {
+	const initialized = /* @__PURE__ */ new WeakSet();
+	watchEffect(() => {
+		const elements = getElements(options);
+		for (const [index, element] of elements.entries()) {
+			if (!initialized.has(element)) {
+				options.initializeDefault?.(element, index);
+				initialized.add(element);
+			}
+			element.setCustomValidity(options.validationMessage?.(element, index, elements) ?? "");
+		}
+	}, { flush: "post" });
+	watchEffect((onCleanup) => {
+		const documents = new Set(getElements(options).map((element) => element.ownerDocument));
+		if (documents.size === 0) return;
+		function onReset(event) {
+			const form = event.target;
+			if (!(form instanceof HTMLFormElement)) return;
+			const elements = getElements(options).filter((element) => element.form === form);
+			if (elements.length === 0) return;
+			queueMicrotask(() => {
+				if (options.isControlled()) options.syncControlledValue(elements);
+				else options.readResetValue(elements);
+			});
+		}
+		for (const document of documents) document.addEventListener("reset", onReset, true);
+		onCleanup(() => {
+			for (const document of documents) document.removeEventListener("reset", onReset, true);
+		});
+	}, { flush: "post" });
+}
+function useTextFormControl(element, controllable, validationMessage) {
+	useFormControl({
+		elements: () => [element()],
+		isControlled: () => controllable.isControlled.value,
+		initializeDefault(control) {
+			control.defaultValue = controllable.initialValue;
+		},
+		validationMessage,
+		readResetValue([control]) {
+			controllable.resetValue(control.value);
+		},
+		syncControlledValue([control]) {
+			control.value = controllable.value.value;
+		}
+	});
+}
+function useCheckedFormControl(element, controllable, validationMessage) {
+	useFormControl({
+		elements: () => [element()],
+		isControlled: () => controllable.isControlled.value,
+		initializeDefault(control) {
+			control.defaultChecked = controllable.initialValue;
+		},
+		validationMessage,
+		readResetValue([control]) {
+			controllable.resetValue(control.checked);
+		},
+		syncControlledValue([control]) {
+			control.checked = controllable.value.value;
+		}
+	});
+}
+//#endregion
+export { useTextFormControl as a, useFormControl as i, provideNestedFormControlOwner as n, useControllableValue as o, useCheckedFormControl as r, claimNestedFormControlOwner as t };

package/dist/useOverlayLayer.js

@@ -0,0 +1,262 @@
+import { computed, inject, onBeforeUnmount, provide, readonly, ref, shallowRef, toValue, watch } from "vue";
+//#region src/composables/useOverlayLayer.ts
+var overlayLayerKey = Symbol("overlay-layer");
+var documentStates = /* @__PURE__ */ new WeakMap();
+var layerMetadata = /* @__PURE__ */ new WeakMap();
+function createState() {
+	return {
+		layers: [],
+		inertSnapshots: /* @__PURE__ */ new Map(),
+		originalBodyOverflow: "",
+		scrollLocked: false,
+		observer: null,
+		syncQueued: false
+	};
+}
+function getState(document) {
+	const existing = documentStates.get(document);
+	if (existing) return existing;
+	const state = createState();
+	documentStates.set(document, state);
+	return state;
+}
+function isDescendantLayer(layer, ancestor) {
+	let parent = layerMetadata.get(layer)?.parent ?? null;
+	while (parent) {
+		if (parent === ancestor) return true;
+		parent = layerMetadata.get(parent)?.parent ?? null;
+	}
+	return false;
+}
+function syncLayerZIndices(state) {
+	let highestZIndex = Number.NEGATIVE_INFINITY;
+	for (const layer of state.layers) {
+		const metadata = layerMetadata.get(layer);
+		if (!metadata) continue;
+		const zIndex = Math.max(metadata.baseZIndex, highestZIndex + 2);
+		metadata.setZIndex(zIndex);
+		highestZIndex = zIndex;
+	}
+}
+function isEventWithinElement(event, element) {
+	const path = event.composedPath();
+	if (path.length > 0) return path.some((entry) => entry === element || typeof Node !== "undefined" && entry instanceof Node && element.contains(entry));
+	return typeof Node !== "undefined" && event.target instanceof Node && element.contains(event.target);
+}
+function restoreInertBackground(state) {
+	for (const [element, snapshot] of state.inertSnapshots) {
+		element.inert = snapshot.inert;
+		if (snapshot.ariaHidden == null) element.removeAttribute("aria-hidden");
+		else element.setAttribute("aria-hidden", snapshot.ariaHidden);
+	}
+	state.inertSnapshots.clear();
+}
+function inertElement(state, element) {
+	if (!state.inertSnapshots.has(element)) state.inertSnapshots.set(element, {
+		ariaHidden: element.getAttribute("aria-hidden"),
+		inert: Boolean(element.inert)
+	});
+	element.inert = true;
+	element.setAttribute("aria-hidden", "true");
+}
+function inertUnprotectedBranches(state, parent, protectedRoots) {
+	for (const child of parent.children) {
+		if (!(child instanceof HTMLElement)) continue;
+		if (!protectedRoots.some((root) => child === root || child.contains(root))) {
+			inertElement(state, child);
+			continue;
+		}
+		if (!protectedRoots.includes(child)) inertUnprotectedBranches(state, child, protectedRoots);
+	}
+}
+function stopObserver(state) {
+	state.observer?.disconnect();
+	state.observer = null;
+	state.syncQueued = false;
+}
+function unlockScroll(document, state) {
+	if (!state.scrollLocked) return;
+	document.body.style.overflow = state.originalBodyOverflow;
+	state.scrollLocked = false;
+}
+function queueModalEffects(document, state) {
+	if (state.syncQueued) return;
+	state.syncQueued = true;
+	queueMicrotask(() => {
+		state.syncQueued = false;
+		syncModalEffects(document, state);
+	});
+}
+function startObserver(document, state) {
+	if (state.observer || typeof MutationObserver === "undefined") return;
+	state.observer = new MutationObserver(() => queueModalEffects(document, state));
+	state.observer.observe(document.body, {
+		childList: true,
+		subtree: true
+	});
+}
+function syncModalEffects(document, state) {
+	restoreInertBackground(state);
+	let modalIndex = -1;
+	for (let index = state.layers.length - 1; index >= 0; index -= 1) {
+		const layer = state.layers[index];
+		if (layer?.modalEffects && layer.modal.value) {
+			modalIndex = index;
+			break;
+		}
+	}
+	const shouldLock = state.layers.some((layer) => layer.modalEffects && layer.modal.value && layer.preventScroll.value);
+	if (shouldLock && !state.scrollLocked) {
+		state.originalBodyOverflow = document.body.style.overflow;
+		document.body.style.overflow = "hidden";
+		state.scrollLocked = true;
+	} else if (!shouldLock) unlockScroll(document, state);
+	if (modalIndex < 0) {
+		stopObserver(state);
+		return;
+	}
+	const protectedRoots = [];
+	for (const layer of state.layers.slice(modalIndex)) {
+		const element = layer.element.value;
+		if (element?.isConnected) protectedRoots.push(element);
+		for (const branch of layer.branches.value) if (branch.isConnected) protectedRoots.push(branch);
+	}
+	if (protectedRoots.length > 0) {
+		inertUnprotectedBranches(state, document.body, protectedRoots);
+		startObserver(document, state);
+	}
+}
+function removeLayer(layer, document, state) {
+	const index = state.layers.indexOf(layer);
+	if (index >= 0) state.layers.splice(index, 1);
+	syncLayerZIndices(state);
+	syncModalEffects(document, state);
+}
+function useOverlayLayer(options) {
+	const parent = inject(overlayLayerKey, null);
+	const active = computed(() => Boolean(toValue(options.active)));
+	const modal = computed(() => Boolean(toValue(options.modal ?? false)));
+	const preventScroll = computed(() => Boolean(toValue(options.preventScroll ?? true)));
+	const branches = shallowRef([]);
+	const focusBranches = shallowRef([]);
+	const branchSet = /* @__PURE__ */ new Set();
+	const focusBranchSet = /* @__PURE__ */ new Set();
+	const insideBranchSet = /* @__PURE__ */ new Set();
+	const zIndex = ref(options.baseZIndex ?? 100);
+	let registeredDocument = null;
+	let registeredElement = null;
+	let parentBranchCleanup;
+	function syncBranches() {
+		branches.value = [...branchSet];
+		focusBranches.value = [...focusBranchSet];
+		if (registeredDocument) syncModalEffects(registeredDocument, getState(registeredDocument));
+	}
+	function registerBranch(element, branchOptions = {}) {
+		branchSet.add(element);
+		if (branchOptions.focus !== false) focusBranchSet.add(element);
+		if (branchOptions.inside !== false) insideBranchSet.add(element);
+		const parentCleanup = parent?.registerBranch(element, branchOptions);
+		syncBranches();
+		return () => {
+			branchSet.delete(element);
+			focusBranchSet.delete(element);
+			insideBranchSet.delete(element);
+			parentCleanup?.();
+			syncBranches();
+		};
+	}
+	function replaceParentBranch(element) {
+		parentBranchCleanup?.();
+		parentBranchCleanup = element ? parent?.registerBranch(element) : void 0;
+	}
+	const context = {
+		id: Symbol("overlay-layer"),
+		element: options.element,
+		active,
+		modal,
+		modalEffects: options.modalEffects === true,
+		preventScroll,
+		branches,
+		focusBranches,
+		zIndex: readonly(zIndex),
+		isTopLayer() {
+			if (!registeredDocument) return false;
+			const layers = getState(registeredDocument).layers;
+			return layers[layers.length - 1] === context;
+		},
+		isInside(event, additional = []) {
+			return [
+				options.element.value,
+				...insideBranchSet,
+				...additional
+			].some((element) => element != null && isEventWithinElement(event, element));
+		},
+		registerBranch
+	};
+	layerMetadata.set(context, {
+		baseZIndex: options.baseZIndex ?? 100,
+		parent,
+		setZIndex(value) {
+			zIndex.value = value;
+		}
+	});
+	function unregister() {
+		replaceParentBranch(null);
+		if (!registeredDocument) return;
+		const document = registeredDocument;
+		registeredDocument = null;
+		registeredElement = null;
+		removeLayer(context, document, getState(document));
+	}
+	function register(element) {
+		const document = element.ownerDocument;
+		if (registeredDocument === document) {
+			if (registeredElement !== element) {
+				replaceParentBranch(element);
+				registeredElement = element;
+				syncModalEffects(document, getState(document));
+			}
+			return;
+		}
+		unregister();
+		const state = getState(document);
+		const currentIndex = state.layers.indexOf(context);
+		if (currentIndex >= 0) state.layers.splice(currentIndex, 1);
+		const descendantIndex = state.layers.findIndex((layer) => isDescendantLayer(layer, context));
+		if (descendantIndex >= 0) state.layers.splice(descendantIndex, 0, context);
+		else state.layers.push(context);
+		registeredDocument = document;
+		registeredElement = element;
+		replaceParentBranch(element);
+		syncLayerZIndices(state);
+		syncModalEffects(document, state);
+	}
+	watch([active, options.element], ([isActive, element]) => {
+		if (isActive && element?.isConnected) register(element);
+		else unregister();
+	}, {
+		flush: "post",
+		immediate: true
+	});
+	watch([modal, preventScroll], () => {
+		if (registeredDocument) syncModalEffects(registeredDocument, getState(registeredDocument));
+	});
+	onBeforeUnmount(unregister);
+	provide(overlayLayerKey, context);
+	return context;
+}
+function useOverlayLayerBranch(element, options = {}) {
+	const layer = inject(overlayLayerKey, null);
+	let cleanup;
+	watch(element, (nextElement) => {
+		cleanup?.();
+		cleanup = nextElement ? layer?.registerBranch(nextElement, options) : void 0;
+	}, {
+		flush: "post",
+		immediate: true
+	});
+	onBeforeUnmount(() => cleanup?.());
+	return layer;
+}
+//#endregion
+export { useOverlayLayerBranch as n, useOverlayLayer as t };

package/dist/useTeleportTarget.js

@@ -1,4 +1,4 @@
-import { computed, inject, isRef, provide } from "vue";
+import { computed, inject, isRef, provide, toValue } from "vue";
 //#region src/components/teleport-provider/useTeleportTarget.ts
 var teleportTargetKey = Symbol("teleport-target");
 function readTeleportTarget(target) {
@@ -7,23 +7,34 @@ function readTeleportTarget(target) {
 function hasTarget(target) {
 	return target != null && target !== "";
 }
-function provideTeleportTarget(props) {
-	const parentTarget = inject(teleportTargetKey, void 0);
+function provideTeleportTarget(props, positioningKey) {
+	const parentContext = inject(teleportTargetKey, void 0);
 	const target = computed(() => {
 		const ownTarget = readTeleportTarget(props.teleportTo);
 		if (hasTarget(ownTarget)) return ownTarget;
-		return parentTarget?.value ?? "body";
+		return parentContext?.target.value ?? "body";
+	});
+	provide(teleportTargetKey, {
+		target,
+		positioningKey: computed(() => [
+			target.value,
+			toValue(positioningKey),
+			parentContext?.positioningKey.value
+		])
 	});
-	provide(teleportTargetKey, target);
 	return target;
 }
-function useTeleportTarget(getTarget) {
-	const providedTarget = inject(teleportTargetKey, void 0);
+function useTeleportTarget(target) {
+	const providedContext = inject(teleportTargetKey, void 0);
 	return computed(() => {
-		const ownTarget = readTeleportTarget(getTarget());
+		const ownTarget = readTeleportTarget(toValue(target));
 		if (hasTarget(ownTarget)) return ownTarget;
-		return providedTarget?.value ?? "body";
+		return providedContext?.target.value ?? "body";
 	});
 }
+function useTeleportPositioningKey() {
+	const providedContext = inject(teleportTargetKey, void 0);
+	return computed(() => providedContext?.positioningKey.value);
+}
 //#endregion
-export { useTeleportTarget as n, provideTeleportTarget as t };
+export { useTeleportPositioningKey as n, useTeleportTarget as r, provideTeleportTarget as t };