bootstrap-vue-next · VividLemon · Sep 12, 2022 · Sep 9, 2022 · Sep 9, 2022 · Sep 9, 2022
diff --git a/packages/bootstrap-vue-3/src/components/BTable/BTable.vue b/packages/bootstrap-vue-3/src/components/BTable/BTable.vue
@@ -1,5 +1,5 @@
 <template>
-  <BTableContainer :responsive="responsive" :responsive-classes="responsiveClasses">
+  <BTableContainer :responsive="responsive" :responsive-class="responsiveClasses">
     <table :class="classes">
       <thead>
         <slot v-if="$slots['thead-top']" name="thead-top" />
@@ -26,14 +26,11 @@
             v-bind="field.thAttr"
             @click="headerClicked(field, $event)"
           >
-            <div class="d-flex flex-nowrap align-items-center gap-1">
+            <div class="d-inline-flex flex-nowrap align-items-center gap-1">
               <span
                 v-if="isSortable && field.sortable && field.key === sortBy"
-                class="text-muted small"
-              >
-                <span v-show="sortDesc === true">▼</span>
-                <span v-show="sortDesc === false">▲</span>
-              </span>
+                class="b-table-sort-icon text-muted small"
+              />
               <div>
                 <slot
                   v-if="$slots['head(' + field.key + ')'] || $slots['head()']"
@@ -158,8 +155,9 @@
 
 <script setup lang="ts">
 // import type {Breakpoint} from '../../types'
-import {computed, ref, toRef, useSlots} from 'vue'
+import {computed, ref, toRef, useSlots, watch} from 'vue'
 import {useBooleanish} from '../../composables'
+import {cloneDeep} from '../../utils/object'
 import {titleCase} from '../../utils/stringUtils'
 import BSpinner from '../BSpinner.vue'
 
@@ -200,6 +198,10 @@ interface BTableProps {
   selectionVariant?: ColorVariant
   stickyHeader?: Booleanish
   busy?: Booleanish
+  perPage?: number
+  currentPage?: number
+  filter?: string
+  filterable?: string[]
 }
 
 const props = withDefaults(defineProps<BTableProps>(), {
@@ -223,6 +225,7 @@ const props = withDefaults(defineProps<BTableProps>(), {
   selectionVariant: 'primary',
   stickyHeader: false,
   busy: false,
+  currentPage: 1,
 })
 
 const captionTopBoolean = useBooleanish(toRef(props, 'captionTop'))
@@ -269,6 +272,7 @@ interface BTableEmits {
   (e: 'update:sortBy', value: string): void
   (e: 'update:sortDesc', value: boolean): void
   (e: 'sorted', ...value: Parameters<(sortBy: string, isDesc: boolean) => any>): void
+  (e: 'filtered', value: TableItem[]): void
 }
 
 const emits = defineEmits<BTableEmits>()
@@ -291,19 +295,32 @@ const classes = computed(() => [
     [`b-table-select-${props.selectMode}`]: selectableBoolean.value,
     'b-table-selecting user-select-none': selectableBoolean.value && isSelecting.value,
     'b-table-busy': busyBoolean.value,
+    'b-table-sortable': isSortable.value,
+    'b-table-sort-desc': isSortable.value && sortDescBoolean.value === true,
+    'b-table-sort-asc': isSortable.value && sortDescBoolean.value === false,
   },
 ])
 
 const itemHelper = useItemHelper()
+
+itemHelper.filterEvent.value = (items) => {
+  emits('filtered', cloneDeep(items))
+}
+
 const computedFields = computed(() => itemHelper.normaliseFields(props.fields, props.items))
 const computedFieldsTotal = computed(
   () => computedFields.value.length + (selectableBoolean.value ? 1 : 0)
 )
+
+const isFilterableTable = computed(() => props.filter !== undefined)
+
+const requireItemsMapping = computed(() => isSortable.value && sortInternalBoolean.value === true)
 const computedItems = computed(() =>
-  sortInternalBoolean.value === true
-    ? itemHelper.sortItems(props.fields, props.items, {
-        key: props.sortBy,
-        desc: sortDescBoolean.value,
+  requireItemsMapping.value
+    ? itemHelper.mapItems(props.fields, props.items, props, {
+        isSortable,
+        isFilterableTable,
+        sortDescBoolean,
       })
     : props.items
 )
@@ -469,6 +486,15 @@ const unselectRow = (index: number) => {
   notifySelectionEvent()
 }
 
+watch(
+  () => props.filter,
+  (filter) => {
+    if (!filter) {
+      emits('filtered', cloneDeep(props.items))
+    }
+  }
+)
+
 defineExpose({
   selectAllRows,
   clearSelected,

diff --git a/packages/bootstrap-vue-3/src/components/BTable/_table.scss b/packages/bootstrap-vue-3/src/components/BTable/_table.scss
@@ -167,4 +167,14 @@
       }
     }
   }
+
+  &.b-table-sortable {
+    &.b-table-sort-asc .b-table-sort-icon::before {
+      content: "▲";
+    }
+
+    &.b-table-sort-desc .b-table-sort-icon::before {
+      content: "▼";
+    }
+  }
 }
diff --git a/packages/bootstrap-vue-3/src/components/BTable/itemHelper.ts b/packages/bootstrap-vue-3/src/components/BTable/itemHelper.ts
@@ -1,5 +1,7 @@
+import {ref, Ref} from 'vue'
 import type {TableField, TableFieldObject, TableItem} from '../../types'
 import {isObject, isString, startCase} from '../../utils'
+import {cloneDeep} from './../../utils/object'
 
 const useItemHelper = () => {
   const normaliseFields = (origFields: TableField[], items: TableItem[]): TableFieldObject[] => {
@@ -24,29 +26,84 @@ const useItemHelper = () => {
     return fields
   }
 
+  const internalItems = ref<TableItem[]>([])
+
+  const mapItems = (
+    fields: TableField[],
+    items: TableItem[],
+    props: any,
+    flags: Record<string, Ref<boolean>>
+  ): TableItem[] => {
+    internalItems.value = cloneDeep(items)
+    if ('isFilterableTable' in flags && flags.isFilterableTable.value === true && props.filter) {
+      internalItems.value = filterItems(internalItems.value, props.filter, props.filterable)
+      if (filterEvent.value) {
+        filterEvent.value(internalItems.value)
+      }
+    }
+    if ('isSortable' in flags && flags.isSortable.value === true) {
+      internalItems.value = sortItems(fields, internalItems.value, {
+        key: props.sortBy,
+        desc: flags.sortDescBoolean.value,
+      })
+    }
+    if (props.perPage !== undefined) {
+      const startIndex = (props.currentPage - 1) * props.perPage
+      internalItems.value = internalItems.value.splice(startIndex, props.perPage)
+    }
+    return internalItems.value
+  }
+
+  const filterEvent: Ref<((items: TableItem[]) => void) | undefined> = ref(undefined)
+
   const sortItems = (
     fields: TableField[],
     items: TableItem<Record<string, any>>[],
     sort?: {key?: string; desc?: boolean}
   ) => {
     if (!sort || !sort.key) return items
     const sortKey = sort.key
-    return items.sort((a, b) =>
-      a[sortKey] > b[sortKey]
-        ? sort.desc
-          ? -1
-          : 1
-        : b[sortKey] > a[sortKey]
-        ? sort.desc
-          ? 1
-          : -1
-        : 0
-    )
+    return items.sort((a, b) => {
+      const realVal = (ob: any) => (typeof ob === 'object' ? JSON.stringify(ob) : ob)
+      const aHigher = realVal(a[sortKey]) > realVal(b[sortKey])
+      if (aHigher) {
+        return sort.desc ? -1 : 1
+      }
+      const bHigher = realVal(b[sortKey]) > realVal(a[sortKey])
+      if (bHigher) {
+        return sort.desc ? 1 : -1
+      }
+      return 0
+    })
+  }
+
+  const filterItems = (
+    items: TableItem<Record<string, any>>[],
+    filter: string,
+    filterable: string[]
+  ) => {
+    return items.filter((item) => {
+      return (
+        Object.entries(item).filter((item) => {
+          const key = item[0]
+          if (key[0] === '_' || (filterable.length > 0 && !filterable.includes(key))) return false
+          const val: any = item[1]
+          const itemValue: string =
+            typeof val === 'object'
+              ? JSON.stringify(Object.values(val))
+              : typeof val === 'string'
+              ? val
+              : val.toString()
+          return itemValue.toLowerCase().includes(filter.toLowerCase())
+        }).length > 0
+      )
+    })
   }
 
   return {
     normaliseFields,
-    sortItems,
+    mapItems,
+    filterEvent,
   }
 }
 

diff --git a/packages/bootstrap-vue-3/src/components/BTabs/BTab.vue b/packages/bootstrap-vue-3/src/components/BTabs/BTab.vue
@@ -13,9 +13,9 @@
 
 <script setup lang="ts">
 // import type {BTabProps} from '../../types/components'
-import type {Booleanish, ClassValue} from '../../types'
+import {computed, inject, ref, toRef, watch} from 'vue'
 import {useBooleanish} from '../../composables'
-import {computed, inject, toRef} from 'vue'
+import type {Booleanish, ClassValue} from '../../types'
 import {injectionKey} from './BTabs.vue'
 
 interface BTabProps {
@@ -25,6 +25,7 @@ interface BTabProps {
   buttonId?: string
   disabled?: Booleanish
   lazy?: Booleanish
+  lazyOnce?: Booleanish
   noBody?: boolean | string
   tag?: string
   titleItemClass?: ClassValue
@@ -36,27 +37,43 @@ const props = withDefaults(defineProps<BTabProps>(), {
   active: false,
   buttonId: undefined,
   disabled: false,
-  lazy: false,
+  lazy: undefined,
+  lazyOnce: undefined,
   noBody: false,
   tag: 'div',
   titleItemClass: undefined,
   titleLinkAttributes: undefined,
   titleLinkClass: undefined,
 })
 
+const lazyRenderCompleted = ref(false)
+
 const activeBoolean = useBooleanish(toRef(props, 'active'))
 const disabledBoolean = useBooleanish(toRef(props, 'disabled'))
-const lazyBoolean = useBooleanish(toRef(props, 'lazy'))
+const lazyBoolean = useBooleanish(toRef(props, props.lazyOnce !== undefined ? 'lazyOnce' : 'lazy'))
 
 const parentData = inject(injectionKey, null)
 
 const computedLazy = computed<boolean>(() => parentData?.lazy || lazyBoolean.value)
+const computedLazyOnce = computed<boolean>(() => props.lazyOnce !== undefined)
+
 const computedActive = computed<boolean>(() => activeBoolean.value && !disabledBoolean.value)
-const showSlot = computed<boolean>(() => computedActive.value || !computedLazy.value)
+const showSlot = computed<boolean>(() => {
+  const hasLazyRenderedOnce =
+    computedLazy.value && computedLazyOnce.value && lazyRenderCompleted.value
+  return computedActive.value || !computedLazy.value || hasLazyRenderedOnce
+})
 
 const classes = computed(() => ({
   'active': activeBoolean.value,
   'show': activeBoolean.value,
   'card-body': parentData?.card && props.noBody === false,
 }))
+
+watch(
+  () => showSlot.value,
+  (shown) => {
+    if (shown && !lazyRenderCompleted.value) lazyRenderCompleted.value = true
+  }
+)
 </script>
diff --git a/packages/bootstrap-vue-3/src/utils/object.ts b/packages/bootstrap-vue-3/src/utils/object.ts
@@ -1,4 +1,4 @@
-// import {isObject} from './inspect'
+import {isPlainObject} from './inspect'
 
 /**
  * @param target
@@ -43,3 +43,16 @@ export const omit = (obj: any, props: any): any =>
  * @returns
  */
 export const readonlyDescriptor = () => ({enumerable: true, configurable: false, writable: false})
+
+export const cloneDeep = (obj: any, defaultValue = obj): any => {
+  if (Array.isArray(obj)) {
+    return obj.reduce((result, val) => [...result, cloneDeep(val, val)], [])
+  }
+  if (isPlainObject(obj)) {
+    return Object.keys(obj).reduce(
+      (result, key) => ({...result, [key]: cloneDeep(obj[key], obj[key])}),
+      {}
+    )
+  }
+  return defaultValue
+}