feat: new paint job, code cleanup, copy hex values to clipboard when clicked

src/components/DataTable.vue

@@ -1,7 +1,7 @@
 <template>
   <table class="datatable">
     <thead class="datatable__head">
-      <tr class="datatable__row datatable__row--head">
+      <tr class="datatable__row">
         <th
           class="datatable__heading"
           v-for="(header, idx) in dataset.headers"
@@ -18,13 +18,10 @@
           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="[
-                cell.length > 11 ? 'col-3' : cell.length > 4 ? 'col-2' : '',
-              ]"
-            >
+            <ul class="col-2">
               <li v-for="(item, idx) in cell" :key="idx">
                 {{ item }}
               </li>
@@ -32,13 +29,20 @@
           </template>
 
           <template v-else>
-            {{ cell }}
+            <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="`background-color: ${row[1]}`"
+          :style="{ backgroundColor: row[1] }"
         ></td>
       </tr>
     </tbody>
@@ -58,6 +62,9 @@ export default {
     isHexValue(value) {
       return /^#[0-9a-f]{6}$/i.test(value) ? value : false;
     },
+    copyToClipboard(value) {
+      navigator.clipboard.writeText(value);
+    },
   },
 };
 </script>
@@ -108,31 +115,37 @@ export default {
     }
   }
 
-  &__body {
-    .datatable__row {
-      background-color: rgba($bg-color-dark, 0.7);
+  &__head {
+    color: $copy-color;
+    border-top: 0.0625em solid $sebin-secondary;
+  }
 
-      &:nth-child(odd) {
-        background-color: rgba(lighten($bg-color-dark, 15%), 0.7);
-      }
+  &__body {
+    border: {
+      top: 0.0625em solid $sebin-secondary;
+      bottom: 0.0625em solid $sebin-secondary;
     }
   }
 
-  &__row {
-    &--head {
-      background-color: $bg-color-light;
-      color: $copy-color;
-    }
+  &__body &__row:hover {
+    background: rgba(#000, 0.3);
   }
 
   &__cell {
+    a {
+      text-decoration: none;
+    }
+
     &:first-child {
       text-align: right;
     }
 
+    &--hex {
+      font-family: monospace;
+    }
+
     &--colorpick {
-      margin-top: 0.1em;
-      border: 0.1em solid #fff;
+      border: 0.0625em solid #fff;
     }
   }
 }