@pocketprep/ui-kit 3.4.89 → 3.5.0

package/lib/components/Bundles/BundleSearch.vue

@@ -1,13 +1,16 @@
 <template>
     <div
         ref="uikit-exam-search"
-        v-breakpoint="{ small: smallBreakpoint }"
+        v-breakpoint="{ breakpoints: { small: smallBreakpoint } }"
         class="uikit-exam-search"
         :class="{ 'uikit-exam-search--bundle-selected': selectedBundle }" 
     >
         <Search
             v-model="examSearchString"
-            v-breakpoint:examSearchContainer="{ small: smallBreakpoint }" 
+            v-breakpoint="{
+                breakpoints: { small: smallBreakpoint },
+                containerEl: examSearchContainer
+            }" 
             class="uikit-exam-search__search"
             placeholder="Search exams"
             type="white"
@@ -15,7 +18,10 @@
         />
         <div 
             v-if="examSearchString" 
-            v-breakpoint:examSearchContainer="{ small: smallBreakpoint }"
+            v-breakpoint="{
+                breakpoints: { small: smallBreakpoint },
+                containerEl: examSearchContainer
+            }" 
             class="uikit-exam-search__search-results"
         >
             <div class="uikit-exam-search__search-results-header">
@@ -40,7 +46,10 @@
                 <ExamCard
                     v-for="exam in filteredExams"
                     :key="exam.objectId"
-                    v-breakpoint:examSearchContainer="{ small: smallBreakpoint }"
+                    v-breakpoint="{
+                        breakpoints: { small: smallBreakpoint },
+                        containerEl: examSearchContainer
+                    }" 
                     :is-premium="premiumExamIds.includes(exam.objectId)"
                     :exam="exam"
                     :bundle="exam.bundle" 
@@ -58,7 +67,10 @@
             :class="{ 'uikit-exam-search__bundle-search--bundle-selected': selectedBundle }"
         >
             <div
-                v-breakpoint:examSearchContainer="{ small: smallBreakpoint }"
+                v-breakpoint="{
+                    breakpoints: { small: smallBreakpoint },
+                    containerEl: examSearchContainer
+                }" 
                 class="uikit-exam-search__bundle-list"
             >
                 <div class="uikit-exam-search__browse-industry-text">
@@ -73,15 +85,24 @@
             </div>
             <div
                 v-if="selectedBundle"
-                v-breakpoint:examSearchContainer="{ small: smallBreakpoint }"
+                v-breakpoint="{
+                    breakpoints: { small: smallBreakpoint },
+                    containerEl: examSearchContainer
+                }" 
                 class="uikit-exam-search__bundle-exam-container"
             >
                 <div 
-                    v-breakpoint:examSearchContainer="{ small: smallBreakpoint }" 
+                    v-breakpoint="{
+                        breakpoints: { small: smallBreakpoint },
+                        containerEl: examSearchContainer
+                    }" 
                     class="uikit-exam-search__bundle-exam-container-top"
                 >
                     <PocketButton
-                        v-breakpoint:examSearchContainer="{ small: smallBreakpoint }"
+                        v-breakpoint="{
+                            breakpoints: { small: smallBreakpoint },
+                            containerEl: examSearchContainer
+                        }" 
                         class="uikit-exam-search__bundle-exam-back"
                         :is-dark-mode="isDarkMode"
                         type="tertiary"
@@ -90,7 +111,10 @@
                         <Icon type="arrow" /> Back to Browse
                     </PocketButton>
                     <span 
-                        v-breakpoint:examSearchContainer="{ small: smallBreakpoint }" 
+                        v-breakpoint="{
+                            breakpoints: { small: smallBreakpoint },
+                            containerEl: examSearchContainer
+                        }" 
                         class="uikit-exam-search__bundle-exam-count"
                         tabindex="-1"
                     >
@@ -110,7 +134,10 @@
                         <ExamCard
                             v-for="exam in selectedBundleExams"
                             :key="exam.objectId"
-                            v-breakpoint:examSearchContainer="{ small: smallBreakpoint }"
+                            v-breakpoint="{
+                                breakpoints: { small: smallBreakpoint },
+                                containerEl: examSearchContainer
+                            }" 
                             :exam="exam"
                             :is-dark-mode="isDarkMode"
                             :bundle="exam.bundle"
@@ -120,7 +147,10 @@
                             @select="selectExam(exam)"
                         />
                         <div 
-                            v-breakpoint:examSearchContainer="{ small: smallBreakpoint }" 
+                            v-breakpoint="{
+                                breakpoints: { small: smallBreakpoint },
+                                containerEl: examSearchContainer
+                            }" 
                             class="uikit-exam-search__exam-list-padding"
                         />
                     </div>

package/lib/components/Pagination/QuestionReviewPagination.vue

@@ -40,30 +40,32 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Vue, Component, Prop, Emit } from 'vue-facing-decorator'
+<script setup lang="ts">
+import { computed } from 'vue'
 import Icon from '../Icons/Icon.vue'
 
-@Component({
-    components: {
-        Icon,
-    },
+const props = withDefaults(defineProps<{
+    currentPage: number
+    total: number
+}>(), {
+    currentPage: 0,
+    total: 0,
 })
-export default class QuestionReviewPagination extends Vue {
-    @Prop({ default: 0 }) currentPage!: number
-    @Prop() total!: number
 
-    get nextPageDisabled () {
-        return this.currentPage >= Math.floor(this.total - 1)
-    }
+const emit = defineEmits<{
+    changePage: [ pageNum: number ]
+}>()
 
-    @Emit('changePage')
-    changePage (direction: 'next' | 'previous') {
-        if (direction === 'next') {
-            return this.nextPageDisabled ? this.currentPage : this.currentPage + 1
-        } else {
-            return Math.max(0, this.currentPage - 1)
-        }
+const nextPageDisabled = computed(() => {
+    return props.currentPage >= Math.floor(props.total - 1)
+})
+
+const changePage = (direction: 'next' | 'previous') => {
+    if (direction === 'next') {
+        const pageNum = nextPageDisabled.value ? props.currentPage : props.currentPage + 1
+        emit('changePage', pageNum)
+    } else {
+        emit('changePage', Math.max(0, props.currentPage - 1))
     }
 }
 </script>

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

@@ -6,7 +6,7 @@
         ref="uikit-question-choices-container"
     >
         <div
-            ref="choices"
+            ref="choicesRef"
             v-dark="isDarkMode"
             class="uikit-question-choices-container__choice-container"
             :class="{
@@ -40,7 +40,7 @@
         >
             <div
                 v-if="!reviewMode"
-                v-breakpoint:questionEl="breakpoints"
+                v-breakpoint="breakpointsWithEl"
                 v-dark="isDarkMode"
                 class="uikit-question-choices-container__choice-letter"
                 :class="!isMCR && {
@@ -60,7 +60,7 @@
             <div
                 :ref="`choice-${choice.key}`"
                 v-dark="isDarkMode"
-                v-breakpoint:questionEl="breakpoints"
+                v-breakpoint="breakpointsWithEl"
                 class="uikit-question-choices-container__choice"
                 :class="{
                     'uikit-question-choices-container__choice--strike': showAnswers
@@ -111,7 +111,7 @@
                         'uikit-question-choices-container__choice-text--review-mode':
                             reviewMode,
                     }"
-                    v-breakpoint:questionEl="breakpoints"
+                    v-breakpoint="breakpointsWithEl"
                     :tabindex="showAnswers ? -1 : 0"
                     :role="isMCR
                         ? 'checkbox'
@@ -129,7 +129,7 @@
                 />
                 <PocketButton
                     v-if="!isMCR && showAnswers && answerKeys.includes(choice.key)"
-                    v-breakpoint:questionEl="breakpoints"
+                    v-breakpoint="breakpointsWithEl"
                     type="tertiary-small"
                     class="uikit-question-choices-container__toggle-explanation"
                     :class="{ 'uikit-question-choices-container__toggle-explanation--review-mode': reviewMode }"
@@ -144,7 +144,7 @@
                         tabindex="-1"
                     >{{ showExplanation ? 'Hide' : 'Show' }} Explanation</span>
                     <Icon
-                        v-breakpoint:questionEl="breakpoints"
+                        v-breakpoint="breakpointsWithEl"
                         class="uikit-question-choices-container__toggle-explanation-icon"
                         :class="{
                             'uikit-question-choices-container__toggle-explanation-icon--up': showExplanation,
@@ -156,22 +156,6 @@
                     v-if="!isMCR && showAnswers && answerKeys.includes(choice.key) && showExplanation"
                     ref="uikit-question-choices-container__dropdown-explanation"
                     class="uikit-question-choices-container__dropdown-explanation"
-                    :question="question"
-                    :answer-keys="answerKeys"
-                    :choice="choice"
-                    :global-metrics="globalMetrics"
-                    :show-answers="showAnswers"
-                    :is-MCR="isMCR"
-                    :show-explanation-image-long-alt="showExplanationImageLongAlt"
-                    :explanation-image-url="explanationImageUrl"
-                    :explanation-image-alt="explanationImageAlt"
-                    :explanation-image-long-alt="explanationImageLongAlt"
-                    :reference="reference"
-                    :hide-references="hideReferences"
-                    :is-dark-mode="isDarkMode"
-                    :question-el="questionEl"
-                    :breakpoints="breakpoints"
-                    :keyword-definitions="keywordDefinitions"
                     @toggleDropdownExplanationImageLongAlt="toggleDropdownExplanationImageLongAlt"
                     @click="handleClick"
                 >
@@ -186,7 +170,7 @@
             <template v-if="!globalMetrics">
                 <div
                     v-if="!showAnswers"
-                    v-breakpoint:questionEl="breakpoints"
+                    v-breakpoint="breakpointsWithEl"
                     v-dark="isDarkMode"
                     :tabindex="showAnswers ? -1 : 0"
                     class="uikit-question-choices-container__strikethrough"
@@ -261,7 +245,7 @@
                 </div>
             </template>
             <div
-                v-breakpoint:questionEl="breakpoints"
+                v-breakpoint="breakpointsWithEl"
                 class="uikit-question-choices-container__motivational-moment"
                 :class="{
                     'uikit-question-choices-container__motivational-moment--mcr': isMCR,
@@ -286,127 +270,109 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Component, Vue, Prop, Emit } from 'vue-facing-decorator'
-import type { Study } from '@pocketprep/types'
+<script setup lang="ts">
 import DropdownExplanation from './DropdownExplanation.vue'
 import Icon from '../../Icons/Icon.vue'
 import PocketButton from '../../Buttons/Button.vue'
-import { dark, breakpoint } from '../../../directives'
-import type { TBreakPointsObject, TChoice, TChoiceKey, TChoiceScores } from './../question'
-
-@Component({
-    components: {
-        Icon,
-        PocketButton,
-        DropdownExplanation,
-    },
-    directives: {
-        dark,
-        breakpoint,
-    },
-})
-export default class ChoicesContainer extends Vue {
-    @Prop() question!: Study.Class.QuestionJSON
-    @Prop({ default: [] }) choices!: TChoice[]
-    @Prop({ default: false }) showAnswers!: boolean
-    @Prop({ default: false }) showExplanation!: boolean
-    @Prop({ default: false }) isMCR!: boolean
-    @Prop({ default: false }) isUnanswered!: boolean
-    @Prop({ default: [] }) answerKeys!: TChoiceKey[]
-    @Prop({ default: null }) hoverChoiceKey!: TChoiceKey | null
-    @Prop({ default: null }) focusChoiceKey!: TChoiceKey | null
-    @Prop({ default: [] }) selectedChoices!: TChoiceKey[]
-    @Prop({ default: [] }) distractorKeys!: TChoiceKey[]
-    @Prop({ default: [] }) choiceStrikes!: TChoiceKey[]
-    @Prop() choiceScores!: TChoiceScores
-    @Prop({ default: null }) passageImageUrl!: string | null
-    @Prop({ default: false }) isCorrect!: boolean
-    @Prop({ default: null }) globalMetrics!: Study.Class.GlobalQuestionMetricJSON | null
-    @Prop({ default: false }) reviewMode!: 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 }) isDarkMode!: 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 }[]
-
-    stripHtmlTags (string?: string) {
-        if (string) {
-            const div = document.createElement('div')
-            div.innerHTML = string
-            return div.textContent || ''
-        }
-        return ''
+import { dark as vDark, breakpoint as vBreakpoint } from '../../../directives'
+import { useQuestionContext } from './composables'
+import type { TChoiceKey } from '../question'
+
+const emit = defineEmits<{
+    'emitChoiceFocusIn': [ choiceKey: TChoiceKey ]
+    'emitChoiceFocusOut': [ focusEvent: FocusEvent]
+    'emitChoiceMouseOver': [ choiceKey: TChoiceKey ]
+    'emitChoiceMouseLeave': []
+    'emitHandleTouchStart': [ touchEvent: TouchEvent ]
+    'emitHandleTouchMove': [ touchEvent: TouchEvent ]
+    'emitHandleTouchEnd': [ touchEndPayload: { choiceKey: TChoiceKey; event: TouchEvent } ]
+    'emitSelectedChoice': [ choiceKey: TChoiceKey ]
+    'emitClickChoiceStrike': [ choiceKey: TChoiceKey ]
+    'toggleChoiceExplanation': []
+    'toggleDropdownExplanationImageLongAlt': []
+    'click': [ event: MouseEvent ]
+}>()
+
+const {
+    // questionEl is used by the breakpoint directive
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    questionEl,
+    question,
+    choices,
+    showAnswers,
+    showExplanation,
+    isMCR,
+    isUnanswered,
+    answerKeys,
+    hoverChoiceKey,
+    focusChoiceKey,
+    selectedChoices,
+    distractorKeys,
+    choiceStrikes,
+    choiceScores,
+    globalMetrics,
+    reviewMode,
+    isDarkMode,
+    passageImageUrl,
+    isCorrect,
+    breakpointsWithEl,
+} = useQuestionContext()
+
+const stripHtmlTags = (string?: string) => {
+    if (string) {
+        const div = document.createElement('div')
+        div.innerHTML = string
+        return div.textContent || ''
     }
+    return ''
+}
 
-    @Emit('emitChoiceFocusIn')
-    emitChoiceFocusIn (choiceKey: TChoiceKey) {
-        return choiceKey
-    }
+const emitChoiceFocusIn = (choiceKey: TChoiceKey) => {
+    emit('emitChoiceFocusIn', choiceKey)
+}
 
-    @Emit('emitChoiceFocusOut')
-    emitChoiceFocusOut (event: FocusEvent) {
-        return event
-    }
+const emitChoiceFocusOut = (focusEvent: FocusEvent) => {
+    emit('emitChoiceFocusOut', focusEvent)
+}
 
-    @Emit('emitChoiceMouseOver')
-    emitChoiceMouseOver (choiceKey: TChoiceKey) {
-        return choiceKey
-    }
+const emitChoiceMouseOver = (choiceKey: TChoiceKey) => {
+    emit('emitChoiceMouseOver', choiceKey)
+}
 
-    @Emit('emitChoiceMouseLeave')
-    emitChoiceMouseLeave () {
-        return
-    }
+const emitChoiceMouseLeave = () => {
+    emit('emitChoiceMouseLeave')
+}
 
-    @Emit('emitHandleTouchStart')
-    emitHandleTouchStart (event: TouchEvent) {
-        return event
-    }
+const emitHandleTouchStart = (event: TouchEvent) => {
+    emit('emitHandleTouchStart', event)
+}
 
-    @Emit('emitHandleTouchMove')
-    emitHandleTouchMove (event: TouchEvent) {
-        return event
-    }
+const emitHandleTouchMove = (event: TouchEvent) => {
+    emit('emitHandleTouchMove', event)
+}
 
-    @Emit('emitHandleTouchEnd')
-    emitHandleTouchEnd (choiceKey: TChoiceKey, event: TouchEvent) {
-        return { choiceKey, event } 
-    }
+const emitHandleTouchEnd = (choiceKey: TChoiceKey, event: TouchEvent) => {
+    emit('emitHandleTouchEnd', { choiceKey, event })
+}
 
-    @Emit('emitSelectedChoice')
-    emitSelectedChoice (choiceKey: TChoiceKey) {
-        return choiceKey
-    }
+const emitSelectedChoice = (choiceKey: TChoiceKey) => {
+    emit('emitSelectedChoice', choiceKey)
+}
 
-    @Emit('emitClickChoiceStrike')
-    emitClickChoiceStrike (choiceKey: TChoiceKey) {
-        return choiceKey
-    }
+const emitClickChoiceStrike = (choiceKey: TChoiceKey) => {
+    emit('emitClickChoiceStrike', choiceKey)
+}
 
-    @Emit('toggleChoiceExplanation')
-    toggleChoiceExplanation () {
-        return 
-    }
+const toggleChoiceExplanation = () => {
+    emit('toggleChoiceExplanation')
+}
 
-    @Emit('toggleDropdownExplanationImageLongAlt')
-    toggleDropdownExplanationImageLongAlt () {
-        return
-    }
+const toggleDropdownExplanationImageLongAlt = () => {
+    emit('toggleDropdownExplanationImageLongAlt')
+}
 
-    @Emit('click')
-    handleClick (event: MouseEvent) {
-        return event
-    }
+const handleClick = (event: MouseEvent) => {
+    emit('click', event)
 }
 </script>
 

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

@@ -1,6 +1,6 @@
 <template>
     <div
-        v-breakpoint:questionEl="breakpoints"
+        v-breakpoint="breakpointsWithEl"
         ref="uikit-question-dropdown-explanation"
         class="uikit-question-dropdown-explanation__dropdown-explanation"
         :class="{
@@ -22,7 +22,7 @@
         >
         <PocketButton
             v-if="explanationImageLongAlt"
-            v-breakpoint:questionEl="breakpoints"
+            v-breakpoint="breakpointsWithEl"
             type="tertiary-small"
             class="uikit-question-dropdown-explanation__toggle-dropdown-explanation-img-description"
             :class="{
@@ -52,7 +52,7 @@
             v-if="showExplanationImageLongAlt"
             ref="uikit-question-dropdown-explanation__dropdown-explanation-img-description"
             v-dark="isDarkMode"
-            v-breakpoint:questionEl="breakpoints"
+            v-breakpoint="breakpointsWithEl"
             class="uikit-question-dropdown-explanation__dropdown-explanation-img-description"
             tabindex="-1"
             v-html="explanationImageLongAlt"
@@ -69,60 +69,46 @@
     </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, TChoice, TChoiceKey } from './../question'
+import { dark as vDark, breakpoint as vBreakpoint } from '../../../directives'
 import { highlightKeywordsInText } from '../../../utils'
-
-@Component({
-    components: {
-        Icon,
-        PocketButton,
-    },
-    directives: {
-        dark,
-        breakpoint,
-    },
+import { useQuestionContext } from './composables'
+
+const emit = defineEmits<{
+    'toggleDropdownExplanationImageLongAlt': []
+}>()
+
+const {
+    // questionEl is used by the breakpoint directive
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    questionEl,
+    question,
+    globalMetrics,
+    showExplanationImageLongAlt,
+    explanationImageUrl,
+    explanationImageAlt,
+    explanationImageLongAlt,
+    reference,
+    hideReferences,
+    isDarkMode,
+    breakpointsWithEl,
+    keywordDefinitions,
+} = useQuestionContext()
+
+const explanation = computed(() => {
+    return highlightKeywordsInText({
+        text: question.value.explanation || '', 
+        keywordDefinitions: keywordDefinitions.value, 
+        isDarkMode: isDarkMode.value,
+        location: 'explanation',
+    })
 })
-export default class DropdownExplanation extends Vue {
-    @Prop() question!: Study.Class.QuestionJSON
-    @Prop({ default: [] }) answerKeys!: TChoiceKey[]
-    @Prop() choice!: TChoice
-    @Prop({ default: null }) globalMetrics!: Study.Class.GlobalQuestionMetricJSON | null
-    @Prop({ default: false }) showAnswers!: boolean
-    @Prop({ default: false }) isMCR!: 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 }) isDarkMode!: 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 explanation () {
-        return highlightKeywordsInText({
-            text: this.question.explanation || '', 
-            keywordDefinitions: this.keywordDefinitions, 
-            isDarkMode: this.isDarkMode,
-            location: 'explanation',
-        })
-    }
-    
-    @Emit('toggleDropdownExplanationImageLongAlt')
-    toggleDropdownExplanationImageLongAlt () {
-        return
-    }
+
+const toggleDropdownExplanationImageLongAlt = () => {
+    emit('toggleDropdownExplanationImageLongAlt')
 }
 </script>