vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed #1836 - For Dialog

pull/1846/head
mertsincan 2021-12-01 16:32:20 +03:00
parent d4fe8924ac
commit f13403488f
1 changed files with 188 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

223
src/components/dialog/Dialog.d.ts vendored
View File

@ -1,43 +1,196 @@
import { VNode } from 'vue'; import { VNode } from 'vue';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
interface DialogProps { type DialogPositionType = 'center' | 'top' | 'bottom' | 'left' | 'right' | 'topleft' | 'topright' | 'bottomleft' | 'bottomright';
header?: any;
footer?: any; type DialogAppendToType = 'body' | 'self' | string | undefined;
visible?: boolean;
modal?: boolean; export interface DialogBreakpoints {
contentStyle?: any; /**
contentClass?: string; * Breakpoint for responsive mode.
rtl?: boolean; *
closable?: boolean; * Example:
dismissableMask?: boolean; *
closeOnEscape?: boolean; * <Dialog :breakpoints="{'960px': '75vw', '640px': '100vw'}" ... />
showHeader?: boolean; *
baseZIndex?: number; * Result:
autoZIndex?: boolean; *
ariaCloseLabel?: string; * @media screen and (max-width: ${breakpoint[key]}) {
position?: string; * .p-dialog[attributeSelector] {
maximizable?: boolean; * width: ${breakpoint[value]} !important;
breakpoints?: {[key: string]: string}; * }
draggable?: boolean; * }
keepInViewPort?: boolean; */
minX?: number; [key: string]: string;
minY?: number;
appendTo?: string;
} }
declare class Dialog { export interface DialogProps {
$props: DialogProps; /**
$emit(eventName: 'update:visible', value: boolean): this; * Title content of the dialog.
$emit(eventName: 'show'): this; */
$emit(eventName: 'hide'): this; header?: string | undefined;
$emit(eventName: 'maximize', event: Event): this; /**
$emit(eventName: 'unmaximize', event: Event): this; * Footer content of the dialog.
$emit(eventName: 'dragend', event: Event): this; */
$slots: { footer?: string | undefined;
'': VNode[]; /**
header: VNode[]; * Specifies the visibility of the dialog.
footer: VNode[]; */
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<DialogProps, DialogSlots, DialogEmits> { }
declare module '@vue/runtime-core' {
interface GlobalComponents {
Dialog: GlobalComponentConstructor<Dialog>
} }
} }
/**
*
* Dialog is a container to display content in an overlay window.
*
* Demos:
*
* - [Dialog](https://www.primefaces.org/primevue/showcase/#/dialog)
*
*/
export default Dialog; export default Dialog;