ember-bootstrap

import Component from '@glimmer/component'; import { type HeaderSignature } from './bs-modal/header'; import ModalDialog, { type DialogSignature, type ModalFullscreen, type ModalSize } from './bs-modal/dialog'; import { type BodySignature } from './bs-modal/body'; import { type FooterSignature } from './bs-modal/footer'; import type { ComponentLike } from '@glint/template'; export type ModalPosition = 'top' | 'center' | null; interface Signature { Args: { backdrop?: boolean; backdropClose?: boolean; backdropTransitionDuration?: number; fade?: boolean; fullscreen?: ModalFullscreen; keyboard?: boolean; onHide?: () => boolean; onHidden?: () => void; open?: boolean; onShow?: () => void; onShown?: () => void; onSubmit?: () => void; position?: ModalPosition; renderInPlace?: boolean; scrollable?: boolean; size?: ModalSize; transitionDuration?: number; dialogComponent?: ComponentLike<DialogSignature>; headerComponent?: ComponentLike<HeaderSignature>; bodyComponent?: ComponentLike<BodySignature>; footerComponent?: ComponentLike<FooterSignature>; }; Blocks: { default: [ { header: ComponentLike<HeaderSignature>; body: ComponentLike<BodySignature>; footer: ComponentLike<FooterSignature>; close: () => void; submit: () => void; } ]; }; Element: HTMLElement; } /** Component for creating [Bootstrap modals](http://getbootstrap.com/javascript/#modals) with custom markup. ### Usage ```hbs <BsModal @onSubmit={{this.submit}} as |modal|> <modal.header> <h4 class="modal-title"><i class="glyphicon glyphicon-alert"></i> Alert</h4> </modal.header> <modal.body> Are you absolutely sure you want to do that??? </modal.body> <modal.footer as |footer|> <BsButton @onClick={{modal.close}} @type="danger">Oh no, forget it!</BsButton> <BsButton @onClick={{modal.submit}} @type="success">Yeah!</BsButton> </modal.footer> </BsModal> ``` The component yields references to the following contextual components, that you can use to further customize the output: * [modal.body](Components.ModalBody.html) * [modal.header](Components.ModalHeader.html) * [modal.footer](Components.ModalFooter.html) Furthermore references to the following actions are yielded: * `close`: triggers the `onHide` action and closes the modal * `submit`: triggers the `onSubmit` action (or the submit event on a form if present in the body element) ### Further reading See the documentation of the [bs-modal-simple](Components.ModalSimple.html) component for further examples. *Note that only invoking the component in a template as shown above is considered part of its public API. Extending from it (subclassing) is generally not supported, and may break at any time.* @class Modal @namespace Components @extends Glimmer.Component @public */ export default class Modal extends Component<Signature> { document: Document; /** * @property _isOpen * @private */ _isOpen: boolean; /** * Set to false to disable fade animations. * * @property fade * @type boolean * @default true * @public */ get _fade(): boolean; /** * Visibility of the modal. Toggle to show/hide with CSS transitions. * * When the modal is closed by user interaction this property will not update by using two-way bindings in order * to follow DDAU best practices. If you want to react to such changes, subscribe to the `onHide` action * * @property open * @type boolean * @default true * @public */ open: boolean; /** * Used to apply Bootstrap's visibility classes. * * @property showModal * @type boolean * @default false * @private */ showModal: boolean; /** * Render modal markup? * * @property inDom * @type boolean * @default false * @private */ inDom: boolean; /** * @property paddingLeft * @type number|undefined * @private */ paddingLeft?: number; /** * @property paddingRight * @type number|undefined * @private */ paddingRight?: number; /** * Use a semi-transparent modal background to hide the rest of the page. * * @property backdrop * @type boolean * @default true * @public */ backdrop: boolean; /** * @property shouldShowBackdrop * @type boolean * @private */ shouldShowBackdrop: boolean; /** * Closes the modal when escape key is pressed. * * @property keyboard * @type boolean * @default true * @public */ keyboard: boolean; /** * Vertical position, either 'top' (default) or 'center' * 'center' will apply the `modal-dialog-centered` class * * @property position * @type {string} * @default 'top' * @public */ position: string; /** * [BS4 only!] Allows scrolling within the modal body * 'true' will apply the `modal-dialog-scrollable` class * * @property scrollable * @type boolean * @default false * @public */ scrollable: boolean; /** * [BS5 only!] Allows adding fullscreen mode for modals. It will * apply the `modal-fullscreen` class when using `true` and * `modal-fullscreen-[x]-down` class when using BS breakpoints * ([x] = `sm`, `md`, `lg`, `xl`, `xxl`). * * Also see the [Bootstrap docs](https://getbootstrap.com/docs/5.1/components/modal/#fullscreen-modal) * * @property fullscreen * @type {(Boolean|String)} * @default false * @public */ /** * @property dialogComponent * @type {String} * @private */ /** * @property headerComponent * @type {String} * @private */ /** * @property bodyComponent * @type {String} * @private */ /** * @property footerComponent * @type {String} * @private */ /** * Property for size styling, set to null (default), 'lg' or 'sm' * * Also see the [Bootstrap docs](http://getbootstrap.com/javascript/#modals-sizes) * * @property size * @type String * @public */ /** * If true clicking on the backdrop will close the modal. * * @property backdropClose * @type boolean * @default true * @public */ backdropClose: boolean; /** * If true component will render in place, rather than be wormholed. * * @property renderInPlace * @type boolean * @default false * @public */ renderInPlace: boolean; /** * @property _renderInPlace * @type boolean * @private */ get _renderInPlace(): boolean; /** * The duration of the fade transition * * @property transitionDuration * @type number * @default 300 * @public */ transitionDuration: number; /** * The duration of the backdrop fade transition * * @property backdropTransitionDuration * @type number * @default 150 * @public */ backdropTransitionDuration: number; /** * Use CSS transitions? * * @property usesTransition * @type boolean * @readonly * @private */ usesTransition: boolean; destinationElement: Element | null | undefined; /** * The DOM element of the `.modal` element. * * @property modalElement * @type HTMLElement * @readonly * @private */ modalElement: HTMLElement; /** * The DOM element of the backdrop element. * * @property backdropElement * @type HTMLElement * @readonly * @private */ backdropElement: HTMLElement; /** * @type boolean * @readonly * @private */ isFastBoot: boolean; /** * The action to be sent when the modal footer's submit button (if present) is pressed. * Note that if your modal body contains a form (e.g. [Components.Form](Components.Form.html)) this action will * not be triggered. Instead, a submit event will be triggered on the form itself. See the class description for an * example. * * @property onSubmit * @type function * @public */ /** * The action to be sent when the modal is closing. * This will be triggered by pressing the modal header's close button (x button) or the modal footer's close button. * Note that this will happen before the modal is hidden from the DOM, as the fade transitions will still need some * time to finish. Use the `onHidden` if you need the modal to be hidden when the action triggers. * * You can return false to prevent closing the modal automatically, and do that in your action by * setting `open` to false. * * @property onHide * @type function * @public */ /** * The action to be sent after the modal has been completely hidden (including the CSS transition). * * @property onHidden * @type function * @default null * @public */ /** * The action to be sent when the modal is opening. * This will be triggered immediately after the modal is shown (so it's safe to access the DOM for * size calculations and the like). This means that if fade=true, it will be shown in between the * backdrop animation and the fade animation. * * @property onShow * @type function * @default null * @public */ /** * The action to be sent after the modal has been completely shown (including the CSS transition). * * @property onShown * @type function * @public */ /** * @private */ bodyIsOverflowing: boolean; /** * @private */ _originalBodyPad: string; close(): void; doSubmit(): void; /** * Show the modal * * @method show * @private */ show(): Promise<void>; /** * Hide the modal * * @method hide * @private */ hide(): Promise<void>; /** * Clean up after modal is hidden and call onHidden * * @method hideModal * @private */ hideModal(): Promise<void>; /** * Show the backdrop * * @method showBackdrop * @async * @private */ showBackdrop(): Promise<void>; /** * Hide the backdrop * * @method hideBackdrop * @async * @private */ hideBackdrop(): Promise<void>; /** * @method adjustDialog * @private */ adjustDialog(): void; /** * @method resetAdjustments * @private */ resetAdjustments(): void; /** * @method checkScrollbar * @private */ checkScrollbar(): void; /** * @method setScrollbar * @private */ setScrollbar(): void; /** * @method resetScrollbar * @private */ resetScrollbar(): void; addBodyClass(): void; removeBodyClass(): void; /** * @property scrollbarWidth * @type number * @readonly * @private */ get scrollbarWidth(): number; get dialogComponent(): typeof ModalDialog | ComponentLike<DialogSignature>; get headerComponent(): ComponentLike<HeaderSignature>; get footerComponent(): ComponentLike<FooterSignature>; get bodyComponent(): ComponentLike<BodySignature>; willDestroy(...rest: Parameters<Component['willDestroy']>): void; handleVisibilityChanges(): void; } export {};