From 462018b4dce08918f95bd1a7d0f3189c71f1b006 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?A=CC=81ngel=20Rolda=CC=81n=20Marti=CC=81nez?=
 <Angel.RoldanMartinez@Clarivate.com>
Date: Fri, 8 Mar 2024 16:18:45 +0100
Subject: [PATCH 1/2] fix(BOffcanvas) adding attrs and class props

---
 .../components/BOffcanvas/offcanvas.spec.ts   | 24 +++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/packages/bootstrap-vue-next/src/components/BOffcanvas/offcanvas.spec.ts b/packages/bootstrap-vue-next/src/components/BOffcanvas/offcanvas.spec.ts
index dc01b190e..43bf93b44 100644
--- 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"')
+  })
 })

From f3d321494cb78c4da29f6385933a480ab9fc6489 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?A=CC=81ngel=20Rolda=CC=81n=20Marti=CC=81nez?=
 <Angel.RoldanMartinez@Clarivate.com>
Date: Fri, 8 Mar 2024 16:39:17 +0100
Subject: [PATCH 2/2] fix(BOffcanvas) adding attrs and class props

---
 .../src/components/BOffcanvas/BOffcanvas.vue       | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/bootstrap-vue-next/src/components/BOffcanvas/BOffcanvas.vue b/packages/bootstrap-vue-next/src/components/BOffcanvas/BOffcanvas.vue
index 5a767d959..227fbde28 100644
--- 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,