{ "name": "@bootstrap-vue/modal", "version": "1.0.0", "meta": { "title": "Modal", "description": "Modals are streamlined, but flexible dialog prompts powered by JavaScript and CSS. They support a number of use cases from user notification to completely custom content and feature a handful of helpful sub-components, sizes, variants, accessibility, and more.", "plugins": [ "BVModalPlugin" ], "directives": [ { "directive": "VBModal", "description": "Directive for opening a modal by ID", "expression": "String", "arg": { "pattern": "[a-zA-Z][a-zA-Z0-9_\\-]*", "description": "Modal ID to open", "required": false }, "modifiers": [ { "name": "{modalId}", "pattern": "[a-zA-Z][a-zA-Z0-9_\\-]*", "description": "Modal ID to open. Replace `{modalId}` with the modal's ID" } ] } ], "components": [ { "component": "BModal", "props": [ { "prop": "ariaLabel", "description": "Explicitly supply an 'aria-label' attribute for the modal. Should be set when the modal has no title. When not set 'aria-labelledby' will point to the modal's title" }, { "prop": "autoFocusButton", "version": "2.0.0", "description": "Specify which built-in button to focus once the modal opens: 'ok', 'cancel', or 'close'" }, { "prop": "bodyBgVariant", "description": "Applies one of the Bootstrap theme color variants to the body background" }, { "prop": "bodyClass", "description": "CSS class (or classes) to apply to the '.modal-body' wrapper element" }, { "prop": "bodyTextVariant", "description": "Applies one of the Bootstrap theme color variants to the body text" }, { "prop": "busy", "description": "Places the built in default footer OK and Cancel buttons in the disabled state" }, { "prop": "buttonSize", "description": "Size of the built in footer buttons: 'sm', 'md' (default), or 'lg'" }, { "prop": "cancelDisabled", "description": "Places the default footer Cancel button in the disabled state" }, { "prop": "cancelTitle", "description": "Text string to place in the default footer Cancel button" }, { "prop": "cancelTitleHtml", "description": "HTML string to place in the default footer Cancel button", "xss": true }, { "prop": "cancelVariant", "description": "Button color theme variant to apply to the default footer Cancel button" }, { "prop": "centered", "description": "Vertically centers the modal in the viewport" }, { "prop": "contentClass", "description": "CSS class (or classes) to apply to the '.modal-content' wrapper element" }, { "prop": "dialogClass", "description": "CSS class (or classes) to apply to the '.modal-dialog' wrapper element" }, { "prop": "footerBgVariant", "description": "Applies one of the Bootstrap theme color variants to the footer background" }, { "prop": "footerBorderVariant", "description": "Applies one of the Bootstrap theme color variants to the footer border" }, { "prop": "footerClass", "description": "CSS class (or classes) to apply to the '.modal-footer' wrapper element" }, { "prop": "footerTextVariant", "description": "Applies one of the Bootstrap theme color variants to the footer text" }, { "prop": "footerTag", "version": "2.22.0", "description": "Specify the HTML tag to render instead of the default tag for the footer" }, { "prop": "headerBgVariant", "description": "Applies one of the Bootstrap theme color variants to the header background" }, { "prop": "headerBorderVariant", "description": "Applies one of the Bootstrap theme color variants to the header border" }, { "prop": "headerClass", "description": "CSS class (or classes) to apply to the '.modal-header' wrapper element" }, { "prop": "headerCloseContent", "version": "2.3.0", "description": "Content of the header close button" }, { "prop": "headerCloseLabel", "description": "Value of the 'aria-label' on the header close button" }, { "prop": "headerCloseVariant", "description": "Text theme color variant to apply to the header close button" }, { "prop": "headerTextVariant", "description": "Applies one of the Bootstrap theme color variants to the header text" }, { "prop": "headerTag", "version": "2.22.0", "description": "Specify the HTML tag to render instead of the default tag for the footer" }, { "prop": "hideBackdrop", "description": "Disables rendering of the modal backdrop" }, { "prop": "hideFooter", "description": "Disables rendering of the modal footer" }, { "prop": "hideHeader", "description": "Disables rendering of the modal header" }, { "prop": "hideHeaderClose", "description": "Disables rendering of the modal header's close button" }, { "prop": "ignoreEnforceFocusSelector", "version": "2.4.0", "description": "Ignore certain elements from the enforce focus routine, specified by css selector(s)" }, { "prop": "lazy", "description": "When the modal has the `static` prop set, renders the modal content lazily" }, { "prop": "modalClass", "description": "CSS class (or classes) to apply to the '.modal' wrapper element" }, { "prop": "noCloseOnBackdrop", "description": "Disables the ability to close the modal by clicking the backdrop" }, { "prop": "noCloseOnEsc", "description": "Disables the ability to close the modal by pressing ESC" }, { "prop": "noEnforceFocus", "description": "Disables the enforce focus routine which maintains focus inside the modal" }, { "prop": "noStacking", "description": "Prevents other modals from stacking over this one" }, { "prop": "okDisabled", "description": "Places the default footer OK button in the disabled state" }, { "prop": "okOnly", "description": "Disables rendering of the default footer Cancel button" }, { "prop": "okTitle", "description": "Text string to place in the default footer OK button" }, { "prop": "okTitleHtml", "description": "HTML string to place in the default footer OK button", "xss": true }, { "prop": "okVariant", "description": "Button color theme variant to apply to the default footer OK button" }, { "prop": "returnFocus", "description": "HTML Element reference, CSS selector, or component reference to return focus to when the modal closes. When not set, will return focus to the element that last had focus before the modal opened" }, { "prop": "scrollable", "description": "Enables scrolling of the modal body" }, { "prop": "size", "description": "Set the size of the modal's width. 'sm', 'md' (default), 'lg', or 'xl'" }, { "prop": "titleSrOnly", "description": "Wraps the title in an '.sr-only' wrapper" }, { "prop": "titleTag", "description": "Specify the HTML tag to render instead of the default tag for the title" }, { "prop": "visible", "description": "The current visibility state of the modal" } ], "events": [ { "event": "bv::modal::hidden", "description": "Emitted on `$root` when modal is hidden", "args": [ { "arg": "bvModalEvent", "type": "BvModalEvent", "description": "BvModalEvent object" }, { "arg": "modalId", "type": "String", "description": "Modal ID" } ] }, { "event": "bv::modal::hide", "description": "Emitted on `$root` when modal is about to be hidden. Cancelable (as long as modal wasn't forcibly hidden)", "args": [ { "arg": "bvModalEvent", "type": "BvModalEvent", "description": "BvModalEvent object. Call `bvModalEvent.preventDefault()` to cancel hide" }, { "arg": "modalId", "type": "String", "description": "Modal ID" } ] }, { "event": "bv::modal::show", "description": "Emitted on `$root` when modal is about to be shown. Cancelable", "args": [ { "arg": "bvModalEvent", "type": "BvModalEvent", "description": "BvModalEvent object. Call `bvModalEvent.preventDefault()` to cancel show" }, { "arg": "modalId", "type": "String", "description": "Modal ID" } ] }, { "event": "bv::modal::shown", "description": "Emitted on `$root` when modal is shown", "args": [ { "arg": "bvModalEvent", "type": "BvModalEvent", "description": "BvModalEvent object" }, { "arg": "modalId", "type": "String", "description": "Modal ID" } ] }, { "event": "cancel", "description": "When default CANCEL button pressed, just before modal has hidden. Cancelable", "args": [ { "arg": "bvModalEvent", "type": "BvModalEvent", "description": "BvModalEvent object. Call `bvModalEvent.preventDefault()` to cancel hide" } ] }, { "event": "change", "description": "New modal visibility state. Used to update the v-model", "args": [ { "arg": "isVisible", "type": "Boolean", "description": "The visibility state of the modal. `true` if the modal is visible and `false` if not visible" } ] }, { "event": "close", "description": "When default header close button pressed, just before modal has hidden. Cancelable", "args": [ { "arg": "bvModalEvent", "type": "BvModalEvent", "description": "BvModalEvent object. Call `bvModalEvent.preventDefault()` to cancel hide" } ] }, { "event": "hidden", "description": "Always emits after modal is hidden", "args": [ { "arg": "bvModalEvent", "type": "BvModalEvent", "description": "BvModalEvent object" } ] }, { "event": "hide", "description": "Always emits just before modal has hidden. Cancelable (as long as modal wasn't forcibly hidden)", "args": [ { "arg": "bvModalEvent", "type": "BvModalEvent", "description": "BvModalEvent object. Inspect `bvModalEvent.trigger` to find out what action triggered the hide. Call `bvModalEvent.preventDefault()` to cancel hide" } ] }, { "event": "ok", "description": "When default OK button pressed, just before modal has hidden. Cancelable", "args": [ { "arg": "bvModalEvent", "type": "BvModalEvent", "description": "BvModalEvent object. Call `bvModalEvent.preventDefault()` to cancel hide" } ] }, { "event": "show", "description": "Always emits just before modal is shown. Cancelable", "args": [ { "arg": "bvModalEvent", "type": "BvModalEvent", "description": "BvModalEvent object. Call `bvModalEvent.preventDefault()` to cancel show" } ] }, { "event": "shown", "description": "Always emits when modal is shown", "args": [ { "arg": "bvModalEvent", "type": "BvModalEvent", "description": "BvModalEvent object" } ] } ], "rootEventListeners": [ { "event": "bv::hide::modal", "description": "Hide modal with specified ID when this event is emitted on `root`", "args": [ { "arg": "modalId", "type": "String", "description": "ID of modal to hide" } ] }, { "event": "bv::show::modal", "description": "Show modal with specified ID when this event is emitted on `$root`", "args": [ { "arg": "modalId", "type": "String", "description": "Modal ID to show" }, { "arg": "elIDtoFocusOnClose", "type": [ "String", "HTMLElement" ], "description": "Specify the element reference, or CSS selector, to return focus to once the modal is closed (optional)" } ] }, { "event": "bv::toggle::modal", "description": "Toggle a modal's visibility given its ID", "args": [ { "arg": "modalId", "type": "String", "description": "ID of modal to toggle visibility" }, { "arg": "elIDtoFocusOnClose", "type": [ "String", "HTMLElement" ], "description": "Specify the element reference, or CSS selector, to return focus to once the modal is closed (optional)" } ] } ], "slots": [ { "name": "default", "description": "Content of modal body. Optionally scoped", "scope": [ { "prop": "cancel", "type": "Function", "description": "Closes the modal and fires the 'cancel' and 'hide' events, with `bvModalEvent.trigger = 'cancel'`" }, { "prop": "close", "type": "Function", "description": "Closes the modal and fires the close and hide events, with `bvModalEvent.trigger = 'headerclose'`" }, { "prop": "hide", "type": "Function", "description": "Accepts one argument `trigger`. Closes the modal and fires the 'hide' event, with the `bvModalEvent.trigger = trigger` (`trigger` is optional)" }, { "prop": "ok", "type": "Function", "description": "Closes the modal and fires the 'ok' and 'hide' events, with `bvModalEvent.trigger = 'ok'`" }, { "prop": "visible", "type": "Boolean", "description": "The visibility state of the modal. `true` if the modal is visible and `false` if not visible" } ] }, { "name": "modal-backdrop", "description": "Modal Backdrop content" }, { "name": "modal-cancel", "description": "Modal CANCEL button content" }, { "name": "modal-footer", "description": "Modal footer content. Also removes default OK and Cancel buttons. Optionally scoped", "scope": [ { "prop": "cancel", "type": "Function", "description": "Closes the modal and fires the 'cancel' and 'hide' events, with `vModalEvent.trigger = 'cancel'`" }, { "prop": "close", "type": "Function", "description": "Closes the modal and fires the close and hide events, with `vModalEvent.trigger = 'headerclose'`" }, { "prop": "hide", "type": "Function", "description": "Accepts one argument `trigger`. Closes the modal and fires the 'hide' event, with the `bvModalEvent.trigger = trigger` (`trigger` is optional)" }, { "prop": "ok", "type": "Function", "description": "Closes the modal and fires the 'ok' and 'hide' events, with `bvModalEvent.trigger = 'ok'`" }, { "prop": "visible", "type": "Boolean", "description": "The visibility state of the modal. `true` if the modal is visible and `false` if not visible" } ] }, { "name": "modal-header", "description": "Entire modal header container contents. Also removes the top right X close button. Optionally scoped", "scope": [ { "prop": "cancel", "type": "Function", "description": "Closes the modal and fires the 'cancel' and 'hide' events, with `bvModalEvent.trigger = 'cancel'`" }, { "prop": "close", "type": "Function", "description": "Closes the modal and fires the close and hide events, with `bvModalEvent.trigger = 'headerclose'`" }, { "prop": "hide", "type": "Function", "description": "Accepts one argument `trigger`. Closes the modal and fires the 'hide' event, with the `bvModalEvent.trigger = trigger` (`trigger` is optional)" }, { "prop": "ok", "type": "Function", "description": "Closes the modal and fires the 'ok' and 'hide' events, with `bvModalEvent.trigger = 'ok'`" }, { "prop": "visible", "type": "Boolean", "description": "The visibility state of the modal. `true` if the modal is visible and `false` if not visible" } ] }, { "name": "modal-header-close", "description": "Content of Modal header close button. If `modal-header` slot is used, this slot will not be shown" }, { "name": "modal-ok", "description": "Modal OK button content" }, { "name": "modal-title", "description": "Modal title. If `modal-header` slot is used, this slot will not be shown. Optionally scoped", "scope": [ { "prop": "cancel", "type": "Function", "description": "Closes the modal and fires the 'cancel' and 'hide' events, with `vModalEvent.trigger = 'cancel'`" }, { "prop": "close", "type": "Function", "description": "Closes the modal and fires the close and hide events, with `vModalEvent.trigger = 'headerclose'`" }, { "prop": "hide", "type": "Function", "description": "Accepts one argument `trigger`. Closes the modal and fires the 'hide' event, with the `bvModalEvent.trigger = trigger` (`trigger` is optional)" }, { "prop": "ok", "type": "Function", "description": "Closes the modal and fires the 'ok' and 'hide' events, with `bvModalEvent.trigger = 'ok'`" }, { "prop": "visible", "type": "Boolean", "description": "The visibility state of the modal. `true` if the modal is visible and `false` if not visible" } ] } ] } ] } }