/
collapse.js
276 lines (263 loc) · 8.14 KB
/
collapse.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
import { defineComponent } from '../../vue'
import { NAME_COLLAPSE } from '../../constants/components'
import { CLASS_NAME_SHOW } from '../../constants/classes'
import { IS_BROWSER } from '../../constants/env'
import {
EVENT_NAME_HIDDEN,
EVENT_NAME_HIDE,
EVENT_NAME_SHOW,
EVENT_NAME_SHOWN,
EVENT_OPTIONS_NO_CAPTURE
} from '../../constants/events'
import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props'
import { SLOT_NAME_DEFAULT } from '../../constants/slots'
import { addClass, hasClass, removeClass, closest, matches, getCS } from '../../utils/dom'
import { getRootActionEventName, getRootEventName, eventOnOff } from '../../utils/events'
import { makeModelMixin } from '../../utils/model'
import { sortKeys } from '../../utils/object'
import { makeProp, makePropsConfigurable } from '../../utils/props'
import { idMixin, props as idProps } from '../../mixins/id'
import { listenOnRootMixin } from '../../mixins/listen-on-root'
import { normalizeSlotMixin } from '../../mixins/normalize-slot'
import { BVCollapse } from './helpers/bv-collapse'
// --- Constants ---
const ROOT_ACTION_EVENT_NAME_TOGGLE = getRootActionEventName(NAME_COLLAPSE, 'toggle')
const ROOT_ACTION_EVENT_NAME_REQUEST_STATE = getRootActionEventName(NAME_COLLAPSE, 'request-state')
const ROOT_EVENT_NAME_ACCORDION = getRootEventName(NAME_COLLAPSE, 'accordion')
const ROOT_EVENT_NAME_STATE = getRootEventName(NAME_COLLAPSE, 'state')
const ROOT_EVENT_NAME_SYNC_STATE = getRootEventName(NAME_COLLAPSE, 'sync-state')
const {
mixin: modelMixin,
props: modelProps,
prop: MODEL_PROP_NAME,
event: MODEL_EVENT_NAME
} = makeModelMixin('visible', { type: PROP_TYPE_BOOLEAN, defaultValue: false })
// --- Props ---
export const props = makePropsConfigurable(
sortKeys({
...idProps,
...modelProps,
// If `true` (and `visible` is `true` on mount), animate initially visible
accordion: makeProp(PROP_TYPE_STRING),
appear: makeProp(PROP_TYPE_BOOLEAN, false),
isNav: makeProp(PROP_TYPE_BOOLEAN, false),
tag: makeProp(PROP_TYPE_STRING, 'div')
}),
NAME_COLLAPSE
)
// --- Main component ---
// @vue/component
export const BCollapse = /*#__PURE__*/ defineComponent({
name: NAME_COLLAPSE,
compatConfig: {
MODE: 3,
OPTIONS_BEFORE_DESTROY: 'suppress-warning'
},
mixins: [idMixin, modelMixin, normalizeSlotMixin, listenOnRootMixin],
props,
data() {
return {
show: this[MODEL_PROP_NAME],
transitioning: false
}
},
computed: {
classObject() {
const { transitioning } = this
return {
'navbar-collapse': this.isNav,
collapse: !transitioning,
show: this.show && !transitioning
}
},
slotScope() {
return {
visible: this.show,
close: () => {
this.show = false
}
}
}
},
watch: {
[MODEL_PROP_NAME](newValue) {
if (newValue !== this.show) {
this.show = newValue
}
},
show(newValue, oldValue) {
if (newValue !== oldValue) {
this.emitState()
}
}
},
created() {
this.show = this[MODEL_PROP_NAME]
},
mounted() {
this.show = this[MODEL_PROP_NAME]
// Listen for toggle events to open/close us
this.listenOnRoot(ROOT_ACTION_EVENT_NAME_TOGGLE, this.handleToggleEvent)
// Listen to other collapses for accordion events
this.listenOnRoot(ROOT_EVENT_NAME_ACCORDION, this.handleAccordionEvent)
if (this.isNav) {
// Set up handlers
this.setWindowEvents(true)
this.handleResize()
}
this.$nextTick(() => {
this.emitState()
})
// Listen for "Sync state" requests from `v-b-toggle`
this.listenOnRoot(ROOT_ACTION_EVENT_NAME_REQUEST_STATE, id => {
if (id === this.safeId()) {
this.$nextTick(this.emitSync)
}
})
},
updated() {
// Emit a private event every time this component updates to ensure
// the toggle button is in sync with the collapse's state
// It is emitted regardless if the visible state changes
this.emitSync()
},
/* istanbul ignore next */
deactivated() {
if (this.isNav) {
this.setWindowEvents(false)
}
},
/* istanbul ignore next */
activated() {
if (this.isNav) {
this.setWindowEvents(true)
}
this.emitSync()
},
beforeDestroy() {
// Trigger state emit if needed
this.show = false
if (this.isNav && IS_BROWSER) {
this.setWindowEvents(false)
}
},
methods: {
setWindowEvents(on) {
eventOnOff(on, window, 'resize', this.handleResize, EVENT_OPTIONS_NO_CAPTURE)
eventOnOff(on, window, 'orientationchange', this.handleResize, EVENT_OPTIONS_NO_CAPTURE)
},
toggle() {
this.show = !this.show
},
onEnter() {
this.transitioning = true
// This should be moved out so we can add cancellable events
this.$emit(EVENT_NAME_SHOW)
},
onAfterEnter() {
this.transitioning = false
this.$emit(EVENT_NAME_SHOWN)
},
onLeave() {
this.transitioning = true
// This should be moved out so we can add cancellable events
this.$emit(EVENT_NAME_HIDE)
},
onAfterLeave() {
this.transitioning = false
this.$emit(EVENT_NAME_HIDDEN)
},
emitState() {
const { show, accordion } = this
const id = this.safeId()
this.$emit(MODEL_EVENT_NAME, show)
// Let `v-b-toggle` know the state of this collapse
this.emitOnRoot(ROOT_EVENT_NAME_STATE, id, show)
if (accordion && show) {
// Tell the other collapses in this accordion to close
this.emitOnRoot(ROOT_EVENT_NAME_ACCORDION, id, accordion)
}
},
emitSync() {
// Emit a private event every time this component updates to ensure
// the toggle button is in sync with the collapse's state
// It is emitted regardless if the visible state changes
this.emitOnRoot(ROOT_EVENT_NAME_SYNC_STATE, this.safeId(), this.show)
},
checkDisplayBlock() {
// Check to see if the collapse has `display: block !important` set
// We can't set `display: none` directly on `this.$el`, as it would
// trigger a new transition to start (or cancel a current one)
const { $el } = this
const restore = hasClass($el, CLASS_NAME_SHOW)
removeClass($el, CLASS_NAME_SHOW)
const isBlock = getCS($el).display === 'block'
if (restore) {
addClass($el, CLASS_NAME_SHOW)
}
return isBlock
},
clickHandler(event) {
const { target: el } = event
// If we are in a nav/navbar, close the collapse when non-disabled link clicked
/* istanbul ignore next: can't test `getComputedStyle()` in JSDOM */
if (!this.isNav || !el || getCS(this.$el).display !== 'block') {
return
}
// Only close the collapse if it is not forced to be `display: block !important`
if (
(matches(el, '.nav-link,.dropdown-item') || closest('.nav-link,.dropdown-item', el)) &&
!this.checkDisplayBlock()
) {
this.show = false
}
},
handleToggleEvent(id) {
if (id === this.safeId()) {
this.toggle()
}
},
handleAccordionEvent(openedId, openAccordion) {
const { accordion, show } = this
if (!accordion || accordion !== openAccordion) {
return
}
const isThis = openedId === this.safeId()
// Open this collapse if not shown or
// close this collapse if shown
if ((isThis && !show) || (!isThis && show)) {
this.toggle()
}
},
handleResize() {
// Handler for orientation/resize to set collapsed state in nav/navbar
this.show = getCS(this.$el).display === 'block'
}
},
render(h) {
const { appear } = this
const $content = h(
this.tag,
{
class: this.classObject,
directives: [{ name: 'show', value: this.show }],
attrs: { id: this.safeId() },
on: { click: this.clickHandler }
},
this.normalizeSlot(SLOT_NAME_DEFAULT, this.slotScope)
)
return h(
BVCollapse,
{
props: { appear },
on: {
enter: this.onEnter,
afterEnter: this.onAfterEnter,
leave: this.onLeave,
afterLeave: this.onAfterLeave
}
},
[$content]
)
}
})