Skip to content
Permalink
Browse files

fix(collapse): don't make `id` prop required (#4109)

  • Loading branch information...
tmorehouse committed Sep 18, 2019
1 parent 46f2a7d commit 4f935ced9371aac7e18bb65c591791ec7f76430c
Showing with 14 additions and 15 deletions.
  1. +5 −3 src/components/collapse/README.md
  2. +9 −12 src/components/collapse/collapse.js
@@ -63,7 +63,8 @@ the `visible` prop.

Note, when using `v-model` to control `<b-collapse>`, the `aria-*` attributes and class `collapsed`
are not automatically placed on the trigger button (as is the case when using the `v-b-toggle`
directive). In this example we must control them ourselves.
directive). In this example we **must control the attributes ourselves** for proper accessibility
support.

```html
<template>
@@ -120,7 +121,8 @@ multiple target IDs using modifiers:
## Accordion support

Turn a group of `<b-collapse>` components into an accordion by supplying an accordion group
identifier via the `accordion` prop:
identifier via the `accordion` prop. Note that only one collapse in an accordion group can be open
at a time.

```html
<template>
@@ -192,7 +194,7 @@ identifier via the `accordion` prop:
- If using the `v-model` feature of `<b-collapse>` in accordion mode, do not bind the `v-model` or
`visible` prop of all the collapses in the accordion group to the same variable!
- Ensure, at most, only one `<b-collapse>` in the accordion group has the `visible` prop and/or
`v-model` set to `true`.
`v-model` set to `true`. Only one collapse in an accordion group can be open at a time.

## Hiding and showing content in the toggle button based on collapse state

@@ -1,4 +1,5 @@
import Vue from '../../utils/vue'
import idMixin from '../../mixins/id'
import listenOnRootMixin from '../../mixins/listen-on-root'
import normalizeSlotMixin from '../../mixins/normalize-slot'
import { isBrowser } from '../../utils/env'
@@ -32,16 +33,12 @@ const EventOptions = { passive: true, capture: false }
// @vue/component
export const BCollapse = /*#__PURE__*/ Vue.extend({
name: 'BCollapse',
mixins: [listenOnRootMixin, normalizeSlotMixin],
mixins: [idMixin, listenOnRootMixin, normalizeSlotMixin],
model: {
prop: 'visible',
event: 'input'
},
props: {
id: {
type: String,
required: true
},
isNav: {
type: Boolean,
default: false
@@ -105,7 +102,7 @@ export const BCollapse = /*#__PURE__*/ Vue.extend({
})
// Listen for "Sync state" requests from `v-b-toggle`
this.listenOnRoot(EVENT_STATE_REQUEST, id => {
if (id === this.id) {
if (id === this.safeId()) {
this.$nextTick(this.emitSync)
}
})
@@ -174,17 +171,17 @@ export const BCollapse = /*#__PURE__*/ Vue.extend({
emitState() {
this.$emit('input', this.show)
// Let v-b-toggle know the state of this collapse
this.$root.$emit(EVENT_STATE, this.id, this.show)
this.$root.$emit(EVENT_STATE, this.safeId(), this.show)
if (this.accordion && this.show) {
// Tell the other collapses in this accordion to close
this.$root.$emit(EVENT_ACCORDION, this.id, this.accordion)
this.$root.$emit(EVENT_ACCORDION, this.safeId(), this.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.$root.$emit(EVENT_STATE_SYNC, this.id, this.show)
this.$root.$emit(EVENT_STATE_SYNC, this.safeId(), this.show)
},
checkDisplayBlock() {
// Check to see if the collapse has `display: block !important;` set.
@@ -211,7 +208,7 @@ export const BCollapse = /*#__PURE__*/ Vue.extend({
}
},
handleToggleEvt(target) {
if (target !== this.id) {
if (target !== this.safeId()) {
return
}
this.toggle()
@@ -220,7 +217,7 @@ export const BCollapse = /*#__PURE__*/ Vue.extend({
if (!this.accordion || accordion !== this.accordion) {
return
}
if (openedId === this.id) {
if (openedId === this.safeId()) {
// Open this collapse if not shown
if (!this.show) {
this.toggle()
@@ -243,7 +240,7 @@ export const BCollapse = /*#__PURE__*/ Vue.extend({
{
class: this.classObject,
directives: [{ name: 'show', value: this.show }],
attrs: { id: this.id || null },
attrs: { id: this.safeId() },
on: { click: this.clickHandler }
},
[this.normalizeSlot('default')]

0 comments on commit 4f935ce

Please sign in to comment.
You can’t perform that action at this time.