ropav 0.0.10 → 0.0.12

package/dist/dialog.js

@@ -0,0 +1,510 @@
+import { t as useRequiredInject } from "./useRequiredInject.js";
+import { n as useOverlayLayerBranch, t as useOverlayLayer } from "./useOverlayLayer.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
+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 element = value.$el;
+	return element instanceof HTMLElement ? element : 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({
+	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": props.disabled ? "" : void 0,
+			onClick
+		}));
+		return createDynamicComponent(() => __props.as, { $: [() => rootAttrs.value] }, extend(() => {
+			return createSlot();
+		}, { _: 8 }), 1);
+	}
+});
+//#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 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 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) {
+			root.setContent(toDialogHTMLElement(value), 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,
+			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": root.modal.value ? "" : void 0,
+			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);
+			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 shouldRender = computed(() => props.forceMount || root.isOpen.value);
+		const rootAttrs = computed(() => mergeProps(attrs, {
+			"aria-hidden": "true",
+			"data-state": root.isOpen.value ? "open" : "closed",
+			style: { zIndex: root.layer.zIndex.value - 1 }
+		}));
+		function setElement(value) {
+			element.value = toDialogHTMLElement(value);
+		}
+		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 props = __props;
+		const teleportTo = provideTeleportTarget(props, () => Boolean(props.teleport));
+		return createComponent(VaporTeleport, {
+			to: () => unref(teleportTo),
+			disabled: () => !__props.teleport
+		}, extend(() => {
+			return createSlot();
+		}, { _: 8 }), true);
+	}
+});
+//#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
+		},
+		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 generatedId = useId();
+		const uncontrolledOpen = ref(props.defaultOpen);
+		const isOpen = computed(() => props.open ?? uncontrolledOpen.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: 1e3
+		});
+		function setOpen(value) {
+			const previous = isOpen.value;
+			if (props.open === void 0) uncontrolledOpen.value = value;
+			if (previous !== value) emit("update:open", 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();
+		});
+		provide(dialogRootKey, context);
+		__expose({
+			open,
+			close,
+			toggle
+		});
+		return createSlot("default", { $: [() => slotProps.value] });
+	}
+});
+//#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");
+		function setElement(value) {
+			root.setTrigger(toDialogHTMLElement(value));
+		}
+		function onClick(event) {
+			if (event.defaultPrevented || props.disabled) return;
+			root.toggle();
+		}
+		const rootAttrs = computed(() => mergeProps(attrs, {
+			id: props.id,
+			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": props.disabled ? "" : void 0,
+			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 };