Remove shimmer on OcTable row load & reduce usage of Vue elements in …

…OcTable

changelog/unreleased/change-remove-oc-table-helper-components

@@ -0,0 +1,10 @@
+Change: Remove OcTable helper components
+
+We have removed the following Vue components in favor of native HTML elements to increase rendering performance:
+
+- _OcTableBody.vue
+- _OcTableHeader.vue
+- _OcTableFooter.vue
+- _OcTableCellData.vue
+
+https://github.com/owncloud/owncloud-design-system/pull/2165

src/components/atoms/OcButton/OcButton.vue

@@ -554,20 +554,20 @@ Every button has to have an accessible name. It cannot be provided by a text bet
     All available button combinations
   </h3>
   <oc-table-simple>
-    <oc-thead>
-      <oc-tr>
-        <oc-th>Variation &amp; usage</oc-th>
-        <oc-th>Outline (default)</oc-th>
-        <oc-th>Filled</oc-th>
-        <oc-th>Raw</oc-th>
-      </oc-tr>
-    </oc-thead>
-    <oc-tbody>
-      <oc-tr v-for="variation in variations">
-      <oc-td>
-        {{ variation.description }}
-      </oc-td>
-        <oc-td v-for="appearance in appearances" :class="{ 'oc-background-brand': variation.title === 'inverse' }" class="oc-p-m">
+    <thead>
+      <tr>
+        <th>Variation &amp; usage</th>
+        <th>Outline (default)</th>
+        <th>Filled</th>
+        <th>Raw</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="variation in variations">
+        <td>
+          {{ variation.description }}
+        </td>
+        <td v-for="appearance in appearances" :class="{ 'oc-background-brand': variation.title === 'inverse' }" class="oc-p-m">
           <oc-button :variation="variation.title" :appearance="appearance" class="oc-mb-s">
             {{ variation.title }}
             <oc-icon name="home-2" />
@@ -576,9 +576,9 @@ Every button has to have an accessible name. It cannot be provided by a text bet
             {{ variation.title }}
             <oc-icon name="home-2" />
           </oc-button>
-        </oc-td>
-      </oc-tr>
-    </oc-tbody>
+        </td>
+      </tr>
+    </tbody>
   </oc-table-simple>
   </div>
 </template>

src/components/atoms/OcIcon/OcIcon.vue

@@ -300,23 +300,23 @@ export default {
       Default Icon color variations
     </h3>
     <oc-table-simple :hover="true">
-      <oc-thead>
-        <oc-tr>
-          <oc-th>Variation</oc-th>
-          <oc-th>Icons</oc-th>
-        </oc-tr>
-      </oc-thead>
-      <oc-tbody>
-        <oc-tr v-for="variation in variations" :key="'variation-' + variation.id">
-          <oc-td>{{ variation.name }}</oc-td>
-          <oc-td v-bind:class="{'oc-background-brand': variation.name == 'inverse'}">
+      <thead>
+        <tr>
+          <th>Variation</th>
+          <th>Icons</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="variation in variations" :key="'variation-' + variation.id">
+          <td>{{ variation.name }}</td>
+          <td v-bind:class="{'oc-background-brand': variation.name == 'inverse'}">
             <oc-icon :variation="variation.name" name="close"/>
             <oc-icon :variation="variation.name" name="delete-bin-5"/>
             <oc-icon :variation="variation.name" name="information"/>
             <oc-icon :variation="variation.name" name="account-circle"/>
-          </oc-td>
-        </oc-tr>
-      </oc-tbody>
+          </td>
+        </tr>
+      </tbody>
     </oc-table-simple>
 
     <h3 class="oc-heading-divider">
@@ -328,23 +328,23 @@ export default {
       Icon sizes
     </h3>
     <oc-table-simple :hover="true">
-      <oc-thead>
-        <oc-tr>
-          <oc-th>Size</oc-th>
-          <oc-th>Icons</oc-th>
-        </oc-tr>
-      </oc-thead>
-      <oc-tbody>
-        <oc-tr v-for="size in sizes" :key="size.name">
-          <oc-td>{{ size.name }}</oc-td>
-          <oc-td>
+      <thead>
+        <tr>
+          <th>Size</th>
+          <th>Icons</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="size in sizes" :key="size.name">
+          <td>{{ size.name }}</td>
+          <td>
             <oc-icon :size="size.name" name="close"/>
             <oc-icon :size="size.name" name="delete-bin-5"/>
             <oc-icon :size="size.name" name="information"/>
             <oc-icon :size="size.name" name="account-circle"/>
-          </oc-td>
-        </oc-tr>
-      </oc-tbody>
+          </td>
+        </tr>
+      </tbody>
     </oc-table-simple>
 
   </section>

src/components/atoms/OcTableSimple/OcTableSimple.vue

@@ -58,17 +58,17 @@ export default {
       A simple table
     </h3>
     <oc-table-simple :hover="true">
-      <oc-thead>
-        <oc-tr>
-          <oc-th>Resource</oc-th>
-          <oc-th>Last modified</oc-th>
-        </oc-tr>
-      </oc-thead>
+      <thead>
+        <tr>
+          <th>Resource</th>
+          <th>Last modified</th>
+        </tr>
+      </thead>
       <oc-tbody>
-        <oc-tr v-for="item in items" :key="'item-' + item.id">
-          <oc-td>{{ item.resource }}</oc-td>
-          <oc-td>{{ item.last_modified }}</oc-td>
-        </oc-tr>
+        <tr v-for="item in items" :key="'item-' + item.id">
+          <td>{{ item.resource }}</td>
+          <td>{{ item.last_modified }}</td>
+        </tr>
       </oc-tbody>
     </oc-table-simple>
   </section>

src/components/molecules/OcTable/OcTable.vue

@@ -1,6 +1,6 @@
 <template>
   <table v-bind="extractTableProps()">
-    <oc-thead v-if="hasHeader">
+    <thead v-if="hasHeader" class="oc-thead">
       <oc-tr class="oc-table-header-row">
         <oc-th
           v-for="(field, index) in fields"
@@ -40,8 +40,8 @@
           </oc-button>
         </oc-th>
       </oc-tr>
-    </oc-thead>
-    <oc-tbody>
+    </thead>
+    <tbody>
       <oc-tr
         v-for="(item, trIndex) in data"
         :key="`oc-tbody-tr-${itemDomSelector(item) || trIndex}`"
@@ -61,7 +61,7 @@
         @mouseleave="dropRowStyling(itemDomSelector(item), true, $event)"
         @dragover.native="dragOver($event)"
       >
-        <oc-td
+        <td
           v-for="(field, tdIndex) in fields"
           :key="'oc-tbody-td-' + cellKey(field, tdIndex, item)"
           v-bind="extractTdProps(field, tdIndex, item)"
@@ -73,9 +73,9 @@
           <template v-else>
             {{ item[field.name] }}
           </template>
-        </oc-td>
+        </td>
       </oc-tr>
-    </oc-tbody>
+    </tbody>
     <tfoot v-if="$slots.footer" class="oc-table-footer">
       <tr class="oc-table-footer-row">
         <td :colspan="footerColspan" class="oc-table-footer-cell">
@@ -88,11 +88,8 @@
 </template>
 <script>
 import Vue from "vue"
-import OcThead from "../../atoms/_OcTableHeader/_OcTableHeader.vue"
-import OcTbody from "../../atoms/_OcTableBody/_OcTableBody.vue"
 import OcTr from "../../atoms/_OcTableRow/_OcTableRow.vue"
 import OcTh from "../../atoms/_OcTableCellHead/_OcTableCellHead.vue"
-import OcTd from "../../atoms/_OcTableCellData/_OcTableCellData.vue"
 import OcGhostElement from "../../atoms/_OcGhostElement/_OcGhostElement.vue"
 import OcButton from "../../atoms/OcButton/OcButton.vue"
 import SortMixin from "../../../mixins/sort"
@@ -115,11 +112,8 @@ export default {
   status: "ready",
   release: "2.1.0",
   components: {
-    OcThead,
-    OcTbody,
     OcTr,
     OcTh,
-    OcTd,
     OcButton,
   },
   mixins: [SortMixin],
@@ -517,6 +511,10 @@ export default {
     background-color: var(--oc-color-input-border);
   }
 
+  .oc-thead {
+    border-bottom: 1px solid var(--oc-color-border);
+  }
+
   &-thead-content {
     vertical-align: middle;
     display: inline-table;