ropav 0.0.6 → 0.0.7

package/dist/modal.js

@@ -0,0 +1,433 @@
+import './modal.css';
+import { t as bem } from "./bem.js";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { t as icon_button_default } from "./icon-button.js";
+import { t as x_default } from "./x.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";
+//#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",
+	"lg",
+	"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) {
+	const slots = useSlots();
+	const generatedId = useId();
+	const panelRef = ref(null);
+	const uncontrolledOpen = ref(Boolean(props.defaultOpen));
+	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`);
+	const role = computed(() => props.role ?? DEFAULT_ROLE);
+	const size = computed(() => props.size || DEFAULT_SIZE);
+	const isPresetSize = computed(() => isModalPresetSize(size.value));
+	const isOpen = computed(() => props.open ?? uncontrolledOpen.value);
+	const shouldRender = computed(() => Boolean(props.keepMounted || isOpen.value));
+	const hasCustomHeader = computed(() => Boolean(slots.header));
+	const hasHeader = computed(() => Boolean(hasCustomHeader.value || props.title || props.description));
+	const hasFooter = computed(() => Boolean(slots.footer));
+	const showCloseButton = computed(() => props.showCloseButton);
+	const headerId = computed(() => hasCustomHeader.value && !props.ariaLabel ? titleId.value : void 0);
+	const ariaLabelledby = computed(() => {
+		if (props.ariaLabel) return void 0;
+		return hasCustomHeader.value || props.title ? titleId.value : void 0;
+	});
+	const ariaDescribedby = computed(() => props.description && !hasCustomHeader.value ? descriptionId.value : void 0);
+	const ariaLabel = computed(() => ariaLabelledby.value ? void 0 : props.ariaLabel || void 0);
+	const rootClass = computed(() => bem("rp-modal", {
+		[`size-${size.value}`]: isPresetSize.value,
+		"size-custom": !isPresetSize.value,
+		open: isOpen.value
+	}));
+	const rootStyle = computed(() => {
+		if (isPresetSize.value) return void 0;
+		return { "--_rp-modal-width": size.value };
+	});
+	const stateClass = computed(() => ({
+		"rp-modal--closable": showCloseButton.value,
+		"rp-modal--headerless": !hasHeader.value
+	}));
+	const slotProps = computed(() => ({
+		isOpen: isOpen.value,
+		open: openModal,
+		close: closeModal,
+		toggle: toggleModal
+	}));
+	function setOpen(nextOpen) {
+		if (nextOpen === isOpen.value) return;
+		if (props.open === void 0) uncontrolledOpen.value = nextOpen;
+		emitOpenChange?.(nextOpen);
+	}
+	function openModal() {
+		setOpen(true);
+	}
+	function closeModal() {
+		setOpen(false);
+	}
+	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);
+	}
+	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,
+		role,
+		isOpen,
+		shouldRender,
+		hasHeader,
+		hasFooter,
+		showCloseButton,
+		headerId,
+		ariaLabelledby,
+		ariaDescribedby,
+		ariaLabel,
+		rootClass,
+		rootStyle,
+		stateClass,
+		slotProps,
+		openModal,
+		closeModal,
+		toggleModal,
+		onOverlayClick
+	};
+}
+//#endregion
+//#region src/components/modal/modal.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<h2 data-v-fe44cbf7 class=rp-modal__title> ");
+var t1 = template("<p data-v-fe44cbf7 class=rp-modal__description> ");
+var t2 = template("<div data-v-fe44cbf7 class=rp-modal__heading>");
+var t3 = template("<div data-v-fe44cbf7 class=rp-modal__header>");
+var t4 = template("<div data-v-fe44cbf7 class=rp-modal__body>");
+var t5 = template("<div data-v-fe44cbf7 class=rp-modal__footer>");
+var t6 = template("<div data-v-fe44cbf7><section data-v-fe44cbf7 class=rp-modal__panel aria-modal=true tabindex=-1>");
+//#endregion
+//#region src/components/modal/modal.vue
+var modal_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
+	name: "RpModal",
+	__name: "modal",
+	props: {
+		id: {},
+		open: {
+			type: Boolean,
+			default: void 0
+		},
+		defaultOpen: {
+			type: Boolean,
+			default: false
+		},
+		title: { default: "" },
+		description: { default: "" },
+		ariaLabel: { default: "" },
+		closeLabel: { default: "Close modal" },
+		role: { default: "dialog" },
+		size: { default: "md" },
+		initialFocus: { default: null },
+		closeOnOverlayClick: {
+			type: Boolean,
+			default: true
+		},
+		closeOnEscape: {
+			type: Boolean,
+			default: true
+		},
+		showCloseButton: {
+			type: Boolean,
+			default: true
+		},
+		overlayProps: { default: () => ({}) },
+		preventScroll: {
+			type: Boolean,
+			default: true
+		},
+		returnFocus: {
+			type: Boolean,
+			default: true
+		},
+		keepMounted: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: ["update:open"],
+	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 _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;
+						});
+						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);
+	}
+}), [["__scopeId", "data-v-fe44cbf7"]]);
+//#endregion
+export { modal_default as t };
+
+//# sourceMappingURL=modal.js.map

package/dist/modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.js","names":[],"sources":["../src/components/modal/useModal.ts","../src/components/modal/modal.vue","../src/components/modal/modal.vue"],"sourcesContent":["import {\n    computed,\n    isRef,\n    nextTick,\n    onBeforeUnmount,\n    onMounted,\n    ref,\n    useSlots,\n    useId,\n    watch,\n    type CSSProperties,\n} from 'vue';\nimport { bem } from '@/utils/bem';\nimport type {\n    ModalInitialFocus,\n    ModalPresetSize,\n    ModalProps,\n    ModalRole,\n    ModalSize,\n    ModalSlotProps,\n} from './types';\n\nlet bodyScrollLockCount = 0;\nlet previousBodyOverflow = '';\nconst activeModalStack: symbol[] = [];\n\ntype Cleanup = () => void;\n\nconst DEFAULT_ROLE: ModalRole = 'dialog';\nconst DEFAULT_SIZE: ModalSize = 'md';\n\nconst FOCUSABLE_SELECTOR = [\n    'a[href]',\n    'button:not([disabled])',\n    'textarea:not([disabled])',\n    'input:not([disabled])',\n    'select:not([disabled])',\n    '[tabindex]:not([tabindex=\"-1\"])',\n].join(',');\n\nconst MODAL_PRESET_SIZES = new Set<ModalPresetSize>(['sm', 'md', 'lg', 'xl', 'full']);\n\nfunction isHTMLElement(value: unknown): value is HTMLElement {\n    return typeof HTMLElement !== 'undefined' && value instanceof HTMLElement;\n}\n\nfunction isModalPresetSize(size: string): size is ModalPresetSize {\n    return MODAL_PRESET_SIZES.has(size as ModalPresetSize);\n}\n\nfunction isFocusable(element: HTMLElement) {\n    if (element.getAttribute('aria-hidden') === 'true') return false;\n    if (element.hasAttribute('disabled')) return false;\n    return element.tabIndex >= 0;\n}\n\nfunction getFocusableElements(panel: HTMLElement | null) {\n    if (!panel) return [];\n    return [...panel.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)].filter(isFocusable);\n}\n\nfunction focusElement(element: HTMLElement | null | undefined) {\n    if (!element) return;\n\n    try {\n        element.focus({ preventScroll: true });\n    } catch {\n        element.focus();\n    }\n}\n\nfunction lockBodyScroll(): Cleanup | undefined {\n    if (typeof document === 'undefined') return undefined;\n\n    if (bodyScrollLockCount === 0) {\n        previousBodyOverflow = document.body.style.overflow;\n        document.body.style.overflow = 'hidden';\n    }\n\n    bodyScrollLockCount += 1;\n\n    return () => {\n        bodyScrollLockCount = Math.max(0, bodyScrollLockCount - 1);\n        if (bodyScrollLockCount === 0) document.body.style.overflow = previousBodyOverflow;\n    };\n}\n\nfunction readInitialFocus(initialFocus: ModalInitialFocus | null | undefined) {\n    return isRef(initialFocus) ? initialFocus.value : initialFocus;\n}\n\nfunction queryPanelElement(panel: HTMLElement, selector: string) {\n    try {\n        const element = panel.querySelector(selector);\n        return isHTMLElement(element) ? element : null;\n    } catch {\n        return null;\n    }\n}\n\nexport function useModal(props: Readonly<ModalProps>, emitOpenChange?: (open: boolean) => void) {\n    const slots = useSlots();\n    const generatedId = useId();\n    const panelRef = ref<HTMLElement | null>(null);\n    const uncontrolledOpen = ref(Boolean(props.defaultOpen));\n    const modalToken = Symbol('modal');\n\n    let isMounted = false;\n    let isActiveModal = false;\n    let previousActiveElement: HTMLElement | null = null;\n    let removeDocumentListeners: Cleanup | undefined;\n    let unlockScroll: Cleanup | undefined;\n\n    const modalId = computed(() => props.id ?? `${generatedId}-modal`);\n    const titleId = computed(() => `${modalId.value}-title`);\n    const descriptionId = computed(() => `${modalId.value}-description`);\n    const role = computed(() => props.role ?? DEFAULT_ROLE);\n    const size = computed(() => props.size || DEFAULT_SIZE);\n    const isPresetSize = computed(() => isModalPresetSize(size.value));\n    const isOpen = computed(() => props.open ?? uncontrolledOpen.value);\n    const shouldRender = computed(() => Boolean(props.keepMounted || isOpen.value));\n    const hasCustomHeader = computed(() => Boolean(slots.header));\n    const hasHeader = computed(() =>\n        Boolean(hasCustomHeader.value || props.title || props.description),\n    );\n    const hasFooter = computed(() => Boolean(slots.footer));\n    const showCloseButton = computed(() => props.showCloseButton);\n\n    const headerId = computed(() =>\n        hasCustomHeader.value && !props.ariaLabel ? titleId.value : undefined,\n    );\n    const ariaLabelledby = computed(() => {\n        if (props.ariaLabel) return undefined;\n        return hasCustomHeader.value || props.title ? titleId.value : undefined;\n    });\n    const ariaDescribedby = computed(() =>\n        props.description && !hasCustomHeader.value ? descriptionId.value : undefined,\n    );\n    const ariaLabel = computed(() =>\n        ariaLabelledby.value ? undefined : props.ariaLabel || undefined,\n    );\n\n    const rootClass = computed(() =>\n        bem('rp-modal', {\n            [`size-${size.value}`]: isPresetSize.value,\n            'size-custom': !isPresetSize.value,\n            open: isOpen.value,\n        }),\n    );\n\n    const rootStyle = computed<CSSProperties | undefined>(() => {\n        if (isPresetSize.value) return undefined;\n\n        return {\n            '--_rp-modal-width': size.value,\n        };\n    });\n\n    const stateClass = computed(() => ({\n        'rp-modal--closable': showCloseButton.value,\n        'rp-modal--headerless': !hasHeader.value,\n    }));\n\n    const slotProps = computed<ModalSlotProps>(() => ({\n        isOpen: isOpen.value,\n        open: openModal,\n        close: closeModal,\n        toggle: toggleModal,\n    }));\n\n    function setOpen(nextOpen: boolean) {\n        if (nextOpen === isOpen.value) return;\n        if (props.open === undefined) uncontrolledOpen.value = nextOpen;\n        emitOpenChange?.(nextOpen);\n    }\n\n    function openModal() {\n        setOpen(true);\n    }\n\n    function closeModal() {\n        setOpen(false);\n    }\n\n    function toggleModal() {\n        setOpen(!isOpen.value);\n    }\n\n    function resolveInitialFocus() {\n        const initialFocus = readInitialFocus(props.initialFocus);\n        const panel = panelRef.value;\n        if (!initialFocus || !panel) return null;\n\n        if (typeof initialFocus === 'string') {\n            return queryPanelElement(panel, initialFocus);\n        }\n\n        return panel.contains(initialFocus) ? initialFocus : null;\n    }\n\n    function focusInitialElement() {\n        const firstFocusable = getFocusableElements(panelRef.value)[0];\n        focusElement(resolveInitialFocus() ?? firstFocusable ?? panelRef.value);\n    }\n\n    function addToStack() {\n        if (!activeModalStack.includes(modalToken)) activeModalStack.push(modalToken);\n    }\n\n    function removeFromStack() {\n        const index = activeModalStack.indexOf(modalToken);\n        if (index !== -1) activeModalStack.splice(index, 1);\n    }\n\n    function isTopModal() {\n        return activeModalStack[activeModalStack.length - 1] === modalToken;\n    }\n\n    function trapFocus(event: KeyboardEvent) {\n        const panel = panelRef.value;\n        if (!panel) return;\n\n        const focusableElements = getFocusableElements(panel);\n        if (focusableElements.length === 0) {\n            event.preventDefault();\n            focusElement(panel);\n            return;\n        }\n\n        const firstElement = focusableElements[0];\n        const lastElement = focusableElements[focusableElements.length - 1];\n        const activeElement = document.activeElement;\n        const isInsidePanel = activeElement instanceof Node && panel.contains(activeElement);\n\n        if (!isInsidePanel) {\n            event.preventDefault();\n            focusElement(firstElement);\n            return;\n        }\n\n        if (event.shiftKey && activeElement === firstElement) {\n            event.preventDefault();\n            focusElement(lastElement);\n            return;\n        }\n\n        if (!event.shiftKey && activeElement === lastElement) {\n            event.preventDefault();\n            focusElement(firstElement);\n        }\n    }\n\n    function onDocumentKeydown(event: KeyboardEvent) {\n        if (!isOpen.value || !isTopModal()) return;\n\n        if (event.key === 'Escape') {\n            if (props.closeOnEscape === false) return;\n            event.preventDefault();\n            closeModal();\n            return;\n        }\n\n        if (event.key === 'Tab') trapFocus(event);\n    }\n\n    function bindDocumentListeners() {\n        if (typeof document === 'undefined' || removeDocumentListeners) return;\n\n        document.addEventListener('keydown', onDocumentKeydown);\n\n        removeDocumentListeners = () => {\n            document.removeEventListener('keydown', onDocumentKeydown);\n            removeDocumentListeners = undefined;\n        };\n    }\n\n    function restoreFocus() {\n        if (props.returnFocus === false) {\n            previousActiveElement = null;\n            return;\n        }\n\n        if (previousActiveElement?.isConnected) focusElement(previousActiveElement);\n        previousActiveElement = null;\n    }\n\n    function activateModal() {\n        if (isActiveModal) return;\n\n        isActiveModal = true;\n        addToStack();\n\n        if (typeof document !== 'undefined') {\n            const activeElement = document.activeElement;\n            previousActiveElement = isHTMLElement(activeElement) ? activeElement : null;\n        }\n\n        bindDocumentListeners();\n        if (props.preventScroll !== false) unlockScroll = lockBodyScroll();\n        void nextTick(() => {\n            if (isActiveModal) focusInitialElement();\n        });\n    }\n\n    function deactivateModal() {\n        if (!isActiveModal) return;\n\n        isActiveModal = false;\n        removeFromStack();\n        removeDocumentListeners?.();\n        unlockScroll?.();\n        unlockScroll = undefined;\n        restoreFocus();\n    }\n\n    function onOverlayClick(event: MouseEvent) {\n        if (props.closeOnOverlayClick === false || event.target !== event.currentTarget) return;\n        closeModal();\n    }\n\n    onMounted(() => {\n        isMounted = true;\n        if (isOpen.value) activateModal();\n    });\n\n    onBeforeUnmount(() => {\n        deactivateModal();\n    });\n\n    watch(isOpen, (nextOpen) => {\n        if (!isMounted) return;\n        if (nextOpen) activateModal();\n        else deactivateModal();\n    });\n\n    return {\n        panelRef,\n        modalId,\n        titleId,\n        descriptionId,\n        role,\n        isOpen,\n        shouldRender,\n        hasHeader,\n        hasFooter,\n        showCloseButton,\n        headerId,\n        ariaLabelledby,\n        ariaDescribedby,\n        ariaLabel,\n        rootClass,\n        rootStyle,\n        stateClass,\n        slotProps,\n        openModal,\n        closeModal,\n        toggleModal,\n        onOverlayClick,\n    };\n}\n","<template>\n    <Transition name=\"rp-modal\">\n        <div\n            v-if=\"shouldRender\"\n            v-show=\"isOpen\"\n            :class=\"[rootClass, stateClass]\"\n            :style=\"rootStyle\"\n        >\n            <Overlay\n                v-bind=\"overlayProps\"\n                class=\"rp-modal__overlay\"\n                :z-index=\"0\"\n                interactive\n                @click=\"onOverlayClick\"\n            />\n\n            <section\n                :id=\"modalId\"\n                ref=\"panelRef\"\n                class=\"rp-modal__panel\"\n                :role=\"role\"\n                aria-modal=\"true\"\n                :aria-label=\"ariaLabel\"\n                :aria-labelledby=\"ariaLabelledby\"\n                :aria-describedby=\"ariaDescribedby\"\n                tabindex=\"-1\"\n            >\n                <div v-if=\"hasHeader\" class=\"rp-modal__header\" :id=\"headerId\">\n                    <slot name=\"header\" v-bind=\"slotProps\">\n                        <div class=\"rp-modal__heading\">\n                            <h2 v-if=\"title\" :id=\"titleId\" class=\"rp-modal__title\">\n                                {{ title }}\n                            </h2>\n                            <p v-if=\"description\" :id=\"descriptionId\" class=\"rp-modal__description\">\n                                {{ description }}\n                            </p>\n                        </div>\n                    </slot>\n                </div>\n\n                <IconButton\n                    v-if=\"showCloseButton\"\n                    class=\"rp-modal__close\"\n                    :ariaLabel=\"closeLabel\"\n                    variant=\"ghost\"\n                    size=\"sm\"\n                    @click=\"closeModal\"\n                >\n                    <IconX />\n                </IconButton>\n\n                <div v-if=\"$slots.default\" class=\"rp-modal__body\">\n                    <slot v-bind=\"slotProps\" />\n                </div>\n\n                <div v-if=\"hasFooter\" class=\"rp-modal__footer\">\n                    <slot name=\"footer\" v-bind=\"slotProps\" />\n                </div>\n            </section>\n        </div>\n    </Transition>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport IconX from '~icons/lucide/x';\nimport IconButton from '../icon-button/icon-button.vue';\nimport Overlay from '../overlay/overlay.vue';\nimport { useModal } from './useModal';\nimport type { ModalProps } from './types';\n\ndefineOptions({ name: 'RpModal' });\n\nconst props = withDefaults(defineProps<ModalProps>(), {\n    open: undefined,\n    defaultOpen: false,\n    title: '',\n    description: '',\n    ariaLabel: '',\n    closeLabel: 'Close modal',\n    role: 'dialog',\n    size: 'md',\n    initialFocus: null,\n    closeOnOverlayClick: true,\n    closeOnEscape: true,\n    showCloseButton: true,\n    overlayProps: () => ({}),\n    preventScroll: true,\n    returnFocus: true,\n    keepMounted: false,\n});\n\nconst emit = defineEmits<{\n    'update:open': [value: boolean];\n}>();\n\nconst {\n    panelRef,\n    modalId,\n    titleId,\n    descriptionId,\n    role,\n    isOpen,\n    shouldRender,\n    hasHeader,\n    hasFooter,\n    showCloseButton,\n    headerId,\n    ariaLabelledby,\n    ariaDescribedby,\n    ariaLabel,\n    rootClass,\n    rootStyle,\n    stateClass,\n    slotProps,\n    closeModal,\n    onOverlayClick,\n} = useModal(props, (open) => {\n    emit('update:open', open);\n});\n\nvoid panelRef;\n</script>\n\n<style src=\"./modal.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <Transition name=\"rp-modal\">\n        <div\n            v-if=\"shouldRender\"\n            v-show=\"isOpen\"\n            :class=\"[rootClass, stateClass]\"\n            :style=\"rootStyle\"\n        >\n            <Overlay\n                v-bind=\"overlayProps\"\n                class=\"rp-modal__overlay\"\n                :z-index=\"0\"\n                interactive\n                @click=\"onOverlayClick\"\n            />\n\n            <section\n                :id=\"modalId\"\n                ref=\"panelRef\"\n                class=\"rp-modal__panel\"\n                :role=\"role\"\n                aria-modal=\"true\"\n                :aria-label=\"ariaLabel\"\n                :aria-labelledby=\"ariaLabelledby\"\n                :aria-describedby=\"ariaDescribedby\"\n                tabindex=\"-1\"\n            >\n                <div v-if=\"hasHeader\" class=\"rp-modal__header\" :id=\"headerId\">\n                    <slot name=\"header\" v-bind=\"slotProps\">\n                        <div class=\"rp-modal__heading\">\n                            <h2 v-if=\"title\" :id=\"titleId\" class=\"rp-modal__title\">\n                                {{ title }}\n                            </h2>\n                            <p v-if=\"description\" :id=\"descriptionId\" class=\"rp-modal__description\">\n                                {{ description }}\n                            </p>\n                        </div>\n                    </slot>\n                </div>\n\n                <IconButton\n                    v-if=\"showCloseButton\"\n                    class=\"rp-modal__close\"\n                    :ariaLabel=\"closeLabel\"\n                    variant=\"ghost\"\n                    size=\"sm\"\n                    @click=\"closeModal\"\n                >\n                    <IconX />\n                </IconButton>\n\n                <div v-if=\"$slots.default\" class=\"rp-modal__body\">\n                    <slot v-bind=\"slotProps\" />\n                </div>\n\n                <div v-if=\"hasFooter\" class=\"rp-modal__footer\">\n                    <slot name=\"footer\" v-bind=\"slotProps\" />\n                </div>\n            </section>\n        </div>\n    </Transition>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport IconX from '~icons/lucide/x';\nimport IconButton from '../icon-button/icon-button.vue';\nimport Overlay from '../overlay/overlay.vue';\nimport { useModal } from './useModal';\nimport type { ModalProps } from './types';\n\ndefineOptions({ name: 'RpModal' });\n\nconst props = withDefaults(defineProps<ModalProps>(), {\n    open: undefined,\n    defaultOpen: false,\n    title: '',\n    description: '',\n    ariaLabel: '',\n    closeLabel: 'Close modal',\n    role: 'dialog',\n    size: 'md',\n    initialFocus: null,\n    closeOnOverlayClick: true,\n    closeOnEscape: true,\n    showCloseButton: true,\n    overlayProps: () => ({}),\n    preventScroll: true,\n    returnFocus: true,\n    keepMounted: false,\n});\n\nconst emit = defineEmits<{\n    'update:open': [value: boolean];\n}>();\n\nconst {\n    panelRef,\n    modalId,\n    titleId,\n    descriptionId,\n    role,\n    isOpen,\n    shouldRender,\n    hasHeader,\n    hasFooter,\n    showCloseButton,\n    headerId,\n    ariaLabelledby,\n    ariaDescribedby,\n    ariaLabel,\n    rootClass,\n    rootStyle,\n    stateClass,\n    slotProps,\n    closeModal,\n    onOverlayClick,\n} = useModal(props, (open) => {\n    emit('update:open', open);\n});\n\nvoid panelRef;\n</script>\n\n<style src=\"./modal.scss\" lang=\"scss\" scoped></style>\n"],"mappings":"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"}

package/dist/overlay.css

@@ -0,0 +1,28 @@
+.rp-overlay[data-v-4a733439] {
+  --_rp-overlay-color: var(--rp-color-overlay);
+  --_rp-overlay-opacity: 1;
+  --_rp-overlay-blur: 0px;
+  --_rp-overlay-z-index: 1;
+  position: absolute;
+  inset: 0;
+  z-index: var(--_rp-overlay-z-index);
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  height: 100%;
+  background-color: var(--_rp-overlay-color);
+  border-radius: inherit;
+  opacity: var(--_rp-overlay-opacity);
+  pointer-events: none;
+}
+.rp-overlay--gradient[data-v-4a733439] {
+  background-color: transparent;
+  opacity: 1;
+}
+.rp-overlay--blurred[data-v-4a733439] {
+  backdrop-filter: blur(var(--_rp-overlay-blur));
+  -webkit-backdrop-filter: blur(var(--_rp-overlay-blur));
+}
+.rp-overlay--interactive[data-v-4a733439] {
+  pointer-events: auto;
+}

package/dist/overlay.js

@@ -0,0 +1,84 @@
+import './overlay.css';
+import { t as bem } from "./bem.js";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { computed, createIf, defineVaporComponent, renderEffect, setClass, setStyle, template, unref } from "vue";
+//#region src/components/overlay/useOverlay.ts
+function getBlurValue(blur) {
+	if (blur == null || blur === "") return void 0;
+	if (typeof blur === "number") {
+		if (!Number.isFinite(blur) || blur < 0) return void 0;
+		return `${blur}px`;
+	}
+	return blur;
+}
+function useOverlay(props) {
+	const isRendered = computed(() => !props.disabled);
+	const hasGradient = computed(() => Boolean(props.gradient));
+	const normalizedOpacity = computed(() => {
+		const opacity = props.opacity;
+		if (opacity === void 0 || !Number.isFinite(opacity)) return 1;
+		return Math.min(1, Math.max(0, opacity));
+	});
+	const blurValue = computed(() => getBlurValue(props.blur));
+	const hasBlur = computed(() => Boolean(blurValue.value));
+	return {
+		isRendered,
+		rootClass: computed(() => bem("rp-overlay", {
+			gradient: hasGradient.value,
+			blurred: hasBlur.value,
+			interactive: props.interactive
+		})),
+		rootStyle: computed(() => {
+			const style = { "--_rp-overlay-z-index": props.zIndex };
+			if (blurValue.value) style["--_rp-overlay-blur"] = blurValue.value;
+			if (hasGradient.value) return {
+				...style,
+				backgroundImage: props.gradient
+			};
+			return {
+				...style,
+				"--_rp-overlay-color": props.color,
+				"--_rp-overlay-opacity": normalizedOpacity.value
+			};
+		})
+	};
+}
+//#endregion
+//#region src/components/overlay/overlay.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<div data-v-4a733439 aria-hidden=true>", 1);
+//#endregion
+//#region src/components/overlay/overlay.vue
+var overlay_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
+	name: "RpOverlay",
+	__name: "overlay",
+	props: {
+		color: { default: "var(--rp-color-overlay)" },
+		opacity: { default: 1 },
+		gradient: { default: "" },
+		blur: {},
+		zIndex: { default: 1 },
+		interactive: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props) {
+		const { isRendered, rootClass, rootStyle } = useOverlay(__props);
+		return createIf(() => unref(isRendered), () => {
+			const n2 = t0();
+			renderEffect(() => {
+				setClass(n2, unref(rootClass));
+				setStyle(n2, unref(rootStyle));
+			});
+			return n2;
+		});
+	}
+}), [["__scopeId", "data-v-4a733439"]]);
+//#endregion
+export { overlay_default as t };
+
+//# sourceMappingURL=overlay.js.map

package/dist/overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay.js","names":[],"sources":["../src/components/overlay/useOverlay.ts","../src/components/overlay/overlay.vue","../src/components/overlay/overlay.vue"],"sourcesContent":["import { computed, type CSSProperties } from 'vue';\nimport { bem } from '@/utils/bem';\nimport type { OverlayProps } from './types';\n\nfunction getBlurValue(blur: OverlayProps['blur']) {\n    if (blur == null || blur === '') return undefined;\n\n    if (typeof blur === 'number') {\n        if (!Number.isFinite(blur) || blur < 0) return undefined;\n\n        return `${blur}px`;\n    }\n\n    return blur;\n}\n\nexport function useOverlay(props: Readonly<OverlayProps>) {\n    const isRendered = computed(() => !props.disabled);\n    const hasGradient = computed(() => Boolean(props.gradient));\n\n    const normalizedOpacity = computed(() => {\n        const opacity = props.opacity;\n        if (opacity === undefined || !Number.isFinite(opacity)) return 1;\n\n        return Math.min(1, Math.max(0, opacity));\n    });\n\n    const blurValue = computed(() => getBlurValue(props.blur));\n    const hasBlur = computed(() => Boolean(blurValue.value));\n\n    const rootClass = computed(() =>\n        bem('rp-overlay', {\n            gradient: hasGradient.value,\n            blurred: hasBlur.value,\n            interactive: props.interactive,\n        }),\n    );\n\n    const rootStyle = computed<CSSProperties>(() => {\n        const style: CSSProperties = {\n            '--_rp-overlay-z-index': props.zIndex,\n        };\n\n        if (blurValue.value) {\n            style['--_rp-overlay-blur'] = blurValue.value;\n        }\n\n        if (hasGradient.value) {\n            return {\n                ...style,\n                backgroundImage: props.gradient,\n            };\n        }\n\n        return {\n            ...style,\n            '--_rp-overlay-color': props.color,\n            '--_rp-overlay-opacity': normalizedOpacity.value,\n        };\n    });\n\n    return {\n        isRendered,\n        rootClass,\n        rootStyle,\n    };\n}\n","<template>\n    <div v-if=\"isRendered\" :class=\"rootClass\" :style=\"rootStyle\" aria-hidden=\"true\" />\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useOverlay } from './useOverlay';\nimport type { OverlayProps } from './types';\n\ndefineOptions({ name: 'RpOverlay' });\n\nconst props = withDefaults(defineProps<OverlayProps>(), {\n    color: 'var(--rp-color-overlay)',\n    opacity: 1,\n    gradient: '',\n    zIndex: 1,\n    interactive: false,\n    disabled: false,\n});\n\nconst { isRendered, rootClass, rootStyle } = useOverlay(props);\n</script>\n\n<style src=\"./overlay.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <div v-if=\"isRendered\" :class=\"rootClass\" :style=\"rootStyle\" aria-hidden=\"true\" />\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useOverlay } from './useOverlay';\nimport type { OverlayProps } from './types';\n\ndefineOptions({ name: 'RpOverlay' });\n\nconst props = withDefaults(defineProps<OverlayProps>(), {\n    color: 'var(--rp-color-overlay)',\n    opacity: 1,\n    gradient: '',\n    zIndex: 1,\n    interactive: false,\n    disabled: false,\n});\n\nconst { isRendered, rootClass, rootStyle } = useOverlay(props);\n</script>\n\n<style src=\"./overlay.scss\" lang=\"scss\" scoped></style>\n"],"mappings":";;;;AAIA,SAAS,aAAa,MAA4B;CAC9C,IAAI,QAAQ,QAAQ,SAAS,IAAI,OAAO,KAAA;CAExC,IAAI,OAAO,SAAS,UAAU;EAC1B,IAAI,CAAC,OAAO,SAAS,IAAI,KAAK,OAAO,GAAG,OAAO,KAAA;EAE/C,OAAO,GAAG,KAAK;CACnB;CAEA,OAAO;AACX;AAEA,SAAgB,WAAW,OAA+B;CACtD,MAAM,aAAa,eAAe,CAAC,MAAM,QAAQ;CACjD,MAAM,cAAc,eAAe,QAAQ,MAAM,QAAQ,CAAC;CAE1D,MAAM,oBAAoB,eAAe;EACrC,MAAM,UAAU,MAAM;EACtB,IAAI,YAAY,KAAA,KAAa,CAAC,OAAO,SAAS,OAAO,GAAG,OAAO;EAE/D,OAAO,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,OAAO,CAAC;CAC3C,CAAC;CAED,MAAM,YAAY,eAAe,aAAa,MAAM,IAAI,CAAC;CACzD,MAAM,UAAU,eAAe,QAAQ,UAAU,KAAK,CAAC;CAiCvD,OAAO;EACH;EACA,WAjCc,eACd,IAAI,cAAc;GACd,UAAU,YAAY;GACtB,SAAS,QAAQ;GACjB,aAAa,MAAM;EACvB,CAAC,CA4BD;EACA,WA1Bc,eAA8B;GAC5C,MAAM,QAAuB,EACzB,yBAAyB,MAAM,OACnC;GAEA,IAAI,UAAU,OACV,MAAM,wBAAwB,UAAU;GAG5C,IAAI,YAAY,OACZ,OAAO;IACH,GAAG;IACH,iBAAiB,MAAM;GAC3B;GAGJ,OAAO;IACH,GAAG;IACH,uBAAuB,MAAM;IAC7B,yBAAyB,kBAAkB;GAC/C;EACJ,CAKI;CACJ;AACJ;;;;;;;;;;;;;;;;;;;;;;;;;EC/CA,MAAM,EAAE,YAAY,WAAW,cAAc,WAAW,OAAK;wBAlB9C,MAAA,UAAA,SAAU;;;iBAAU,MAAA,SAAA,CAAS;iBAAU,MAAA,SAAA,CAAS"}