From f13403488f0927c9c5d3747008bab47de84e1af1 Mon Sep 17 00:00:00 2001 From: mertsincan Date: Wed, 1 Dec 2021 16:32:20 +0300 Subject: [PATCH] Fixed #1836 - For Dialog --- src/components/dialog/Dialog.d.ts | 223 +++++++++++++++++++++++++----- 1 file changed, 188 insertions(+), 35 deletions(-) diff --git a/src/components/dialog/Dialog.d.ts b/src/components/dialog/Dialog.d.ts index 677c2ad58..914504752 100755 --- a/src/components/dialog/Dialog.d.ts +++ b/src/components/dialog/Dialog.d.ts @@ -1,43 +1,196 @@ import { VNode } from 'vue'; +import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers'; -interface DialogProps { - header?: any; - footer?: any; - visible?: boolean; - modal?: boolean; - contentStyle?: any; - contentClass?: string; - rtl?: boolean; - closable?: boolean; - dismissableMask?: boolean; - closeOnEscape?: boolean; - showHeader?: boolean; - baseZIndex?: number; - autoZIndex?: boolean; - ariaCloseLabel?: string; - position?: string; - maximizable?: boolean; - breakpoints?: {[key: string]: string}; - draggable?: boolean; - keepInViewPort?: boolean; - minX?: number; - minY?: number; - appendTo?: string; +type DialogPositionType = 'center' | 'top' | 'bottom' | 'left' | 'right' | 'topleft' | 'topright' | 'bottomleft' | 'bottomright'; + +type DialogAppendToType = 'body' | 'self' | string | undefined; + +export interface DialogBreakpoints { + /** + * Breakpoint for responsive mode. + * + * Example: + * + * + * + * Result: + * + * @media screen and (max-width: ${breakpoint[key]}) { + * .p-dialog[attributeSelector] { + * width: ${breakpoint[value]} !important; + * } + * } + */ + [key: string]: string; } -declare class Dialog { - $props: DialogProps; - $emit(eventName: 'update:visible', value: boolean): this; - $emit(eventName: 'show'): this; - $emit(eventName: 'hide'): this; - $emit(eventName: 'maximize', event: Event): this; - $emit(eventName: 'unmaximize', event: Event): this; - $emit(eventName: 'dragend', event: Event): this; - $slots: { - '': VNode[]; - header: VNode[]; - footer: VNode[]; +export interface DialogProps { + /** + * Title content of the dialog. + */ + header?: string | undefined; + /** + * Footer content of the dialog. + */ + footer?: string | undefined; + /** + * Specifies the visibility of the dialog. + */ + visible?: boolean | undefined; + /** + * Defines if background should be blocked when dialog is displayed. + */ + modal?: boolean | undefined; + /** + * Style of the content section. + */ + contentStyle?: any | undefined; + /** + * Style class of the content section. + */ + contentClass?: string | undefined; + /** + * When enabled dialog is displayed in RTL direction. + */ + rtl?: boolean | undefined; + /** + * Adds a close icon to the header to hide the dialog. + * Default value is true. + */ + closable?: boolean | undefined; + /** + * Specifies if clicking the modal background should hide the dialog. + */ + dismissableMask?: boolean | undefined; + /** + * Specifies if pressing escape key should hide the dialog. + * Default value is true. + */ + closeOnEscape?: boolean | undefined; + /** + * Whether to show the header or not. + * Default value is true. + */ + showHeader?: boolean | undefined; + /** + * Base zIndex value to use in layering. + * Default value is 0. + */ + baseZIndex?: number | undefined; + /** + * Whether to automatically manage layering. + * Default value is true. + */ + autoZIndex?: boolean | undefined; + /** + * Aria label of the close icon. + * Default value is 'close'. + */ + ariaCloseLabel?: string | undefined; + /** + * Position of the dialog, options are "center", "top", "bottom", "left", "right", "topleft", "topright", "bottomleft" or "bottomright". + * @see DialogPositionType + * Default value is 'center'. + */ + position?: DialogPositionType; + /** + * Whether the dialog can be displayed full screen. + */ + maximizable?: boolean | undefined; + /** + * Object literal to define widths per screen size. + * @see DialogBreakpoints + */ + breakpoints?: DialogBreakpoints; + /** + * Enables dragging to change the position using header. + * Default value is true. + */ + draggable?: boolean | undefined; + /** + * Keeps dialog in the viewport when dragging. + * Default value is true. + */ + keepInViewPort?: boolean | undefined; + /** + * Minimum value for the left coordinate of dialog in dragging. + * Default value is 0. + */ + minX?: number | undefined; + /** + * Minimum value for the top coordinate of dialog in dragging. + * Default value is 0. + */ + minY?: number | undefined; + /** + * A valid query selector or an HTMLElement to specify where the dialog gets attached. Special keywords are "body" for document body and "self" for the element itself. + * @see DialogAppendToType + * Default value is 'body'. + */ + appendTo?: DialogAppendToType; +} + +export interface DialogSlots { + /** + * Default content slot. + */ + default: () => VNode[]; + /** + * Custom header template. + */ + header: () => VNode[]; + /** + * Custom footer template. + */ + footer: () => VNode[]; +} + +export declare type DialogEmits = { + /** + * Emitted when the visible changes. + * @param {boolean} value - New value. + */ + 'update:visible': (value: boolean) => void; + /** + * Callback to invoke when dialog is hidden. + */ + 'show': () => void; + /** + * Callback to invoke when dialog is showed. + */ + 'hide': () => void; + /** + * Fired when a dialog gets maximized. + * @param {event} event - Browser event. + */ + 'maximize': (event: Event) => void; + /** + * Fired when a dialog gets unmaximized. + * @param {event} event - Browser event. + */ + 'unmaximize': (event: Event) => void; + /** + * Fired when a dialog drag completes. + * @param {event} event - Browser event. + */ + 'dragend': (event: Event) => void; +} + +declare class Dialog extends ClassComponent { } + +declare module '@vue/runtime-core' { + interface GlobalComponents { + Dialog: GlobalComponentConstructor } } +/** + * + * Dialog is a container to display content in an overlay window. + * + * Demos: + * + * - [Dialog](https://www.primefaces.org/primevue/showcase/#/dialog) + * + */ export default Dialog;