From 75801c184167ec50dcd1f5ebc830819b092351a6 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 30 Oct 2019 00:17:02 -0300 Subject: [PATCH 01/36] feat(collapse): add new prop `appear` to animate initially visible collapse --- src/components/collapse/collapse.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/collapse/collapse.js b/src/components/collapse/collapse.js index 14c464e372e..04b2d5d12fe 100644 --- a/src/components/collapse/collapse.js +++ b/src/components/collapse/collapse.js @@ -54,6 +54,11 @@ export const BCollapse = /*#__PURE__*/ Vue.extend({ tag: { type: String, default: 'div' + }, + appear: { + // If true (and visible is true on mount), animate initially visible + type: Boolean, + deault: false } }, data() { @@ -249,6 +254,7 @@ export const BCollapse = /*#__PURE__*/ Vue.extend({ 'transition', { props: { + appear: this.appear, enterClass: '', enterActiveClass: 'collapsing', enterToClass: '', From 0ac57071b868033de7f0f55276a44fd5755ec0a7 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 30 Oct 2019 00:20:51 -0300 Subject: [PATCH 02/36] Update package.json --- src/components/collapse/package.json | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/collapse/package.json b/src/components/collapse/package.json index 9be02e5dcf4..7bc8bc3f679 100644 --- a/src/components/collapse/package.json +++ b/src/components/collapse/package.json @@ -33,6 +33,11 @@ { "prop": "visible", "description": "When 'true', expands the collapse" + }, + { + "prop": "appear", + "version": "2.1.0", + "description": "When set, and prop 'visible' is true on mount, will animate on initial mount" } ], "events": [ From 9409fd788f0645f13cd803494110209d1bd19620 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 30 Oct 2019 01:25:13 -0300 Subject: [PATCH 03/36] Update README.md --- src/components/collapse/README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/collapse/README.md b/src/components/collapse/README.md index f11df98a1a2..af1aa65bd8e 100644 --- a/src/components/collapse/README.md +++ b/src/components/collapse/README.md @@ -56,6 +56,10 @@ To make the `` show initially, set the `visible` prop: ``` +By default, an initially visible collspase will not animate on mount. To enable the collapse +expanding animation on mount (when `visible` or `v-model` is `true`), set the `appear` prop on +``. + ## `v-model` support The component's collapsed (visible) state can also be set with `v-model` which binds internally to From d5be5a98419252043669cbaa965388a12b19e749 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 30 Oct 2019 01:28:05 -0300 Subject: [PATCH 04/36] Create bv-collapse helper transition component --- src/utils/bv-collapse.js | 70 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 70 insertions(+) create mode 100644 src/utils/bv-collapse.js diff --git a/src/utils/bv-collapse.js b/src/utils/bv-collapse.js new file mode 100644 index 00000000000..34182ae4ba5 --- /dev/null +++ b/src/utils/bv-collapse.js @@ -0,0 +1,70 @@ +// Generic collapse transion helper component +// +// applies the classes `collapse`, `show` and `collapsing` +// during hte enter/leave transition phases only +// +import Vue from './vue' +import { mergeData } from 'vue-functional-data-merge' +import { getBCR, reflow } from './dom' + +// Transition event handler helpers +const onEnter = el => { + el.style.height = 0 + reflow(el) + el.style.height = el.scrollHeight + 'px' +} + +const onAfterEnter => el { + el.style.height = null +} + +const onLeave = el => { + el.style.height = 'auto' + el.style.display = 'block' + el.style.height = getBCR(el).height + 'px' + reflow(el) + el.style.height = 0 +} + +const onAfterLeave = el => { + el.style.height = null +} + +// Default transition props +const TRANS_PROPS = { + css: true, + enterClass: 'collapse', + enterActiveClass: 'collapsing', + enterToClass: 'collapse show', + leaveClass: 'collapse show', + leaveActiveClass: 'collapsing', + leaveToClass: 'collapse' +} + +// Default transition handlers +const TRANS_HANDLERS = { + enter: onEnter, + afterEnter: onAfterEnter, + leave: onLeave, + afterLeave: onAfterLeave +} + +// @vue/component +export const BVCollapse = /*#__PURE__*/ Vue.extend({ + name: 'BVCollapse', + functional: true, + props: { + appear: { + // If true (and content is visible on mount), animate initially visible state + type: Boolean, + deault: false + } + }, + render(h, { props, data, children }) { + return h( + 'transition', + mergeData(data, { props: TRANS_PROPS, on: TRANS_HANDLERS }, { props }), + children + ) + } +}) From 700225a49706aac59ac070d937be257e84b809a3 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 30 Oct 2019 01:29:42 -0300 Subject: [PATCH 05/36] Update bv-collapse.js --- src/utils/bv-collapse.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/utils/bv-collapse.js b/src/utils/bv-collapse.js index 34182ae4ba5..2ac5cafd738 100644 --- a/src/utils/bv-collapse.js +++ b/src/utils/bv-collapse.js @@ -1,8 +1,8 @@ // Generic collapse transion helper component // -// applies the classes `collapse`, `show` and `collapsing` -// during hte enter/leave transition phases only -// +// Note: +// Applies the classes `collapse`, `show` and `collapsing` +// during the enter/leave transition phases only import Vue from './vue' import { mergeData } from 'vue-functional-data-merge' import { getBCR, reflow } from './dom' From ee3c1e81d19a5794cb202832829baab3f55b89b0 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 30 Oct 2019 01:30:38 -0300 Subject: [PATCH 06/36] Update bv-collapse.js --- src/utils/bv-collapse.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/bv-collapse.js b/src/utils/bv-collapse.js index 2ac5cafd738..b0eaabb7be8 100644 --- a/src/utils/bv-collapse.js +++ b/src/utils/bv-collapse.js @@ -14,7 +14,7 @@ const onEnter = el => { el.style.height = el.scrollHeight + 'px' } -const onAfterEnter => el { +const onAfterEnter = el => { el.style.height = null } From dea5656eeb412ca097566f7c263bd4593d17609b Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 30 Oct 2019 01:42:36 -0300 Subject: [PATCH 07/36] Update collapse.js --- src/components/collapse/collapse.js | 25 +++---------------------- 1 file changed, 3 insertions(+), 22 deletions(-) diff --git a/src/components/collapse/collapse.js b/src/components/collapse/collapse.js index 04b2d5d12fe..0328a08a483 100644 --- a/src/components/collapse/collapse.js +++ b/src/components/collapse/collapse.js @@ -3,15 +3,14 @@ import idMixin from '../../mixins/id' import listenOnRootMixin from '../../mixins/listen-on-root' import normalizeSlotMixin from '../../mixins/normalize-slot' import { isBrowser } from '../../utils/env' +import { BVCollapse } from '../../utils/bv-collapse' import { addClass, hasClass, removeClass, closest, matches, - reflow, getCS, - getBCR, eventOn, eventOff } from '../../utils/dom' @@ -146,30 +145,20 @@ export const BCollapse = /*#__PURE__*/ Vue.extend({ this.show = !this.show }, onEnter(el) { - el.style.height = 0 - reflow(el) - el.style.height = el.scrollHeight + 'px' this.transitioning = true // This should be moved out so we can add cancellable events this.$emit('show') }, onAfterEnter(el) { - el.style.height = null this.transitioning = false this.$emit('shown') }, onLeave(el) { - el.style.height = 'auto' - el.style.display = 'block' - el.style.height = getBCR(el).height + 'px' - reflow(el) this.transitioning = true - el.style.height = 0 // This should be moved out so we can add cancellable events this.$emit('hide') }, onAfterLeave(el) { - el.style.height = null this.transitioning = false this.$emit('hidden') }, @@ -251,17 +240,9 @@ export const BCollapse = /*#__PURE__*/ Vue.extend({ [this.normalizeSlot('default')] ) return h( - 'transition', + BVTransition, { - props: { - appear: this.appear, - enterClass: '', - enterActiveClass: 'collapsing', - enterToClass: '', - leaveClass: '', - leaveActiveClass: 'collapsing', - leaveToClass: '' - }, + props: { appear: this.appear }, on: { enter: this.onEnter, afterEnter: this.onAfterEnter, From 67d7fcf590c74b385bdd89588380263106278408 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 30 Oct 2019 01:44:58 -0300 Subject: [PATCH 08/36] Update collapse.js --- src/components/collapse/collapse.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/collapse/collapse.js b/src/components/collapse/collapse.js index 0328a08a483..38088355897 100644 --- a/src/components/collapse/collapse.js +++ b/src/components/collapse/collapse.js @@ -240,7 +240,7 @@ export const BCollapse = /*#__PURE__*/ Vue.extend({ [this.normalizeSlot('default')] ) return h( - BVTransition, + BVCollapse, { props: { appear: this.appear }, on: { From 96068f72a715612495d7e7487ef3cf75452502b0 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 30 Oct 2019 02:01:07 -0300 Subject: [PATCH 09/36] Update bv-collapse.js --- src/utils/bv-collapse.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/utils/bv-collapse.js b/src/utils/bv-collapse.js index b0eaabb7be8..e827baa1bb0 100644 --- a/src/utils/bv-collapse.js +++ b/src/utils/bv-collapse.js @@ -34,10 +34,10 @@ const onAfterLeave = el => { const TRANS_PROPS = { css: true, enterClass: 'collapse', - enterActiveClass: 'collapsing', + enterActiveClass: 'collapse collapsing', enterToClass: 'collapse show', leaveClass: 'collapse show', - leaveActiveClass: 'collapsing', + leaveActiveClass: 'collapse collapsing', leaveToClass: 'collapse' } From 5884c3f80971f74689b1db4ab7ba7b248e5f0f3c Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 30 Oct 2019 02:10:11 -0300 Subject: [PATCH 10/36] Update bv-collapse.js --- src/utils/bv-collapse.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/bv-collapse.js b/src/utils/bv-collapse.js index e827baa1bb0..05e8edf40e1 100644 --- a/src/utils/bv-collapse.js +++ b/src/utils/bv-collapse.js @@ -33,7 +33,7 @@ const onAfterLeave = el => { // Default transition props const TRANS_PROPS = { css: true, - enterClass: 'collapse', + enterClass: 'collapsing', enterActiveClass: 'collapse collapsing', enterToClass: 'collapse show', leaveClass: 'collapse show', From 1358ec4e7b5946ba043c31b5a115c030e6b7a0fe Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 30 Oct 2019 02:41:05 -0300 Subject: [PATCH 11/36] Update bv-collapse.js --- src/utils/bv-collapse.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/utils/bv-collapse.js b/src/utils/bv-collapse.js index 05e8edf40e1..fe36bcca1b7 100644 --- a/src/utils/bv-collapse.js +++ b/src/utils/bv-collapse.js @@ -33,12 +33,12 @@ const onAfterLeave = el => { // Default transition props const TRANS_PROPS = { css: true, - enterClass: 'collapsing', - enterActiveClass: 'collapse collapsing', + enterClass: '', + enterActiveClass: 'collapsing', enterToClass: 'collapse show', leaveClass: 'collapse show', - leaveActiveClass: 'collapse collapsing', - leaveToClass: 'collapse' + leaveActiveClass: 'collapsing', + leaveToClass: '' } // Default transition handlers From 8ec0eb806178af97b6cab332299868c9bab7dbeb Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 30 Oct 2019 02:49:59 -0300 Subject: [PATCH 12/36] Update bv-collapse.js --- src/utils/bv-collapse.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/utils/bv-collapse.js b/src/utils/bv-collapse.js index fe36bcca1b7..ac5aa2684ea 100644 --- a/src/utils/bv-collapse.js +++ b/src/utils/bv-collapse.js @@ -33,6 +33,9 @@ const onAfterLeave = el => { // Default transition props const TRANS_PROPS = { css: true, + appearClass: '', + appearActiveClass: 'collapsing', + appearToClass: 'collapse show', enterClass: '', enterActiveClass: 'collapsing', enterToClass: 'collapse show', From 045f7e3ad8c94902359860117310d9e63bb71d4e Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 30 Oct 2019 03:14:56 -0300 Subject: [PATCH 13/36] Update bv-collapse.js --- src/utils/bv-collapse.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/utils/bv-collapse.js b/src/utils/bv-collapse.js index ac5aa2684ea..201d44ccd00 100644 --- a/src/utils/bv-collapse.js +++ b/src/utils/bv-collapse.js @@ -46,6 +46,8 @@ const TRANS_PROPS = { // Default transition handlers const TRANS_HANDLERS = { + appear: onEnter, + afterAppear: onAfterEnter, enter: onEnter, afterEnter: onAfterEnter, leave: onLeave, From a8d7b1c5babc6c16a0e3c5bf1ecff331ea9eece3 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 30 Oct 2019 03:19:10 -0300 Subject: [PATCH 14/36] Update bv-collapse.js --- src/utils/bv-collapse.js | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/src/utils/bv-collapse.js b/src/utils/bv-collapse.js index 201d44ccd00..b5d80d1b920 100644 --- a/src/utils/bv-collapse.js +++ b/src/utils/bv-collapse.js @@ -33,9 +33,6 @@ const onAfterLeave = el => { // Default transition props const TRANS_PROPS = { css: true, - appearClass: '', - appearActiveClass: 'collapsing', - appearToClass: 'collapse show', enterClass: '', enterActiveClass: 'collapsing', enterToClass: 'collapse show', @@ -44,16 +41,26 @@ const TRANS_PROPS = { leaveToClass: '' } +const APPEAR_TRANS_PROPS = { + ...TRANS_PROPS, + appearClass: '', + appearActiveClass: 'collapsing', + appearToClass: 'collapse show', +} // Default transition handlers const TRANS_HANDLERS = { - appear: onEnter, - afterAppear: onAfterEnter, enter: onEnter, afterEnter: onAfterEnter, leave: onLeave, afterLeave: onAfterLeave } +const APPEAR_TRANS_HANDLERS = { + ...TRANS_HANDLERS, + appear: onEnter, + afterAppear: onAfterEnter +} + // @vue/component export const BVCollapse = /*#__PURE__*/ Vue.extend({ name: 'BVCollapse', @@ -66,9 +73,11 @@ export const BVCollapse = /*#__PURE__*/ Vue.extend({ } }, render(h, { props, data, children }) { + const transProps = props.appear ? APPEAR_TRANS_HANDLERS : TRANS_PROPS + const transHandlers = props.appear ? APPEAR_TRANS_HANDLERS : TRANS_HANDLERS return h( 'transition', - mergeData(data, { props: TRANS_PROPS, on: TRANS_HANDLERS }, { props }), + mergeData(data, { props: transProps, on: transHandlers }, { props }), children ) } From 207a357a16db0ee60379d3043050c3a9d57d0902 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 30 Oct 2019 03:22:10 -0300 Subject: [PATCH 15/36] Update bv-collapse.js --- src/utils/bv-collapse.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/utils/bv-collapse.js b/src/utils/bv-collapse.js index b5d80d1b920..2159118b46f 100644 --- a/src/utils/bv-collapse.js +++ b/src/utils/bv-collapse.js @@ -45,8 +45,9 @@ const APPEAR_TRANS_PROPS = { ...TRANS_PROPS, appearClass: '', appearActiveClass: 'collapsing', - appearToClass: 'collapse show', + appearToClass: 'collapse show' } + // Default transition handlers const TRANS_HANDLERS = { enter: onEnter, @@ -73,7 +74,7 @@ export const BVCollapse = /*#__PURE__*/ Vue.extend({ } }, render(h, { props, data, children }) { - const transProps = props.appear ? APPEAR_TRANS_HANDLERS : TRANS_PROPS + const transProps = props.appear ? APPEAR_TRANS_PROPS : TRANS_PROPS const transHandlers = props.appear ? APPEAR_TRANS_HANDLERS : TRANS_HANDLERS return h( 'transition', From 02c5c0277b91fe8b537684f956b89beb88dc617e Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 30 Oct 2019 03:30:24 -0300 Subject: [PATCH 16/36] Update collapse.js --- src/components/collapse/collapse.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/collapse/collapse.js b/src/components/collapse/collapse.js index 38088355897..f99be517771 100644 --- a/src/components/collapse/collapse.js +++ b/src/components/collapse/collapse.js @@ -90,8 +90,10 @@ export const BCollapse = /*#__PURE__*/ Vue.extend({ created() { this.show = this.visible }, - mounted() { + beforeMount() { this.show = this.visible + }, + mounted() { // Listen for toggle events to open/close us this.listenOnRoot(EVENT_TOGGLE, this.handleToggleEvt) // Listen to other collapses for accordion events From dedf78b87208101c669f82d23d3d602b223850fd Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 30 Oct 2019 03:45:38 -0300 Subject: [PATCH 17/36] Update collapse.js --- src/components/collapse/collapse.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/collapse/collapse.js b/src/components/collapse/collapse.js index f99be517771..38088355897 100644 --- a/src/components/collapse/collapse.js +++ b/src/components/collapse/collapse.js @@ -90,10 +90,8 @@ export const BCollapse = /*#__PURE__*/ Vue.extend({ created() { this.show = this.visible }, - beforeMount() { - this.show = this.visible - }, mounted() { + this.show = this.visible // Listen for toggle events to open/close us this.listenOnRoot(EVENT_TOGGLE, this.handleToggleEvt) // Listen to other collapses for accordion events From 62ba369430bd3b6378a4ae55782d4faeed9d41a3 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 30 Oct 2019 03:48:56 -0300 Subject: [PATCH 18/36] Update bv-collapse.js --- src/utils/bv-collapse.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/utils/bv-collapse.js b/src/utils/bv-collapse.js index 2159118b46f..742172f381d 100644 --- a/src/utils/bv-collapse.js +++ b/src/utils/bv-collapse.js @@ -23,7 +23,7 @@ const onLeave = el => { el.style.display = 'block' el.style.height = getBCR(el).height + 'px' reflow(el) - el.style.height = 0 + // el.style.height = 0 } const onAfterLeave = el => { @@ -52,7 +52,7 @@ const APPEAR_TRANS_PROPS = { const TRANS_HANDLERS = { enter: onEnter, afterEnter: onAfterEnter, - leave: onLeave, + beforeLeave: onLeave, afterLeave: onAfterLeave } From 5c073fb71429564790e8a35350faa5e8c3dbe354 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 30 Oct 2019 03:51:27 -0300 Subject: [PATCH 19/36] Update bv-collapse.js --- src/utils/bv-collapse.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/utils/bv-collapse.js b/src/utils/bv-collapse.js index 742172f381d..2fbb8f1fea5 100644 --- a/src/utils/bv-collapse.js +++ b/src/utils/bv-collapse.js @@ -50,7 +50,7 @@ const APPEAR_TRANS_PROPS = { // Default transition handlers const TRANS_HANDLERS = { - enter: onEnter, + beforeEnter: onEnter, afterEnter: onAfterEnter, beforeLeave: onLeave, afterLeave: onAfterLeave @@ -58,7 +58,7 @@ const TRANS_HANDLERS = { const APPEAR_TRANS_HANDLERS = { ...TRANS_HANDLERS, - appear: onEnter, + beforeAppear: onEnter, afterAppear: onAfterEnter } From 1a3555abc7aaa80c399d4e9e41fa3d3aafb3f0f5 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 30 Oct 2019 04:06:19 -0300 Subject: [PATCH 20/36] Update bv-collapse.js --- src/utils/bv-collapse.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/utils/bv-collapse.js b/src/utils/bv-collapse.js index 2fbb8f1fea5..a917d4441eb 100644 --- a/src/utils/bv-collapse.js +++ b/src/utils/bv-collapse.js @@ -50,15 +50,15 @@ const APPEAR_TRANS_PROPS = { // Default transition handlers const TRANS_HANDLERS = { - beforeEnter: onEnter, + enter: onEnter, afterEnter: onAfterEnter, - beforeLeave: onLeave, + leave: onLeave, afterLeave: onAfterLeave } const APPEAR_TRANS_HANDLERS = { ...TRANS_HANDLERS, - beforeAppear: onEnter, + appear: onEnter, afterAppear: onAfterEnter } From f1f01219e9a9855710f9a5b6de0083681667d41b Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 30 Oct 2019 04:19:02 -0300 Subject: [PATCH 21/36] Update bv-collapse.js --- src/utils/bv-collapse.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/bv-collapse.js b/src/utils/bv-collapse.js index a917d4441eb..074715e1ed0 100644 --- a/src/utils/bv-collapse.js +++ b/src/utils/bv-collapse.js @@ -38,7 +38,7 @@ const TRANS_PROPS = { enterToClass: 'collapse show', leaveClass: 'collapse show', leaveActiveClass: 'collapsing', - leaveToClass: '' + leaveToClass: 'collapse' } const APPEAR_TRANS_PROPS = { From 474a276d69b1bfed3fe320d8444af9375cfbf09c Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 30 Oct 2019 05:46:56 -0300 Subject: [PATCH 22/36] Update bv-collapse.js --- src/utils/bv-collapse.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/utils/bv-collapse.js b/src/utils/bv-collapse.js index 074715e1ed0..73278ac3f1d 100644 --- a/src/utils/bv-collapse.js +++ b/src/utils/bv-collapse.js @@ -33,18 +33,18 @@ const onAfterLeave = el => { // Default transition props const TRANS_PROPS = { css: true, - enterClass: '', - enterActiveClass: 'collapsing', + enterClass: 'collapse', + enterActiveClass: 'collapse collapsing', enterToClass: 'collapse show', leaveClass: 'collapse show', - leaveActiveClass: 'collapsing', + leaveActiveClass: 'collapse collapsing', leaveToClass: 'collapse' } const APPEAR_TRANS_PROPS = { ...TRANS_PROPS, - appearClass: '', - appearActiveClass: 'collapsing', + appearClass: 'collapse', + appearActiveClass: 'collapse collapsing', appearToClass: 'collapse show' } From 899692855d367ec5c09da5c3994b5b1f22e28608 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 30 Oct 2019 05:52:39 -0300 Subject: [PATCH 23/36] Update bv-collapse.js --- src/utils/bv-collapse.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/utils/bv-collapse.js b/src/utils/bv-collapse.js index 73278ac3f1d..60d1d98013d 100644 --- a/src/utils/bv-collapse.js +++ b/src/utils/bv-collapse.js @@ -34,17 +34,17 @@ const onAfterLeave = el => { const TRANS_PROPS = { css: true, enterClass: 'collapse', - enterActiveClass: 'collapse collapsing', + enterActiveClass: 'collapsing', enterToClass: 'collapse show', leaveClass: 'collapse show', - leaveActiveClass: 'collapse collapsing', + leaveActiveClass: 'collapsing', leaveToClass: 'collapse' } const APPEAR_TRANS_PROPS = { ...TRANS_PROPS, appearClass: 'collapse', - appearActiveClass: 'collapse collapsing', + appearActiveClass: 'collapsing', appearToClass: 'collapse show' } From 3dedb9f391e3666352f4f9672114b15cd2c52e36 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 30 Oct 2019 06:00:35 -0300 Subject: [PATCH 24/36] Update bv-collapse.js --- src/utils/bv-collapse.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/utils/bv-collapse.js b/src/utils/bv-collapse.js index 60d1d98013d..a917d4441eb 100644 --- a/src/utils/bv-collapse.js +++ b/src/utils/bv-collapse.js @@ -33,17 +33,17 @@ const onAfterLeave = el => { // Default transition props const TRANS_PROPS = { css: true, - enterClass: 'collapse', + enterClass: '', enterActiveClass: 'collapsing', enterToClass: 'collapse show', leaveClass: 'collapse show', leaveActiveClass: 'collapsing', - leaveToClass: 'collapse' + leaveToClass: '' } const APPEAR_TRANS_PROPS = { ...TRANS_PROPS, - appearClass: 'collapse', + appearClass: '', appearActiveClass: 'collapsing', appearToClass: 'collapse show' } From 578eefd07b73aa061dfb3315c89534c4a91d66da Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 30 Oct 2019 06:07:01 -0300 Subject: [PATCH 25/36] Update bv-collapse.js --- src/utils/bv-collapse.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/bv-collapse.js b/src/utils/bv-collapse.js index a917d4441eb..074715e1ed0 100644 --- a/src/utils/bv-collapse.js +++ b/src/utils/bv-collapse.js @@ -38,7 +38,7 @@ const TRANS_PROPS = { enterToClass: 'collapse show', leaveClass: 'collapse show', leaveActiveClass: 'collapsing', - leaveToClass: '' + leaveToClass: 'collapse' } const APPEAR_TRANS_PROPS = { From 6dc407ed0bf36bb28ba6355f9a51abb4f2af43f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Wed, 13 Nov 2019 08:45:57 +0100 Subject: [PATCH 26/36] Update README.md --- src/components/collapse/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/collapse/README.md b/src/components/collapse/README.md index af1aa65bd8e..1523c239335 100644 --- a/src/components/collapse/README.md +++ b/src/components/collapse/README.md @@ -56,7 +56,7 @@ To make the `` show initially, set the `visible` prop: ``` -By default, an initially visible collspase will not animate on mount. To enable the collapse +By default, an initially visible collapse will not animate on mount. To enable the collapse expanding animation on mount (when `visible` or `v-model` is `true`), set the `appear` prop on ``. From 43cbcfbbf5d92e5e2c89799efbbdcc0e78a7be8e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Wed, 13 Nov 2019 08:49:52 +0100 Subject: [PATCH 27/36] Update collapse.js --- src/components/collapse/collapse.js | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/src/components/collapse/collapse.js b/src/components/collapse/collapse.js index 38088355897..3e843069dbb 100644 --- a/src/components/collapse/collapse.js +++ b/src/components/collapse/collapse.js @@ -55,9 +55,9 @@ export const BCollapse = /*#__PURE__*/ Vue.extend({ default: 'div' }, appear: { - // If true (and visible is true on mount), animate initially visible + // If `true` (and `visible` is `true` on mount), animate initially visible type: Boolean, - deault: false + default: false } }, data() { @@ -164,7 +164,7 @@ export const BCollapse = /*#__PURE__*/ Vue.extend({ }, emitState() { this.$emit('input', this.show) - // Let v-b-toggle know the state of this collapse + // Let `v-b-toggle` know the state of this collapse this.$root.$emit(EVENT_STATE, this.safeId(), this.show) if (this.accordion && this.show) { // Tell the other collapses in this accordion to close @@ -178,13 +178,15 @@ export const BCollapse = /*#__PURE__*/ Vue.extend({ this.$root.$emit(EVENT_STATE_SYNC, 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). + // 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 restore = hasClass(this.$el, 'show') removeClass(this.$el, 'show') const isBlock = getCS(this.$el).display === 'block' - restore && addClass(this.$el, 'show') + if (restore) { + addClass(this.$el, 'show') + } return isBlock }, clickHandler(evt) { @@ -196,7 +198,7 @@ export const BCollapse = /*#__PURE__*/ Vue.extend({ } if (matches(el, '.nav-link,.dropdown-item') || closest('.nav-link,.dropdown-item', el)) { if (!this.checkDisplayBlock()) { - // Only close the collapse if it is not forced to be 'display: block !important;' + // Only close the collapse if it is not forced to be `display: block !important` this.show = false } } From 64c65a84225c4d8c4b52659cf67d28ea972cd34d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Wed, 13 Nov 2019 08:50:35 +0100 Subject: [PATCH 28/36] Update package.json --- src/components/collapse/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/collapse/package.json b/src/components/collapse/package.json index 7bc8bc3f679..8526099418a 100644 --- a/src/components/collapse/package.json +++ b/src/components/collapse/package.json @@ -36,7 +36,7 @@ }, { "prop": "appear", - "version": "2.1.0", + "version": "2.2.0", "description": "When set, and prop 'visible' is true on mount, will animate on initial mount" } ], From e023d56d16432f9182c239a26abfc947680b230a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Wed, 13 Nov 2019 08:54:54 +0100 Subject: [PATCH 29/36] Update bv-collapse.js --- src/utils/bv-collapse.js | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/utils/bv-collapse.js b/src/utils/bv-collapse.js index 074715e1ed0..48265a47282 100644 --- a/src/utils/bv-collapse.js +++ b/src/utils/bv-collapse.js @@ -11,7 +11,7 @@ import { getBCR, reflow } from './dom' const onEnter = el => { el.style.height = 0 reflow(el) - el.style.height = el.scrollHeight + 'px' + el.style.height = `${el.scrollHeight}px` } const onAfterEnter = el => { @@ -21,7 +21,7 @@ const onAfterEnter = el => { const onLeave = el => { el.style.height = 'auto' el.style.display = 'block' - el.style.height = getBCR(el).height + 'px' + el.style.height = `${getBCR(el).height}px` reflow(el) // el.style.height = 0 } @@ -31,7 +31,7 @@ const onAfterLeave = el => { } // Default transition props -const TRANS_PROPS = { +const TRANSITION_PROPS = { css: true, enterClass: '', enterActiveClass: 'collapsing', @@ -41,23 +41,23 @@ const TRANS_PROPS = { leaveToClass: 'collapse' } -const APPEAR_TRANS_PROPS = { - ...TRANS_PROPS, +const APPEAR_TRANSITION_PROPS = { + ...TRANSITION_PROPS, appearClass: '', appearActiveClass: 'collapsing', appearToClass: 'collapse show' } // Default transition handlers -const TRANS_HANDLERS = { +const TRANSITION_HANDLERS = { enter: onEnter, afterEnter: onAfterEnter, leave: onLeave, afterLeave: onAfterLeave } -const APPEAR_TRANS_HANDLERS = { - ...TRANS_HANDLERS, +const APPEAR_TRANSITION_HANDLERS = { + ...TRANSITION_HANDLERS, appear: onEnter, afterAppear: onAfterEnter } @@ -68,17 +68,17 @@ export const BVCollapse = /*#__PURE__*/ Vue.extend({ functional: true, props: { appear: { - // If true (and content is visible on mount), animate initially visible state + // If `true` (and `visible` is `true` on mount), animate initially visible type: Boolean, - deault: false + default: false } }, render(h, { props, data, children }) { - const transProps = props.appear ? APPEAR_TRANS_PROPS : TRANS_PROPS - const transHandlers = props.appear ? APPEAR_TRANS_HANDLERS : TRANS_HANDLERS + const transitionProps = props.appear ? APPEAR_TRANSITION_PROPS : TRANSITION_PROPS + const transitionHandlers = props.appear ? APPEAR_TRANSITION_HANDLERS : TRANSITION_HANDLERS return h( 'transition', - mergeData(data, { props: transProps, on: transHandlers }, { props }), + mergeData(data, { props: transitionProps, on: transitionHandlers }, { props }), children ) } From 0e28d26b1337739f5fcd1b9be8cbf6df68998028 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Wed, 13 Nov 2019 09:14:05 +0100 Subject: [PATCH 30/36] Update bv-collapse.js --- src/utils/bv-collapse.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/bv-collapse.js b/src/utils/bv-collapse.js index 48265a47282..7b907f45a6a 100644 --- a/src/utils/bv-collapse.js +++ b/src/utils/bv-collapse.js @@ -23,7 +23,7 @@ const onLeave = el => { el.style.display = 'block' el.style.height = `${getBCR(el).height}px` reflow(el) - // el.style.height = 0 + el.style.height = 0 } const onAfterLeave = el => { From 4c58fdcc5d202930f1940bd4e486ca7db44dd6be Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 13 Nov 2019 13:18:50 -0400 Subject: [PATCH 31/36] Update bv-collapse.js --- src/utils/bv-collapse.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/utils/bv-collapse.js b/src/utils/bv-collapse.js index 7b907f45a6a..64c1059b0a5 100644 --- a/src/utils/bv-collapse.js +++ b/src/utils/bv-collapse.js @@ -5,13 +5,15 @@ // during the enter/leave transition phases only import Vue from './vue' import { mergeData } from 'vue-functional-data-merge' -import { getBCR, reflow } from './dom' +import { getBCR, reflow, requestAF } from './dom' // Transition event handler helpers const onEnter = el => { el.style.height = 0 - reflow(el) - el.style.height = `${el.scrollHeight}px` + requestAF(() => { + reflow(el) + el.style.height = `${el.scrollHeight}px` + }) } const onAfterEnter = el => { From 8c127b1ecd3fde9aee19b2703ea61a7cd47d5e2c Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 13 Nov 2019 13:27:07 -0400 Subject: [PATCH 32/36] Update bv-collapse.js --- src/utils/bv-collapse.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/utils/bv-collapse.js b/src/utils/bv-collapse.js index 64c1059b0a5..7c7dfa96917 100644 --- a/src/utils/bv-collapse.js +++ b/src/utils/bv-collapse.js @@ -44,10 +44,10 @@ const TRANSITION_PROPS = { } const APPEAR_TRANSITION_PROPS = { - ...TRANSITION_PROPS, - appearClass: '', - appearActiveClass: 'collapsing', - appearToClass: 'collapse show' + ...TRANSITION_PROPS + // appearClass: '', + // appearActiveClass: 'collapsing', + // appearToClass: 'collapse show' } // Default transition handlers From f43831b88420728f34e7bfe8f1ac64fbf7eb2519 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 13 Nov 2019 13:45:02 -0400 Subject: [PATCH 33/36] Update bv-collapse.js --- src/utils/bv-collapse.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/utils/bv-collapse.js b/src/utils/bv-collapse.js index 7c7dfa96917..5860b4f64e9 100644 --- a/src/utils/bv-collapse.js +++ b/src/utils/bv-collapse.js @@ -59,9 +59,9 @@ const TRANSITION_HANDLERS = { } const APPEAR_TRANSITION_HANDLERS = { - ...TRANSITION_HANDLERS, - appear: onEnter, - afterAppear: onAfterEnter + ...TRANSITION_HANDLERS + // appear: onEnter, + // afterAppear: onAfterEnter } // @vue/component From a7a8a93be5ada8e1f223c7c3612f3be56e34c447 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 13 Nov 2019 14:04:06 -0400 Subject: [PATCH 34/36] Update bv-collapse.js --- src/utils/bv-collapse.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/utils/bv-collapse.js b/src/utils/bv-collapse.js index 5860b4f64e9..787e72f87b5 100644 --- a/src/utils/bv-collapse.js +++ b/src/utils/bv-collapse.js @@ -3,6 +3,8 @@ // Note: // Applies the classes `collapse`, `show` and `collapsing` // during the enter/leave transition phases only +// Although it appears that Vue may be leaving the classes +// in-place after the transition completes import Vue from './vue' import { mergeData } from 'vue-functional-data-merge' import { getBCR, reflow, requestAF } from './dom' From 8b0c148232791a2b98b12af9c95c1bd0d3f0b363 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 13 Nov 2019 14:19:17 -0400 Subject: [PATCH 35/36] Update bv-collapse.js --- src/utils/bv-collapse.js | 21 +++++---------------- 1 file changed, 5 insertions(+), 16 deletions(-) diff --git a/src/utils/bv-collapse.js b/src/utils/bv-collapse.js index 787e72f87b5..5c52368f8f7 100644 --- a/src/utils/bv-collapse.js +++ b/src/utils/bv-collapse.js @@ -35,6 +35,7 @@ const onAfterLeave = el => { } // Default transition props +// `appear` will use the enter classes const TRANSITION_PROPS = { css: true, enterClass: '', @@ -45,14 +46,8 @@ const TRANSITION_PROPS = { leaveToClass: 'collapse' } -const APPEAR_TRANSITION_PROPS = { - ...TRANSITION_PROPS - // appearClass: '', - // appearActiveClass: 'collapsing', - // appearToClass: 'collapse show' -} - // Default transition handlers +// `appear` will use the enter handlers const TRANSITION_HANDLERS = { enter: onEnter, afterEnter: onAfterEnter, @@ -60,12 +55,6 @@ const TRANSITION_HANDLERS = { afterLeave: onAfterLeave } -const APPEAR_TRANSITION_HANDLERS = { - ...TRANSITION_HANDLERS - // appear: onEnter, - // afterAppear: onAfterEnter -} - // @vue/component export const BVCollapse = /*#__PURE__*/ Vue.extend({ name: 'BVCollapse', @@ -78,11 +67,11 @@ export const BVCollapse = /*#__PURE__*/ Vue.extend({ } }, render(h, { props, data, children }) { - const transitionProps = props.appear ? APPEAR_TRANSITION_PROPS : TRANSITION_PROPS - const transitionHandlers = props.appear ? APPEAR_TRANSITION_HANDLERS : TRANSITION_HANDLERS return h( 'transition', - mergeData(data, { props: transitionProps, on: transitionHandlers }, { props }), + // We merge in the `appear` prop last + mergeData(data, { props: TRANSITION_PROPS, on: TRANSITION_HANDLERS }, { props }), + // Note: `` supports a single root element only children ) } From 626aa5afe5a66b69dafac9e1613339ce15cd2b5a Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 13 Nov 2019 14:43:09 -0400 Subject: [PATCH 36/36] Update bv-collapse.js --- src/utils/bv-collapse.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/utils/bv-collapse.js b/src/utils/bv-collapse.js index 5c52368f8f7..41a5c1ea989 100644 --- a/src/utils/bv-collapse.js +++ b/src/utils/bv-collapse.js @@ -12,6 +12,7 @@ import { getBCR, reflow, requestAF } from './dom' // Transition event handler helpers const onEnter = el => { el.style.height = 0 + // Animaton frame delay neeeded for `appear` to work requestAF(() => { reflow(el) el.style.height = `${el.scrollHeight}px`