import { type PrimitiveProps } from '../../../../node_modules/radix-vue'; import type { FocusScopeProps } from '../../../../node_modules/radix-vue/dist/FocusScope'; import type { Align, Side } from '../../../../node_modules/radix-vue/dist/Popper/utils'; export interface DismissableLayerProps extends PrimitiveProps { /** * When `true`, hover/focus/click interactions will be disabled on elements outside * the `DismissableLayer`. Users will need to click twice on outside elements to * interact with them: once to close the `DismissableLayer`, and again to trigger the element. */ disableOutsidePointerEvents?: boolean; } export interface PopperContentProps extends PrimitiveProps { /** * The preferred side of the trigger to render against when open. * Will be reversed when collisions occur and avoidCollisions * is enabled. * * @default "top" */ side?: Side; /** * The distance in pixels from the trigger. * * @default 0 */ sideOffset?: number; /** * The preferred alignment against the trigger. * May change when collisions occur. * * @default "center" */ align?: Align; /** * An offset in pixels from the "start" or "end" alignment options. * * @default 0 */ alignOffset?: number; /** * When true, overrides the side andalign preferences * to prevent collisions with boundary edges. * * @default true */ avoidCollisions?: boolean; /** * The element used as the collision boundary. By default * this is the viewport, though you can provide additional * element(s) to be included in this check. * * @default [] */ collisionBoundary?: Element | null | Array; /** * The distance in pixels from the boundary edges where collision * detection should occur. Accepts a number (same for all sides), * or a partial padding object, for example: { top: 20, left: 20 }. * * @default 0 */ collisionPadding?: number | Partial>; /** * The padding between the arrow and the edges of the content. * If your content has border-radius, this will prevent it from * overflowing the corners. * * @default 0 */ arrowPadding?: number; /** * The sticky behavior on the align axis. "partial" will keep the * content in the boundary as long as the trigger is at least partially * in the boundary whilst "always" will keep the content in the boundary * regardless. * * @default "partial" */ sticky?: "partial" | "always"; /** * Whether to hide the content when the trigger becomes fully occluded. * * @default false */ hideWhenDetached?: boolean; updatePositionStrategy?: "optimized" | "always"; onPlaced?: () => void; prioritizePosition?: boolean; } interface PopoverContentImplProps extends PopperContentProps, DismissableLayerProps { /** * Whether focus should be trapped within the `MenuContent` * (default: false) */ trapFocus?: FocusScopeProps["trapped"]; } export interface PopoverContentProps extends PopoverContentImplProps { /** * Used to force mounting when more control is needed. Useful when * controlling animation with Vue animation libraries. */ forceMount?: boolean; } export type PointerDownOutsideEvent = CustomEvent<{ originalEvent: PointerEvent; }>; export type FocusOutsideEvent = CustomEvent<{ originalEvent: FocusEvent; }>; export type DismissableLayerEmits = { /** * Event handler called when the escape key is down. * Can be prevented. */ 'escapeKeyDown': [event: KeyboardEvent]; /** * Event handler called when the a `pointerdown` event happens outside of the `DismissableLayer`. * Can be prevented. */ 'pointerDownOutside': [event: PointerDownOutsideEvent]; /** * Event handler called when the focus moves outside of the `DismissableLayer`. * Can be prevented. */ 'focusOutside': [event: FocusOutsideEvent]; /** * Event handler called when an interaction happens outside the `DismissableLayer`. * Specifically, when a `pointerdown` event happens outside or focus moves outside of it. * Can be prevented. */ 'interactOutside': [event: PointerDownOutsideEvent | FocusOutsideEvent]; /** * Handler called when the `DismissableLayer` should be dismissed */ 'dismiss': []; }; export type PopoverContentImplEmits = DismissableLayerEmits & { /** * Event handler called when auto-focusing on open. * Can be prevented. */ 'openAutoFocus': [event: Event]; /** * Event handler called when auto-focusing on close. * Can be prevented. */ 'closeAutoFocus': [event: Event]; }; export type PopoverContentEmits = PopoverContentImplEmits; export {};