Skip to content

Commit f967d4b

Browse files
VividLemonVividLemon
authored
Merge pull request #780 from devhus/main
A few fixes to table componeted, new stacked label prop
2 parents 03cd8e0 + e025d80 commit f967d4b

File tree

3 files changed

+96
-57
lines changed

3 files changed

+96
-57
lines changed

‎packages/bootstrap-vue-3/src/components/BTable/BTable.vue

Lines changed: 24 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,9 @@
9898
v-bind="field.tdAttr"
9999
:class="getFieldRowClasses(field, item)"
100100
>
101+
<label v-if="stacked && labelStackedBoolean" class="b-table-stacked-label">{{
102+
getFieldHeadLabel(field)
103+
}}</label>
101104
<slot
102105
v-if="$slots['cell(' + field.key + ')'] || $slots['cell()']"
103106
:name="$slots['cell(' + field.key + ')'] ? 'cell(' + field.key + ')' : 'cell()'"
@@ -222,6 +225,8 @@ interface BTableProps {
222225
responsive?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
223226
small?: Booleanish
224227
striped?: Booleanish
228+
stacked?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' // boolean | Breakpoint
229+
labelStacked?: boolean
225230
variant?: ColorVariant
226231
sortBy?: string
227232
sortDesc?: Booleanish
@@ -254,6 +259,8 @@ const props = withDefaults(defineProps<BTableProps>(), {
254259
responsive: false,
255260
small: false,
256261
striped: false,
262+
labelStacked: false,
263+
stacked: false,
257264
sortDesc: false,
258265
sortInternal: true,
259266
selectable: false,
@@ -312,11 +319,12 @@ const sortDescBoolean = useBooleanish(toRef(props, 'sortDesc'))
312319
const sortInternalBoolean = useBooleanish(toRef(props, 'sortInternal'))
313320
const selectableBoolean = useBooleanish(toRef(props, 'selectable'))
314321
const stickySelectBoolean = useBooleanish(toRef(props, 'stickySelect'))
322+
const labelStackedBoolean = useBooleanish(toRef(props, 'labelStacked'))
315323
const busyBoolean = useBooleanish(toRef(props, 'busy'))
316324
const showEmptyBoolean = useBooleanish(toRef(props, 'showEmpty'))
317-
const noProviderPagingBoolean = useBooleanish(toRef(props, 'showEmpty'))
318-
const noProviderSortingBoolean = useBooleanish(toRef(props, 'showEmpty'))
319-
const noProviderFilteringBoolean = useBooleanish(toRef(props, 'showEmpty'))
325+
const noProviderPagingBoolean = useBooleanish(toRef(props, 'noProviderPaging'))
326+
const noProviderSortingBoolean = useBooleanish(toRef(props, 'noProviderSorting'))
327+
const noProviderFilteringBoolean = useBooleanish(toRef(props, 'noProviderFiltering'))
320328
321329
const internalBusyFlag = ref(busyBoolean.value)
322330
itemHelper.filterEvent.value = async (items) => {
@@ -351,6 +359,7 @@ const containerAttrs = computed(() => ({
351359
hover: props.hover,
352360
responsive: props.responsive,
353361
striped: props.striped,
362+
stacked: props.stacked,
354363
small: props.small,
355364
tableClass: tableClasses.value,
356365
tableVariant: props.variant,
@@ -376,14 +385,21 @@ const isSortable = computed(
376385
377386
const requireItemsMapping = computed(() => isSortable.value && sortInternalBoolean.value === true)
378387
const computedItems = computed(() => {
379-
if (usesProvider.value) return itemHelper.internalItems.value
380-
return requireItemsMapping.value
388+
const items = usesProvider.value
389+
? itemHelper.internalItems.value
390+
: requireItemsMapping.value
381391
? itemHelper.mapItems(props.fields, props.items, props, {
382392
isSortable,
383393
isFilterableTable,
384394
sortDescBoolean,
385395
})
386396
: props.items
397+
398+
if (props.perPage !== undefined) {
399+
const startIndex = (props.currentPage - 1) * props.perPage
400+
return items.splice(startIndex, props.perPage)
401+
}
402+
return items
387403
})
388404
389405
const getFieldHeadLabel = (field: TableField) => {
@@ -589,6 +605,7 @@ const providerPropsWatch = async (prop: string, val: any, oldVal: any) => {
589605
590606
//stop provide when paging
591607
const inNoProvider = (key: NoProviderTypes) => props.noProvider && props.noProvider.includes(key)
608+
const notifyFiltered = !['currentPage', 'perPage'].includes(prop)
592609
const noProvideWhenPaging =
593610
['currentPage', 'perPage'].includes(prop) &&
594611
(inNoProvider('paging') || noProviderPagingBoolean.value === true)
@@ -604,6 +621,8 @@ const providerPropsWatch = async (prop: string, val: any, oldVal: any) => {
604621
}
605622
606623
await callItemsProvider()
624+
625+
if (notifyFiltered) itemHelper.notifyFilteredItems()
607626
}
608627
609628
watch(

‎packages/bootstrap-vue-3/src/components/BTable/_table.scss

Lines changed: 56 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,66 @@
1-
.table.b-table.b-table-stacked {
2-
display: block;
3-
width: 100%;
4-
}
5-
6-
.table.b-table.b-table-stacked > tfoot,
7-
.table.b-table.b-table-stacked > tfoot > tr.b-table-bottom-row,
8-
.table.b-table.b-table-stacked > tfoot > tr.b-table-top-row,
9-
.table.b-table.b-table-stacked > thead,
10-
.table.b-table.b-table-stacked > thead > tr.b-table-bottom-row,
11-
.table.b-table.b-table-stacked > thead > tr.b-table-top-row {
1+
.b-table-stacked-label {
122
display: none;
3+
font-weight: bold;
134
}
145

15-
.table.b-table.b-table-stacked > caption,
16-
.table.b-table.b-table-stacked > tbody,
17-
.table.b-table.b-table-stacked > tbody > tr,
18-
.table.b-table.b-table-stacked > tbody > tr > td,
19-
.table.b-table.b-table-stacked > tbody > tr > th {
20-
display: block;
21-
}
6+
@each $breakpoint in map-keys($grid-breakpoints) {
7+
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
228

23-
.table.b-table.b-table-stacked > tbody > tr > :first-child,
24-
.table.b-table.b-table-stacked > tbody > tr > [rowspan] + td,
25-
.table.b-table.b-table-stacked > tbody > tr > [rowspan] + th {
26-
border-top-width: 3px;
27-
}
9+
@include media-breakpoint-down($breakpoint, $grid-breakpoints) {
10+
.table.b-table.b-table-stacked#{$infix} {
11+
display: block;
12+
width: 100%;
13+
}
2814

29-
.table.b-table.b-table-stacked > tbody > tr > [data-label]::before {
30-
content: attr(data-label);
31-
width: 40%;
32-
float: left;
33-
text-align: right;
34-
word-wrap: break-word;
35-
font-weight: 700;
36-
font-style: normal;
37-
padding: 0 0.5rem 0 0;
38-
margin: 0;
39-
}
15+
.table.b-table.b-table-stacked#{$infix} > tfoot,
16+
.table.b-table.b-table-stacked#{$infix} > tfoot > tr.b-table-bottom-row,
17+
.table.b-table.b-table-stacked#{$infix} > tfoot > tr.b-table-top-row,
18+
.table.b-table.b-table-stacked#{$infix} > thead,
19+
.table.b-table.b-table-stacked#{$infix} > thead > tr.b-table-bottom-row,
20+
.table.b-table.b-table-stacked#{$infix} > thead > tr.b-table-top-row {
21+
display: none;
22+
}
4023

41-
.table.b-table.b-table-stacked > tbody > tr > [data-label]::after {
42-
display: block;
43-
clear: both;
44-
content: "";
45-
}
24+
.table.b-table.b-table-stacked#{$infix} > caption,
25+
.table.b-table.b-table-stacked#{$infix} > tbody,
26+
.table.b-table.b-table-stacked#{$infix} > tbody > tr,
27+
.table.b-table.b-table-stacked#{$infix} > tbody > tr > td,
28+
.table.b-table.b-table-stacked#{$infix} > tbody > tr > td > .b-table-stacked-label,
29+
.table.b-table.b-table-stacked#{$infix} > tbody > tr > th {
30+
display: block;
31+
}
32+
33+
.table.b-table.b-table-stacked#{$infix} > tbody > tr > :first-child,
34+
.table.b-table.b-table-stacked#{$infix} > tbody > tr > [rowspan] + td,
35+
.table.b-table.b-table-stacked#{$infix} > tbody > tr > [rowspan] + th {
36+
border-top-width: 3px;
37+
}
38+
39+
.table.b-table.b-table-stacked#{$infix} > tbody > tr > [data-label]::before {
40+
content: attr(data-label);
41+
width: 40%;
42+
float: left;
43+
text-align: right;
44+
word-wrap: break-word;
45+
font-weight: 700;
46+
font-style: normal;
47+
padding: 0 0.5rem 0 0;
48+
margin: 0;
49+
}
4650

47-
.table.b-table.b-table-stacked > tbody > tr > [data-label] > div {
48-
display: inline-block;
49-
width: 60%;
50-
padding: 0 0 0 0.5rem;
51-
margin: 0;
51+
.table.b-table.b-table-stacked#{$infix} > tbody > tr > [data-label]::after {
52+
display: block;
53+
clear: both;
54+
content: "";
55+
}
56+
57+
.table.b-table.b-table-stacked#{$infix} > tbody > tr > [data-label] > div {
58+
display: inline-block;
59+
width: 60%;
60+
padding: 0 0 0 0.5rem;
61+
margin: 0;
62+
}
63+
}
5264
}
5365

5466
.b-table-sticky-header,

‎packages/bootstrap-vue-3/src/components/BTable/itemHelper.ts

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -38,9 +38,9 @@ const useItemHelper = () => {
3838
internalItems.value = cloneDeep(items)
3939
if ('isFilterableTable' in flags && flags.isFilterableTable.value === true && props.filter) {
4040
internalItems.value = filterItems(internalItems.value, props.filter, props.filterable)
41-
if (filterEvent.value) {
42-
filterEvent.value(internalItems.value)
43-
}
41+
// if (filterEvent.value) {
42+
// filterEvent.value(internalItems.value)
43+
// }
4444
}
4545
if ('isSortable' in flags && flags.isSortable.value === true) {
4646
internalItems.value = sortItems(
@@ -53,10 +53,10 @@ const useItemHelper = () => {
5353
props.sortCompare
5454
)
5555
}
56-
if (props.perPage !== undefined) {
57-
const startIndex = (props.currentPage - 1) * props.perPage
58-
internalItems.value = internalItems.value.splice(startIndex, props.perPage)
59-
}
56+
// if (props.perPage !== undefined) {
57+
// const startIndex = (props.currentPage - 1) * props.perPage
58+
// internalItems.value = internalItems.value.splice(startIndex, props.perPage)
59+
// }
6060
return internalItems.value
6161
}
6262

@@ -96,7 +96,8 @@ const useItemHelper = () => {
9696
(item) =>
9797
Object.entries(item).filter((item) => {
9898
const [key, val] = item
99-
if (key[0] === '_' || (filterable.length > 0 && !filterable.includes(key))) return false
99+
if (!val || key[0] === '_' || (filterable.length > 0 && !filterable.includes(key)))
100+
return false
100101
const itemValue: string =
101102
typeof val === 'object'
102103
? JSON.stringify(Object.values(val))
@@ -118,12 +119,19 @@ const useItemHelper = () => {
118119
}
119120
}
120121

122+
const notifyFilteredItems = () => {
123+
if (filterEvent.value) {
124+
filterEvent.value(internalItems.value)
125+
}
126+
}
127+
121128
return {
122129
normaliseFields,
123130
mapItems,
124131
internalItems,
125132
updateInternalItems,
126133
filterEvent,
134+
notifyFilteredItems,
127135
}
128136
}
129137

0 commit comments

Comments
 (0)