@progress/kendo-vue-dialogs/index.d.ts

TODO

/**
 * @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 { PropType } from 'vue';
import { PublicProps } from 'vue';

/**
 * @hidden
 */
export declare const Dialog: DefineComponent<ExtractPropTypes<    {
appendTo: PropType<string>;
title: PropType<any>;
titleRender: PropType<string | boolean | object | Function>;
id: PropType<string>;
wrapperId: PropType<string>;
dir: PropType<string>;
closeIcon: {
type: PropType<boolean>;
default: boolean;
};
width: PropType<string | number>;
height: PropType<string | number>;
minWidth: PropType<string | number>;
className: PropType<string>;
dialogClass: PropType<string>;
themeColor: {
type: PropType<string>;
validator: (value: any) => any;
};
onClose: PropType<(event: DialogCloseEvent) => void>;
}>, {}, {
showLicenseWatermark: boolean;
}, {
wrapperClass(): {
[x: number]: any;
'k-dialog-wrapper': boolean;
};
dialogElementClass(): {
[x: string]: any;
[x: number]: any;
'k-window': boolean;
'k-dialog': boolean;
};
}, {
handleCloseDialog(event: any): void;
handleKeyDown(event: any): void;
transformDimesion(initialValue: string | number | undefined): string;
getActionBarIndex(children: any): any;
generateTitleId(): string;
generateContentId(): string;
handleClick(e: any): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
close: any;
overlayclick: any;
}, string, PublicProps, Readonly<ExtractPropTypes<    {
appendTo: PropType<string>;
title: PropType<any>;
titleRender: PropType<string | boolean | object | Function>;
id: PropType<string>;
wrapperId: PropType<string>;
dir: PropType<string>;
closeIcon: {
type: PropType<boolean>;
default: boolean;
};
width: PropType<string | number>;
height: PropType<string | number>;
minWidth: PropType<string | number>;
className: PropType<string>;
dialogClass: PropType<string>;
themeColor: {
type: PropType<string>;
validator: (value: any) => any;
};
onClose: PropType<(event: DialogCloseEvent) => void>;
}>> & Readonly<{
onClose?: (...args: any[] | unknown[]) => any;
onOverlayclick?: (...args: any[] | unknown[]) => any;
}>, {
closeIcon: boolean;
}, {}, {}, {}, string, () => {
kCurrentZIndex: number;
}, true, {}, any>;

/**
 * @hidden
 */
export declare const DialogActionsBar: DefineComponent<ExtractPropTypes<    {
layout: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
orientation: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
}>, {}, {}, {
wrapperClasses(): {
[x: string]: any;
'k-actions': boolean;
'k-dialog-actions': boolean;
'k-window-actions': boolean;
};
}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
layout: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
orientation: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
}>> & Readonly<{}>, {
layout: string;
orientation: string;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * @hidden
 */
export declare interface DialogCloseEvent {
    /**
     * An event target.
     */
    target: any;
    /**
     * A native DOM event.
     */
    event: any;
}

/**
 * Represents the props of the [KendoVue Dialog component]({% slug overview_dialog %}).
 */
export declare interface DialogProps {
    /**
     * Defines the string selector to the element to which the Dialog will be appended. Defaults to its parent element.
     */
    appendTo?: string;
    /**
     * Sets the title of the Dialog ([see example]({% slug title_dialog %})). If `title` is not specified, the Dialog does not render a **Close** button.
     */
    title?: string | any;
    /**
     * Defines the custom rendering of the title. Accepts a Vue component, a `render` function, or a slot name.
     */
    titleRender?: string | Function | object | boolean;
    /**
     * Sets a class of the Dialog DOM element.
     */
    className?: string;
    /**
     * Specifies whether a close button should be rendered at the top corner of the dialog.
     */
    closeIcon?: boolean;
    /**
     * Specifies the width of the Dialog ([see example]({% slug dimensions_dialog %})).
     */
    width?: number | string;
    /**
     * Specifies the height of the Dialog ([see example]({% slug dimensions_dialog %})).
     */
    height?: number | string;
    /**
     * Specifies the minimum width of the Dialog.
     */
    minWidth?: number | string;
    /**
     * Specifies the theme color of the Dialog. The available options are `primary`, `dark`, and `light`.
     */
    themeColor?: 'primary' | 'dark' | 'light' | string;
    /**
     * Fires when the **Close** button in the title is clicked or when the `Esc` button is pressed.
     */
    onClose?: (event: DialogCloseEvent) => void;
    /**
     * Fires when modal overlay of the Window is clicked.
     */
    onOverlayclick?: (event: any) => void;
    /**
     * Sets the `aria-labelledby` value.
     */
    id?: string;
    /**
     * Sets the `id` of the wrapper element.
     */
    wrapperId?: string;
    /**
     * Represents the `dir` HTML attribute.
     */
    dir?: string;
    /**
     * The styles that are applied to the Dialog.
     */
    style?: any;
    /**
     * The styles that are applied to the content of the Dialog.
     */
    contentStyle?: any;
    dialogClass?: string;
}

/**
 * @hidden
 */
declare const Window_2: DefineComponent<ExtractPropTypes<    {
id: PropType<string>;
appendTo: PropType<string>;
width: {
type: PropType<number>;
default: any;
};
height: {
type: PropType<number>;
default: any;
};
left: {
type: PropType<number>;
default: any;
};
windowStyle: PropType<object>;
windowClass: PropType<string>;
top: {
type: PropType<number>;
default: any;
};
initialWidth: PropType<number>;
initialHeight: PropType<number>;
initialLeft: PropType<number>;
initialTop: PropType<number>;
minWidth: {
type: PropType<number>;
default: number;
};
minHeight: {
type: PropType<number>;
default: number;
};
resizable: {
type: PropType<boolean>;
default: boolean;
};
draggable: {
type: PropType<boolean>;
default: boolean;
};
modal: {
type: PropType<boolean>;
default: boolean;
};
doubleClickStageChange: {
type: PropType<boolean>;
default: boolean;
};
title: PropType<any>;
titleRender: PropType<string | object | Function>;
closeButton: PropType<string | boolean | object | Function>;
minimizeButton: PropType<string | boolean | object | Function>;
maximizeButton: PropType<string | boolean | object | Function>;
restoreButton: PropType<string | boolean | object | Function>;
shouldUpdateOnDrag: PropType<boolean>;
stage: {
type: PropType<string>;
validator: (value: string) => boolean;
};
themeColor: {
type: PropType<string>;
validator: (value: any) => any;
};
dir: PropType<string>;
}>, {}, {
currentStage: string;
isDragging: boolean;
currentTop: any;
currentLeft: any;
currentWidth: any;
currentHeight: any;
titleId: any;
showLicenseWatermark: boolean;
}, {
wrapperClass(): {
'k-dialog-wrapper': any;
};
windowElementClass(): {
[x: string]: any;
[x: number]: any;
'k-window': boolean;
'k-window-minimized': boolean;
};
computedTop(): number;
computedLeft(): number;
computedWidth(): number;
computedHeight(): number;
windowStage(): windowStage | string;
}, {
onPress(event: any): void;
onDrag(event: any): void;
onRelease(event: any): void;
handleKeyDown(event: any): void;
getInitialTop(): any;
getInitialLeft(): any;
getInitialWidth(): number;
getInitialHeight(): number;
handleMinimize(event: any): void;
handleFullscreen(event: any): void;
handleRestore(event: any): void;
handleCloseWindow(event: any): void;
handleDoubleClick(e: any): void;
handleResize(event: any, props: {
end: boolean;
direction: string;
}): void;
dispatchMoveEvent(eventName: string, event: any, drag: boolean, end: boolean | undefined): void;
handleBrowserWindowResize(): void;
handleClick(e: any): void;
getActionBarIndex(children: any): any;
generateTitleId(): string;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
resize: any;
move: any;
close: any;
stagechange: any;
overlayclick: any;
}, string, PublicProps, Readonly<ExtractPropTypes<    {
id: PropType<string>;
appendTo: PropType<string>;
width: {
type: PropType<number>;
default: any;
};
height: {
type: PropType<number>;
default: any;
};
left: {
type: PropType<number>;
default: any;
};
windowStyle: PropType<object>;
windowClass: PropType<string>;
top: {
type: PropType<number>;
default: any;
};
initialWidth: PropType<number>;
initialHeight: PropType<number>;
initialLeft: PropType<number>;
initialTop: PropType<number>;
minWidth: {
type: PropType<number>;
default: number;
};
minHeight: {
type: PropType<number>;
default: number;
};
resizable: {
type: PropType<boolean>;
default: boolean;
};
draggable: {
type: PropType<boolean>;
default: boolean;
};
modal: {
type: PropType<boolean>;
default: boolean;
};
doubleClickStageChange: {
type: PropType<boolean>;
default: boolean;
};
title: PropType<any>;
titleRender: PropType<string | object | Function>;
closeButton: PropType<string | boolean | object | Function>;
minimizeButton: PropType<string | boolean | object | Function>;
maximizeButton: PropType<string | boolean | object | Function>;
restoreButton: PropType<string | boolean | object | Function>;
shouldUpdateOnDrag: PropType<boolean>;
stage: {
type: PropType<string>;
validator: (value: string) => boolean;
};
themeColor: {
type: PropType<string>;
validator: (value: any) => any;
};
dir: PropType<string>;
}>> & Readonly<{
onClose?: (...args: any[] | unknown[]) => any;
onResize?: (...args: any[] | unknown[]) => any;
onOverlayclick?: (...args: any[] | unknown[]) => any;
onMove?: (...args: any[] | unknown[]) => any;
onStagechange?: (...args: any[] | unknown[]) => any;
}>, {
draggable: boolean;
width: number;
top: number;
left: number;
height: number;
minWidth: number;
minHeight: number;
resizable: boolean;
modal: boolean;
doubleClickStageChange: boolean;
}, {}, {}, {}, string, () => {
kCurrentZIndex: number;
}, true, {}, any>;
export { Window_2 as Window }

export declare interface WindowActionsEvent {
    state?: 'DEFAULT' | 'FULLSCREEN' | 'MINIMIZED';
}

export declare interface WindowMoveEvent {
    /**
     * An event target.
     */
    target: Window;
    /**
     * A native DOM event.
     */
    event: any;
    /**
     * Indicates that dragging is completed and that the user dropped the resize handler.
     */
    end: boolean;
    /**
     * Indicates that the move operation was initialized through dragging. If the Window is moved through the keyboard, the value will be `false`.
     */
    drag: boolean;
}

/**
 * Represents the props of the [Window component]({% slug overview_window %}).
 */
export declare interface WindowProps {
    /**
     * The id of the window.
     */
    id?: string;
    /**
     * Defines the string selector to the element to which the Window will be appended. Defaults to its parent element.
     */
    appendTo?: string;
    /**
     * Acccepts a named slot `string`, functional or class component for the close button. If set to `false` the button is not rendered.
     *
     * @default true
     */
    closeButton?: string | Function | object | boolean;
    /**
     * Specifies if the Window stage will change on title double click. The this is on by default.
     */
    doubleClickStageChange?: boolean;
    /**
     * Specifies if the Window will be draggable ([see example]({% slug positioningdragging_window %}#toc-dragging)).
     */
    draggable?: boolean;
    /**
     * Specifies the height of the Window ([see example]({% slug dimensionsresizing_window %}#toc-dimensions)).
     */
    height?: number;
    /**
     * Specifies the initial `left` value ([see example]({% slug positioningdragging_window %}#toc-positioning)). The Window will be in an uncontrolled mode.
     */
    initialLeft?: number;
    /**
     * Specifies the initial `top` value ([see example]({% slug positioningdragging_window %}#toc-positioning)). The component will be in an uncontrolled mode.
     */
    initialTop?: number;
    /**
     * Specifies the initial width of the Window ([see example]({% slug dimensionsresizing_window %}#toc-dimensions)). The component will be in an uncontrolled mode.
     */
    initialWidth?: number;
    /**
     * Specifies the initial height of the Window ([see example]({% slug dimensionsresizing_window %}#toc-dimensions)). The component will be in an uncontrolled mode.
     */
    initialHeight?: number;
    /**
     * Specifies the left coordinates of the Window.
     */
    left?: number;
    windowStyle?: object;
    windowClass?: string;
    /**
     * Acccepts a named slot `string`, functional or class component for the maximize button. If set to `false` the button is not rendered.
     *
     * @default true
     */
    maximizeButton?: string | Function | object | boolean;
    /**
     * Specifies the minimum height of the Window ([see example]({% slug dimensionsresizing_window %}#toc-resizing)).
     */
    minHeight?: number;
    /**
     * Specifies the minimum width of the Window ([see example]({% slug dimensionsresizing_window %}#toc-resizing)).
     */
    minWidth?: number;
    /**
     * Acccepts a named slot `string`, functional or class component for the minimize button. If set to `false` the button is not rendered.
     *
     * @default true
     */
    minimizeButton?: string | Function | object | boolean;
    /**
     * Specifies if the Window will be modal by rendering an overlay under the component.
     */
    modal?: boolean;
    /**
     * Specifies if the Window will be resizable ([see example]({% slug dimensionsresizing_window %}#toc-resizing)).
     */
    resizable?: boolean;
    /**
     * Specifies the theme color of the Dialog.
     */
    themeColor?: 'promary' | 'dark' | 'light' | string;
    /**
     * Acccepts a named slot `string`, functional or class component for the restore button. If set to `false` the button is not rendered.
     *
     * @default true
     */
    restoreButton?: string | Function | object | boolean;
    /**
     * Specifies if the Window content will update during resizing.
     */
    shouldUpdateOnDrag?: boolean;
    /**
     * Specifies the title of the Window ([see example]({% slug title_window %})).
     */
    title?: string | any;
    /**
     * Acccepts a named slot `string`, functional or class component for the title render.
     */
    titleRender?: string | Function | object;
    /**
     * Specifies the top coordinates of the Window.
     */
    top?: number;
    /**
     * Specifies the width of the Window.
     */
    width?: number;
    /**
     * Controls the state of the Window ([see example]({% slug windowstage_window %})).
     *
     * The supported values are:
     * * `DEFAULT`
     * * `MINIMIZED`
     * * `FULLSCREEN`
     */
    stage?: windowStage | string;
    /**
     * Specifies the direction of the Window content.
     *
     * The supported values are:
     * * `"ltr"`
     * * `"rtl"`
     */
    dir?: string;
    /**
     * Fires when the **Close** button in the title is clicked or when the `Esc` button is pressed.
     */
    onClose?: (event: WindowActionsEvent) => void;
    /**
     * Fires when the Window is dragged.
     */
    onMove?: (event: WindowMoveEvent) => void;
    /**
     * Fires when the `DEFAULT`, `FULLSCREEN`, or `MINIMIZED` state of the Window is changed.
     */
    onStagechange?: (event: WindowActionsEvent) => void;
    /**
     * Fires when the Window resizes.
     */
    onResize?: (event: WindowMoveEvent) => void;
    /**
     * Fires when modal overlay of the Window is clicked.
     */
    onOverlayclick?: (event: any) => void;
}

declare enum windowStage {
    DEFAULT = "DEFAULT",
    FULLSCREEN = "FULLSCREEN",
    MINIMIZED = "MINIMIZED"
}

export { }