feat(BOffcanvas): adding attrs and class props

Co-authored-by: Ángel Roldán Martínez <Angel.RoldanMartinez@Clarivate.com>
bootstrap-vue-next · Mar 10, 2024 · d259701 · d259701
1 parent 3809a6b
commit d259701
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 8 deletions.
diff --git a/packages/bootstrap-vue-next/src/components/BOffcanvas/BOffcanvas.vue b/packages/bootstrap-vue-next/src/components/BOffcanvas/BOffcanvas.vue
@@ -46,7 +46,7 @@
               </template>
             </slot>
           </div>
-          <div class="offcanvas-body" :class="bodyClass">
+          <div class="offcanvas-body" :class="bodyClass" v-bind="bodyAttrs">
             <slot v-bind="sharedSlots" />
           </div>
           <div v-if="hasFooterSlot" :class="footerClass">
@@ -69,15 +69,15 @@
 </template>
 
 <script setup lang="ts">
-import {computed, nextTick, ref, type RendererElement, toRef} from 'vue'
 import {onKeyStroke, useEventListener, useFocus, useVModel} from '@vueuse/core'
+import {computed, nextTick, ref, type RendererElement, toRef} from 'vue'
 import {useId, useSafeScrollLock} from '../../composables'
-import type {ButtonVariant, ClassValue, ColorVariant} from '../../types'
+import type {AttrsValue, ButtonVariant, ClassValue, ColorVariant} from '../../types'
 import {BvTriggerableEvent, isEmptySlot} from '../../utils'
-import BOverlay from '../BOverlay/BOverlay.vue'
+import BButton from '../BButton/BButton.vue'
 import BCloseButton from '../BButton/BCloseButton.vue'
+import BOverlay from '../BOverlay/BOverlay.vue'
 import BTransition from '../BTransition/BTransition.vue'
-import BButton from '../BButton/BButton.vue'
 
 // TODO once the responsive stuff may be implemented correctly,
 // What needs to occur is a fixing of the "body scrolling".
@@ -95,7 +95,8 @@ const props = withDefaults(
   defineProps<{
     backdrop?: boolean
     backdropVariant?: ColorVariant | null
-    bodyClass?: string
+    bodyAttrs?: Readonly<AttrsValue>
+    bodyClass?: ClassValue
     bodyScrolling?: boolean
     footerClass?: string
     headerClass?: string
@@ -123,6 +124,7 @@ const props = withDefaults(
   {
     backdrop: true,
     backdropVariant: 'dark',
+    bodyAttrs: undefined,
     bodyClass: undefined,
     bodyScrolling: false,
     footerClass: undefined,

diff --git a/packages/bootstrap-vue-next/src/components/BOffcanvas/offcanvas.spec.ts b/packages/bootstrap-vue-next/src/components/BOffcanvas/offcanvas.spec.ts
@@ -1,9 +1,9 @@
 import {enableAutoUnmount, mount} from '@vue/test-utils'
 import {afterEach, beforeEach, describe, expect, it} from 'vitest'
-import BOffcanvas from './BOffcanvas.vue'
-import BCloseButton from '../BButton/BCloseButton.vue'
 import BButton from '../BButton/BButton.vue'
+import BCloseButton from '../BButton/BCloseButton.vue'
 import BOverlay from '../BOverlay/BOverlay.vue'
+import BOffcanvas from './BOffcanvas.vue'
 describe.skip('offcanvas', () => {
   enableAutoUnmount(afterEach)
 
@@ -232,4 +232,24 @@ describe.skip('offcanvas', () => {
     const [, $body] = offcanvas.findAll('div')
     expect($body.text()).toBe('foobar')
   })
+
+  it('child body div is given prop bodyClass', () => {
+    const wrapper = mount(BOffcanvas, {
+      props: {bodyClass: 'foobar'},
+    })
+    const $body = wrapper.getComponent(BOffcanvas)
+    expect($body.classes()).toContain('foobar')
+  })
+
+  it('child body div is given prop bodyAttrs', () => {
+    const wrapper = mount(BOffcanvas, {
+      props: {
+        bodyAttrs: {
+          role: 'foo',
+        },
+      },
+    })
+    const $body = wrapper.getComponent(BOffcanvas)
+    expect($body.attributes()).toContain('role: "foo"')
+  })
 })