1 1
import Vue from '../../utils/vue'
2 -
import { props as BDropdownProps } from '../dropdown/dropdown'
3 -
import idMixin from '../../mixins/id'
4 -
import dropdownMixin from '../../mixins/dropdown'
5 -
import normalizeSlotMixin from '../../mixins/normalize-slot'
6 2
import pluckProps from '../../utils/pluck-props'
7 3
import { htmlOrText } from '../../utils/html'
4 +
import dropdownMixin from '../../mixins/dropdown'
5 +
import idMixin from '../../mixins/id'
6 +
import normalizeSlotMixin from '../../mixins/normalize-slot'
7 +
import { props as BDropdownProps } from '../dropdown/dropdown'
8 8
import { BLink } from '../link/link'
9 9 10 -
// -- Constants --
11 - 10 +
// --- Props ---
12 11
export const props = pluckProps(
13 12
['text', 'html', 'menuClass', 'toggleClass', 'noCaret', 'role', 'lazy'],
14 13
BDropdownProps
15 14
)
16 15 16 +
// --- Main component ---
17 17
// @vue/component
18 18
export const BNavItemDropdown = /*#__PURE__*/ Vue.extend({
19 19
name: 'BNavItemDropdown',
20 20
mixins: [idMixin, dropdownMixin, normalizeSlotMixin],
21 21
props,
22 22
computed: {
23 +
toggleId() {
24 +
return this.safeId('_BV_toggle_')
25 +
},
23 26
isNav() {
24 27
// Signal to dropdown mixin that we are in a navbar
25 28
return true
@@ -41,57 +44,62 @@ export const BNavItemDropdown = /*#__PURE__*/ Vue.extend({
41 44
}
42 45
},
43 46
render(h) {
44 -
const button = h(
47 +
const { toggleId, visible } = this
48 + 49 +
const $toggle = h(
45 50
BLink,
46 51
{
47 -
ref: 'toggle',
48 52
staticClass: 'nav-link dropdown-toggle',
49 53
class: this.toggleClasses,
50 54
props: {
51 -
href: '#',
55 +
href: `#${this.id || ''}`,
52 56
disabled: this.disabled
53 57
},
54 58
attrs: {
55 -
id: this.safeId('_BV_button_'),
59 +
id: toggleId,
60 +
role: 'button',
56 61
'aria-haspopup': 'true',
57 -
'aria-expanded': this.visible ? 'true' : 'false'
62 +
'aria-expanded': visible ? 'true' : 'false'
58 63
},
59 64
on: {
60 65
mousedown: this.onMousedown,
61 66
click: this.toggle,
62 67
keydown: this.toggle // Handle ENTER, SPACE and DOWN
63 -
}
68 +
},
69 +
ref: 'toggle'
64 70
},
65 71
[
66 -
this.$slots['button-content'] ||
67 -
this.$slots.text ||
72 +
// TODO: The `text` slot is deprecated in favor of the `button-content` slot
73 +
this.normalizeSlot(['button-content', 'text']) ||
68 74
h('span', { domProps: htmlOrText(this.html, this.text) })
69 75
]
70 76
)
71 -
const menu = h(
77 + 78 +
const $menu = h(
72 79
'ul',
73 80
{
74 81
staticClass: 'dropdown-menu',
75 82
class: this.menuClasses,
76 -
ref: 'menu',
77 83
attrs: {
78 84
tabindex: '-1',
79 -
'aria-labelledby': this.safeId('_BV_button_')
85 +
'aria-labelledby': toggleId
80 86
},
81 87
on: {
82 88
keydown: this.onKeydown // Handle UP, DOWN and ESC
83 -
}
89 +
},
90 +
ref: 'menu'
84 91
},
85 -
!this.lazy || this.visible ? this.normalizeSlot('default', { hide: this.hide }) : [h()]
92 +
!this.lazy || visible ? this.normalizeSlot('default', { hide: this.hide }) : [h()]
86 93
)
94 + 87 95
return h(
88 96
'li',
89 97
{
90 98
staticClass: 'nav-item b-nav-dropdown dropdown',
91 99
class: this.dropdownClasses,
92 100
attrs: { id: this.safeId() }
93 101
},
94 -
[button, menu]
102 +
[$toggle, $menu]
95 103
)
96 104
}
97 105
})
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