@worksafevictoria/wcl7.5 1.7.0 → 1.7.1

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

@@ -16,6 +16,7 @@
         :borderless="false"
         :responsive="!isFluid"
         :stacked="!isFluid ? 'sm' : false"
+        :must-sort="true"
       >
         <template #head()="data">
           <span
@@ -26,23 +27,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 +51,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 +79,7 @@ export default {
     },
     caption: {
       type: String,
-      default: '',
+      default: "",
       required: false,
     },
     sortBy: {
@@ -93,42 +90,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;
@@ -146,6 +134,7 @@ export default {
   .table td {
     margin: 1rem;
     vertical-align: middle;
+    padding: 12px;
     @media screen and (max-width: 540px) {
       margin: 0.5rem;
     }
@@ -155,6 +144,8 @@ export default {
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
+    align-items: center;
+    width: 100%;
   }
 
   .rtl {
@@ -163,7 +154,7 @@ export default {
 
   .sortImg {
     vertical-align: middle;
-    margin-left: 5px;
+    margin-left: auto;
   }
 
   .b-table-sortable-column svg {