Server : Apache System : Linux server2.corals.io 4.18.0-348.2.1.el8_5.x86_64 #1 SMP Mon Nov 15 09:17:08 EST 2021 x86_64 User : corals ( 1002) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory : /home/corals/vreg/node_modules/bootstrap-vue/esm/components/modal/ |
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
import { COMPONENT_UID_KEY, Vue } from '../../vue';
import { NAME_MODAL } from '../../constants/components';
import { IS_BROWSER } from '../../constants/env';
import { EVENT_NAME_CANCEL, EVENT_NAME_CHANGE, EVENT_NAME_CLOSE, EVENT_NAME_HIDDEN, EVENT_NAME_HIDE, EVENT_NAME_OK, EVENT_NAME_SHOW, EVENT_NAME_SHOWN, EVENT_NAME_TOGGLE, EVENT_OPTIONS_NO_CAPTURE } from '../../constants/events';
import { CODE_ESC } from '../../constants/key-codes';
import { PROP_TYPE_ARRAY_OBJECT_STRING, PROP_TYPE_ARRAY_STRING, PROP_TYPE_BOOLEAN, PROP_TYPE_OBJECT, PROP_TYPE_STRING } from '../../constants/props';
import { HTMLElement } from '../../constants/safe-types';
import { SLOT_NAME_DEFAULT, SLOT_NAME_MODAL_BACKDROP, SLOT_NAME_MODAL_CANCEL, SLOT_NAME_MODAL_FOOTER, SLOT_NAME_MODAL_HEADER, SLOT_NAME_MODAL_HEADER_CLOSE, SLOT_NAME_MODAL_OK, SLOT_NAME_MODAL_TITLE } from '../../constants/slots';
import { arrayIncludes, concat } from '../../utils/array';
import { attemptFocus, closest, contains, getActiveElement as _getActiveElement, getTabables, requestAF, select } from '../../utils/dom';
import { getRootActionEventName, getRootEventName, eventOn, eventOff } from '../../utils/events';
import { htmlOrText } from '../../utils/html';
import { identity } from '../../utils/identity';
import { isString, isUndefinedOrNull } from '../../utils/inspect';
import { makeModelMixin } from '../../utils/model';
import { sortKeys } from '../../utils/object';
import { observeDom } from '../../utils/observe-dom';
import { makeProp, makePropsConfigurable } from '../../utils/props';
import { attrsMixin } from '../../mixins/attrs';
import { idMixin, props as idProps } 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 ---
var _makeModelMixin = makeModelMixin('visible', {
type: PROP_TYPE_BOOLEAN,
defaultValue: false,
event: EVENT_NAME_CHANGE
}),
modelMixin = _makeModelMixin.mixin,
modelProps = _makeModelMixin.props,
MODEL_PROP_NAME = _makeModelMixin.prop,
MODEL_EVENT_NAME = _makeModelMixin.event;
var TRIGGER_BACKDROP = 'backdrop';
var TRIGGER_ESC = 'esc';
var TRIGGER_FORCE = 'FORCE';
var TRIGGER_TOGGLE = 'toggle';
var BUTTON_CANCEL = 'cancel'; // TODO: This should be renamed to 'close'
var BUTTON_CLOSE = 'headerclose';
var BUTTON_OK = 'ok';
var 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
var OBSERVER_CONFIG = {
subtree: true,
childList: true,
characterData: true,
attributes: true,
attributeFilter: ['style', 'class']
}; // --- Props ---
export var props = makePropsConfigurable(sortKeys(_objectSpread(_objectSpread(_objectSpread({}, idProps), modelProps), {}, {
ariaLabel: makeProp(PROP_TYPE_STRING),
autoFocusButton: makeProp(PROP_TYPE_STRING, null,
/* istanbul ignore next */
function (value) {
return isUndefinedOrNull(value) || arrayIncludes(BUTTONS, value);
}),
bodyBgVariant: makeProp(PROP_TYPE_STRING),
bodyClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
bodyTextVariant: makeProp(PROP_TYPE_STRING),
busy: makeProp(PROP_TYPE_BOOLEAN, false),
buttonSize: makeProp(PROP_TYPE_STRING),
cancelDisabled: makeProp(PROP_TYPE_BOOLEAN, false),
cancelTitle: makeProp(PROP_TYPE_STRING, 'Cancel'),
cancelTitleHtml: makeProp(PROP_TYPE_STRING),
cancelVariant: makeProp(PROP_TYPE_STRING, 'secondary'),
centered: makeProp(PROP_TYPE_BOOLEAN, false),
contentClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
dialogClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
footerBgVariant: makeProp(PROP_TYPE_STRING),
footerBorderVariant: makeProp(PROP_TYPE_STRING),
footerClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
footerTextVariant: makeProp(PROP_TYPE_STRING),
headerBgVariant: makeProp(PROP_TYPE_STRING),
headerBorderVariant: makeProp(PROP_TYPE_STRING),
headerClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
headerCloseContent: makeProp(PROP_TYPE_STRING, '×'),
headerCloseLabel: makeProp(PROP_TYPE_STRING, 'Close'),
headerCloseVariant: makeProp(PROP_TYPE_STRING),
headerTextVariant: makeProp(PROP_TYPE_STRING),
// TODO: Rename to `noBackdrop` and deprecate `hideBackdrop`
hideBackdrop: makeProp(PROP_TYPE_BOOLEAN, false),
// TODO: Rename to `noFooter` and deprecate `hideFooter`
hideFooter: makeProp(PROP_TYPE_BOOLEAN, false),
// TODO: Rename to `noHeader` and deprecate `hideHeader`
hideHeader: makeProp(PROP_TYPE_BOOLEAN, false),
// TODO: Rename to `noHeaderClose` and deprecate `hideHeaderClose`
hideHeaderClose: makeProp(PROP_TYPE_BOOLEAN, false),
ignoreEnforceFocusSelector: makeProp(PROP_TYPE_ARRAY_STRING),
lazy: makeProp(PROP_TYPE_BOOLEAN, false),
modalClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
noCloseOnBackdrop: makeProp(PROP_TYPE_BOOLEAN, false),
noCloseOnEsc: makeProp(PROP_TYPE_BOOLEAN, false),
noEnforceFocus: makeProp(PROP_TYPE_BOOLEAN, false),
noFade: makeProp(PROP_TYPE_BOOLEAN, false),
noStacking: makeProp(PROP_TYPE_BOOLEAN, false),
okDisabled: makeProp(PROP_TYPE_BOOLEAN, false),
okOnly: makeProp(PROP_TYPE_BOOLEAN, false),
okTitle: makeProp(PROP_TYPE_STRING, 'OK'),
okTitleHtml: makeProp(PROP_TYPE_STRING),
okVariant: makeProp(PROP_TYPE_STRING, 'primary'),
// HTML Element, CSS selector string or Vue component instance
returnFocus: makeProp([HTMLElement, PROP_TYPE_OBJECT, PROP_TYPE_STRING]),
scrollable: makeProp(PROP_TYPE_BOOLEAN, false),
size: makeProp(PROP_TYPE_STRING, 'md'),
static: makeProp(PROP_TYPE_BOOLEAN, false),
title: makeProp(PROP_TYPE_STRING),
titleClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
titleHtml: makeProp(PROP_TYPE_STRING),
titleSrOnly: makeProp(PROP_TYPE_BOOLEAN, false),
titleTag: makeProp(PROP_TYPE_STRING, 'h5')
})), NAME_MODAL); // --- Main component ---
// @vue/component
export var BModal = /*#__PURE__*/Vue.extend({
name: NAME_MODAL,
mixins: [attrsMixin, idMixin, modelMixin, listenOnDocumentMixin, listenOnRootMixin, listenOnWindowMixin, normalizeSlotMixin, scopedStyleMixin],
inheritAttrs: false,
props: props,
data: function 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: function modalId() {
return this.safeId();
},
modalOuterId: function modalOuterId() {
return this.safeId('__BV_modal_outer_');
},
modalHeaderId: function modalHeaderId() {
return this.safeId('__BV_modal_header_');
},
modalBodyId: function modalBodyId() {
return this.safeId('__BV_modal_body_');
},
modalTitleId: function modalTitleId() {
return this.safeId('__BV_modal_title_');
},
modalContentId: function modalContentId() {
return this.safeId('__BV_modal_content_');
},
modalFooterId: function modalFooterId() {
return this.safeId('__BV_modal_footer_');
},
modalBackdropId: function modalBackdropId() {
return this.safeId('__BV_modal_backdrop_');
},
modalClasses: function modalClasses() {
return [{
fade: !this.noFade,
show: this.isShow
}, this.modalClass];
},
modalStyles: function modalStyles() {
var sbWidth = "".concat(this.scrollbarWidth, "px");
return {
paddingLeft: !this.isBodyOverflowing && this.isModalOverflowing ? sbWidth : '',
paddingRight: this.isBodyOverflowing && !this.isModalOverflowing ? sbWidth : '',
// Needed to fix issue https://github.com/bootstrap-vue/bootstrap-vue/issues/3457
// Even though we are using v-show, we must ensure 'none' is restored in the styles
display: this.isBlock ? 'block' : 'none'
};
},
dialogClasses: function dialogClasses() {
var _ref;
return [(_ref = {}, _defineProperty(_ref, "modal-".concat(this.size), this.size), _defineProperty(_ref, 'modal-dialog-centered', this.centered), _defineProperty(_ref, 'modal-dialog-scrollable', this.scrollable), _ref), this.dialogClass];
},
headerClasses: function headerClasses() {
var _ref2;
return [(_ref2 = {}, _defineProperty(_ref2, "bg-".concat(this.headerBgVariant), this.headerBgVariant), _defineProperty(_ref2, "text-".concat(this.headerTextVariant), this.headerTextVariant), _defineProperty(_ref2, "border-".concat(this.headerBorderVariant), this.headerBorderVariant), _ref2), this.headerClass];
},
titleClasses: function titleClasses() {
return [{
'sr-only': this.titleSrOnly
}, this.titleClass];
},
bodyClasses: function bodyClasses() {
var _ref3;
return [(_ref3 = {}, _defineProperty(_ref3, "bg-".concat(this.bodyBgVariant), this.bodyBgVariant), _defineProperty(_ref3, "text-".concat(this.bodyTextVariant), this.bodyTextVariant), _ref3), this.bodyClass];
},
footerClasses: function footerClasses() {
var _ref4;
return [(_ref4 = {}, _defineProperty(_ref4, "bg-".concat(this.footerBgVariant), this.footerBgVariant), _defineProperty(_ref4, "text-".concat(this.footerTextVariant), this.footerTextVariant), _defineProperty(_ref4, "border-".concat(this.footerBorderVariant), this.footerBorderVariant), _ref4), this.footerClass];
},
modalOuterStyle: function modalOuterStyle() {
// Styles needed for proper stacking of modals
return {
position: 'absolute',
zIndex: this.zIndex
};
},
slotScope: function slotScope() {
return {
cancel: this.onCancel,
close: this.onClose,
hide: this.hide,
ok: this.onOk,
visible: this.isVisible
};
},
computeIgnoreEnforceFocusSelector: function computeIgnoreEnforceFocusSelector() {
// Normalize to an single selector with selectors separated by `,`
return concat(this.ignoreEnforceFocusSelector).filter(identity).join(',').trim();
},
computedAttrs: function computedAttrs() {
// If the parent has a scoped style attribute, and the modal
// is portalled, add the scoped attribute to the modal wrapper
var scopedStyleAttrs = !this.static ? this.scopedStyleAttrs : {};
return _objectSpread(_objectSpread(_objectSpread({}, scopedStyleAttrs), this.bvAttrs), {}, {
id: this.modalOuterId
});
},
computedModalAttrs: function computedModalAttrs() {
var isVisible = this.isVisible,
ariaLabel = this.ariaLabel;
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: _defineProperty({}, MODEL_PROP_NAME, function (newValue, oldValue) {
if (newValue !== oldValue) {
this[newValue ? 'show' : 'hide']();
}
}),
created: function created() {
// Define non-reactive properties
this.$_observer = null;
this.$_returnFocus = this.returnFocus || null;
},
mounted: function 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: function beforeDestroy() {
// Ensure everything is back to normal
this.setObserver(false);
if (this.isVisible) {
this.isVisible = false;
this.isShow = false;
this.isTransitioning = false;
}
},
methods: {
setObserver: function setObserver() {
var 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: function updateModel(value) {
if (value !== this[MODEL_PROP_NAME]) {
this.$emit(MODEL_EVENT_NAME, value);
}
},
// Private method to create a BvModalEvent object
buildEvent: function buildEvent(type) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
return new BvModalEvent(type, _objectSpread(_objectSpread({
// Default options
cancelable: false,
target: this.$refs.modal || this.$el || null,
relatedTarget: null,
trigger: null
}, options), {}, {
// Options that can't be overridden
vueTarget: this,
componentId: this.modalId
}));
},
// Public method to show modal
show: function 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.$once(EVENT_NAME_HIDDEN, this.show);
/* istanbul ignore next */
return;
}
this.isOpening = true; // Set the element to return focus to when closed
this.$_returnFocus = this.$_returnFocus || this.getActiveElement();
var showEvt = this.buildEvent(EVENT_NAME_SHOW, {
cancelable: true
});
this.emitEvent(showEvt); // Don't show if canceled
if (showEvt.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: function hide() {
var trigger = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
if (!this.isVisible || this.isClosing) {
/* istanbul ignore next */
return;
}
this.isClosing = true;
var hideEvt = 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, hideEvt);
} else if (trigger === BUTTON_CANCEL) {
this.$emit(EVENT_NAME_CANCEL, hideEvt);
} else if (trigger === BUTTON_CLOSE) {
this.$emit(EVENT_NAME_CLOSE, hideEvt);
}
this.emitEvent(hideEvt); // Hide if not canceled
if (hideEvt.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: function 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: function getActiveElement() {
// Returning focus to `document.body` may cause unwanted scrolls,
// so we exclude setting focus on body
var 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: function doShow() {
var _this = this;
/* 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(function () {
// 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(function () {
// Observe changes in modal content and adjust if necessary
// In a `$nextTick()` in case modal content is lazy
_this.setObserver(true);
});
});
},
// Transition handlers
onBeforeEnter: function onBeforeEnter() {
this.isTransitioning = true;
this.setResizeEvent(true);
},
onEnter: function onEnter() {
var _this2 = this;
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(function () {
requestAF(function () {
_this2.isShow = true;
});
});
},
onAfterEnter: function onAfterEnter() {
var _this3 = this;
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(function () {
_this3.emitEvent(_this3.buildEvent(EVENT_NAME_SHOWN));
_this3.setEnforceFocus(true);
_this3.$nextTick(function () {
// Delayed in a `$nextTick()` to allow users time to pre-focus
// an element if the wish
_this3.focusFirst();
});
});
},
onBeforeLeave: function onBeforeLeave() {
this.isTransitioning = true;
this.setResizeEvent(false);
this.setEnforceFocus(false);
},
onLeave: function onLeave() {
// Remove the 'show' class
this.isShow = false;
},
onAfterLeave: function onAfterLeave() {
var _this4 = this;
this.isBlock = false;
this.isTransitioning = false;
this.isModalOverflowing = false;
this.isHidden = true;
this.$nextTick(function () {
_this4.isClosing = false;
modalManager.unregisterModal(_this4);
_this4.returnFocusTo(); // TODO: Need to find a way to pass the `trigger` property
// to the `hidden` event, not just only the `hide` event
_this4.emitEvent(_this4.buildEvent(EVENT_NAME_HIDDEN));
});
},
emitEvent: function emitEvent(bvEvent) {
var type = bvEvent.type; // 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: function onDialogMousedown() {
var _this5 = this;
// Watch to see if the matching mouseup event occurs outside the dialog
// And if it does, cancel the clickOut handler
var modal = this.$refs.modal;
var onceModalMouseup = function onceModalMouseup(event) {
eventOff(modal, 'mouseup', onceModalMouseup, EVENT_OPTIONS_NO_CAPTURE);
if (event.target === modal) {
_this5.ignoreBackdropClick = true;
}
};
eventOn(modal, 'mouseup', onceModalMouseup, EVENT_OPTIONS_NO_CAPTURE);
},
onClickOut: function 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: function onOk() {
this.hide(BUTTON_OK);
},
onCancel: function onCancel() {
this.hide(BUTTON_CANCEL);
},
onClose: function onClose() {
this.hide(BUTTON_CLOSE);
},
onEsc: function onEsc(event) {
// If ESC pressed, hide modal
if (event.keyCode === CODE_ESC && this.isVisible && !this.noCloseOnEsc) {
this.hide(TRIGGER_ESC);
}
},
// Document focusin listener
focusHandler: function focusHandler(event) {
// If focus leaves modal content, bring it back
var content = this.$refs.content;
var target = event.target;
if (this.noEnforceFocus || !this.isTop || !this.isVisible || !content || document === target || contains(content, target) || this.computeIgnoreEnforceFocusSelector && closest(this.computeIgnoreEnforceFocusSelector, target, true)) {
return;
}
var tabables = getTabables(this.$refs.content);
var bottomTrap = this.$refs['bottom-trap'];
var 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: function setEnforceFocus(on) {
this.listenDocument(on, 'focusin', this.focusHandler);
},
// Resize listener
setResizeEvent: function setResizeEvent(on) {
this.listenWindow(on, 'resize', this.checkModalOverflow);
this.listenWindow(on, 'orientationchange', this.checkModalOverflow);
},
// Root listener handlers
showHandler: function showHandler(id, triggerEl) {
if (id === this.modalId) {
this.$_returnFocus = triggerEl || this.getActiveElement();
this.show();
}
},
hideHandler: function hideHandler(id) {
if (id === this.modalId) {
this.hide('event');
}
},
toggleHandler: function toggleHandler(id, triggerEl) {
if (id === this.modalId) {
this.toggle(triggerEl);
}
},
modalListener: function 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: function focusFirst() {
var _this6 = this;
// Don't try and focus if we are SSR
if (IS_BROWSER) {
requestAF(function () {
var modal = _this6.$refs.modal;
var content = _this6.$refs.content;
var activeElement = _this6.getActiveElement(); // If the modal contains the activeElement, we don't do anything
if (modal && content && !(activeElement && contains(content, activeElement))) {
var ok = _this6.$refs['ok-button'];
var cancel = _this6.$refs['cancel-button'];
var close = _this6.$refs['close-button']; // Focus the appropriate button or modal content wrapper
var autoFocus = _this6.autoFocusButton;
/* istanbul ignore next */
var 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)
_this6.$nextTick(function () {
modal.scrollTop = 0;
});
}
}
});
}
},
returnFocusTo: function returnFocusTo() {
// Prefer `returnFocus` prop over event specified
// `return_focus` value
var el = this.returnFocus || this.$_returnFocus || null;
this.$_returnFocus = null;
this.$nextTick(function () {
// 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: function checkModalOverflow() {
if (this.isVisible) {
var modal = this.$refs.modal;
this.isModalOverflowing = modal.scrollHeight > document.documentElement.clientHeight;
}
},
makeModal: function makeModal(h) {
// Modal header
var $header = h();
if (!this.hideHeader) {
// TODO: Rename slot to `header` and deprecate `modal-header`
var $modalHeader = this.normalizeSlot(SLOT_NAME_MODAL_HEADER, this.slotScope);
if (!$modalHeader) {
var $closeButton = h();
if (!this.hideHeaderClose) {
$closeButton = h(BButtonClose, {
props: {
content: this.headerCloseContent,
disabled: this.isTransitioning,
ariaLabel: this.headerCloseLabel,
textVariant: this.headerCloseVariant || this.headerTextVariant
},
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.titleClasses,
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('header', {
staticClass: 'modal-header',
class: this.headerClasses,
attrs: {
id: this.modalHeaderId
},
ref: 'header'
}, [$modalHeader]);
} // Modal body
var $body = h('div', {
staticClass: 'modal-body',
class: this.bodyClasses,
attrs: {
id: this.modalBodyId
},
ref: 'body'
}, this.normalizeSlot(SLOT_NAME_DEFAULT, this.slotScope)); // Modal footer
var $footer = h();
if (!this.hideFooter) {
// TODO: Rename slot to `footer` and deprecate `modal-footer`
var $modalFooter = this.normalizeSlot(SLOT_NAME_MODAL_FOOTER, this.slotScope);
if (!$modalFooter) {
var $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));
}
var $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('footer', {
staticClass: 'modal-footer',
class: this.footerClasses,
attrs: {
id: this.modalFooterId
},
ref: 'footer'
}, [$modalFooter]);
} // Assemble modal content
var $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
var $tabTrapTop = h();
var $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
var $modalDialog = h('div', {
staticClass: 'modal-dialog',
class: this.dialogClasses,
on: {
mousedown: this.onDialogMousedown
},
ref: 'dialog'
}, [$tabTrapTop, $modalContent, $tabTrapBottom]); // Modal
var $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
var $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-".concat(this[COMPONENT_UID_KEY])
}, [$modal, $backdrop]);
}
},
render: function render(h) {
if (this.static) {
return this.lazy && this.isHidden ? h() : this.makeModal(h);
} else {
return this.isHidden ? h() : h(BVTransporter, [this.makeModal(h)]);
}
}
});