@pocketprep/ui-kit 3.5.0 → 3.5.1

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

@@ -169,7 +169,6 @@ const emit = defineEmits<{
 
 const {
     // questionEl is used by the breakpoint directive
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     questionEl,
     question,
     isMatrixQuestionCorrect,
@@ -298,7 +297,7 @@ const correctlySelectedChoice = (rowIndex: number, columnIndex: number) => {
 const incorrectlySelectedChoice = (rowIndex: number, columnIndex: number) => {
     if (selectedMatrixChoices.value && matrixAnswerKeys.value) {
         const selectedChoice = selectedChoiceKey(rowIndex, columnIndex)
-        if (selectedChoice && selectedChoice.startsWith('d')) {
+        if (selectedChoice?.startsWith('d')) {
             return true
         }
     }
@@ -312,11 +311,11 @@ const correctAnswerButNotSelected = (rowIndex: number, columnIndex: number) => {
 }
 
 const checkboxContainerStyling = (rowIndex: number, columnIndex: number) => {
-    const isReviewMode = showMatrixAnswers.value || reviewMode
+    const isReviewMode = showMatrixAnswers.value || reviewMode.value
 
     // check box is correctlySelected
     if (isReviewMode && correctlySelectedChoice(rowIndex, columnIndex)) {
-        const borderColor = isDarkMode ? brandColors.jungleGreen : brandColors.cadaverous
+        const borderColor = isDarkMode.value ? brandColors.jungleGreen : brandColors.cadaverous
         return {
             borderColor: `${borderColor} !important`,
             background: `${borderColor} !important`,
@@ -339,9 +338,9 @@ const checkboxContainerStyling = (rowIndex: number, columnIndex: number) => {
 }
 
 const checkboxCheckStyling = (rowIndex: number, columnIndex: number) => {
-    const isReviewMode = showMatrixAnswers.value || reviewMode
+    const isReviewMode = showMatrixAnswers.value || reviewMode.value
     if (isReviewMode && correctAnswerButNotSelected(rowIndex, columnIndex)) {
-        const color = isDarkMode ? brandColors.jungleGreen : brandColors.cadaverous
+        const color = isDarkMode.value ? brandColors.jungleGreen : brandColors.cadaverous
         return {
             color: `${color} !important`,
         }
@@ -349,11 +348,10 @@ const checkboxCheckStyling = (rowIndex: number, columnIndex: number) => {
 }
 
 const correctRow = (rowIndex: number) => {
-    if (matrixChoiceLayout.value && matrixChoiceLayout.value[rowIndex]) {
+    if (matrixChoiceLayout.value?.[rowIndex]) {
         if (
             question?.value.type === 'Matrix Checkbox' && 
-            matrixCheckboxGrid.value &&
-            matrixCheckboxGrid.value[rowIndex]
+            matrixCheckboxGrid.value?.[rowIndex]
         ) {
             const correctAnswerKeys = matrixChoiceLayout.value[rowIndex]?.filter(choice => 
                 choice.startsWith('a')
@@ -371,8 +369,7 @@ const correctRow = (rowIndex: number) => {
 
         if (
             question?.value.type === 'Matrix Radio Button' && 
-            matrixRadioGrid.value &&
-            matrixRadioGrid.value[rowIndex]
+            matrixRadioGrid.value?.[rowIndex]
         ) {
             const rowVal = matrixRadioGrid.value[rowIndex]?.value
             if (rowVal) {
@@ -402,7 +399,7 @@ const convertSelectedMatrixChoiceToCheckboxGrid = () => {
     selectedMatrixChoices.value.forEach(choice => {
         const rowIndex = Number(choice.substring(1, choice.indexOf('_'))) - 1
         const columnIndex = Number(choice.split('_').pop()) - 1
-        const row = checkboxGrid && checkboxGrid[rowIndex]
+        const row = checkboxGrid?.[rowIndex]
         if (row) {
             row[columnIndex] = true
             if (selectedColumnHeaders.value[rowIndex] && question.value.matrixLabels?.columns[columnIndex]) {
@@ -441,7 +438,7 @@ const convertSelectedMatrixChoiceToRadioBtnGrid = () => {
                 selectedColumnHeaders.value[rowIndex]?.push(columnHeader)
             }
         }
-        const radioBtnGridRow = radioBtnGrid && radioBtnGrid[rowIndex]
+        const radioBtnGridRow = radioBtnGrid?.[rowIndex]
         if (radioBtnGridRow) {
             radioBtnGridRow.value = choice
         }
@@ -450,12 +447,12 @@ const convertSelectedMatrixChoiceToRadioBtnGrid = () => {
 }
 
 const checkboxRowClicked = (rowIndex: number, columnIndex: number) => {
-    const matrixCheckboxGridRow = matrixCheckboxGrid.value && matrixCheckboxGrid.value[rowIndex]
+    const matrixCheckboxGridRow = matrixCheckboxGrid.value?.[rowIndex]
     if (matrixCheckboxGridRow) {
         matrixCheckboxGridRow[columnIndex] = !matrixCheckboxGridRow[columnIndex]
         const columnHeader = question.value.matrixLabels?.columns[columnIndex]
 
-        if (selectedColumnHeaders.value && selectedColumnHeaders.value[rowIndex] && columnHeader) {
+        if (selectedColumnHeaders.value?.[rowIndex] && columnHeader) {
             if (selectedColumnHeaders.value[rowIndex]?.includes(columnHeader)) {
                 const columnHeaderIndex = selectedColumnHeaders.value[rowIndex]?.indexOf(columnHeader)
                 if (columnHeaderIndex !== undefined && columnHeaderIndex !== -1) {
@@ -493,16 +490,12 @@ const emitSelectedMatrixChoice = (matrixChoiceKeys: TMatrixChoiceKey[]) => {
 }
 
 watch(matrixCheckboxGrid, () => {
-    if (matrixChoiceLayout.value && matrixCheckboxGrid.value && (!reviewMode || !showMatrixAnswers.value)) {
+    if (matrixChoiceLayout.value && matrixCheckboxGrid.value && (!reviewMode.value || !showMatrixAnswers.value)) {
         const selectedCheckboxChoices: TMatrixChoiceKey[] = []
 
         matrixCheckboxGrid.value.forEach((row, rowIndex) => {
             row.forEach((choice, choiceIndex) => {
-                if (
-                    choice && 
-                        matrixChoiceLayout.value?.[rowIndex] && 
-                        matrixChoiceLayout.value?.[rowIndex]?.[choiceIndex]
-                ) {
+                if (choice && matrixChoiceLayout?.value?.[rowIndex]?.[choiceIndex]) {
                     const choiceKey = matrixChoiceLayout.value?.[rowIndex]?.[choiceIndex] as TMatrixChoiceKey
                     if (choiceKey) {
                         selectedCheckboxChoices.push(choiceKey)
@@ -516,7 +509,7 @@ watch(matrixCheckboxGrid, () => {
 }, { deep: true })
 
 watch(matrixRadioGrid, () => {
-    if (matrixChoiceLayout.value && matrixRadioGrid.value && (!reviewMode || !showMatrixAnswers.value)) {
+    if (matrixChoiceLayout.value && matrixRadioGrid.value && (!reviewMode.value || !showMatrixAnswers.value)) {
         const selectedRadioButtonChoices: TMatrixChoiceKey[] = []
 
         matrixRadioGrid.value.forEach((row) => {
@@ -536,12 +529,12 @@ watch(showMatrixAnswers, () => {
 })
 
 watch(selectedMatrixChoices, () => {
-    if ((reviewMode || showMatrixAnswers.value) && question.value.type === 'Matrix Checkbox') {
+    if ((reviewMode.value || showMatrixAnswers.value) && question.value.type === 'Matrix Checkbox') {
         const selectedCheckboxGrid = convertSelectedMatrixChoiceToCheckboxGrid() 
         matrixCheckboxGrid.value = selectedCheckboxGrid ? selectedCheckboxGrid : defaultCheckboxGrid.value
     }
 
-    if ((reviewMode || showMatrixAnswers.value) && question.value.type === 'Matrix Radio Button') {
+    if ((reviewMode.value || showMatrixAnswers.value) && question.value.type === 'Matrix Radio Button') {
         const selectedRadioBtnGrid = convertSelectedMatrixChoiceToRadioBtnGrid() 
         matrixRadioGrid.value = selectedRadioBtnGrid
     }
@@ -549,8 +542,8 @@ watch(selectedMatrixChoices, () => {
 </script>
 
 <style lang="scss">
-@import '../../../styles/colors';
-@import '../../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-question-mobile-matrix-choices-container {
     width: 100%;

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

@@ -4,15 +4,17 @@ import { dark as vDark } from '../../../directives'
 import type { TMatrixChoiceKey } from '../question'
 
 interface Props {
-    isDarkMode: boolean
+    isDarkMode?: boolean
     choices?: TMatrixChoiceKey[]
     labels?: string[]
-    showAnswers: boolean
-    disabled: boolean
+    showAnswers?: boolean
+    disabled?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
     isDarkMode: false,
+    choices: () => [],
+    labels: () => [],
     showAnswers: false,
     disabled: false,
 })
@@ -91,8 +93,8 @@ const stripHtmlTags = (string?: string) => {
 </template>
 
 <style lang="scss" scoped>
-@import '../../../styles/breakpoints';
-@import '../../../styles/colors';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-mobile-matrix-radio-group {
     list-style: none;

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

@@ -102,8 +102,8 @@ const emitMoveFocusToPrompt = () => {
 </script>
 
 <style lang="scss">
-@import '../../../styles/colors';
-@import '../../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-question-passage-and-image {
     position: relative;

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

@@ -141,8 +141,9 @@ const togglePassageImageLongAltDropdown = () => {
 </script>
 
 <style lang="scss">
-@import '../../../styles/colors';
-@import '../../../styles/breakpoints';
+@use 'sass:color';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-question-passage-and-image-dropdown {
     &__passage-and-image-dropdown-btn {
@@ -161,11 +162,11 @@ const togglePassageImageLongAltDropdown = () => {
 
         &:hover {
             .uikit-question-passage-and-image-dropdown__passage-and-image-dropdown-text {
-                color: mix($brand-blue, black, 90%);
+                color: color.mix($brand-blue, black, 90%);
             }
 
             .uikit-question-passage-and-image-dropdown__passage-and-image-dropdown-arrow {
-                color: mix($brand-blue, black, 90%);
+                color: color.mix($brand-blue, black, 90%);
             }
 
             &::before {
@@ -261,7 +262,7 @@ const togglePassageImageLongAltDropdown = () => {
         line-height: 24px;
         font-size: 16px;
         font-weight: 400;
-        letter-spacing: -0.1;
+        letter-spacing: -0.1px;
 
         &--mobile {
             line-height: 24px;
@@ -315,7 +316,7 @@ const togglePassageImageLongAltDropdown = () => {
         font-size: 15px;
         line-height: 22px;
         font-weight: 500;
-        letter-spacing: -0.2;
+        letter-spacing: -0.2px;
 
         &--dark {
             color: $fog;

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

@@ -66,8 +66,8 @@ const emitUpgradeClick = () => {
 </script>
 
 <style lang="scss">
-@import '../../../styles/colors';
-@import '../../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-question-paywall {
     width: 100%;

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

@@ -65,7 +65,6 @@ import { useQuestionContext } from './composables'
 
 const {
     // questionEl is used by the breakpoint directive
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     questionEl,
     breakpointsWithEl,
     quizLength,
@@ -85,8 +84,8 @@ defineExpose({
 </script>
 
 <style lang="scss">
-@import '../../../styles/colors';
-@import '../../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-question-context {
     display: flex;

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

@@ -42,8 +42,8 @@ const {
 </script>
 
 <style lang="scss">
-@import '../../../styles/colors';
-@import '../../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-question-stats-summary {
     margin-top: 24px;

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

@@ -180,8 +180,8 @@ const toggleSummaryExplanationImageLongAlt = () => {
 </script>
 
 <style lang="scss">
-@import '../../../styles/colors';
-@import '../../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-question-summary {
     position: relative;

package/lib/components/Quiz/Question.vue

@@ -167,22 +167,22 @@
                         <slot name="explanationTopExperiment"></slot>
                     </template>
                     <template #motivationalMoment="{
-                        isCorrect,
+                        isCorrect:isCorrectMM,
                         choiceKey,
-                        showAnswers,
-                        answerKeys,
+                        showAnswers:showAnswersMM,
+                        answerKeys:answerKeysMM,
                     }">
                         <slot 
                             name="motivationalMoment"
-                            :showAnswers="showAnswers"
-                            :answerKeys="answerKeys"
+                            :showAnswers="showAnswersMM"
+                            :answerKeys="answerKeysMM"
                             :choiceKey="choiceKey"
-                            :isCorrect="isCorrect"
+                            :isCorrect="isCorrectMM"
                         />
                     </template>
                     <template #showNamesTable="{
                         choiceKey,
-                    }" >
+                    }">
                         <slot 
                             name="showNamesTable"
                             :choiceKey="choiceKey"
@@ -200,17 +200,17 @@
                     @emitSelectedMatrixChoice="selectMatrixChoice"
                 > 
                     <template #motivationalMoment="{
-                        isCorrect,
+                        isCorrect:isCorrectMM,
                         choiceKey,
-                        showAnswers,
-                        answerKeys,
+                        showAnswers:showAnswersMM,
+                        answerKeys:answerKeysMM,
                     }">
                         <slot 
                             name="motivationalMoment"
-                            :showAnswers="showAnswers"
-                            :answerKeys="answerKeys"
+                            :showAnswers="showAnswersMM"
+                            :answerKeys="answerKeysMM"
                             :choiceKey="choiceKey"
-                            :isCorrect="isCorrect"
+                            :isCorrect="isCorrectMM"
                         />
                     </template>
                     <template #explanationBottomExperiment>
@@ -225,18 +225,18 @@
                 > 
                     <template
                         #motivationalMoment="{
-                            isCorrect,
+                            isCorrect:isCorrectMM,
                             choiceKey,
-                            showAnswers,
-                            answerKeys,
+                            showAnswers:showAnswersMM,
+                            answerKeys:answerKeysMM,
                         }"
                     >
                         <slot 
                             name="motivationalMoment"
-                            :showAnswers="showAnswers"
-                            :answerKeys="answerKeys"
+                            :showAnswers="showAnswersMM"
+                            :answerKeys="answerKeysMM"
                             :choiceKey="choiceKey"
-                            :isCorrect="isCorrect"
+                            :isCorrect="isCorrectMM"
                         />
                     </template>
                     <template #explanationBottomExperiment>
@@ -424,7 +424,7 @@ const props = withDefaults(defineProps<{
     hideReferences?: boolean
     isTeachReview?: boolean
     isTeachGroupReview?: boolean
-    keywordDefinitions: { keyword: string; definition: string }[]
+    keywordDefinitions?: { keyword: string; definition: string }[]
 }>(), {
     imageUrlPrefix: '',
     quizMode: 'quick10',
@@ -621,7 +621,7 @@ const passageAndImageTitle = computed(() => {
     } else if (!props.question.passage && passageImageUrl.value) {
         return 'Image'
     } else {
-        return props.question.passageLabel ? `${props.question.passageLabel}` :
+        return props.question.passageLabel ? props.question.passageLabel :
             'Passage'
     }
 })
@@ -737,7 +737,7 @@ const isMatrixQuestionAnswered = computed(() => {
     // Matrix questions are answered if each row has a selected choice
     if (isMatrixQuestion.value) {
         const answeredRowNums = selectedMatrixChoices.value.map(choice => {
-            if (choice as TMatrixChoiceKey) {
+            if (choice) {
                 return Number(choice.split('_')[0]?.slice(1))
             }
             return
@@ -834,7 +834,7 @@ const moveFocusToPassage = () => {
     }
 }
 
-const moveFocusToPrompt = async () => {
+const moveFocusToPrompt = () => {
     promptEl?.value?.focus()
 }
 
@@ -861,7 +861,7 @@ const startReviewMode = () => {
     } else {
         showMatrixAnswers.value = true
         showExplanation.value = props.defaultShowExplanation === null ? true : props.defaultShowExplanation
-        selectedMatrixChoices.value = matrixAnswerKeys.value as TMatrixChoiceKey[]
+        selectedMatrixChoices.value = matrixAnswerKeys.value
     }
 }
 
@@ -956,7 +956,7 @@ const handleTouchMove = (event: TouchEvent) => {
     }
 }
 
-const handleTouchEnd = (option: {choiceKey: TChoiceKey; event: TouchEvent}) => {
+const handleTouchEnd = (option: { choiceKey: TChoiceKey; event: TouchEvent }) => {
     const choiceKey = option.choiceKey
     const event = option.event
     const targetEl = event.target as Ref
@@ -1237,7 +1237,7 @@ if (isMatrixQuestion.value && props.previousMatrixChoices) {
     updateSelectedMatrixChoices(props.previousMatrixChoices)
 }
 
-onMounted(async () => {
+onMounted(() => {
     questionEl.value = props.containerEl || questionRef.value
 
     if (props.initialShowAnswers) {
@@ -1315,8 +1315,8 @@ provide(InjectionKeys.isTeachGroupReviewKey, isTeachGroupReview)
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
-@import '../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-question {
     position: relative;
@@ -1812,6 +1812,7 @@ provide(InjectionKeys.isTeachGroupReviewKey, isTeachGroupReview)
 
     &__matrix-choices-container {
         display: block;
+
         @include breakpoint(black-bear) {
             display: none;
         }

package/lib/components/Quiz/QuizContainer.vue

@@ -1,6 +1,6 @@
 <template>
     <div
-        ref="quiz-container"
+        ref="quiz-container-ref"
         v-breakpoint
         v-dark="isDarkMode"
         class="uikit-quiz-container"
@@ -47,49 +47,43 @@
     </div>
 </template>
 
-<script lang="ts">
-import { breakpoint, dark } from '../../directives'
-import { Component, Prop, Vue } from 'vue-facing-decorator'
-import Icon from '../Icons/Icon.vue'
-
-@Component({
-    directives: {
-        breakpoint,
-        dark,
-    },
-    components: {
-        Icon,
-    },
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, useTemplateRef } from 'vue'
+import { dark as vDark, breakpoint as vBreakpoint } from '../../directives'
+
+withDefaults(defineProps<{
+    showSide?: boolean
+    isDarkMode?: boolean
+    customHeaderStyles?: Record<string, string>
+    customMainStyles?: Record<string, string>
+    customFooterStyles?: Record<string, string>
+}>(), {
+    showSide: false,
+    isDarkMode: false,
+    customHeaderStyles: () => ({}),
+    customMainStyles: () => ({}),
+    customFooterStyles: () => ({}),
 })
-export default class QuizContainer extends Vue {
-    @Prop({ default: false }) showSide!: boolean
-    @Prop({ default: false }) isDarkMode!: boolean
-    @Prop({ default: () => ({}) }) customHeaderStyles!: Record<string, string>
-    @Prop({ default: () => ({}) }) customMainStyles!: Record<string, string>
-    @Prop({ default: () => ({}) }) customFooterStyles!: Record<string, string>
-
-    quizContainerEl: HTMLElement | null = null
-
-    beforeUnmount () {
-        const bodyEl = document.getElementsByTagName('body')[0]
-        if (bodyEl) {
-            bodyEl.style.overflow = ''
-        }
+
+const quizContainerEl = useTemplateRef('quiz-container-ref')
+
+onBeforeUnmount(() => {
+    const bodyEl = document.getElementsByTagName('body')[0]
+    if (bodyEl) {
+        bodyEl.style.overflow = ''
     }
+})
 
-    mounted () {
-        const bodyEl = document.getElementsByTagName('body')[0]
-        if (bodyEl) {
-            bodyEl.style.overflow = 'hidden'
-        }
-        const quizContainerEl = this.$refs['quiz-container'] as HTMLElement || null 
-        this.quizContainerEl = quizContainerEl
+onMounted(() => {
+    const bodyEl = document.getElementsByTagName('body')[0]
+    if (bodyEl) {
+        bodyEl.style.overflow = 'hidden'
     }
-}
+})
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
+@use '@/styles/colors' as *;
 
 .uikit-quiz-container {
     display: flex;