@worksafevictoria/wcl7.5 1.1.13 → 1.1.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worksafevictoria/wcl7.5",
-  "version": "1.1.13",
+  "version": "1.1.14",
   "main": "src/index.js",
   "license": "MIT",
   "repository": {
@@ -40,11 +40,11 @@
   "dependencies": {
     "@formio/vue": "^5.0.0",
     "@fortawesome/fontawesome-free": "^6.4.2",
-    "@storybook/cli": "^7.6.3",
+    "@storybook/cli": "^7.6.20",
     "axios": "^1.6.0",
     "bootstrap": "^5.3.2",
     "bootstrap-vue": "^2.23.1",
-    "bootstrap-vue-next": "^0.15.5",
+    "bootstrap-vue-next": "^0.23.2",
     "date-fns": "^2.30.0",
     "formiojs": "4.13.13",
     "storybook-addon-deep-controls": "^0.6.2",
@@ -85,7 +85,7 @@
     "prettier": "^3.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "sass": "^1.69.5",
+    "sass": "1.77.6",
     "sass-loader": "^13.3.2",
     "semantic-release": "^19.0.3",
     "storybook": "^7.5.1",

package/src/components/Global/GlobalNotice/index.stories.js

@@ -5,4 +5,10 @@ export default {
     component: GlobalNotice
   }
   
-  export const Default = {}
+  export const Default = {
+    loaders: [
+      () => { 
+        window.localStorage.removeItem('globalModalHidden')
+      }
+    ]
+  }

package/src/components/Paragraphs/ScrollSpy/index.stories.js

@@ -51,7 +51,8 @@ export default {
     title: 'On this page',
     itemListEnglish:  englishItemList,
     itemListArabic: arabicItemList,
-    rtl: false
+    rtl: false,
+    scrollSpy: { element: 'scrollspy-nested', offset: 100, method: 'auto' }
     }
 }
 const DefaultContent = (args) => ({

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

@@ -2,7 +2,7 @@
   <section-group class="sticky-top">
     <b-navbar class="paragraph--scrollspy" :class="{ rtl: rtl }">
       <b-list-group
-        v-b-scrollspy="{ offset: 100, method: 'auto' }"
+        v-b-scrollspy="scrollSpy"
         class="flex-column"
       >
         <div class="scrollspy__title">{{ title }}</div>
@@ -22,11 +22,12 @@
 
 <script>
 import SectionGroup from '../../Containers/SectionGroup/index.vue'
-import { BNavbar, BListGroup, BListGroupItem } from 'bootstrap-vue-next'
+import { BNavbar, BListGroup, BListGroupItem, vBScrollspy } from 'bootstrap-vue-next'
 
 export default {
   name: 'ScrollSpy',
   components: { SectionGroup, BNavbar, BListGroup, BListGroupItem },
+  directives: { 'b-scrollspy':vBScrollspy },
   props: {
     title: {
       type: String,
@@ -39,6 +40,10 @@ export default {
     rtl: {
       type: Boolean,
       default: false
+    },
+    scrollSpy: {
+      type: Object,
+      default: () => {return{ element: 'body', offset: 100, method: 'auto' }}
     }
   },
   methods: {

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

@@ -12,8 +12,7 @@
           :class="`${rtl ? 'rtl' : ''} ${isFluid ? 'isScrolled' : ''}`"
           class="table border"
           :striped="true"
-          v-model:sort-desc="sortDesc" 
-          v-model:sort-by="sortBy"
+          :sort-by="sortBy"
           :borderless="false"
           :responsive="!isFluid"
           :stacked="!isFluid ? 'sm' : false"
@@ -74,8 +73,8 @@ export default {
   },
   data() {
     return {
-      sortBy: this.initialSortBy,
-      sortDesc: false,
+      sortBy: [{key:this.initialSortBy, 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:
@@ -91,11 +90,13 @@ export default {
   },
   methods: {
    accessSort(fieldVar) {
-    this.sortBy = fieldVar.key
+    //this.sortBy = fieldVar.key
       if (fieldVar.thAttr['aria-sort'] === 'none' || fieldVar.thAttr['aria-sort'] === 'descending' ) {
-        this.sortDesc = false
+        this.sortBy = [{key:fieldVar.key, order:'asc'}]
+        //this.sortDesc = false
       } else {
-        this.sortDesc = true
+        this.sortBy = [{key:fieldVar.key, order:'desc'}]
+        //this.sortDesc = true
       }    
     }
   }
@@ -141,5 +142,9 @@ export default {
     vertical-align: middle;
     margin-left: 5px;
   }
+
+  .b-table-sortable-column svg {
+    display:none;
+  }
 }
 </style>

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

@@ -21,7 +21,7 @@
             :selected-task="selectedTask"
             :is-child="false"
             :is-mobile-or-tablet-view="isMobileOrTabletView"
-            @selected="(task) => taskClick(task, true)"
+            @selection="(task) => taskClick(task, true)"
           >
             <task-finder-column
               v-if="isMobileOrTabletView && selectedTask"
@@ -31,7 +31,7 @@
               :selected-task="selectedTask"
               :is-mobile-or-tablet-view="isMobileOrTabletView"
               :is-child="true"
-              @selected="(task) => taskClick(task, false)"
+              @selection="(task) => taskClick(task, false)"
             >
             </task-finder-column>
           </task-finder-column>
@@ -49,7 +49,7 @@
             :selected-task="selectedTask"
             :is-mobile-or-tablet-view="isMobileOrTabletView"
             :is-child="true"
-            @selected="(task) => taskClick(task, false)"
+            @selection="(task) => taskClick(task, false)"
           >
           </task-finder-column>
         </column>

package/src/components/Paragraphs/TaskFinder/task-finder-column.vue

@@ -16,7 +16,7 @@
       isChild ? 'task-finder-column__child' : 'task-finder-column__parent'
     "
     :style="cards.length > 6 ? false : 'overflow-y: auto'"
-    @selected="(card) => $emit('selected', { card })"
+    @selected="(card) => $emit('selection', { card })"
   >
     <template v-slot:cardItem="{ card }">
       <card-grid-item

package/src/components/Paragraphs/Webform/index.stories.js

@@ -36,6 +36,31 @@ export default {
         table: {
             disable: true
           }
+      },
+      changed: {
+        table: {
+          disable: true
+        }
+      },
+      submitted: {
+        table: {
+          disable: true
+        }
+      },
+      rendered: {
+        table: {
+          disable: true
+        }
+      },
+      nextPage: {
+        table: {
+          disable: true
+        }
+      },
+      prevPage: {
+        table: {
+          disable: true
+        }
       }
     },
     args: {

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

@@ -24,7 +24,7 @@
 
 <script>
 import FormHandler from '../../SubComponents/FormInstance/components/handler/index.vue'
-import colors from '../../../includes/scss/vars/src/colors.scss'
+import colors from '../../../includes/scss/vars/src/colors.scss?inline'
 
 export default {
   name: 'WebformPara',

package/src/components/SubComponents/Search/index.vue

@@ -22,12 +22,12 @@
           @update="searchType !== 'googlerest' ? onChange : () => {}"
           @keyup.enter="onChange"
         ></b-form-input>
-        <b-input-group-append>
+        <template #append>
           <b-button size="sm" class="search-button" @click="onSearch"
             ><span class="not-extra-small-screen">Search</span>
             <img alt="search icon" :src="searchIcon"
           /></b-button>
-        </b-input-group-append>
+        </template>
       </b-input-group>
       <search-listing
         v-if="loadSearchList && (searchResults || isLoading)"
@@ -56,10 +56,10 @@
 import axios from 'axios'
 import searchIcon from '../../../assets/icons/search.svg?url'
 import SearchListing from './SearchListing/index.vue'
-import { BButton, BInputGroup, BFormInput, BInputGroupAppend } from 'bootstrap-vue-next'
+import { BButton, BInputGroup, BFormInput } from 'bootstrap-vue-next'
 
 export default {
-  components: { SearchListing, BButton, BInputGroup, BFormInput, BInputGroupAppend },
+  components: { SearchListing, BButton, BInputGroup, BFormInput },
   props: {
     pageLimit: {
       type: Number,

package/src/components/SubComponents/VideoThumbnail/index.vue

@@ -127,13 +127,13 @@ export default {
   }
 
   .modal-header {
-    position: absolute;
     top: 0;
     height: 45px;
     background: $white;
     z-index: 1;
-    width: 100%;
-
+    margin-left: auto;
+    margin-right:0%;
+  
     &__wrap {
       position: relative;
       width: 100%;
@@ -152,7 +152,7 @@ export default {
     }
   }
   .modal-body {
-    padding: 32px;
+    padding: 0px 32px 32px;
     margin-top: 16px;
     .video-player {
       @include fp(min-height, 250, 588);
@@ -183,9 +183,6 @@ export default {
   .modal-footer {
     border: none;
   }
-  .modal-footer {
-    display: none;
-  }
 }
 </style>
 <style lang="scss" scoped>