@headlessui-float/vue/dist/createHighOrderFloatComponent.d.ts

Easily use Headless UI for Vue 3 with Floating UI (Popper.js)

import type { FloatProps } from './float';
export declare function createHighOrderFloatComponent(baseProps: FloatProps): import("./types").__VLS_WithTemplateSlots<import("vue").DefineComponent<{
    as?: string | import("vue").FunctionalComponent<{}, {}, any, {}> | undefined;
    floatingAs?: string | import("vue").FunctionalComponent<{}, {}, any, {}> | undefined;
    show?: boolean | undefined;
    placement?: import("@floating-ui/utils").Placement | undefined;
    strategy?: import("@floating-ui/utils").Strategy | undefined;
    offset?: import("@floating-ui/core").OffsetOptions | undefined;
    shift?: number | boolean | Partial<import("@floating-ui/core").ShiftOptions & {
        rootBoundary?: import("@floating-ui/core").RootBoundary | undefined;
        elementContext?: import("@floating-ui/core").ElementContext | undefined;
        altBoundary?: boolean | undefined;
        padding?: import("@floating-ui/utils").Padding | undefined;
        boundary?: import("@floating-ui/dom").Boundary | undefined;
    }> | undefined;
    flip?: number | boolean | Partial<import("@floating-ui/core").FlipOptions & {
        rootBoundary?: import("@floating-ui/core").RootBoundary | undefined;
        elementContext?: import("@floating-ui/core").ElementContext | undefined;
        altBoundary?: boolean | undefined;
        padding?: import("@floating-ui/utils").Padding | undefined;
        boundary?: import("@floating-ui/dom").Boundary | undefined;
    }> | undefined;
    arrow?: number | boolean | undefined;
    autoPlacement?: boolean | Partial<import("@floating-ui/core").AutoPlacementOptions & {
        rootBoundary?: import("@floating-ui/core").RootBoundary | undefined;
        elementContext?: import("@floating-ui/core").ElementContext | undefined;
        altBoundary?: boolean | undefined;
        padding?: import("@floating-ui/utils").Padding | undefined;
        boundary?: import("@floating-ui/dom").Boundary | undefined;
    }> | undefined;
    hide?: boolean | Partial<import("@floating-ui/core").HideOptions & {
        rootBoundary?: import("@floating-ui/core").RootBoundary | undefined;
        elementContext?: import("@floating-ui/core").ElementContext | undefined;
        altBoundary?: boolean | undefined;
        padding?: import("@floating-ui/utils").Padding | undefined;
        boundary?: import("@floating-ui/dom").Boundary | undefined;
    }> | Partial<import("@floating-ui/core").HideOptions & {
        rootBoundary?: import("@floating-ui/core").RootBoundary | undefined;
        elementContext?: import("@floating-ui/core").ElementContext | undefined;
        altBoundary?: boolean | undefined;
        padding?: import("@floating-ui/utils").Padding | undefined;
        boundary?: import("@floating-ui/dom").Boundary | undefined;
    }>[] | undefined;
    referenceHiddenClass?: string | undefined;
    escapedClass?: string | undefined;
    autoUpdate?: boolean | Partial<import("@floating-ui/dom").AutoUpdateOptions> | undefined;
    zIndex?: string | number | undefined;
    vueTransition?: boolean | undefined;
    transitionName?: string | undefined;
    transitionType?: "transition" | "animation" | undefined;
    enter?: string | undefined;
    enterFrom?: string | undefined;
    enterTo?: string | undefined;
    leave?: string | undefined;
    leaveFrom?: string | undefined;
    leaveTo?: string | undefined;
    originClass?: string | import("./class-resolvers").ClassResolver | undefined;
    tailwindcssOriginClass?: boolean | undefined;
    portal?: boolean | undefined;
    transform?: boolean | undefined;
    adaptiveWidth?: boolean | {
        attribute?: string | undefined;
    } | undefined;
    composable?: boolean | undefined;
    dialog?: boolean | undefined;
    middleware?: {
        name: string;
        options?: any;
        fn: (state: {
            x: number;
            y: number;
            strategy: import("@floating-ui/utils").Strategy;
            initialPlacement: import("@floating-ui/utils").Placement;
            placement: import("@floating-ui/utils").Placement;
            middlewareData: import("@floating-ui/core").MiddlewareData;
            rects: import("@floating-ui/utils").ElementRects;
            platform: import("@floating-ui/core").Platform;
            elements: import("@floating-ui/dom").Elements;
        }) => import("@floating-ui/core").MiddlewareReturn | Promise<import("@floating-ui/core").MiddlewareReturn>;
    }[] | ((refs: {
        referenceEl: import("vue").ComputedRef<import("./types").ReferenceElement | null>;
        floatingEl: import("vue").ComputedRef<HTMLElement | null>;
    }) => {
        name: string;
        options?: any;
        fn: (state: {
            x: number;
            y: number;
            strategy: import("@floating-ui/utils").Strategy;
            initialPlacement: import("@floating-ui/utils").Placement;
            placement: import("@floating-ui/utils").Placement;
            middlewareData: import("@floating-ui/core").MiddlewareData;
            rects: import("@floating-ui/utils").ElementRects;
            platform: import("@floating-ui/core").Platform;
            elements: import("@floating-ui/dom").Elements;
        }) => import("@floating-ui/core").MiddlewareReturn | Promise<import("@floating-ui/core").MiddlewareReturn>;
    }[]) | undefined;
    onShow?: (() => any) | undefined;
    onHide?: (() => any) | undefined;
    onUpdate?: (() => any) | undefined;
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
    [key: string]: any;
}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
    [key: string]: any;
}>[] | undefined, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("show" | "hide" | "update")[], "show" | "hide" | "update", import("vue").PublicProps, Readonly<{
    as?: string | import("vue").FunctionalComponent<{}, {}, any, {}> | undefined;
    floatingAs?: string | import("vue").FunctionalComponent<{}, {}, any, {}> | undefined;
    show?: boolean | undefined;
    placement?: import("@floating-ui/utils").Placement | undefined;
    strategy?: import("@floating-ui/utils").Strategy | undefined;
    offset?: import("@floating-ui/core").OffsetOptions | undefined;
    shift?: number | boolean | Partial<import("@floating-ui/core").ShiftOptions & {
        rootBoundary?: import("@floating-ui/core").RootBoundary | undefined;
        elementContext?: import("@floating-ui/core").ElementContext | undefined;
        altBoundary?: boolean | undefined;
        padding?: import("@floating-ui/utils").Padding | undefined;
        boundary?: import("@floating-ui/dom").Boundary | undefined;
    }> | undefined;
    flip?: number | boolean | Partial<import("@floating-ui/core").FlipOptions & {
        rootBoundary?: import("@floating-ui/core").RootBoundary | undefined;
        elementContext?: import("@floating-ui/core").ElementContext | undefined;
        altBoundary?: boolean | undefined;
        padding?: import("@floating-ui/utils").Padding | undefined;
        boundary?: import("@floating-ui/dom").Boundary | undefined;
    }> | undefined;
    arrow?: number | boolean | undefined;
    autoPlacement?: boolean | Partial<import("@floating-ui/core").AutoPlacementOptions & {
        rootBoundary?: import("@floating-ui/core").RootBoundary | undefined;
        elementContext?: import("@floating-ui/core").ElementContext | undefined;
        altBoundary?: boolean | undefined;
        padding?: import("@floating-ui/utils").Padding | undefined;
        boundary?: import("@floating-ui/dom").Boundary | undefined;
    }> | undefined;
    hide?: boolean | Partial<import("@floating-ui/core").HideOptions & {
        rootBoundary?: import("@floating-ui/core").RootBoundary | undefined;
        elementContext?: import("@floating-ui/core").ElementContext | undefined;
        altBoundary?: boolean | undefined;
        padding?: import("@floating-ui/utils").Padding | undefined;
        boundary?: import("@floating-ui/dom").Boundary | undefined;
    }> | Partial<import("@floating-ui/core").HideOptions & {
        rootBoundary?: import("@floating-ui/core").RootBoundary | undefined;
        elementContext?: import("@floating-ui/core").ElementContext | undefined;
        altBoundary?: boolean | undefined;
        padding?: import("@floating-ui/utils").Padding | undefined;
        boundary?: import("@floating-ui/dom").Boundary | undefined;
    }>[] | undefined;
    referenceHiddenClass?: string | undefined;
    escapedClass?: string | undefined;
    autoUpdate?: boolean | Partial<import("@floating-ui/dom").AutoUpdateOptions> | undefined;
    zIndex?: string | number | undefined;
    vueTransition?: boolean | undefined;
    transitionName?: string | undefined;
    transitionType?: "transition" | "animation" | undefined;
    enter?: string | undefined;
    enterFrom?: string | undefined;
    enterTo?: string | undefined;
    leave?: string | undefined;
    leaveFrom?: string | undefined;
    leaveTo?: string | undefined;
    originClass?: string | import("./class-resolvers").ClassResolver | undefined;
    tailwindcssOriginClass?: boolean | undefined;
    portal?: boolean | undefined;
    transform?: boolean | undefined;
    adaptiveWidth?: boolean | {
        attribute?: string | undefined;
    } | undefined;
    composable?: boolean | undefined;
    dialog?: boolean | undefined;
    middleware?: {
        name: string;
        options?: any;
        fn: (state: {
            x: number;
            y: number;
            strategy: import("@floating-ui/utils").Strategy;
            initialPlacement: import("@floating-ui/utils").Placement;
            placement: import("@floating-ui/utils").Placement;
            middlewareData: import("@floating-ui/core").MiddlewareData;
            rects: import("@floating-ui/utils").ElementRects;
            platform: import("@floating-ui/core").Platform;
            elements: import("@floating-ui/dom").Elements;
        }) => import("@floating-ui/core").MiddlewareReturn | Promise<import("@floating-ui/core").MiddlewareReturn>;
    }[] | ((refs: {
        referenceEl: import("vue").ComputedRef<import("./types").ReferenceElement | null>;
        floatingEl: import("vue").ComputedRef<HTMLElement | null>;
    }) => {
        name: string;
        options?: any;
        fn: (state: {
            x: number;
            y: number;
            strategy: import("@floating-ui/utils").Strategy;
            initialPlacement: import("@floating-ui/utils").Placement;
            placement: import("@floating-ui/utils").Placement;
            middlewareData: import("@floating-ui/core").MiddlewareData;
            rects: import("@floating-ui/utils").ElementRects;
            platform: import("@floating-ui/core").Platform;
            elements: import("@floating-ui/dom").Elements;
        }) => import("@floating-ui/core").MiddlewareReturn | Promise<import("@floating-ui/core").MiddlewareReturn>;
    }[]) | undefined;
    onShow?: (() => any) | undefined;
    onHide?: (() => any) | undefined;
    onUpdate?: (() => any) | undefined;
}> & Readonly<{
    onShow?: ((...args: any[]) => any) | undefined;
    onHide?: ((...args: any[]) => any) | undefined;
    onUpdate?: ((...args: any[]) => any) | undefined;
}>, {
    shift: number | boolean | Partial<import("@floating-ui/core").ShiftOptions & {
        rootBoundary?: import("@floating-ui/core").RootBoundary | undefined;
        elementContext?: import("@floating-ui/core").ElementContext | undefined;
        altBoundary?: boolean | undefined;
        padding?: import("@floating-ui/utils").Padding | undefined;
        boundary?: import("@floating-ui/dom").Boundary | undefined;
    }>;
    strategy: import("@floating-ui/utils").Strategy;
    placement: import("@floating-ui/utils").Placement;
    dialog: boolean;
    as: string | import("vue").FunctionalComponent<{}, {}, any, {}>;
    vueTransition: boolean;
    tailwindcssOriginClass: boolean;
    show: boolean;
    floatingAs: string | import("vue").FunctionalComponent<{}, {}, any, {}>;
    flip: number | boolean | Partial<import("@floating-ui/core").FlipOptions & {
        rootBoundary?: import("@floating-ui/core").RootBoundary | undefined;
        elementContext?: import("@floating-ui/core").ElementContext | undefined;
        altBoundary?: boolean | undefined;
        padding?: import("@floating-ui/utils").Padding | undefined;
        boundary?: import("@floating-ui/dom").Boundary | undefined;
    }>;
    arrow: number | boolean;
    autoPlacement: boolean | Partial<import("@floating-ui/core").AutoPlacementOptions & {
        rootBoundary?: import("@floating-ui/core").RootBoundary | undefined;
        elementContext?: import("@floating-ui/core").ElementContext | undefined;
        altBoundary?: boolean | undefined;
        padding?: import("@floating-ui/utils").Padding | undefined;
        boundary?: import("@floating-ui/dom").Boundary | undefined;
    }>;
    hide: boolean | Partial<import("@floating-ui/core").HideOptions & {
        rootBoundary?: import("@floating-ui/core").RootBoundary | undefined;
        elementContext?: import("@floating-ui/core").ElementContext | undefined;
        altBoundary?: boolean | undefined;
        padding?: import("@floating-ui/utils").Padding | undefined;
        boundary?: import("@floating-ui/dom").Boundary | undefined;
    }> | Partial<import("@floating-ui/core").HideOptions & {
        rootBoundary?: import("@floating-ui/core").RootBoundary | undefined;
        elementContext?: import("@floating-ui/core").ElementContext | undefined;
        altBoundary?: boolean | undefined;
        padding?: import("@floating-ui/utils").Padding | undefined;
        boundary?: import("@floating-ui/dom").Boundary | undefined;
    }>[];
    autoUpdate: boolean | Partial<import("@floating-ui/dom").AutoUpdateOptions>;
    zIndex: string | number;
    portal: boolean;
    transform: boolean;
    adaptiveWidth: boolean | {
        attribute?: string | undefined;
    };
    composable: boolean;
    middleware: {
        name: string;
        options?: any;
        fn: (state: {
            x: number;
            y: number;
            strategy: import("@floating-ui/utils").Strategy;
            initialPlacement: import("@floating-ui/utils").Placement;
            placement: import("@floating-ui/utils").Placement;
            middlewareData: import("@floating-ui/core").MiddlewareData;
            rects: import("@floating-ui/utils").ElementRects;
            platform: import("@floating-ui/core").Platform;
            elements: import("@floating-ui/dom").Elements;
        }) => import("@floating-ui/core").MiddlewareReturn | Promise<import("@floating-ui/core").MiddlewareReturn>;
    }[] | ((refs: {
        referenceEl: import("vue").ComputedRef<import("./types").ReferenceElement | null>;
        floatingEl: import("vue").ComputedRef<HTMLElement | null>;
    }) => {
        name: string;
        options?: any;
        fn: (state: {
            x: number;
            y: number;
            strategy: import("@floating-ui/utils").Strategy;
            initialPlacement: import("@floating-ui/utils").Placement;
            placement: import("@floating-ui/utils").Placement;
            middlewareData: import("@floating-ui/core").MiddlewareData;
            rects: import("@floating-ui/utils").ElementRects;
            platform: import("@floating-ui/core").Platform;
            elements: import("@floating-ui/dom").Elements;
        }) => import("@floating-ui/core").MiddlewareReturn | Promise<import("@floating-ui/core").MiddlewareReturn>;
    }[]);
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, Readonly<{
    default: (props: import("./float").FloatSlotProps) => any;
}> & {
    default: (props: import("./float").FloatSlotProps) => any;
}>;