@oruga-ui/oruga-next

import type { Component } from "vue"; import type { ComponentClass, ComponentEmits, Numberish } from "@/types"; import type { ComponentProps } from "vue-component-type-helpers"; export type DialogProps<C extends Component = Component> = { /** Override existing theme classes completely */ override?: boolean; /** Whether dialog is active or not, use v-model:active to make it two-way binding */ active?: boolean; /** Custom animation (transition name) */ animation?: string; /** Show an backdrop overlay background; make it a modal dialog */ backdrop?: boolean; /** * This enables the `alertdialog` role, allowing assistive technologies and browsers to distinguish alert dialogs from other dialogs. * Alert dialogs interrupt the user's workflow to communicate an important messages and acquire an explicit response. * Examples include error messages that require confirmation and other action confirmation prompts. */ alert?: boolean; /** Display dialog as full screen */ fullscreen?: boolean; /** Max width of the dialog */ maxWidth?: Numberish; /** Max height of the dialog */ maxHeight?: Numberish; /** Adds close button to the header to hide the dialog */ closeable?: boolean; /** Close the dialog when clicked outside of the panel */ closeOnBackdrop?: boolean; /** Close the dialog when pressing escape key */ closeOnEscape?: boolean; /** Close the dialog when the confirm button is preset */ closeOnConfirm?: boolean; /** Whether background scrollbar should be blocked/removed when dialog is visible */ blockScroll?: boolean; /** Text alignment in its entirely */ textPosition?: "center" | "left" | "right"; /** Dialog header title, unnecessary when title slot is used */ title?: string; /** Dialog header subtitle, unnecessary when subtitle slot is used */ subtitle?: string; /** Dialog body content, unnecessary when content slot is used */ content?: string; /** Dialog image src, unnecessary when image slot is used */ imageSrc?: string; /** Dialog image alt, unnecessary when image slot is used */ imageAlt?: string; /** Show a loading spinner in the dialog */ loading?: boolean; /** Show label beside the loading icon */ loadingLabel?: string; /** * Icon pack to use for the close icon * @values mdi, fa, fas and any other custom icon pack */ iconPack?: string; /** Close icon name */ closeIcon?: string; /** Close icon size */ closeIconSize?: string; /** Accessibility label for the close button */ ariaCloseLabel?: string; /** * Component to be injected. * Close the component by emitting a 'close' event — `$emit('close')` */ component?: C; /** Props to be binded to the injected component */ props?: ComponentProps<C>; /** Events to be binded to the injected component */ events?: ComponentEmits<C>; /** Render a confirm button and set text as label */ confirmButton?: string; /** Disable the confirm button */ disableConfirm?: boolean; /** * Color variant of the confirm button * @values primary, info, success, warning, danger, and any other custom color */ confirmVariant?: string; /** Render a cancel button and set text text as label */ cancelButton?: string; /** Disable the cancel button */ disableCancel?: boolean; /** * Color variant of the cancel button * @values primary, info, success, warning, danger, and any other custom color */ cancelVariant?: string; /** Position of the footer buttons */ buttonPosition?: "center" | "left" | "right"; /** Accessibility aria-label to be passed to the div root element */ ariaLabel?: string; /** Accessibility aria-describedby to be passed to the div root element - if a title is set, it is linked to the title */ ariaDescribedby?: string; /** Mobile breakpoint as `max-width` value */ mobileBreakpoint?: string; /** * Append the component to another part of the DOM. * Set `true` to append the component to the body. * In addition, any CSS selector string or an actual DOM node can be used. */ teleport?: boolean | string | object; /** * DOM container element for programmatic usage. * @ignore internal property */ container?: HTMLElement; } & DialogClasses; // class props (will not be displayed in the docs) export type DialogClasses = Partial<{ /** Class of the root element */ rootClass: ComponentClass; /** Class of the root element when on mobile */ mobileClass: ComponentClass; /** Class of the root element when active */ activeClass: ComponentClass; /** Class of the root element when fullscreen */ fullscreenClass: ComponentClass; /** Class of the root element when teleported */ teleportClass: ComponentClass; /** Class of the root element with text-position */ textPositionClass: ComponentClass; /** Class of the backdrop overlay element */ backdropClass: ComponentClass; /** Class of the wrapper element */ wrapperClass: ComponentClass; /** Class of the header element */ headerClass: ComponentClass; /** Class of the header title element */ titleClass: ComponentClass; /** Class of the header subtitle element */ subtitleClass: ComponentClass; /** Class of the header close element */ closeClass: ComponentClass; /** Class of the image figure element */ figureClass: ComponentClass; /** Class of the image element */ imageClass: ComponentClass; /** Class of the body element */ bodyClass: ComponentClass; /** Class of the body content element */ contentClass: ComponentClass; /** Class of the footer element */ footerClass: ComponentClass; /** Class of the footer element with position */ footerPositionClass: ComponentClass; /** Class of the confirm button element */ confirmButtunClass: ComponentClass; /** Class of the cancel button element */ cancelButtonClass: ComponentClass; /** Class of the body when modal is open and scroll is clipped */ scrollClipClass: ComponentClass; /** Class of the body when modal is open and scroll is keeped */ scrollKeepClass: ComponentClass; }>;