@vizejs/ui 0.387.0 → 0.389.0

package/dist/positioner-DaPo2YxM.mjs

@@ -0,0 +1,708 @@
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.mjs";
+import { createContext } from "./context.mjs";
+import { createElementBlock, defineComponent, getCurrentScope, onMounted, onScopeDispose, onUpdated, openBlock, renderSlot, shallowReadonly, shallowRef, toRef, toValue, unref, useTemplateRef, watch, watchEffect } from "vue";
+//#region src/families/overlays/positioner/positioner-context.ts
+/** Compound-component context shared by Positioner and PositionerArrow. */
+const positionerContext = createContext("Positioner");
+//#endregion
+//#region src/families/overlays/positioner/positioner-geometry.ts
+const sides = new Set([
+	"bottom",
+	"left",
+	"right",
+	"top"
+]);
+const aligns = new Set([
+	"center",
+	"end",
+	"start"
+]);
+const oppositeSide = {
+	bottom: "top",
+	left: "right",
+	right: "left",
+	top: "bottom"
+};
+function isFiniteNumber(value) {
+	return Number.isFinite(value);
+}
+function asNumber(value, fallback) {
+	return value === void 0 || !isFiniteNumber(value) ? fallback : value;
+}
+/** Parse a placement token into side and alignment. */
+function parsePlacement(placement) {
+	const [sideToken = "bottom", alignToken] = placement.split("-");
+	const side = sides.has(sideToken) ? sideToken : "bottom";
+	return {
+		align: aligns.has(alignToken) ? alignToken : "center",
+		side
+	};
+}
+function formatPlacement(side, align) {
+	return align === "center" ? side : `${side}-${align}`;
+}
+function overflowOf(box, viewport, padding) {
+	return {
+		bottom: box.y + box.height - (viewport.y + viewport.height - padding),
+		left: viewport.x + padding - box.x,
+		right: box.x + box.width - (viewport.x + viewport.width - padding),
+		top: viewport.y + padding - box.y
+	};
+}
+function intersects(left, right, padding) {
+	return left.x < right.x + right.width - padding && left.x + left.width > right.x + padding && left.y < right.y + right.height - padding && left.y + left.height > right.y + padding;
+}
+function clamp(value, min, max) {
+	if (max < min) return min;
+	return Math.min(max, Math.max(min, value));
+}
+function resolveAlign(align, rtl, side) {
+	if (align === "center" || !rtl || side === "left" || side === "right") return align;
+	return align === "start" ? "end" : "start";
+}
+function place(input) {
+	const align = resolveAlign(input.align, input.rtl, input.side);
+	const { floating, offset, reference, side } = input;
+	let x = reference.x;
+	let y = reference.y;
+	if (side === "top" || side === "bottom") {
+		if (align === "start") x = reference.x;
+		else if (align === "end") x = reference.x + reference.width - floating.width;
+		else x = reference.x + (reference.width - floating.width) / 2;
+		y = side === "top" ? reference.y - floating.height - offset : reference.y + reference.height + offset;
+	} else {
+		if (align === "start") y = reference.y;
+		else if (align === "end") y = reference.y + reference.height - floating.height;
+		else y = reference.y + (reference.height - floating.height) / 2;
+		x = side === "left" ? reference.x - floating.width - offset : reference.x + reference.width + offset;
+	}
+	return {
+		height: floating.height,
+		width: floating.width,
+		x,
+		y
+	};
+}
+function mainOverflow(side, overflow) {
+	return overflow[side];
+}
+function arrowCoords(box, reference, side, arrow, arrowPadding) {
+	const maxX = box.width - arrow.width - arrowPadding;
+	const maxY = box.height - arrow.height - arrowPadding;
+	if (side === "top" || side === "bottom") return {
+		arrowX: clamp(reference.x + reference.width / 2 - box.x - arrow.width / 2, arrowPadding, maxX),
+		arrowY: side === "top" ? box.height : -arrow.height
+	};
+	const center = reference.y + reference.height / 2 - box.y - arrow.height / 2;
+	return {
+		arrowX: side === "left" ? box.width : -arrow.width,
+		arrowY: clamp(center, arrowPadding, maxY)
+	};
+}
+/**
+* Place a floating box next to a reference, flipping and shifting to stay in view.
+*/
+function computePosition(input) {
+	const parsed = parsePlacement(input.placement ?? "bottom");
+	const offset = asNumber(input.offset, 0);
+	const padding = asNumber(input.collisionPadding, 0);
+	const arrowPadding = asNumber(input.arrowPadding, 0);
+	const rtl = input.rtl === true;
+	const shouldFlip = input.flip !== false;
+	const shouldShift = input.shift !== false;
+	const shouldHide = input.hide !== false;
+	const preferred = place({
+		align: parsed.align,
+		floating: input.floating,
+		offset,
+		reference: input.reference,
+		rtl,
+		side: parsed.side
+	});
+	const preferredOverflow = overflowOf(preferred, input.viewport, padding);
+	let side = parsed.side;
+	let box = preferred;
+	if (shouldFlip) {
+		const flippedSide = oppositeSide[parsed.side];
+		const flipped = place({
+			align: parsed.align,
+			floating: input.floating,
+			offset,
+			reference: input.reference,
+			rtl,
+			side: flippedSide
+		});
+		const flippedOverflow = overflowOf(flipped, input.viewport, padding);
+		if (mainOverflow(parsed.side, preferredOverflow) > 0 && mainOverflow(flippedSide, flippedOverflow) < mainOverflow(parsed.side, preferredOverflow)) {
+			side = flippedSide;
+			box = flipped;
+		}
+	}
+	if (shouldShift) box = {
+		...box,
+		x: clamp(box.x, input.viewport.x + padding, input.viewport.x + input.viewport.width - padding - box.width),
+		y: clamp(box.y, input.viewport.y + padding, input.viewport.y + input.viewport.height - padding - box.height)
+	};
+	const overflow = overflowOf(box, input.viewport, padding);
+	const arrow = input.arrow ?? null;
+	return {
+		...arrow === null ? {
+			arrowX: null,
+			arrowY: null
+		} : arrowCoords(box, input.reference, side, arrow, arrowPadding),
+		hidden: shouldHide && !intersects(input.reference, input.viewport, padding),
+		overflow,
+		placement: formatPlacement(side, parsed.align),
+		x: box.x,
+		y: box.y
+	};
+}
+/** Normalize DOMRect-like measurements into a plain {@link Rect}. */
+function readRect(value) {
+	const record = value;
+	return {
+		height: value.height,
+		width: value.width,
+		x: typeof record.x === "number" ? record.x : record.left ?? 0,
+		y: typeof record.y === "number" ? record.y : record.top ?? 0
+	};
+}
+//#endregion
+//#region src/families/overlays/positioner/positioner-size.ts
+/** Inline style for the floating host at a translated position. */
+function hostStyle(strategy, x, y) {
+	return `position:${strategy};left:0px;top:0px;transform:translate(${String(x)}px, ${String(y)}px)`;
+}
+/** Inline style for the arrow along the facing edge. */
+function arrowStyle(arrowX, arrowY) {
+	return `position:absolute;left:${String(arrowX ?? 0)}px;top:${String(arrowY ?? 0)}px`;
+}
+/**
+* Measure the space a floating element may occupy at a resolved placement.
+*
+* The main axis stops at the reference edge (minus the configured offset);
+* the cross axis spans the viewport. Both respect the collision padding and
+* never go negative, mirroring how flip and shift read the same viewport.
+*/
+function computeAvailableSize(input) {
+	const padding = input.collisionPadding ?? 0;
+	const offset = input.offset ?? 0;
+	const { reference, viewport } = input;
+	const { side } = parsePlacement(input.placement);
+	let width = viewport.width - padding * 2;
+	let height = viewport.height - padding * 2;
+	if (side === "top") height = reference.y - offset - (viewport.y + padding);
+	else if (side === "bottom") height = viewport.y + viewport.height - padding - (reference.y + reference.height + offset);
+	else if (side === "left") width = reference.x - offset - (viewport.x + padding);
+	else width = viewport.x + viewport.width - padding - (reference.x + reference.width + offset);
+	return {
+		height: Math.max(0, height),
+		width: Math.max(0, width)
+	};
+}
+/**
+* Publish available space as host constraints and CSS custom properties.
+*
+* The returned fragment is appended to the floating host style when the
+* `size` strategy is enabled: `max-width`/`max-height` clamp the box while
+* `--vize-ui-positioner-available-width` and
+* `--vize-ui-positioner-available-height` stay consumable from consumer CSS.
+*/
+function sizeStyle(size) {
+	const width = String(size.width);
+	const height = String(size.height);
+	return `;max-width:${width}px;max-height:${height}px;--vize-ui-positioner-available-width:${width}px;--vize-ui-positioner-available-height:${height}px`;
+}
+//#endregion
+//#region src/families/overlays/positioner/positioner-viewport.ts
+/** Insets that leave the viewport untouched. */
+const zeroSafeAreaInsets = Object.freeze({
+	bottom: 0,
+	left: 0,
+	right: 0,
+	top: 0
+});
+/**
+* The visible viewport in page coordinates.
+*
+* `visualViewport` already excludes on-screen keyboards and follows
+* pinch-zoom, so collision handling tracks what the user actually sees.
+* Server rendering (no `document`) reports an empty box.
+*/
+function visualViewportRect() {
+	const visual = globalThis.visualViewport;
+	if (visual) return {
+		height: visual.height,
+		width: visual.width,
+		x: visual.offsetLeft,
+		y: visual.offsetTop
+	};
+	const doc = globalThis.document?.documentElement;
+	if (doc) return {
+		height: doc.clientHeight,
+		width: doc.clientWidth,
+		x: 0,
+		y: 0
+	};
+	return {
+		height: 0,
+		width: 0,
+		x: 0,
+		y: 0
+	};
+}
+/** The document that owns a measured element, if any. */
+function ownerDocumentOf(element) {
+	return element?.ownerDocument ?? globalThis.document ?? null;
+}
+/** Shrink a viewport box by per-edge insets, never below an empty box. */
+function insetViewport(viewport, insets) {
+	return {
+		height: Math.max(0, viewport.height - insets.top - insets.bottom),
+		width: Math.max(0, viewport.width - insets.left - insets.right),
+		x: viewport.x + Math.min(Math.max(0, insets.left), viewport.width),
+		y: viewport.y + Math.min(Math.max(0, insets.top), viewport.height)
+	};
+}
+function readPixels(value) {
+	return Math.max(0, Number.parseFloat(value) || 0);
+}
+/**
+* Read `env(safe-area-inset-*)` through a computed-style probe.
+*
+* CSS environment variables are not scriptable, so a hidden fixed probe is
+* measured and removed synchronously. Environments without a document or
+* without `env()` support report zero insets, keeping the read SSR-safe.
+*/
+function readSafeAreaInsets(targetDocument) {
+	const doc = targetDocument ?? globalThis.document;
+	const view = doc?.defaultView;
+	if (!doc?.body || typeof view?.getComputedStyle !== "function") return zeroSafeAreaInsets;
+	const probe = doc.createElement("div");
+	probe.setAttribute("data-vize-ui", "safe-area");
+	probe.setAttribute("aria-hidden", "true");
+	probe.style.cssText = "position:fixed;top:0;left:0;visibility:hidden;pointer-events:none;padding-top:env(safe-area-inset-top, 0px);padding-right:env(safe-area-inset-right, 0px);padding-bottom:env(safe-area-inset-bottom, 0px);padding-left:env(safe-area-inset-left, 0px)";
+	doc.body.append(probe);
+	try {
+		const style = view.getComputedStyle(probe);
+		return {
+			bottom: readPixels(style.paddingBottom),
+			left: readPixels(style.paddingLeft),
+			right: readPixels(style.paddingRight),
+			top: readPixels(style.paddingTop)
+		};
+	} finally {
+		probe.remove();
+	}
+}
+//#endregion
+//#region src/families/overlays/positioner/positioner-runtime.ts
+const invalidOptionDiagnostic = "VIZE_UI_POSITIONER_OPTION";
+const disposedDiagnostic = "VIZE_UI_POSITIONER_DISPOSED";
+const setupDiagnostic = "VIZE_UI_POSITIONER_SETUP";
+const placements = new Set([
+	"bottom",
+	"bottom-end",
+	"bottom-start",
+	"left",
+	"left-end",
+	"left-start",
+	"right",
+	"right-end",
+	"right-start",
+	"top",
+	"top-end",
+	"top-start"
+]);
+const strategies = new Set(["absolute", "fixed"]);
+function readBoolean(value, fallback) {
+	const resolved = toValue(value);
+	if (resolved === void 0) return fallback;
+	if (typeof resolved !== "boolean") throw new TypeError(`${invalidOptionDiagnostic}: expected a boolean`);
+	return resolved;
+}
+function readNumber(value, fallback) {
+	const resolved = toValue(value);
+	if (resolved === void 0) return fallback;
+	if (typeof resolved !== "number" || !Number.isFinite(resolved)) throw new TypeError(`${invalidOptionDiagnostic}: expected a finite number`);
+	return resolved;
+}
+function readPlacement(value) {
+	const resolved = toValue(value);
+	if (resolved === void 0) return "bottom";
+	if (!placements.has(resolved)) throw new TypeError(`${invalidOptionDiagnostic}: placement must be a named side or alignment`);
+	return resolved;
+}
+function readStrategy(value) {
+	const resolved = toValue(value);
+	if (resolved === void 0) return "fixed";
+	if (!strategies.has(resolved)) throw new TypeError(`${invalidOptionDiagnostic}: strategy must resolve to absolute or fixed`);
+	return resolved;
+}
+function readDirection(value) {
+	const resolved = toValue(value);
+	if (resolved === void 0) return "ltr";
+	if (resolved !== "ltr" && resolved !== "rtl") throw new TypeError(`${invalidOptionDiagnostic}: direction must resolve to ltr or rtl`);
+	return resolved;
+}
+function readViewport(value) {
+	const resolved = toValue(value);
+	if (resolved === void 0) return null;
+	if (typeof resolved !== "object" || resolved === null || typeof resolved.x !== "number" || typeof resolved.y !== "number" || typeof resolved.width !== "number" || typeof resolved.height !== "number") throw new TypeError(`${invalidOptionDiagnostic}: viewport must resolve to a box`);
+	return resolved;
+}
+function validateOptions(options) {
+	if (typeof options.placement !== "function") readPlacement(options.placement);
+	if (typeof options.strategy !== "function") readStrategy(options.strategy);
+	if (typeof options.direction !== "function") readDirection(options.direction);
+	if (typeof options.offset !== "function") readNumber(options.offset, 0);
+	if (typeof options.collisionPadding !== "function") readNumber(options.collisionPadding, 0);
+	if (typeof options.arrowPadding !== "function") readNumber(options.arrowPadding, 0);
+	if (typeof options.flip !== "function") readBoolean(options.flip, true);
+	if (typeof options.shift !== "function") readBoolean(options.shift, true);
+	if (typeof options.size !== "function") readBoolean(options.size, false);
+	if (typeof options.safeArea !== "function") readBoolean(options.safeArea, false);
+	if (typeof options.hide !== "function") readBoolean(options.hide, true);
+	if (typeof options.updateOnScroll !== "function") readBoolean(options.updateOnScroll, true);
+	if (typeof options.updateOnResize !== "function") readBoolean(options.updateOnResize, true);
+	if (typeof options.viewport !== "function") readViewport(options.viewport);
+}
+function measure(element) {
+	if (element === null) return null;
+	return readRect(element.getBoundingClientRect());
+}
+function floatingOffsetParent(element) {
+	if (element === null || !("offsetParent" in element)) return null;
+	const parent = element.offsetParent;
+	return parent instanceof Element ? parent : null;
+}
+/** Create an SSR-safe floating placement controller. */
+function createPositioner(options = {}) {
+	validateOptions(options);
+	const x = shallowRef(0);
+	const y = shallowRef(0);
+	const arrowX = shallowRef(null);
+	const arrowY = shallowRef(null);
+	const availableWidth = shallowRef(null);
+	const availableHeight = shallowRef(null);
+	const hidden = shallowRef(false);
+	const ready = shallowRef(false);
+	const resolvedPlacement = shallowRef(readPlacement(options.placement));
+	const strategy = shallowRef(readStrategy(options.strategy));
+	const style = shallowRef(hostStyle(strategy.value, 0, 0));
+	const arrowStyles = shallowRef(arrowStyle(null, null));
+	let disposed = false;
+	let reference = null;
+	let floating = null;
+	let arrow = null;
+	let safeAreaInsets = zeroSafeAreaInsets;
+	const listeners = [];
+	const assertAlive = () => {
+		if (disposed) throw new Error(`${disposedDiagnostic}: the controller has been disposed`);
+	};
+	const refreshSafeArea = () => {
+		safeAreaInsets = readBoolean(options.safeArea, false) ? readSafeAreaInsets(ownerDocumentOf(floating)) : zeroSafeAreaInsets;
+	};
+	const detach = () => {
+		while (listeners.length > 0) listeners.pop()?.();
+	};
+	const attach = () => {
+		detach();
+		refreshSafeArea();
+		if (typeof globalThis.addEventListener !== "function") return;
+		const onScroll = () => {
+			if (readBoolean(options.updateOnScroll, true)) update();
+		};
+		const onResize = () => {
+			refreshSafeArea();
+			if (readBoolean(options.updateOnResize, true)) update();
+		};
+		globalThis.addEventListener("scroll", onScroll, true);
+		listeners.push(() => globalThis.removeEventListener("scroll", onScroll, true));
+		globalThis.addEventListener("resize", onResize);
+		listeners.push(() => globalThis.removeEventListener("resize", onResize));
+		const visual = globalThis.visualViewport;
+		if (visual) {
+			visual.addEventListener("resize", onResize);
+			visual.addEventListener("scroll", onScroll);
+			listeners.push(() => {
+				visual.removeEventListener("resize", onResize);
+				visual.removeEventListener("scroll", onScroll);
+			});
+		}
+		if (typeof ResizeObserver === "function") {
+			const observer = new ResizeObserver(onResize);
+			if (reference instanceof Element) observer.observe(reference);
+			if (floating instanceof Element) observer.observe(floating);
+			listeners.push(() => observer.disconnect());
+		}
+	};
+	const update = () => {
+		assertAlive();
+		const referenceRect = measure(reference);
+		const floatingRect = measure(floating);
+		if (referenceRect === null || floatingRect === null) return;
+		const nextStrategy = readStrategy(options.strategy);
+		const collisionPadding = readNumber(options.collisionPadding, 0);
+		const offset = readNumber(options.offset, 0);
+		const viewport = insetViewport(readViewport(options.viewport) ?? visualViewportRect(), safeAreaInsets);
+		const result = computePosition({
+			arrow: measure(arrow),
+			arrowPadding: readNumber(options.arrowPadding, 0),
+			collisionPadding,
+			flip: readBoolean(options.flip, true),
+			floating: floatingRect,
+			hide: readBoolean(options.hide, true),
+			offset,
+			placement: readPlacement(options.placement),
+			reference: referenceRect,
+			rtl: readDirection(options.direction) === "rtl",
+			shift: readBoolean(options.shift, true),
+			viewport
+		});
+		const available = computeAvailableSize({
+			collisionPadding,
+			offset,
+			placement: result.placement,
+			reference: referenceRect,
+			viewport
+		});
+		let nextX = result.x;
+		let nextY = result.y;
+		if (nextStrategy === "absolute") {
+			const parent = measure(floatingOffsetParent(floating));
+			if (parent !== null) {
+				nextX -= parent.x;
+				nextY -= parent.y;
+			}
+		}
+		x.value = nextX;
+		y.value = nextY;
+		arrowX.value = result.arrowX;
+		arrowY.value = result.arrowY;
+		availableWidth.value = available.width;
+		availableHeight.value = available.height;
+		hidden.value = result.hidden;
+		resolvedPlacement.value = result.placement;
+		strategy.value = nextStrategy;
+		style.value = hostStyle(nextStrategy, nextX, nextY) + (readBoolean(options.size, false) ? sizeStyle(available) : "");
+		arrowStyles.value = arrowStyle(result.arrowX, result.arrowY);
+		ready.value = true;
+	};
+	const stopWatch = watch(() => [
+		toValue(options.placement),
+		toValue(options.strategy),
+		toValue(options.direction),
+		toValue(options.offset),
+		toValue(options.collisionPadding),
+		toValue(options.arrowPadding),
+		toValue(options.flip),
+		toValue(options.shift),
+		toValue(options.size),
+		toValue(options.safeArea),
+		toValue(options.hide),
+		toValue(options.viewport)
+	], () => {
+		if (disposed) return;
+		refreshSafeArea();
+		if (ready.value) update();
+	}, { flush: "sync" });
+	return Object.freeze({
+		arrowX: shallowReadonly(arrowX),
+		arrowY: shallowReadonly(arrowY),
+		arrowStyle: shallowReadonly(arrowStyles),
+		availableHeight: shallowReadonly(availableHeight),
+		availableWidth: shallowReadonly(availableWidth),
+		dispose: () => {
+			if (disposed) return;
+			disposed = true;
+			detach();
+			stopWatch();
+		},
+		hidden: shallowReadonly(hidden),
+		ready: shallowReadonly(ready),
+		resolvedPlacement: shallowReadonly(resolvedPlacement),
+		setArrow: (element) => {
+			assertAlive();
+			if (arrow === element) return;
+			arrow = element;
+			if (ready.value) update();
+		},
+		setFloating: (element) => {
+			assertAlive();
+			if (floating === element) return;
+			floating = element;
+			attach();
+			update();
+		},
+		setReference: (element) => {
+			assertAlive();
+			if (reference === element) return;
+			reference = element;
+			attach();
+			update();
+		},
+		strategy: shallowReadonly(strategy),
+		style: shallowReadonly(style),
+		update,
+		x: shallowReadonly(x),
+		y: shallowReadonly(y)
+	});
+}
+/** Create a positioner disposed with the current Vue effect scope. */
+function usePositioner(options = {}) {
+	if (!getCurrentScope()) throw new Error(`${setupDiagnostic}: use inside component setup or an active effect scope`);
+	const controller = createPositioner(options);
+	onScopeDispose(controller.dispose);
+	return controller;
+}
+//#endregion
+//#region src/families/overlays/positioner/positioner.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = [
+	"data-vize-placement",
+	"data-vize-positioner-ready",
+	"data-vize-hidden"
+];
+//#endregion
+//#region src/families/overlays/positioner/positioner.vue
+var positioner_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "positioner",
+	props: {
+		reference: {
+			type: null,
+			required: false,
+			default: null
+		},
+		placement: {
+			type: String,
+			required: false,
+			default: "bottom"
+		},
+		strategy: {
+			type: String,
+			required: false,
+			default: "fixed"
+		},
+		offset: {
+			type: Number,
+			required: false,
+			default: 0
+		},
+		collisionPadding: {
+			type: Number,
+			required: false,
+			default: 0
+		},
+		arrowPadding: {
+			type: Number,
+			required: false,
+			default: 0
+		},
+		direction: {
+			type: String,
+			required: false,
+			default: "ltr"
+		},
+		flip: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		shift: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		size: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		safeArea: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		hide: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		updateOnScroll: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		updateOnResize: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		viewport: {
+			type: Object,
+			required: false,
+			default: () => void 0
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		const positioner = usePositioner({
+			arrowPadding: toRef(() => __props.arrowPadding),
+			collisionPadding: toRef(() => __props.collisionPadding),
+			direction: toRef(() => __props.direction),
+			flip: toRef(() => __props.flip),
+			hide: toRef(() => __props.hide),
+			offset: toRef(() => __props.offset),
+			placement: toRef(() => __props.placement),
+			safeArea: toRef(() => __props.safeArea),
+			shift: toRef(() => __props.shift),
+			size: toRef(() => __props.size),
+			strategy: toRef(() => __props.strategy),
+			updateOnResize: toRef(() => __props.updateOnResize),
+			updateOnScroll: toRef(() => __props.updateOnScroll),
+			viewport: toRef(() => __props.viewport)
+		});
+		const element = useTemplateRef("element");
+		positionerContext.provide(positioner);
+		onMounted(() => {
+			positioner.setFloating(element.value);
+			positioner.setReference(__props.reference);
+		});
+		watch(() => __props.reference, (value) => {
+			positioner.setReference(value);
+		});
+		onUpdated(() => {
+			positioner.setFloating(element.value);
+		});
+		watchEffect(() => {
+			if (element.value) element.value.style.cssText = positioner.style.value;
+		}, { flush: "sync" });
+		__expose({
+			arrowStyle: positioner.arrowStyle,
+			availableHeight: positioner.availableHeight,
+			availableWidth: positioner.availableWidth,
+			element,
+			hidden: positioner.hidden,
+			ready: positioner.ready,
+			resolvedPlacement: positioner.resolvedPlacement,
+			style: positioner.style,
+			update: positioner.update,
+			x: positioner.x,
+			y: positioner.y
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "element",
+				ref: element,
+				"data-vize-ui": "positioner",
+				"data-vize-placement": unref(positioner).resolvedPlacement.value,
+				"data-vize-positioner-ready": unref(positioner).ready.value ? "true" : "false",
+				"data-vize-hidden": unref(positioner).hidden.value ? "true" : void 0
+			}, [renderSlot(_ctx.$slots, "default", {
+				placement: unref(positioner).resolvedPlacement.value,
+				ready: unref(positioner).ready.value
+			}, void 0, true)], 8, _hoisted_1);
+		};
+	}
+}), [["__scopeId", "data-v-332605ff"]]);
+//#endregion
+export { readSafeAreaInsets as a, computeAvailableSize as c, parsePlacement as d, readRect as f, insetViewport as i, sizeStyle as l, createPositioner as n, visualViewportRect as o, positionerContext as p, usePositioner as r, zeroSafeAreaInsets as s, positioner_default as t, computePosition as u };