Skip to content
This repository was archived by the owner on Mar 27, 2025. It is now read-only.

Commit 480ac8b

Browse files
committed
feat(BTable): the sort-by prop is now has a shell value to be more flexible and can be used as a v-model, read-only prop, or don't be passed at all.
1 parent 2ca32a8 commit 480ac8b

File tree

2 files changed

+33
-17
lines changed

2 files changed

+33
-17
lines changed

packages/bootstrap-vue-next/src/components/BTable/BTable.vue

Lines changed: 25 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,17 @@
1616
<slot
1717
name="sort-icon"
1818
:field="scope.field"
19-
:sort-by="sortBy"
20-
:selected="scope.field.key === sortBy"
19+
:sort-by="sortByShell"
20+
:selected="scope.field.key === sortByShell"
2121
:is-desc="sortDescBoolean"
2222
:direction="sortDescBoolean ? 'desc' : 'asc'"
2323
>
2424
<span
2525
v-if="isSortable && scope.field.sortable"
2626
class="b-table-sort-icon"
2727
:class="{
28-
sorted: scope.field.key === sortBy,
29-
[`sorted-${sortDescBoolean ? 'desc' : 'asc'}`]: scope.field.key === sortBy,
28+
sorted: scope.field.key === sortByShell,
29+
[`sorted-${sortDescBoolean ? 'desc' : 'asc'}`]: scope.field.key === sortByShell,
3030
}"
3131
/>
3232
</slot>
@@ -169,6 +169,7 @@ const sortDescModel = useVModel(props, 'sortDesc', emit, {passive: true})
169169
170170
const slots = useSlots()
171171
172+
const sortByShell = ref(sortByModel.value)
172173
const liteTable = ref()
173174
174175
const sortDescBoolean = useBooleanish(sortDescModel)
@@ -211,7 +212,8 @@ const {
211212
requireItemsMapping,
212213
sortDescBoolean,
213214
},
214-
usesProvider.value
215+
usesProvider,
216+
sortByShell
215217
)
216218
217219
filteredHandler.value = async (items) => {
@@ -239,9 +241,7 @@ const handleFieldSorting = (field: TableField) => {
239241
const fieldSortable = typeof field === 'string' ? false : field.sortable
240242
if (isSortable.value === true && fieldSortable === true) {
241243
const sortDesc = !sortDescBoolean.value
242-
if (fieldKey !== props.sortBy) {
243-
sortByModel.value = fieldKey
244-
}
244+
sortByShell.value = fieldKey
245245
sortDescModel.value = sortDesc
246246
emit('sorted', fieldKey, sortDesc)
247247
}
@@ -370,10 +370,24 @@ watch(
370370
(val, oldVal) => providerPropsWatch('sortDesc', val, oldVal)
371371
)
372372
373-
onMounted(() => {
374-
if (usesProvider.value) {
375-
callItemsProvider()
373+
watch(
374+
() => sortByModel.value,
375+
(val) => {
376+
if (val === sortByShell.value) return
377+
sortByShell.value = val
376378
}
379+
)
380+
381+
watch(
382+
() => sortByShell.value,
383+
(val) => {
384+
if (val === sortByModel.value || val === undefined) return
385+
emit('update:sortBy', val)
386+
}
387+
)
388+
389+
onMounted(() => {
390+
callItemsProvider()
377391
})
378392
379393
defineExpose({

packages/bootstrap-vue-next/src/components/BTable/tableItems.ts

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,18 +23,19 @@ type TableItemsProcessingProps = {
2323
export const useTableItems = (
2424
tableProps: TableItemsProcessingProps,
2525
flags: Record<string, Ref<boolean>>,
26-
usesProvider: boolean
26+
usesProvider: Ref<boolean>,
27+
sortBy?: Ref<string | undefined>
2728
) => {
2829
const filteredHandler = ref<(items: TableItem[]) => void>()
2930
const internalItems = ref(tableProps.items ?? [])
3031
const displayStartEndIdx = ref([0, internalItems.value.length])
3132
const computedItems = computed<TableItem[]>(() => {
32-
const items = usesProvider
33+
const items = usesProvider.value
3334
? internalItems.value
3435
: flags.requireItemsMapping.value
35-
? mapItems(internalItems, tableProps, flags)
36+
? mapItems(internalItems, tableProps, flags, sortBy)
3637
: tableProps.items ?? []
37-
if (usesProvider && !flags.noProviderPagingBoolean.value) {
38+
if (usesProvider.value && !flags.noProviderPagingBoolean.value) {
3839
return items
3940
}
4041

@@ -87,7 +88,8 @@ export const useTableItems = (
8788
const mapItems = (
8889
items: Ref<TableItem[]>,
8990
props: TableItemsProcessingProps,
90-
flags: Record<string, Ref<boolean>>
91+
flags: Record<string, Ref<boolean>>,
92+
sortBy?: Ref<string | undefined>
9193
): TableItem[] => {
9294
let mappedItems: TableItem[] = items.value
9395

@@ -99,7 +101,7 @@ const mapItems = (
99101
mappedItems = sortItems(
100102
props.fields,
101103
mappedItems,
102-
props.sortBy,
104+
sortBy?.value,
103105
flags.sortDescBoolean.value,
104106
props.sortCompare
105107
)

0 commit comments

Comments
 (0)