package.json

{
  "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": "visible",
            "description": "The current visibility state of the modal"
          },
          {
            "prop": "modalClass",
            "description": "CSS class (or classes) to apply to the '.modal' wrapper element"
          },
          {
            "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": "bodyClass",
            "description": "CSS class (or classes) to apply to the '.modal-body' wrapper element"
          },
          {
            "prop": "headerClass",
            "description": "CSS class (or classes) to apply to the '.modal-header' wrapper element"
          },
          {
            "prop": "footerClass",
            "description": "CSS class (or classes) to apply to the '.modal-footer' wrapper element"
          },
          {
            "prop": "size",
            "settings": true,
            "description": "Set the size of the modal's width. 'sm', 'md' (default), 'lg', or 'xl'"
          },
          {
            "prop": "centered",
            "description": "Vertically centers the modal in the viewport"
          },
          {
            "prop": "scrollable",
            "description": "Enables scrolling of the modal body"
          },
          {
            "prop": "titleTag",
            "settings": true,
            "description": "Specify the HTML tag to render instead of the default tag for the title"
          },
          {
            "prop": "headerBgVariant",
            "settings": true,
            "description": "Applies one of the Bootstrap theme color variants to the header background"
          },
          {
            "prop": "headerBorderVariant",
            "settings": true,
            "description": "Applies one of the Bootstrap theme color variants to the header border"
          },
          {
            "prop": "headerTextVariant",
            "settings": true,
            "description": "Applies one of the Bootstrap theme color variants to the header text"
          },
          {
            "prop": "bodyBgVariant",
            "settings": true,
            "description": "Applies one of the Bootstrap theme color variants to the body background"
          },
          {
            "prop": "bodyTextVariant",
            "settings": true,
            "description": "Applies one of the Bootstrap theme color variants to the body text"
          },
          {
            "prop": "footerBgVariant",
            "settings": true,
            "description": "Applies one of the Bootstrap theme color variants to the footer background"
          },
          {
            "prop": "footerBorderVariant",
            "settings": true,
            "description": "Applies one of the Bootstrap theme color variants to the footer border"
          },
          {
            "prop": "footerTextVariant",
            "settings": true,
            "description": "Applies one of the Bootstrap theme color variants to the footer text"
          },
          {
            "prop": "headerCloseVariant",
            "settings": true,
            "description": "Text theme color variant to apply to the header close button"
          },
          {
            "prop": "lazy",
            "description": "When the modal has the `static` prop set, renders the modal content lazily"
          },
          {
            "prop": "buttonSize",
            "description": "Size of the built in footer buttons: 'sm', 'md' (default), or 'lg'"
          },
          {
            "prop": "noStacking",
            "description": "Prevents other modals from stacking over this one"
          },
          {
            "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": "ignoreEnforceFocusSelector",
            "version": "2.4.0",
            "description": "Ignore certain elements from the enforce focus routine, specified by css selector(s)"
          },
          {
            "prop": "titleSrOnly",
            "description": "Wraps the title in an '.sr-only' wrapper"
          },
          {
            "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": "hideHeader",
            "description": "Disables rendering of the modal header"
          },
          {
            "prop": "hideHeaderClose",
            "description": "Disables rendering of the modal header's close button"
          },
          {
            "prop": "hideFooter",
            "description": "Disables rendering of the modal footer"
          },
          {
            "prop": "hideBackdrop",
            "description": "Disables rendering of the modal backdrop"
          },
          {
            "prop": "okOnly",
            "description": "Disables rendering of the default footer Cancel button"
          },
          {
            "prop": "okDisabled",
            "description": "Places the default footer OK button in the disabled state"
          },
          {
            "prop": "cancelDisabled",
            "description": "Places the default footer Cancel button in the disabled state"
          },
          {
            "prop": "headerCloseContent",
            "settings": true,
            "version": "2.3.0",
            "description": "Content of the header close button"
          },
          {
            "prop": "headerCloseLabel",
            "settings": true,
            "description": "Value of the 'aria-label' on the header close 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": "cancelTitle",
            "settings": true,
            "description": "Text string to place in the default footer Cancel button"
          },
          {
            "prop": "cancelTitleHtml",
            "description": "HTML string to place in the default footer Cancel button. Use with caution"
          },
          {
            "prop": "okTitle",
            "settings": true,
            "description": "Text string to place in the default footer OK button"
          },
          {
            "prop": "okTitleHtml",
            "description": "HTML string to place in the default footer OK button. Use with caution"
          },
          {
            "prop": "cancelVariant",
            "settings": true,
            "description": "Button color theme variant to apply to the default footer Cancel button"
          },
          {
            "prop": "okVariant",
            "settings": true,
            "description": "Button color theme variant to apply to the default footer OK button"
          },
          {
            "prop": "busy",
            "description": "Places the built in default footer OK and Cancel buttons in the disabled state"
          },
          {
            "prop": "autoFocusButton",
            "version": "2.0.0",
            "description": "Specify which built-in button to focus once the modal opens: 'ok', 'cancel', or 'close'"
          }
        ],
        "events": [
          {
            "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": "show",
            "description": "Always emits just before modal is shown. Cancelable",
            "args": [
              {
                "arg": "bvModalEvt",
                "type": "BvModalEvent",
                "description": "BvModalEvent object. Call `bvModalEvt.preventDefault()` to cancel show"
              }
            ]
          },
          {
            "event": "shown",
            "description": "Always emits when modal is shown",
            "args": [
              {
                "arg": "bvModalEvt",
                "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": "bvModalEvt",
                "type": "BvModalEvent",
                "description": "BvModalEvent object. Inspect `bvModalEvt.trigger` to find out what action triggered the hide. Call `bvModalEvt.preventDefault()` to cancel hide"
              }
            ]
          },
          {
            "event": "hidden",
            "description": "Always emits after modal is hidden",
            "args": [
              {
                "arg": "bvModalEvt",
                "type": "BvModalEvent",
                "description": "BvModalEvent object"
              }
            ]
          },
          {
            "event": "ok",
            "description": "When default OK button pressed, just before modal has hidden. Cancelable",
            "args": [
              {
                "arg": "bvModalEvt",
                "type": "BvModalEvent",
                "description": "BvModalEvent object. Call `bvModalEvt.preventDefault()` to cancel hide"
              }
            ]
          },
          {
            "event": "cancel",
            "description": "When default CANCEL button pressed, just before modal has hidden. Cancelable",
            "args": [
              {
                "arg": "bvModalEvt",
                "type": "BvModalEvent",
                "description": "BvModalEvent object. Call `bvModalEvt.preventDefault()` to cancel hide"
              }
            ]
          },
          {
            "event": "close",
            "description": "When default header close button pressed, just before modal has hidden. Cancelable",
            "args": [
              {
                "arg": "bvModalEvt",
                "type": "BvModalEvent",
                "description": "BvModalEvent object. Call `bvModalEvt.preventDefault()` to cancel hide"
              }
            ]
          },
          {
            "event": "bv::modal::show",
            "description": "Emitted on `$root` when modal is about to be shown. Cancelable",
            "args": [
              {
                "arg": "bvModalEvt",
                "type": "BvModalEvent",
                "description": "BvModalEvent object. Call `bvModalEvt.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": "bvModalEvt",
                "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": "bvModalEvt",
                "type": "BvModalEvent",
                "description": "BvModalEvent object. Call `bvModalEvt.preventDefault()` to cancel hide"
              },
              {
                "arg": "modalId",
                "type": "String",
                "description": "Modal ID"
              }
            ]
          },
          {
            "event": "bv::modal::hidden",
            "description": "Emitted on `$root` when modal is hidden",
            "args": [
              {
                "arg": "bvModalEvt",
                "type": "BvModalEvent",
                "description": "BvModalEvent object"
              },
              {
                "arg": "modalId",
                "type": "String",
                "description": "modal ID"
              }
            ]
          }
        ],
        "rootEventListeners": [
          {
            "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::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::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": "modal-header",
            "description": "Entire modal header container contents. Also removes the top right X close button. Optionally scoped",
            "scope": [
              {
                "prop": "visible",
                "type": "Boolean",
                "description": "The visibility state of the modal. `true` if the modal is visible and `false` if not visible"
              },
              {
                "prop": "ok",
                "type": "Function",
                "description": "Closes the modal and fires the 'ok' and 'hide' events, with `bvModalEvent.trigger = 'ok'`"
              },
              {
                "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)"
              }
            ]
          },
          {
            "name": "modal-title",
            "description": "Modal title. If `modal-header` slot is used, this slot will not be shown. Optionally scoped",
            "scope": [
              {
                "prop": "visible",
                "type": "Boolean",
                "description": "The visibility state of the modal. `true` if the modal is visible and `false` if not visible"
              },
              {
                "prop": "ok",
                "type": "Function",
                "description": "Closes the modal and fires the 'ok' and 'hide' events, with `bvModalEvent.trigger = 'ok'`"
              },
              {
                "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)"
              }
            ]
          },
          {
            "name": "modal-footer",
            "description": "Modal footer content. Also removes default OK and Cancel buttons. Optionally scoped",
            "scope": [
              {
                "prop": "visible",
                "type": "Boolean",
                "description": "The visibility state of the modal. `true` if the modal is visible and `false` if not visible"
              },
              {
                "prop": "ok",
                "type": "Function",
                "description": "Closes the modal and fires the 'ok' and 'hide' events, with `bvModalEvent.trigger = 'ok'`"
              },
              {
                "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)"
              }
            ]
          },
          {
            "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-cancel",
            "description": "Modal CANCEL button content"
          },
          {
            "name": "modal-backdrop",
            "description": "Modal Backdrop content"
          },
          {
            "name": "default",
            "description": "Content of modal body. Optionally scoped",
            "scope": [
              {
                "prop": "visible",
                "type": "Boolean",
                "description": "The visibility state of the modal. `true` if the modal is visible and `false` if not visible"
              },
              {
                "prop": "ok",
                "type": "Function",
                "description": "Closes the modal and fires the 'ok' and 'hide' events, with `bvModalEvent.trigger = 'ok'`"
              },
              {
                "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)"
              }
            ]
          }
        ]
      }
    ]
  }
}