feat(BTable): Fields keys now appear in the headers when the given field has no Label.

Author: devhus

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

@@ -34,7 +34,7 @@
                   :name="$slots['head(' + field.key + ')'] ? 'head(' + field.key + ')' : 'head()'"
                   :label="field.label"
                 />
-                <template v-else>{{ field.label }}</template>
+                <template v-else>{{ getFieldHeadLabel(field) }}</template>
               </div>
             </div>
           </th>
@@ -125,7 +125,8 @@
 <script setup lang="ts">
 // import type {Breakpoint} from '../../types'
 import {computed, ref, toRef, useSlots} from 'vue'
-import {useBooleanish} from '../../composables'
+import {useBooleanish, useTitleCase} from '../../composables'
+
 import type {
   Booleanish,
   ColorVariant,
@@ -241,6 +242,13 @@ const responsiveClasses = computed(() => ({
   [`table-responsive-${props.responsive}`]: typeof props.responsive === 'string',
 }))
 
+const getFieldHeadLabel = (field: TableField) => {
+  if (typeof field === 'string') return useTitleCase(field)
+  if (field.label !== undefined) return field.label
+  if (typeof field.key === 'string') return useTitleCase(field.key)
+  return field.key
+}
+
 const addSelectableCell = computed(
   () => selectableBoolean.value && (!!props.selectHead || slots.selectHead !== undefined)
 )

packages/bootstrap-vue-3/src/composables/index.ts

@@ -1,4 +1,5 @@
 import useAlignment from './useAlignment'
+import useBooleanish from './useBooleanish'
 import {createBreadcrumb, useBreadcrumb} from './useBreadcrumb'
 import useEventListener from './useEventListener'
 import {
@@ -13,8 +14,8 @@ import {
 } from './useFormCheck'
 import useFormInput, {COMMON_INPUT_PROPS} from './useFormInput'
 import {normalizeOptions} from './useFormSelect'
-import useBooleanish from './useBooleanish'
 import useId from './useId'
+import useTitleCase from './useTitleCase'
 
 export {
   useAlignment,
@@ -23,6 +24,7 @@ export {
   useEventListener,
   bindGroupProps,
   useBooleanish,
+  useTitleCase,
   getClasses,
   getGroupAttr,
   getGroupClasses,

packages/bootstrap-vue-3/src/composables/useTitleCase.ts

@@ -0,0 +1,8 @@
+import {RX_LOWER_UPPER, RX_START_SPACE_WORD, RX_UNDERSCORE} from '../constants/regex'
+
+export default (input: string): string => {
+  return input
+    .replace(RX_UNDERSCORE, ' ')
+    .replace(RX_LOWER_UPPER, (str, $1, $2) => $1 + ' ' + $2)
+    .replace(RX_START_SPACE_WORD, (str, $1, $2) => $1 + $2.toUpperCase())
+}