+89
-1
lines changedFilter options
+89
-1
lines changed Original file line number Diff line number Diff line change
@@ -261,6 +261,17 @@ To toggle (open/close) a **specific collapse**, pass the collapse `id`:
261 261
this.$root.$emit('bv::toggle::collapse', 'my-collapse-id')
262 262
```
263 263 264 +
## Optionally scoped default slot
265 + 266 +
<span class="badge badge-info small">New in v2.2.0</span>
267 + 268 +
The default slot can be optionally scoped. The following scope properties are available:
269 + 270 +
| Property | Type | Description |
271 +
| ---------- | -------- | ------------------------------------ |
272 +
| `visible` | Boolean | Visible state of the collapse |
273 +
| `close` | Function | When called, will close the collapse |
274 + 264 275
## Accessibility
265 276 266 277
The `v-b-toggle` directive will automatically add the ARIA attributes `aria-controls` and
@@ -231,6 +231,10 @@ export const BCollapse = /*#__PURE__*/ Vue.extend({
231 231
}
232 232
},
233 233
render(h) {
234 +
const scope = {
235 +
visible: this.show,
236 +
close: () => (this.show = false)
237 +
}
234 238
const content = h(
235 239
this.tag,
236 240
{
@@ -239,7 +243,7 @@ export const BCollapse = /*#__PURE__*/ Vue.extend({
239 243
attrs: { id: this.safeId() },
240 244
on: { click: this.clickHandler }
241 245
},
242 -
[this.normalizeSlot('default')]
246 +
[this.normalizeSlot('default', scope)]
243 247
)
244 248
return h(
245 249
BVCollapse,
@@ -566,4 +566,59 @@ describe('collapse', () => {
566 566 567 567
wrapper.destroy()
568 568
})
569 + 570 +
it('default slot scope works', async () => {
571 +
let scope = null
572 +
const wrapper = mount(BCollapse, {
573 +
attachToDocument: true,
574 +
propsData: {
575 +
// 'id' is a required prop
576 +
id: 'test',
577 +
visible: true
578 +
},
579 +
scopedSlots: {
580 +
default(props) {
581 +
scope = props
582 +
return this.$createElement('div', 'foobar')
583 +
}
584 +
},
585 +
stubs: {
586 +
// Disable use of default test transitionStub component
587 +
transition: false
588 +
}
589 +
})
590 +
const rootWrapper = createWrapper(wrapper.vm.$root)
591 +
await waitNT(wrapper.vm)
592 +
await waitRAF()
593 +
expect(wrapper.element.style.display).toEqual('')
594 +
expect(wrapper.emitted('show')).not.toBeDefined() // Does not emit show when initially visible
595 +
expect(wrapper.emitted('input')).toBeDefined()
596 +
expect(wrapper.emitted('input').length).toBe(1)
597 +
expect(wrapper.emitted('input')[0][0]).toBe(true)
598 +
expect(rootWrapper.emitted(EVENT_ACCORDION)).not.toBeDefined()
599 +
expect(rootWrapper.emitted(EVENT_STATE)).toBeDefined()
600 +
expect(rootWrapper.emitted(EVENT_STATE).length).toBe(1)
601 +
expect(rootWrapper.emitted(EVENT_STATE)[0][0]).toBe('test') // ID
602 +
expect(rootWrapper.emitted(EVENT_STATE)[0][1]).toBe(true) // Visible state
603 +
expect(rootWrapper.emitted(EVENT_STATE_SYNC)).not.toBeDefined()
604 + 605 +
expect(scope).not.toBe(null)
606 +
expect(scope.visible).toBe(true)
607 +
expect(typeof scope.close).toBe('function')
608 + 609 +
scope.close()
610 +
await waitNT(wrapper.vm)
611 +
await waitRAF()
612 + 613 +
expect(rootWrapper.emitted(EVENT_STATE_SYNC)).toBeDefined()
614 +
expect(rootWrapper.emitted(EVENT_STATE_SYNC).length).toBe(2)
615 +
expect(rootWrapper.emitted(EVENT_STATE_SYNC)[1][0]).toBe('test') // ID
616 +
expect(rootWrapper.emitted(EVENT_STATE_SYNC)[1][1]).toBe(false) // Visible state
617 + 618 +
expect(scope).not.toBe(null)
619 +
expect(scope.visible).toBe(false)
620 +
expect(typeof scope.close).toBe('function')
621 + 622 +
wrapper.destroy()
623 +
})
569 624
})
Original file line number Diff line number Diff line change
@@ -40,6 +40,24 @@
40 40
"description": "When set, and prop 'visible' is true on mount, will animate on initial mount"
41 41
}
42 42
],
43 +
"slots": [
44 +
{
45 +
"name": "default",
46 +
"version": "2.2.0",
47 +
"scope": [
48 +
{
49 +
"prop": "visible",
50 +
"type": "Boolean",
51 +
"description": "Visible state of the collapse: true if the collapse is visible"
52 +
},
53 +
{
54 +
"prop": "close",
55 +
"type": "Function",
56 +
"description": "Method for closing the collapse"
57 +
}
58 +
]
59 +
}
60 +
],
43 61
"events": [
44 62
{
45 63
"event": "input",
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