@ulu/frontend-vue 0.1.0-beta.1

package/lib/components/systems/table-sticky/UluTableStickyRows.vue

@@ -0,0 +1,73 @@
+<template>
+  <tr
+    v-for="(row, rowIndex) in rows"
+    :key="`br-${ rowIndex }`"
+    :id="optionalAttr(isActual && row.id)"
+    :class="resolveClasses(classes.row, { row: row.data, rowIndex, isActual, foot })"
+    :style="{
+      height: row.height
+    }"
+  > 
+    <component
+      v-for="(column, index) in rowColumns"
+      :is="column.rowHeader ? 'th' : 'td'"
+      :id="optionalAttr(isActual && column.rowHeader && column.getRowHeaderId(rowIndex))"
+      :scope="optionalAttr(isActual && column.rowHeader && 'row')"
+      :key="`bc-${ index }`"
+      :headers="optionalAttr(isActual && getCellHeaders(column, rowIndex))"
+      :class="resolveClasses(column.class, { column, index, isActual, row, rowIndex, foot })"
+      :style="{
+        width: columnWidth
+      }"
+    >
+      <template v-if="$slots[column.slot]">
+        <slot 
+          :name="column.slot" 
+          :row="row.data" 
+          :column="column"
+          :rowIndex="rowIndex"
+          :index="index"
+          :foot="foot"
+          :isActual="isActual"
+        />
+      </template>
+      <!--  
+      <component 
+        v-else-if="column.component" 
+        :is="column.component"
+        :row="row.data" 
+        :column="column"
+        :rowIndex="rowIndex"
+        :index="index"
+      /> -->
+      <div 
+        v-else-if="column.html" 
+        v-html="value({ row, column, rowIndex, isActual, foot })"
+      ></div>
+      <template v-else>
+        {{ value({ row, column, rowIndex, isActual, foot }) }}
+      </template>
+    </component>
+  </tr>
+</template>
+
+<script>
+  export default {
+    name: "UluTableStickyRows",
+    props: {
+      rows: Array,
+      rowColumns: Array,
+      columnWidth: String,
+      optionalAttr: Function,
+      resolveClasses: Function,
+      getCellHeaders: Function,
+      value: Function,
+      isActual: Boolean,
+      classes: Object,
+      foot: {
+        type: Boolean,
+        default: false
+      }
+    }
+  };
+</script>

package/lib/components/systems/table-sticky/UluTableStickyTable.vue

@@ -0,0 +1,237 @@
+<template>
+  <table 
+    :class="resolveClasses(classes.table, { isActual })"
+    :aria-hidden="isActual ? 'false' : 'true'"
+  >
+    <caption v-if="caption" class="table-sticky__caption">
+      {{ caption }}
+    </caption>
+    <thead>
+      <tr 
+        v-for="(row, rowIndex) in headerRows"
+        :key="`hr-${ rowIndex }`"
+        :id="optionalAttr(isActual && row.id)"
+        :class="resolveClasses(classes.rowHeader, { row, rowIndex, isActual })"
+        :style="{
+          height: row.height
+        }"
+      >
+        <th 
+          v-for="(column, index) in row.columns"
+          :key="`hc-${ index }`"
+          :id="optionalAttr(isActual && column.id)"
+          :rowspan="column.rowspan"
+          :colspan="column.colspan"
+          :data-child-columns="column.columns && column.columns.length"
+          :class="[
+            {
+              'sort-active' : column.sortApplied,
+              'sort-ascending' : column.sortApplied && column.sortAscending,
+              'sort-descending' : column.sortApplied && !column.sortAscending,
+            }, 
+            resolveClasses(column.classHeader, { column, index, isActual })
+          ]"
+          :style="{
+            width: column.width
+          }"
+          :aria-sort="column.sort ? column.sortAscending ? 'ascending' : 'descending' : null"
+          :scope="optionalAttr(isActual && (column.colspan > 1 ? 'colgroup' : 'col'))"
+          :headers="optionalAttr(isActual && getHeaderHeaders(column, rowIndex))"
+          :ref="(el) => addHeaderRef(column, el)"
+        >
+          <!-- 
+            If sortable print button but div on fake headers (click only)
+            Focus will go back to real header (focus and blur will update styling)
+          -->
+          <component 
+            v-if="column.sortable"
+            :is="isActual ? 'button' : 'div'"
+            class="table-sticky__sort-button"
+            :class="{ 
+              'table-sticky__sort-button--focused' : column.sortFocused,
+            }"
+            @click="$emit('columnSorted', column)"
+            @focus="handleSortFocus(column, true)"
+            @blur="handleSortFocus(column, false)"
+            :aria-pressed="column.sortApplied ? 'true' : 'false'"
+          >
+            <template v-if="$slots[column.slotHeader]">
+              <slot 
+                :name="column.slotHeader"
+                :isActual="isActual"
+                :column="column"
+                :index="index"
+              />
+            </template>
+            <div v-else-if="column.htmlTitle" v-html="getColumnTitle({ column, index, isActual })"></div>
+            <template v-else>
+              {{ getColumnTitle({ column, index, isActual }) }}
+            </template>
+            <span class="table-sticky__sort-icon" aria-hidden="true">
+              <span class="table-sticky__sort-icon-inner">
+                <slot name="sortIcon">▼</slot>
+              </span>
+            </span>
+          </component>
+          <template v-else>
+            <template v-if="$slots[column.slotHeader]">
+              <slot 
+                :name="column.slotHeader"
+                :isActual="isActual"
+                :column="column"
+                :index="index"
+              />
+            </template>
+            <div v-else-if="column.htmlTitle" v-html="getColumnTitle({ column, index, isActual })"></div>
+            <template v-else>
+              {{ getColumnTitle({ column, index, isActual }) }}
+            </template>
+          </template>
+        </th>
+      </tr>
+    </thead>
+    <template v-if="rows">
+      <tbody>
+        <UluTableStickyRows
+          :rows="rows"
+          :rowColumns="rowColumns"
+          :optionalAttr="optionalAttr"
+          :resolveClasses="resolveClasses"
+          :getCellHeaders="getCellHeaders"
+          :isActual="isActual"
+          :columnWidth="columnWidth"
+          :classes="classes"
+          :value="value"
+        >
+          <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
+            <slot :name="name" v-bind="slotData" />
+          </template>
+        </UluTableStickyRows>
+      </tbody>
+    </template>
+    <template v-if="footerRows">
+      <tfoot>
+        <UluTableStickyRows
+          :rows="footerRows"
+          :rowColumns="rowColumns"
+          :optionalAttr="optionalAttr"
+          :resolveClasses="resolveClasses"
+          :getCellHeaders="getCellHeaders"
+          :isActual="isActual"
+          :columnWidth="columnWidth"
+          :classes="classes"
+          :value="value"
+          foot
+        >
+          <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
+            <slot :name="name" v-bind="slotData" />
+          </template>
+        </UluTableStickyRows>
+      </tfoot>
+    </template>
+  </table>
+</template>
+
+<script>
+  import UluTableStickyRows from "./UluTableStickyRows.vue";
+  export default {
+    name: "UluTableStickyTable",
+    components: {
+      UluTableStickyRows,
+    },
+    props: {
+      resolveClasses: Function,
+      classes: {
+        type: Object,
+        default: () => ({})
+      },
+      caption: String,
+      idPrefix: String,
+      headerRows: {
+        type: Array,
+        required: true
+      },
+      rows: Array,
+      footerRows: Array,
+      rowColumns: Array,
+      /**
+       * Is the actual table not a clone for sticky headers
+       */
+      isActual: {
+        type: Boolean
+      },
+      columnWidth: {
+        type: String
+      },
+      /**
+       * Optional user overridden value getter (for rows)
+       * @param {Object} row The current row
+       * @param {Object} column The current column in the row
+       */
+      getRowValue: {
+        type: Function,
+        default: ({ row, column }) => row[column.key]
+      },
+      /**
+       * Optional user overridden value getter (for rows)
+       * @param {Object} row The current row
+       * @param {Object} column The current column in the row
+       */
+      getColumnTitle: {
+        type: Function,
+        default: ({ column }) => column.title
+      },
+    },
+    data() {
+      return {
+        headerRefs: {}
+      };
+    },
+    methods: {
+      handleSortFocus(column, isFocused) {
+        if (this.isActual) {
+          column.sortFocused = isFocused;
+        }
+      },
+      addHeaderRef(column, el) {
+        const { headerRefs, isActual } = this;
+        if (!isActual || !el) return;
+        const { id } = column;
+        const old = headerRefs[id];
+        if (old) {
+          this.$emit("actualHeaderRemoved", old);
+        }
+        this.$emit("actualHeaderAdded", el);
+        headerRefs[id] = el;
+      },
+      /**
+       * False is no longer not printed
+       */
+      optionalAttr(val) {
+        return val ? val : null;
+      },
+      value({ row, column, rowIndex }) {
+        const value = column.value;
+        // Column has value function, pass to user
+        if (value) {
+          return value({ row: row.data, column, rowIndex });
+        } else {
+          // added .value to work with data. Should refactor depending on what we need
+          return this.getRowValue({ row: row.data, column, rowIndex });
+        }
+      },
+      getCellHeaders(column, rowIndex) {
+        const headers = column.headers.join(" ");
+        const rowHeaders = column.getRowHeaders(rowIndex);
+        const s = rowHeaders.length ? " " : "";
+        return `${ headers }${ s }${ rowHeaders }`;
+      },
+      getHeaderHeaders(column) {
+        const headersArray = column.headers.filter(id => id !== column.id);
+        if (headersArray.length) {
+          return headersArray.join(" ");
+        }
+      }
+    }
+  };
+</script>

package/lib/components/systems/table-sticky/_table-sticky.scss

@@ -0,0 +1,185 @@
+////
+/// @group table-sticky
+/// For use with table-sticky plugin (vue) or other framework implementations, not output by default must be enabled.
+////
+
+@use "sass:map";
+@use "sass:meta";
+
+@use "@ulu/frontend/scss/selector";
+@use "@ulu/frontend/scss/utils";
+@use "@ulu/frontend/scss/color";
+@use "@ulu/frontend/scss/element";
+
+
+// Used for function fallback
+$-fallbacks: (
+  "box-shadow" : (
+    "function" : meta.get-function("get", false, "element"),
+    "property" : "box-shadow"
+  ),
+);
+
+/// Module Settings
+/// @type Map
+/// @prop {CssValue}  box-shadow  [true] Box shadow for controls, defaults to element box-shadow
+
+$config: (
+  "box-shadow": true,
+  "ui-color-disabled": #6490af,
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss
+///   @include ulu.component-table-sticky-set(( "property" : value ));
+
+@mixin set($changes) {
+  $config: map.merge($config, $changes) !global;
+}
+
+/// Get a config option
+/// @param {Map} $name Name of property
+/// @example scss
+///   @include ulu.component-table-sticky-get("property");
+
+@function get($name) {
+  $value: utils.require-map-get($config, $name, "table-sticky [config]");
+  @return utils.function-fallback($name, $value, $-fallbacks);
+}
+/// Prints component styles
+/// @demo table-sticky
+/// @example scss
+///  @include ulu.component-table-sticky-styles();
+
+@mixin styles {
+  $prefix: selector.class("table-sticky");
+
+  #{ $prefix } {
+    position: relative; // For controls
+    width: 100%;
+    * {
+      box-sizing: border-box;
+    }
+  }
+  #{ $prefix }__display {
+    overflow-x: auto;
+    overflow-y: hidden;
+    // scroll-behavior: smooth;
+  }
+  #{ $prefix }__table {
+    // border-collapse: collapse;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+  }
+  #{ $prefix }__sticky-wrap {
+    position: sticky;
+    top: -1px;
+    left: 0;
+    width: 100%;
+    z-index: 2;
+    margin-bottom: 200px; // Distance from bottom of table to disable
+    margin-top: -200px; // Distance from bottom of table to disable
+  }
+  #{ $prefix }__sticky-wrap--first-column-header {
+    z-index: 4;
+  }
+  #{ $prefix }__sticky-wrap--controls {
+    margin-top: -52vh;
+    margin-bottom: 52vh;
+  }
+  #{ $prefix }__header-wrap {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    overflow: hidden;
+  }
+  #{ $prefix }__table--first-column-header,
+  #{ $prefix }__table--first-column {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: auto !important;
+  }
+  #{ $prefix }__table--first-column {
+    z-index: 3;
+  }
+  #{ $prefix }__table--header {
+    will-change: transform;
+  }
+  #{ $prefix }__hidden-visually {
+    position: absolute;
+    left: -10000px;
+    top: auto;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+  }
+  // NOTE: The table caption needs to be positioned normally
+  // as display table-cell. Making absolute for hidden-visually 
+  // is causing chrome to add an anonymous cell to the table resulting in a 1px
+  // cell under the header. Which is messing up alignments. The only solution
+  // without removing the <caption> (not good for WCAG) is to position it at the 
+  // of the table so it doesn't affect the header alignments. Then cropping it to 
+  // a pixel and using negative margin to remove it's pixel from the flow beneath 
+  #{ $prefix }__caption {
+    margin-bottom: -1px;
+    height: 1px;
+    padding: 0 !important;
+    margin: 0 !important;
+    overflow: hidden;
+    display: none;
+  }
+  // Allow initiating scrolling by dragging first column
+  #{ $prefix }--can-scroll-right:not(#{ $prefix }--can-scroll-left) {
+    #{ $prefix }__table--first-column-header,
+    #{ $prefix }__table--first-column {
+      // pointer-events: none;
+      visibility: hidden;
+      // opacity: 0 !important;
+    }
+  }
+  #{ $prefix }__controls {
+    position: absolute;
+    top: 50vh;
+    right: 20px;
+  }
+  #{ $prefix }__controls-inner {
+    display: flex;
+  }
+  #{ $prefix }__control {
+    box-shadow: get("box-shadow");
+  }
+  #{ $prefix }__sort-button {
+    display: flex;
+    align-items: center;
+    font-weight: inherit;
+    font-style: inherit;
+    font-size: inherit;
+  }
+  #{ $prefix }__sort-button--focused {
+    outline: 2px auto Highlight;
+    outline: 2px auto -webkit-focus-ring-color;
+  }
+  #{ $prefix }__sort-icon {
+    margin-left: auto;
+    padding-left: 1em;
+    display: block;
+    opacity: 0.5;
+    .sort-active & {
+      opacity: 1;
+    }
+    .sort-ascending & {
+      #{ $prefix }__sort-icon-inner {
+        transform: rotate(180deg);
+      }
+    }
+  }
+  #{ $prefix }__sort-icon-inner {
+    display: block;
+  }
+}
+
+

package/lib/components/utils/UluCondText.vue

@@ -0,0 +1,28 @@
+<template>
+  <!-- Intentional Coercion to null (undefined and null, else print) -->
+  <component v-if="text != null" :is="element">
+    {{ text }}
+  </component>
+</template>
+
+<script>
+  /**
+   * Print out text if set (has value)
+   */
+  export default {
+    name: "UluCondText",
+    props: {
+      /**
+       * Text to print in element
+       */
+      text: [String, Number, Array, Object],
+      /**
+       * Element type to render (ie. h1, h2, p, etc)
+       */
+      element: {
+        type: String,
+        default: "p"
+      }
+    }
+  }
+</script>

package/lib/components/utils/UluEmpty.vue

@@ -0,0 +1,3 @@
+<template>
+  <span style="display: none"></span>
+</template>

package/lib/components/utils/UluEmptyView.vue

@@ -0,0 +1,3 @@
+<template>
+  <router-view></router-view>
+</template>

package/lib/components/utils/UluPlaceholderImage.vue

@@ -0,0 +1,53 @@
+<template>
+  <img :src="src" :alt="alt">
+</template>
+<script>
+  import { randomInt } from "@ulu/utils/random.js";
+  export default {
+    name: "UluPlaceholderImage",
+    props: {
+      imageId: String,
+      /**
+       * Width of the image
+       */
+      width: {
+        type: [String, Number],
+        default: "300"
+      },
+      /**
+       * Height of the image
+       */
+      height: {
+        type: [String, Number],
+        default: "400"
+      },
+      /**
+       * Alt text for placeholder image
+       */
+      alt: String,
+      /**
+       * Random size
+       */
+      random: Boolean
+    },
+    computed: {
+      src() {
+        const { imageId } = this;
+        const { width, height } = this.size;
+        const id = imageId ? `id/${ imageId }/` : "";
+        return `https://picsum.photos/${ id }${ width }/${ height }`;
+      },
+      size() {
+        const { random, width, height } = this;
+        if (random) {
+          return {
+            width: randomInt(500, 1000),
+            height: randomInt(500, 1000),
+          };
+        } else {
+          return { width, height };
+        }
+      }
+    }
+  };
+</script>

package/lib/components/utils/UluPlaceholderText.vue

@@ -0,0 +1,25 @@
+<template>
+  <component 
+    v-for="index in parseInt(amount)" 
+    :key="index"
+    :is="element"
+  >
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper erat tincidunt tellus vestibulum dictum. Fusce vel augue commodo, egestas diam sed, accumsan leo. Maecenas congue nec nisl et ullamcorper. Maecenas tincidunt, tortor et viverra eleifend, enim leo vestibulum ipsum, quis placerat mi nisi nec ex. Vivamus a justo volutpat, scelerisque elit eget, lacinia ex. Phasellus dapibus sollicitudin tortor, vitae suscipit nunc condimentum ut. Cras suscipit feugiat nibh nec consectetur. Phasellus vitae quam blandit, cursus metus ut, placerat mi. Sed tempor lacus non est interdum imperdiet nec quis metus. Praesent vel eleifend diam. Donec tincidunt eget purus sed posuere.
+  </component>
+</template>
+
+<script>
+  export default {
+    name: "PlaceholderText",
+    props: {
+      amount: {
+        type: Number,
+        default: 1
+      },
+      element: {
+        type: String,
+        default: "p"
+      }
+    },
+  };
+</script>

package/lib/components/utils/UluRouteAnnouncer.vue

@@ -0,0 +1,83 @@
+<!-- 
+  Route Announcer:
+  - Used to provide accessible title after route (page) change
+  - Will ignore any routes that have hashes
+  - Props 
+    - exclude {Array} You can exclude specific routes () by exact path or path with wildcard at end, alternatively use the 'confirm' prop for complete control
+    - validator {Function} Pass a function to determine if current route should be announced
+    - getTitle {Function} Provide method for extracting title from route return string
+
+  Should include <UluRouteAnnouncer /> as first component in app
+ -->
+<template>
+  <p 
+    v-if="title"
+    tabindex="-1" 
+    class="hidden-visually" 
+    ref="el"
+  >
+    {{ title }}
+  </p>
+</template>
+
+<script>
+  export default {
+    name: "RouteAnnouncer",
+    props: {
+      /**
+       * Allow user to bypass this functionality
+       * - Function should return true if the page should be annouced
+       * - Function is passed  (to, from, $route) => {}
+       *   - to/from are path strings
+       */
+      validator: {
+        type: Function,
+        default: () => true
+      },
+      /**
+       * Array of paths to exclude
+       * - Can be exact path "/about" 
+       * - Or can be path with wildcard "/about/*" (match all paths under about)
+       */
+      exclude: {
+        type: Array,
+        default: () => []
+      },
+      /**
+       * Function to retrieve routes title
+       */
+      getTitle: {
+        type: Function,
+        default: (route) => route.meta?.title 
+      }
+    },
+    watch: {
+      "$route.path"(to, from) {
+        if (this.$route.hash) {
+          return;
+        }
+        const isValid = this.validator(to, from, this.$route);
+        const isExcluded = this.exclude.some(ex => {
+          // Allow wildcard at end to exclude entire sections, etc
+          if (ex.endsWith("*")) {
+            return to.startsWith(ex.slice(0, ex.length - 1));
+          } else {
+            return to === ex;
+          }
+        });
+        if (isValid && !isExcluded) {
+          this.$refs.el.focus();
+        }
+      }
+    },
+    computed: {
+      title() {
+        const title = this.getTitle(this.$route);
+        if (!title) {
+          console.warn("RouteAnnouncer: No page title!");
+        }
+        return title;
+      }
+    }
+  };
+</script>