🏷️ Modal component interface fileupdated
This commit is contained in:
parent
24ea6cb51b
commit
0fd7e1ed1f
|
@ -1,5 +1,7 @@
|
||||||
|
import type { HTMLAttributes } from 'vue';
|
||||||
import type IVButton from '../button/IVButton.type';
|
import type IVButton from '../button/IVButton.type';
|
||||||
import type { DialogBreakpoints } from 'primevue/dialog';
|
import { type DialogBreakpoints } from 'primevue';
|
||||||
|
import type { HintedString } from '@primevue/core';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Interface representing the properties for a Modal component.
|
* Interface representing the properties for a Modal component.
|
||||||
|
@ -57,10 +59,144 @@ export interface IModal {
|
||||||
closeButtonTitle?: string
|
closeButtonTitle?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Defines valid properties in Dialog component.
|
||||||
|
*/
|
||||||
|
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.
|
||||||
|
* @defaultValue false
|
||||||
|
*/
|
||||||
|
visible?: boolean | undefined;
|
||||||
|
/**
|
||||||
|
* Defines if background should be blocked when dialog is displayed.
|
||||||
|
* @defaultValue false
|
||||||
|
*/
|
||||||
|
modal?: boolean | undefined;
|
||||||
|
/**
|
||||||
|
* Style of the content section.
|
||||||
|
*/
|
||||||
|
contentStyle?: unknown;
|
||||||
|
/**
|
||||||
|
* Style class of the content section.
|
||||||
|
*/
|
||||||
|
contentClass?: unknown;
|
||||||
|
/**
|
||||||
|
* Used to pass all properties of the HTMLDivElement to the overlay Dialog inside the component.
|
||||||
|
*/
|
||||||
|
contentProps?: HTMLAttributes | undefined;
|
||||||
|
/**
|
||||||
|
* Adds a close icon to the header to hide the dialog.
|
||||||
|
* @defaultValue true
|
||||||
|
*/
|
||||||
|
closable?: boolean | undefined;
|
||||||
|
/**
|
||||||
|
* Specifies if clicking the modal background should hide the dialog.
|
||||||
|
* @defaultValue false
|
||||||
|
*/
|
||||||
|
dismissableMask?: boolean | undefined;
|
||||||
|
/**
|
||||||
|
* Specifies if pressing escape key should hide the dialog.
|
||||||
|
* @defaultValue true
|
||||||
|
*/
|
||||||
|
closeOnEscape?: boolean | undefined;
|
||||||
|
/**
|
||||||
|
* Whether to show the header or not.
|
||||||
|
* @defaultValue true
|
||||||
|
*/
|
||||||
|
showHeader?: boolean | undefined;
|
||||||
|
/**
|
||||||
|
* Whether background scroll should be blocked when dialog is visible.
|
||||||
|
* @defaultValue false
|
||||||
|
*/
|
||||||
|
blockScroll?: boolean | undefined;
|
||||||
|
/**
|
||||||
|
* Base zIndex value to use in layering.
|
||||||
|
* @defaultValue 0
|
||||||
|
*/
|
||||||
|
baseZIndex?: number | undefined;
|
||||||
|
/**
|
||||||
|
* Whether to automatically manage layering.
|
||||||
|
* @defaultValue true
|
||||||
|
*/
|
||||||
|
autoZIndex?: boolean | undefined;
|
||||||
|
/**
|
||||||
|
* Position of the dialog.
|
||||||
|
* @defaultValue center
|
||||||
|
*/
|
||||||
|
position?: HintedString<'center' | 'top' | 'bottom' | 'left' | 'right' | 'topleft' | 'topright' | 'bottomleft' | 'bottomright'> | undefined;
|
||||||
|
/**
|
||||||
|
* Whether the dialog can be displayed full screen.
|
||||||
|
* @defaultValue false
|
||||||
|
*/
|
||||||
|
maximizable?: boolean | undefined;
|
||||||
|
/**
|
||||||
|
* Object literal to define widths per screen size.
|
||||||
|
*/
|
||||||
|
breakpoints?: DialogBreakpoints;
|
||||||
|
/**
|
||||||
|
* Enables dragging to change the position using header.
|
||||||
|
* @defaultValue true
|
||||||
|
*/
|
||||||
|
draggable?: boolean | undefined;
|
||||||
|
/**
|
||||||
|
* Keeps dialog in the viewport when dragging.
|
||||||
|
* @defaultValue true
|
||||||
|
*/
|
||||||
|
keepInViewport?: boolean | undefined;
|
||||||
|
/**
|
||||||
|
* Minimum value for the left coordinate of dialog in dragging.
|
||||||
|
* @defaultValue 0.
|
||||||
|
*/
|
||||||
|
minX?: number | undefined;
|
||||||
|
/**
|
||||||
|
* Minimum value for the top coordinate of dialog in dragging.
|
||||||
|
* @defaultValue 0
|
||||||
|
*/
|
||||||
|
minY?: number | undefined;
|
||||||
|
/**
|
||||||
|
* A valid query selector or an HTMLElement to specify where the dialog gets attached.
|
||||||
|
* @defaultValue body
|
||||||
|
*/
|
||||||
|
appendTo?: HintedString<'body' | 'self'> | undefined | HTMLElement;
|
||||||
|
/**
|
||||||
|
* Icon to display in the dialog close button.
|
||||||
|
*/
|
||||||
|
closeIcon?: string | undefined;
|
||||||
|
/**
|
||||||
|
* Icon to display in the dialog maximize button when dialog is not maximized.
|
||||||
|
*/
|
||||||
|
maximizeIcon?: string | undefined;
|
||||||
|
/**
|
||||||
|
* Icon to display in the dialog maximize button when dialog is minimized.
|
||||||
|
*/
|
||||||
|
minimizeIcon?: string | undefined;
|
||||||
|
/**
|
||||||
|
* Used to pass all properties of the ButtonProps to the Button component.
|
||||||
|
* @type {ButtonProps}
|
||||||
|
* @defaultValue { severity: 'secondary', rounded: true, text: true }
|
||||||
|
*/
|
||||||
|
closeButtonProps?: object | undefined;
|
||||||
|
/**
|
||||||
|
* Used to pass all properties of the ButtonProps to the Button component.
|
||||||
|
* @type {ButtonProps}
|
||||||
|
* @defaultValue { severity: 'secondary', rounded: true, text: true }
|
||||||
|
*/
|
||||||
|
maximizeButtonProps?: object | undefined;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Extended Modal interface that includes configuration for responsive breakpoints.
|
* Extended Modal interface that includes configuration for responsive breakpoints.
|
||||||
*/
|
*/
|
||||||
export default interface IVModal extends IModal {
|
export default interface IVModal extends Partial<Omit<IModal, 'opened'>>, Partial<DialogProps> {
|
||||||
/**
|
/**
|
||||||
* Breakpoints used to control responsive modal behavior.
|
* Breakpoints used to control responsive modal behavior.
|
||||||
* Compatible with PrimeVue Dialog breakpoints format.
|
* Compatible with PrimeVue Dialog breakpoints format.
|
||||||
|
|
Loading…
Reference in New Issue
Block a user