Custom table rework basics

Supports fancy styling colors and a decent level of customization
This is just barely more than a minimum viable product, more will come

Related to Issue #43

assets/table/_index.scss

@@ -0,0 +1,2 @@
+@forward './variables';
+@forward './mixins';

assets/table/_mixins.scss

@@ -0,0 +1,23 @@
+@use './variables' as *;
+
+@mixin cell-like($default-color: $neutral-color) {
+  position: relative;
+  padding: calc(var(--spacing) / 2);
+  background-color: $default-color;
+}
+
+@mixin cell-varients($selector-before: '', $selector-after: '') {
+  @each $name, $bg-color, $color in $colors {
+    #{$selector-before}&.is-#{$name}#{$selector-after} {
+      background-color: $bg-color;
+
+      @if $color {
+        color: $color;
+
+        ::v-deep .title {
+          color: $color;
+        }
+      }
+    }
+  }
+}

assets/table/_variables.scss

@@ -0,0 +1,27 @@
+@use '../themes/default' as theme;
+
+// Colors are designed to take advantage of playing of the background. Theme neutral
+$neutral-color: rgba(255, 255, 255, 0.1) !default;
+$light-color: rgba(255, 255, 255, 0.05) !default;
+$dark-color: rgba(0, 0, 0, 0.1) !default;
+
+$primary-color: theme.$primary !default;
+$info-color: theme.$info !default;
+$success-color: theme.$success !default;
+$warning-color: theme.$warning !default;
+$danger-color: theme.$danger !default;
+
+/* stylelint-disable function-name-case */
+// I can't help what Bulma named their function...
+$colors:
+  'neutral' $neutral-color null,
+  'light' $light-color null,
+  'dark' $dark-color null,
+  'even' $dark-color null,
+  'odd' $light-color null,
+  'primary' $primary-color theme.findColorInvert($primary-color),
+  'info' $info-color theme.findColorInvert($info-color),
+  'success' $success-color theme.findColorInvert($success-color),
+  'warning' $warning-color theme.findColorInvert($warning-color),
+  'danger' $danger-color theme.findColorInvert($danger-color);
+/* stylelint-enable function-name-case */

components/element/table/Cell.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="element-table-cell" :class="classes" :style="styles">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+interface CellClasses {
+  'element-table-header': boolean;
+}
+
+interface CellStyles {
+  '--column-start': string;
+  '--column-end': string;
+  '--row-start': string;
+  '--row-end': string;
+}
+
+export default Vue.extend({
+  props: {
+    isHeader: {
+      type: Boolean,
+      default: false,
+    },
+    columnStart: {
+      type: String,
+      default: 'auto',
+    },
+    columnEnd: {
+      type: String,
+      default: 'auto',
+    },
+    rowStart: {
+      type: String,
+      default: 'auto',
+    },
+    rowEnd: {
+      type: String,
+      default: 'auto',
+    },
+  },
+
+  computed: {
+    classes(): CellClasses {
+      return {
+        'element-table-header': this.isHeader,
+      };
+    },
+    styles(): CellStyles {
+      return {
+        '--column-start': this.columnStart,
+        '--column-end': this.columnEnd,
+        '--row-start': this.rowStart,
+        '--row-end': this.rowEnd,
+      };
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@use '~assets/table';
+
+.element-table-cell {
+  --column-start: auto;
+  --column-end: auto;
+  --row-start: auto;
+  --row-end: auto;
+
+  @include table.cell-like();
+  @include table.cell-varients();
+
+  grid-column-start: var(--column-start);
+  grid-column-end: var(--column-end);
+  grid-row-start: var(--row-start);
+  grid-row-end: var(--row-end);
+}
+
+.element-table-header {
+  font-weight: bold;
+}
+</style>

components/element/table/Detail.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="element-table-detail-container">
+    <div class="element-table-detail">
+      <slot class="test-class" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@use '~assets/table';
+@use '~assets/themes/default' as theme;
+
+.element-table-detail-container {
+  @include table.cell-varients($selector-after: '> .element-table-detail');
+
+  // Span from start to finish
+  grid-column: 1 / -1;
+  // Needed to allow the proper placement of the before and after
+  position: relative;
+  padding-inline-start: var(--spacing);
+  padding-block: calc(var(--spacing) / 2);
+
+  // Provides the strokes for the L connecting the entry to the detail
+  &::before {
+    content: '';
+    position: absolute;
+    inset-block-start: var(--spacing);
+    inset-inline-start: calc(var(--spacing) / 2);
+    width: calc(var(--spacing) / 2);
+    height: 2px;
+    background-color: #666;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: calc(var(--spacing) / 2);
+    height: var(--spacing);
+    width: 2px;
+    background-color: #666;
+  }
+
+  > .element-table-detail {
+    padding: var(--spacing);
+    border-radius: theme.$radius;
+
+    @media (max-width: 1023px) {
+      & {
+        padding: calc(var(--spacing) / 2);
+      }
+    }
+  }
+}
+</style>

components/element/table/Table.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="element-table">
+    <slot name="header" />
+    <slot />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.element-table {
+  display: grid;
+  grid-auto-rows: auto;
+  width: 100%;
+  max-width: 100%;
+}
+</style>

stylelint.config.js

@@ -8,5 +8,12 @@ module.exports = {
     // SCSS uses @rules. Some are unknown.
     'at-rule-no-unknown': null,
     'declaration-block-single-line-max-declarations': 0,
+    // Allow ::v-deep ( >>> and /deep/ both fail more fundamentally )
+    'selector-pseudo-element-no-unknown': [
+      true,
+      {
+        ignorePseudoElements: [ 'v-deep' ],
+      },
+    ],
   },
 };