@worksafevictoria/wcl7.5 1.1.0-beta.111 → 1.1.0-beta.112

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worksafevictoria/wcl7.5",
-  "version": "1.1.0-beta.111",
+  "version": "1.1.0-beta.112",
   "main": "src/index.js",
   "license": "MIT",
   "repository": {

package/src/components/Paragraphs/TabulatedData/index.vue

@@ -26,23 +26,17 @@
           >
             {{ data.label }}
             <span class="sortImg" v-if="data.field.sortable">
-              <img
-                v-if="data.field.thAttr['aria-sort'] === 'none'"
-                :src="sortIconNeutral"
-                alt="image indicating no sort"
-                style="width: 0.55rem; height: 0.9rem"
-              />
               <img
                 v-if="data.field.thAttr['aria-sort'] === 'ascending'"
-                :src="sortIconAsc"
+                :src="CaretUp"
                 alt="image indicating ascending sort"
-                style="width: 0.55rem; height: 0.9rem"
+                class="iconAsc"
               />
               <img
                 v-else-if="data.field.thAttr['aria-sort'] === 'descending'"
-                :src="sortIconDesc"
+                :src="CaretDown"
                 alt="image indicating descending sort"
-                style="width: 0.55rem; height: 0.9rem"
+                class="iconDesc"
               />
             </span>
           </span>
@@ -56,12 +50,14 @@
 </template>
 
 <script>
-import SectionGroup from './../../Containers/SectionGroup/index.vue'
-import RichText from '../../Paragraphs/RichText/index.vue'
-import { BTable } from 'bootstrap-vue-next'
+import SectionGroup from "./../../Containers/SectionGroup/index.vue";
+import RichText from "../../Paragraphs/RichText/index.vue";
+import { BTable } from "bootstrap-vue-next";
+import CaretUp from "./../../../assets/icons/caret-up.svg?url";
+import CaretDown from "./../../../assets/icons/caret-down.svg?url";
 
 export default {
-  name: 'TabulatedData',
+  name: "TabulatedData",
   components: { SectionGroup, RichText, BTable },
   props: {
     items: {
@@ -82,7 +78,7 @@ export default {
     },
     caption: {
       type: String,
-      default: '',
+      default: "",
       required: false,
     },
     sortBy: {
@@ -93,42 +89,33 @@ export default {
   },
   data() {
     return {
-      newSortBy: this.sortBy ? [{ key: this.sortBy, order: 'asc' }] : [],
+      newSortBy: this.sortBy ? [{ key: this.sortBy, order: "asc" }] : [],
       //sortDesc: false,
-      sortIconNeutral:
-        "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='black' opacity='.3' d='M51 1l25 23 24 22H1l25-22zM51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e",
-      sortIconDesc:
-        "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='black' d='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='black' opacity='.3' d='M51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e",
-      sortIconAsc:
-        "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='black' opacity='.3' d='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='black' d='M51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e",
-    }
+      CaretUp,
+      CaretDown,
+    };
   },
   computed: {
     isFluid() {
-      return this.isFixedWidth
+      return this.isFixedWidth;
     },
   },
   methods: {
     accessSort(fieldVar) {
-      //this.sortBy = fieldVar.key
-      if (
-        fieldVar.thAttr['aria-sort'] === 'none' ||
-        fieldVar.thAttr['aria-sort'] === 'descending'
-      ) {
-        this.newSortBy = [{ key: fieldVar.key, order: 'asc' }]
-        //this.sortDesc = false
+      const currentSort = fieldVar.thAttr["aria-sort"];
+      if (currentSort === "ascending") {
+        this.newSortBy = [{ key: fieldVar.key, order: "desc" }];
       } else {
-        this.newSortBy = [{ key: fieldVar.key, order: 'desc' }]
-        //this.sortDesc = true
+        this.newSortBy = [{ key: fieldVar.key, order: "asc" }];
       }
     },
   },
-}
+};
 </script>
 
 <style lang="scss">
 .paragraph--tabulated-data {
-  @import '../../../includes/scss/all';
+  @import "../../../includes/scss/all";
 
   .section-group__block {
     margin-top: -32px;