refactor: migrate DataTable component

src/components/DataTable.vue

@@ -1,152 +1,41 @@
+<script setup lang="ts">
+interface Props {
+  headings: string[];
+  data: string[][];
+}
+
+defineProps<Props>();
+</script>
+
 <template>
-  <table class="datatable">
+  <table class="data-table">
-    <thead class="datatable__head">
+    <thead class="data-table__head">
-      <tr class="datatable__row">
+      <tr class="data-table__row">
         <th
-          class="datatable__heading"
+          class="data-table__heading"
-          v-for="(header, idx) in dataset.headers"
+          v-for="(heading, idx) in headings"
           :key="idx"
         >
-          {{ header }}
+          {{ heading }}
         </th>
       </tr>
     </thead>
-    <tbody class="datatable__body">
+    <tbody class="data-table__body">
-      <tr class="datatable__row" v-for="(row, idx) in dataset.data" :key="idx">
+      <tr class="data-table__row" v-for="(row, idx) in data" :key="idx">
-        <td
+        <td class="data-table__cell" v-for="(cell, idx) in row" :key="idx">
-          class="datatable__cell"
+          {{ cell }}
-          v-for="(cell, idx) in row"
-          :key="idx"
-          :colspan="idx === 1 && !isHexValue(row[1]) ? 2 : 1"
-          :class="{ 'datatable__cell--hex': idx === 1 && isHexValue(row[1]) }"
-        >
-          <template v-if="Array.isArray(cell)">
-            <ul class="col-2">
-              <li v-for="(item, idx) in cell" :key="idx">
-                {{ item }}
-              </li>
-            </ul>
-          </template>
-
-          <template v-else>
-            <template v-if="isHexValue(cell)">
-              <a href="#" @click.prevent="copyToClipboard(cell)">
-                {{ cell }}
-              </a>
-            </template>
-            <template v-else>
-              {{ cell }}
-            </template>
-          </template>
         </td>
-        <td
-          v-if="isHexValue(row[1])"
-          class="datatable__cell--colorpick"
-          :style="{ backgroundColor: row[1] }"
-        ></td>
       </tr>
     </tbody>
   </table>
 </template>
 
-<script>
-export default {
-  name: "DataTable",
-  props: {
-    dataset: {
-      type: Object,
-      required: true,
-    },
-  },
-  methods: {
-    isHexValue(value) {
-      return /^#[0-9a-f]{6}$/i.test(value) ? value : false;
-    },
-    copyToClipboard(value) {
-      navigator.clipboard.writeText(value);
-    },
-  },
-};
-</script>
-
 <style lang="scss">
-@import "@/scss/_variables.scss";
+.data-table {
-@import "@/scss/_mixins.scss";
+  table-layout: fixed;
 
-.datatable {
+  &__cell:first-child {
-  border-collapse: collapse;
+    text-align: right;
-  width: 100%;
-  margin: auto;
-
-  @include mq-desktop {
-    max-width: 45rem;
-  }
-
-  @include mq-bigscreen {
-    max-width: 55rem;
-  }
-
-  &__heading,
-  &__cell {
-    padding: 0.25em 0.5em;
-
-    @media (min-width: 35em) {
-      padding: 0.5em 1em;
-    }
-
-    ul {
-      margin: 0;
-      padding: 0;
-
-      @include mq-desktop {
-        &.col-2 {
-          columns: 2 auto;
-        }
-
-        &.col-3 {
-          columns: 3 auto;
-        }
-      }
-    }
-
-    li {
-      margin: 0 0 0 1em;
-      padding: 0;
-    }
-  }
-
-  &__head {
-    color: $copy-color;
-    border-top: 0.0625em solid $sebin-secondary;
-  }
-
-  &__body {
-    border: {
-      top: 0.0625em solid $sebin-secondary;
-      bottom: 0.0625em solid $sebin-secondary;
-    }
-  }
-
-  &__body &__row:hover {
-    background: rgba(#000, 0.3);
-  }
-
-  &__cell {
-    a {
-      text-decoration: none;
-    }
-
-    &:first-child {
-      text-align: right;
-    }
-
-    &--hex {
-      font-family: monospace;
-    }
-
-    &--colorpick {
-      border: 0.0625em solid #fff;
-    }
   }
 }
 </style>