ropav 0.0.9 → 0.0.10

package/dist/dropdown-menu.js

@@ -11,29 +11,6 @@ var chevron_right_default = markRaw(defineVaporComponent({
 	name: "lucide-chevron-right",
 	render
 }));
-//#endregion
-//#region src/components/dropdown-menu/dropdown-menu-items.ts
-var dropdown_menu_items_default = defineComponent({
-	name: "RpDropdownMenuItems",
-	props: { items: {
-		type: Array,
-		required: true
-	} },
-	setup(props, { slots }) {
-		function renderItems(items) {
-			return items.map((renderedItem) => {
-				const children = [h("button", renderedItem.props, slots.item?.(renderedItem.slotProps))];
-				if (renderedItem.hasSubmenu && renderedItem.submenuOpen) children.push(h("div", renderedItem.submenuProps, renderItems(renderedItem.children)));
-				return h("div", {
-					key: renderedItem.key,
-					class: "rp-dropdown-menu__item-wrap",
-					role: "none"
-				}, children);
-			});
-		}
-		return () => renderItems(props.items);
-	}
-});
 var DEFAULT_FOCUS_TARGET = "first";
 function getOpenFocusTarget(options) {
 	if (typeof options === "string") return options;
@@ -52,7 +29,7 @@ function hasItemSubmenu(item) {
 	return (item.children?.length ?? 0) > 0;
 }
 function hasNestedItems(items) {
-	return items.some((item) => hasItemSubmenu(item) || hasNestedItems(item.children ?? []));
+	return items.some(hasItemSubmenu);
 }
 function getPathKey(path) {
 	return path.length === 0 ? "root" : path.join("-");
@@ -95,6 +72,138 @@ function getNextEnabledIndex(items, index, direction) {
 	return enabledIndexes[enabledIndexes.length - 1];
 }
 //#endregion
+//#region src/components/dropdown-menu/dropdown-menu-items.ts
+var contextProp = {
+	type: Object,
+	required: true
+};
+var renderItemProp = {
+	type: Function,
+	required: true
+};
+var DropdownMenuItemRow = defineComponent({
+	name: "RpDropdownMenuItemRow",
+	props: {
+		context: contextProp,
+		disabled: {
+			type: Boolean,
+			required: true
+		},
+		focused: {
+			type: Boolean,
+			required: true
+		},
+		index: {
+			type: Number,
+			required: true
+		},
+		item: {
+			type: Object,
+			required: true
+		},
+		parentPath: {
+			type: Array,
+			required: true
+		},
+		renderItem: renderItemProp,
+		submenuOpen: {
+			type: Boolean,
+			required: true
+		}
+	},
+	setup(props) {
+		const path = computed(() => [...props.parentPath, props.index]);
+		return () => {
+			const currentPath = path.value;
+			const hasSubmenu = hasItemSubmenu(props.item);
+			const children = [h("button", props.context.getItemProps(props.item, currentPath, props.focused, props.disabled, props.submenuOpen), props.renderItem(props.context.getItemSlotProps(props.item, currentPath, props.focused, props.disabled, props.submenuOpen)))];
+			if (hasSubmenu && props.submenuOpen) children.push(h(DropdownMenuSubmenu, {
+				context: props.context,
+				item: props.item,
+				path: currentPath,
+				renderItem: props.renderItem
+			}));
+			return h("div", {
+				class: "rp-dropdown-menu__item-wrap",
+				role: "none"
+			}, children);
+		};
+	}
+});
+var DropdownMenuItemsList = defineComponent({
+	name: "RpDropdownMenuItemsList",
+	props: {
+		context: contextProp,
+		items: {
+			type: Array,
+			required: true
+		},
+		parentPath: {
+			type: Array,
+			default: () => []
+		},
+		renderItem: renderItemProp
+	},
+	setup(props) {
+		return () => props.items.map((item, index) => {
+			const path = [...props.parentPath, index];
+			const hasSubmenu = hasItemSubmenu(item);
+			return h(DropdownMenuItemRow, {
+				key: `${getPathKey(path)}:${String(item.value)}`,
+				context: props.context,
+				disabled: Boolean(item.disabled),
+				focused: props.context.isItemFocused(path),
+				index,
+				item,
+				parentPath: props.parentPath,
+				renderItem: props.renderItem,
+				submenuOpen: hasSubmenu && props.context.isSubmenuOpen(path)
+			});
+		});
+	}
+});
+var DropdownMenuSubmenu = defineComponent({
+	name: "RpDropdownMenuSubmenu",
+	props: {
+		context: contextProp,
+		item: {
+			type: Object,
+			required: true
+		},
+		path: {
+			type: Array,
+			required: true
+		},
+		renderItem: renderItemProp
+	},
+	setup(props) {
+		return () => h("div", props.context.getSubmenuProps(props.item, props.path, true), [h(DropdownMenuItemsList, {
+			context: props.context,
+			items: props.item.children ?? [],
+			parentPath: props.path,
+			renderItem: props.renderItem
+		})]);
+	}
+});
+var dropdown_menu_items_default = defineComponent({
+	name: "RpDropdownMenuItems",
+	props: {
+		context: contextProp,
+		items: {
+			type: Array,
+			required: true
+		}
+	},
+	setup(props, { slots }) {
+		const renderItem = (slotProps) => slots.item?.(slotProps);
+		return () => h(DropdownMenuItemsList, {
+			context: props.context,
+			items: props.items,
+			renderItem
+		});
+	}
+});
+//#endregion
 //#region src/components/dropdown-menu/useDropdownMenuDisclosure.ts
 function useDropdownMenuDisclosure({ props, emit, rootRef, uncontrolledOpen, isDisabled, isOpen, isVisible, focusedPath, resetFocus, resetSubmenus, resetHoverIntent, focusItem, focusMenu, focusTrigger }) {
 	function setOpen(nextOpen) {
@@ -567,25 +676,25 @@ function useDropdownMenuRenderItems({ items, getItemId, getSubmenuId, getMenuAct
 				disabled,
 				hasSubmenu,
 				submenuOpen,
-				props: getItemProps(item, path, focused, disabled),
-				submenuProps: hasSubmenu ? getSubmenuProps(item, path) : void 0,
-				slotProps: getItemSlotProps(item, path, focused, disabled),
-				children: hasSubmenu ? getRenderedItems(item.children ?? [], path) : []
+				props: getItemProps(item, path, focused, disabled, submenuOpen),
+				submenuProps: submenuOpen ? getSubmenuProps(item, path, true) : void 0,
+				slotProps: getItemSlotProps(item, path, focused, disabled, submenuOpen),
+				children: submenuOpen ? getRenderedItems(item.children ?? [], path) : []
 			};
 		});
 	}
-	function getItemProps(item, indexOrPath, focused = isItemFocused(indexOrPath), disabled = Boolean(item.disabled)) {
+	function getItemProps(item, indexOrPath, focused = isItemFocused(indexOrPath), disabled = Boolean(item.disabled), submenuOpen) {
 		const path = normalizePath(indexOrPath);
 		const hasSubmenu = hasItemSubmenu(item);
-		const submenuOpen = hasSubmenu && isSubmenuOpen(path);
+		const resolvedSubmenuOpen = submenuOpen ?? (hasSubmenu ? isSubmenuOpen(path) : false);
 		return {
 			id: getItemId(path),
 			type: "button",
 			role: "menuitem",
 			tabindex: -1,
-			class: getItemClass(item, focused, disabled, hasSubmenu, submenuOpen),
+			class: getItemClass(item, focused, disabled, hasSubmenu, resolvedSubmenuOpen),
 			"aria-controls": hasSubmenu ? getSubmenuId(path) : void 0,
-			"aria-expanded": hasSubmenu ? submenuOpen : void 0,
+			"aria-expanded": hasSubmenu ? resolvedSubmenuOpen : void 0,
 			"aria-haspopup": hasSubmenu ? "menu" : void 0,
 			"aria-disabled": disabled || void 0,
 			"data-disabled": disabled || void 0,
@@ -595,21 +704,22 @@ function useDropdownMenuRenderItems({ items, getItemId, getSubmenuId, getMenuAct
 			onMouseenter: (event) => focusHoveredItem(item, path, event)
 		};
 	}
-	function getSubmenuProps(item, path) {
+	function getSubmenuProps(item, path, submenuOpen = isSubmenuOpen(path)) {
 		return {
 			id: getSubmenuId(path),
 			role: "menu",
 			class: bem("rp-dropdown-menu__submenu", {
-				open: isSubmenuOpen(path),
+				open: submenuOpen,
 				"has-submenu": hasNestedItems(item.children ?? [])
 			}),
 			"aria-label": item.label,
 			"aria-activedescendant": getMenuActiveDescendant(path)
 		};
 	}
-	function getItemSlotProps(item, indexOrPath, focused = isItemFocused(indexOrPath), disabled = Boolean(item.disabled)) {
+	function getItemSlotProps(item, indexOrPath, focused = isItemFocused(indexOrPath), disabled = Boolean(item.disabled), submenuOpen) {
 		const path = normalizePath(indexOrPath);
 		const hasSubmenu = hasItemSubmenu(item);
+		const resolvedSubmenuOpen = submenuOpen ?? (hasSubmenu ? isSubmenuOpen(path) : false);
 		return {
 			item,
 			index: path[path.length - 1] ?? -1,
@@ -618,7 +728,7 @@ function useDropdownMenuRenderItems({ items, getItemId, getSubmenuId, getMenuAct
 			focused,
 			disabled,
 			hasSubmenu,
-			isSubmenuOpen: hasSubmenu && isSubmenuOpen(path),
+			isSubmenuOpen: resolvedSubmenuOpen,
 			select: () => selectItem(item),
 			openSubmenu: (focus = DEFAULT_FOCUS_TARGET) => openSubmenu(path, focus),
 			closeSubmenu: () => closeSubmenu(path),
@@ -627,6 +737,13 @@ function useDropdownMenuRenderItems({ items, getItemId, getSubmenuId, getMenuAct
 	}
 	return {
 		renderedItems,
+		renderContext: {
+			isItemFocused,
+			isSubmenuOpen,
+			getItemProps,
+			getSubmenuProps,
+			getItemSlotProps
+		},
 		getItemProps,
 		getItemSlotProps
 	};
@@ -768,7 +885,7 @@ function useDropdownMenu(props, emit = {}) {
 		close,
 		toggle
 	}));
-	const { renderedItems, getItemProps, getItemSlotProps } = useDropdownMenuRenderItems({
+	const { renderedItems, renderContext, getItemProps, getItemSlotProps } = useDropdownMenuRenderItems({
 		items: visibleItems,
 		getItemId,
 		getSubmenuId,
@@ -790,6 +907,7 @@ function useDropdownMenu(props, emit = {}) {
 		isEmpty,
 		visibleItems,
 		renderedItems,
+		renderContext,
 		focusedIndex,
 		focusedPath,
 		activeDescendantId,
@@ -847,7 +965,7 @@ var dropdown_menu_default = /* @__PURE__ */ defineVaporComponent({
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
-		const { rootRef, menuRef, isVisible, isEmpty, renderedItems, rootClass, contentClass, contentProps, slotProps } = useDropdownMenu(props, {
+		const { rootRef, menuRef, isVisible, isEmpty, visibleItems, renderContext, rootClass, contentClass, contentProps, slotProps } = useDropdownMenu(props, {
 			openChange: (open) => emit("update:open", open),
 			select: (item) => emit("select", item)
 		});
@@ -871,7 +989,10 @@ var dropdown_menu_default = /* @__PURE__ */ defineVaporComponent({
 					return n8;
 				});
 				setInsertionState(n21, null, 1);
-				createComponent(unref(dropdown_menu_items_default), { items: () => unref(renderedItems) }, { "item": extend((itemSlotProps) => {
+				createComponent(unref(dropdown_menu_items_default), {
+					items: () => unref(visibleItems),
+					context: () => unref(renderContext)
+				}, { "item": extend((itemSlotProps) => {
 					return [createSlot("item", { $: [() => itemSlotProps] }, () => {
 						const n11 = t2();
 						const x11 = txt(n11);

package/dist/index.d.ts

@@ -1,30 +1,31 @@
-export * from './components/alert';
-export * from './components/accordion';
-export * from './components/aspect-ratio';
-export * from './components/avatar';
-export * from './components/badge';
-export * from './components/button';
-export * from './components/button-link';
-export * from './components/button-group';
-export * from './components/card';
-export * from './components/checkbox';
-export * from './components/collapse';
-export * from './components/color-input';
-export * from './components/color-picker';
-export * from './components/color-swatch';
-export * from './components/dropdown-menu';
-export * from './components/field';
-export * from './components/icon-button';
-export * from './components/input';
-export * from './components/modal';
-export * from './components/number-input';
-export * from './components/overlay';
-export * from './components/popover';
-export * from './components/progress';
-export * from './components/radio';
-export * from './components/select';
-export * from './components/slider';
-export * from './components/switch';
-export * from './components/tabs';
-export * from './components/textarea';
-export * from './components/tooltip';
+export * from './components/alert/index.js';
+export * from './components/accordion/index.js';
+export * from './components/aspect-ratio/index.js';
+export * from './components/avatar/index.js';
+export * from './components/badge/index.js';
+export * from './components/button/index.js';
+export * from './components/button-link/index.js';
+export * from './components/button-group/index.js';
+export * from './components/card/index.js';
+export * from './components/checkbox/index.js';
+export * from './components/collapse/index.js';
+export * from './components/color-input/index.js';
+export * from './components/color-picker/index.js';
+export * from './components/color-swatch/index.js';
+export * from './components/dropdown-menu/index.js';
+export * from './components/field/index.js';
+export * from './components/icon-button/index.js';
+export * from './components/input/index.js';
+export * from './components/modal/index.js';
+export * from './components/number-input/index.js';
+export * from './components/overlay/index.js';
+export * from './components/popover/index.js';
+export * from './components/progress/index.js';
+export * from './components/radio/index.js';
+export * from './components/select/index.js';
+export * from './components/slider/index.js';
+export * from './components/switch/index.js';
+export * from './components/tabs/index.js';
+export * from './components/textarea/index.js';
+export * from './components/toast/index.js';
+export * from './components/tooltip/index.js';

package/dist/index.js

@@ -35,5 +35,6 @@ import { a as slider_default, i as range_slider_default, n as sliderOrientations
 import { t as switch_default } from "./switch.js";
 import { a as useTabs, c as useTabsTrigger, i as tabs_default, n as tabs_list_default, o as useTabsContent, r as tabs_content_default, s as useTabsList, t as tabs_trigger_default } from "./tabs.js";
 import { t as textarea_default } from "./textarea.js";
+import { a as toastColors, c as toastTypes, i as useToast, l as toastVariants, n as toast_viewport_default, o as toastPositions, r as toast_provider_default, s as toastRadiuses, t as useToastState, u as toast_default } from "./toast.js";
 import "./components/tooltip/index.js";
-export { accordion_default as Accordion, accordion_item_default as AccordionItem, alert_default as Alert, aspect_ratio_default as AspectRatio, avatar_default as Avatar, badge_default as Badge, button_default as Button, button_group_default as ButtonGroup, button_link_default as ButtonLink, card_default as Card, checkbox_default as Checkbox, collapse_default as Collapse, color_input_default as ColorInput, color_picker_default as ColorPicker, color_swatch_default as ColorSwatch, dropdown_menu_default as DropdownMenu, field_default as Field, icon_button_default as IconButton, input_default as Input, modal_default as Modal, number_input_default as NumberInput, overlay_default as Overlay, popover_default as Popover, progress_default as Progress, radio_default as Radio, radio_group_default as RadioGroup, range_slider_default as RangeSlider, select_default as Select, slider_default as Slider, switch_default as Switch, tabs_default as Tabs, tabs_content_default as TabsContent, tabs_list_default as TabsList, tabs_trigger_default as TabsTrigger, textarea_default as Textarea, tooltip_default as Tooltip, alertColors, alertRadiuses, alertVariants, avatarColors, avatarRadiuses, avatarSizes, avatarVariants, badgeColors, badgeRadiuses, badgeSizes, badgeVariants, colorPickerFormats, colorPickerSizes, popoverPlacements, progressColors, progressRadiuses, progressSizes, sliderColors, sliderOrientations, sliderSizes, useAccordion, useAccordionItem, useCollapse, useDropdownMenu, useTabs, useTabsContent, useTabsList, useTabsTrigger };
+export { accordion_default as Accordion, accordion_item_default as AccordionItem, alert_default as Alert, aspect_ratio_default as AspectRatio, avatar_default as Avatar, badge_default as Badge, button_default as Button, button_group_default as ButtonGroup, button_link_default as ButtonLink, card_default as Card, checkbox_default as Checkbox, collapse_default as Collapse, color_input_default as ColorInput, color_picker_default as ColorPicker, color_swatch_default as ColorSwatch, dropdown_menu_default as DropdownMenu, field_default as Field, icon_button_default as IconButton, input_default as Input, modal_default as Modal, number_input_default as NumberInput, overlay_default as Overlay, popover_default as Popover, progress_default as Progress, radio_default as Radio, radio_group_default as RadioGroup, range_slider_default as RangeSlider, select_default as Select, slider_default as Slider, switch_default as Switch, tabs_default as Tabs, tabs_content_default as TabsContent, tabs_list_default as TabsList, tabs_trigger_default as TabsTrigger, textarea_default as Textarea, toast_default as Toast, toast_provider_default as ToastProvider, toast_viewport_default as ToastViewport, tooltip_default as Tooltip, alertColors, alertRadiuses, alertVariants, avatarColors, avatarRadiuses, avatarSizes, avatarVariants, badgeColors, badgeRadiuses, badgeSizes, badgeVariants, colorPickerFormats, colorPickerSizes, popoverPlacements, progressColors, progressRadiuses, progressSizes, sliderColors, sliderOrientations, sliderSizes, toastColors, toastPositions, toastRadiuses, toastTypes, toastVariants, useAccordion, useAccordionItem, useCollapse, useDropdownMenu, useTabs, useTabsContent, useTabsList, useTabsTrigger, useToast, useToastState };

package/dist/popover.css

@@ -1,4 +1,4 @@
-.rp-popover[data-v-fd62ef9b] {
+.rp-popover[data-v-13614b6c] {
   --_rp-popover-main-axis-offset: var(--rp-spacing-2);
   --_rp-popover-cross-axis-offset: 0px;
   --_rp-popover-radius: var(--rp-radius-sm);
@@ -7,7 +7,7 @@
   font-family: var(--rp-font-family);
   vertical-align: middle;
 }
-.rp-popover__content[data-v-fd62ef9b] {
+.rp-popover__content[data-v-13614b6c] {
   position: absolute;
   z-index: 100;
   box-sizing: border-box;
@@ -23,42 +23,42 @@
   border-radius: var(--_rp-popover-radius);
   box-shadow: var(--rp-shadow-base);
 }
-.rp-popover--placement-top-start .rp-popover__content[data-v-fd62ef9b], .rp-popover--placement-top .rp-popover__content[data-v-fd62ef9b], .rp-popover--placement-top-end .rp-popover__content[data-v-fd62ef9b] {
+.rp-popover--placement-top-start .rp-popover__content[data-v-13614b6c], .rp-popover--placement-top .rp-popover__content[data-v-13614b6c], .rp-popover--placement-top-end .rp-popover__content[data-v-13614b6c] {
   bottom: calc(100% + var(--_rp-popover-main-axis-offset));
 }
-.rp-popover--placement-right-start .rp-popover__content[data-v-fd62ef9b], .rp-popover--placement-right .rp-popover__content[data-v-fd62ef9b], .rp-popover--placement-right-end .rp-popover__content[data-v-fd62ef9b] {
+.rp-popover--placement-right-start .rp-popover__content[data-v-13614b6c], .rp-popover--placement-right .rp-popover__content[data-v-13614b6c], .rp-popover--placement-right-end .rp-popover__content[data-v-13614b6c] {
   left: calc(100% + var(--_rp-popover-main-axis-offset));
 }
-.rp-popover--placement-bottom-start .rp-popover__content[data-v-fd62ef9b], .rp-popover--placement-bottom .rp-popover__content[data-v-fd62ef9b], .rp-popover--placement-bottom-end .rp-popover__content[data-v-fd62ef9b] {
+.rp-popover--placement-bottom-start .rp-popover__content[data-v-13614b6c], .rp-popover--placement-bottom .rp-popover__content[data-v-13614b6c], .rp-popover--placement-bottom-end .rp-popover__content[data-v-13614b6c] {
   top: calc(100% + var(--_rp-popover-main-axis-offset));
 }
-.rp-popover--placement-left-start .rp-popover__content[data-v-fd62ef9b], .rp-popover--placement-left .rp-popover__content[data-v-fd62ef9b], .rp-popover--placement-left-end .rp-popover__content[data-v-fd62ef9b] {
+.rp-popover--placement-left-start .rp-popover__content[data-v-13614b6c], .rp-popover--placement-left .rp-popover__content[data-v-13614b6c], .rp-popover--placement-left-end .rp-popover__content[data-v-13614b6c] {
   right: calc(100% + var(--_rp-popover-main-axis-offset));
 }
-.rp-popover--placement-top-start .rp-popover__content[data-v-fd62ef9b], .rp-popover--placement-bottom-start .rp-popover__content[data-v-fd62ef9b] {
+.rp-popover--placement-top-start .rp-popover__content[data-v-13614b6c], .rp-popover--placement-bottom-start .rp-popover__content[data-v-13614b6c] {
   left: var(--_rp-popover-cross-axis-offset);
 }
-.rp-popover--placement-top .rp-popover__content[data-v-fd62ef9b], .rp-popover--placement-bottom .rp-popover__content[data-v-fd62ef9b] {
+.rp-popover--placement-top .rp-popover__content[data-v-13614b6c], .rp-popover--placement-bottom .rp-popover__content[data-v-13614b6c] {
   left: calc(50% + var(--_rp-popover-cross-axis-offset));
   translate: -50% 0;
 }
-.rp-popover--placement-top-end .rp-popover__content[data-v-fd62ef9b], .rp-popover--placement-bottom-end .rp-popover__content[data-v-fd62ef9b] {
+.rp-popover--placement-top-end .rp-popover__content[data-v-13614b6c], .rp-popover--placement-bottom-end .rp-popover__content[data-v-13614b6c] {
   right: calc(0px - var(--_rp-popover-cross-axis-offset));
 }
-.rp-popover--placement-right-start .rp-popover__content[data-v-fd62ef9b], .rp-popover--placement-left-start .rp-popover__content[data-v-fd62ef9b] {
+.rp-popover--placement-right-start .rp-popover__content[data-v-13614b6c], .rp-popover--placement-left-start .rp-popover__content[data-v-13614b6c] {
   top: var(--_rp-popover-cross-axis-offset);
 }
-.rp-popover--placement-right .rp-popover__content[data-v-fd62ef9b], .rp-popover--placement-left .rp-popover__content[data-v-fd62ef9b] {
+.rp-popover--placement-right .rp-popover__content[data-v-13614b6c], .rp-popover--placement-left .rp-popover__content[data-v-13614b6c] {
   top: calc(50% + var(--_rp-popover-cross-axis-offset));
   translate: 0 -50%;
 }
-.rp-popover--placement-right-end .rp-popover__content[data-v-fd62ef9b], .rp-popover--placement-left-end .rp-popover__content[data-v-fd62ef9b] {
+.rp-popover--placement-right-end .rp-popover__content[data-v-13614b6c], .rp-popover--placement-left-end .rp-popover__content[data-v-13614b6c] {
   bottom: calc(0px - var(--_rp-popover-cross-axis-offset));
 }
-.rp-popover--target[data-v-fd62ef9b] {
+.rp-popover--target[data-v-13614b6c] {
   display: contents;
 }
-.rp-popover--target .rp-popover__content[data-v-fd62ef9b] {
+.rp-popover--target .rp-popover__content[data-v-13614b6c] {
   --_rp-popover-target-translate-x: 0px;
   --_rp-popover-target-translate-y: 0px;
   position: fixed;
@@ -68,41 +68,41 @@
   left: var(--_rp-popover-target-x, 0);
   translate: var(--_rp-popover-target-translate-x) var(--_rp-popover-target-translate-y);
 }
-.rp-popover--target.rp-popover--placement-top-start .rp-popover__content[data-v-fd62ef9b], .rp-popover--target.rp-popover--placement-top .rp-popover__content[data-v-fd62ef9b], .rp-popover--target.rp-popover--placement-top-end .rp-popover__content[data-v-fd62ef9b] {
+.rp-popover--target.rp-popover--placement-top-start .rp-popover__content[data-v-13614b6c], .rp-popover--target.rp-popover--placement-top .rp-popover__content[data-v-13614b6c], .rp-popover--target.rp-popover--placement-top-end .rp-popover__content[data-v-13614b6c] {
   --_rp-popover-target-translate-y: calc(-100% - var(--_rp-popover-main-axis-offset));
 }
-.rp-popover--target.rp-popover--placement-right-start .rp-popover__content[data-v-fd62ef9b], .rp-popover--target.rp-popover--placement-right .rp-popover__content[data-v-fd62ef9b], .rp-popover--target.rp-popover--placement-right-end .rp-popover__content[data-v-fd62ef9b] {
+.rp-popover--target.rp-popover--placement-right-start .rp-popover__content[data-v-13614b6c], .rp-popover--target.rp-popover--placement-right .rp-popover__content[data-v-13614b6c], .rp-popover--target.rp-popover--placement-right-end .rp-popover__content[data-v-13614b6c] {
   --_rp-popover-target-translate-x: var(--_rp-popover-main-axis-offset);
 }
-.rp-popover--target.rp-popover--placement-bottom-start .rp-popover__content[data-v-fd62ef9b], .rp-popover--target.rp-popover--placement-bottom .rp-popover__content[data-v-fd62ef9b], .rp-popover--target.rp-popover--placement-bottom-end .rp-popover__content[data-v-fd62ef9b] {
+.rp-popover--target.rp-popover--placement-bottom-start .rp-popover__content[data-v-13614b6c], .rp-popover--target.rp-popover--placement-bottom .rp-popover__content[data-v-13614b6c], .rp-popover--target.rp-popover--placement-bottom-end .rp-popover__content[data-v-13614b6c] {
   --_rp-popover-target-translate-y: var(--_rp-popover-main-axis-offset);
 }
-.rp-popover--target.rp-popover--placement-left-start .rp-popover__content[data-v-fd62ef9b], .rp-popover--target.rp-popover--placement-left .rp-popover__content[data-v-fd62ef9b], .rp-popover--target.rp-popover--placement-left-end .rp-popover__content[data-v-fd62ef9b] {
+.rp-popover--target.rp-popover--placement-left-start .rp-popover__content[data-v-13614b6c], .rp-popover--target.rp-popover--placement-left .rp-popover__content[data-v-13614b6c], .rp-popover--target.rp-popover--placement-left-end .rp-popover__content[data-v-13614b6c] {
   --_rp-popover-target-translate-x: calc(-100% - var(--_rp-popover-main-axis-offset));
 }
-.rp-popover--target.rp-popover--placement-top-start .rp-popover__content[data-v-fd62ef9b], .rp-popover--target.rp-popover--placement-bottom-start .rp-popover__content[data-v-fd62ef9b] {
+.rp-popover--target.rp-popover--placement-top-start .rp-popover__content[data-v-13614b6c], .rp-popover--target.rp-popover--placement-bottom-start .rp-popover__content[data-v-13614b6c] {
   --_rp-popover-target-translate-x: var(--_rp-popover-cross-axis-offset);
 }
-.rp-popover--target.rp-popover--placement-top .rp-popover__content[data-v-fd62ef9b], .rp-popover--target.rp-popover--placement-bottom .rp-popover__content[data-v-fd62ef9b] {
+.rp-popover--target.rp-popover--placement-top .rp-popover__content[data-v-13614b6c], .rp-popover--target.rp-popover--placement-bottom .rp-popover__content[data-v-13614b6c] {
   --_rp-popover-target-translate-x: calc(-50% + var(--_rp-popover-cross-axis-offset));
 }
-.rp-popover--target.rp-popover--placement-top-end .rp-popover__content[data-v-fd62ef9b], .rp-popover--target.rp-popover--placement-bottom-end .rp-popover__content[data-v-fd62ef9b] {
+.rp-popover--target.rp-popover--placement-top-end .rp-popover__content[data-v-13614b6c], .rp-popover--target.rp-popover--placement-bottom-end .rp-popover__content[data-v-13614b6c] {
   --_rp-popover-target-translate-x: calc(-100% + var(--_rp-popover-cross-axis-offset));
 }
-.rp-popover--target.rp-popover--placement-right-start .rp-popover__content[data-v-fd62ef9b], .rp-popover--target.rp-popover--placement-left-start .rp-popover__content[data-v-fd62ef9b] {
+.rp-popover--target.rp-popover--placement-right-start .rp-popover__content[data-v-13614b6c], .rp-popover--target.rp-popover--placement-left-start .rp-popover__content[data-v-13614b6c] {
   --_rp-popover-target-translate-y: var(--_rp-popover-cross-axis-offset);
 }
-.rp-popover--target.rp-popover--placement-right .rp-popover__content[data-v-fd62ef9b], .rp-popover--target.rp-popover--placement-left .rp-popover__content[data-v-fd62ef9b] {
+.rp-popover--target.rp-popover--placement-right .rp-popover__content[data-v-13614b6c], .rp-popover--target.rp-popover--placement-left .rp-popover__content[data-v-13614b6c] {
   --_rp-popover-target-translate-y: calc(-50% + var(--_rp-popover-cross-axis-offset));
 }
-.rp-popover--target.rp-popover--placement-right-end .rp-popover__content[data-v-fd62ef9b], .rp-popover--target.rp-popover--placement-left-end .rp-popover__content[data-v-fd62ef9b] {
+.rp-popover--target.rp-popover--placement-right-end .rp-popover__content[data-v-13614b6c], .rp-popover--target.rp-popover--placement-left-end .rp-popover__content[data-v-13614b6c] {
   --_rp-popover-target-translate-y: calc(-100% + var(--_rp-popover-cross-axis-offset));
 }
-.rp-popover-content-enter-active[data-v-fd62ef9b],
-.rp-popover-content-leave-active[data-v-fd62ef9b] {
+.rp-popover-content-enter-active[data-v-13614b6c],
+.rp-popover-content-leave-active[data-v-13614b6c] {
   transition: opacity var(--rp-transition-fast);
 }
-.rp-popover-content-enter-from[data-v-fd62ef9b],
-.rp-popover-content-leave-to[data-v-fd62ef9b] {
+.rp-popover-content-enter-from[data-v-13614b6c],
+.rp-popover-content-leave-to[data-v-13614b6c] {
   opacity: 0;
 }

package/dist/popover.js

@@ -1,7 +1,8 @@
 import './popover.css';
 import { t as bem } from "./bem.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { VaporTransition, applyVShow, computed, createComponent, createIf, createSlot, defineVaporComponent, extend, isRef, onMounted, ref, renderEffect, setAttr, setClass, setInsertionState, setProp, setStaticTemplateRef, setStyle, template, unref, useId, useSlots, watch } from "vue";
+import { t as createRafScheduler } from "./rafScheduler.js";
+import { VaporTransition, applyVShow, computed, createComponent, createIf, createSlot, defineVaporComponent, extend, isRef, onBeforeUnmount, onMounted, ref, renderEffect, setAttr, setClass, setInsertionState, setProp, setStaticTemplateRef, setStyle, template, unref, useId, useSlots, watch } from "vue";
 //#region src/components/popover/usePopover.ts
 var DEFAULT_PLACEMENT = "bottom";
 var DEFAULT_ROLE = "dialog";
@@ -95,6 +96,7 @@ function usePopover(props, emitOpenChange) {
 	const targetElement = ref(null);
 	const targetPosition = ref(null);
 	const uncontrolledOpen = ref(false);
+	const positionScheduler = createRafScheduler(updateTargetPosition, () => targetElement.value?.ownerDocument.defaultView);
 	const popoverId = computed(() => props.id ?? `${generatedId}-popover`);
 	const placement = computed(() => props.placement ?? DEFAULT_PLACEMENT);
 	const popoverRole = computed(() => props.role ?? DEFAULT_ROLE);
@@ -103,7 +105,8 @@ function usePopover(props, emitOpenChange) {
 	const isDisabled = computed(() => Boolean(props.disabled || !hasContent.value));
 	const isOpen = computed(() => props.open ?? uncontrolledOpen.value);
 	const isVisible = computed(() => isOpen.value && !isDisabled.value);
-	const shouldRenderContent = computed(() => !isDisabled.value);
+	const shouldRenderContent = computed(() => !isDisabled.value && (Boolean(props.keepMounted) || isVisible.value));
+	const shouldShowContent = computed(() => !props.keepMounted || isVisible.value);
 	const shouldWireTarget = computed(() => isTargetMode.value && !isDisabled.value);
 	const ariaLabel = computed(() => props.ariaLabel || void 0);
 	const ariaLabelledby = computed(() => props.ariaLabelledby || void 0);
@@ -146,7 +149,6 @@ function usePopover(props, emitOpenChange) {
 	}
 	function openPopover() {
 		if (isDisabled.value) return;
-		updateTargetPosition();
 		setOpen(true);
 	}
 	function closePopover() {
@@ -191,13 +193,13 @@ function usePopover(props, emitOpenChange) {
 		closePopover();
 	}
 	function syncTargetElement() {
+		positionScheduler.cancel();
 		const nextTarget = isTargetMode.value ? resolveTargetElement(readTarget()) : null;
 		if (targetElement.value !== nextTarget) targetElement.value = nextTarget;
 		if (!nextTarget) {
 			targetPosition.value = null;
 			return;
 		}
-		if (isVisible.value) updateTargetPosition();
 	}
 	watch(isDisabled, (disabled) => {
 		if (disabled) closePopover();
@@ -233,12 +235,14 @@ function usePopover(props, emitOpenChange) {
 		isTargetMode,
 		targetElement
 	], ([visible, targetMode, target], _previous, onCleanup) => {
-		if (!visible || !targetMode || !target || typeof window === "undefined") return;
-		window.addEventListener("resize", updateTargetPosition);
-		window.addEventListener("scroll", updateTargetPosition, true);
+		const view = target?.ownerDocument.defaultView;
+		if (!visible || !targetMode || !view) return;
+		view.addEventListener("resize", positionScheduler.schedule);
+		view.addEventListener("scroll", positionScheduler.schedule, true);
 		onCleanup(() => {
-			window.removeEventListener("resize", updateTargetPosition);
-			window.removeEventListener("scroll", updateTargetPosition, true);
+			view.removeEventListener("resize", positionScheduler.schedule);
+			view.removeEventListener("scroll", positionScheduler.schedule, true);
+			positionScheduler.cancel();
 		});
 	}, { flush: "sync" });
 	watch(isVisible, (visible, _previous, onCleanup) => {
@@ -258,9 +262,11 @@ function usePopover(props, emitOpenChange) {
 		placement,
 		isVisible
 	], () => {
+		positionScheduler.cancel();
 		if (isVisible.value) updateTargetPosition();
 	}, { flush: "sync" });
 	onMounted(syncTargetElement);
+	onBeforeUnmount(positionScheduler.cancel);
 	return {
 		rootRef,
 		popoverId,
@@ -272,6 +278,7 @@ function usePopover(props, emitOpenChange) {
 		ariaLabelledby,
 		ariaDescribedby,
 		shouldRenderContent,
+		shouldShowContent,
 		rootClass,
 		contentStyle,
 		triggerProps,
@@ -285,8 +292,8 @@ function usePopover(props, emitOpenChange) {
 }
 //#endregion
 //#region src/components/popover/popover.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<section data-v-fd62ef9b class=rp-popover__content>");
-var t1 = template("<span data-v-fd62ef9b>", 1);
+var t0 = template("<section data-v-13614b6c class=rp-popover__content>");
+var t1 = template("<span data-v-13614b6c>", 1);
 //#endregion
 //#region src/components/popover/popover.vue
 var popover_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -316,13 +323,17 @@ var popover_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 		closeOnEscape: {
 			type: Boolean,
 			default: true
+		},
+		keepMounted: {
+			type: Boolean,
+			default: false
 		}
 	},
 	emits: ["update:open"],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
-		const { rootRef, popoverId, isVisible, isTargetMode, popoverRole, ariaLabel, ariaLabelledby, ariaDescribedby, shouldRenderContent, rootClass, contentStyle, slotProps, contentSlotProps } = usePopover(props, (open) => {
+		const { rootRef, popoverId, isTargetMode, popoverRole, ariaLabel, ariaLabelledby, ariaDescribedby, shouldRenderContent, shouldShowContent, rootClass, contentStyle, slotProps, contentSlotProps } = usePopover(props, (open) => {
 			emit("update:open", open);
 		});
 		const n12 = t1();
@@ -368,13 +379,13 @@ var popover_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 						}, null, 1);
 					}, null, 129);
 				}, 1);
-				applyVShow(n10, () => unref(isVisible));
+				applyVShow(n10, () => unref(shouldShowContent));
 				return n10;
 			}, null, 129);
 		}, { _: 8 }));
 		setStaticTemplateRef(n12, rootRef, null, "rootRef");
 		return n12;
 	}
-}), [["__scopeId", "data-v-fd62ef9b"]]);
+}), [["__scopeId", "data-v-13614b6c"]]);
 //#endregion
 export { popover_default as t };