ropav 0.2.0 → 0.3.0

package/dist/dialog.js

@@ -1,532 +0,0 @@
-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/dialogContext.ts
-var dialogRootKey = Symbol("dialog-root");
-function resolveDialogCloseReason(reason) {
-	return reason === "escape" || reason === "outside" || reason === "programmatic" ? reason : "programmatic";
-}
-//#endregion
-//#region src/components/dialog/dialog-close.vue
-var dialog_close_default = /* @__PURE__ */ defineVaporComponent({
-	name: "RpDialogClose",
-	inheritAttrs: false,
-	__name: "dialog-close",
-	props: {
-		as: { default: "button" },
-		disabled: {
-			type: Boolean,
-			default: false
-		}
-	},
-	setup(__props) {
-		const props = __props;
-		const attrs = useAttrs();
-		const root = useRequiredInject(dialogRootKey, "RpDialogClose");
-		function onClick(event) {
-			if (event.defaultPrevented || props.disabled) return;
-			root.close("programmatic");
-		}
-		const rootAttrs = computed(() => mergeProps(attrs, {
-			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": toPresenceAttribute(props.disabled),
-			onClick
-		}));
-		return createDynamicComponent(() => __props.as, { $: [() => rootAttrs.value] }, extend(() => {
-			return createSlot();
-		}, { _: 8 }), 1);
-	}
-});
-//#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",
-	inheritAttrs: false,
-	__name: "dialog-content",
-	props: {
-		id: {},
-		as: { default: "div" },
-		role: { default: "dialog" },
-		forceMount: {
-			type: Boolean,
-			default: false
-		},
-		initialFocus: { default: null },
-		ariaLabel: {},
-		ariaLabelledby: {},
-		ariaDescribedby: {},
-		focusTrapOptions: { default: () => ({}) }
-	},
-	emits: [
-		"escapeKeyDown",
-		"pointerDownOutside",
-		"interactOutside"
-	],
-	setup(__props, { emit: __emit }) {
-		const props = __props;
-		const emit = __emit;
-		const attrs = useAttrs();
-		const root = useRequiredInject(dialogRootKey, "RpDialogContent");
-		const shouldRender = computed(() => props.forceMount || root.isOpen.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));
-		const rootAttrs = computed(() => mergeProps(attrs, {
-			id: id.value,
-			role: props.role,
-			tabindex: root.modal.value ? -1 : void 0,
-			"aria-modal": root.modal.value ? "true" : void 0,
-			"aria-label": props.ariaLabel,
-			"aria-labelledby": ariaLabelledby.value,
-			"aria-describedby": ariaDescribedby.value,
-			"data-state": root.isOpen.value ? "open" : "closed",
-			"data-modal": toPresenceAttribute(root.modal.value),
-			style: { zIndex: root.layer.zIndex.value }
-		}));
-		return createIf(() => shouldRender.value, () => {
-			const n3 = createDynamicComponent(() => __props.as, { $: [() => rootAttrs.value] }, extend(() => {
-				return createSlot("default", {
-					isOpen: () => unref(root).isOpen.value,
-					close: () => unref(root).close
-				});
-			}, { _: 8 }), 1);
-			applyVShow(n3, () => unref(root).isOpen.value);
-			setTemplateRefBinding(n3, () => setElement, void 0, void 0, "setElement");
-			return n3;
-		});
-	}
-});
-//#endregion
-//#region src/components/dialog/dialog-description.vue
-var dialog_description_default = /* @__PURE__ */ defineVaporComponent({
-	name: "RpDialogDescription",
-	inheritAttrs: false,
-	__name: "dialog-description",
-	props: {
-		id: {},
-		as: { default: "p" }
-	},
-	setup(__props) {
-		const props = __props;
-		const attrs = useAttrs();
-		const root = useRequiredInject(dialogRootKey, "RpDialogDescription");
-		const generatedId = useId();
-		const id = computed(() => props.id ?? `${generatedId}-dialog-description`);
-		let cleanup = root.registerDescription(id.value);
-		watch(id, (value) => {
-			cleanup();
-			cleanup = root.registerDescription(value);
-		});
-		onBeforeUnmount(() => cleanup());
-		const rootAttrs = computed(() => mergeProps(attrs, { id: id.value }));
-		return createDynamicComponent(() => __props.as, { $: [() => rootAttrs.value] }, extend(() => {
-			return createSlot();
-		}, { _: 8 }), 1);
-	}
-});
-//#endregion
-//#region src/components/dialog/dialog-overlay.vue
-var dialog_overlay_default = /* @__PURE__ */ defineVaporComponent({
-	name: "RpDialogOverlay",
-	inheritAttrs: false,
-	__name: "dialog-overlay",
-	props: {
-		as: { default: "div" },
-		forceMount: {
-			type: Boolean,
-			default: false
-		}
-	},
-	setup(__props) {
-		const props = __props;
-		const attrs = useAttrs();
-		const root = useRequiredInject(dialogRootKey, "RpDialogOverlay");
-		const element = ref(null);
-		const generatedId = `${useId()}-overlay`;
-		const id = computed(() => typeof attrs.id === "string" ? attrs.id : generatedId);
-		const shouldRender = computed(() => props.forceMount || root.isOpen.value);
-		const rootAttrs = computed(() => mergeProps(attrs, {
-			id: id.value,
-			"aria-hidden": "true",
-			"data-state": root.isOpen.value ? "open" : "closed",
-			style: { zIndex: root.layer.zIndex.value - 1 }
-		}));
-		function setElement(value) {
-			resolveHTMLElementRef(value, id.value, (resolved) => {
-				element.value = resolved;
-			});
-		}
-		useOverlayLayerBranch(element, {
-			focus: false,
-			inside: false
-		});
-		return createIf(() => shouldRender.value, () => {
-			const n3 = createDynamicComponent(() => __props.as, { $: [() => rootAttrs.value] }, extend(() => {
-				return createSlot();
-			}, { _: 8 }), 1);
-			applyVShow(n3, () => unref(root).isOpen.value);
-			setTemplateRefBinding(n3, () => setElement);
-			return n3;
-		});
-	}
-});
-//#endregion
-//#region src/components/dialog/dialog-portal.vue
-var dialog_portal_default = /* @__PURE__ */ defineVaporComponent({
-	name: "RpDialogPortal",
-	__name: "dialog-portal",
-	props: {
-		teleport: {
-			type: Boolean,
-			default: true
-		},
-		teleportTo: { default: void 0 }
-	},
-	setup(__props) {
-		const teleportTo = provideTeleportTarget(__props);
-		return createComponent(VaporTeleport, {
-			to: () => unref(teleportTo),
-			disabled: () => !__props.teleport
-		}, extend(() => {
-			return createSlot();
-		}, { _: 8 }), true);
-	}
-});
-//#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",
-	__name: "dialog-root",
-	props: {
-		open: {
-			type: Boolean,
-			default: void 0
-		},
-		defaultOpen: {
-			type: Boolean,
-			default: false
-		},
-		baseZIndex: {},
-		modal: {
-			type: Boolean,
-			default: true
-		},
-		closeOnEscape: {
-			type: Boolean,
-			default: true
-		},
-		closeOnOutsideClick: {
-			type: Boolean,
-			default: true
-		},
-		preventScroll: {
-			type: Boolean,
-			default: true
-		},
-		returnFocus: {
-			type: Boolean,
-			default: true
-		}
-	},
-	emits: ["update:open", "close"],
-	setup(__props, { expose: __expose, emit: __emit }) {
-		const props = __props;
-		const emit = __emit;
-		const { context, slotProps } = useDialogRootState(props, {
-			openChange: (open) => emit("update:open", open),
-			close: (reason) => emit("close", reason)
-		});
-		provide(dialogRootKey, context);
-		__expose({
-			open: context.open,
-			close: context.close,
-			toggle: context.toggle
-		});
-		return createSlot("default", { $: [() => unref(slotProps)] });
-	}
-});
-//#endregion
-//#region src/components/dialog/dialog-title.vue
-var dialog_title_default = /* @__PURE__ */ defineVaporComponent({
-	name: "RpDialogTitle",
-	inheritAttrs: false,
-	__name: "dialog-title",
-	props: {
-		id: {},
-		as: { default: "h2" }
-	},
-	setup(__props) {
-		const props = __props;
-		const attrs = useAttrs();
-		const root = useRequiredInject(dialogRootKey, "RpDialogTitle");
-		const generatedId = useId();
-		const id = computed(() => props.id ?? `${generatedId}-dialog-title`);
-		let cleanup = root.registerTitle(id.value);
-		watch(id, (value) => {
-			cleanup();
-			cleanup = root.registerTitle(value);
-		});
-		onBeforeUnmount(() => cleanup());
-		const rootAttrs = computed(() => mergeProps(attrs, { id: id.value }));
-		return createDynamicComponent(() => __props.as, { $: [() => rootAttrs.value] }, extend(() => {
-			return createSlot();
-		}, { _: 8 }), 1);
-	}
-});
-//#endregion
-//#region src/components/dialog/dialog-trigger.vue
-var dialog_trigger_default = /* @__PURE__ */ defineVaporComponent({
-	name: "RpDialogTrigger",
-	inheritAttrs: false,
-	__name: "dialog-trigger",
-	props: {
-		id: {},
-		as: { default: "button" },
-		disabled: {
-			type: Boolean,
-			default: false
-		}
-	},
-	setup(__props) {
-		const props = __props;
-		const attrs = useAttrs();
-		const root = useRequiredInject(dialogRootKey, "RpDialogTrigger");
-		const generatedId = `${useId()}-trigger`;
-		const id = computed(() => props.id ?? generatedId);
-		function setElement(value) {
-			resolveHTMLElementRef(value, id.value, root.setTrigger);
-		}
-		function onClick(event) {
-			if (event.defaultPrevented || props.disabled) return;
-			root.toggle();
-		}
-		const rootAttrs = computed(() => mergeProps(attrs, {
-			id: id.value,
-			type: props.as === "button" ? "button" : void 0,
-			disabled: props.as === "button" ? props.disabled || void 0 : void 0,
-			"aria-controls": root.contentId.value,
-			"aria-expanded": root.isOpen.value,
-			"aria-haspopup": "dialog",
-			"aria-disabled": props.as === "button" ? void 0 : props.disabled || void 0,
-			"data-state": root.isOpen.value ? "open" : "closed",
-			"data-disabled": toPresenceAttribute(props.disabled),
-			onClick
-		}));
-		onBeforeUnmount(() => root.setTrigger(null));
-		const n1 = createDynamicComponent(() => __props.as, { $: [() => rootAttrs.value] }, extend(() => {
-			return createSlot("default", { isOpen: () => unref(root).isOpen.value });
-		}, { _: 8 }), 1);
-		setTemplateRefBinding(n1, () => setElement);
-		return n1;
-	}
-});
-//#endregion
-export { dialog_overlay_default as a, dialog_close_default as c, dialog_portal_default as i, resolveDialogCloseReason as l, dialog_title_default as n, dialog_description_default as o, dialog_root_default as r, dialog_content_default as s, dialog_trigger_default as t };

package/dist/direction.js

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