From 54fbe75c6b389db51e93b62e7193e29b29f7bf22 Mon Sep 17 00:00:00 2001
From: Issayah <github.me.mzu5a@simplelogin.com>
Date: Sun, 6 Oct 2024 14:43:55 -0500
Subject: [PATCH 1/2] fix(BTable): cast formatted items to string fixes #2227

---
 .../src/components/BTable/BTable.vue            | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/packages/bootstrap-vue-next/src/components/BTable/BTable.vue b/packages/bootstrap-vue-next/src/components/BTable/BTable.vue
index 0f8b03493..7a0ae33b6 100644
--- a/packages/bootstrap-vue-next/src/components/BTable/BTable.vue
+++ b/packages/bootstrap-vue-next/src/components/BTable/BTable.vue
@@ -162,6 +162,7 @@ import {
   isTableItem,
   type NoProviderTypes,
   type TableField,
+  type TableFieldFormatter,
   type TableFieldRaw,
   type TableItem,
   type TableRowEvent,
@@ -431,6 +432,8 @@ const getRowClasses = (item: T | null, type: TableRowType): TableStrictClassValu
     : null,
 ]
 
+const getFormatter = (value: TableField): TableFieldFormatter<unknown> | undefined =>
+  typeof value.sortByFormatted === 'function' ? value.sortByFormatted : value.formatter
 const computedItems = computed<T[]>(() => {
   const sortItems = (items: T[]) => {
     // "undefined" values are set by us, we do this so we dont wipe out the comparer
@@ -452,12 +455,9 @@ const computedItems = computed<T[]>(() => {
           })
           const val = get(ob, sortOption.key as keyof TableItem)
           if (isTableField(sortField) && !!sortField.sortByFormatted) {
-            const formatter =
-              typeof sortField.sortByFormatted === 'function'
-                ? sortField.sortByFormatted
-                : sortField.formatter
+            const formatter = getFormatter(sortField)
             if (formatter) {
-              return formatItem(ob, String(sortField.key), formatter) as string
+              return String(formatItem(ob, String(sortField.key), formatter))
             }
           }
           return typeof val === 'object' && val !== null
@@ -497,12 +497,9 @@ const computedItems = computed<T[]>(() => {
                 return false
               })
               if (isTableField(filterField) && !!filterField.filterByFormatted) {
-                const formatter =
-                  typeof filterField.filterByFormatted === 'function'
-                    ? filterField.filterByFormatted
-                    : filterField.formatter
+                const formatter = getFormatter(filterField)
                 if (formatter) {
-                  return formatter(val, String(filterField.key), item) as string
+                  return String(formatter(val, String(filterField.key), item))
                 }
               }
               return typeof val === 'object' ? JSON.stringify(Object.values(val)) : val.toString()

From 5d49d2f9c5a4f5c77b06d3b9594132fd97ae46be Mon Sep 17 00:00:00 2001
From: Issayah <github.me.mzu5a@simplelogin.com>
Date: Sun, 6 Oct 2024 14:57:41 -0500
Subject: [PATCH 2/2] fix(BTable): busy slot behavior to match bootstrap-vue
 fixes #1636

---
 .../src/components/BTable/BTable.vue          | 19 ++++++-------------
 1 file changed, 6 insertions(+), 13 deletions(-)

diff --git a/packages/bootstrap-vue-next/src/components/BTable/BTable.vue b/packages/bootstrap-vue-next/src/components/BTable/BTable.vue
index 7a0ae33b6..5f56fcbcc 100644
--- a/packages/bootstrap-vue-next/src/components/BTable/BTable.vue
+++ b/packages/bootstrap-vue-next/src/components/BTable/BTable.vue
@@ -128,18 +128,13 @@
       </template>
     </template>
     <template #custom-body="scope">
-      <BTr v-if="busyModel" class="b-table-busy-slot" :class="getBusyRowClasses">
+      <BTr
+        v-if="busyModel && $slots['table-busy']"
+        class="b-table-busy-slot"
+        :class="getBusyRowClasses"
+      >
         <BTd :colspan="scope.fields.length">
-          <slot name="table-busy">
-            <BOverlay show>
-              <template #overlay>
-                <div class="d-flex align-items-center gap-2 mt-5">
-                  <BSpinner />
-                  <strong>{{ props.busyLoadingText }}</strong>
-                </div>
-              </template>
-            </BOverlay>
-          </slot>
+          <slot name="table-busy" />
         </BTd>
       </BTr>
     </template>
@@ -150,8 +145,6 @@
 import {useToNumber} from '@vueuse/core'
 import {computed, onMounted, type Ref, ref, watch} from 'vue'
 import {formatItem} from '../../utils/formatItem'
-import BOverlay from '../BOverlay/BOverlay.vue'
-import BSpinner from '../BSpinner/BSpinner.vue'
 import BTableLite from './BTableLite.vue'
 import BTd from './BTd.vue'
 import BTr from './BTr.vue'