feat(BModal): adds teleport to property.

Author: phlegx

packages/bootstrap-vue-next/src/components/BModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <teleport to="body" :disabled="staticBoolean">
+  <teleport :to="props.to" :disabled="staticBoolean">
     <b-transition
       :no-fade="true"
       :trans-props="{enterToClass: 'show'}"
@@ -90,7 +90,7 @@
 </template>
 
 <script setup lang="ts">
-import {computed, ref, useSlots} from 'vue'
+import {computed, ref, type RendererElement, useSlots} from 'vue'
 import {useBooleanish, useId, useModalManager} from '../composables'
 import {useEventListener, useFocus, useVModel} from '@vueuse/core'
 import type {Booleanish, ButtonVariant, ClassValue, ColorVariant, Size} from '../types'
@@ -158,6 +158,7 @@ interface BModalProps {
   titleTag?: string
   static?: Booleanish
   autoFocusButton?: 'ok' | 'cancel' | 'close'
+  to?: string | RendererElement | null | undefined
 }
 
 const props = withDefaults(defineProps<BModalProps>(), {
@@ -208,6 +209,7 @@ const props = withDefaults(defineProps<BModalProps>(), {
   show: false,
   titleSrOnly: false,
   titleTag: 'h5',
+  to: 'body',
 })
 
 interface BModalEmits {

packages/bootstrap-vue-next/src/components/modal.spec.ts

@@ -1,10 +1,32 @@
 import {enableAutoUnmount, mount} from '@vue/test-utils'
-import {afterEach, describe, expect, it} from 'vitest'
+import {afterEach, beforeEach, describe, expect, it} from 'vitest'
 import BModal from './BModal.vue'
 // import BTransition from './BTransition/BTransition.vue'
 
 describe('modal', () => {
   enableAutoUnmount(afterEach)
+
+  beforeEach(() => {
+    const el = document.createElement('div')
+    el.id = 'body-teleports'
+    document.body.appendChild(el)
+  })
+
+  afterEach(() => {
+    const el = document.getElementById('body-teleports')
+    if (el) document.body.removeChild(el)
+  })
+
+  it('has body teleports element set by to property', () => {
+    const wrapper = mount(BModal, {
+      props: {
+        to: '#body-teleports',
+      },
+    })
+    expect(wrapper.exists()).toBe(true)
+    expect(document.getElementById('body-teleports')?.querySelector('.modal')).not.toBe(null)
+  })
+
   // Having issues getting the 'body' from the VDOM
   it('has body element', () => {
     const wrapper = mount(BModal, {