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/src/components/table/helpers/ |
import { Vue } 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 { 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 ---
const getHeadSlotName = value => `head(${value || ''})`
const getFootSlotName = value => `foot(${value || ''})`
// --- Props ---
export const 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 const theadMixin = Vue.extend({
props,
methods: {
fieldClasses(field) {
// Header field (<th>) classes
return [field.class ? field.class : '', field.thClass ? field.thClass : '']
},
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(isFoot = false) {
const {
computedFields: fields,
isSortable,
isSelectable,
headVariant,
footVariant,
headRowVariant,
footRowVariant
} = this
const 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()
}
const hasHeadClickListener = isSortable || this.hasListener(EVENT_NAME_HEAD_CLICKED)
// Reference to `selectAllRows` and `clearSelected()`, if table is selectable
const selectAllRows = isSelectable ? this.selectAllRows : noop
const clearSelected = isSelectable ? this.clearSelected : noop
// Helper function to generate a field <th> cell
const makeCell = (field, colIndex) => {
const { label, labelHtml, variant, stickyColumn, key } = field
let 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)
}
const on = {}
if (hasHeadClickListener) {
on.click = event => {
this.headClicked(event, field, isFoot)
}
on.keydown = event => {
const keyCode = event.keyCode
if (keyCode === CODE_ENTER || keyCode === CODE_SPACE) {
this.headClicked(event, field, isFoot)
}
}
}
const sortAttrs = isSortable ? this.sortTheadThAttrs(key, field, isFoot) : {}
const sortClass = isSortable ? this.sortTheadThClasses(key, field, isFoot) : null
const sortLabel = isSortable ? this.sortTheadThLabel(key, field, isFoot) : null
const data = {
class: [this.fieldClasses(field), sortClass],
props: { variant, stickyColumn },
style: field.thStyle || {},
attrs: {
// 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,
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
let slotNames = [
getHeadSlotName(key),
getHeadSlotName(key.toLowerCase()),
getHeadSlotName()
]
// Footer will fallback to header slot names
if (isFoot) {
slotNames = [
getFootSlotName(key),
getFootSlotName(key.toLowerCase()),
getFootSlotName(),
...slotNames
]
}
const scope = {
label,
column: key,
field,
isFoot,
// Add in row select methods
selectAllRows,
clearSelected
}
const $content =
this.normalizeSlot(slotNames, scope) ||
h('div', { domProps: htmlOrText(labelHtml, label) })
const $srLabel = sortLabel ? h('span', { staticClass: 'sr-only' }, ` (${sortLabel})`) : null
// Return the header cell
return h(BTh, data, [$content, $srLabel].filter(identity))
}
// Generate the array of <th> cells
const $cells = fields.map(makeCell).filter(identity)
// Generate the row(s)
const $trs = []
if (isFoot) {
$trs.push(
h(
BTr,
{
class: this.tfootTrClass,
props: {
variant: isUndefinedOrNull(footRowVariant)
? headRowVariant
: /* istanbul ignore next */ footRowVariant
}
},
$cells
)
)
} else {
const scope = {
columns: fields.length,
fields,
// Add in row select methods
selectAllRows,
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
)
}
}
})