8000 Add container prop to dropdown · bootstrap-vue/bootstrap-vue-next@ad7c951 · GitHub
[go: up one dir, main page]
Skip to content
This repository was archived by the owner on Mar 27, 2025. It is now read-only.

Commit ad7c951

Browse files
xvaaraxvaara
committed
Add container prop to dropdown
1 parent 3cadaa5 commit ad7c951

File tree

2 files changed

+20
-13
lines changed

2 files changed

+20
-13
lines changed

‎packages/bootstrap-vue-next/src/components/BDropdown/BDropdown.vue

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -37,19 +37,21 @@
3737
</slot>
3838
</span>
3939
</BButton>
40-
<ul
41-
v-if="!lazyBoolean || modelValueBoolean"
42-
v-show="lazyBoolean || modelValueBoolean"
43-
ref="floating"
44-
:style="floatingStyles"
45-
class="dropdown-menu show"
46-
:class="dropdownMenuClasses"
47-
:aria-labelledby="computedId"
48-
:role="role"
49-
@click="onClickInside"
50-
>
51-
<slot :hide="close" :show="open" />
52-
</ul>
40+
<RenderComponentOrSkip :tag="'Teleport'" :to="container" :skip="!container">
41+
<ul
42+
v-if="!lazyBoolean || modelValueBoolean"
43+
v-show="lazyBoolean || modelValueBoolean"
44+
ref="floating"
45+
:style="floatingStyles"
46+
class="dropdown-menu show"
47+
:class="dropdownMenuClasses"
48+
:aria-labelledby="computedId"
49+
:role="role"
50+
@click="onClickInside"
51+
>
52+
<slot :hide="close" :show="open" />
53+
</ul>
54+
</RenderComponentOrSkip>
5355
</div>
5456
</template>
5557

@@ -70,6 +72,8 @@ import {useBooleanish, useId} from '../../composables'
7072
import type {BDropdownProps} from '../../types'
7173
import {BvTriggerableEvent, dropdownInjectionKey, resolveFloatingPlacement} from '../../utils'
7274
import BButton from '../BButton/BButton.vue'
75+
import RenderComponentOrSkip from '../RenderComponentOrSkip.vue'
76+
7377
// TODO add navigation through keyboard events
7478
// TODO standardize keydown vs keyup events globally
7579
@@ -108,6 +112,7 @@ const props = withDefaults(defineProps<BDropdownProps>(), {
108112
strategy: 'absolute',
109113
splitTo: undefined,
110114
boundary: 'clippingAncestors',
115+
container: undefined,
111116
})
112117
113118
const emit = defineEmits<{

‎packages/bootstrap-vue-next/src/types/ComponentProps.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import type {Size} from './Size'
1212
import type {ButtonVariant} from './ButtonVariant'
1313
import type {ButtonType} from './ButtonType'
1414
import type {Boundary, Middleware, RootBoundary, Strategy} from '@floating-ui/vue'
15+
import type {ComponentPublicInstance} from 'vue'
1516

1617
export interface BLinkProps {
1718
active?: Booleanish
@@ -161,4 +162,5 @@ export interface BDropdownProps {
161162
floatingMiddleware?: Middleware[]
162163
splitTo?: RouteLocationRaw
163164
boundary?: Boundary | RootBoundary
165+
container?: string | ComponentPublicInstance<HTMLElement> | HTMLElement | undefined
164166
}

0 commit comments

Comments
 (0)
0