feat(BOffcanvas): adds teleport to property.

Author: phlegx

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

@@ -1,5 +1,5 @@
 <template>
-  <teleport to="body" :disabled="staticBoolean">
+  <teleport :to="props.to" :disabled="staticBoolean">
     <b-transition
       :no-fade="true"
       :trans-props="{
@@ -62,7 +62,7 @@
 </template>
 
 <script setup lang="ts">
-import {computed, nextTick, ref, useSlots} from 'vue'
+import {computed, nextTick, ref, type RendererElement, useSlots} from 'vue'
 import {useEventListener, useFocus, useVModel} from '@vueuse/core'
 import {useBooleanish, useId} from '../../composables'
 import type {Booleanish, ColorVariant} from '../../types'
@@ -94,6 +94,7 @@ interface BOffcanvasProps {
   noFocus?: Booleanish
   static?: Booleanish
   backdropVariant?: ColorVariant | null
+  to?: string | RendererElement | null | undefined
   // TODO responsive doesn't work
   // responsive?: Breakpoint
 }
@@ -114,6 +115,7 @@ const props = withDefaults(defineProps<BOffcanvasProps>(), {
   placement: 'start',
   noHeaderClose: false,
   noHeader: false,
+  to: 'body',
 })
 
 interface BOffcanvasEmits {

packages/bootstrap-vue-next/src/components/BOffcanvas/offcanvas.spec.ts

@@ -1,5 +1,5 @@
 import {enableAutoUnmount, mount} from '@vue/test-utils'
-import {afterEach, describe, expect, it} from 'vitest'
+import {afterEach, beforeEach, describe, expect, it} from 'vitest'
 import BOffcanvas from './BOffcanvas.vue'
 import BCloseButton from '../BButton/BCloseButton.vue'
 import BOverlay from '../BOverlay/BOverlay.vue'
@@ -8,6 +8,29 @@ describe.skip('offcanvas', () => {
 
   // TODO afaik these tests are not finished
 
+  beforeEach(() => {
+    const el = document.createElement('div')
+    el.id = 'body-teleports'
+    document.body.appendChild(el)
+  })
+
+  afterEach(() => {
+    document.body.outerHTML = ''
+  })
+
+  it('has body teleports element set by to property', () => {
+    const wrapper = mount(BOffcanvas, {
+      props: {
+        to: '#body-teleports',
+        modelValue: true,
+      },
+      global: {stubs: {teleport: true}},
+    })
+    const div = wrapper.find('#body-teleports')
+    const offcanvas = div.find('.offcanvas')
+    expect(offcanvas.exists()).toBe(true)
+  })
+
   it('has static class offcanvas', () => {
     const wrapper = mount(BOffcanvas, {
       props: {