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
224 lines (211 loc) • 11.1 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 _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
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 { EVENT_NAME_HEAD_CLICKED } from '../../../constants/events';
import { CODE_ENTER, CODE_SPACE } from '../../../constants/key-codes';
import { PROP_TYPE_ARRAY_OBJECT_STRING, PROP_TYPE_STRING } from '../../../constants/props';
import { SLOT_NAME_THEAD_TOP } from '../../../constants/slots';
import { stopEvent } from '../../../utils/events';
import { htmlOrText } from '../../../utils/html';
import { identity } from '../../../utils/identity';
import { isUndefinedOrNull } from '../../../utils/inspect';
import { noop } from '../../../utils/noop';
import { makeProp } from '../../../utils/props';
import { safeVueInstance } from '../../../utils/safe-vue-instance';
import { startCase } from '../../../utils/string';
import { BThead } from '../thead';
import { BTfoot } from '../tfoot';
import { BTr } from '../tr';
import { BTh } from '../th';
import { filterEvent } from './filter-event';
import { textSelectionActive } from './text-selection-active';
// --- Helper methods ---
var getHeadSlotName = function getHeadSlotName(value) {
return "head(".concat(value || '', ")");
};
var getFootSlotName = function getFootSlotName(value) {
return "foot(".concat(value || '', ")");
};
// --- Props ---
export var props = {
// Any Bootstrap theme variant (or custom)
headRowVariant: makeProp(PROP_TYPE_STRING),
// 'light', 'dark' or `null` (or custom)
headVariant: makeProp(PROP_TYPE_STRING),
theadClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
theadTrClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING)
};
// --- Mixin ---
// @vue/component
export var theadMixin = extend({
props: props,
methods: {
fieldClasses: function fieldClasses(field) {
// Header field (<th>) classes
return [field.class ? field.class : '', field.thClass ? field.thClass : ''];
},
headClicked: function headClicked(event, field, isFoot) {
if (this.stopIfBusy && this.stopIfBusy(event)) {
// If table is busy (via provider) then don't propagate
return;
} else if (filterEvent(event)) {
// Clicked on a non-disabled control so ignore
return;
} else if (textSelectionActive(this.$el)) {
// User is selecting text, so ignore
/* istanbul ignore next: JSDOM doesn't support getSelection() */
return;
}
stopEvent(event);
this.$emit(EVENT_NAME_HEAD_CLICKED, field.key, field, event, isFoot);
},
renderThead: function renderThead() {
var _this = this;
var isFoot = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
var _safeVueInstance = safeVueInstance(this),
fields = _safeVueInstance.computedFields,
isSortable = _safeVueInstance.isSortable,
isSelectable = _safeVueInstance.isSelectable,
headVariant = _safeVueInstance.headVariant,
footVariant = _safeVueInstance.footVariant,
headRowVariant = _safeVueInstance.headRowVariant,
footRowVariant = _safeVueInstance.footRowVariant;
var h = this.$createElement;
// In always stacked mode, we don't bother rendering the head/foot
// Or if no field headings (empty table)
if (this.isStackedAlways || fields.length === 0) {
return h();
}
var hasHeadClickListener = isSortable || this.hasListener(EVENT_NAME_HEAD_CLICKED);
// Reference to `selectAllRows` and `clearSelected()`, if table is selectable
var selectAllRows = isSelectable ? this.selectAllRows : noop;
var clearSelected = isSelectable ? this.clearSelected : noop;
// Helper function to generate a field <th> cell
var makeCell = function makeCell(field, colIndex) {
var label = field.label,
labelHtml = field.labelHtml,
variant = field.variant,
stickyColumn = field.stickyColumn,
key = field.key;
var ariaLabel = null;
if (!field.label.trim() && !field.headerTitle) {
// In case field's label and title are empty/blank
// We need to add a hint about what the column is about for non-sighted users
/* istanbul ignore next */
ariaLabel = startCase(field.key);
}
var on = {};
if (hasHeadClickListener) {
on.click = function (event) {
_this.headClicked(event, field, isFoot);
};
on.keydown = function (event) {
var keyCode = event.keyCode;
if (keyCode === CODE_ENTER || keyCode === CODE_SPACE) {
_this.headClicked(event, field, isFoot);
}
};
}
var sortAttrs = isSortable ? _this.sortTheadThAttrs(key, field, isFoot) : {};
var sortClass = isSortable ? _this.sortTheadThClasses(key, field, isFoot) : null;
var sortLabel = isSortable ? _this.sortTheadThLabel(key, field, isFoot) : null;
var data = {
class: [{
// We need to make the header cell relative when we have
// a `.sr-only` sort label to work around overflow issues
'position-relative': sortLabel && !stickyColumn
}, _this.fieldClasses(field), sortClass],
props: {
variant: variant,
stickyColumn: stickyColumn
},
style: field.thStyle || {},
attrs: _objectSpread(_objectSpread({
// We only add a `tabindex` of `0` if there is a head-clicked listener
// and the current field is sortable
tabindex: hasHeadClickListener && field.sortable ? '0' : null,
abbr: field.headerAbbr || null,
title: field.headerTitle || null,
'aria-colindex': colIndex + 1,
'aria-label': ariaLabel
}, _this.getThValues(null, key, field.thAttr, isFoot ? 'foot' : 'head', {})), sortAttrs),
on: on,
key: key
};
// Handle edge case where in-document templates are used with new
// `v-slot:name` syntax where the browser lower-cases the v-slot's
// name (attributes become lower cased when parsed by the browser)
// We have replaced the square bracket syntax with round brackets
// to prevent confusion with dynamic slot names
var slotNames = [getHeadSlotName(key), getHeadSlotName(key.toLowerCase()), getHeadSlotName()];
// Footer will fallback to header slot names
if (isFoot) {
slotNames = [getFootSlotName(key), getFootSlotName(key.toLowerCase()), getFootSlotName()].concat(_toConsumableArray(slotNames));
}
var scope = {
label: label,
column: key,
field: field,
isFoot: isFoot,
// Add in row select methods
selectAllRows: selectAllRows,
clearSelected: clearSelected
};
var $content = _this.normalizeSlot(slotNames, scope) || h('div', {
domProps: htmlOrText(labelHtml, label)
});
var $srLabel = sortLabel ? h('span', {
staticClass: 'sr-only'
}, " (".concat(sortLabel, ")")) : null;
// Return the header cell
return h(BTh, data, [$content, $srLabel].filter(identity));
};
// Generate the array of <th> cells
var $cells = fields.map(makeCell).filter(identity);
// Generate the row(s)
var $trs = [];
if (isFoot) {
$trs.push(h(BTr, {
class: this.tfootTrClass,
props: {
variant: isUndefinedOrNull(footRowVariant) ? headRowVariant : /* istanbul ignore next */footRowVariant
}
}, $cells));
} else {
var scope = {
columns: fields.length,
fields: fields,
// Add in row select methods
selectAllRows: selectAllRows,
clearSelected: clearSelected
};
$trs.push(this.normalizeSlot(SLOT_NAME_THEAD_TOP, scope) || h());
$trs.push(h(BTr, {
class: this.theadTrClass,
props: {
variant: headRowVariant
}
}, $cells));
}
return h(isFoot ? BTfoot : BThead, {
class: (isFoot ? this.tfootClass : this.theadClass) || null,
props: isFoot ? {
footVariant: footVariant || headVariant || null
} : {
headVariant: headVariant || null
},
key: isFoot ? 'bv-tfoot' : 'bv-thead'
}, $trs);
}
}
});