radix-vue/dist/Popper/PopperContent.d.ts

Vue port for Radix UI Primitives.

import type { Ref } from 'vue';
import type { PrimitiveProps } from '../Primitive';
import type { Align, Side } from './utils';
export declare const PopperContentPropsDefaultValue: {
    side: "right" | "left" | "bottom" | "top";
    sideOffset: number;
    align: "center" | "end" | "start";
    alignOffset: number;
    arrowPadding: number;
    avoidCollisions: boolean;
    collisionBoundary: () => never[];
    collisionPadding: number;
    sticky: "partial" | "always";
    hideWhenDetached: boolean;
    updatePositionStrategy: "always" | "optimized";
    prioritizePosition: 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<Element | null>;
    /**
     * 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<Record<Side, number>>;
    /**
     * 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;
}
export interface PopperContentContext {
    placedSide: Ref<Side>;
    onArrowChange(arrow: HTMLElement | undefined): void;
    arrowX?: Ref<number>;
    arrowY?: Ref<number>;
    shouldHideArrow: Ref<boolean>;
}
export declare const injectPopperContentContext: <T extends PopperContentContext | null | undefined = PopperContentContext>(fallback?: T | undefined) => T extends null ? PopperContentContext | null : PopperContentContext, providePopperContentContext: (contextValue: PopperContentContext) => PopperContentContext;
declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
    asChild: {
        type: import("vue").PropType<boolean>;
    };
    as: {
        type: import("vue").PropType<import('../Primitive').AsTag | import("vue").Component>;
    };
    align: {
        type: import("vue").PropType<"center" | "end" | "start">;
        default: "center" | "end" | "start";
    };
    sticky: {
        type: import("vue").PropType<"partial" | "always">;
        default: "partial" | "always";
    };
    side: {
        type: import("vue").PropType<"right" | "left" | "bottom" | "top">;
        default: "right" | "left" | "bottom" | "top";
    };
    sideOffset: {
        type: import("vue").PropType<number>;
        default: number;
    };
    alignOffset: {
        type: import("vue").PropType<number>;
        default: number;
    };
    avoidCollisions: {
        type: import("vue").PropType<boolean>;
        default: boolean;
    };
    collisionBoundary: {
        type: import("vue").PropType<Element | (Element | null)[] | null>;
        default: () => never[];
    };
    collisionPadding: {
        type: import("vue").PropType<number | Partial<Record<"right" | "left" | "bottom" | "top", number>>>;
        default: number;
    };
    arrowPadding: {
        type: import("vue").PropType<number>;
        default: number;
    };
    hideWhenDetached: {
        type: import("vue").PropType<boolean>;
        default: boolean;
    };
    updatePositionStrategy: {
        type: import("vue").PropType<"always" | "optimized">;
        default: "always" | "optimized";
    };
    onPlaced: {
        type: import("vue").PropType<() => void>;
    };
    prioritizePosition: {
        type: import("vue").PropType<boolean>;
        default: boolean;
    };
}, {
    $el: import("vue").ComputedRef<HTMLElement>;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
    asChild: {
        type: import("vue").PropType<boolean>;
    };
    as: {
        type: import("vue").PropType<import('../Primitive').AsTag | import("vue").Component>;
    };
    align: {
        type: import("vue").PropType<"center" | "end" | "start">;
        default: "center" | "end" | "start";
    };
    sticky: {
        type: import("vue").PropType<"partial" | "always">;
        default: "partial" | "always";
    };
    side: {
        type: import("vue").PropType<"right" | "left" | "bottom" | "top">;
        default: "right" | "left" | "bottom" | "top";
    };
    sideOffset: {
        type: import("vue").PropType<number>;
        default: number;
    };
    alignOffset: {
        type: import("vue").PropType<number>;
        default: number;
    };
    avoidCollisions: {
        type: import("vue").PropType<boolean>;
        default: boolean;
    };
    collisionBoundary: {
        type: import("vue").PropType<Element | (Element | null)[] | null>;
        default: () => never[];
    };
    collisionPadding: {
        type: import("vue").PropType<number | Partial<Record<"right" | "left" | "bottom" | "top", number>>>;
        default: number;
    };
    arrowPadding: {
        type: import("vue").PropType<number>;
        default: number;
    };
    hideWhenDetached: {
        type: import("vue").PropType<boolean>;
        default: boolean;
    };
    updatePositionStrategy: {
        type: import("vue").PropType<"always" | "optimized">;
        default: "always" | "optimized";
    };
    onPlaced: {
        type: import("vue").PropType<() => void>;
    };
    prioritizePosition: {
        type: import("vue").PropType<boolean>;
        default: boolean;
    };
}>>, {
    align: "center" | "end" | "start";
    sticky: "partial" | "always";
    side: "right" | "left" | "bottom" | "top";
    sideOffset: number;
    alignOffset: number;
    avoidCollisions: boolean;
    collisionBoundary: Element | (Element | null)[] | null;
    collisionPadding: number | Partial<Record<"right" | "left" | "bottom" | "top", number>>;
    arrowPadding: number;
    hideWhenDetached: boolean;
    updatePositionStrategy: "always" | "optimized";
    prioritizePosition: boolean;
}, {}>, {
    default?(_: {}): any;
}>;
export default _default;
type __VLS_WithTemplateSlots<T, S> = T & {
    new (): {
        $slots: S;
    };
};