@lumx/vue 4.17.1-alpha.1 → 4.17.1-alpha.3

package/_internal/components/menu-button/MenuButton.js

@@ -0,0 +1,59 @@
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import Button from "../button/Button.js";
+import IconButton from "../button/IconButton.js";
+import Chip from "../chip/Chip.js";
+import Link from "../link/Link.js";
+import { DEFAULT_PROPS, MenuButton as MenuButton$1 } from "../../packages/lumx-core/src/js/components/Menu/MenuButton.js";
+import MenuProvider from "./MenuProvider.js";
+import MenuTrigger from "./MenuTrigger.js";
+import MenuPopover from "./MenuPopover.js";
+import MenuList from "./MenuList.js";
+import { defineComponent } from "vue";
+//#region src/components/menu-button/MenuButton.tsx
+/** Props that MenuButton explicitly declares */
+/** MenuButton props — discriminated union over the variant to inherit the target component's props. */
+/** Menu trigger button component by variant */
+var TRIGGER_COMPONENTS = {
+	button: Button,
+	"icon-button": IconButton,
+	chip: Chip,
+	link: Link
+};
+/**
+* MenuButton component.
+*
+* @param  props Component props.
+* @return Vue element.
+*/
+var MenuButton = /* @__PURE__ */ defineComponent((props, { emit, slots, attrs }) => {
+	const className = useClassName(() => props.class);
+	const onOpen = (isOpen) => emit("open", isOpen);
+	return () => {
+		const { variant = DEFAULT_PROPS.variant, label, popoverProps } = props;
+		return MenuButton$1({
+			label,
+			children: slots.default?.(),
+			popoverProps,
+			onOpen,
+			variant,
+			triggerProps: {
+				...attrs,
+				as: TRIGGER_COMPONENTS[variant],
+				class: className.value
+			}
+		}, {
+			MenuProvider,
+			MenuTrigger,
+			MenuPopover,
+			MenuList
+		});
+	};
+}, {
+	name: "LumxMenuButton",
+	inheritAttrs: false,
+	props: keysOf()("label", "popoverProps", "class", "variant"),
+	emits: ["open"]
+});
+//#endregion
+export { MenuButton as default };

package/_internal/components/menu-button/MenuItem.d.ts

@@ -0,0 +1,40 @@
+import { ClassValue, VueToJSXProps } from "../../utils/VueToJSX.js";
+import { MenuItemProps as MenuItemProps$1, MenuItemPropsToOverride } from "../../packages/lumx-core/src/js/components/Menu/MenuItem.js";
+import { ColorPalette } from "@lumx/core/js/constants";
+import { SlotsType } from "vue";
+
+//#region src/components/menu-button/MenuItem.d.ts
+interface MenuItemActionSlotProps {
+  /** Props to spread on the custom action element (includes onClick). */
+  actionProps: Record<string, any>;
+  /** Whether the item is disabled. */
+  isDisabled: boolean;
+}
+/** MenuItem props. */
+type MenuItemProps = VueToJSXProps<MenuItemProps$1, MenuItemPropsToOverride> & {
+  /** MDI icon rendered as `<Icon size="xs" />` prepended to the `before` slot. */icon?: string; /** MDI icon rendered as `<Icon size="xs" />` appended to the `after` slot. */
+  afterIcon?: string; /** Foreground color applied to the icon and label text. */
+  color?: ColorPalette;
+};
+/**
+ * MenuItem component.
+ *
+ * @param  props Component props.
+ * @return Vue element.
+ */
+declare const MenuItem: import("vue").DefineSetupFnComponent<MenuItemProps, "click"[], SlotsType<{
+  default: void;
+  action: MenuItemActionSlotProps;
+  before: void;
+  after: void;
+}>, Omit<MenuItemProps$1, "ref" | "handleClick" | "handleChange" | "handleInput" | "handleKeyPress" | "handleClose" | "handleFocus" | "handleBlur" | "handleBeforeClick" | "handleAfterClick" | "handleMouseEnter" | "handleMouseLeave" | "handleKeyDown" | "children" | "className" | "before" | "after" | "actionProps" | "actionRef"> & {
+  class?: ClassValue;
+} & {
+  /** MDI icon rendered as `<Icon size="xs" />` prepended to the `before` slot. */icon?: string; /** MDI icon rendered as `<Icon size="xs" />` appended to the `after` slot. */
+  afterIcon?: string; /** Foreground color applied to the icon and label text. */
+  color?: ColorPalette;
+} & {
+  onClick?: ((...args: any[]) => any) | undefined;
+}, import("vue").PublicProps>;
+//#endregion
+export { MenuItem, MenuItemActionSlotProps, MenuItemProps };

package/_internal/components/menu-button/MenuItem.js

@@ -0,0 +1,86 @@
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import Icon from "../icon/Icon.js";
+import Text$1 from "../text/Text.js";
+import { MenuItem as MenuItem$1 } from "../../packages/lumx-core/src/js/components/Menu/MenuItem.js";
+import { useMenuContext } from "./context.js";
+import { Fragment, createVNode, defineComponent, isVNode, ref } from "vue";
+//#region src/components/menu-button/MenuItem.tsx
+/** MenuItem props. */
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+/**
+* MenuItem component.
+*
+* @param  props Component props.
+* @return Vue element.
+*/
+var MenuItem = /* @__PURE__ */ defineComponent((props, { slots, emit, attrs }) => {
+	const { handle } = useMenuContext();
+	const className = useClassName(() => props.class);
+	const internalRef = ref(null);
+	const onClick = (event) => {
+		if (props.isDisabled) {
+			event.preventDefault();
+			return;
+		}
+		emit("click", event);
+		if (!event.defaultPrevented) {
+			handle.trigger?.focus();
+			handle.setOpen(false);
+		}
+	};
+	return () => {
+		const before = slots.before?.();
+		const action = slots.action?.({
+			actionProps: { onClick },
+			isDisabled: props.isDisabled
+		})?.[0];
+		const after = slots.after?.();
+		const beforeWithIcon = props.icon ? createVNode(Fragment, null, [createVNode(Icon, {
+			"icon": props.icon,
+			"size": "xs",
+			"color": props.color
+		}, null), before]) : before;
+		const afterWithIcon = props.afterIcon ? createVNode(Fragment, null, [after, createVNode(Icon, {
+			"icon": props.afterIcon,
+			"size": "xs",
+			"color": props.color
+		}, null)]) : after;
+		let actionProps;
+		let label;
+		if (action) {
+			actionProps = {
+				...action.props,
+				onClick,
+				as: action.type
+			};
+			label = action.children;
+		}
+		label = label ?? slots.default?.();
+		return MenuItem$1({
+			...attrs,
+			...props,
+			className: className.value,
+			ref: internalRef,
+			isDisabled: props.isDisabled,
+			handleClick: onClick,
+			before: beforeWithIcon,
+			actionProps,
+			after: afterWithIcon,
+			children: createVNode(Text$1, {
+				"as": "span",
+				"color": props.color
+			}, _isSlot(label) ? label : { default: () => [label] })
+		});
+	};
+}, {
+	name: "LumxMenuItem",
+	inheritAttrs: false,
+	props: keysOf()("icon", "afterIcon", "color", "isDisabled", "class"),
+	emits: ["click"],
+	slots: Object
+});
+//#endregion
+export { MenuItem as default };

package/_internal/components/menu-button/MenuList.js

@@ -0,0 +1,43 @@
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import { useMenuContext } from "./context.js";
+import { useMenuOpen } from "./useMenuOpen.js";
+import { MenuList as MenuList$1 } from "../../packages/lumx-core/src/js/components/Menu/MenuList.js";
+import { defineComponent, nextTick, onMounted, onUnmounted, ref, useSlots, watch } from "vue";
+//#region src/components/menu-button/MenuList.tsx
+/** MenuList props. */
+/**
+* MenuList component.
+*
+* @param  props Component props.
+* @return Vue element.
+*/
+var MenuList = /* @__PURE__ */ defineComponent((props) => {
+	const slots = useSlots();
+	const { menuId, triggerId, handle } = useMenuContext();
+	const [isOpen] = useMenuOpen();
+	const className = useClassName(() => props.class);
+	const internalRef = ref(null);
+	onMounted(() => {
+		const el = internalRef.value;
+		if (!el) return;
+		const cleanup = handle.registerMenu(el);
+		onUnmounted(() => cleanup?.());
+	});
+	watch(isOpen, (open) => {
+		if (open) nextTick(() => handle.flushPendingNavigation());
+	});
+	return () => MenuList$1({
+		className: className.value,
+		id: menuId,
+		"aria-labelledby": triggerId,
+		ref: internalRef,
+		children: isOpen.value ? slots.default?.() : null
+	});
+}, {
+	name: "LumxMenuList",
+	inheritAttrs: false,
+	props: keysOf()("class")
+});
+//#endregion
+export { MenuList as default };

package/_internal/components/menu-button/MenuPopover.d.ts

@@ -0,0 +1,8 @@
+import { VueToJSXProps } from "../../utils/VueToJSX.js";
+import { MenuPopoverProps as MenuPopoverProps$1 } from "../../packages/lumx-core/src/js/components/Menu/MenuPopover.js";
+
+//#region src/components/menu-button/MenuPopover.d.ts
+/** MenusPopover props. */
+type MenuPopoverProps = VueToJSXProps<MenuPopoverProps$1, 'anchorRef' | 'isOpen' | 'handleClose'>;
+//#endregion
+export { MenuPopoverProps };

package/_internal/components/menu-button/MenuPopover.js

@@ -0,0 +1,36 @@
+import { keysOf } from "../../utils/VueToJSX.js";
+import Popover from "../popover/Popover.js";
+import FlexBox from "../flex-box/FlexBox.js";
+import { useMenuContext } from "./context.js";
+import { useMenuOpen } from "./useMenuOpen.js";
+import { MenuPopover as MenuPopover$1 } from "../../packages/lumx-core/src/js/components/Menu/MenuPopover.js";
+import { defineComponent, useSlots } from "vue";
+//#region src/components/menu-button/MenuPopover.tsx
+/** MenusPopover props. */
+/**
+* MenuPopover component.
+*
+* @param  props Component props.
+* @return Vue element.
+*/
+var MenuPopover = /* @__PURE__ */ defineComponent((props) => {
+	const slots = useSlots();
+	const { anchorRef } = useMenuContext();
+	const [isOpen, setIsOpen] = useMenuOpen();
+	return () => MenuPopover$1({
+		...props,
+		children: slots.default?.(),
+		isOpen: isOpen.value,
+		anchorRef,
+		handleClose: () => setIsOpen(false)
+	}, {
+		Popover,
+		FlexBox
+	});
+}, {
+	name: "LumxMenuPopover",
+	inheritAttrs: false,
+	props: keysOf()("placement", "class")
+});
+//#endregion
+export { MenuPopover as default };

package/_internal/components/menu-button/MenuProvider.js

@@ -0,0 +1,49 @@
+import { useId } from "../../composables/useId.js";
+import { provideMenuContext } from "./context.js";
+import { setupMenu } from "../../packages/lumx-core/src/js/components/Menu/setupMenu.js";
+import { defineComponent, onMounted, onUnmounted, ref, useSlots } from "vue";
+//#region src/components/menu-button/MenuProvider.tsx
+/** MenuProvider props. */
+/**
+* MenuProvider component.
+*
+* @param  props Component props.
+* @return Vue element.
+*/
+var MenuProvider = /* @__PURE__ */ defineComponent((props, { emit }) => {
+	const slots = useSlots();
+	const menuId = useId();
+	const triggerId = useId();
+	const anchorRef = ref(null);
+	const handle = setupMenu({ menuId });
+	onMounted(() => {
+		const unsub = handle.subscribe("open", (isOpen) => emit("open", isOpen));
+		onUnmounted(() => {
+			unsub();
+			handle.destroy();
+		});
+	});
+	provideMenuContext({
+		handle,
+		menuId,
+		triggerId,
+		anchorRef
+	});
+	return () => slots.default?.();
+}, {
+	name: "LumxMenuProvider",
+	inheritAttrs: false,
+	props: {
+		onOpen: {
+			type: Function,
+			default: void 0
+		},
+		class: {
+			type: String,
+			default: void 0
+		}
+	},
+	emits: ["open"]
+});
+//#endregion
+export { MenuProvider as default };

package/_internal/components/menu-button/MenuTrigger.js

@@ -0,0 +1,52 @@
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import Button from "../button/Button.js";
+import { useMenuContext } from "./context.js";
+import { MenuTrigger as MenuTrigger$1 } from "../../packages/lumx-core/src/js/components/Menu/MenuTrigger.js";
+import { useMenuOpen } from "./useMenuOpen.js";
+import { defineComponent, ref, watchEffect } from "vue";
+//#region src/components/menu-button/MenuTrigger.tsx
+/** MenuTrigger props. */
+/**
+* MenuTrigger component.
+*
+* @param  props Component props.
+* @return Vue element.
+*/
+var MenuTrigger = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
+	const { menuId, triggerId, anchorRef, handle } = useMenuContext();
+	const [isOpen] = useMenuOpen();
+	const className = useClassName(() => props.class);
+	const internalRef = ref(null);
+	watchEffect((onCleanup) => {
+		const domEl = internalRef.value?.$el ?? internalRef.value;
+		if (!domEl) return;
+		anchorRef.value = domEl;
+		const cleanup = handle.registerTrigger(domEl);
+		onCleanup(() => cleanup());
+	});
+	return () => {
+		const { as, ...restAttrs } = attrs;
+		let Trigger = Button;
+		if (slots.trigger) Trigger = (slotProps) => slots.trigger({ triggerProps: {
+			...slotProps,
+			ref: internalRef
+		} });
+		else if (as) Trigger = as;
+		return MenuTrigger$1({
+			...restAttrs,
+			id: triggerId,
+			ref: slots.trigger ? void 0 : internalRef,
+			className: className.value,
+			menuId,
+			isOpen: isOpen.value,
+			children: slots.default?.()
+		}, { Trigger });
+	};
+}, {
+	name: "LumxMenuTrigger",
+	inheritAttrs: false,
+	props: keysOf()("class", "id")
+});
+//#endregion
+export { MenuTrigger as default };

package/_internal/components/menu-button/context.js

@@ -0,0 +1,15 @@
+import { inject, provide } from "vue";
+//#region src/components/menu-button/context.ts
+var MENU_CONTEXT_KEY = Symbol("LumxMenuContext");
+/** Provides the Menu context to all descendant Menu sub-components. */
+function provideMenuContext(value) {
+	provide(MENU_CONTEXT_KEY, value);
+}
+/** Injects and returns the Menu context; throws if used outside a MenuProvider. */
+function useMenuContext() {
+	const context = inject(MENU_CONTEXT_KEY);
+	if (!context) throw new Error("Menu sub-components must be used within a Menu.Provider");
+	return context;
+}
+//#endregion
+export { provideMenuContext, useMenuContext };

package/_internal/components/menu-button/index.d.ts

@@ -0,0 +1,3 @@
+import { ListDivider, ListDividerProps } from "../list/ListDivider.js";
+import { MenuItem, MenuItemActionSlotProps, MenuItemProps } from "./MenuItem.js";
+import { MenuButtonProps, _default } from "./MenuButton.js";

package/_internal/components/menu-button/useMenuEvent.js

@@ -0,0 +1,17 @@
+import { useMenuContext } from "./context.js";
+import { onMounted, onUnmounted, ref } from "vue";
+//#region src/components/menu-button/useMenuEvent.ts
+function useMenuEvent(event, initialValue) {
+	const { handle } = useMenuContext();
+	const value = ref(initialValue);
+	let unsub;
+	onMounted(() => {
+		unsub = handle.subscribe(event, (v) => {
+			value.value = v;
+		});
+	});
+	onUnmounted(() => unsub?.());
+	return value;
+}
+//#endregion
+export { useMenuEvent };

package/_internal/components/menu-button/useMenuOpen.js

@@ -0,0 +1,11 @@
+import { useMenuContext } from "./context.js";
+import { useMenuEvent } from "./useMenuEvent.js";
+//#region src/components/menu-button/useMenuOpen.ts
+function useMenuOpen() {
+	const { handle } = useMenuContext();
+	const isOpen = useMenuEvent("open", false);
+	const setIsOpen = (open) => handle.setOpen(open);
+	return [isOpen, setIsOpen];
+}
+//#endregion
+export { useMenuOpen };

package/_internal/components/message/Message.d.ts

@@ -0,0 +1,22 @@
+import { ClassValue, VueToJSXProps } from "../../utils/VueToJSX.js";
+import { MessageProps as MessageProps$1 } from "../../packages/lumx-core/src/js/components/Message/index.js";
+
+//#region src/components/message/Message.d.ts
+type MessageProps = VueToJSXProps<Omit<MessageProps$1, 'closeButtonProps'>> & {
+  /** label to be used for the close button */closeButtonLabel?: string;
+};
+/**
+ * Message component.
+ *
+ * @param  props Component props.
+ * @return Vue element.
+ */
+declare const Message: import("vue").DefineSetupFnComponent<MessageProps, "close"[], {}, Omit<Omit<MessageProps$1, "closeButtonProps">, import("@lumx/core/js/types").PropsToOverride | "children" | "className"> & {
+  class?: ClassValue;
+} & {
+  /** label to be used for the close button */closeButtonLabel?: string;
+} & {
+  onClose?: ((...args: any[]) => any) | undefined;
+}, import("vue").PublicProps>;
+//#endregion
+export { Message, MessageProps };

package/_internal/components/message/Message.js

@@ -0,0 +1,31 @@
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import { Message as Message$1 } from "../../packages/lumx-core/src/js/components/Message/index.js";
+import { createVNode, defineComponent, mergeProps, useAttrs } from "vue";
+//#region src/components/message/Message.tsx
+/**
+* Message component.
+*
+* @param  props Component props.
+* @return Vue element.
+*/
+var Message = /* @__PURE__ */ defineComponent((props, { slots, emit }) => {
+	const attrs = useAttrs();
+	const { closeButtonLabel } = props;
+	const className = useClassName(() => props.class);
+	return () => createVNode(Message$1, mergeProps(props, attrs, {
+		"className": className.value,
+		"children": slots.default?.(),
+		"closeButtonProps": closeButtonLabel ? {
+			label: closeButtonLabel,
+			onClick: () => emit("close")
+		} : void 0
+	}), null);
+}, {
+	name: "Message",
+	inheritAttrs: false,
+	props: keysOf()("hasBackground", "icon", "kind", "class", "closeButtonLabel"),
+	emits: ["close"]
+});
+//#endregion
+export { Message as default };

package/_internal/components/message/index.d.ts

@@ -0,0 +1 @@
+import { Message, MessageProps } from "./Message.js";

package/_internal/components/mosaic/Mosaic.d.ts

@@ -0,0 +1,28 @@
+import { ClassValue, VueToJSXProps } from "../../utils/VueToJSX.js";
+import { ThumbnailProps } from "../thumbnail/Thumbnail.js";
+import { MosaicProps as MosaicProps$1, MosaicPropsToOverride } from "../../packages/lumx-core/src/js/components/Mosaic/index.js";
+
+//#region src/components/mosaic/Mosaic.d.ts
+type MosaicThumbnailItem = Omit<ThumbnailProps, 'class'> & {
+  onClick?: (event: Event) => void;
+};
+type MosaicProps = VueToJSXProps<MosaicProps$1, MosaicPropsToOverride> & {
+  /** Thumbnails. */thumbnails: MosaicThumbnailItem[];
+};
+/**
+ * Mosaic component.
+ *
+ * @param  props Component props.
+ * @return Vue element.
+ */
+declare const Mosaic: import("vue").DefineSetupFnComponent<MosaicProps, {
+  handleClick: (index: number) => boolean;
+}, {}, Omit<MosaicProps$1, import("@lumx/core/js/types").PropsToOverride | "children" | "className" | MosaicPropsToOverride> & {
+  class?: ClassValue;
+} & {
+  /** Thumbnails. */thumbnails: MosaicThumbnailItem[];
+} & {
+  onHandleClick?: ((index: number) => any) | undefined;
+}, import("vue").PublicProps>;
+//#endregion
+export { Mosaic, MosaicProps, MosaicThumbnailItem };

package/_internal/components/mosaic/Mosaic.js

@@ -0,0 +1,36 @@
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import { useTheme } from "../../utils/theme/useTheme.js";
+import { useHasEventListener } from "../../composables/useHasEventListener.js";
+import Thumbnail from "../thumbnail/Thumbnail.js";
+import { Mosaic as Mosaic$1 } from "../../packages/lumx-core/src/js/components/Mosaic/index.js";
+import { createVNode, defineComponent, mergeProps, useAttrs } from "vue";
+/**
+* Mosaic component.
+*
+* @param  props Component props.
+* @return Vue element.
+*/
+var Mosaic = /* @__PURE__ */ defineComponent((props, { emit }) => {
+	const attrs = useAttrs();
+	const defaultTheme = useTheme();
+	const className = useClassName(() => props.class);
+	const hasHandleClickListener = useHasEventListener("onHandleClick");
+	const handleClick = (index) => {
+		emit("handleClick", index);
+	};
+	return () => createVNode(Mosaic$1, mergeProps(attrs, {
+		"className": className.value,
+		"theme": props.theme || defaultTheme.value,
+		"thumbnails": props.thumbnails,
+		"Thumbnail": Thumbnail,
+		"handleClick": hasHandleClickListener ? handleClick : void 0
+	}), null);
+}, {
+	name: "LumxMosaic",
+	inheritAttrs: false,
+	props: keysOf()("thumbnails", "theme", "class"),
+	emits: { handleClick: (index) => typeof index === "number" }
+});
+//#endregion
+export { Mosaic as default };

package/_internal/components/mosaic/index.d.ts

@@ -0,0 +1 @@
+import { Mosaic, MosaicProps, MosaicThumbnailItem } from "./Mosaic.js";

package/_internal/components/popover/Popover.d.ts

@@ -0,0 +1,35 @@
+import { ClassValue, VueToJSXProps } from "../../utils/VueToJSX.js";
+import { PopoverSizes } from "../../packages/lumx-core/src/js/components/Popover/types.js";
+import { PopoverProps as PopoverProps$1 } from "../../packages/lumx-core/src/js/components/Popover/index.js";
+import { Ref } from "vue";
+
+//#region src/components/popover/Popover.d.ts
+/**
+ * Vue Popover props derived from core PopoverProps.
+ * Omits framework-specific props and narrows element ref types to raw HTMLElement.
+ * `isOpen` is made optional (defaults to false at runtime via keysOf).
+ */
+type PopoverProps = VueToJSXProps<PopoverProps$1, 'anchorRef' | 'boundaryRef' | 'focusElement' | 'parentElement' | 'focusTrapZoneElement' | 'isOpen'> & PopoverSizes & {
+  /** Reference to the DOM element used to set the position of the popover. Accepts a Vue Ref for reactive positioning. */anchorRef?: Ref<HTMLElement | undefined> | HTMLElement; /** Element which will act as boundary when opening the popover. Accepts a Vue Ref for reactive positioning. */
+  boundaryRef?: Ref<HTMLElement | undefined> | HTMLElement; /** Element to focus when opening the popover. */
+  focusElement?: HTMLElement; /** Whether the popover is open or not. */
+  isOpen?: boolean; /** Reference to the parent element that triggered the popover. */
+  parentElement?: HTMLElement; /** The element in which the focus trap should be set. Default to popover. */
+  focusTrapZoneElement?: HTMLElement;
+};
+declare const Popover: import("vue").DefineSetupFnComponent<PopoverProps, {
+  close: () => boolean;
+}, {}, Omit<PopoverProps$1, import("@lumx/core/js/types").PropsToOverride | "children" | "className" | "isOpen" | "anchorRef" | "boundaryRef" | "focusElement" | "parentElement" | "focusTrapZoneElement"> & {
+  class?: ClassValue;
+} & PopoverSizes & {
+  /** Reference to the DOM element used to set the position of the popover. Accepts a Vue Ref for reactive positioning. */anchorRef?: Ref<HTMLElement | undefined> | HTMLElement; /** Element which will act as boundary when opening the popover. Accepts a Vue Ref for reactive positioning. */
+  boundaryRef?: Ref<HTMLElement | undefined> | HTMLElement; /** Element to focus when opening the popover. */
+  focusElement?: HTMLElement; /** Whether the popover is open or not. */
+  isOpen?: boolean; /** Reference to the parent element that triggered the popover. */
+  parentElement?: HTMLElement; /** The element in which the focus trap should be set. Default to popover. */
+  focusTrapZoneElement?: HTMLElement;
+} & {
+  onClose?: (() => any) | undefined;
+}, import("vue").PublicProps>;
+//#endregion
+export { Popover, PopoverProps };