Skip to content

Commit f44c5eb

Browse files
tmorehousetmorehouse
authored
[WIP] feat(collpase): Use new $root namespaced events (bootstrap-vue#1037)
feat(collpase): Use new $root namespaced events + dom utils
1 parent 88cfaef commit f44c5eb

File tree

4 files changed

+41
-36
lines changed

4 files changed

+41
-36
lines changed

‎docs/components/collapse/README.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ Other elements can easily toggle `<b-collapse>` components using the `v-b-toggle
4343
<!-- collapse-2.vue -->
4444
```
4545

46-
### Initial visibility (start expanded)
46+
## Initial visibility (start expanded)
4747
To make the `<b-collapse>` show initially, set the `visible` prop:
4848

4949
```html
@@ -59,7 +59,7 @@ To make the `<b-collapse>` show initially, set the `visible` prop:
5959
<!-- collapse-3.vue -->
6060
```
6161

62-
### `v-model` support
62+
## `v-model` support
6363
The component's collapsed (visible) state can also be set with `v-model` which
6464
binds internally to the `visible` prop.
6565

@@ -95,7 +95,7 @@ export default {
9595
<-- collapse-4.vue -->
9696
```
9797

98-
### Trigger multiple collapse elements
98+
## Trigger multiple collapse elements
9999
You can even collapse multiple `<b-collapse>` components via a single `v-b-toggle` by
100100
providing multiple target IDs using modifers:
101101

‎docs/components/collapse/meta.json

Lines changed: 2 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -19,28 +19,14 @@
1919
"description": "emitted when collaspe has finished closing"
2020
},
2121
{
22-
"event": "collapse::toggle",
23-
"description": "toggles visible state of collaspe when this event emits on $root",
22+
"event": "bv::toggle::collapse",
23+
"description": "toggles visible state of collaspe when this event is emitted on $root",
2424
"args": [
2525
{
2626
"arg": "id",
2727
"description": "collapse id to toggle"
2828
}
2929
]
30-
},
31-
{
32-
"event": "accordion::toggle",
33-
"description": "toggles visible state of accordion when this event emits on $root",
34-
"args": [
35-
{
36-
"arg": "id",
37-
"description": "collapse id that should be open"
38-
},
39-
{
40-
"arg": "accordion",
41-
"description": "accordion group identifier"
42-
}
43-
]
4430
}
4531
]
4632
}

‎lib/components/collapse.vue

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,14 @@
2222

2323
<script>
2424
import { listenOnRootMixin } from '../mixins';
25+
import { hasClass } from '../utils/dom';
26+
27+
// Events we emit on $root
28+
const EVENT_STATE = 'bv::collapse::state';
29+
const EVENT_ACCORDION = 'bv::collapse::accordion';
30+
31+
// Events we listen to on $root
32+
const EVENT_TOGGLE = 'bv::toggle::collapse';
2533
2634
export default {
2735
mixins: [listenOnRootMixin],
@@ -87,6 +95,7 @@
8795
this.reflow(el);
8896
el.style.height = el.scrollHeight + 'px';
8997
this.transitioning = true;
98+
// This should be moved out so we can add cancellable events
9099
this.$emit('show');
91100
},
92101
onAfterEnter(el) {
@@ -101,6 +110,7 @@
101110
this.reflow(el);
102111
this.transitioning = true;
103112
el.style.height = 0;
113+
// This should be moved out so we can add cancellable events
104114
this.$emit('hide');
105115
},
106116
onAfterLeave(el) {
@@ -114,10 +124,11 @@
114124
},
115125
emitState() {
116126
this.$emit('input', this.show);
117-
this.$root.$emit('collapse::toggle::state', this.id, this.show);
127+
// Let v-b-toggle know the state of this collapse
128+
this.$root.$emit(EVENT_STATE, this.id, this.show);
118129
if (this.accordion && this.show) {
119130
// Tell the other collapses in this accordion to close
120-
this.$root.$emit('accordion::toggle', this.id, this.accordion);
131+
this.$root.$emit(EVENT_ACCORDION, this.id, this.accordion);
121132
}
122133
},
123134
clickHandler(evt) {
@@ -126,7 +137,7 @@
126137
if (!this.isNav || !el || getComputedStyle(this.$el).display !== 'block') {
127138
return;
128139
}
129-
if (el.classList.contains('nav-link') || el.classList.contains('dropdown-item')) {
140+
if (hasClass(el, 'nav-link') || hasClass(el, 'dropdown-item')) {
130141
this.show = false;
131142
}
132143
},
@@ -158,8 +169,10 @@
158169
},
159170
},
160171
created() {
161-
this.listenOnRoot('collapse::toggle', this.handleToggleEvt);
162-
this.listenOnRoot('accordion::toggle', this.handleAccordionEvt);
172+
// Listen for toggle events to open/close us
173+
this.listenOnRoot(EVENT_TOGGLE, this.handleToggleEvt);
174+
// Listen to otehr collapses for accordion events
175+
this.listenOnRoot(EVENT_ACCORDION, this.handleAccordionEvt);
163176
},
164177
mounted() {
165178
if (this.isNav && typeof document !== 'undefined') {
@@ -170,7 +183,7 @@
170183
}
171184
this.emitState();
172185
},
173-
destroyed() {
186+
beforeDestroy() {
174187
if (this.isNav && typeof document !== 'undefined') {
175188
window.removeEventListener('resize', this.handleResize, false);
176189
window.removeEventListener('orientationchange', this.handleResize, false);

‎lib/directives/toggle.js

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,20 @@
1+
import target from './_target';
2+
import { setAttr, addClass, removeClass } from '../utils/dom';
3+
4+
// Are we client side?
15
const inBrowser = typeof window !== 'undefined';
26

3-
import target from './_target';
7+
// target listen types
48
const listen_types = {click: true};
59

6-
// Property key for handler
10+
// Property key for handler storage
711
const BVT = '__BV_toggle__';
812

9-
// Event nmmes
10-
const EVENT_TOGGLE = 'collapse::toggle';
11-
const EVENT_STATE = 'collapse::toggle::state';
13+
// Emitted Control Event for collapse (emitted to collapse)
14+
const EVENT_TOGGLE = 'bv::toggle::collapse';
15+
16+
// Listen to Event for toggle state update (Emited by collapse)
17+
const EVENT_STATE = 'bv::collapse::state';
1218

1319
export default {
1420

@@ -22,19 +28,19 @@ export default {
2228

2329
if (inBrowser && vnode.context && targets.length > 0) {
2430
// Add aria attributes to element
25-
el.setAttribute('aria-controls', targets.join(' '));
26-
el.setAttribute('aria-expanded', 'false');
31+
setAttr(el, 'aria-controls', targets.join(' '));
32+
setAttr(el, 'aria-expanded', 'false');
2733

2834
// Toggle state hadnler, stored on element
2935
el[BVT] = function toggleDirectiveHandler(id, state) {
3036
if (targets.indexOf(id) !== -1) {
3137
// Set aria-expanded state
32-
el.setAttribute('aria-expanded', state ? 'true' : 'false');
33-
// Set 'collapsed' class state
38+
setAttr(el, 'aria-expanded', state ? 'true' : 'false');
39+
// Set/Clear 'collapsed' class state
3440
if (state) {
35-
el.classList.remove('collapsed');
41+
removeClass(el, 'collapsed');
3642
} else {
37-
el.classList.add('collapsed');
43+
addClass(el, 'collapsed');
3844
}
3945
}
4046
};

0 commit comments

Comments
 (0)