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