@gitlab/ui 132.0.1 → 132.0.2

package/dist/vendor/bootstrap-vue/src/components/modal/modal.js

@@ -0,0 +1,1059 @@
+import { extend, COMPONENT_UID_KEY } from '../../vue';
+import { NAME_MODAL } from '../../constants/components';
+import { IS_BROWSER } from '../../constants/env';
+import { EVENT_NAME_CHANGE, EVENT_NAME_SHOW, EVENT_NAME_HIDE, EVENT_NAME_TOGGLE, EVENT_NAME_OK, EVENT_NAME_CANCEL, EVENT_NAME_CLOSE, EVENT_NAME_HIDDEN, EVENT_NAME_SHOWN, EVENT_OPTIONS_NO_CAPTURE } from '../../constants/events';
+import { CODE_ESC } from '../../constants/key-codes';
+import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING, PROP_TYPE_ARRAY, PROP_TYPE_OBJECT } from '../../constants/props';
+import { HTMLElement } from '../../constants/safe-types';
+import { SLOT_NAME_MODAL_TITLE, SLOT_NAME_MODAL_HEADER, SLOT_NAME_MODAL_HEADER_CLOSE, SLOT_NAME_DEFAULT, SLOT_NAME_MODAL_FOOTER, SLOT_NAME_MODAL_CANCEL, SLOT_NAME_MODAL_OK, SLOT_NAME_MODAL_BACKDROP } from '../../constants/slots';
+import { concat } from '../../utils/array';
+import { getActiveElement, requestAF, contains, closest, getTabables, attemptFocus, select } from '../../utils/dom';
+import { getRootActionEventName, getRootEventName, eventOn, eventOff } from '../../utils/events';
+import { htmlOrText } from '../../utils/html';
+import { identity } from '../../utils/identity';
+import { isUndefinedOrNull, isString } from '../../utils/inspect';
+import { makeModelMixin } from '../../utils/model';
+import { sortKeys } from '../../utils/object';
+import { observeDom } from '../../utils/observe-dom';
+import { attrsMixin } from '../../mixins/attrs';
+import { props as props$1, idMixin } from '../../mixins/id';
+import { listenOnDocumentMixin } from '../../mixins/listen-on-document';
+import { listenOnRootMixin } from '../../mixins/listen-on-root';
+import { listenOnWindowMixin } from '../../mixins/listen-on-window';
+import { normalizeSlotMixin } from '../../mixins/normalize-slot';
+import { scopedStyleMixin } from '../../mixins/scoped-style';
+import { BButton } from '../button/button';
+import { BButtonClose } from '../button/button-close';
+import { BVTransition } from '../transition/bv-transition';
+import { BVTransporter } from '../transporter/transporter';
+import { BvModalEvent } from './helpers/bv-modal-event.class';
+import { modalManager } from './helpers/modal-manager';
+
+// --- Constants ---
+
+const {
+  mixin: modelMixin,
+  props: modelProps,
+  prop: MODEL_PROP_NAME,
+  event: MODEL_EVENT_NAME
+} = makeModelMixin('visible', {
+  type: PROP_TYPE_BOOLEAN,
+  defaultValue: false,
+  event: EVENT_NAME_CHANGE
+});
+const TRIGGER_BACKDROP = 'backdrop';
+const TRIGGER_ESC = 'esc';
+const TRIGGER_FORCE = 'FORCE';
+const TRIGGER_TOGGLE = 'toggle';
+const BUTTON_CANCEL = 'cancel';
+// TODO: This should be renamed to 'close'
+const BUTTON_CLOSE = 'headerclose';
+const BUTTON_OK = 'ok';
+const BUTTONS = [BUTTON_CANCEL, BUTTON_CLOSE, BUTTON_OK];
+
+// `ObserveDom` config to detect changes in modal content
+// so that we can adjust the modal padding if needed
+const OBSERVER_CONFIG = {
+  subtree: true,
+  childList: true,
+  characterData: true,
+  attributes: true,
+  attributeFilter: ['style', 'class']
+};
+
+// --- Props ---
+
+const props = sortKeys({
+  ...props$1,
+  ...modelProps,
+  ariaLabel: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  },
+  autoFocusButton: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: null,
+    validator: value => {
+      return isUndefinedOrNull(value) || BUTTONS.includes(value);
+    }
+  },
+  bodyClass: {
+    type: [PROP_TYPE_ARRAY, PROP_TYPE_OBJECT, PROP_TYPE_STRING],
+    required: false,
+    default: undefined
+  },
+  busy: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  buttonSize: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  },
+  cancelDisabled: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  cancelTitle: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: 'Cancel'
+  },
+  cancelTitleHtml: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  },
+  cancelVariant: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: 'secondary'
+  },
+  centered: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  contentClass: {
+    type: [PROP_TYPE_ARRAY, PROP_TYPE_OBJECT, PROP_TYPE_STRING],
+    required: false,
+    default: undefined
+  },
+  dialogClass: {
+    type: [PROP_TYPE_ARRAY, PROP_TYPE_OBJECT, PROP_TYPE_STRING],
+    required: false,
+    default: undefined
+  },
+  footerClass: {
+    type: [PROP_TYPE_ARRAY, PROP_TYPE_OBJECT, PROP_TYPE_STRING],
+    required: false,
+    default: undefined
+  },
+  footerTag: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: 'footer'
+  },
+  headerClass: {
+    type: [PROP_TYPE_ARRAY, PROP_TYPE_OBJECT, PROP_TYPE_STRING],
+    required: false,
+    default: undefined
+  },
+  headerCloseContent: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: '×'
+  },
+  headerCloseLabel: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: 'Close'
+  },
+  headerTag: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: 'header'
+  },
+  // TODO: Rename to `noBackdrop` and deprecate `hideBackdrop`
+  hideBackdrop: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  // TODO: Rename to `noFooter` and deprecate `hideFooter`
+  hideFooter: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  // TODO: Rename to `noHeader` and deprecate `hideHeader`
+  hideHeader: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  // TODO: Rename to `noHeaderClose` and deprecate `hideHeaderClose`
+  hideHeaderClose: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  ignoreEnforceFocusSelector: {
+    type: [PROP_TYPE_ARRAY, PROP_TYPE_STRING],
+    required: false,
+    default: undefined
+  },
+  lazy: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  modalClass: {
+    type: [PROP_TYPE_ARRAY, PROP_TYPE_OBJECT, PROP_TYPE_STRING],
+    required: false,
+    default: undefined
+  },
+  noCloseOnBackdrop: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  noCloseOnEsc: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  noEnforceFocus: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  noFade: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  noStacking: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  okDisabled: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  okOnly: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  okTitle: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: 'OK'
+  },
+  okTitleHtml: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  },
+  okVariant: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: 'primary'
+  },
+  // HTML Element, CSS selector string or Vue component instance
+  returnFocus: {
+    type: [HTMLElement, PROP_TYPE_OBJECT, PROP_TYPE_STRING],
+    required: false,
+    default: undefined
+  },
+  scrollable: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  size: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: 'md'
+  },
+  static: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  title: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  },
+  titleClass: {
+    type: [PROP_TYPE_ARRAY, PROP_TYPE_OBJECT, PROP_TYPE_STRING],
+    required: false,
+    default: undefined
+  },
+  titleHtml: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  },
+  titleTag: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: 'h5'
+  }
+});
+
+// --- Main component ---
+
+// @vue/component
+const BModal = /*#__PURE__*/extend({
+  name: NAME_MODAL,
+  mixins: [attrsMixin, idMixin, modelMixin, listenOnDocumentMixin, listenOnRootMixin, listenOnWindowMixin, normalizeSlotMixin, scopedStyleMixin],
+  inheritAttrs: false,
+  props,
+  data() {
+    return {
+      isHidden: true,
+      // If modal should not be in document
+      isVisible: false,
+      // Controls modal visible state
+      isTransitioning: false,
+      // Used for style control
+      isShow: false,
+      // Used for style control
+      isBlock: false,
+      // Used for style control
+      isOpening: false,
+      // To signal that the modal is in the process of opening
+      isClosing: false,
+      // To signal that the modal is in the process of closing
+      ignoreBackdropClick: false,
+      // Used to signify if click out listener should ignore the click
+      isModalOverflowing: false,
+      // The following items are controlled by the modalManager instance
+      scrollbarWidth: 0,
+      zIndex: modalManager.getBaseZIndex(),
+      isTop: true,
+      isBodyOverflowing: false
+    };
+  },
+  computed: {
+    modalId() {
+      return this.safeId();
+    },
+    modalOuterId() {
+      return this.safeId('__BV_modal_outer_');
+    },
+    modalHeaderId() {
+      return this.safeId('__BV_modal_header_');
+    },
+    modalBodyId() {
+      return this.safeId('__BV_modal_body_');
+    },
+    modalTitleId() {
+      return this.safeId('__BV_modal_title_');
+    },
+    modalContentId() {
+      return this.safeId('__BV_modal_content_');
+    },
+    modalFooterId() {
+      return this.safeId('__BV_modal_footer_');
+    },
+    modalBackdropId() {
+      return this.safeId('__BV_modal_backdrop_');
+    },
+    modalClasses() {
+      return [{
+        fade: !this.noFade,
+        show: this.isShow,
+        'gl-block': this.isBlock
+      }, this.modalClass];
+    },
+    modalStyles() {
+      const sbWidth = `${this.scrollbarWidth}px`;
+      return {
+        paddingLeft: !this.isBodyOverflowing && this.isModalOverflowing ? sbWidth : '',
+        paddingRight: this.isBodyOverflowing && !this.isModalOverflowing ? sbWidth : ''
+      };
+    },
+    dialogClasses() {
+      return [{
+        [`modal-${this.size}`]: this.size,
+        'modal-dialog-centered': this.centered,
+        'modal-dialog-scrollable': this.scrollable
+      }, this.dialogClass];
+    },
+    modalOuterStyle() {
+      // Styles needed for proper stacking of modals
+      return {
+        position: 'absolute',
+        zIndex: this.zIndex
+      };
+    },
+    slotScope() {
+      return {
+        cancel: this.onCancel,
+        close: this.onClose,
+        hide: this.hide,
+        ok: this.onOk,
+        visible: this.isVisible
+      };
+    },
+    computeIgnoreEnforceFocusSelector() {
+      // Normalize to an single selector with selectors separated by `,`
+      return concat(this.ignoreEnforceFocusSelector).filter(identity).join(',').trim();
+    },
+    computedAttrs() {
+      // If the parent has a scoped style attribute, and the modal
+      // is portalled, add the scoped attribute to the modal wrapper
+      const scopedStyleAttrs = !this.static ? this.scopedStyleAttrs : {};
+      return {
+        ...scopedStyleAttrs,
+        ...this.bvAttrs,
+        id: this.modalOuterId
+      };
+    },
+    computedModalAttrs() {
+      const {
+        isVisible,
+        ariaLabel
+      } = this;
+      return {
+        id: this.modalId,
+        role: 'dialog',
+        'aria-hidden': isVisible ? null : 'true',
+        'aria-modal': isVisible ? 'true' : null,
+        'aria-label': ariaLabel,
+        'aria-labelledby': this.hideHeader || ariaLabel ||
+        // TODO: Rename slot to `title` and deprecate `modal-title`
+        !(this.hasNormalizedSlot(SLOT_NAME_MODAL_TITLE) || this.titleHtml || this.title) ? null : this.modalTitleId,
+        'aria-describedby': this.modalBodyId
+      };
+    }
+  },
+  watch: {
+    [MODEL_PROP_NAME](newValue, oldValue) {
+      if (newValue !== oldValue) {
+        this[newValue ? 'show' : 'hide']();
+      }
+    }
+  },
+  created() {
+    // Define non-reactive properties
+    this.$_observer = null;
+    this.$_returnFocus = this.returnFocus || null;
+  },
+  mounted() {
+    // Set initial z-index as queried from the DOM
+    this.zIndex = modalManager.getBaseZIndex();
+    // Listen for events from others to either open or close ourselves
+    // and listen to all modals to enable/disable enforce focus
+    this.listenOnRoot(getRootActionEventName(NAME_MODAL, EVENT_NAME_SHOW), this.showHandler);
+    this.listenOnRoot(getRootActionEventName(NAME_MODAL, EVENT_NAME_HIDE), this.hideHandler);
+    this.listenOnRoot(getRootActionEventName(NAME_MODAL, EVENT_NAME_TOGGLE), this.toggleHandler);
+    // Listen for `bv:modal::show events`, and close ourselves if the
+    // opening modal not us
+    this.listenOnRoot(getRootEventName(NAME_MODAL, EVENT_NAME_SHOW), this.modalListener);
+    // Initially show modal?
+    if (this[MODEL_PROP_NAME] === true) {
+      this.$nextTick(this.show);
+    }
+  },
+  beforeDestroy() {
+    // Ensure everything is back to normal
+    modalManager.unregisterModal(this);
+    this.setObserver(false);
+    if (this.isVisible) {
+      this.isVisible = false;
+      this.isShow = false;
+      this.isTransitioning = false;
+    }
+  },
+  methods: {
+    setObserver() {
+      let on = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+      this.$_observer && this.$_observer.disconnect();
+      this.$_observer = null;
+      if (on) {
+        this.$_observer = observeDom(this.$refs.content, this.checkModalOverflow.bind(this), OBSERVER_CONFIG);
+      }
+    },
+    // Private method to update the v-model
+    updateModel(value) {
+      if (value !== this[MODEL_PROP_NAME]) {
+        this.$emit(MODEL_EVENT_NAME, value);
+      }
+    },
+    // Private method to create a BvModalEvent object
+    buildEvent(type) {
+      let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      return new BvModalEvent(type, {
+        // Default options
+        cancelable: false,
+        target: this.$refs.modal || this.$el || null,
+        relatedTarget: null,
+        trigger: null,
+        // Supplied options
+        ...options,
+        // Options that can't be overridden
+        vueTarget: this,
+        componentId: this.modalId
+      });
+    },
+    // Public method to show modal
+    show() {
+      if (this.isVisible || this.isOpening) {
+        // If already open, or in the process of opening, do nothing
+        /* istanbul ignore next */
+        return;
+      }
+      /* istanbul ignore next */
+      if (this.isClosing) {
+        // If we are in the process of closing, wait until hidden before re-opening
+        /* istanbul ignore next */
+        this.$_showOnHidden = true;
+        /* istanbul ignore next */
+        return;
+      }
+      this.isOpening = true;
+      // Set the element to return focus to when closed
+      this.$_returnFocus = this.$_returnFocus || this.getActiveElement();
+      const showEvent = this.buildEvent(EVENT_NAME_SHOW, {
+        cancelable: true
+      });
+      this.emitEvent(showEvent);
+      // Don't show if canceled
+      if (showEvent.defaultPrevented || this.isVisible) {
+        this.isOpening = false;
+        // Ensure the v-model reflects the current state
+        this.updateModel(false);
+        return;
+      }
+      // Show the modal
+      this.doShow();
+    },
+    // Public method to hide modal
+    hide() {
+      let trigger = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+      if (!this.isVisible || this.isClosing) {
+        /* istanbul ignore next */
+        return;
+      }
+      this.isClosing = true;
+      const hideEvent = this.buildEvent(EVENT_NAME_HIDE, {
+        cancelable: trigger !== TRIGGER_FORCE,
+        trigger: trigger || null
+      });
+      // We emit specific event for one of the three built-in buttons
+      if (trigger === BUTTON_OK) {
+        this.$emit(EVENT_NAME_OK, hideEvent);
+      } else if (trigger === BUTTON_CANCEL) {
+        this.$emit(EVENT_NAME_CANCEL, hideEvent);
+      } else if (trigger === BUTTON_CLOSE) {
+        this.$emit(EVENT_NAME_CLOSE, hideEvent);
+      }
+      this.emitEvent(hideEvent);
+      // Hide if not canceled
+      if (hideEvent.defaultPrevented || !this.isVisible) {
+        this.isClosing = false;
+        // Ensure v-model reflects current state
+        this.updateModel(true);
+        return;
+      }
+      // Stop observing for content changes
+      this.setObserver(false);
+      // Trigger the hide transition
+      this.isVisible = false;
+      // Update the v-model
+      this.updateModel(false);
+    },
+    // Public method to toggle modal visibility
+    toggle(triggerEl) {
+      if (triggerEl) {
+        this.$_returnFocus = triggerEl;
+      }
+      if (this.isVisible) {
+        this.hide(TRIGGER_TOGGLE);
+      } else {
+        this.show();
+      }
+    },
+    // Private method to get the current document active element
+    getActiveElement() {
+      // Returning focus to `document.body` may cause unwanted scrolls,
+      // so we exclude setting focus on body
+      const activeElement = getActiveElement(IS_BROWSER ? [document.body] : []);
+      // Preset the fallback return focus value if it is not set
+      // `document.activeElement` should be the trigger element that was clicked or
+      // in the case of using the v-model, which ever element has current focus
+      // Will be overridden by some commands such as toggle, etc.
+      // Note: On IE 11, `document.activeElement` may be `null`
+      // So we test it for truthiness first
+      // https://github.com/bootstrap-vue/bootstrap-vue/issues/3206
+      return activeElement && activeElement.focus ? activeElement : null;
+    },
+    // Private method to finish showing modal
+    doShow() {
+      /* istanbul ignore next: commenting out for now until we can test stacking */
+      if (modalManager.modalsAreOpen && this.noStacking) {
+        // If another modal(s) is already open, wait for it(them) to close
+        this.listenOnRootOnce(getRootEventName(NAME_MODAL, EVENT_NAME_HIDDEN), this.doShow);
+        return;
+      }
+      modalManager.registerModal(this);
+      // Place modal in DOM
+      this.isHidden = false;
+      this.$nextTick(() => {
+        // We do this in `$nextTick()` to ensure the modal is in DOM first
+        // before we show it
+        this.isVisible = true;
+        this.isOpening = false;
+        // Update the v-model
+        this.updateModel(true);
+        this.$nextTick(() => {
+          // Observe changes in modal content and adjust if necessary
+          // In a `$nextTick()` in case modal content is lazy
+          this.setObserver(true);
+        });
+      });
+    },
+    // Transition handlers
+    onBeforeEnter() {
+      this.isTransitioning = true;
+      this.setResizeEvent(true);
+    },
+    onEnter() {
+      this.isBlock = true;
+      // We add the `show` class 1 frame later
+      // `requestAF()` runs the callback before the next repaint, so we need
+      // two calls to guarantee the next frame has been rendered
+      requestAF(() => {
+        requestAF(() => {
+          this.isShow = true;
+        });
+      });
+    },
+    onAfterEnter() {
+      this.checkModalOverflow();
+      this.isTransitioning = false;
+      // We use `requestAF()` to allow transition hooks to complete
+      // before passing control over to the other handlers
+      // This will allow users to not have to use `$nextTick()` or `requestAF()`
+      // when trying to pre-focus an element
+      requestAF(() => {
+        this.emitEvent(this.buildEvent(EVENT_NAME_SHOWN));
+        this.setEnforceFocus(true);
+        this.$nextTick(() => {
+          // Delayed in a `$nextTick()` to allow users time to pre-focus
+          // an element if the wish
+          this.focusFirst();
+        });
+      });
+    },
+    onBeforeLeave() {
+      this.isTransitioning = true;
+      this.setResizeEvent(false);
+      this.setEnforceFocus(false);
+    },
+    onLeave() {
+      // Remove the 'show' class
+      this.isShow = false;
+    },
+    onAfterLeave() {
+      this.isBlock = false;
+      this.isTransitioning = false;
+      this.isModalOverflowing = false;
+      this.isHidden = true;
+      this.$nextTick(() => {
+        this.isClosing = false;
+        modalManager.unregisterModal(this);
+        this.returnFocusTo();
+        // TODO: Need to find a way to pass the `trigger` property
+        //       to the `hidden` event, not just only the `hide` event
+        this.emitEvent(this.buildEvent(EVENT_NAME_HIDDEN));
+        // Handle pending show request (show was called while closing)
+        if (this.$_showOnHidden) {
+          this.$_showOnHidden = false;
+          this.show();
+        }
+      });
+    },
+    emitEvent(bvEvent) {
+      const {
+        type
+      } = bvEvent;
+      // We emit on `$root` first in case a global listener wants to cancel
+      // the event first before the instance emits its event
+      this.emitOnRoot(getRootEventName(NAME_MODAL, type), bvEvent, bvEvent.componentId);
+      this.$emit(type, bvEvent);
+    },
+    // UI event handlers
+    onDialogMousedown() {
+      // Watch to see if the matching mouseup event occurs outside the dialog
+      // And if it does, cancel the clickOut handler
+      const modal = this.$refs.modal;
+      const onceModalMouseup = event => {
+        eventOff(modal, 'mouseup', onceModalMouseup, EVENT_OPTIONS_NO_CAPTURE);
+        if (event.target === modal) {
+          this.ignoreBackdropClick = true;
+        }
+      };
+      eventOn(modal, 'mouseup', onceModalMouseup, EVENT_OPTIONS_NO_CAPTURE);
+    },
+    onClickOut(event) {
+      if (this.ignoreBackdropClick) {
+        // Click was initiated inside the modal content, but finished outside.
+        // Set by the above onDialogMousedown handler
+        this.ignoreBackdropClick = false;
+        return;
+      }
+      // Do nothing if not visible, backdrop click disabled, or element
+      // that generated click event is no longer in document body
+      if (!this.isVisible || this.noCloseOnBackdrop || !contains(document.body, event.target)) {
+        return;
+      }
+      // If backdrop clicked, hide modal
+      if (!contains(this.$refs.content, event.target)) {
+        this.hide(TRIGGER_BACKDROP);
+      }
+    },
+    onOk() {
+      this.hide(BUTTON_OK);
+    },
+    onCancel() {
+      this.hide(BUTTON_CANCEL);
+    },
+    onClose() {
+      this.hide(BUTTON_CLOSE);
+    },
+    onEsc(event) {
+      // If ESC pressed, hide modal
+      if (event.keyCode === CODE_ESC && this.isVisible && !this.noCloseOnEsc) {
+        this.hide(TRIGGER_ESC);
+      }
+    },
+    // Document focusin listener
+    focusHandler(event) {
+      // If focus leaves modal content, bring it back
+      const content = this.$refs.content;
+      const {
+        target
+      } = event;
+      if (this.noEnforceFocus || !this.isTop || !this.isVisible || !content || document === target || contains(content, target) || this.computeIgnoreEnforceFocusSelector && closest(this.computeIgnoreEnforceFocusSelector, target, true)) {
+        return;
+      }
+      const tabables = getTabables(this.$refs.content);
+      const bottomTrap = this.$refs['bottom-trap'];
+      const topTrap = this.$refs['top-trap'];
+      if (bottomTrap && target === bottomTrap) {
+        // If user pressed TAB out of modal into our bottom trab trap element
+        // Find the first tabable element in the modal content and focus it
+        if (attemptFocus(tabables[0])) {
+          // Focus was successful
+          return;
+        }
+      } else if (topTrap && target === topTrap) {
+        // If user pressed CTRL-TAB out of modal and into our top tab trap element
+        // Find the last tabable element in the modal content and focus it
+        if (attemptFocus(tabables[tabables.length - 1])) {
+          // Focus was successful
+          return;
+        }
+      }
+      // Otherwise focus the modal content container
+      attemptFocus(content, {
+        preventScroll: true
+      });
+    },
+    // Turn on/off focusin listener
+    setEnforceFocus(on) {
+      this.listenDocument(on, 'focusin', this.focusHandler);
+    },
+    // Resize listener
+    setResizeEvent(on) {
+      this.listenWindow(on, 'resize', this.checkModalOverflow);
+      this.listenWindow(on, 'orientationchange', this.checkModalOverflow);
+    },
+    // Root listener handlers
+    showHandler(id, triggerEl) {
+      if (id === this.modalId) {
+        this.$_returnFocus = triggerEl || this.getActiveElement();
+        this.show();
+      }
+    },
+    hideHandler(id) {
+      if (id === this.modalId) {
+        this.hide('event');
+      }
+    },
+    toggleHandler(id, triggerEl) {
+      if (id === this.modalId) {
+        this.toggle(triggerEl);
+      }
+    },
+    modalListener(bvEvent) {
+      // If another modal opens, close this one if stacking not permitted
+      if (this.noStacking && bvEvent.vueTarget !== this) {
+        this.hide();
+      }
+    },
+    // Focus control handlers
+    focusFirst() {
+      // Don't try and focus if we are SSR
+      if (IS_BROWSER) {
+        requestAF(() => {
+          const modal = this.$refs.modal;
+          const content = this.$refs.content;
+          const activeElement = this.getActiveElement();
+          // If the modal contains the activeElement, we don't do anything
+          if (modal && content && !(activeElement && contains(content, activeElement))) {
+            const ok = this.$refs['ok-button'];
+            const cancel = this.$refs['cancel-button'];
+            const close = this.$refs['close-button'];
+            // Focus the appropriate button or modal content wrapper
+            const autoFocus = this.autoFocusButton;
+            /* istanbul ignore next */
+            const el = autoFocus === BUTTON_OK && ok ? ok.$el || ok : autoFocus === BUTTON_CANCEL && cancel ? cancel.$el || cancel : autoFocus === BUTTON_CLOSE && close ? close.$el || close : content;
+            // Focus the element
+            attemptFocus(el);
+            if (el === content) {
+              // Make sure top of modal is showing (if longer than the viewport)
+              this.$nextTick(() => {
+                modal.scrollTop = 0;
+              });
+            }
+          }
+        });
+      }
+    },
+    returnFocusTo() {
+      // Prefer `returnFocus` prop over event specified
+      // `return_focus` value
+      let el = this.returnFocus || this.$_returnFocus || null;
+      this.$_returnFocus = null;
+      this.$nextTick(() => {
+        // Is el a string CSS selector?
+        el = isString(el) ? select(el) : el;
+        if (el) {
+          // Possibly could be a component reference
+          el = el.$el || el;
+          attemptFocus(el);
+        }
+      });
+    },
+    checkModalOverflow() {
+      if (this.isVisible) {
+        const modal = this.$refs.modal;
+        this.isModalOverflowing = modal.scrollHeight > document.documentElement.clientHeight;
+      }
+    },
+    makeModal(h) {
+      // Modal header
+      let $header = h();
+      if (!this.hideHeader) {
+        // TODO: Rename slot to `header` and deprecate `modal-header`
+        let $modalHeader = this.normalizeSlot(SLOT_NAME_MODAL_HEADER, this.slotScope);
+        if (!$modalHeader) {
+          let $closeButton = h();
+          if (!this.hideHeaderClose) {
+            $closeButton = h(BButtonClose, {
+              props: {
+                content: this.headerCloseContent,
+                disabled: this.isTransitioning,
+                ariaLabel: this.headerCloseLabel
+              },
+              on: {
+                click: this.onClose
+              },
+              ref: 'close-button'
+            },
+            // TODO: Rename slot to `header-close` and deprecate `modal-header-close`
+            [this.normalizeSlot(SLOT_NAME_MODAL_HEADER_CLOSE)]);
+          }
+          $modalHeader = [h(this.titleTag, {
+            staticClass: 'modal-title',
+            class: this.titleClass,
+            attrs: {
+              id: this.modalTitleId
+            },
+            // TODO: Rename slot to `title` and deprecate `modal-title`
+            domProps: this.hasNormalizedSlot(SLOT_NAME_MODAL_TITLE) ? {} : htmlOrText(this.titleHtml, this.title)
+          },
+          // TODO: Rename slot to `title` and deprecate `modal-title`
+          this.normalizeSlot(SLOT_NAME_MODAL_TITLE, this.slotScope)), $closeButton];
+        }
+        $header = h(this.headerTag, {
+          staticClass: 'modal-header',
+          class: this.headerClass,
+          attrs: {
+            id: this.modalHeaderId
+          },
+          ref: 'header'
+        }, [$modalHeader]);
+      }
+
+      // Modal body
+      const $body = h('div', {
+        staticClass: 'modal-body',
+        class: this.bodyClass,
+        attrs: {
+          id: this.modalBodyId
+        },
+        ref: 'body'
+      }, this.normalizeSlot(SLOT_NAME_DEFAULT, this.slotScope));
+
+      // Modal footer
+      let $footer = h();
+      if (!this.hideFooter) {
+        // TODO: Rename slot to `footer` and deprecate `modal-footer`
+        let $modalFooter = this.normalizeSlot(SLOT_NAME_MODAL_FOOTER, this.slotScope);
+        if (!$modalFooter) {
+          let $cancelButton = h();
+          if (!this.okOnly) {
+            $cancelButton = h(BButton, {
+              props: {
+                variant: this.cancelVariant,
+                size: this.buttonSize,
+                disabled: this.cancelDisabled || this.busy || this.isTransitioning
+              },
+              // TODO: Rename slot to `cancel-button` and deprecate `modal-cancel`
+              domProps: this.hasNormalizedSlot(SLOT_NAME_MODAL_CANCEL) ? {} : htmlOrText(this.cancelTitleHtml, this.cancelTitle),
+              on: {
+                click: this.onCancel
+              },
+              ref: 'cancel-button'
+            },
+            // TODO: Rename slot to `cancel-button` and deprecate `modal-cancel`
+            this.normalizeSlot(SLOT_NAME_MODAL_CANCEL));
+          }
+          const $okButton = h(BButton, {
+            props: {
+              variant: this.okVariant,
+              size: this.buttonSize,
+              disabled: this.okDisabled || this.busy || this.isTransitioning
+            },
+            // TODO: Rename slot to `ok-button` and deprecate `modal-ok`
+            domProps: this.hasNormalizedSlot(SLOT_NAME_MODAL_OK) ? {} : htmlOrText(this.okTitleHtml, this.okTitle),
+            on: {
+              click: this.onOk
+            },
+            ref: 'ok-button'
+          },
+          // TODO: Rename slot to `ok-button` and deprecate `modal-ok`
+          this.normalizeSlot(SLOT_NAME_MODAL_OK));
+          $modalFooter = [$cancelButton, $okButton];
+        }
+        $footer = h(this.footerTag, {
+          staticClass: 'modal-footer',
+          class: this.footerClass,
+          attrs: {
+            id: this.modalFooterId
+          },
+          ref: 'footer'
+        }, [$modalFooter]);
+      }
+
+      // Assemble modal content
+      const $modalContent = h('div', {
+        staticClass: 'modal-content',
+        class: this.contentClass,
+        attrs: {
+          id: this.modalContentId,
+          tabindex: '-1'
+        },
+        ref: 'content'
+      }, [$header, $body, $footer]);
+
+      // Tab traps to prevent page from scrolling to next element in
+      // tab index during enforce-focus tab cycle
+      let $tabTrapTop = h();
+      let $tabTrapBottom = h();
+      if (this.isVisible && !this.noEnforceFocus) {
+        $tabTrapTop = h('span', {
+          attrs: {
+            tabindex: '0'
+          },
+          ref: 'top-trap'
+        });
+        $tabTrapBottom = h('span', {
+          attrs: {
+            tabindex: '0'
+          },
+          ref: 'bottom-trap'
+        });
+      }
+
+      // Modal dialog wrapper
+      const $modalDialog = h('div', {
+        staticClass: 'modal-dialog',
+        class: this.dialogClasses,
+        on: {
+          mousedown: this.onDialogMousedown
+        },
+        ref: 'dialog'
+      }, [$tabTrapTop, $modalContent, $tabTrapBottom]);
+
+      // Modal
+      let $modal = h('div', {
+        staticClass: 'modal',
+        class: this.modalClasses,
+        style: this.modalStyles,
+        attrs: this.computedModalAttrs,
+        on: {
+          keydown: this.onEsc,
+          click: this.onClickOut
+        },
+        directives: [{
+          name: 'show',
+          value: this.isVisible
+        }],
+        ref: 'modal'
+      }, [$modalDialog]);
+
+      // Wrap modal in transition
+      // Sadly, we can't use `BVTransition` here due to the differences in
+      // transition durations for `.modal` and `.modal-dialog`
+      // At least until https://github.com/vuejs/vue/issues/9986 is resolved
+      $modal = h('transition', {
+        props: {
+          enterClass: '',
+          enterToClass: '',
+          enterActiveClass: '',
+          leaveClass: '',
+          leaveActiveClass: '',
+          leaveToClass: ''
+        },
+        on: {
+          beforeEnter: this.onBeforeEnter,
+          enter: this.onEnter,
+          afterEnter: this.onAfterEnter,
+          beforeLeave: this.onBeforeLeave,
+          leave: this.onLeave,
+          afterLeave: this.onAfterLeave
+        }
+      }, [$modal]);
+
+      // Modal backdrop
+      let $backdrop = h();
+      if (!this.hideBackdrop && this.isVisible) {
+        $backdrop = h('div', {
+          staticClass: 'modal-backdrop',
+          attrs: {
+            id: this.modalBackdropId
+          }
+        },
+        // TODO: Rename slot to `backdrop` and deprecate `modal-backdrop`
+        this.normalizeSlot(SLOT_NAME_MODAL_BACKDROP));
+      }
+      $backdrop = h(BVTransition, {
+        props: {
+          noFade: this.noFade
+        }
+      }, [$backdrop]);
+
+      // Assemble modal and backdrop in an outer <div>
+      return h('div', {
+        style: this.modalOuterStyle,
+        attrs: this.computedAttrs,
+        key: `modal-outer-${this[COMPONENT_UID_KEY]}`
+      }, [$modal, $backdrop]);
+    }
+  },
+  render(h) {
+    if (this.static) {
+      return this.lazy && this.isHidden ? h() : this.makeModal(h);
+    } else {
+      return this.isHidden ? h() : h(BVTransporter, [this.makeModal(h)]);
+    }
+  }
+});
+
+export { BModal, props };