Merge pull request #3 from kulmann/transition-groups

Transition groups
kulmann · Feb 2, 2021 · b8e5e5a · b8e5e5a
2 parents 0426f8d + 31a3338
commit b8e5e5a
Show file tree

Hide file tree

Showing 6 changed files with 95 additions and 69 deletions.
diff --git a/dist/stats.json b/dist/stats.json
diff --git a/dist/vuetable-2-full.js b/dist/vuetable-2-full.js
@@ -1,5 +1,5 @@
 /**
- * vuetable-2 v1.7.5
+ * vuetable-2 v1.7.6
  * https://github.com/ratiw/vuetable-2
  * Released under the MIT License.
  */
@@ -3115,11 +3115,12 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
       type: [String, Function],
       default: ''
     },
-    detailRowComponent: {
-      type: String,
-      default: ''
+    tbodyTransitionProps: {
+      type: Object,
+      default: null,
+      required: false
     },
-    detailRowTransition: {
+    detailRowComponent: {
       type: String,
       default: ''
     },
@@ -3207,7 +3208,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 
   computed: {
     version: function version() {
-      return "1.7.5";
+      return "1.7.6";
     },
     useDetailRow: function useDetailRow() {
       if (this.tableData && this.tableData[0] && this.detailRowComponent !== '' && typeof this.tableData[0][this.trackBy] === 'undefined') {
@@ -3255,6 +3256,20 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
     },
     isFixedHeader: function isFixedHeader() {
       return this.tableHeight != null;
+    },
+    isTransitionGroup: function isTransitionGroup() {
+      return this.tbodyTransitionProps !== null;
+    },
+    tbodyComponent: function tbodyComponent() {
+      return this.isTransitionGroup ? 'transition-group' : 'tbody';
+    },
+    tbodyAttrs: function tbodyAttrs() {
+      if (!this.isTransitionGroup) {
+        return {};
+      }
+      return {
+        name: this.tbodyTransitionProps.name
+      };
     }
   },
   methods: {
@@ -5492,11 +5507,12 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
         "id": '_col_' + field.name
       }
     })] : _vm._e()]
-  })], 2), _vm._v(" "), _c('tbody', {
+  })], 2), _vm._v(" "), _c(_vm.tbodyComponent, _vm._b({
+    tag: "tbody",
     staticClass: "vuetable-body"
-  }, [_vm._l((_vm.tableData), function(item, itemIndex) {
+  }, 'tbody', _vm.tbodyAttrs, false), [_vm._l((_vm.tableData), function(item, itemIndex) {
     return [_c('tr', {
-      key: itemIndex,
+      key: item[_vm.trackBy] || itemIndex,
       class: _vm.onRowClass(item, itemIndex),
       attrs: {
         "item-index": itemIndex,
@@ -5593,12 +5609,8 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
           }
         }
       })]] : _vm._e()]
-    })], 2), _vm._v(" "), (_vm.useDetailRow) ? [_c('transition', {
-      key: itemIndex,
-      attrs: {
-        "name": _vm.detailRowTransition
-      }
-    }, [(_vm.isVisibleDetailRow(item[_vm.trackBy])) ? _c('tr', {
+    })], 2), _vm._v(" "), (_vm.useDetailRow) ? [(_vm.isVisibleDetailRow(item[_vm.trackBy])) ? _c('tr', {
+      key: ((item[_vm.trackBy] || itemIndex) + "-details"),
       class: [_vm.css.detailRowClass],
       on: {
         "click": function($event) {
@@ -5615,8 +5627,10 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
         "row-data": item,
         "row-index": itemIndex
       }
-    })], 1)]) : _vm._e()])] : _vm._e()]
-  }), _vm._v(" "), (_vm.displayEmptyDataRow) ? [_c('tr', [_c('td', {
+    })], 1)]) : _vm._e()] : _vm._e()]
+  }), _vm._v(" "), (_vm.displayEmptyDataRow) ? [_c('tr', {
+    key: 'empty-row'
+  }, [_c('td', {
     staticClass: "vuetable-empty-result",
     attrs: {
       "colspan": _vm.countVisibleFields
@@ -5626,14 +5640,14 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
     }
   })])] : _vm._e(), _vm._v(" "), (_vm.lessThanMinRows) ? _vm._l((_vm.blankRows), function(i) {
     return _c('tr', {
-      key: i,
+      key: ("blank-row-" + i),
       staticClass: "blank-row"
     }, [_vm._l((_vm.tableFields), function(field, fieldIndex) {
       return [(field.visible) ? _c('td', {
         key: fieldIndex
       }, [_vm._v(" ")]) : _vm._e()]
     })], 2)
-  }) : _vm._e()], 2)])])]) : _c('table', {
+  }) : _vm._e()], 2)], 1)])]) : _c('table', {
     class: ['vuetable', _vm.css.tableClass]
   }, [_c('thead', [_c('tr', [_vm._l((_vm.tableFields), function(field, fieldIndex) {
     return [(field.visible) ? [(_vm.isSpecialField(field.name)) ? [(_vm.extractName(field.name) === '__checkbox') ? _c('th', {
@@ -5724,11 +5738,12 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
         }
       }
     })]] : _vm._e()]
-  })], 2)]), _vm._v(" "), _c('tbody', {
+  })], 2)]), _vm._v(" "), _c(_vm.tbodyComponent, _vm._b({
+    tag: "tbody",
     staticClass: "vuetable-body"
-  }, [_vm._l((_vm.tableData), function(item, itemIndex) {
+  }, 'tbody', _vm.tbodyAttrs, false), [_vm._l((_vm.tableData), function(item, itemIndex) {
     return [_c('tr', {
-      key: itemIndex,
+      key: item[_vm.trackBy] || itemIndex,
       class: _vm.onRowClass(item, itemIndex),
       attrs: {
         "item-index": itemIndex,
@@ -5842,12 +5857,8 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
           }
         }
       })]] : _vm._e()]
-    })], 2), _vm._v(" "), (_vm.useDetailRow) ? [_c('transition', {
-      key: itemIndex,
-      attrs: {
-        "name": _vm.detailRowTransition
-      }
-    }, [(_vm.isVisibleDetailRow(item[_vm.trackBy])) ? _c('tr', {
+    })], 2), _vm._v(" "), (_vm.useDetailRow) ? [(_vm.isVisibleDetailRow(item[_vm.trackBy])) ? _c('tr', {
+      key: ((item[_vm.trackBy] || itemIndex) + "-details"),
       class: [_vm.css.detailRowClass],
       on: {
         "click": function($event) {
@@ -5864,8 +5875,10 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
         "row-data": item,
         "row-index": itemIndex
       }
-    })], 1)]) : _vm._e()])] : _vm._e()]
-  }), _vm._v(" "), (_vm.displayEmptyDataRow) ? [_c('tr', [_c('td', {
+    })], 1)]) : _vm._e()] : _vm._e()]
+  }), _vm._v(" "), (_vm.displayEmptyDataRow) ? [_c('tr', {
+    key: 'empty-row'
+  }, [_c('td', {
     staticClass: "vuetable-empty-result",
     attrs: {
       "colspan": _vm.countVisibleFields
@@ -5875,14 +5888,14 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
     }
   })])] : _vm._e(), _vm._v(" "), (_vm.lessThanMinRows) ? _vm._l((_vm.blankRows), function(i) {
     return _c('tr', {
-      key: i,
+      key: ("blank-row-" + i),
       staticClass: "blank-row"
     }, [_vm._l((_vm.tableFields), function(field, fieldIndex) {
       return [(field.visible) ? _c('td', {
         key: fieldIndex
       }, [_vm._v(" ")]) : _vm._e()]
     })], 2)
-  }) : _vm._e()], 2)])
+  }) : _vm._e()], 2)], 1)
 },staticRenderFns: []}
 module.exports.render._withStripped = true
 if (false) {

diff --git a/dist/vuetable-2.js b/dist/vuetable-2.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kulmann/vuetable-2",
-  "version": "1.7.6",
+  "version": "1.8.0",
   "description": "FORKED - Datatable component for Vue 2.x",
   "main": "dist/vuetable-2.js",
   "license": "MIT",

diff --git a/src/components/Vuetable.vue b/src/components/Vuetable.vue
@@ -70,10 +70,10 @@
           </template>
         </template>
       </colgroup>
-      <tbody v-cloak class="vuetable-body">
+      <tbody v-cloak class="vuetable-body" :is="tbodyComponent" v-bind="tbodyAttrs">
         <template v-for="(item, itemIndex) in tableData">
           <tr
-            :key="itemIndex"
+            :key="item[trackBy] || itemIndex"
             :item-index="itemIndex"
             :render="onRowChanged(item)"
             :class="onRowClass(item, itemIndex)"
@@ -137,25 +137,24 @@
             </template>
           </tr>
           <template v-if="useDetailRow">
-            <transition :name="detailRowTransition" :key="itemIndex">
-              <tr v-if="isVisibleDetailRow(item[trackBy])"
-                :class="[css.detailRowClass]"
-                @click="onDetailRowClick(item, $event)"
-              >
-                <td :colspan="countVisibleFields">
-                  <component :is="detailRowComponent" :row-data="item" :row-index="itemIndex"></component>
-                </td>
-              </tr>
-            </transition>
+            <tr v-if="isVisibleDetailRow(item[trackBy])"
+              :key="`${item[trackBy] || itemIndex}-details`"
+              :class="[css.detailRowClass]"
+              @click="onDetailRowClick(item, $event)"
+            >
+              <td :colspan="countVisibleFields">
+                <component :is="detailRowComponent" :row-data="item" :row-index="itemIndex"></component>
+              </td>
+            </tr>
           </template>
         </template>
         <template v-if="displayEmptyDataRow">
-          <tr>
+          <tr :key="'empty-row'">
             <td :colspan="countVisibleFields" class="vuetable-empty-result" v-html="noDataTemplate"></td>
           </tr>
         </template>
         <template v-if="lessThanMinRows">
-          <tr v-for="i in blankRows" class="blank-row" :key="i">
+          <tr v-for="i in blankRows" class="blank-row" :key="`blank-row-${i}`">
             <template v-for="(field, fieldIndex) in tableFields">
               <td v-if="field.visible" :key="fieldIndex">&nbsp;</td>
             </template>
@@ -217,10 +216,10 @@
       </template>
     </tr>
   </thead>
-  <tbody v-cloak class="vuetable-body">
+  <tbody v-cloak class="vuetable-body" :is="tbodyComponent" v-bind="tbodyAttrs">
     <template v-for="(item, itemIndex) in tableData">
       <tr
-        :key="itemIndex"
+        :key="item[trackBy] || itemIndex"
         :item-index="itemIndex"
         :render="onRowChanged(item)"
         :class="onRowClass(item, itemIndex)"
@@ -293,25 +292,24 @@
         </template>
       </tr>
       <template v-if="useDetailRow">
-        <transition :name="detailRowTransition" :key="itemIndex">
-          <tr v-if="isVisibleDetailRow(item[trackBy])"
-            :class="[css.detailRowClass]"
-            @click="onDetailRowClick(item, $event)"
-          >
-            <td :colspan="countVisibleFields">
-              <component :is="detailRowComponent" :row-data="item" :row-index="itemIndex"></component>
-            </td>
-          </tr>
-        </transition>
+        <tr v-if="isVisibleDetailRow(item[trackBy])"
+          :key="`${item[trackBy] || itemIndex}-details`"
+          :class="[css.detailRowClass]"
+          @click="onDetailRowClick(item, $event)"
+        >
+          <td :colspan="countVisibleFields">
+            <component :is="detailRowComponent" :row-data="item" :row-index="itemIndex"></component>
+          </td>
+        </tr>
       </template>
     </template>
     <template v-if="displayEmptyDataRow">
-      <tr>
+      <tr :key="'empty-row'">
         <td :colspan="countVisibleFields" class="vuetable-empty-result" v-html="noDataTemplate"></td>
       </tr>
     </template>
     <template v-if="lessThanMinRows">
-      <tr v-for="i in blankRows" class="blank-row" :key="i">
+      <tr v-for="i in blankRows" class="blank-row" :key="`blank-row-${i}`">
         <template v-for="(field, fieldIndex) in tableFields">
           <td v-if="field.visible" :key="fieldIndex">&nbsp;</td>
         </template>
@@ -441,11 +439,12 @@ export default {
       type: [String, Function],
       default: ''
     },
-    detailRowComponent: {
-      type: String,
-      default: ''
+    tbodyTransitionProps: {
+      type: Object,
+      default: null,
+      required: false
     },
-    detailRowTransition: {
+    detailRowComponent: {
       type: String,
       default: ''
     },
@@ -578,6 +577,20 @@ export default {
     },
     isFixedHeader () {
       return this.tableHeight != null
+    },
+    isTransitionGroup() {
+      return this.tbodyTransitionProps !== null
+    },
+    tbodyComponent () {
+      return this.isTransitionGroup ? 'transition-group' : 'tbody'
+    },
+    tbodyAttrs () {
+      if (!this.isTransitionGroup) {
+        return {}
+      }
+      return {
+        name: this.tbodyTransitionProps.name
+      }
     }
   },
   methods: {