bootstrap-view
Version:
With more than 85 components, over 45 available plugins, several directives, and 1000+ icons, BootstrapVue provides one of the most comprehensive implementations of the Bootstrap v4 component and grid system available for Vue.js v2.6, complete with extens
174 lines (168 loc) • 7.74 kB
JavaScript
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _readOnlyError(r) { throw new TypeError('"' + r + '" is read-only'); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import { extend } from '../../vue';
import { NAME_TAB } from '../../constants/components';
import { MODEL_EVENT_NAME_PREFIX } from '../../constants/events';
import { PROP_TYPE_ARRAY_OBJECT_STRING, PROP_TYPE_BOOLEAN, PROP_TYPE_OBJECT, PROP_TYPE_STRING } from '../../constants/props';
import { SLOT_NAME_TITLE } from '../../constants/slots';
import { sortKeys } from '../../utils/object';
import { makeProp, makePropsConfigurable } from '../../utils/props';
import { idMixin, props as idProps } from '../../mixins/id';
import { normalizeSlotMixin } from '../../mixins/normalize-slot';
import { BVTransition } from '../transition/bv-transition';
// --- Constants ---
var MODEL_PROP_NAME_ACTIVE = 'active';
var MODEL_EVENT_NAME_ACTIVE = MODEL_EVENT_NAME_PREFIX + MODEL_PROP_NAME_ACTIVE;
// --- Props ---
export var props = makePropsConfigurable(sortKeys(_objectSpread(_objectSpread({}, idProps), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, MODEL_PROP_NAME_ACTIVE, makeProp(PROP_TYPE_BOOLEAN, false)), "buttonId", makeProp(PROP_TYPE_STRING)), "disabled", makeProp(PROP_TYPE_BOOLEAN, false)), "lazy", makeProp(PROP_TYPE_BOOLEAN, false)), "noBody", makeProp(PROP_TYPE_BOOLEAN, false)), "tag", makeProp(PROP_TYPE_STRING, 'div')), "title", makeProp(PROP_TYPE_STRING)), "titleItemClass", makeProp(PROP_TYPE_ARRAY_OBJECT_STRING)), "titleLinkAttributes", makeProp(PROP_TYPE_OBJECT)), "titleLinkClass", makeProp(PROP_TYPE_ARRAY_OBJECT_STRING)))), NAME_TAB);
// --- Main component ---
// @vue/component
export var BTab = /*#__PURE__*/extend({
name: NAME_TAB,
mixins: [idMixin, normalizeSlotMixin],
inject: {
getBvTabs: {
default: function _default() {
return function () {
return {};
};
}
}
},
props: props,
data: function data() {
return {
localActive: this[MODEL_PROP_NAME_ACTIVE] && !this.disabled
};
},
computed: {
bvTabs: function bvTabs() {
return this.getBvTabs();
},
// For parent sniffing of child
_isTab: function _isTab() {
return true;
},
tabClasses: function tabClasses() {
var active = this.localActive,
disabled = this.disabled;
return [{
active: active,
disabled: disabled,
'card-body': this.bvTabs.card && !this.noBody
},
// Apply <b-tabs> `activeTabClass` styles when this tab is active
active ? this.bvTabs.activeTabClass : null];
},
controlledBy: function controlledBy() {
return this.buttonId || this.safeId('__BV_tab_button__');
},
computedNoFade: function computedNoFade() {
return !(this.bvTabs.fade || false);
},
computedLazy: function computedLazy() {
return this.bvTabs.lazy || this.lazy;
}
},
watch: _defineProperty(_defineProperty(_defineProperty({}, MODEL_PROP_NAME_ACTIVE, function (newValue, oldValue) {
if (newValue !== oldValue) {
if (newValue) {
// If activated post mount
this.activate();
} else {
/* istanbul ignore next */
if (!this.deactivate()) {
// Tab couldn't be deactivated, so we reset the synced active prop
// Deactivation will fail if no other tabs to activate
this.$emit(MODEL_EVENT_NAME_ACTIVE, this.localActive);
}
}
}
}), "disabled", function disabled(newValue, oldValue) {
if (newValue !== oldValue) {
var firstTab = this.bvTabs.firstTab;
if (newValue && this.localActive && firstTab) {
this.localActive = false;
firstTab();
}
}
}), "localActive", function localActive(newValue) {
// Make `active` prop work with `.sync` modifier
this.$emit(MODEL_EVENT_NAME_ACTIVE, newValue);
}),
mounted: function mounted() {
// Inform `<b-tabs>` of our presence
this.registerTab();
},
updated: function updated() {
// Force the tab button content to update (since slots are not reactive)
// Only done if we have a title slot, as the title prop is reactive
var updateButton = this.bvTabs.updateButton;
if (updateButton && this.hasNormalizedSlot(SLOT_NAME_TITLE)) {
updateButton(this);
}
},
beforeDestroy: function beforeDestroy() {
// Inform `<b-tabs>` of our departure
this.unregisterTab();
},
methods: {
// Private methods
registerTab: function registerTab() {
// Inform `<b-tabs>` of our presence
var registerTab = this.bvTabs.registerTab;
if (registerTab) {
registerTab(this);
}
},
unregisterTab: function unregisterTab() {
// Inform `<b-tabs>` of our departure
var unregisterTab = this.bvTabs.unregisterTab;
if (unregisterTab) {
unregisterTab(this);
}
},
// Public methods
activate: function activate() {
// Not inside a `<b-tabs>` component or tab is disabled
var activateTab = this.bvTabs.activateTab;
return activateTab && !this.disabled ? activateTab(this) : false;
},
deactivate: function deactivate() {
// Not inside a `<b-tabs>` component or not active to begin with
var deactivateTab = this.bvTabs.deactivateTab;
return deactivateTab && this.localActive ? deactivateTab(this) : false;
}
},
render: function render(h) {
var localActive = this.localActive;
var $content = h(this.tag, {
staticClass: 'tab-pane',
class: this.tabClasses,
directives: [{
name: 'show',
value: localActive
}],
attrs: {
role: 'tabpanel',
id: this.safeId(),
'aria-hidden': localActive ? 'false' : 'true',
'aria-labelledby': this.controlledBy || null
},
ref: 'panel'
},
// Render content lazily if requested
[localActive || !this.computedLazy ? this.normalizeSlot() : h()]);
return h(BVTransition, {
props: {
mode: 'out-in',
noFade: this.computedNoFade
}
}, [$content]);
}
});