feat: (breaking change) re-implemented table component

src/components/Form/Controls/Checkbox.vue

@@ -2,7 +2,7 @@
   <input
     :class="inputClasses"
     :disabled="disabled ? '' : null"
-    :checked="checked ? true : false"
+    :checked="checked"
     @change="updateInput"
     v-on="$listeners"
     :value="value"
@@ -45,14 +45,14 @@ export default {
   },
   computed: {
     checked() {
-      const { modelValue, value } = this;
+      const { modelValue, value, trueValue } = this;
       if (Array.isArray(modelValue)) {
         if (value == null) {
           throw Error("value cannot be null");
         }
         return modelValue.indexOf(value) >= 0;
       }
-      return modelValue === this.trueValue;
+      return modelValue === trueValue;
     }
   },
   methods: {

src/components/Form/FormLabel.vue

@@ -1,6 +1,5 @@
 <template>
-  <label class="fd-form__label" :aria-required="String(required)">
-    <slot name="control" />
+  <label class="fd-form__label" :for="itemId" :aria-required="String(required)">
     <slot />
     <template v-if="required"
       >*</template
@@ -11,6 +10,9 @@
 <script>
 export default {
   name: "FdFormLabel",
+  inject: {
+    itemId: { default: null }
+  },
   props: {
     inline: {
       type: Boolean,
@@ -20,9 +22,6 @@ export default {
       default: false,
       type: Boolean
     }
-  },
-  inject: {
-    itemId: { default: null }
   }
 };
 </script>

src/components/Table/Components/TableCell.vue

@@ -1,28 +1,66 @@
-<template>
-  <td :class="classes" :style="style">
-    <slot />
-  </td>
-</template>
-
 <script>
+// Renders a single table cell.
 export default {
   name: "FdTableCell",
   props: {
+    // Override the scope for this specific cell – used for a11y-related things.
+    // The scope is automatically set for you – use this prop only if you have special needs.
+    scope: {
+      // `col` / `row` / `null`
+      type: String,
+      validator: value => value === "col" || value === "row",
+      // `null`
+      default: null
+    },
+    // Whether or not this cell is rendered inside in a fixed column.
+    // `fixed` is automatically set for you – use this prop only if you have special needs.
     fixed: {
       type: Boolean,
-      default: null
+      default: false
+    }
+  },
+  inject: {
+    fdTableFixedProvider: {
+      default: {
+        fixed: null
+      }
     }
   },
+  render(h) {
+    const { fixed_, style, classes, $slots } = this;
+    const tag = fixed_ ? "th" : "td";
+    const attrs = fixed_ ? { scope: this.scope_ } : {};
+    return h(tag, { attrs, style, class: classes }, $slots.default);
+  },
   computed: {
+    scope_() {
+      const { scope, fixed_ } = this;
+      if (scope != null) {
+        return scope;
+      }
+      return fixed_ ? "row" : null;
+    },
+    fixed_() {
+      const { fixed, fdTableFixedProvider } = this;
+      return fdTableFixedProvider.fixed != null
+        ? fdTableFixedProvider.fixed
+        : fixed;
+    },
     style() {
-      return this.fixed ? { left: "0", width: "200px" } : {};
+      return this.fixed_
+        ? {
+            left: "0",
+            width: "200px"
+          }
+        : {};
     },
     classes() {
-      if (!this.fixed) {
+      const { fixed_ } = this;
+      if (!fixed_) {
         return null;
       }
       return {
-        "fd-table__fixed-col": this.fixed
+        "fd-table__fixed-col": fixed_
       };
     }
   }

src/components/Table/Components/TableHeaderCell.vue

@@ -1,12 +1,13 @@
 <template>
-  <th v-on="$listeners" :class="classes" :style="styles">
+  <th scope="col" v-on="$listeners" :class="classes" :style="styles">
     {{ label }}
     <slot />
   </th>
 </template>
 
 <script>
-import { isTextAlignment, TextAlignment, SortOrder } from "./../Util";
+import { SortOrder } from "./../utils/sort-order";
+import { TextAlignment, isTextAlignment } from "./../utils/text-alignment";
 
 export default {
   name: "FdTableHeaderCell",

src/components/Table/Components/TableRow.vue

@@ -1,59 +1,51 @@
+<template>
+  <tr :aria-selected="String(selected_)" v-on="$listeners">
+    <template v-for="header in normalizedHeaders">
+      <fd-table-cell-fixed-provider
+        :fixed="header.columnFixed"
+        :key="header.id"
+      >
+        <slot :name="header.slotName" />
+      </fd-table-cell-fixed-provider>
+    </template>
+  </tr>
+</template>
+
 <script>
+import FdTableCellFixedProvider from "./fixed-provider.vue";
+
 export default {
   name: "FdTableRow",
+  components: { FdTableCellFixedProvider },
   inject: {
+    fdTableItemProvider: {
+      default: {
+        item: {},
+        selected: null
+      }
+    },
     table: { default: null }
   },
   props: {
-    itemId: {
-      type: String,
-      default: null
+    item: {
+      type: Object,
+      default: () => {}
     },
-    isSelected: {
+    selected: {
       type: Boolean,
       default: false
     }
   },
   computed: {
-    firstColumnFixed() {
-      const table = this.table;
-      return (table || false) && table.firstColumnFixed;
-    }
-  },
-  methods: {
-    handleClick() {
-      const table = this.table;
-      const { itemId } = this;
-      if (itemId == null || table == null) {
-        return false;
-      }
-      table.toggleSelectionForItem(itemId);
+    selected_() {
+      const { selected, fdTableItemProvider } = this;
+      return fdTableItemProvider.selected != null
+        ? fdTableItemProvider.selected
+        : selected;
+    },
+    normalizedHeaders() {
+      return this.table.normalizedHeaders;
     }
-  },
-  render(h) {
-    const cells = this.$slots.default || [];
-    cells.forEach((cell, index) => {
-      const options = cell.componentOptions;
-      if (options == null) {
-        return;
-      }
-      const fixed = index === 0 && this.firstColumnFixed;
-      const { propsData = {} } = options;
-      options.propsData = { ...propsData, fixed };
-    });
-    return h(
-      "tr",
-      {
-        on: {
-          ...this.$listeners,
-          "&click": this.handleClick // & = passive modifier
-        },
-        attrs: {
-          "aria-selected": this.isSelected
-        }
-      },
-      cells
-    );
   }
 };
 </script>

src/components/Table/Components/fixed-provider.vue

@@ -0,0 +1,34 @@
+<script>
+export default {
+  props: {
+    fixed: {
+      type: Boolean,
+      required: true
+    }
+  },
+  provide() {
+    return {
+      fdTableFixedProvider: this.fdTableFixedProvider
+    };
+  },
+  render() {
+    const defaultSlot = this.$scopedSlots.default;
+    if (defaultSlot == null) {
+      return null;
+    }
+    return defaultSlot();
+  },
+  watch: {
+    fixed(fixed) {
+      this.fdTableFixedProvider.fixed = fixed;
+    }
+  },
+  data() {
+    return {
+      fdTableFixedProvider: {
+        fixed: this.fixed
+      }
+    };
+  }
+};
+</script>

src/components/Table/Components/item-provider.vue

@@ -0,0 +1,38 @@
+<script>
+export default {
+  props: {
+    item: {
+      type: Object,
+      required: true
+    },
+    selected: {
+      type: Boolean,
+      require: true
+    }
+  },
+  provide() {
+    return {
+      fdTableItemProvider: this.fdTableItemProvider
+    };
+  },
+  render() {
+    return this.$scopedSlots.default();
+  },
+  watch: {
+    selected(selected) {
+      this.fdTableItemProvider.selected = selected;
+    },
+    item(item) {
+      this.fdTableItemProvider.item = item;
+    }
+  },
+  data() {
+    return {
+      fdTableItemProvider: {
+        item: this.item,
+        selected: this.selected
+      }
+    };
+  }
+};
+</script>