Skip to content
This repository was archived by the owner on Mar 27, 2025. It is now read-only.

Commit c58578f

Browse files
VividLemonVividLemon
authored
feat(BDropdown): support boundary prop (bootstrap-vue-next#1337)
feat(BDropdown): support boundary prop
1 parent 4723300 commit c58578f

File tree

5 files changed

+151
-54
lines changed

5 files changed

+151
-54
lines changed

Diff for: ‎apps/docs/src/components/ComponentReference.vue

+19-2
Original file line numberDiff line numberDiff line change
@@ -44,12 +44,24 @@
4444
<BCol>
4545
<BTable
4646
:items="component[sectionToComponentItem(section)]"
47+
:fields="fields"
4748
hover
4849
small
4950
responsive
5051
bordered
5152
striped
52-
/>
53+
>
54+
<template #cell(type)="d">
55+
<code>
56+
{{ d.item.type }}
57+
</code>
58+
</template>
59+
<template #cell(default)="d">
60+
<code>
61+
{{ normalizeDefault(d.item.default) }}
62+
</code>
63+
</template>
64+
</BTable>
5365
</BCol>
5466
</BRow>
5567
</BContainer>
@@ -63,7 +75,7 @@
6375

6476
<script setup lang="ts">
6577
import {computed} from 'vue'
66-
import {BCol, BContainer, BLink, BRow, BTable} from 'bootstrap-vue-next'
78+
import {BCol, BContainer, BLink, BRow, BTable, type TableField} from 'bootstrap-vue-next'
6779
import type {ComponentReference} from '../data/components/ComponentReference'
6880
6981
const props = defineProps<{data: ComponentReference[]}>()
@@ -111,4 +123,9 @@ const sectionToComponentItem = (
111123
el: (typeof sections)[number]
112124
): Exclude<keyof ComponentReference, 'component'> =>
113125
el === 'Properties' ? 'props' : el === 'Events' ? 'emits' : 'slots'
126+
127+
const fields: TableField[] = ['prop', 'type', 'default', 'description']
128+
129+
const normalizeDefault = (val: unknown) =>
130+
val === undefined || val === null ? `${val}` : typeof val === 'string' ? `'${val}'` : val
114131
</script>

Diff for: ‎apps/docs/src/data/components/ComponentReference.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ export interface ComponentReference {
44
prop: string
55
type: string
66
description?: string
7-
default?: string
7+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
8+
default?: any
89
}[]
910
emits: {
1011
event: string

Diff for: ‎apps/docs/src/data/components/dropdown.data.ts

+80-18
Original file line numberDiff line numberDiff line change
@@ -5,113 +5,175 @@ export default {
55
{
66
component: 'BDropdown',
77
props: [
8+
{
9+
prop: 'ariaLabel',
10+
type: 'string',
11+
default: undefined,
12+
},
813
{
914
prop: 'id',
1015
type: 'string',
16+
default: undefined,
1117
},
1218
{
1319
prop: 'menuClass',
1420
type: 'ClassValue',
21+
default: undefined,
1522
},
1623
{
1724
prop: 'size',
1825
type: 'Size',
26+
default: 'md',
1927
},
2028
{
2129
prop: 'splitClass',
2230
type: 'ClassValue',
31+
default: undefined,
2332
},
2433
{
2534
prop: 'splitVariant',
26-
type: 'ButtonVariant',
35+
type: 'ButtonVariant | null',
36+
default: undefined,
2737
},
2838
{
2939
prop: 'text',
3040
type: 'string',
41+
default: undefined,
3142
},
3243
{
3344
prop: 'toggleClass',
3445
type: 'ClassValue',
46+
default: undefined,
3547
},
3648
{
3749
prop: 'autoClose',
3850
type: "boolean | 'inside' | 'outside'",
51+
default: true,
3952
},
4053
{
4154
prop: 'block',
4255
type: 'Booleanish',
43-
},
44-
{
45-
prop: 'boundary',
46-
type: 'Popper.Boundary',
47-
},
48-
{
49-
prop: 'dark',
50-
type: 'Booleanish',
56+
default: false,
5157
},
5258
{
5359
prop: 'disabled',
5460
type: 'Booleanish',
61+
default: false,
5562
},
5663
{
5764
prop: 'isNav',
5865
type: 'Booleanish',
66+
default: false,
5967
},
6068
{
6169
prop: 'dropup',
6270
type: 'Booleanish',
71+
default: false,
6372
},
6473
{
65-
prop: 'dropright',
74+
prop: 'dropend',
6675
type: 'Booleanish',
76+
default: false,
6777
},
6878
{
69-
prop: 'dropleft',
79+
prop: 'dropstart',
7080
type: 'Booleanish',
81+
default: false,
7182
},
7283
{
73-
prop: 'noFlip',
84+
prop: 'center',
7485
type: 'Booleanish',
86+
default: false,
7587
},
7688
{
77-
prop: 'offset',
78-
type: 'number | string',
89+
prop: 'end',
90+
type: 'Booleanish',
91+
default: false,
7992
},
8093
{
81-
prop: 'popperOpts',
82-
type: 'Record<string, unknown>',
94+
prop: 'noFlip',
95+
type: 'Booleanish',
96+
default: false,
8397
},
8498
{
85-
prop: 'right',
99+
prop: 'noShift',
86100
type: 'Booleanish',
101+
default: false,
102+
},
103+
{
104+
prop: 'offset',
105+
type: 'number | string | {mainAxis?: number; crossAxis?: number; alignmentAxis?: number | null}',
106+
default: 0,
87107
},
88108
{
89109
prop: 'role',
90110
type: 'string',
111+
default: 'menu',
91112
},
92113
{
93114
prop: 'split',
94115
type: 'Booleanish',
116+
default: false,
95117
},
96118
{
97119
prop: 'splitButtonType',
98120
type: 'ButtonType',
121+
default: 'button',
99122
},
100123
{
101124
prop: 'splitHref',
102125
type: 'string',
126+
default: undefined,
127+
},
128+
{
129+
prop: 'splitDisabled',
130+
type: 'Booleanish',
131+
default: undefined,
103132
},
104133
{
105134
prop: 'noCaret',
106135
type: 'Booleanish',
136+
default: false,
107137
},
108138
{
109139
prop: 'toggleText',
110140
type: 'string',
141+
default: 'Toggle dropdown',
111142
},
112143
{
113144
prop: 'variant',
114-
type: 'ButtonVariant',
145+
type: 'ButtonVariant | null',
146+
default: 'secondary',
147+
},
148+
{
149+
prop: 'modelValue',
150+
type: 'Booleanish',
151+
default: false,
152+
},
153+
{
154+
prop: 'lazy',
155+
type: 'Booleanish',
156+
default: false,
157+
},
158+
{
159+
prop: 'strategy',
160+
type: 'Strategy',
161+
default: 'absolute',
162+
},
163+
{
164+
prop: 'floatingMiddleware',
165+
type: 'Middleware[]',
166+
default: undefined,
167+
},
168+
{
169+
prop: 'splitTo',
170+
type: 'RouteLocationRaw',
171+
default: undefined,
172+
},
173+
{
174+
prop: 'boundary',
175+
type: 'Boundary | RootBoundary',
176+
default: 'clippingAncestors',
115177
},
116178
],
117179
emits: [

Diff for: ‎apps/docs/src/docs/components/dropdown.md

+4-9
Original file line numberDiff line numberDiff line change
@@ -324,14 +324,11 @@ const show = ref(false)
324324
</template>
325325
</HighlightCard>
326326

327-
<!-- TODO build this system -->
328-
<!-- ### Boundary constraint
327+
### Boundary constraint
329328

330-
By default, dropdowns are visually constrained to their scroll parent, which will suffice in most situations. However, if you place a dropdown inside an element that has `overflow: scroll` (or similar) set, the dropdown menu may - in some situations - get cut off. To get around this, you can specify a boundary element via the `boundary` prop. Supported values are `'scrollParent'` (the
331-
default), `'viewport'`, `'window'`, or a reference to an HTML element. The boundary value is passed directly to Popper.js's `boundariesElement` configuration option
329+
By default, dropdowns are visually constrained to their clipping ancestors, which will suffice in most situations. However, if you place a dropdown inside an element that has `overflow: scroll` (or similar) set, the dropdown menu may - in some situations - get cut off. To get around this, you can specify a boundary element via the `boundary` prop. Supported values are `clippingAncestors` (the default), `viewport`, `document`, or a reference to an HTML element.
332330

333-
**Note:** When `boundary` is any value other than the default of `'scrollParent'`, the style `position: static` is applied to the dropdown component's root element to allow the menu to "break out" of its scroll container. In some situations, this may affect your layout or positioning of the dropdown trigger button. In these cases, you may need to wrap your dropdown inside
334-
another element -->
331+
**Note:** When `boundary` is any value other than the default of `clippingAncestors`, the style `position: static` is applied to the dropdown component's root element to allow the menu to "break out" of its scroll container. In some situations, this may affect your layout or positioning of the dropdown trigger button. In these cases, you may need to wrap your dropdown inside another element
335332

336333
### Dropdown auto close behavior
337334

@@ -1051,9 +1048,7 @@ Add a header to label sections of actions in any dropdown menu.
10511048
<template>
10521049
<BDropdown v-model="show" text="Dropdown with header">
10531050
<BDropdownHeader> Dropdown header </BDropdownHeader>
1054-
<BDropdownItemButton aria-describedby="dropdown-header-label">
1055-
First item
1056-
</BDropdownItemButton>
1051+
<BDropdownItemButton aria-describedby="dropdown-header-label"> First item </BDropdownItemButton>
10571052
<BDropdownItemButton aria-describedby="dropdown-header-label">
10581053
Second Item
10591054
</BDropdownItemButton>

0 commit comments

Comments
 (0)