mixin-empty.js
2.88 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
import { extend } from '../../../vue'
import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../../constants/props'
import {
SLOT_NAME_EMPTY,
SLOT_NAME_EMPTYFILTERED,
SLOT_NAME_TABLE_BUSY
} from '../../../constants/slots'
import { htmlOrText } from '../../../utils/html'
import { isFunction } from '../../../utils/inspect'
import { makeProp } from '../../../utils/props'
import { safeVueInstance } from '../../../utils/safe-vue-instance'
import { BTr } from '../tr'
import { BTd } from '../td'
// --- Props ---
export const props = {
emptyFilteredHtml: makeProp(PROP_TYPE_STRING),
emptyFilteredText: makeProp(PROP_TYPE_STRING, 'There are no records matching your request'),
emptyHtml: makeProp(PROP_TYPE_STRING),
emptyText: makeProp(PROP_TYPE_STRING, 'There are no records to show'),
showEmpty: makeProp(PROP_TYPE_BOOLEAN, false)
}
// --- Mixin ---
// @vue/component
export const emptyMixin = extend({
props,
methods: {
renderEmpty() {
const { computedItems: items, computedBusy } = safeVueInstance(this)
const h = this.$createElement
let $empty = h()
if (
this.showEmpty &&
(!items || items.length === 0) &&
!(computedBusy && this.hasNormalizedSlot(SLOT_NAME_TABLE_BUSY))
) {
const {
computedFields: fields,
isFiltered,
emptyText,
emptyHtml,
emptyFilteredText,
emptyFilteredHtml,
tbodyTrClass,
tbodyTrAttr
} = this
$empty = this.normalizeSlot(isFiltered ? SLOT_NAME_EMPTYFILTERED : SLOT_NAME_EMPTY, {
emptyFilteredHtml,
emptyFilteredText,
emptyHtml,
emptyText,
fields,
// Not sure why this is included, as it will always be an empty array
items
})
if (!$empty) {
$empty = h('div', {
class: ['text-center', 'my-2'],
domProps: isFiltered
? htmlOrText(emptyFilteredHtml, emptyFilteredText)
: htmlOrText(emptyHtml, emptyText)
})
}
$empty = h(BTd, { props: { colspan: fields.length || null } }, [
h(
'div',
{
attrs: {
role: 'alert',
'aria-live': 'polite'
}
},
[$empty]
)
])
$empty = h(
BTr,
{
staticClass: 'b-table-empty-row',
class: [
isFunction(tbodyTrClass)
? /* istanbul ignore next */ tbodyTrClass(null, 'row-empty')
: tbodyTrClass
],
attrs: isFunction(tbodyTrAttr)
? /* istanbul ignore next */ tbodyTrAttr(null, 'row-empty')
: tbodyTrAttr,
key: isFiltered ? 'b-empty-filtered-row' : 'b-empty-row'
},
[$empty]
)
}
return $empty
}
}
})