@pocketprep/ui-kit 3.4.90 → 3.5.1

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

@@ -1,7 +1,7 @@
 <template>
     <div
         v-dark="isDarkMode"
-        v-breakpoint:questionEl="breakpoints"
+        v-breakpoint="breakpointsWithEl"
         ref="uikit-question-summary"
         class="uikit-question-summary"
         :class="{
@@ -13,7 +13,7 @@
             {{ isQuestionCorrect ? 'Correct': isUnanswered ? 'Unanswered' : 'Incorrect' }}
         </div>
         <PocketButton
-            v-breakpoint:questionEl="breakpoints"
+            v-breakpoint="breakpointsWithEl"
             type="tertiary-small"
             class="uikit-question-summary__summary-toggle-explanation"
             :class="{ 'uikit-question-summary__summary-toggle-explanation--review-mode': reviewMode }"
@@ -28,7 +28,7 @@
                 tabindex="-1"
             >{{ showExplanation ? 'Hide' : 'Show' }} Explanation</span>
             <Icon
-                v-breakpoint:questionEl="breakpoints"
+                v-breakpoint="breakpointsWithEl"
                 type="accordionArrow"
                 class="uikit-question-summary__summary-toggle-explanation-icon"
                 :class="{
@@ -38,7 +38,7 @@
         </PocketButton>
         <div
             v-if="showExplanation"
-            v-breakpoint:questionEl="breakpoints"
+            v-breakpoint="breakpointsWithEl"
             ref="uikit-question-summary__summary-dropdown-explanation"
             class="uikit-question-summary__summary-dropdown-explanation"
             :class="{
@@ -61,7 +61,7 @@
             >
             <PocketButton
                 v-if="explanationImageLongAlt"
-                v-breakpoint:questionEl="breakpoints"
+                v-breakpoint="breakpointsWithEl"
                 type="tertiary-small"
                 class="uikit-question-summary__toggle-summary-dropdown-explanation-img-description"
                 :class="{
@@ -91,7 +91,7 @@
                 v-if="showExplanationImageLongAlt"
                 ref="uikit-question-summary__summary-dropdown-explanation-img-description"
                 v-dark="isDarkMode"
-                v-breakpoint:questionEl="breakpoints"
+                v-breakpoint="breakpointsWithEl"
                 class="uikit-question-summary__summary-dropdown-explanation-img-description"
                 tabindex="-1"
                 v-html="explanationImageLongAlt"
@@ -121,77 +121,67 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Component, Emit, Prop, Vue } from 'vue-facing-decorator'
-import type { Study } from '@pocketprep/types'
+<script setup lang="ts">
+import { computed } from 'vue'
 import Icon from '../../Icons/Icon.vue'
 import PocketButton from '../../Buttons/Button.vue'
-import { breakpoint, dark } from '../../../directives'
-import type { TBreakPointsObject } from './../question'
 import { highlightKeywordsInText } from '../../../utils'
-
-@Component({
-    components: {
-        Icon,
-        PocketButton,
-    },
-    directives: {
-        dark,
-        breakpoint,
-    },
+import { dark as vDark, breakpoint as vBreakpoint } from '../../../directives'
+import { useQuestionContext } from './composables'
+
+const emit = defineEmits<{
+    'toggleSummaryExplanation': []
+    'toggleSummaryExplanationImageLongAlt': []
+}>()
+
+const {
+    // questionEl is used by the breakpoint directive
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    questionEl,
+    question,
+    showExplanation,
+    showExplanationImageLongAlt,
+    explanationImageUrl,
+    explanationImageAlt,
+    explanationImageLongAlt,
+    reference,
+    hideReferences,
+    isCorrect,
+    isMatrixQuestionCorrect,
+    isUnanswered,
+    reviewMode,
+    isDarkMode,
+    isMatrixQuestion,
+    breakpointsWithEl,
+    keywordDefinitions,
+} = useQuestionContext()
+
+const isQuestionCorrect = computed(() => {
+    return (!isMatrixQuestion.value && isCorrect.value) || 
+        (isMatrixQuestion.value && isMatrixQuestionCorrect.value && !isUnanswered.value)
 })
-export default class Summary extends Vue {
-    @Prop() question!: Study.Class.QuestionJSON
-    @Prop({ default: false }) showExplanation!: boolean
-    @Prop({ default: false }) showExplanationImageLongAlt!: boolean
-    @Prop({ default: null }) explanationImageUrl!: string | null
-    @Prop({ default: undefined }) explanationImageAlt!: string | undefined
-    @Prop({ default: undefined }) explanationImageLongAlt!: string | undefined
-    @Prop({ default: undefined }) reference!: string | undefined
-    @Prop({ default: false }) hideReferences!: boolean
-    @Prop({ default: false }) isCorrect!: boolean
-    @Prop({ default: false }) isMatrixQuestionCorrect!: boolean
-    @Prop({ default: false }) isUnanswered!: boolean
-    @Prop({ default: false }) reviewMode!: boolean
-    @Prop({ default: false }) isDarkMode!: boolean
-    @Prop({ default: false }) isMatrixQuestion!: boolean
-    @Prop({ default: null }) questionEl!: Element | null
-    @Prop({ default: {
-        'mobile': 767,
-        'tablet-portrait': 1023,
-        'tablet-landscape': 1439,
-    } }) breakpoints!: TBreakPointsObject
-    @Prop({ default: [] }) keywordDefinitions!: { keyword: string; definition: string }[]
-
-    get isQuestionCorrect () {
-        return (!this.isMatrixQuestion && this.isCorrect) || 
-            (this.isMatrixQuestion && this.isMatrixQuestionCorrect && !this.isUnanswered)
-    }
 
-    get summary () {
-        return highlightKeywordsInText({
-            text: this.question.explanation || '', 
-            keywordDefinitions: this.keywordDefinitions, 
-            isDarkMode: this.isDarkMode,
-            location: 'explanation',
-        })
-    }
+const summary = computed(() => {
+    return highlightKeywordsInText({
+        text: question.value.explanation || '', 
+        keywordDefinitions: keywordDefinitions.value,
+        isDarkMode: isDarkMode.value,
+        location: 'explanation',
+    })
+})
 
-    @Emit('toggleSummaryExplanation')
-    toggleSummaryExplanation () {
-        return
-    }
+const toggleSummaryExplanation = () => {
+    emit('toggleSummaryExplanation')
+}
 
-    @Emit('toggleSummaryExplanationImageLongAlt')
-    toggleSummaryExplanationImageLongAlt () {
-        return
-    }
+const toggleSummaryExplanationImageLongAlt = () => {
+    emit('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/composables.ts

@@ -0,0 +1,71 @@
+import { inject, ref } from 'vue'
+import * as InjectionKeys from './injectionSymbols'
+import type { TChoice, TChoiceKey, TMatrixChoiceKey } from '../question'
+
+export const useQuestionContext = () => {
+    const question = inject(InjectionKeys.questionKey)
+    if (!question) {
+        throw new Error('useQuestionContext: no question provided')
+    }
+    const choiceScores = inject(InjectionKeys.choiceScoresKey)
+    if (!choiceScores) {
+        throw new Error('useQuestionContext: no choiceScores provided')
+    }
+    return {
+        question,
+        choiceScores,
+        choices: inject(InjectionKeys.choicesKey, ref<TChoice[]>([])),
+        questionEl: inject(InjectionKeys.questionElKey, ref(null)),
+        breakpointsWithEl: inject(InjectionKeys.breakpointsWithElKey, ref({
+            breakpoints: {
+                'mobile': 767,
+                'tablet-portrait': 1023,
+                'tablet-landscape': 1439,
+            },
+            containerEl: null,
+        })),
+        quizLength: inject(InjectionKeys.quizLengthKey),
+        quizMode: inject(InjectionKeys.quizModeKey, ref('quick10')),
+        questionNumber: inject(InjectionKeys.questionNumberKey),
+        isDarkMode: inject(InjectionKeys.isDarkModeKey, ref(false)),
+        isCorrect: inject(InjectionKeys.isCorrectKey, ref(false)),
+        contextIconType: inject(InjectionKeys.contextIconTypeKey),
+        showAnswers: inject(InjectionKeys.showAnswersKey, ref(false)),
+        showMatrixAnswers: inject(InjectionKeys.showMatrixAnswersKey, ref(false)),
+        imageUrlPrefix: inject(InjectionKeys.imageUrlPrefixKey, ref('')),
+        passageImageUrl: inject(InjectionKeys.passageImageUrlKey, ref<string | null>(null)),
+        passageImageAlt: inject(InjectionKeys.passageImageAltKey, ref<string | undefined>('')),
+        passageImageLongAlt: inject(InjectionKeys.passageImageLongAltKey, ref<string | undefined>('')),
+        showPassageImageLongAlt: inject(InjectionKeys.showPassageImageLongAltKey, ref(false)),
+        passageAndImageTitle: inject(InjectionKeys.passageAndImageTitleKey, ref('Passage')),
+        showExplanation: inject(InjectionKeys.showExplanationKey, ref(false)),
+        isMCR: inject(InjectionKeys.isMCRKey, ref(false)),
+        isUnanswered: inject(InjectionKeys.isUnansweredKey, ref(false)),
+        answerKeys: inject(InjectionKeys.answerKeysKey, ref<TChoiceKey[]>([])),
+        hoverChoiceKey: inject(InjectionKeys.hoverChoiceKeyKey, ref(null)),
+        focusChoiceKey: inject(InjectionKeys.focusChoiceKeyKey, ref(null)),
+        selectedChoices: inject(InjectionKeys.selectedChoicesKey, ref<TChoiceKey[]>([])),
+        distractorKeys: inject(InjectionKeys.distractorKeysKey, ref<TChoiceKey[]>([])),
+        choiceStrikes: inject(InjectionKeys.choiceStrikesKey, ref<TChoiceKey[]>([])),
+        globalMetrics: inject(InjectionKeys.globalMetricsKey, ref(null)),
+        reviewMode: inject(InjectionKeys.reviewModeKey, ref(false)),
+        showExplanationImageLongAlt: inject(InjectionKeys.showExplanationImageLongAltKey, ref(false)),
+        explanationImageUrl: inject(InjectionKeys.explanationImageUrlKey, ref<string | null>(null)),
+        explanationImageAlt: inject(InjectionKeys.explanationImageAltKey, ref<string | undefined>(undefined)),
+        explanationImageLongAlt: inject(InjectionKeys.explanationImageLongAltKey, ref<string | undefined>(undefined)),
+        reference: inject(InjectionKeys.referenceKey, ref<string | undefined>(undefined)),
+        hideReferences: inject(InjectionKeys.hideReferencesKey, ref(false)),
+        keywordDefinitions: inject(InjectionKeys.keywordDefinitionsKey, ref([])),
+        showPaywall: inject(InjectionKeys.showPaywallKey, ref(false)),
+        showPassageAndImage: inject(InjectionKeys.showPassageAndImageKey, ref(false)),
+        isMatrixQuestion: inject(InjectionKeys.isMatrixQuestionKey, ref(false)),
+        matrixChoiceScores: inject(InjectionKeys.matrixChoiceScoresKey, ref({
+            totalAnswered: 0,
+            answeredCorrectly: 0,
+        })),
+        isMatrixQuestionCorrect: inject(InjectionKeys.isMatrixQuestionCorrectKey, ref(false)),
+        matrixAnswerKeys: inject(InjectionKeys.matrixAnswerKeysKey, ref<TMatrixChoiceKey[]>([])),
+        selectedMatrixChoices: inject(InjectionKeys.selectedMatrixChoicesKey, ref([])),
+        isTeachGroupReview: inject(InjectionKeys.isTeachGroupReviewKey, ref(false)),
+    }
+}

package/lib/components/Quiz/Question/injectionSymbols.ts

@@ -0,0 +1,69 @@
+import type { Study } from '@pocketprep/types'
+import type {
+    TChoice,
+    TChoiceKey,
+    TChoiceScores,
+    TContextIcon,
+    TMatrixChoiceKey,
+    TMatrixChoiceScores,
+    TQuizMode,
+} from '../question'
+import type { ComputedRef, InjectionKey, Ref } from 'vue'
+
+export const questionKey = Symbol('question') as InjectionKey<ComputedRef<Study.Class.QuestionJSON>>
+export const choicesKey = Symbol('choices') as InjectionKey<ComputedRef<TChoice[]>>
+export const questionElKey = Symbol('questionEl') as InjectionKey<Ref<Element | null>>
+export const breakpointsWithElKey = Symbol('breakpointsWithEl') as InjectionKey<Ref<{
+    breakpoints: {
+        mobile: number
+        'tablet-portrait': number
+        'tablet-landscape': number
+    }
+    containerEl: HTMLElement | null
+}>>
+export const quizLengthKey = Symbol('quizLength') as InjectionKey<Ref<number>>
+export const quizModeKey = Symbol('quizMode') as InjectionKey<Ref<TQuizMode>>
+export const questionNumberKey = Symbol('questionNumber') as InjectionKey<Ref<number>>
+export const isDarkModeKey = Symbol('isDarkMode') as InjectionKey<Ref<boolean>>
+export const isCorrectKey = Symbol('isCorrect') as InjectionKey<ComputedRef<boolean>>
+export const contextIconTypeKey = Symbol('contextIconType') as InjectionKey<ComputedRef<TContextIcon>>
+export const showAnswersKey = Symbol('showAnswers') as InjectionKey<Ref<boolean>>
+export const showMatrixAnswersKey = Symbol('showMatrixAnswers') as InjectionKey<Ref<boolean>>
+export const imageUrlPrefixKey = Symbol('imageUrlPrefix') as InjectionKey<Ref<string>>
+export const passageImageUrlKey = Symbol('passageImageUrl') as InjectionKey<ComputedRef<string | null>>
+export const passageImageAltKey = Symbol('passageImageAlt') as InjectionKey<ComputedRef<string | undefined>>
+export const passageImageLongAltKey = Symbol('passageImageLongAlt') as InjectionKey<ComputedRef<string | undefined>>
+export const showPassageImageLongAltKey = Symbol('showPassageImageLongAlt') as InjectionKey<Ref<boolean>>
+export const passageAndImageTitleKey = Symbol('passageAndImageTitle') as InjectionKey<ComputedRef<string>>
+export const showExplanationKey = Symbol('showExplanation') as InjectionKey<Ref<boolean>>
+export const isMCRKey = Symbol('isMCR') as InjectionKey<Ref<boolean>>
+export const isUnansweredKey = Symbol('isUnanswered') as InjectionKey<Ref<boolean>>
+export const answerKeysKey = Symbol('answerKeys') as InjectionKey<Ref<TChoiceKey[]>>
+export const hoverChoiceKeyKey = Symbol('hoverChoiceKey') as InjectionKey<Ref<TChoiceKey | null>>
+export const focusChoiceKeyKey = Symbol('focusChoiceKey') as InjectionKey<Ref<TChoiceKey | null>>
+export const selectedChoicesKey = Symbol('selectedChoices') as InjectionKey<Ref<TChoiceKey[]>>
+export const distractorKeysKey = Symbol('distractorKeys') as InjectionKey<ComputedRef<TChoiceKey[]>>
+export const choiceStrikesKey = Symbol('choiceStrikes') as InjectionKey<Ref<TChoiceKey[]>>
+export const choiceScoresKey = Symbol('choiceScores') as InjectionKey<ComputedRef<TChoiceScores>>
+export const globalMetricsKey = Symbol('globalMetrics') as
+    InjectionKey<Ref<Study.Class.GlobalQuestionMetricJSON | null>>
+export const reviewModeKey = Symbol('reviewMode') as InjectionKey<Ref<boolean>>
+export const showExplanationImageLongAltKey = Symbol('showExplanationImageLongAlt') as InjectionKey<Ref<boolean>>
+export const explanationImageUrlKey = Symbol('explanationImageUrl') as InjectionKey<ComputedRef<string | null>>
+export const explanationImageAltKey = Symbol('explanationImageAlt') as InjectionKey<ComputedRef<string | undefined>>
+export const explanationImageLongAltKey = Symbol('explanationImageLongAlt') as
+    InjectionKey<ComputedRef<string | undefined>>
+export const referenceKey = Symbol('reference') as InjectionKey<ComputedRef<string | undefined>>
+export const hideReferencesKey = Symbol('hideReferences') as InjectionKey<Ref<boolean>>
+export const keywordDefinitionsKey = Symbol('keywordDefinitions') as InjectionKey<Ref<{
+    keyword: string
+    definition: string
+}[]>>
+export const showPaywallKey = Symbol('showPaywall') as InjectionKey<Ref<boolean>>
+export const showPassageAndImageKey = Symbol('showPassageAndImage') as InjectionKey<ComputedRef<boolean>>
+export const isMatrixQuestionKey = Symbol('isMatrixQuestion') as InjectionKey<ComputedRef<boolean>>
+export const matrixChoiceScoresKey = Symbol('matrixChoiceScores') as InjectionKey<ComputedRef<TMatrixChoiceScores>>
+export const isMatrixQuestionCorrectKey = Symbol('isMatrixQuestionCorrect') as InjectionKey<ComputedRef<boolean>>
+export const matrixAnswerKeysKey = Symbol('matrixAnswerKeys') as InjectionKey<ComputedRef<TMatrixChoiceKey[]>>
+export const selectedMatrixChoicesKey = Symbol('selectedMatrixChoices') as InjectionKey<Ref<TMatrixChoiceKey[]>>
+export const isTeachGroupReviewKey = Symbol('isTeachGroupReview') as InjectionKey<Ref<boolean>>