8000 Update dropdown.js · bootstrap-vue/bootstrap-vue@174e130 · GitHub
[go: up one dir, main page]
Skip to content

Commit 174e130

Browse files
jacobmllr95jacobmllr95
committed
Update dropdown.js
1 parent be57e4c commit 174e130

File tree

1 file changed

+65
-52
lines changed

1 file changed

+65
-52
lines changed

‎src/components/dropdown/dropdown.js

Lines changed: 65 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
11
import Vue from '../../utils/vue'
22
import { arrayIncludes } from '../../utils/array'
3-
import { stripTags } from '../../utils/html'
43
import { getComponentConfig } from '../../utils/config'
5-
import idMixin from '../../mixins/id'
4+
import { htmlOrText } from '../../utils/html'
65
import dropdownMixin from '../../mixins/dropdown'
6+
import idMixin from '../../mixins/id'
77
import normalizeSlotMixin from '../../mixins/normalize-slot'
88
import { BButton } from '../button/button'
99

10+
// --- Constants ---
11+
1012
const NAME = 'BDropdown'
1113

14+
// --- Props ---
15+
1216
export const props = {
1317
text: {
1418
// Button label
@@ -20,14 +24,14 @@ export const props = {
2024
type: String
2125
// default: undefined
2226
},
23-
size: {
24-
type: String,
25-
default: () => getComponentConfig(NAME, 'size')
26-
},
2727
variant: {
2828
type: String,
2929
default: () => getComponentConfig(NAME, 'variant')
3030
},
31+
size: {
32+
type: String,
33+
default: () => getComponentConfig(NAME, 'size')
34+
},
3135
block: {
3236
type: Boolean,
3337
default: false
@@ -89,28 +93,30 @@ export const props = {
8993
}
9094
}
9195

96+
// --- Main component ---
9297
// @vue/component
9398
export const BDropdown = /*#__PURE__*/ Vue.extend({
9499
name: NAME,
95100
mixins: [idMixin, dropdownMixin, normalizeSlotMixin],
96101
props,
97102
computed: {
98103
dropdownClasses() {
104+
const { block, split, boundary } = this
99105
return [
100106
this.directionClass,
101107
{
102108
show: this.visible,
103109
// The 'btn-group' class is required in `split` mode for button alignment
104110
// It needs also to be applied when `block` is disabled to allow multiple
105111
// dropdowns to be aligned one line
106-
'btn-group': this.split || !this.block,
112+
'btn-group': split || !block,
107113
// When `block` is enabled and we are in `split` mode the 'd-flex' class
108114
// needs to be applied to allow the buttons to stretch to full width
109-
'd-flex': this.block && this.split,
115+
'd-flex': block && split,
110116
// Position `static` is needed to allow menu to "breakout" of the `scrollParent`
111117
// boundaries when boundary is anything other than `scrollParent`
112118
// See: https://github.com/twbs/bootstrap/issues/24251#issuecomment-341413786
113-
'position-static': this.boundary !== 'scrollParent' || !this.boundary
119+
'position-static': boundary !== 'scrollParent' || !boundary
114120
}
115121
]
116122
},
@@ -124,100 +130,107 @@ export const BDropdown = /*#__PURE__*/ Vue.extend({
124130
]
125131
},
126132
toggleClasses() {
133+
const { split } = this
127134
return [
128135
this.toggleClass,
129136
{
130-
'dropdown-toggle-split': this.split,
131-
'dropdown-toggle-no-caret': this.noCaret && !this.split
137+
'dropdown-toggle-split': split,
138+
'dropdown-toggle-no-caret': this.noCaret && !split
132139
}
133140
]
134141
}
135142
},
136143
render(h) {
137-
let split = h()
138-
const buttonContent = this.normalizeSlot('button-content') || this.html || stripTags(this.text)
139-
if (this.split) {
144+
const { variant, size, block, disabled, split, role } = this
145+
const commonProps = { variant, size, block, disabled }
146+
147+
const $buttonContent = this.normalizeSlot('button-content')
148+
const buttonContentProps = this.hasNormalizedSlot('button-content')
149+
? {}
150+
: htmlOrText(this.html, this.text)
151+
152+
let $split = h()
153+
if (split) {
154+
const { splitTo, splitHref, splitButtonType } = this
140155
const btnProps = {
141-
variant: this.splitVariant || this.variant,
142-
size: this.size,
143-
block: this.block,
144-
disabled: this.disabled
156+
...commonProps,
157+
variant: this.splitVariant || this.variant
145158
}
146-
// We add these as needed due to router-link issues with defined property with undefined/null values
147-
if (this.splitTo) {
148-
btnProps.to = this.splitTo
149-
} else if (this.splitHref) {
150-
btnProps.href = this.splitHref
151-
} else if (this.splitButtonType) {
152-
btnProps.type = this.splitButtonType
159+
// We add these as needed due to <router-link> issues with
160+
// defined property with `undefined`/`null` values
161+
if (splitTo) {
162+
btnProps.to = splitTo
163+
} else if (splitHref) {
164+
btnProps.href = splitHref
165+
} else if (splitButtonType) {
166+
btnProps.type = splitButtonType
153167
}
154-
split = h(
168+
$split = h(
155169
BButton,
156170
{
157-
ref: 'button',
158-
props: btnProps,
159171
class: this.splitClass,
160-
attrs: {
161-
id: this.safeId('_BV_button_')
162-
},
163-
on: {
164-
click: this.onSplitClick
165-
}
172+
attrs: { id: this.safeId('_BV_button_') },
173+
props: btnProps,
174+
domProps: buttonContentProps,
175+
on: { click: this.onSplitClick },
176+
ref: 'button'
166177
},
167-
[buttonContent]
178+
[$buttonContent]
168179
)
169180
}
170-
const toggle = h(
181+
182+
const $toggle = h(
171183
BButton,
172184
{
173-
ref: 'toggle',
174185
staticClass: 'dropdown-toggle',
175186
class: this.toggleClasses,
176-
props: {
177-
tag: this.toggleTag,
178-
variant: this.variant,
179-
size: this.size,
180-
block: this.block && !this.split,
181-
disabled: this.disabled
182-
},
183187
attrs: {
184188
id: this.safeId('_BV_toggle_'),
185189
'aria-haspopup': 'true',
186190
'aria-expanded': this.visible ? 'true' : 'false'
187191
},
192+
props: {
193+
...commonProps,
194+
tag: this.toggleTag,
195+
block: block && !split
196+
},
197+
domProps: split ? {} : buttonContentProps,
188198
on: {
189199
mousedown: this.onMousedown,
190200
click: this.toggle,
191201
keydown: this.toggle // Handle ENTER, SPACE and DOWN
192-
}
202+
},
203+
ref: 'toggle'
193204
},
194-
[this.split ? h('span', { class: ['sr-only'] }, [this.toggleText]) : buttonContent]
205+
[split ? h('span', { class: ['sr-only'] }, [this.toggleText]) : $buttonContent]
195206
)
196-
const menu = h(
207+
208+
const $menu = h(
197209
'ul',
198210
{
199-
ref: 'menu',
200211
staticClass: 'dropdown-menu',
201212
class: this.menuClasses,
202213
attrs: {
203-
role: this.role,
214+
role,
204215
tabindex: '-1',
205-
'aria-labelledby': this.safeId(this.split ? '_BV_button_' : '_BV_toggle_')
216+
'aria-labelledby': this.safeId(split ? '_BV_button_' : '_BV_toggle_')
206217
},
207218
on: {
208219
keydown: this.onKeydown // Handle UP, DOWN and ESC
209-
}
220+
},
221+
ref: 'menu'
210222
},
211223
!this.lazy || this.visible ? this.normalizeSlot('default', { hide: this.hide }) : [h()]
212224
)
225+
213226
return h(
214227
'div',
215228
{
216229
staticClass: 'dropdown b-dropdown',
217230
class: this.dropdownClasses,
218231
attrs: { id: this.safeId() }
219232
},
220-
[split, toggle, menu]
233+
[$split, $toggle, $menu]
221234
)
222235
}
223236
})

0 commit comments

Comments
 (0)
0