1 1
import Vue from '../../utils/vue'
2 +
import idMixin from '../../mixins/id'
2 3
import listenOnRootMixin from '../../mixins/listen-on-root'
3 4
import normalizeSlotMixin from '../../mixins/normalize-slot'
4 5
import { isBrowser } from '../../utils/env'
@@ -32,16 +33,12 @@ const EventOptions = { passive: true, capture: false }
32 33
// @vue/component
33 34
export const BCollapse = /*#__PURE__*/ Vue.extend({
34 35
name: 'BCollapse',
35 -
mixins: [listenOnRootMixin, normalizeSlotMixin],
36 +
mixins: [idMixin, listenOnRootMixin, normalizeSlotMixin],
36 37
model: {
37 38
prop: 'visible',
38 39
event: 'input'
39 40
},
40 41
props: {
41 -
id: {
42 -
type: String,
43 -
required: true
44 -
},
45 42
isNav: {
46 43
type: Boolean,
47 44
default: false
@@ -105,7 +102,7 @@ export const BCollapse = /*#__PURE__*/ Vue.extend({
105 102
})
106 103
// Listen for "Sync state" requests from `v-b-toggle`
107 104
this.listenOnRoot(EVENT_STATE_REQUEST, id => {
108 -
if (id === this.id) {
105 +
if (id === this.safeId()) {
109 106
this.$nextTick(this.emitSync)
110 107
}
111 108
})
@@ -174,17 +171,17 @@ export const BCollapse = /*#__PURE__*/ Vue.extend({
174 171
emitState() {
175 172
this.$emit('input', this.show)
176 173
// Let v-b-toggle know the state of this collapse
177 -
this.$root.$emit(EVENT_STATE, this.id, this.show)
174 +
this.$root.$emit(EVENT_STATE, this.safeId(), this.show)
178 175
if (this.accordion && this.show) {
179 176
// Tell the other collapses in this accordion to close
180 -
this.$root.$emit(EVENT_ACCORDION, this.id, this.accordion)
177 +
this.$root.$emit(EVENT_ACCORDION, this.safeId(), this.accordion)
181 178
}
182 179
},
183 180
emitSync() {
184 181
// Emit a private event every time this component updates to ensure
185 182
// the toggle button is in sync with the collapse's state
186 183
// It is emitted regardless if the visible state changes
187 -
this.$root.$emit(EVENT_STATE_SYNC, this.id, this.show)
184 +
this.$root.$emit(EVENT_STATE_SYNC, this.safeId(), this.show)
188 185
},
189 186
checkDisplayBlock() {
190 187
// Check to see if the collapse has `display: block !important;` set.
@@ -211,7 +208,7 @@ export const BCollapse = /*#__PURE__*/ Vue.extend({
211 208
}
212 209
},
213 210
handleToggleEvt(target) {
214 -
if (target !== this.id) {
211 +
if (target !== this.safeId()) {
215 212
return
216 213
}
217 214
this.toggle()
@@ -220,7 +217,7 @@ export const BCollapse = /*#__PURE__*/ Vue.extend({
220 217
if (!this.accordion || accordion !== this.accordion) {
221 218
return
222 219
}
223 -
if (openedId === this.id) {
220 +
if (openedId === this.safeId()) {
224 221
// Open this collapse if not shown
225 222
if (!this.show) {
226 223
this.toggle()
@@ -243,7 +240,7 @@ export const BCollapse = /*#__PURE__*/ Vue.extend({
243 240
{
244 241
class: this.classObject,
245 242
directives: [{ name: 'show', value: this.show }],
246 -
attrs: { id: this.id || null },
243 +
attrs: { id: this.safeId() },
247 244
on: { click: this.clickHandler }
248 245
},
249 246
[this.normalizeSlot('default')]
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