Merge pull request #689 from devhus/main

BTable container update & row prevented clicks fix

Author: VividLemon

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

@@ -1,7 +1,7 @@
 <template>
-  <BTableContainer
+  <BTableSimple
     :responsive="responsive"
-    :responsive-class="responsiveClasses"
+    :sticky-header="stickyHeaderBoolean"
     :table-class="tableClasses"
   >
     <!-- <table :class="classes"> -->
@@ -76,10 +76,10 @@
       <template v-for="(item, itemIndex) in computedItems" :key="itemIndex">
         <tr
           :class="getRowClasses(item)"
-          @click.prevent="onRowClick(item, itemIndex, $event)"
-          @dblclick.prevent="onRowDblClick(item, itemIndex, $event)"
-          @mouseenter.prevent="onRowMouseEnter(item, itemIndex, $event)"
-          @mouseleave.prevent="onRowMouseLeave(item, itemIndex, $event)"
+          @click="onRowClick(item, itemIndex, $event)"
+          @dblclick="onRowDblClick(item, itemIndex, $event)"
+          @mouseenter="onRowMouseEnter(item, itemIndex, $event)"
+          @mouseleave="onRowMouseLeave(item, itemIndex, $event)"
         >
           <td
             v-if="addSelectableCell"
@@ -175,7 +175,7 @@
       }}
     </caption>
     <!-- </table> -->
-  </BTableContainer>
+  </BTableSimple>
 </template>
 
 <script setup lang="ts">
@@ -195,7 +195,7 @@ import type {
   VerticalAlign,
 } from '../../types'
 import type {BTableProvider} from '../../types/components'
-import BTableContainer from './BTableContainer.vue'
+import BTableSimple from './BTableSimple.vue'
 import useItemHelper from './itemHelper'
 
 type NoProviderTypes = 'paging' | 'sorting' | 'filtering'
@@ -378,12 +378,6 @@ const computedItems = computed(() => {
     : props.items
 })
 
-const responsiveClasses = computed(() => ({
-  'table-responsive': typeof props.responsive === 'boolean' && props.responsive,
-  [`table-responsive-${props.responsive}`]: typeof props.responsive === 'string',
-  'b-table-sticky-header': stickyHeaderBoolean.value,
-}))
-
 const getFieldHeadLabel = (field: TableField) => {
   if (typeof field === 'string') return titleCase(field)
   if (field.label !== undefined) return field.label

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

@@ -12,8 +12,8 @@
 <script setup lang="ts">
 // import type {Breakpoint} from '../../types'
 import {computed, toRef} from 'vue'
-import type {Booleanish, ClassValue, ColorVariant} from '../../types'
 import {useBooleanish} from '../../composables'
+import type {Booleanish, ClassValue, ColorVariant} from '../../types'
 
 interface BTableSimpleProps {
   bordered?: Booleanish
@@ -28,6 +28,7 @@ interface BTableSimpleProps {
   small?: Booleanish
   tableClass?: ClassValue
   tableVariant?: string
+  stickyHeader?: Booleanish
 }
 
 const props = withDefaults(defineProps<BTableSimpleProps>(), {
@@ -40,6 +41,7 @@ const props = withDefaults(defineProps<BTableSimpleProps>(), {
   stacked: false,
   striped: false,
   small: false,
+  stickyHeader: false,
 })
 
 const captionTopBoolean = useBooleanish(toRef(props, 'captionTop'))
@@ -49,6 +51,7 @@ const darkBoolean = useBooleanish(toRef(props, 'dark'))
 const hoverBoolean = useBooleanish(toRef(props, 'hover'))
 const smallBoolean = useBooleanish(toRef(props, 'small'))
 const stripedBoolean = useBooleanish(toRef(props, 'striped'))
+const stickyHeaderBoolean = useBooleanish(toRef(props, 'stickyHeader'))
 
 const classes = computed(() => [
   'table',
@@ -73,6 +76,7 @@ const responsiveClasses = computed(() => [
   {
     'table-responsive': typeof props.responsive === 'boolean' && props.responsive,
     [`table-responsive-${props.responsive}`]: typeof props.responsive === 'string',
+    'b-table-sticky-header': stickyHeaderBoolean.value,
   },
 ])
 </script>

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

@@ -3,7 +3,7 @@ import {afterEach, describe, expect, it} from 'vitest'
 import {ref} from 'vue'
 import {TableField, TableItem} from '../../types'
 import BTable from './BTable.vue'
-import BTableContainer from './BTableContainer.vue'
+import BTableSimple from './BTableSimple.vue'
 
 const fields: Array<TableField> = [{key: 'name'}, {key: 'age'}]
 const items: Array<TableItem> = [
@@ -14,37 +14,27 @@ const items: Array<TableItem> = [
 describe('b-table', () => {
   enableAutoUnmount(afterEach)
 
-  it('element is BTableContainer', () => {
+  it('element is BTableSimple', () => {
     const wrapper = mount(BTable)
-    const $tablecontainer = wrapper.findComponent(BTableContainer)
+    const $tablecontainer = wrapper.findComponent(BTableSimple)
     expect($tablecontainer.exists()).toBe(true)
   })
 
   it('tablecontainer is given prop responsive', async () => {
     const wrapper = mount(BTable, {
       props: {responsive: true},
     })
-    const $tablecontainer = wrapper.getComponent(BTableContainer)
+    const $tablecontainer = wrapper.getComponent(BTableSimple)
     expect($tablecontainer.props('responsive')).toBe(true)
     await wrapper.setProps({responsive: false})
     expect($tablecontainer.props('responsive')).toBe(false)
   })
 
-  it('tablecontainer is given prop responsiveClass', async () => {
-    const wrapper = mount(BTable, {
-      props: {responsiveClass: true},
-    })
-    const $tablecontainer = wrapper.getComponent(BTableContainer)
-    expect($tablecontainer.props('responsiveClass')).toBe(true)
-    await wrapper.setProps({responsiveClass: false})
-    expect($tablecontainer.props('responsiveClass')).toBe(false)
-  })
-
   it('tablecontainer is given prop tableClass', async () => {
     const wrapper = mount(BTable, {
       props: {tableClass: true},
     })
-    const $tablecontainer = wrapper.getComponent(BTableContainer)
+    const $tablecontainer = wrapper.getComponent(BTableSimple)
     expect($tablecontainer.props('tableClass')).toBe(true)
     await wrapper.setProps({tableClass: false})
     expect($tablecontainer.props('tableClass')).toBe(false)