@pocketprep/ui-kit 3.4.64 → 3.4.66

package/lib/components/Messaging/InfoMessage.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { dark as vDark } from '@/directives'
+defineProps<{
+    isDarkMode?: boolean
+}>()
+</script>
+
+<template>
+    <div v-dark="isDarkMode" class="info-message">
+        <div v-dark="isDarkMode" class="info-message__content">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+@import '../../styles/breakpoints';
+@import '../../styles/colors';
+
+.info-message {
+    padding: 11px 16px;
+    background-color: $barely-blue;
+    border: 1px solid rgba($brand-blue, 0.4);
+    border-radius: 6px;
+
+    &__content {
+        font-size: 15px;
+        line-height: 20px;
+        color: $brand-black;
+
+        &--dark {
+            color: $white;
+        }
+    }
+
+    &--dark {
+        background-color: rgba($brand-blue, 0.2);
+        border-color: rgba($baby-blue, 0.4);
+    }
+}
+</style>

package/lib/components/Quiz/Question/MobileMatrixChoicesContainer.vue

@@ -396,6 +396,19 @@ export default class MobileMatrixChoicesContainer extends Vue {
 
     convertSelectedMatrixChoiceToCheckboxGrid () {
         const checkboxGrid = this.defaultCheckboxGrid
+
+        // Reset this.selectedColumnHeaders string[][] in case in headers are still in the arrays
+        // Let selectedMatrixChoices set those columns
+        const columnMatrixLabels = this.question.matrixLabels?.rows
+        const defaultSelectedColumnLabels: string[][] = []
+        if (columnMatrixLabels) {
+            columnMatrixLabels.forEach(() => {
+                defaultSelectedColumnLabels.push([])
+            })
+
+            this.selectedColumnHeaders = defaultSelectedColumnLabels
+        }
+
         this.selectedMatrixChoices.forEach(choice => {
             const rowIndex = Number(choice.substring(1, choice.indexOf('_'))) - 1
             const columnIndex = Number(choice.split('_').pop()) - 1
@@ -417,6 +430,9 @@ export default class MobileMatrixChoicesContainer extends Vue {
             const columnIndex = Number(choice.split('_').pop()) - 1
             if (this.selectedColumnHeaders[rowIndex] && this.question.matrixLabels?.columns[columnIndex]) {
                 const columnHeader = this.question.matrixLabels?.columns[columnIndex]
+                // In case a column header is still in selectedColumnHeaders, remove it first and let
+                // selectedMatrixChoices add selected column header based on selected choices
+                this.selectedColumnHeaders[rowIndex].pop()
                 this.selectedColumnHeaders[rowIndex].push(columnHeader)
             }
             if (radioBtnGrid && radioBtnGrid[rowIndex]) {
@@ -429,6 +445,18 @@ export default class MobileMatrixChoicesContainer extends Vue {
     checkboxRowClicked (rowIndex: number, columnIndex: number) {
         if (this.matrixCheckboxGrid && this.matrixCheckboxGrid[rowIndex]) {
             this.matrixCheckboxGrid[rowIndex][columnIndex] = !this.matrixCheckboxGrid[rowIndex][columnIndex]
+            const columnHeader = this.question.matrixLabels?.columns[columnIndex]
+
+            if (this.selectedColumnHeaders && this.selectedColumnHeaders[rowIndex] && columnHeader) {
+                if (this.selectedColumnHeaders[rowIndex].includes(columnHeader)) {
+                    const columnHeaderIndex = this.selectedColumnHeaders[rowIndex].indexOf(columnHeader)
+                    if (columnHeaderIndex !== -1) {
+                        this.selectedColumnHeaders[rowIndex].splice(columnHeaderIndex, 1)
+                    }
+                } else {
+                    this.selectedColumnHeaders[rowIndex].push(columnHeader)
+                }
+            }
         }
     }
 
@@ -469,29 +497,6 @@ export default class MobileMatrixChoicesContainer extends Vue {
         }
     }
 
-    @Watch('matrixCheckboxGrid', { deep: true })
-    addRemoveCheckboxColumnHeaders () {
-        if (this.matrixCheckboxGrid) {
-            const selectedCheckboxColumnLabels: string[][] = []
-            this.matrixCheckboxGrid.forEach((row, rowIndex) => {
-                selectedCheckboxColumnLabels.push([])
-                row.forEach((choice, choiceIndex) => {
-                    if (
-                        choice 
-                        && this.question.matrixLabels?.columns 
-                        && this.question.matrixLabels?.columns[choiceIndex]
-                    ) {
-                        const columnLabel = this.question.matrixLabels?.columns[choiceIndex]
-                        if (selectedCheckboxColumnLabels[rowIndex]) {
-                            selectedCheckboxColumnLabels[rowIndex].push(columnLabel)
-                        }
-                    }
-                })
-                this.selectedColumnHeaders = selectedCheckboxColumnLabels
-            })
-        }
-    }
-
     @Watch('matrixRadioGrid', { deep: true })
     matrixRadioGridChange () {
         if (this.matrixChoiceLayout && this.matrixRadioGrid && (!this.reviewMode || !this.showMatrixAnswers)) {

package/lib/index.ts

@@ -53,6 +53,7 @@ import PremiumPill from './components/Bundles/PremiumPill.vue'
 import Toast from './components/Toasts/Toast.vue'
 import EmptyState from './components/EmptyStates/EmptyState.vue'
 import Tag from './components/Tags/Tag.vue'
+import InfoMessage from './components/Messaging/InfoMessage.vue'
 
 export * as directives from './directives'
 export * as utils from './utils'
@@ -111,6 +112,7 @@ const components = {
     Toast,
     EmptyState,
     Tag,
+    InfoMessage,
 }
 
 export default components

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pocketprep/ui-kit",
-  "version": "3.4.64",
+  "version": "3.4.66",
   "description": "Pocket Prep UI Kit",
   "author": "pocketprep",
   "scripts": {