+121
-25
lines changedFilter options
+121
-25
lines changed Original file line number Diff line number Diff line change
@@ -133,7 +133,7 @@ Like to move your menu away from the toggle buttons a bit? Then use the `offset`
133 133
number of pixels to push right (or left when negative) from the toggle button:
134 134 135 135
- Specified as a number of pixels: positive for right shift, negative for left shift.
136 -
- Specify the distance in CSS units (i.e. `0.3rem`, `4px`, `1.2em`, etc) passed as a string.
136 +
- Specify the distance in CSS units (i.e. `0.3rem`, `4px`, `1.2em`, etc.) passed as a string.
137 137 138 138
```html
139 139
<div>
@@ -156,12 +156,23 @@ specify a boundary element via the `boundary` prop. Supported values are `'scrol
156 156
default), `'viewport'`, `'window'` or a reference to an HTML element. The boundary value is passed
157 157
directly to Popper.js's `boundariesElement` configuration option.
158 158 159 -
**Note:** when `boundary` is any value other than the default of `'scrollParent'`, the style
159 +
**Note:** When `boundary` is any value other than the default of `'scrollParent'`, the style
160 160
`position: static` is applied to to the dropdown component's root element in order to allow the menu
161 161
to "break-out" of its scroll container. In some situations this may affect your layout or
162 162
positioning of the dropdown trigger button. In these cases you may need to wrap your dropdown inside
163 163
another element.
164 164 165 +
### Advanced Popper.js configuration
166 + 167 +
If you need some advanced Popper.js configuration to make dropdowns behave to your needs, you can
168 +
use the `popper-opts` prop to pass down a custom configuration object which will be deeply merged
169 +
with the BootstrapVue defaults.
170 + 171 +
Head to the [Popper.js docs](https://popper.js.org/docs/v1/) to see all the configuration options.
172 + 173 +
**Note**: The props `offset`, `boundary` and `no-flip` may loose their effect when you overwrite the
174 +
Popper.js configuration.
175 + 165 176
## Split button support
166 177 167 178
Create a split dropdown button, where the left button provides standard `click` event and link
@@ -100,9 +100,10 @@ export const BDropdown = /*#__PURE__*/ Vue.extend({
100 100
props,
101 101
computed: {
102 102
dropdownClasses() {
103 -
const { block, split, boundary } = this
103 +
const { block, split } = this
104 104
return [
105 105
this.directionClass,
106 +
this.boundaryClass,
106 107
{
107 108
show: this.visible,
108 109
// The 'btn-group' class is required in `split` mode for button alignment
@@ -111,11 +112,7 @@ export const BDropdown = /*#__PURE__*/ Vue.extend({
111 112
'btn-group': split || !block,
112 113
// When `block` is enabled and we are in `split` mode the 'd-flex' class
113 114
// needs to be applied to allow the buttons to stretch to full width
114 -
'd-flex': block && split,
115 -
// Position `static` is needed to allow menu to "breakout" of the `scrollParent`
116 -
// boundaries when boundary is anything other than `scrollParent`
117 -
// See: https://github.com/twbs/bootstrap/issues/24251#issuecomment-341413786
118 -
'position-static': boundary !== 'scrollParent' || !boundary
115 +
'd-flex': block && split
119 116
}
120 117
]
121 118
},
@@ -300,8 +300,8 @@ either `min` or `max` (depending on which is closes to today's date).
300 300
Use the dropdown props `right`, `dropup`, `dropright`, `dropleft`, `no-flip`, and `offset` to
301 301
control the positioning of the popup calendar.
302 302 303 -
Refer to the [`<b-dropdown>` documentation](/docs/components/dropdown) for details on the effects
304 -
and usage of these props.
303 +
Refer to the [`<b-dropdown>` positioning section](/docs/components/dropdown#positioning) for details
304 +
on the effects and usage of these props.
305 305 306 306
### Initial open calendar date
307 307
@@ -205,8 +205,8 @@ keep these labels short.
205 205
Use the dropdown props `right`, `dropup`, `dropright`, `dropleft`, `no-flip`, and `offset` to
206 206
control the positioning of the popup calendar.
207 207 208 -
Refer to the [`<b-dropdown>` documentation](/docs/components/dropdown) for details on the effects
209 -
and usage of these props.
208 +
Refer to the [`<b-dropdown>` positioning section](/docs/components/dropdown#positioning) for details
209 +
on the effects and usage of these props.
210 210 211 211
### Button only mode
212 212
@@ -185,7 +185,7 @@ Use `<b-nav-item-dropdown>` to place dropdown items within your nav.
185 185
</b-nav>
186 186
</div>
187 187 188 -
<!-- b-nav-dropdown.vue -->
188 +
<!-- b-nav-item-dropdown.vue -->
189 189
```
190 190 191 191
Sometimes you want to add your own class names to the generated dropdown toggle button, that by
@@ -223,6 +223,14 @@ shown. When there are a large number of dropdowns rendered on the same page, per
223 223
impacted due to larger overall memory utilization. You can instruct `<b-nav-item-dropdown>` to
224 224
render the menu contents only when it is shown by setting the `lazy` prop to true.
225 225 226 +
### Dropdown placement
227 + 228 +
Use the dropdown props `right`, `dropup`, `dropright`, `dropleft`, `no-flip`, and `offset` to
229 +
control the positioning of `<b-nav-item-dropdown>`.
230 + 231 +
Refer to the [`<b-dropdown>` positioning section](/docs/components/dropdown#positioning) for details
232 +
on the effects and usage of these props.
233 + 226 234
### Dropdown implementation note
227 235 228 236
Note that the toggle button is actually rendered as a link `<a>` tag with `role="button"` for
@@ -438,7 +446,7 @@ add the role to the `<b-nav>` itself, as this would prevent it from being announ
438 446
list by assistive technologies.
439 447 440 448
When using a `<b-nav-item-dropdown>` in your `<b-nav>`, be sure to assign a unique `id` prop value
441 -
to the `<b-nav-dropdown>` so that the appropriate `aria-*` attributes can be automatically
449 +
to the `<b-nav-item-dropdown>` so that the appropriate `aria-*` attributes can be automatically
442 450
generated.
443 451 444 452
### Tabbed interface accessibility
@@ -28,7 +28,7 @@ export const BNavItemDropdown = /*#__PURE__*/ Vue.extend({
28 28
return true
29 29
},
30 30
dropdownClasses() {
31 -
return [this.directionClass, { show: this.visible }]
31 +
return [this.directionClass, this.boundaryClass, { show: this.visible }]
32 32
},
33 33
menuClasses() {
34 34
return [
@@ -4,6 +4,7 @@ import { BvEvent } from '../utils/bv-event.class'
4 4
import { attemptFocus, closest, contains, isVisible, requestAF, selectAll } from '../utils/dom'
5 5
import { stopEvent } from '../utils/events'
6 6
import { isNull } from '../utils/inspect'
7 +
import { mergeDeep } from '../utils/object'
7 8
import { HTMLElement } from '../utils/safe-types'
8 9
import { warn } from '../utils/warn'
9 10
import clickOutMixin from './click-out'
@@ -68,17 +69,17 @@ export const commonProps = {
68 69
default: false
69 70
},
70 71
offset: {
71 -
// Number of pixels to offset menu, or a CSS unit value (i.e. 1px, 1rem, etc)
72 +
// Number of pixels to offset menu, or a CSS unit value (i.e. `1px`, `1rem`, etc.)
72 73
type: [Number, String],
73 74
default: 0
74 75
},
75 76
noFlip: {
76 -
// Disable auto-flipping of menu from bottom<=>top
77 +
// Disable auto-flipping of menu from bottom <=> top
77 78
type: Boolean,
78 79
default: false
79 80
},
80 81
popperOpts: {
81 -
// type: Object,
82 +
type: Object,
82 83
default: () => {}
83 84
},
84 85
boundary: {
@@ -128,6 +129,13 @@ export default {
128 129
return 'dropleft'
129 130
}
130 131
return ''
132 +
},
133 +
boundaryClass() {
134 +
// Position `static` is needed to allow menu to "breakout" of the `scrollParent`
135 +
// boundaries when boundary is anything other than `scrollParent`
136 +
// See: https://github.com/twbs/bootstrap/issues/24251#issuecomment-341413786
137 +
const { boundary } = this
138 +
return boundary !== 'scrollParent' || !boundary ? 'position-static' : ''
131 139
}
132 140
},
133 141
watch: {
@@ -267,10 +275,11 @@ export default {
267 275
flip: { enabled: !this.noFlip }
268 276
}
269 277
}
270 -
if (this.boundary) {
271 -
popperConfig.modifiers.preventOverflow = { boundariesElement: this.boundary }
278 +
const boundariesElement = this.boundary
279 +
if (boundariesElement) {
280 +
popperConfig.modifiers.preventOverflow = { boundariesElement }
272 281
}
273 -
return { ...popperConfig, ...(this.popperOpts || {}) }
282 +
return mergeDeep(popperConfig, this.popperOpts || {})
274 283
},
275 284
// Turn listeners on/off while open
276 285
whileOpenListen(isOpen) {
@@ -264,7 +264,10 @@ export const BVFormBtnLabelControl = /*#__PURE__*/ Vue.extend({
264 264
on: {
265 265
// Disable bubbling of the click event to
266 266
// prevent menu from closing and re-opening
267 -
'!click': stopEvent
267 + 268 +
'!click': /* istanbul ignore next */ evt => {
269 +
stopEvent(evt, { preventDefault: false })
270 +
}
268 271
}
269 272
},
270 273
[
@@ -281,6 +284,7 @@ export const BVFormBtnLabelControl = /*#__PURE__*/ Vue.extend({
281 284
staticClass: 'b-form-btn-label-control dropdown',
282 285
class: [
283 286
this.directionClass,
287 +
this.boundaryClass,
284 288
{
285 289
'btn-group': buttonOnly,
286 290
'form-control': !buttonOnly,
@@ -42,8 +42,13 @@ export const eventOnOff = (on, ...args) => {
42 42
}
43 43 44 44
// Utility method to prevent the default event handling and propagation
45 -
export const stopEvent = (evt, { propagation = true, immediatePropagation = false } = {}) => {
46 -
evt.preventDefault()
45 +
export const stopEvent = (
46 +
evt,
47 +
{ preventDefault = true, propagation = true, immediatePropagation = false } = {}
48 +
) => {
49 +
if (preventDefault) {
50 +
evt.preventDefault()
51 +
}
47 52
if (propagation) {
48 53
evt.stopPropagation()
49 54
}
@@ -61,6 +61,26 @@ export const omit = (obj, props) =>
61 61
.filter(key => props.indexOf(key) === -1)
62 62
.reduce((result, key) => ({ ...result, [key]: obj[key] }), {})
63 63 64 +
/**
65 +
* Merges two object deeply together
66 +
* @link https://gist.github.com/Salakar/1d7137de9cb8b704e48a
67 +
*/
68 +
export const mergeDeep = (target, source) => {
69 +
if (isObject(target) && isObject(source)) {
70 +
keys(source).forEach(key => {
71 +
if (isObject(source[key])) {
72 +
if (!target[key] || !isObject(target[key])) {
73 +
target[key] = source[key]
74 +
}
75 +
mergeDeep(target[key], source[key])
76 +
} else {
77 +
assign(target, { [key]: source[key] })
78 +
}
79 +
})
80 +
}
81 +
return target
82 +
}
83 + 64 84
/**
65 85
* Convenience method to create a read-only descriptor
66 86
*/
You can’t perform that action at this time.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4