@progress/kendo-vue-popup/index.d.mts

Kendo UI for Vue Popup package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { ComponentOptionsMixin } from 'vue';
import { ComponentProvideOptions } from 'vue';
import { DefineComponent } from 'vue';
import { ExtractPropTypes } from 'vue';
import { Offset as Offset_2 } from '.';
import { OffsetPosition } from '@progress/kendo-popup-common';
import { PopupAnimation as PopupAnimation_2 } from '.';
import { PopupCloseEvent as PopupCloseEvent_2 } from '.';
import { PopupOpenEvent as PopupOpenEvent_2 } from '.';
import { PropType } from 'vue';
import { PublicProps } from 'vue';

/**
 * Defines the horizontal and vertical aligning point of the Popup.
 */
export declare interface Align {
    /**
     * Defines the possible horizontal point values that are relative to the anchor or the Popup.
     *
     * The available options are:
     * - `left`—Uses the leftmost point of the anchor element.
     * - `center`—Uses the center point of the anchor element.
     * - `right`—Uses the rightmost point of the anchor element.
     */
    horizontal: 'left' | 'center' | 'right';
    /**
     * Defines the possible vertical point values that are relative to the anchor or the Popup.
     *
     * The available options are:
     * - `top`—Uses the top point of the anchor element.
     * - `center`—Uses the center point of the anchor element.
     * - `bottom`—Uses the bottom point of the anchor element.
     */
    vertical: 'top' | 'center' | 'bottom';
}

/**
 * Defines the horizontal and vertical collision behavior of the Popup.
 */
export declare interface Collision {
    /**
     * Defines the horizontal collision behavior of the Popup.
     */
    horizontal: CollisionType;
    /**
     * Defines the vertical collision behavior of the Popup.
     */
    vertical: CollisionType;
}

/**
 * Defines the possible collision behavior when the Popup is not fully visible.
 *
 * The available options are:
 * - `fit`—Moves the Popup horizontally until it is fully displayed in the viewport.
 * - `flip`—Flips the Popup position based on the origin and the position properties.
 */
declare type CollisionType = 'fit' | 'flip';

/**
 * The offset position of the Popup.
 */
export declare interface Offset {
    /**
     * Defines the top position of the Popup.
     */
    top: number;
    /**
     * Defines the left position of the Popup.
     */
    left: number;
}

/**
 * @hidden
 */
export declare const Popup: DefineComponent<ExtractPropTypes<    {
appendTo: {
type: PropType<string>;
default: string;
};
anchor: {
type: PropType<string>;
default: string;
};
className: PropType<string | string[]>;
id: PropType<string>;
popupClass: PropType<string | string[]>;
collision: {
type: PropType<object>;
default: () => {
horizontal: string;
vertical: string;
};
};
anchorAlign: {
type: PropType<object>;
default: () => {
horizontal: string;
vertical: string;
};
};
popupAlign: {
type: PropType<object>;
default: () => {
horizontal: string;
vertical: string;
};
};
offset: {
type: PropType<Offset_2>;
default: () => {
left: number;
top: number;
};
};
show: {
type: PropType<boolean>;
default: boolean;
};
animate: {
type: PropType<boolean | PopupAnimation_2>;
default: boolean;
};
direction: {
type: PropType<string>;
default: string;
};
onOpen: PropType<(event: PopupOpenEvent_2) => void>;
onClose: PropType<(event: PopupCloseEvent_2) => void>;
}>, {}, {
hasMounted: boolean;
}, {}, {
onOpened(): void;
onClosing(): void;
onClosed(): void;
transitionDuration(): {
transitionEnterDuration: number;
transitionExitDuration: number;
};
getParentRef(anchor: string, isAnchor?: boolean): any;
position(settings: PopupProps, element: HTMLElement, anchor: string): Position;
calculatePosition($props: any, appendToElement?: HTMLElement): Position;
attachRepositionHandlers(element: any): void;
detachRepositionHandlers(): void;
reposition(): void;
getCurrentZIndex(): number;
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
appendTo: {
type: PropType<string>;
default: string;
};
anchor: {
type: PropType<string>;
default: string;
};
className: PropType<string | string[]>;
id: PropType<string>;
popupClass: PropType<string | string[]>;
collision: {
type: PropType<object>;
default: () => {
horizontal: string;
vertical: string;
};
};
anchorAlign: {
type: PropType<object>;
default: () => {
horizontal: string;
vertical: string;
};
};
popupAlign: {
type: PropType<object>;
default: () => {
horizontal: string;
vertical: string;
};
};
offset: {
type: PropType<Offset_2>;
default: () => {
left: number;
top: number;
};
};
show: {
type: PropType<boolean>;
default: boolean;
};
animate: {
type: PropType<boolean | PopupAnimation_2>;
default: boolean;
};
direction: {
type: PropType<string>;
default: string;
};
onOpen: PropType<(event: PopupOpenEvent_2) => void>;
onClose: PropType<(event: PopupCloseEvent_2) => void>;
}>> & Readonly<{}>, {
animate: boolean;
anchor: string;
direction: string;
anchorAlign: object;
offset: Offset_2;
appendTo: string;
collision: object;
popupAlign: object;
show: boolean;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * The animation settings for the Popup component.
 */
export declare interface PopupAnimation {
    /**
     * The duration of the opening animation in milliseconds. Defaults to `300ms`.
     */
    openDuration?: number;
    /**
     * The duration of the closing animation in milliseconds. Defaults to `300ms`.
     */
    closeDuration?: number;
}

/**
 * Represents the object of the `Close` Popup event.
 */
export declare interface PopupCloseEvent {
    /**
     * An event target.
     */
    target: any;
}

/**
 * Represents the object of the `Open` Popup event.
 */
export declare interface PopupOpenEvent {
    /**
     * An event target.
     */
    target: any;
}

/**
 * Represents the props of the [KendoVue Popup component]({% slug overview_popup %}).
 */
export declare interface PopupProps extends PopupSettings {
    /**
     * Controls the Popup visibility ([see example]({% slug hidden_popup %})). Defaults to `false`.
     */
    show?: boolean;
}

/**
 * @hidden
 */
export declare interface PopupSettings {
    /**
     * Controls the Popup animation ([see example]({% slug animations_popup %})). By default, the opening and closing animations are enabled.
     */
    animate?: boolean | PopupAnimation;
    /**
     * Specifies the element which will be used as an anchor ([see example]({% slug alignmentpositioning_popup %})). The Popup opens next to that element.
     */
    anchor: string;
    /**
     * Specifies the pivot point of the anchor ([see example]({% slug alignmentpositioning_popup %})).
     */
    anchorAlign?: object;
    /**
     * Defines the 'id' or 'ref' of the container to which the Popup will be appended. Defaults to [`body`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body).
     */
    appendTo?: string;
    /**
     * Configures the collision behavior of the Popup ([see example]({% slug viewportboundarydetection_popup %})).
     */
    collision?: object;
    /**
     * Specifies the pivot point of the Popup ([see example]({% slug alignmentpositioning_popup %})).
     */
    popupAlign?: object;
    /**
     * Specifies a list of CSS classes that will be added to the Popup element.
     */
    className?: string | Array<string>;
    /**
     * Specifies the id that will be added to the Popup element.
     */
    id?: string;
    /**
     * Specifies the direction of the Expand Animation. Defaults to `down`.
     */
    direction?: string;
    /**
     * Specifies a list of CSS classes that will be added to the internal animated element ([see example]({% slug appearance_popup %})).
     */
    popupClass?: string | Array<string>;
    /**
     * Represents the styles that are applied to the Popup.
     */
    style?: any;
    /**
     * Specifies the absolute position of the element ([see example]({% slug alignmentpositioning_popup %})). The Popup opens next to that point. The pivot point of the Popup is defined by the `popupAlign` configuration option. The boundary detection is applied by using the window viewport.
     */
    offset?: Offset;
    /**
     * Fires after the Popup is opened and the opening animation ends.
     */
    onOpen?: (event: PopupOpenEvent) => void;
    /**
     * Fires after the Popup is closed.
     */
    onClose?: (event: PopupCloseEvent) => void;
}

/**
 * @hidden
 */
declare interface Position {
    flipped?: boolean;
    offset?: OffsetPosition;
}

export { }