@worksafevictoria/wcl7.5 1.1.0-beta.9 → 1.1.0-beta.90

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

@@ -11,9 +11,8 @@
     :title-tag="titleTag"
     class="card-grid"
     :content-class="contentClass"
-    :class="{
-      [uniqueClass]: true
-    }"
+    :class="`cardGrid-${$.uid}`"
+    :card-browse-content="cardBrowseContent"
   >
     <template v-if="$slots.gridHeaderRight" v-slot:headerRight>
       <slot name="gridHeaderRight"></slot>
@@ -26,12 +25,12 @@
         ref="cardRow"
         :class="{
           ['card-grid__row--' + rowSpacing]: true,
-          ['card-grid__row--' + rowClasses]: true
+          ['card-grid__row--' + rowClasses]: true,
         }"
       >
         <column
           v-for="(item, index) in cards"
-          :key="`${redrawCounter}-${index}-${_uid}`"
+          :key="`${redrawCounter}-${index}-${$.uid}`"
           ref="cardColumns"
           :lg="largeViewPort"
           :md="mediumViewPort"
@@ -39,7 +38,7 @@
           cols="12"
           class="card-grid__column"
           :class="{
-            ['card-grid__column--' + columnSpacing]: true
+            ['card-grid__column--' + columnSpacing]: true,
           }"
         >
           <slot name="cardItem" :card="item" :index="index"></slot>
@@ -64,52 +63,52 @@ export default {
   props: {
     title: {
       type: String,
-      default: null
+      default: null,
     },
     subHeading: {
       type: String,
-      default: null
+      default: null,
     },
     titleTag: {
       type: String,
-      default: 'h2'
+      default: 'h2',
     },
     cards: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     rtl: {
       type: Boolean,
-      default: false
+      default: false,
     },
     columnsPerRow: {
       type: Number,
-      default: 3
+      default: 3,
     },
     forceLgColumnsPerRow: {
       type: Number,
-      default: undefined
+      default: undefined,
     },
     forceMdColumnsPerRow: {
       type: Number,
-      default: undefined
+      default: undefined,
     },
     forceSmColumnsPerRow: {
       type: Number,
-      default: undefined
+      default: undefined,
     },
     size: {
       type: String,
       default: 'page',
       validator: (value) =>
-        ['half-content', 'content', 'page', 'full'].indexOf(value) >= 0
+        ['half-content', 'content', 'page', 'full'].indexOf(value) >= 0,
     },
     isSelectable: {
-      type: Boolean
+      type: Boolean,
     },
     cardIdPrefix: {
       type: String,
-      default: null
+      default: null,
     },
     backgroundVariant: {
       type: String,
@@ -122,45 +121,49 @@ export default {
           'grey',
           'yellow',
           'white',
-          'lightblue'
-        ].indexOf(value) >= 0
+          'lightblue',
+        ].indexOf(value) >= 0,
     },
     applyBackgroundOn: {
       type: String,
       default: 'section',
       validator: (value) =>
-        ['content', 'block', 'container', 'section'].indexOf(value) >= 0
+        ['content', 'block', 'container', 'section'].indexOf(value) >= 0,
     },
     noPaddingTop: {
-      type: Boolean
+      type: Boolean,
     },
     noPaddingBottom: {
-      type: Boolean
+      type: Boolean,
     },
     rowSpacing: {
       type: String,
       default: 'large',
-      validator: (value) => ['none', 'small', 'large'].indexOf(value) >= 0
+      validator: (value) => ['none', 'small', 'large'].indexOf(value) >= 0,
     },
     rowClasses: {
       type: String,
-      default: null
+      default: null,
     },
     columnSpacing: {
       type: String,
       default: 'default',
-      validator: (value) => ['default', 'none'].indexOf(value) >= 0
+      validator: (value) => ['default', 'none'].indexOf(value) >= 0,
     },
     contentClass: {
       type: String,
-      default: ''
-    }
+      default: '',
+    },
+    cardBrowseContent: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
       childCards: [],
       redrawCounter: 0,
-      setColumnSizeDebounce: debounce(this.setColumnSize, 500)
+      setColumnSizeDebounce: debounce(this.setColumnSize, 500),
     }
   },
   computed: {
@@ -187,38 +190,35 @@ export default {
       }
       return 6
     },
-    uniqueClass() {
-      return 'cardGrid' + this._uid
-    }
   },
   watch: {
     cards: {
-      handler: function() {
+      handler: function () {
         this.redrawCounter += 1
         this.setColumnSizeDebounce()
       },
-      deep: true
+      deep: true,
     },
     columnsPerRow: {
-      handler: function() {
+      handler: function () {
         this.setColumnSizeDebounce()
-      }
+      },
     },
     forceSmColumnsPerRow: {
-      handler: function() {
+      handler: function () {
         this.setColumnSizeDebounce()
-      }
+      },
     },
     forceMdColumnsPerRow: {
-      handler: function() {
+      handler: function () {
         this.setColumnSizeDebounce()
-      }
+      },
     },
     forceLgColumnsPerRow: {
-      handler: function() {
+      handler: function () {
         this.setColumnSizeDebounce()
-      }
-    }
+      },
+    },
   },
   mounted() {
     window.addEventListener('resize', this.setColumnSizeDebounce)
@@ -228,16 +228,32 @@ export default {
     window.removeEventListener('resize', this.setColumnSizeDebounce)
   },
   methods: {
+    cardTitleSelected(selectedCard, ev) {
+      this.clearCards()
+      selectedCard.selected = !!!selectedCard.selected
+      const selectedCardModelIndex = this.getChildIndex(selectedCard)
+
+      this.$emit('selected-title', {
+        selectedCard: selectedCard.selected
+          ? this.cards[selectedCardModelIndex]
+          : null,
+        selectedCardModelIndex,
+        ev,
+      })
+    },
     cardSelected(selectedCard, ev) {
       this.clearCards()
       selectedCard.selected = !!!selectedCard.selected
       const selectedCardModelIndex = this.getChildIndex(selectedCard)
+
       this.$emit('selected', {
         selectedCard: selectedCard.selected
-          ? this.cards[selectedCardModelIndex]
+          ? this.cardBrowseContent
+            ? this.childCards[selectedCardModelIndex]
+            : this.cards[selectedCardModelIndex]
           : null,
         selectedCardModelIndex,
-        ev
+        ev,
       })
     },
     clearCards(selectedCard) {
@@ -277,15 +293,15 @@ export default {
           this.$emit('isMobileOrTabletView', isMobileView || isTabletView)
           this.$emit('gridColumnSize', gridColumnSize)
           this.childCards.forEach((card) =>
-            card.setGridMetaData(gridColumnSize, isMobileView, isTabletView)
+            card.setGridMetaData(gridColumnSize, isMobileView, isTabletView),
           )
         }
       })
     },
     handleFocus(ev) {
       this.$emit('focussed', ev)
-    }
-  }
+    },
+  },
 }
 </script>
 

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/Common/CardGridItem/card-grid-item-icon.vue

@@ -54,7 +54,7 @@
 </template>
 <script>
 import Icon from './../../SubComponents/Icon/index.vue'
-import arrowRight from './../../../assets/icons/right-arrow.svg?raw'
+import arrowRight from './../../../assets/icons/right-arrow.svg?component'
 
 export default {
   name: 'CardGridItemIcon',