瀏覽代碼

[frontend] Prevent empty class attribute generation in the HueTable component

Johan Ahlen 4 年之前
父節點
當前提交
2f1bb2c9cb

+ 25 - 0
desktop/core/src/desktop/js/components/HueTable.test.ts

@@ -99,4 +99,29 @@ describe('HueTable.vue', () => {
     });
     expect(wrapper.element).toMatchSnapshot();
   });
+
+  it('should render a stickt table with header and column css', () => {
+    const wrapper = shallowMount(HueTable, {
+      propsData: {
+        columns: <Column<{ [key: string]: unknown }>[]>[
+          {
+            key: 'a',
+            label: 'A',
+            headerCssClass: 'header-css-class-A',
+            cssClass: 'td-css-class-A'
+          },
+          { key: 'b', label: 'B', headerCssClass: 'header-css-class-B', cssClass: 'td-css-class-B' }
+        ],
+        stickyHeader: true,
+        stickyFirstColumn: true,
+        rows: <Row[]>[
+          { a: '1', b: 5 },
+          { a: '2', b: 6 },
+          { a: '3', b: 7 },
+          { a: '4', b: 8 }
+        ]
+      }
+    });
+    expect(wrapper.element).toMatchSnapshot();
+  });
 });

+ 13 - 5
desktop/core/src/desktop/js/components/HueTable.vue

@@ -31,10 +31,7 @@
           <th
             v-for="(column, colIndex) in columns"
             :key="colIndex"
-            :class="[
-              column.headerCssClass,
-              { 'sticky-first-col': stickyFirstColumn && colIndex === 0 }
-            ]"
+            :class="cellClass(column.headerCssClass, colIndex)"
             scope="col"
           >
             {{ column.label }}
@@ -48,7 +45,7 @@
           <td
             v-for="(column, colIndex) in columns"
             :key="colIndex"
-            :class="[column.cssClass, { 'sticky-first-col': stickyFirstColumn && colIndex === 0 }]"
+            :class="cellClass(column.cssClass, colIndex)"
           >
             <slot v-if="hasCellSlot(column)" :name="cellSlotName(column)" v-bind="row" />
             <div v-else-if="column.htmlValue" v-html="row[column.key]" />
@@ -97,6 +94,17 @@
         this.$emit('scroll-to-end');
       }
     }
+
+    cellClass(cellClass: string | undefined, index: number): string | null {
+      // This prevents rendering of empty class="" for :class="[x,y]" when x and y are undefined
+      // Possibly fixed in Vue 3
+      if (cellClass && this.stickyFirstColumn && index === 0) {
+        return `${cellClass} sticky-first-col`;
+      } else if (this.stickyFirstColumn && index === 0) {
+        return 'sticky-first-col';
+      }
+      return cellClass || null;
+    }
   }
 </script>
 

+ 127 - 0
desktop/core/src/desktop/js/components/__snapshots__/HueTable.test.ts.snap

@@ -1,5 +1,132 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`HueTable.vue should render a stickt table with header and column css 1`] = `
+<div
+  class="hue-table-container"
+>
+  <table
+    class="hue-table sticky-header"
+  >
+    <caption>
+      
+      
+    
+    </caption>
+     
+    <thead>
+      <tr
+        class="header-row"
+      >
+        <th
+          class="header-css-class-A sticky-first-col"
+          scope="col"
+        >
+          
+          A
+        
+        </th>
+        <th
+          class="header-css-class-B"
+          scope="col"
+        >
+          
+          B
+        
+        </th>
+         
+        <th
+          class="column-flush"
+          scope="col"
+        />
+      </tr>
+    </thead>
+     
+    <tbody>
+      <tr>
+        <td
+          class="td-css-class-A sticky-first-col"
+        >
+          
+            1
+          
+        </td>
+        <td
+          class="td-css-class-B"
+        >
+          
+            5
+          
+        </td>
+         
+        <td
+          class="column-flush"
+        />
+      </tr>
+      <tr>
+        <td
+          class="td-css-class-A sticky-first-col"
+        >
+          
+            2
+          
+        </td>
+        <td
+          class="td-css-class-B"
+        >
+          
+            6
+          
+        </td>
+         
+        <td
+          class="column-flush"
+        />
+      </tr>
+      <tr>
+        <td
+          class="td-css-class-A sticky-first-col"
+        >
+          
+            3
+          
+        </td>
+        <td
+          class="td-css-class-B"
+        >
+          
+            7
+          
+        </td>
+         
+        <td
+          class="column-flush"
+        />
+      </tr>
+      <tr>
+        <td
+          class="td-css-class-A sticky-first-col"
+        >
+          
+            4
+          
+        </td>
+        <td
+          class="td-css-class-B"
+        >
+          
+            8
+          
+        </td>
+         
+        <td
+          class="column-flush"
+        />
+      </tr>
+    </tbody>
+  </table>
+</div>
+`;
+
 exports[`HueTable.vue should render a table 1`] = `
 <div
   class="hue-table-container"