@worksafevictoria/wcl7.5 1.1.0-beta.72 → 1.1.0-beta.73

package/package.json

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

package/src/components/Common/CardGrid/index.vue

@@ -193,7 +193,7 @@ export default {
       return 6
     },
     uniqueClass() {
-      return `cardGrid-${this.$options._uid}`
+      return `cardGrid-${Math.random().toString(36).slice(2, 11)}`
     }
   },
   watch: {

package/src/components/Common/CardGridItem/card-grid-item-caret.vue

@@ -23,6 +23,7 @@
 </template>
 
 <script>
+import { getCurrentInstance } from 'vue'
 import Icon from './../../SubComponents/Icon/index.vue'
 import ChevUp from './../../../assets/icons/chev-up.svg?raw'
 import CaretUp from './../../../assets/icons/caret-up.svg?url'
@@ -71,11 +72,13 @@ export default {
     },
     //Identify if this is a tabbed card WSV2-374
     isTabbedCard() {
-      const TabCardClassList = this.$parent.$el.classList
-      if (TabCardClassList.contains('tabbed-card')) {
-        return true
+      const instance = getCurrentInstance();
+      const parentEl = instance?.parent?.proxy?.$el.parentNode;
+
+      if (parentEl && parentEl.classList.contains('tabbed-card')) {
+        return true;
       } else {
-        return false
+        return false;
       }
     },
     //If isTabbedCard, then supportive text must be displayed for up and down carets. WSV2-374

package/src/components/Containers/SectionGroup/index.vue

@@ -50,7 +50,7 @@
             <slot name="preContent"></slot>
           </column>
         </row>
-
+        
         <div
           class="section-group__content section-group__row"
           :class="{
@@ -261,9 +261,9 @@ export default {
     padding-bottom: 0px;
   }
 
-  // &__row {
-    // padding-top: $basePadding;
-  // }
+  &__row {
+    padding-top: $basePadding;
+  }
 
   &.rtl {
     @include makeRTL;
@@ -274,7 +274,7 @@ export default {
   }
 
   &__content {
-    // padding-bottom: $basePadding;
+    padding-bottom: $basePadding;
     > :deep(.row) {
       row-gap: calc(#{$basePadding} / 2);
     }

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

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="tabbedCards.length > 0 && loaded"
-    :ref="`tabbedCards-${_uid}`"
+    :ref="`tabbedCards-${uid}`"
     class="tabbed-cards"
   >
     <div v-for="(r, rIndex) in rows" :key="rIndex">
@@ -40,7 +40,8 @@
             :is-expandable="true"
           />
         </template>
-        <template v-slot:cardGridFooter>
+        <template
+          v-slot:cardGridFooter >
           <column
             v-if="selectedRow === rIndex && selectedCard"
             class="listgroup-column"
@@ -64,6 +65,7 @@
 </template>
 
 <script>
+import { toRaw } from 'vue'
 import CardGrid from './../../Common/CardGrid/index.vue'
 import CardGridItem from './../../Common/CardGridItem/index.vue'
 import Column from './../../Containers/Column/index.vue'
@@ -104,16 +106,13 @@ export default {
       screenWidth: 0,
       loaded: false,
       tabList: null,
+      uid: Math.random().toString(36).slice(2, 11)
     }
   },
   computed: {
     rows() {
-      let r = Math.floor(this.tabbedCards.length / this.cols)
-      if (r % 1 != 0) {
-        return r
-      } else {
-        return r + 1
-      }
+      let r = Math.ceil(this.tabbedCards.length / this.cols);
+      return r;
     },
     cols() {
       if (this.screenWidth < 575.98) {
@@ -142,7 +141,7 @@ export default {
   },
   methods: {
     getCardIdPrefix(rIndex, cardIndex) {
-      const cardPrefix = `tabbedcards-${this._uid}-r-${rIndex}`
+      const cardPrefix = `tabbedcards-${this.uid}-r-${rIndex}`
       if (cardIndex !== null && cardIndex !== undefined) {
         return `${cardPrefix}-${cardIndex}`
       }
@@ -153,9 +152,11 @@ export default {
       let end = start + this.cols
       return rows.slice(start, end)
     },
-    async setCurrentRow(rowIndex, card) {
+    setCurrentRow(rowIndex, card) {
+      const rawCard = toRaw(this.selectedCard);
       const sameCardSelected =
-        card.selectedCard === this.selectedCard || !card.selectedCard
+      card.selectedCard.title === rawCard?.title || !card.selectedCard.title
+
       this.selectedCard = null
       this.selectedRow = null
       const cardGrids = this.$refs.cardgrid || []
@@ -164,7 +165,6 @@ export default {
           cardGrid.clearCards()
         }
       })
-      await nextTick()
       this.tabList = this.getFocusElements()
       setTimeout(() => {
         if (window && !sameCardSelected) {