2022-09-12 07:13:52 +00:00
const DialogProps = [
{
2022-09-14 14:26:41 +00:00
name : 'header' ,
type : 'any' ,
default : 'null' ,
description : 'Title content of the dialog.'
2022-09-12 07:13:52 +00:00
} ,
{
2022-09-14 14:26:41 +00:00
name : 'footer' ,
type : 'any' ,
default : 'null' ,
description : 'Footer content of the dialog.'
2022-09-12 07:13:52 +00:00
} ,
{
2022-09-14 14:26:41 +00:00
name : 'visible' ,
type : 'boolean' ,
default : 'false' ,
description : 'Specifies the visibility of the dialog.'
2022-09-12 07:13:52 +00:00
} ,
{
2022-09-14 14:26:41 +00:00
name : 'modal' ,
type : 'boolean' ,
default : 'null' ,
description : 'Defines if background should be blocked when dialog is displayed.'
2022-09-12 07:13:52 +00:00
} ,
{
2022-09-14 14:26:41 +00:00
name : 'closeOnEscape' ,
type : 'boolean' ,
default : 'true' ,
description : 'Specifies if pressing escape key should hide the dialog.'
2022-09-12 07:13:52 +00:00
} ,
{
2022-09-14 14:26:41 +00:00
name : 'dismissableMask' ,
type : 'boolean' ,
default : 'false' ,
description : 'Specifies if clicking the modal background should hide the dialog.'
2022-09-12 07:13:52 +00:00
} ,
{
2022-09-14 14:26:41 +00:00
name : 'position' ,
type : 'string' ,
default : 'center' ,
2022-09-12 07:13:52 +00:00
description : 'Position of the dialog, options are "center", "top", "bottom", "left", "right", "topleft", "topright", "bottomleft" or "bottomright".'
} ,
{
2022-09-14 14:26:41 +00:00
name : 'contentStyle' ,
type : 'object' ,
default : 'null' ,
description : 'Style of the content section.'
2022-09-12 07:13:52 +00:00
} ,
{
2022-09-14 14:26:41 +00:00
name : 'contentClass' ,
type : 'string' ,
default : 'null' ,
description : 'Style class of the content section.'
2022-09-12 07:13:52 +00:00
} ,
{
2022-09-14 14:26:41 +00:00
name : 'rtl' ,
type : 'boolean' ,
default : 'null' ,
description : 'When enabled dialog is displayed in RTL direction.'
2022-09-12 07:13:52 +00:00
} ,
{
2022-09-14 14:26:41 +00:00
name : 'closable' ,
type : 'boolean' ,
default : 'true' ,
description : 'Adds a close icon to the header to hide the dialog.'
2022-09-12 07:13:52 +00:00
} ,
{
2022-09-14 14:26:41 +00:00
name : 'showHeader' ,
type : 'boolean' ,
default : 'true' ,
description : 'Whether to show the header or not.'
2022-09-12 07:13:52 +00:00
} ,
{
2022-09-14 14:26:41 +00:00
name : 'baseZIndex' ,
type : 'number' ,
default : '0' ,
description : 'Base zIndex value to use in layering.'
2022-09-12 07:13:52 +00:00
} ,
{
2022-09-14 14:26:41 +00:00
name : 'autoZIndex' ,
type : 'boolean' ,
default : 'true' ,
description : 'Whether to automatically manage layering.'
2022-09-12 07:13:52 +00:00
} ,
{
2022-09-14 14:26:41 +00:00
name : 'ariaCloseLabel' ,
type : 'string' ,
default : 'close' ,
description : 'Aria label of the close icon.'
2022-09-12 07:13:52 +00:00
} ,
{
2022-09-14 14:26:41 +00:00
name : 'maximizable' ,
type : 'boolean' ,
default : 'false' ,
description : 'Whether the dialog can be displayed full screen.'
2022-09-12 07:13:52 +00:00
} ,
{
2022-09-14 14:26:41 +00:00
name : 'breakpoints' ,
type : 'object' ,
default : 'null' ,
description : 'Object literal to define widths per screen size.'
2022-09-12 07:13:52 +00:00
} ,
{
2022-09-14 14:26:41 +00:00
name : 'draggable' ,
type : 'boolean' ,
default : 'true' ,
description : 'Whether the dialog can be relocated by dragging.'
2022-09-12 07:13:52 +00:00
} ,
{
2022-09-14 14:26:41 +00:00
name : 'minX' ,
type : 'number' ,
default : '0' ,
description : 'Minimum value for the left coordinate of dialog in dragging.'
2022-09-12 07:13:52 +00:00
} ,
{
2022-09-14 14:26:41 +00:00
name : 'minY' ,
type : 'number' ,
default : '0' ,
description : 'Minimum value for the top coordinate of dialog in dragging.'
2022-09-12 07:13:52 +00:00
} ,
{
2022-09-14 14:26:41 +00:00
name : 'keepInViewport' ,
type : 'boolean' ,
default : 'true' ,
description : 'Keeps dialog in the viewport when dragging.'
2022-09-12 07:13:52 +00:00
} ,
{
2022-09-14 14:26:41 +00:00
name : 'appendTo' ,
type : 'string' ,
default : 'body' ,
2022-09-12 07:13:52 +00:00
description : '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.'
2023-04-24 09:59:20 +00:00
} ,
{
name : 'pt' ,
type : 'any' ,
default : 'null' ,
description : 'Uses to pass attributes to DOM elements inside the component.'
2022-09-12 07:13:52 +00:00
}
] ;
const DialogEvents = [
{
2022-09-14 14:26:41 +00:00
name : 'hide' ,
description : 'Callback to invoke when dialog is hidden.'
2022-09-12 07:13:52 +00:00
} ,
{
2022-09-14 14:26:41 +00:00
name : 'after-hide' ,
description : 'Callback to invoke after dialog is hidden.'
2022-09-12 07:13:52 +00:00
} ,
{
2022-09-14 14:26:41 +00:00
name : 'show' ,
description : 'Callback to invoke when dialog is showed.'
2022-09-12 07:13:52 +00:00
} ,
{
2022-09-14 14:26:41 +00:00
name : 'maximize' ,
description : 'Fired when a dialog gets maximized.' ,
2022-09-12 07:13:52 +00:00
arguments : [
{
2022-09-14 14:26:41 +00:00
name : 'event' ,
type : 'object' ,
description : 'Event Object'
2022-09-12 07:13:52 +00:00
}
]
} ,
{
2022-09-14 14:26:41 +00:00
name : 'unmaximize' ,
description : 'Fired when a dialog gets unmaximized.' ,
2022-09-12 07:13:52 +00:00
arguments : [
{
2022-09-14 14:26:41 +00:00
name : 'event' ,
type : 'object' ,
description : 'Event Object'
2022-09-12 07:13:52 +00:00
}
]
} ,
{
2022-09-14 14:26:41 +00:00
name : 'dragend' ,
description : 'Fired when a dialog drag completes.' ,
2022-09-12 07:13:52 +00:00
arguments : [
{
2022-09-14 14:26:41 +00:00
name : 'event' ,
type : 'object' ,
description : 'Event Object'
2022-09-12 07:13:52 +00:00
}
]
}
] ;
const DialogSlots = [
{
2022-09-14 14:26:41 +00:00
name : 'header' ,
2022-09-12 07:13:52 +00:00
description : "Custom content for the component's header"
} ,
{
2022-09-14 14:26:41 +00:00
name : 'footer' ,
2022-09-12 07:13:52 +00:00
description : "Custom content for the component's footer"
2023-04-11 21:00:21 +00:00
} ,
{
name : 'closeicon' ,
description : 'Custom close icon template.'
} ,
{
name : 'maximizeicon' ,
description : 'Custom maximizeicon icon template of dialog.'
2022-09-12 07:13:52 +00:00
}
] ;
module . exports = {
dialog : {
2022-09-14 14:26:41 +00:00
name : 'Dialog' ,
description : 'Dialog is a container to display content in an overlay window.' ,
2022-09-12 07:13:52 +00:00
props : DialogProps ,
events : DialogEvents ,
slots : DialogSlots
}
} ;