From c8665b596a4a6feacfc04c1c4ba287b767327993 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 13 Jan 2019 18:53:51 -0400 Subject: [PATCH 1/8] feat(table): add support for transitions on tbody element Renders the `` element usingVue's `` component. Users can pass an object of props via the `tbodyTransitionProps` prop, and can also pass an object of transition event handlers via the `tbodyTransitionHandlers` props. When neither prop is specified, not transitions will occur. --- src/components/table/table.js | 22 ++++++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/src/components/table/table.js b/src/components/table/table.js index f576b50624f..3f91c05dc6d 100644 --- a/src/components/table/table.js +++ b/src/components/table/table.js @@ -352,6 +352,14 @@ export default { // Passthrough prop. Passed to the context object. Not used by b-table directly type: String, default: '' + }, + tbodyTransitionProps: { + type: Object + // default: undefined + }, + tbodyTransitionHandlers: { + type: Object + // default: undefined } }, data() { @@ -1510,8 +1518,18 @@ export default { // Assemble the rows into the tbody const tbody = h( - 'tbody', - { class: this.bodyClasses, attrs: this.isStacked ? { role: 'rowgroup' } : {} }, + 'transition-group', + { + props: assign( + {}, + this.tbodyTransitionProps || { css: false }, + // Always use tbody tag as element. Users can't override this. + { tag: 'tbody' } + ), + on: this.tbodyTransitionHandlers || {}, + class: this.bodyClasses, + attrs: this.isStacked ? { role: 'rowgroup' } : {} + }, rows ) From 369b356e9d7e1912932455a1fe7f293eeac01f4b Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 13 Jan 2019 18:58:16 -0400 Subject: [PATCH 2/8] Update table.js --- src/components/table/table.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/table/table.js b/src/components/table/table.js index 3f91c05dc6d..54dd79edf9a 100644 --- a/src/components/table/table.js +++ b/src/components/table/table.js @@ -1522,7 +1522,7 @@ export default { { props: assign( {}, - this.tbodyTransitionProps || { css: false }, + this.tbodyTransitionProps || {}, // Always use tbody tag as element. Users can't override this. { tag: 'tbody' } ), From 60c7384d8e79fa3195de3a5e1d09e0b3c1d556b1 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 13 Jan 2019 19:19:16 -0400 Subject: [PATCH 3/8] conditionally use transition-group --- src/components/table/table.js | 25 +++++++++++++++++-------- 1 file changed, 17 insertions(+), 8 deletions(-) diff --git a/src/components/table/table.js b/src/components/table/table.js index 54dd79edf9a..aee5e6bfcff 100644 --- a/src/components/table/table.js +++ b/src/components/table/table.js @@ -1516,17 +1516,26 @@ export default { rows.push(h(false)) } + // Is tbody transition enabled + const isTransGroup = this.tbodyTransitionProps || this.tbodyTransitionHandlers + let tbodyProps = {} + let tbodyOn = {} + if (isTransGroup) { + tbodyOn = this.tbodyTransitionHandlers || {} + tbodyProps = assign( + {}, + this.tbodyTransitionProps || {}, + // Always use tbody element as tag. Users can't override this. + { tag: 'tbody' } + ) + } + // Assemble the rows into the tbody const tbody = h( - 'transition-group', + isTransGroup ? 'transition-group' : 'tbody', { - props: assign( - {}, - this.tbodyTransitionProps || {}, - // Always use tbody tag as element. Users can't override this. - { tag: 'tbody' } - ), - on: this.tbodyTransitionHandlers || {}, + props: tbodyProps, + on: tbodyOn, class: this.bodyClasses, attrs: this.isStacked ? { role: 'rowgroup' } : {} }, From d23270a23cc4113910d415e50fda212b124c52b7 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 13 Jan 2019 20:27:13 -0400 Subject: [PATCH 4/8] Update README.md --- src/components/table/README.md | 67 ++++++++++++++++++++++++++++++++++ 1 file changed, 67 insertions(+) diff --git a/src/components/table/README.md b/src/components/table/README.md index ba6d6efa52b..3feda09ec44 100644 --- a/src/components/table/README.md +++ b/src/components/table/README.md @@ -1334,6 +1334,73 @@ remove the record from the original items array. **Note:** _Do not bind any value directly to the `value` prop. Use the `v-model` binding._ +## Table body transition support + +Vue transitions and animations are optionally supported on the `` element via the use of Vue's +`` component internally. Three props are available for transitions support: + +| Prop | Type | Default | Description +| --------------------------- | -------- | --------- | ----------------------------------------------------------------- | +| `tbody-transition-props` | `Object` | undefined | Object of transition-group properties | +| `tbody-transition-handlers` | `Object` | undefined | Object of transition-group event handlers | +| `primary-key` | `String` | undefined | String specifying the field to use as a unique row key (required) | + +To enable transitons you need to specify `tbody-transition-props` and/or `tbody-transition-handlers`, +and must specify which field key to use as a unique key via the `primary-key` prop. Your data **must +have** a column that has a unique value per row in order for transitions to work properly. The +`primary-key` field's _value_ can either be a unique string or number. + +You must also provide CSS to handle your transitions (if using CSS transitions) in your project. + +For more information of Vue's list rendering transitions, see the +[Vue JS official docs](https://vuejs.org/v2/guide/transitions.html#List-Move-Transitions). + +In the example below, we have used the following custom CSS: + +```css +table#table-flip-list-example .table-flip-list-example-move { + transition: transform 1s; +} +``` + +```html + + + + + +``` + ## Using Items Provider Functions As mentioned under the [**Items**](#items-record-data-) prop section, it is possible to use a From d89ac6c08f6fedbaaf87d2c27aa273de30597ddc Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 13 Jan 2019 20:28:55 -0400 Subject: [PATCH 5/8] Update styles.css --- docs/assets/css/styles.css | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/docs/assets/css/styles.css b/docs/assets/css/styles.css index c9f62aaf1c7..0802675444c 100644 --- a/docs/assets/css/styles.css +++ b/docs/assets/css/styles.css @@ -13,13 +13,10 @@ z-index: 999999; } - * { -webkit-font-smoothing: antialiased; } - - .bd-toc-link, .bd-navbar .navbar-nav .nav-link.active { font-weight: normal; } @@ -118,3 +115,8 @@ pre.editable.error:after { min-height: 10rem; background-color: rgba(255, 0, 0, .1); } + +/* CSS for table transtion example */ +table#table-flip-list-example .table-flip-list-example-move { + transition: transform 1s; +} From 48e47860538e79a858c9a6f160b34008f3be46c2 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 13 Jan 2019 20:45:23 -0400 Subject: [PATCH 6/8] Update styles.css --- docs/assets/css/styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/assets/css/styles.css b/docs/assets/css/styles.css index 0802675444c..f13f8cb1841 100644 --- a/docs/assets/css/styles.css +++ b/docs/assets/css/styles.css @@ -117,6 +117,6 @@ pre.editable.error:after { } /* CSS for table transtion example */ -table#table-flip-list-example .table-flip-list-example-move { +table#table-transition-example .flip-list-move { transition: transform 1s; } From b600b085fd4f428885d91c76e0b752d50e5f1a41 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 13 Jan 2019 20:50:22 -0400 Subject: [PATCH 7/8] Update README.md --- src/components/table/README.md | 23 +++++++++++++---------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/src/components/table/README.md b/src/components/table/README.md index 3feda09ec44..7a486fdcdfc 100644 --- a/src/components/table/README.md +++ b/src/components/table/README.md @@ -1347,8 +1347,10 @@ Vue transitions and animations are optionally supported on the `` element To enable transitons you need to specify `tbody-transition-props` and/or `tbody-transition-handlers`, and must specify which field key to use as a unique key via the `primary-key` prop. Your data **must -have** a column that has a unique value per row in order for transitions to work properly. The -`primary-key` field's _value_ can either be a unique string or number. +have** a column (specified by the `primary-key` prop) that has a **unique value per row** in order for +transitions to work properly. The `primary-key` field's _value_ can either be a unique string or number. +The field specified does not need to appear in the rendered table output, but it **must** exist in each +row of your items data. You must also provide CSS to handle your transitions (if using CSS transitions) in your project. @@ -1358,20 +1360,20 @@ For more information of Vue's list rendering transitions, see the In the example below, we have used the following custom CSS: ```css -table#table-flip-list-example .table-flip-list-example-move { +table#table-transition-example .flip-list-move { transition: transform 1s; } ``` ```html @@ -1380,13 +1382,14 @@ export default { data () { return { transProps: { - name: 'table-flip-list-example' + // Transition name + name: 'flip-list' }, items: [ - {a: 2, b: 2, c: 1}, - {a: 1, b: 3, c: 3}, - {a: 3, b: 4, c: 4}, - {a: 4, b: 1, c: 2} + {a: 2, b: 'Two', c: 'Moose'}, + {a: 1, b: 'Three', c: 'Dog'}, + {a: 3, b: 'Four', c: 'Cat'}, + {a: 4, b: 'One', c: 'Mouse'} ], fields: [ { key: 'a', sortable: true }, From a6036ba5b4e71ed3f9337d336f0f8ef42668e779 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 13 Jan 2019 20:52:44 -0400 Subject: [PATCH 8/8] Update README.md --- src/components/table/README.md | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/src/components/table/README.md b/src/components/table/README.md index 7a486fdcdfc..8cf3e9ea845 100644 --- a/src/components/table/README.md +++ b/src/components/table/README.md @@ -1337,13 +1337,14 @@ remove the record from the original items array. ## Table body transition support Vue transitions and animations are optionally supported on the `` element via the use of Vue's -`` component internally. Three props are available for transitions support: - -| Prop | Type | Default | Description -| --------------------------- | -------- | --------- | ----------------------------------------------------------------- | -| `tbody-transition-props` | `Object` | undefined | Object of transition-group properties | -| `tbody-transition-handlers` | `Object` | undefined | Object of transition-group event handlers | -| `primary-key` | `String` | undefined | String specifying the field to use as a unique row key (required) | +`` component internally. Three props are available for transitions support (all three +default to undefined): + +| Prop | Type | Description +| --------------------------- | ------ | ----------------------------------------------------------------- | +| `tbody-transition-props` | Object | Object of transition-group properties | +| `tbody-transition-handlers` | Object | Object of transition-group event handlers | +| `primary-key` | String | String specifying the field to use as a unique row key (required) | To enable transitons you need to specify `tbody-transition-props` and/or `tbody-transition-handlers`, and must specify which field key to use as a unique key via the `primary-key` prop. Your data **must