ropav 0.1.6 → 0.1.8

package/dist/dialog.js

@@ -1,38 +1,18 @@
 import { t as useControllableValue } from "./useControllableValue.js";
+import { n as toPresenceAttribute } from "./attributes.js";
+import { i as querySelectorSafe } from "./query.js";
 import { t as useRequiredInject } from "./useRequiredInject.js";
+import { t as resolveHTMLElementRef } from "./componentRef.js";
+import { t as createCancelableCustomEvent } from "./events.js";
 import { i as useOverlayLayerBranch, n as useOverlayZIndex, r as useOverlayLayer } from "./useOverlayZIndex.js";
 import { t as useFocusTrap } from "./useFocusTrap.js";
 import { t as provideTeleportTarget } from "./useTeleportTarget.js";
 import { VaporTeleport, applyVShow, computed, createComponent, createDynamicComponent, createIf, createSlot, defineVaporComponent, extend, isRef, mergeProps, nextTick, onBeforeUnmount, provide, ref, setTemplateRefBinding, shallowRef, unref, useAttrs, useId, watch } from "vue";
-//#region src/components/dialog/dialog-core.ts
+//#region src/components/dialog/dialogContext.ts
 var dialogRootKey = Symbol("dialog-root");
 function resolveDialogCloseReason(reason) {
 	return reason === "escape" || reason === "outside" || reason === "programmatic" ? reason : "programmatic";
 }
-function toDialogHTMLElement(value) {
-	if (typeof HTMLElement !== "undefined" && value instanceof HTMLElement) return value;
-	if (value == null || typeof Element !== "undefined" && value instanceof Element) return null;
-	const vdomElement = value.$el;
-	if (vdomElement instanceof HTMLElement) return vdomElement;
-	const vaporBlock = value.block;
-	return vaporBlock instanceof HTMLElement ? vaporBlock : null;
-}
-function resolveDialogHTMLElementRef(value, fallbackId, resolve) {
-	const element = toDialogHTMLElement(value) ?? (typeof document !== "undefined" ? document.getElementById(fallbackId) : null);
-	resolve(element);
-	if (element || !value) return;
-	nextTick(() => {
-		resolve(toDialogHTMLElement(value) ?? (typeof document !== "undefined" ? document.getElementById(fallbackId) : null));
-	});
-}
-function createDialogEvent(type, detail, originalEvent) {
-	const target = originalEvent.target;
-	return new (((typeof Node !== "undefined" && target instanceof Node ? target.ownerDocument?.defaultView : null)?.CustomEvent) ?? CustomEvent)(type, {
-		bubbles: false,
-		cancelable: true,
-		detail
-	});
-}
 //#endregion
 //#region src/components/dialog/dialog-close.vue
 var dialog_close_default = /* @__PURE__ */ defineVaporComponent({
@@ -58,7 +38,7 @@ var dialog_close_default = /* @__PURE__ */ defineVaporComponent({
 			type: props.as === "button" ? "button" : void 0,
 			disabled: props.as === "button" ? props.disabled || void 0 : void 0,
 			"aria-disabled": props.as === "button" ? void 0 : props.disabled || void 0,
-			"data-disabled": props.disabled ? "" : void 0,
+			"data-disabled": toPresenceAttribute(props.disabled),
 			onClick
 		}));
 		return createDynamicComponent(() => __props.as, { $: [() => rootAttrs.value] }, extend(() => {
@@ -67,6 +47,83 @@ var dialog_close_default = /* @__PURE__ */ defineVaporComponent({
 	}
 });
 //#endregion
+//#region src/components/dialog/useDialogContentInteractions.ts
+function useDialogContentInteractions(root, props, events) {
+	const id = computed(() => props.id ?? root.contentId.value);
+	const focusTrapContainers = computed(() => {
+		const content = root.contentRef.value;
+		if (!content) return null;
+		return [content, ...root.layer.focusBranches.value];
+	});
+	function resolveInitialFocus() {
+		const initialFocus = props.initialFocus;
+		const resolved = isRef(initialFocus) ? initialFocus.value : initialFocus;
+		if (typeof resolved !== "string") return resolved ?? void 0;
+		return querySelectorSafe(resolved, root.contentRef.value) ?? void 0;
+	}
+	const focusTrap = useFocusTrap(focusTrapContainers, {
+		...props.focusTrapOptions,
+		initialFocus: resolveInitialFocus,
+		fallbackFocus: () => root.contentRef.value,
+		returnFocusOnDeactivate: false,
+		escapeDeactivates: false,
+		allowOutsideClick: true,
+		preventScroll: true,
+		delayInitialFocus: props.focusTrapOptions.delayInitialFocus ?? false
+	});
+	function setElement(value) {
+		resolveHTMLElementRef(value, id.value, (element) => root.setContent(element, id.value));
+	}
+	function onDocumentKeydown(event) {
+		if (event.defaultPrevented || !root.closeOnEscape.value) return;
+		const customEvent = createCancelableCustomEvent("dialog-escape-key-down", { originalEvent: event }, event);
+		events.escapeKeyDown(customEvent);
+		if (customEvent.defaultPrevented) return;
+		event.preventDefault();
+		root.close("escape");
+	}
+	function onDocumentPointerdown(event) {
+		if (event.defaultPrevented || !root.closeOnOutsideClick.value) return;
+		const customEvent = createCancelableCustomEvent("dialog-pointer-down-outside", { originalEvent: event }, event);
+		events.pointerDownOutside(customEvent);
+		events.interactOutside(customEvent);
+		if (!customEvent.defaultPrevented) root.close("outside");
+	}
+	const disconnectLayerInteraction = root.layer.connectInteraction({
+		inside: () => [root.triggerRef.value],
+		escapeKeyDown: onDocumentKeydown,
+		pointerDownOutside: onDocumentPointerdown
+	});
+	watch([
+		root.isOpen,
+		root.modal,
+		root.contentRef
+	], ([open, modal]) => {
+		const content = root.contentRef.value;
+		if (!open || !content) {
+			focusTrap.deactivate({ returnFocus: false });
+			return;
+		}
+		if (modal) focusTrap.activate();
+		else focusTrap.deactivate({ returnFocus: false });
+	}, {
+		flush: "post",
+		immediate: true
+	});
+	watch(id, (nextId) => {
+		root.setContent(root.contentRef.value, nextId);
+	}, { immediate: true });
+	onBeforeUnmount(() => {
+		disconnectLayerInteraction();
+		focusTrap.deactivate({ returnFocus: false });
+		root.setContent(null, id.value);
+	});
+	return {
+		id,
+		setElement
+	};
+}
+//#endregion
 //#region src/components/dialog/dialog-content.vue
 var dialog_content_default = /* @__PURE__ */ defineVaporComponent({
 	name: "RpDialogContent",
@@ -96,88 +153,17 @@ var dialog_content_default = /* @__PURE__ */ defineVaporComponent({
 		const emit = __emit;
 		const attrs = useAttrs();
 		const root = useRequiredInject(dialogRootKey, "RpDialogContent");
-		const id = computed(() => props.id ?? root.contentId.value);
 		const shouldRender = computed(() => props.forceMount || root.isOpen.value);
-		const focusTrapContainers = computed(() => {
-			const content = root.contentRef.value;
-			if (!content) return null;
-			return [content, ...root.layer.focusBranches.value];
+		const { id, setElement } = useDialogContentInteractions(root, props, {
+			escapeKeyDown: (event) => emit("escapeKeyDown", event),
+			pointerDownOutside: (event) => emit("pointerDownOutside", event),
+			interactOutside: (event) => emit("interactOutside", event)
 		});
 		const ariaLabelledby = computed(() => {
 			if (props.ariaLabel) return void 0;
 			return props.ariaLabelledby ?? (root.titleIds.value.join(" ") || void 0);
 		});
 		const ariaDescribedby = computed(() => props.ariaDescribedby ?? (root.descriptionIds.value.join(" ") || void 0));
-		function resolveInitialFocus() {
-			const initialFocus = props.initialFocus;
-			const resolved = isRef(initialFocus) ? initialFocus.value : initialFocus;
-			if (typeof resolved !== "string") return resolved ?? void 0;
-			try {
-				return root.contentRef.value?.querySelector(resolved) ?? void 0;
-			} catch {
-				return;
-			}
-		}
-		const focusTrap = useFocusTrap(focusTrapContainers, {
-			...props.focusTrapOptions,
-			initialFocus: resolveInitialFocus,
-			fallbackFocus: () => root.contentRef.value,
-			returnFocusOnDeactivate: false,
-			escapeDeactivates: false,
-			allowOutsideClick: true,
-			preventScroll: true,
-			delayInitialFocus: props.focusTrapOptions.delayInitialFocus ?? false
-		});
-		function setElement(value) {
-			resolveDialogHTMLElementRef(value, id.value, (element) => root.setContent(element, id.value));
-		}
-		function onDocumentKeydown(event) {
-			if (event.key !== "Escape" || event.defaultPrevented || !root.closeOnEscape.value || !root.layer.isTopLayer()) return;
-			const customEvent = createDialogEvent("dialog-escape-key-down", { originalEvent: event }, event);
-			emit("escapeKeyDown", customEvent);
-			if (customEvent.defaultPrevented) return;
-			event.preventDefault();
-			root.close("escape");
-		}
-		function onDocumentPointerdown(event) {
-			if (event.defaultPrevented || !root.closeOnOutsideClick.value || !root.layer.isTopLayer() || root.layer.isInside(event)) return;
-			const customEvent = createDialogEvent("dialog-pointer-down-outside", { originalEvent: event }, event);
-			emit("pointerDownOutside", customEvent);
-			emit("interactOutside", customEvent);
-			if (!customEvent.defaultPrevented) root.close("outside");
-		}
-		function setDocumentListeners(active) {
-			const document = root.contentRef.value?.ownerDocument;
-			if (!document) return;
-			const method = active ? "addEventListener" : "removeEventListener";
-			document[method]("keydown", onDocumentKeydown);
-			document[method]("pointerdown", onDocumentPointerdown, true);
-		}
-		watch([
-			root.isOpen,
-			root.modal,
-			root.contentRef
-		], ([open, modal], _previous, onCleanup) => {
-			if (!open || !root.contentRef.value) {
-				focusTrap.deactivate({ returnFocus: false });
-				return;
-			}
-			setDocumentListeners(true);
-			if (modal) focusTrap.activate();
-			else focusTrap.deactivate({ returnFocus: false });
-			onCleanup(() => setDocumentListeners(false));
-		}, {
-			flush: "post",
-			immediate: true
-		});
-		watch(id, (nextId) => {
-			root.setContent(root.contentRef.value, nextId);
-		}, { immediate: true });
-		onBeforeUnmount(() => {
-			setDocumentListeners(false);
-			focusTrap.deactivate({ returnFocus: false });
-			root.setContent(null, id.value);
-		});
 		const rootAttrs = computed(() => mergeProps(attrs, {
 			id: id.value,
 			role: props.role,
@@ -187,7 +173,7 @@ var dialog_content_default = /* @__PURE__ */ defineVaporComponent({
 			"aria-labelledby": ariaLabelledby.value,
 			"aria-describedby": ariaDescribedby.value,
 			"data-state": root.isOpen.value ? "open" : "closed",
-			"data-modal": root.modal.value ? "" : void 0,
+			"data-modal": toPresenceAttribute(root.modal.value),
 			style: { zIndex: root.layer.zIndex.value }
 		}));
 		return createIf(() => shouldRender.value, () => {
@@ -198,7 +184,7 @@ var dialog_content_default = /* @__PURE__ */ defineVaporComponent({
 				});
 			}, { _: 8 }), 1);
 			applyVShow(n3, () => unref(root).isOpen.value);
-			setTemplateRefBinding(n3, () => setElement);
+			setTemplateRefBinding(n3, () => setElement, void 0, void 0, "setElement");
 			return n3;
 		});
 	}
@@ -259,7 +245,7 @@ var dialog_overlay_default = /* @__PURE__ */ defineVaporComponent({
 			style: { zIndex: root.layer.zIndex.value - 1 }
 		}));
 		function setElement(value) {
-			resolveDialogHTMLElementRef(value, id.value, (resolved) => {
+			resolveHTMLElementRef(value, id.value, (resolved) => {
 				element.value = resolved;
 			});
 		}
@@ -290,8 +276,7 @@ var dialog_portal_default = /* @__PURE__ */ defineVaporComponent({
 		teleportTo: { default: void 0 }
 	},
 	setup(__props) {
-		const props = __props;
-		const teleportTo = provideTeleportTarget(props, () => Boolean(props.teleport));
+		const teleportTo = provideTeleportTarget(__props);
 		return createComponent(VaporTeleport, {
 			to: () => unref(teleportTo),
 			disabled: () => !__props.teleport
@@ -301,6 +286,121 @@ var dialog_portal_default = /* @__PURE__ */ defineVaporComponent({
 	}
 });
 //#endregion
+//#region src/components/dialog/useDialogRootState.ts
+function registerId(target, id) {
+	target.value = [...target.value.filter((value) => value !== id), id];
+	return () => {
+		target.value = target.value.filter((value) => value !== id);
+	};
+}
+function useDialogRootState(props, events) {
+	const generatedId = useId();
+	const controllableOpen = useControllableValue({
+		modelValue: () => props.open,
+		defaultValue: () => props.defaultOpen,
+		onChange: events.openChange
+	});
+	const isOpen = controllableOpen.value;
+	const modal = computed(() => props.modal);
+	const closeOnEscape = computed(() => props.closeOnEscape);
+	const closeOnOutsideClick = computed(() => props.closeOnOutsideClick);
+	const preventScroll = computed(() => props.preventScroll);
+	const returnFocus = computed(() => props.returnFocus);
+	const triggerRef = ref(null);
+	const contentRef = ref(null);
+	const contentId = ref(`${generatedId}-dialog`);
+	const titleIds = shallowRef([]);
+	const descriptionIds = shallowRef([]);
+	let restoreFocusTo = null;
+	const layer = useOverlayLayer({
+		active: isOpen,
+		element: contentRef,
+		modal,
+		modalEffects: true,
+		preventScroll,
+		baseZIndex: useOverlayZIndex({
+			baseZIndex: () => props.baseZIndex,
+			defaultBaseZIndex: 1e3,
+			aboveParent: false
+		})
+	});
+	function setOpen(value) {
+		if (isOpen.value !== value) controllableOpen.setValue(value);
+	}
+	function rememberFocus() {
+		if (typeof document === "undefined" || restoreFocusTo) return;
+		const activeElement = document.activeElement;
+		restoreFocusTo = activeElement instanceof HTMLElement && activeElement !== document.body ? activeElement : triggerRef.value;
+	}
+	function restoreFocus() {
+		const target = restoreFocusTo ?? triggerRef.value;
+		restoreFocusTo = null;
+		if (!returnFocus.value) return;
+		nextTick(() => {
+			if (target?.isConnected) target.focus({ preventScroll: true });
+		});
+	}
+	function open() {
+		if (isOpen.value) return;
+		rememberFocus();
+		setOpen(true);
+	}
+	function close(reason = "programmatic") {
+		if (!isOpen.value) return;
+		setOpen(false);
+		events.close(resolveDialogCloseReason(reason));
+	}
+	function toggle() {
+		if (isOpen.value) close("programmatic");
+		else open();
+	}
+	function setTrigger(element) {
+		triggerRef.value = element;
+	}
+	function setContent(element, id) {
+		contentRef.value = element;
+		contentId.value = id;
+	}
+	const context = {
+		isOpen,
+		modal,
+		closeOnEscape,
+		closeOnOutsideClick,
+		returnFocus,
+		triggerRef,
+		contentRef,
+		contentId,
+		titleIds,
+		descriptionIds,
+		layer,
+		open,
+		close,
+		toggle,
+		setTrigger,
+		setContent,
+		registerTitle: (id) => registerId(titleIds, id),
+		registerDescription: (id) => registerId(descriptionIds, id)
+	};
+	const slotProps = computed(() => ({
+		isOpen: isOpen.value,
+		zIndex: layer.zIndex.value,
+		open,
+		close,
+		toggle
+	}));
+	watch(isOpen, (value, previous) => {
+		if (value && !previous) rememberFocus();
+		else if (!value && previous) restoreFocus();
+	}, { immediate: true });
+	onBeforeUnmount(() => {
+		if (isOpen.value) restoreFocus();
+	});
+	return {
+		context,
+		slotProps
+	};
+}
+//#endregion
 //#region src/components/dialog/dialog-root.vue
 var dialog_root_default = /* @__PURE__ */ defineVaporComponent({
 	name: "RpDialogRoot",
@@ -340,120 +440,17 @@ var dialog_root_default = /* @__PURE__ */ defineVaporComponent({
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
-		const generatedId = useId();
-		const controllableOpen = useControllableValue({
-			modelValue: () => props.open,
-			defaultValue: () => props.defaultOpen,
-			onChange: (value) => emit("update:open", value)
-		});
-		const isOpen = controllableOpen.value;
-		const modal = computed(() => props.modal);
-		const closeOnEscape = computed(() => props.closeOnEscape);
-		const closeOnOutsideClick = computed(() => props.closeOnOutsideClick);
-		const preventScroll = computed(() => props.preventScroll);
-		const returnFocus = computed(() => props.returnFocus);
-		const triggerRef = ref(null);
-		const contentRef = ref(null);
-		const contentId = ref(`${generatedId}-dialog`);
-		const titleIds = shallowRef([]);
-		const descriptionIds = shallowRef([]);
-		let restoreFocusTo = null;
-		const layer = useOverlayLayer({
-			active: isOpen,
-			element: contentRef,
-			modal,
-			modalEffects: true,
-			preventScroll,
-			baseZIndex: useOverlayZIndex({
-				baseZIndex: () => props.baseZIndex,
-				defaultBaseZIndex: 1e3,
-				aboveParent: false
-			})
-		});
-		function setOpen(value) {
-			if (isOpen.value !== value) controllableOpen.setValue(value);
-		}
-		function rememberFocus() {
-			if (typeof document === "undefined" || restoreFocusTo) return;
-			const activeElement = document.activeElement;
-			restoreFocusTo = activeElement instanceof HTMLElement && activeElement !== document.body ? activeElement : triggerRef.value;
-		}
-		function restoreFocus() {
-			const target = restoreFocusTo ?? triggerRef.value;
-			restoreFocusTo = null;
-			if (!returnFocus.value) return;
-			nextTick(() => {
-				if (target?.isConnected) target.focus({ preventScroll: true });
-			});
-		}
-		function open() {
-			if (isOpen.value) return;
-			rememberFocus();
-			setOpen(true);
-		}
-		function close(reason = "programmatic") {
-			if (!isOpen.value) return;
-			setOpen(false);
-			emit("close", resolveDialogCloseReason(reason));
-		}
-		function toggle() {
-			if (isOpen.value) close("programmatic");
-			else open();
-		}
-		function setTrigger(element) {
-			triggerRef.value = element;
-		}
-		function setContent(element, id) {
-			contentRef.value = element;
-			contentId.value = id;
-		}
-		function registerId(target, id) {
-			target.value = [...target.value.filter((value) => value !== id), id];
-			return () => {
-				target.value = target.value.filter((value) => value !== id);
-			};
-		}
-		const context = {
-			isOpen,
-			modal,
-			closeOnEscape,
-			closeOnOutsideClick,
-			returnFocus,
-			triggerRef,
-			contentRef,
-			contentId,
-			titleIds,
-			descriptionIds,
-			layer,
-			open,
-			close,
-			toggle,
-			setTrigger,
-			setContent,
-			registerTitle: (id) => registerId(titleIds, id),
-			registerDescription: (id) => registerId(descriptionIds, id)
-		};
-		const slotProps = computed(() => ({
-			isOpen: isOpen.value,
-			zIndex: layer.zIndex.value,
-			open,
-			close,
-			toggle
-		}));
-		watch(isOpen, (value, previous) => {
-			if (value && !previous) rememberFocus();
-			else if (!value && previous) restoreFocus();
-		}, { immediate: true });
-		onBeforeUnmount(() => {
-			if (isOpen.value) restoreFocus();
+		const { context, slotProps } = useDialogRootState(props, {
+			openChange: (open) => emit("update:open", open),
+			close: (reason) => emit("close", reason)
 		});
 		provide(dialogRootKey, context);
 		__expose({
-			open,
-			close,
-			toggle
+			open: context.open,
+			close: context.close,
+			toggle: context.toggle
 		});
-		return createSlot("default", { $: [() => slotProps.value] });
+		return createSlot("default", { $: [() => unref(slotProps)] });
 	}
 });
 //#endregion
@@ -505,7 +502,7 @@ var dialog_trigger_default = /* @__PURE__ */ defineVaporComponent({
 		const generatedId = `${useId()}-trigger`;
 		const id = computed(() => props.id ?? generatedId);
 		function setElement(value) {
-			resolveDialogHTMLElementRef(value, id.value, root.setTrigger);
+			resolveHTMLElementRef(value, id.value, root.setTrigger);
 		}
 		function onClick(event) {
 			if (event.defaultPrevented || props.disabled) return;
@@ -520,7 +517,7 @@ var dialog_trigger_default = /* @__PURE__ */ defineVaporComponent({
 			"aria-haspopup": "dialog",
 			"aria-disabled": props.as === "button" ? void 0 : props.disabled || void 0,
 			"data-state": root.isOpen.value ? "open" : "closed",
-			"data-disabled": props.disabled ? "" : void 0,
+			"data-disabled": toPresenceAttribute(props.disabled),
 			onClick
 		}));
 		onBeforeUnmount(() => root.setTrigger(null));

package/dist/direction.js

@@ -0,0 +1,6 @@
+//#region src/utils/dom/direction.ts
+function getElementDirection(element) {
+	return element.ownerDocument.defaultView?.getComputedStyle(element).direction === "rtl" ? "rtl" : "ltr";
+}
+//#endregion
+export { getElementDirection as t };

package/dist/dropdown-menu.css

@@ -65,15 +65,33 @@
     bottom: auto;
     left: 0;
 }
+.rp-dropdown-menu__arrow {
+    background-color: inherit;
+    border: inherit;
+    rotate: 45deg;
+}
+.rp-dropdown-menu__arrow[data-side=top] {
+    border-top-color: transparent;
+    border-left-color: transparent;
+}
+.rp-dropdown-menu__arrow[data-side=right] {
+    border-top-color: transparent;
+    border-right-color: transparent;
+}
+.rp-dropdown-menu__arrow[data-side=bottom] {
+    border-right-color: transparent;
+    border-bottom-color: transparent;
+}
+.rp-dropdown-menu__arrow[data-side=left] {
+    border-bottom-color: transparent;
+    border-left-color: transparent;
+}
 .rp-dropdown-menu__arrow {
     position: absolute;
     box-sizing: border-box;
     width: var(--_rp-dropdown-menu-arrow-size);
     height: var(--_rp-dropdown-menu-arrow-size);
     pointer-events: none;
-    background-color: inherit;
-    border: inherit;
-    rotate: 45deg;
 }
 .rp-dropdown-menu__arrow[data-side=top] {
     bottom: calc(-1 * var(--_rp-dropdown-menu-arrow-size) / 2);