@pocketprep/ui-kit 3.4.90 → 3.5.1

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,133 +270,116 @@
     </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>
 
 <style lang="scss">
-@import '../../../styles/colors';
-@import '../../../styles/breakpoints';
+@use 'sass:color';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-question-choices-container {
     display: contents;
@@ -848,7 +815,7 @@ export default class ChoicesContainer extends Vue {
             color: $white;
 
             &:hover {
-                background-color: mix($brand-blue, black, 90%);
+                background-color: color.mix($brand-blue, black, 90%);
             }
 
             &:focus {

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,66 +69,52 @@
     </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>
 
 <style lang="scss">
-@import '../../../styles/colors';
-@import '../../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-question-dropdown-explanation {
     &__dropdown-explanation {

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

@@ -1,12 +1,12 @@
 <template>
     <div
         v-if="showExplanation && !showPaywall"
-        v-breakpoint:questionEl="breakpoints"
+        v-breakpoint="breakpointsWithEl"
         v-dark="isDarkMode"
         class="uikit-question-explanation"
     >
         <div
-            ref="explanation"
+            ref="explanationRef"
             v-dark="isDarkMode"
             class="uikit-question-explanation__explanation-title"
             tabindex="-1"
@@ -16,14 +16,14 @@
         <slot name="explanationTopExperiment" />
         <div
             v-dark="isDarkMode"
-            v-breakpoint:questionEl="breakpoints"
+            v-breakpoint="breakpointsWithEl"
             class="uikit-question-explanation__explanation-text"
             v-html="explanation"
         />
         <img
             v-if="explanationImageUrl"
             v-dark="isDarkMode"
-            v-breakpoint:questionEl="breakpoints"
+            v-breakpoint="breakpointsWithEl"
             class="uikit-question-explanation__explanation-image"
             :class="{
                 'uikit-question-explanation__explanation-image--long-alt': explanationImageLongAlt,
@@ -33,7 +33,7 @@
         >
         <PocketButton
             v-if="explanationImageLongAlt"
-            v-breakpoint:questionEl="breakpoints"
+            v-breakpoint="breakpointsWithEl"
             type="tertiary-small"
             class="uikit-question-explanation__toggle-explanation-img-description"
             :class="{
@@ -87,69 +87,59 @@
     </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 { 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<{
+    'toggleExplanationImageLongAlt': []
+    'toggleExplanation': []
+}>()
+
+const {
+    // questionEl is used by the breakpoint directive
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    questionEl,
+    question,
+    showExplanation,
+    showExplanationImageLongAlt,
+    showPaywall,
+    explanationImageUrl,
+    explanationImageAlt,
+    explanationImageLongAlt,
+    reference,
+    hideReferences,
+    isDarkMode,
+    reviewMode,
+    breakpointsWithEl,
+    keywordDefinitions,
+} = useQuestionContext()
+
+const explanation = computed(() => {
+    return highlightKeywordsInText({
+        text: question.value.explanation || '', 
+        keywordDefinitions: keywordDefinitions.value, 
+        isDarkMode: isDarkMode.value,
+        location: 'explanation',
+    })
 })
-export default class Explanation extends Vue {
-    @Prop() question!: Study.Class.QuestionJSON
-    @Prop({ default: false }) showExplanation!: boolean
-    @Prop({ default: false }) showPaywall!: 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: false }) reviewMode!: boolean
-    @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('toggleExplanationImageLongAlt')
-    toggleExplanationImageLongAlt () {
-        return
-    }
 
-    @Emit('toggleExplanation')
-    toggleExplanation () {
-        return
-    }
+const toggleExplanationImageLongAlt = () => {
+    emit('toggleExplanationImageLongAlt')
+}
+
+const toggleExplanation = () => {
+    emit('toggleExplanation')
 }
 </script>
 
 <style lang="scss">
-@import '../../../styles/colors';
-@import '../../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-question-explanation {
     position: relative;