ropav 0.0.10 → 0.0.12

package/dist/modal.js

@@ -1,24 +1,15 @@
 import './modal.css';
 import { t as x_default } from "./x.js";
 import { t as bem } from "./bem.js";
+import { n as useStylesApi } from "./styles-api.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { a as dialog_overlay_default, c as dialog_close_default, i as dialog_portal_default, l as resolveDialogCloseReason, n as dialog_title_default, o as dialog_description_default, r as dialog_root_default, s as dialog_content_default } from "./dialog.js";
 import { t as icon_button_default } from "./icon-button.js";
 import { t as overlay_default } from "./overlay.js";
-import { VaporTransition, applyVShow, child, computed, createComponent, createIf, createSlot, createTemplateRefSetter, defineVaporComponent, extend, isRef, nextTick, onBeforeUnmount, onMounted, ref, renderEffect, setAttr, setClass, setInsertionState, setProp, setStyle, setText, template, toDisplayString, txt, unref, useId, useSlots, watch } from "vue";
+import { VaporTransition, applyVShow, computed, createComponent, createIf, createSlot, defineVaporComponent, extend, mergeProps, ref, renderEffect, setDynamicProps, setInsertionState, setText, template, toDisplayString, unref, useId, useSlots } from "vue";
 //#region src/components/modal/useModal.ts
-var bodyScrollLockCount = 0;
-var previousBodyOverflow = "";
-var activeModalStack = [];
 var DEFAULT_ROLE = "dialog";
 var DEFAULT_SIZE = "md";
-var FOCUSABLE_SELECTOR = [
-	"a[href]",
-	"button:not([disabled])",
-	"textarea:not([disabled])",
-	"input:not([disabled])",
-	"select:not([disabled])",
-	"[tabindex]:not([tabindex=\"-1\"])"
-].join(",");
 var MODAL_PRESET_SIZES = /* @__PURE__ */ new Set([
 	"sm",
 	"md",
@@ -26,63 +17,13 @@ var MODAL_PRESET_SIZES = /* @__PURE__ */ new Set([
 	"xl",
 	"full"
 ]);
-function isHTMLElement(value) {
-	return typeof HTMLElement !== "undefined" && value instanceof HTMLElement;
-}
 function isModalPresetSize(size) {
 	return MODAL_PRESET_SIZES.has(size);
 }
-function isFocusable(element) {
-	if (element.getAttribute("aria-hidden") === "true") return false;
-	if (element.hasAttribute("disabled")) return false;
-	return element.tabIndex >= 0;
-}
-function getFocusableElements(panel) {
-	if (!panel) return [];
-	return [...panel.querySelectorAll(FOCUSABLE_SELECTOR)].filter(isFocusable);
-}
-function focusElement(element) {
-	if (!element) return;
-	try {
-		element.focus({ preventScroll: true });
-	} catch {
-		element.focus();
-	}
-}
-function lockBodyScroll() {
-	if (typeof document === "undefined") return void 0;
-	if (bodyScrollLockCount === 0) {
-		previousBodyOverflow = document.body.style.overflow;
-		document.body.style.overflow = "hidden";
-	}
-	bodyScrollLockCount += 1;
-	return () => {
-		bodyScrollLockCount = Math.max(0, bodyScrollLockCount - 1);
-		if (bodyScrollLockCount === 0) document.body.style.overflow = previousBodyOverflow;
-	};
-}
-function readInitialFocus(initialFocus) {
-	return isRef(initialFocus) ? initialFocus.value : initialFocus;
-}
-function queryPanelElement(panel, selector) {
-	try {
-		const element = panel.querySelector(selector);
-		return isHTMLElement(element) ? element : null;
-	} catch {
-		return null;
-	}
-}
-function useModal(props, emitOpenChange) {
+function useModal(props, emit = {}) {
 	const slots = useSlots();
 	const generatedId = useId();
-	const panelRef = ref(null);
 	const uncontrolledOpen = ref(false);
-	const modalToken = Symbol("modal");
-	let isMounted = false;
-	let isActiveModal = false;
-	let previousActiveElement = null;
-	let removeDocumentListeners;
-	let unlockScroll;
 	const modalId = computed(() => props.id ?? `${generatedId}-modal`);
 	const titleId = computed(() => `${modalId.value}-title`);
 	const descriptionId = computed(() => `${modalId.value}-description`);
@@ -124,132 +65,21 @@ function useModal(props, emitOpenChange) {
 	function setOpen(nextOpen) {
 		if (nextOpen === isOpen.value) return;
 		if (props.open === void 0) uncontrolledOpen.value = nextOpen;
-		emitOpenChange?.(nextOpen);
+		emit.openChange?.(nextOpen);
 	}
 	function openModal() {
 		setOpen(true);
 	}
-	function closeModal() {
+	function closeModal(reason = "programmatic") {
+		if (!isOpen.value) return;
 		setOpen(false);
+		emit.close?.(resolveDialogCloseReason(reason));
 	}
 	function toggleModal() {
-		setOpen(!isOpen.value);
-	}
-	function resolveInitialFocus() {
-		const initialFocus = readInitialFocus(props.initialFocus);
-		const panel = panelRef.value;
-		if (!initialFocus || !panel) return null;
-		if (typeof initialFocus === "string") return queryPanelElement(panel, initialFocus);
-		return panel.contains(initialFocus) ? initialFocus : null;
-	}
-	function focusInitialElement() {
-		const firstFocusable = getFocusableElements(panelRef.value)[0];
-		focusElement(resolveInitialFocus() ?? firstFocusable ?? panelRef.value);
-	}
-	function addToStack() {
-		if (!activeModalStack.includes(modalToken)) activeModalStack.push(modalToken);
-	}
-	function removeFromStack() {
-		const index = activeModalStack.indexOf(modalToken);
-		if (index !== -1) activeModalStack.splice(index, 1);
-	}
-	function isTopModal() {
-		return activeModalStack[activeModalStack.length - 1] === modalToken;
-	}
-	function trapFocus(event) {
-		const panel = panelRef.value;
-		if (!panel) return;
-		const focusableElements = getFocusableElements(panel);
-		if (focusableElements.length === 0) {
-			event.preventDefault();
-			focusElement(panel);
-			return;
-		}
-		const firstElement = focusableElements[0];
-		const lastElement = focusableElements[focusableElements.length - 1];
-		const activeElement = document.activeElement;
-		if (!(activeElement instanceof Node && panel.contains(activeElement))) {
-			event.preventDefault();
-			focusElement(firstElement);
-			return;
-		}
-		if (event.shiftKey && activeElement === firstElement) {
-			event.preventDefault();
-			focusElement(lastElement);
-			return;
-		}
-		if (!event.shiftKey && activeElement === lastElement) {
-			event.preventDefault();
-			focusElement(firstElement);
-		}
-	}
-	function onDocumentKeydown(event) {
-		if (!isOpen.value || !isTopModal()) return;
-		if (event.key === "Escape") {
-			if (props.closeOnEscape === false) return;
-			event.preventDefault();
-			closeModal();
-			return;
-		}
-		if (event.key === "Tab") trapFocus(event);
+		if (isOpen.value) closeModal("programmatic");
+		else openModal();
 	}
-	function bindDocumentListeners() {
-		if (typeof document === "undefined" || removeDocumentListeners) return;
-		document.addEventListener("keydown", onDocumentKeydown);
-		removeDocumentListeners = () => {
-			document.removeEventListener("keydown", onDocumentKeydown);
-			removeDocumentListeners = void 0;
-		};
-	}
-	function restoreFocus() {
-		if (props.returnFocus === false) {
-			previousActiveElement = null;
-			return;
-		}
-		if (previousActiveElement?.isConnected) focusElement(previousActiveElement);
-		previousActiveElement = null;
-	}
-	function activateModal() {
-		if (isActiveModal) return;
-		isActiveModal = true;
-		addToStack();
-		if (typeof document !== "undefined") {
-			const activeElement = document.activeElement;
-			previousActiveElement = isHTMLElement(activeElement) ? activeElement : null;
-		}
-		bindDocumentListeners();
-		if (props.preventScroll !== false) unlockScroll = lockBodyScroll();
-		nextTick(() => {
-			if (isActiveModal) focusInitialElement();
-		});
-	}
-	function deactivateModal() {
-		if (!isActiveModal) return;
-		isActiveModal = false;
-		removeFromStack();
-		removeDocumentListeners?.();
-		unlockScroll?.();
-		unlockScroll = void 0;
-		restoreFocus();
-	}
-	function onOverlayClick(event) {
-		if (props.closeOnOverlayClick === false || event.target !== event.currentTarget) return;
-		closeModal();
-	}
-	onMounted(() => {
-		isMounted = true;
-		if (isOpen.value) activateModal();
-	});
-	onBeforeUnmount(() => {
-		deactivateModal();
-	});
-	watch(isOpen, (nextOpen) => {
-		if (!isMounted) return;
-		if (nextOpen) activateModal();
-		else deactivateModal();
-	});
 	return {
-		panelRef,
 		modalId,
 		titleId,
 		descriptionId,
@@ -270,22 +100,19 @@ function useModal(props, emitOpenChange) {
 		openModal,
 		closeModal,
 		toggleModal,
-		onOverlayClick
+		setOpen
 	};
 }
 //#endregion
 //#region src/components/modal/modal.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<h2 data-v-657f313d class=rp-modal__title> ");
-var t1 = template("<p data-v-657f313d class=rp-modal__description> ");
-var t2 = template("<div data-v-657f313d class=rp-modal__heading>");
-var t3 = template("<div data-v-657f313d class=rp-modal__header>");
-var t4 = template("<div data-v-657f313d class=rp-modal__body>");
-var t5 = template("<div data-v-657f313d class=rp-modal__footer>");
-var t6 = template("<div data-v-657f313d><section data-v-657f313d class=rp-modal__panel aria-modal=true tabindex=-1>");
+var t0 = template(" ");
+var t1 = template("<div data-v-1a627831 class=rp-modal__heading>");
+var t2 = template("<div data-v-1a627831>");
 //#endregion
 //#region src/components/modal/modal.vue
 var modal_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
 	name: "RpModal",
+	inheritAttrs: false,
 	__name: "modal",
 	props: {
 		id: {},
@@ -324,104 +151,178 @@ var modal_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		keepMounted: {
 			type: Boolean,
 			default: false
-		}
+		},
+		modal: {
+			type: Boolean,
+			default: true
+		},
+		focusTrapOptions: { default: () => ({}) },
+		teleport: {
+			type: Boolean,
+			default: true
+		},
+		teleportTo: {},
+		classNames: {},
+		styles: {}
 	},
-	emits: ["update:open"],
+	emits: ["update:open", "close"],
 	setup(__props, { emit: __emit, slots: $slots }) {
 		const props = __props;
 		const emit = __emit;
-		const { panelRef, modalId, titleId, descriptionId, role, isOpen, shouldRender, hasHeader, hasFooter, showCloseButton, headerId, ariaLabelledby, ariaDescribedby, ariaLabel, rootClass, rootStyle, stateClass, slotProps, closeModal, onOverlayClick } = useModal(props, (open) => {
-			emit("update:open", open);
+		const { modalId, titleId, descriptionId, role, isOpen, shouldRender, hasHeader, hasFooter, showCloseButton, headerId, ariaLabelledby, ariaDescribedby, ariaLabel, rootClass, rootStyle, stateClass, slotProps, setOpen } = useModal(props, {
+			openChange: (open) => emit("update:open", open),
+			close: (reason) => emit("close", reason)
 		});
-		const _setTemplateRef = createTemplateRefSetter();
-		return createComponent(VaporTransition, {
-			name: "rp-modal",
-			persisted: ""
-		}, extend(() => {
-			return createIf(() => unref(shouldRender), () => {
-				const n28 = t6();
-				const n27 = child(n28, 1);
-				renderEffect(() => {
-					setClass(n28, [unref(rootClass), unref(stateClass)]);
-					setStyle(n28, unref(rootStyle));
-				});
-				setInsertionState(n28, 0, 0);
-				createComponent(overlay_default, { $: [() => __props.overlayProps, {
-					class: "rp-modal__overlay",
-					"z-index": 0,
-					interactive: "",
-					onClick: () => unref(onOverlayClick)
-				}] });
-				renderEffect(() => {
-					setProp(n27, "id", unref(modalId));
-					setProp(n27, "role", unref(role));
-					setAttr(n27, "aria-label", unref(ariaLabel));
-					setAttr(n27, "aria-labelledby", unref(ariaLabelledby));
-					setAttr(n27, "aria-describedby", unref(ariaDescribedby));
-				});
-				setInsertionState(n27, null, 0);
-				createIf(() => unref(hasHeader), () => {
-					const n14 = t3();
-					renderEffect(() => setProp(n14, "id", unref(headerId)));
-					setInsertionState(n14, null, 0);
-					createSlot("header", { $: [() => unref(slotProps)] }, () => {
-						const n13 = t2();
-						setInsertionState(n13, null, 0);
-						createIf(() => __props.title, () => {
-							const n9 = t0();
-							const x9 = txt(n9);
-							renderEffect(() => {
-								setProp(n9, "id", unref(titleId));
-								setText(x9, toDisplayString(__props.title));
-							});
-							return n9;
-						});
-						setInsertionState(n13, null, 1);
-						createIf(() => __props.description, () => {
-							const n12 = t1();
-							const x12 = txt(n12);
-							renderEffect(() => {
-								setProp(n12, "id", unref(descriptionId));
-								setText(x12, toDisplayString(__props.description));
-							});
-							return n12;
+		function onDialogClose(reason) {
+			emit("close", reason);
+		}
+		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
+		const state = computed(() => isOpen.value ? "open" : "closed");
+		const rootAttrs = computed(() => getRootAttrs({
+			class: [rootClass.value, stateClass.value],
+			style: rootStyle.value,
+			"data-state": state.value
+		}));
+		function getLayeredRootAttrs(zIndex) {
+			return mergeProps(rootAttrs.value, { style: { zIndex } });
+		}
+		const overlayClassNames = computed(() => ({ root: ["rp-modal__overlay", props.classNames?.overlay] }));
+		const overlayStyles = computed(() => ({ root: props.styles?.overlay }));
+		const panelAttrs = computed(() => ({
+			...getPartAttrs("panel", { class: "rp-modal__panel" }),
+			"data-state": state.value
+		}));
+		const closeClassNames = computed(() => ({ root: ["rp-modal__close", props.classNames?.close] }));
+		const closeStyles = computed(() => ({ root: props.styles?.close }));
+		return createComponent(unref(dialog_root_default), {
+			open: () => unref(isOpen),
+			modal: () => __props.modal,
+			"close-on-escape": () => __props.closeOnEscape,
+			"close-on-outside-click": () => __props.closeOnOverlayClick,
+			"prevent-scroll": () => __props.preventScroll,
+			"return-focus": () => __props.returnFocus,
+			"onUpdate:open": () => unref(setOpen),
+			onClose: () => onDialogClose
+		}, (_slotProps0) => {
+			return createComponent(unref(dialog_portal_default), {
+				teleport: () => __props.teleport,
+				"teleport-to": () => __props.teleportTo
+			}, () => {
+				return createComponent(VaporTransition, {
+					name: "rp-modal",
+					persisted: ""
+				}, extend(() => {
+					return createIf(() => unref(shouldRender), () => {
+						const n30 = t2();
+						renderEffect(() => setDynamicProps(n30, [getLayeredRootAttrs(_slotProps0.zIndex)]));
+						setInsertionState(n30, null, 0);
+						createComponent(unref(dialog_overlay_default), {
+							as: () => overlay_default,
+							"force-mount": () => __props.keepMounted,
+							$: [() => __props.overlayProps, {
+								"class-names": () => overlayClassNames.value,
+								styles: () => overlayStyles.value,
+								"z-index": 0,
+								interactive: ""
+							}]
 						});
-						return n13;
-					}, 1);
-					return n14;
-				});
-				setInsertionState(n27, null, 1);
-				createIf(() => unref(showCloseButton), () => {
-					return createComponent(icon_button_default, {
-						class: "rp-modal__close",
-						ariaLabel: () => __props.closeLabel,
-						variant: "ghost",
-						size: "sm",
-						onClick: () => unref(closeModal)
-					}, () => {
-						return createComponent(unref(x_default));
-					});
-				});
-				setInsertionState(n27, null, 2);
-				createIf(() => $slots.default, () => {
-					const n22 = t4();
-					setInsertionState(n22, null, 0);
-					createSlot("default", { $: [() => unref(slotProps)] }, null, 1);
-					return n22;
-				});
-				setInsertionState(n27, null, 3);
-				createIf(() => unref(hasFooter), () => {
-					const n26 = t5();
-					setInsertionState(n26, null, 0);
-					createSlot("footer", { $: [() => unref(slotProps)] }, null, 1);
-					return n26;
-				});
-				_setTemplateRef(n27, panelRef, null, "panelRef");
-				applyVShow(n28, () => unref(isOpen));
-				return n28;
-			}, null, 129);
-		}, { _: 8 }), true);
+						setInsertionState(n30, null, 1);
+						createComponent(unref(dialog_content_default), {
+							id: () => unref(modalId),
+							as: "section",
+							"force-mount": () => __props.keepMounted,
+							$: [() => panelAttrs.value, {
+								role: () => unref(role),
+								"aria-label": () => unref(ariaLabel),
+								"aria-labelledby": () => unref(ariaLabelledby),
+								"aria-describedby": () => unref(ariaDescribedby),
+								"initial-focus": () => __props.initialFocus,
+								"focus-trap-options": () => __props.focusTrapOptions
+							}]
+						}, extend(() => {
+							return [
+								createIf(() => unref(hasHeader), () => {
+									const n16 = t2();
+									renderEffect(() => setDynamicProps(n16, [{ id: unref(headerId) }, unref(getPartAttrs)("header", { class: "rp-modal__header" })]));
+									setInsertionState(n16, null, 0);
+									createSlot("header", { $: [() => unref(slotProps)] }, () => {
+										const n15 = t1();
+										setInsertionState(n15, null, 0);
+										createIf(() => __props.title, () => {
+											return createComponent(unref(dialog_title_default), {
+												id: () => unref(titleId),
+												as: "h2",
+												$: [() => unref(getPartAttrs)("title", { class: "rp-modal__title" })]
+											}, () => {
+												const n9 = t0();
+												renderEffect(() => setText(n9, toDisplayString(__props.title)));
+												return n9;
+											});
+										});
+										setInsertionState(n15, null, 1);
+										createIf(() => __props.description, () => {
+											return createComponent(unref(dialog_description_default), {
+												id: () => unref(descriptionId),
+												as: "p",
+												$: [() => unref(getPartAttrs)("description", { class: "rp-modal__description" })]
+											}, () => {
+												const n13 = t0();
+												renderEffect(() => setText(n13, toDisplayString(__props.description)));
+												return n13;
+											});
+										});
+										return n15;
+									}, 1);
+									return n16;
+								}, null, 129),
+								createIf(() => unref(showCloseButton), () => {
+									return createComponent(unref(dialog_close_default), {
+										as: () => icon_button_default,
+										"class-names": () => closeClassNames.value,
+										styles: () => closeStyles.value,
+										ariaLabel: () => __props.closeLabel,
+										variant: "ghost",
+										size: "sm"
+									}, () => {
+										return createComponent(unref(x_default));
+									});
+								}, null, 129),
+								createIf(() => $slots.default, () => {
+									const n24 = t2();
+									renderEffect(() => setDynamicProps(n24, [unref(getPartAttrs)("body", { class: "rp-modal__body" })]));
+									setInsertionState(n24, null, 0);
+									createSlot("default", { $: [() => unref(slotProps)] }, null, 1);
+									return n24;
+								}, null, 129),
+								createIf(() => unref(hasFooter), () => {
+									const n28 = t2();
+									renderEffect(() => setDynamicProps(n28, [unref(getPartAttrs)("footer", { class: "rp-modal__footer" })]));
+									setInsertionState(n28, null, 0);
+									createSlot("footer", { $: [() => unref(slotProps)] }, null, 1);
+									return n28;
+								}, null, 129)
+							];
+						}, { _: 8 }));
+						applyVShow(n30, () => unref(isOpen));
+						return n30;
+					}, null, 129);
+				}, { _: 8 }));
+			});
+		}, true);
 	}
-}), [["__scopeId", "data-v-657f313d"]]);
+}), [["__scopeId", "data-v-1a627831"]]);
+//#endregion
+//#region src/components/modal/types.ts
+var modalParts = [
+	"root",
+	"overlay",
+	"panel",
+	"header",
+	"title",
+	"description",
+	"body",
+	"footer",
+	"close"
+];
 //#endregion
-export { modal_default as t };
+export { modal_default as n, modalParts as t };