feat(BModal): add bodyClass and bodyAttrs props

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

Hide file tree

Showing 3 changed files with 54 additions and 7 deletions.
diff --git a/packages/bootstrap-vue-next/src/components/BModal/BModal.vue b/packages/bootstrap-vue-next/src/components/BModal/BModal.vue
@@ -53,7 +53,12 @@
                 </template>
               </slot>
             </div>
-            <div :id="`${computedId}-body`" class="modal-body" :class="bodyClasses">
+            <div
+              :id="`${computedId}-body`"
+              class="modal-body"
+              :class="bodyClasses"
+              v-bind="bodyAttrs"
+            >
               <slot v-bind="sharedSlots">
                 {{ body }}
               </slot>
@@ -104,8 +109,8 @@
 </template>
 
 <script setup lang="ts">
-import {computed, type CSSProperties, ref, toRef, watch} from 'vue'
 import {onKeyStroke, useEventListener, useFocus, useVModel} from '@vueuse/core'
+import {computed, type CSSProperties, ref, toRef, watch} from 'vue'
 import {useColorVariantClasses, useId, useModalManager, useSafeScrollLock} from '../../composables'
 import type {BModalProps} from '../../types'
 import {BvTriggerableEvent, isEmptySlot} from '../../utils'
@@ -131,7 +136,8 @@ const props = withDefaults(defineProps<BModalProps>(), {
   backdropVariant: undefined,
   body: undefined,
   bodyBgVariant: null,
-  bodyClass: undefined,
+  bodyAttrs: undefined,
+  bodyClass: null,
   bodyScrolling: false,
   bodyTextVariant: null,
   bodyVariant: null,

diff --git a/packages/bootstrap-vue-next/src/components/BModal/modal.spec.ts b/packages/bootstrap-vue-next/src/components/BModal/modal.spec.ts
@@ -1,10 +1,10 @@
 import {DOMWrapper, enableAutoUnmount, mount} from '@vue/test-utils'
 import {afterEach, beforeEach, describe, expect, it} from 'vitest'
-import BModal from './BModal.vue'
-import BCloseButton from '../BButton/BCloseButton.vue'
-import BButton from '../BButton/BButton.vue'
-import {BvTriggerableEvent} from '../../utils'
 import {nextTick} from 'vue'
+import {BvTriggerableEvent} from '../../utils'
+import BButton from '../BButton/BButton.vue'
+import BCloseButton from '../BButton/BCloseButton.vue'
+import BModal from './BModal.vue'
 
 describe('modal', () => {
   enableAutoUnmount(afterEach)
@@ -498,6 +498,45 @@ describe('modal', () => {
     })
   })
 
+  it('modal body div is given prop bodyClass', () => {
+    const wrapper = mount(BModal, {
+      attachTo: document.body,
+      global: {stubs: {teleport: true}},
+      props: {
+        bodyClass: 'foobar',
+      },
+    })
+
+    expect(wrapper.vm).toBeDefined()
+
+    const $modal = wrapper.find('div.modal')
+    expect($modal.exists()).toBe(true)
+
+    const $modalBody = $modal.element.querySelector('.modal-body')
+    expect($modalBody?.classList).toContain('foobar')
+  })
+
+  it('modal body div is given prop bodyAttrs', () => {
+    const wrapper = mount(BModal, {
+      attachTo: document.body,
+      global: {stubs: {teleport: true}},
+      props: {
+        bodyAttrs: {
+          role: 'foo',
+        },
+      },
+    })
+
+    expect(wrapper.vm).toBeDefined()
+
+    const $modal = wrapper.find('div.modal')
+    expect($modal.exists()).toBe(true)
+
+    const $modalBody = $modal.element.querySelector('.modal-body')
+    expect($modalBody?.hasAttribute('role')).toBeTruthy()
+    expect($modalBody?.getAttribute('role')).toBe('foo')
+  })
+
   // Test isActive states
 
   // Test emit states

diff --git a/packages/bootstrap-vue-next/src/types/ComponentProps.ts b/packages/bootstrap-vue-next/src/types/ComponentProps.ts
@@ -2,6 +2,7 @@ import type {Boundary, Middleware, Padding, RootBoundary, Strategy} from '@float
 import type {ComponentPublicInstance, RendererElement, TransitionProps} from 'vue'
 import type {RouteLocationRaw} from 'vue-router'
 import type {
+  AttrsValue,
   Breakpoint,
   ButtonType,
   ButtonVariant,
@@ -287,6 +288,7 @@ export interface BModalProps {
   autoFocusButton?: 'ok' | 'cancel' | 'close'
   body?: string
   backdropVariant?: ColorVariant | null
+  bodyAttrs?: Readonly<AttrsValue>
   bodyBgVariant?: ColorVariant | null
   bodyClass?: ClassValue
   bodyScrolling?: boolean