feat(b-collapse): add optional scoping to default slot (#4405)

tmorehouse · jacobmllr95 · commit 8e95bacf9d00 · 2019-11-20T09:06:08.000+01:00
* feat(b-collapse): add optional scoping to default slot

* Update collapse.js

* Update collapse.js

* Update collapse.js

* Update collapse.js

* Update package.json

* Update collapse.spec.js

* Update collapse.spec.js

* Update collapse.spec.js

* Update README.md

* Update collapse.spec.js

* Update README.md
diff --git a/src/components/collapse/README.md b/src/components/collapse/README.md
@@ -261,6 +261,17 @@ To toggle (open/close) a **specific collapse**, pass the collapse `id`:
 this.$root.$emit('bv::toggle::collapse', 'my-collapse-id')
 ```
 
+## Optionally scoped default slot
+
+<span class="badge badge-info small">New in v2.2.0</span>
+
+The default slot can be optionally scoped. The following scope properties are available:
+
+| Property   | Type     | Description                          |
+| ---------- | -------- | ------------------------------------ |
+| `visible`  | Boolean  | Visible state of the collapse        |
+| `close`    | Function | When called, will close the collapse |
+
 ## Accessibility
 
 The `v-b-toggle` directive will automatically add the ARIA attributes `aria-controls` and
diff --git a/src/components/collapse/collapse.js b/src/components/collapse/collapse.js
@@ -231,6 +231,10 @@ export const BCollapse = /*#__PURE__*/ Vue.extend({
     }
   },
   render(h) {
+    const scope = {
+      visible: this.show,
+      close: () => (this.show = false)
+    }
     const content = h(
       this.tag,
       {
@@ -239,7 +243,7 @@ export const BCollapse = /*#__PURE__*/ Vue.extend({
         attrs: { id: this.safeId() },
         on: { click: this.clickHandler }
       },
-      [this.normalizeSlot('default')]
+      [this.normalizeSlot('default', scope)]
     )
     return h(
       BVCollapse,
diff --git a/src/components/collapse/collapse.spec.js b/src/components/collapse/collapse.spec.js
@@ -566,4 +566,59 @@ describe('collapse', () => {
 
     wrapper.destroy()
   })
+
+  it('default slot scope works', async () => {
+    let scope = null
+    const wrapper = mount(BCollapse, {
+      attachToDocument: true,
+      propsData: {
+        // 'id' is a required prop
+        id: 'test',
+        visible: true
+      },
+      scopedSlots: {
+        default(props) {
+          scope = props
+          return this.$createElement('div', 'foobar')
+        }
+      },
+      stubs: {
+        // Disable use of default test transitionStub component
+        transition: false
+      }
+    })
+    const rootWrapper = createWrapper(wrapper.vm.$root)
+    await waitNT(wrapper.vm)
+    await waitRAF()
+    expect(wrapper.element.style.display).toEqual('')
+    expect(wrapper.emitted('show')).not.toBeDefined() // Does not emit show when initially visible
+    expect(wrapper.emitted('input')).toBeDefined()
+    expect(wrapper.emitted('input').length).toBe(1)
+    expect(wrapper.emitted('input')[0][0]).toBe(true)
+    expect(rootWrapper.emitted(EVENT_ACCORDION)).not.toBeDefined()
+    expect(rootWrapper.emitted(EVENT_STATE)).toBeDefined()
+    expect(rootWrapper.emitted(EVENT_STATE).length).toBe(1)
+    expect(rootWrapper.emitted(EVENT_STATE)[0][0]).toBe('test') // ID
+    expect(rootWrapper.emitted(EVENT_STATE)[0][1]).toBe(true) // Visible state
+    expect(rootWrapper.emitted(EVENT_STATE_SYNC)).not.toBeDefined()
+
+    expect(scope).not.toBe(null)
+    expect(scope.visible).toBe(true)
+    expect(typeof scope.close).toBe('function')
+
+    scope.close()
+    await waitNT(wrapper.vm)
+    await waitRAF()
+
+    expect(rootWrapper.emitted(EVENT_STATE_SYNC)).toBeDefined()
+    expect(rootWrapper.emitted(EVENT_STATE_SYNC).length).toBe(2)
+    expect(rootWrapper.emitted(EVENT_STATE_SYNC)[1][0]).toBe('test') // ID
+    expect(rootWrapper.emitted(EVENT_STATE_SYNC)[1][1]).toBe(false) // Visible state
+
+    expect(scope).not.toBe(null)
+    expect(scope.visible).toBe(false)
+    expect(typeof scope.close).toBe('function')
+
+    wrapper.destroy()
+  })
 })
diff --git a/src/components/collapse/package.json b/src/components/collapse/package.json
@@ -40,6 +40,24 @@
             "description": "When set, and prop 'visible' is true on mount, will animate on initial mount"
           }
         ],
+        "slots": [
+          {
+            "name": "default",
+            "version": "2.2.0",
+            "scope": [
+              {
+                "prop": "visible",
+                "type": "Boolean",
+                "description": "Visible state of the collapse: true if the collapse is visible"
+              },
+              {
+                "prop": "close",
+                "type": "Function",
+                "description": "Method for closing the collapse"
+              }
+            ]
+          }
+        ],
         "events": [
           {
             "event": "input",

Original file line number	Diff line number	Diff line change
`@@ -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,`