@pocketprep/ui-kit 3.4.90 → 3.5.0

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

@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import RadioButton from '../../Forms/RadioButton.vue'
 import { dark as vDark } from '../../../directives'
+import type { TMatrixChoiceKey } from '../question'
 
 interface Props {
     isDarkMode: boolean
-    choices: string[]
-    labels: string[]
+    choices?: TMatrixChoiceKey[]
+    labels?: string[]
     showAnswers: boolean
     disabled: boolean
 }
@@ -16,13 +17,13 @@ const props = withDefaults(defineProps<Props>(), {
     disabled: false,
 })
 
-const selectedChoice = defineModel<string>()
+const selectedChoice = defineModel<TMatrixChoiceKey | null>({ default: null })
 
-const selectChoice = (choiceKey: string) => {
+const selectChoice = (choiceKey: TMatrixChoiceKey) => {
     selectedChoice.value = choiceKey
 }
 
-const radioButtonColor = (choice: string) => {
+const radioButtonColor = (choice: TMatrixChoiceKey) => {
     if (props.showAnswers) {
         if (choice === selectedChoice.value && selectedChoice.value?.startsWith('a')) {
             return 'green'
@@ -52,7 +53,7 @@ const stripHtmlTags = (string?: string) => {
 
 <template>
     <ul
-        v-if="choices.length"
+        v-if="choices && choices.length"
         class="uikit-mobile-matrix-radio-group"
         v-dark="isDarkMode"
         role="radiogroup"

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

@@ -1,7 +1,7 @@
 <template>
     <div
         v-if="showPassageAndImage"
-        v-breakpoint:questionEl="breakpoints"
+        v-breakpoint="breakpointsWithEl"
         class="uikit-question-passage-and-image"
     >
         <div
@@ -20,14 +20,14 @@
         <img
             v-if="passageImageUrl"
             v-dark="isDarkMode"
-            v-breakpoint:questionEl="breakpoints"
+            v-breakpoint="breakpointsWithEl"
             class="uikit-question-passage-and-image__image"
             :src="passageImageUrl"
             :alt="`${passageImageAlt}. Extended image description below.`"
         >
         <PocketButton
             v-if="passageImageLongAlt"
-            v-breakpoint:questionEl="breakpoints"
+            v-breakpoint="breakpointsWithEl"
             type="tertiary-small"
             class="uikit-question-passage-and-image__toggle-passage-image-description"
             :is-dark-mode="isDarkMode"
@@ -66,49 +66,38 @@
     </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 Icon from '../../Icons/Icon.vue'
 import PocketButton from '../../Buttons/Button.vue'
-import { breakpoint, dark } from '../../../directives'
-import type { TQuestionPassageAndImageTitle, TBreakPointsObject } from './../question'
-
-@Component({
-    components: {
-        Icon,
-        PocketButton,
-    },
-    directives: {
-        dark,
-        breakpoint,
-    },
-})
-export default class PassageAndImage extends Vue {
-    @Prop() question!: Study.Class.QuestionJSON
-    @Prop({ default: false }) showPassageImageLongAlt!: boolean
-    @Prop({ default: false }) showPassageAndImage!: boolean
-    @Prop({ default: null }) passageImageUrl!: string | null
-    @Prop({ default: '' }) passageImageLongAlt!: string | undefined
-    @Prop({ default: '' }) passageImageAlt!: string | undefined
-    @Prop({ default: 'Passage' }) passageAndImageTitle!: TQuestionPassageAndImageTitle
-    @Prop({ default: false }) isDarkMode!: boolean
-    @Prop({ default: null }) questionEl!: Element | null
-    @Prop({ default: {
-        'mobile': 767,
-        'tablet-portrait': 1023,
-        'tablet-landscape': 1439,
-    } }) breakpoints!: TBreakPointsObject
-
-    @Emit('emitTogglePassageImageLongAlt')
-    emitTogglePassageImageLongAlt () {
-        return
-    }
+import { dark as vDark, breakpoint as vBreakpoint } from '../../../directives'
+import { useQuestionContext } from './composables'
+
+const emit = defineEmits<{
+    'emitTogglePassageImageLongAlt': []
+    'emitMoveFocusToPrompt': []
+}>()
+
+const {
+    // questionEl is used by the breakpoint directive
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    questionEl,
+    question,
+    showPassageImageLongAlt,
+    showPassageAndImage,
+    passageImageUrl,
+    passageImageLongAlt,
+    passageImageAlt,
+    passageAndImageTitle,
+    isDarkMode,
+    breakpointsWithEl,
+} = useQuestionContext()
+
+const emitTogglePassageImageLongAlt = () => {
+    emit('emitTogglePassageImageLongAlt')
+}
 
-    @Emit('emitMoveFocusToPrompt')
-    emitMoveFocusToPrompt () {
-        return
-    }
+const emitMoveFocusToPrompt = () => {
+    emit('emitMoveFocusToPrompt')
 }
 </script>
 

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

@@ -2,7 +2,7 @@
     <div
         v-if="question.passage || passageImageUrl"
         ref="uikit-question-passage-and-image-dropdown"
-        v-breakpoint:questionEl="breakpoints"
+        v-breakpoint="breakpointsWithEl"
         v-dark="isDarkMode"
         class="uikit-question-passage-and-image-dropdown"
     >
@@ -45,12 +45,12 @@
         </div>
         <div
             v-if="showPassageImageDropdown"
-            v-breakpoint:questionEl="breakpoints"
+            v-breakpoint="breakpointsWithEl"
             class="uikit-question-passage-and-image-dropdown__passage-and-image-dropdown-container"
         >
             <div
                 v-if="question.passage"
-                v-breakpoint:questionEl="breakpoints"
+                v-breakpoint="breakpointsWithEl"
                 class="uikit-question-passage-and-image-dropdown__passage-dropdown-passage"
                 :class="{
                     'uikit-question-passage-and-image-dropdown__passage-dropdown-passage--with-image': passageImageUrl,
@@ -69,7 +69,7 @@
             >
             <PocketButton
                 v-if="passageImageLongAlt"
-                v-breakpoint:questionEl="breakpoints"
+                v-breakpoint="breakpointsWithEl"
                 type="tertiary-small"
                 class="uikit-question-passage-and-image-dropdown__toggle-img-dropdown-img-description"
                 :class="{
@@ -98,7 +98,7 @@
             <div
                 v-if="showPassageImageLongAlt"
                 ref="uikit-question-passage-and-image-dropdown__img-dropdown-img-description"
-                v-breakpoint:questionEl="breakpoints"
+                v-breakpoint="breakpointsWithEl"
                 v-dark="isDarkMode"
                 class="uikit-question-passage-and-image-dropdown__img-dropdown-img-description"
                 tabindex="-1"
@@ -108,46 +108,35 @@
     </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 Icon from '../../Icons/Icon.vue'
 import PocketButton from '../../Buttons/Button.vue'
-import { breakpoint, dark } from '../../../directives'
-import type { TQuestionPassageAndImageTitle, TBreakPointsObject } from './../question'
-
-@Component({
-    components: {
-        Icon,
-        PocketButton,
-    },
-    directives: {
-        dark,
-        breakpoint,
-    },
-})
-export default class PassageAndImageDropdown extends Vue {
-    @Prop({ default: false }) isDarkMode!: boolean
-    @Prop() question!: Study.Class.QuestionJSON
-    @Prop({ default: '' }) imageUrlPrefix!: string
-    @Prop({ default: null }) passageImageUrl!: string | null
-    @Prop({ default: false }) showPassageImageLongAlt!: boolean
-    @Prop({ default: '' }) passageImageLongAlt!: string | undefined
-    @Prop({ default: '' }) passageImageAlt!: string | undefined
-    @Prop({ default: 'Passage' }) passageAndImageTitle!: TQuestionPassageAndImageTitle
-    @Prop({ default: null }) questionEl!: Element | null
-    @Prop({ default: {
-        'mobile': 767,
-        'tablet-portrait': 1023,
-        'tablet-landscape': 1439,
-    } }) breakpoints!: TBreakPointsObject
-    
-    showPassageImageDropdown = false
-
-    @Emit('togglePassageImageLongAltDropdown')
-    togglePassageImageLongAltDropdown () {
-        return
-    }
+import { dark as vDark, breakpoint as vBreakpoint } from '../../../directives'
+import { useQuestionContext } from './composables'
+import { ref } from 'vue'
+
+const emit = defineEmits<{
+    'togglePassageImageLongAltDropdown': []
+}>()
+
+const {
+    // questionEl is used by the breakpoint directive
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    questionEl,
+    question,
+    isDarkMode,
+    passageImageUrl,
+    passageImageAlt,
+    passageImageLongAlt,
+    showPassageImageLongAlt,
+    passageAndImageTitle,
+    breakpointsWithEl,
+} = useQuestionContext()
+
+const showPassageImageDropdown = ref(false)
+
+const togglePassageImageLongAltDropdown = () => {
+    emit('togglePassageImageLongAltDropdown')
 }
 </script>
 

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

@@ -4,19 +4,19 @@
     >
         <div
             v-dark="isDarkMode"
-            v-breakpoint:questionEl="breakpoints" 
+            v-breakpoint="breakpointsWithEl" 
             class="uikit-question-paywall__paywall"
             :class="{ 'uikit-question-paywall__paywall--review': reviewMode }"
         >
             <img
-                v-breakpoint:questionEl="breakpoints"
+                v-breakpoint="breakpointsWithEl"
                 :src="isDarkMode ? paywallImages['dark'] : paywallImages['light']"
                 alt=""
                 class="uikit-question-paywall__paywall-image"
             >
             <div
                 v-dark="isDarkMode"
-                v-breakpoint:questionEl="breakpoints"
+                v-breakpoint="breakpointsWithEl"
                 class="uikit-question-paywall__paywall-text"
             >
                 You need a Premium Subscription to view this question's answer and explanation.
@@ -32,48 +32,37 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Component, Vue, Prop, Emit } from 'vue-facing-decorator'
-import Icon from '../../Icons/Icon.vue'
+<script setup lang="ts">
+import { computed } from 'vue'
 import PocketButton from '../../Buttons/Button.vue'
-import { dark, breakpoint } from '../../../directives'
-import type { TBreakPointsObject } from './../question'
 import PaywallImageLight from '../../../assets/question/paywall-light.png'
 import PaywallImageDark from '../../../assets/question/paywall-dark.png'
-
-@Component({
-    components: {
-        Icon,
-        PocketButton,
-    },
-    directives: {
-        dark,
-        breakpoint,
-    },
-})
-export default class Paywall extends Vue {
-    @Prop({ default: false }) reviewMode!: boolean
-    @Prop({ default: false }) isDarkMode!: boolean
-    @Prop({ default: null }) questionEl!: Element | null
-    @Prop({ default: {
-        'mobile': 767,
-        'tablet-portrait': 1023,
-        'tablet-landscape': 1439,
-    } }) breakpoints!: TBreakPointsObject
-
-    get paywallImages () {
-        return {
-            light: PaywallImageLight,
-            dark: PaywallImageDark,
-        }
+import { dark as vDark, breakpoint as vBreakpoint } from '../../../directives'
+import { useQuestionContext } from './composables'
+
+const emit = defineEmits<{
+    'upgradeClicked': []
+}>()
+
+const {
+    // questionEl is used by the breakpoint directive
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    questionEl,
+    isDarkMode,
+    reviewMode,
+    breakpointsWithEl,
+} = useQuestionContext()
+
+const paywallImages = computed(() => {
+    return {
+        light: PaywallImageLight,
+        dark: PaywallImageDark,
     }
+})
 
-    @Emit('upgradeClicked')
-    emitUpgradeClick () {
-        return true
-    }
+const emitUpgradeClick = () => {
+    emit('upgradeClicked')
 }
-
 </script>
 
 <style lang="scss">

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

@@ -1,7 +1,7 @@
 <template>
     <div
         ref="uikit-question-context"
-        v-breakpoint:questionEl="breakpoints"
+        v-breakpoint="breakpointsWithEl"
         class="uikit-question-context"
         tabindex="-1"
     >
@@ -51,44 +51,36 @@
         </h2>
         <div
             class="uikit-question-context__tag"
-            v-breakpoint:questionEl="breakpoints"
+            v-breakpoint="breakpointsWithEl"
         >
             <slot name="tag" />
         </div>
     </div>
 </template>
 
-<script lang="ts">
-import { Component, Vue, Prop } from 'vue-facing-decorator'
+<script setup lang="ts">
 import Icon from '../../Icons/Icon.vue'
-import { dark, breakpoint } from '../../../directives'
-import type { TQuizMode, TContextIcon, TBreakPointsObject } from './../question'
-
-@Component({
-    components: {
-        Icon,
-    },
-    directives: {
-        dark,
-        breakpoint,
-    },
+import { dark as vDark, breakpoint as vBreakpoint } from '../../../directives'
+import { useQuestionContext } from './composables'
+
+const {
+    // questionEl is used by the breakpoint directive
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    questionEl,
+    breakpointsWithEl,
+    quizLength,
+    quizMode,
+    questionNumber,
+    isDarkMode,
+    isCorrect,
+    contextIconType,
+    showAnswers,
+    showMatrixAnswers,
+} = useQuestionContext()
+
+defineExpose({
+    questionEl,
 })
-export default class QuestionContext extends Vue {
-    @Prop() quizLength!: number
-    @Prop({ default: 'quick10' }) quizMode!: TQuizMode
-    @Prop() questionNumber!: number
-    @Prop({ default: false }) isDarkMode!: boolean
-    @Prop({ default: false }) isCorrect!: boolean
-    @Prop() contextIconType!: TContextIcon 
-    @Prop({ default: null }) questionEl!: Element | null
-    @Prop({ default: false }) showAnswers!: boolean
-    @Prop({ default: false }) showMatrixAnswers!: boolean
-    @Prop({ default: {
-        'mobile': 767,
-        'tablet-portrait': 1023,
-        'tablet-landscape': 1439,
-    } }) breakpoints!: TBreakPointsObject
-}
 
 </script>
 

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

@@ -28,27 +28,17 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Component, Vue, Prop } from 'vue-facing-decorator'
-import type { Study } from '@pocketprep/types'
-import { dark, breakpoint } from '../../../directives'
-import type { TChoiceScores, TMatrixChoiceScores } from './../question'
-
-
-@Component({
-    directives: {
-        dark,
-        breakpoint,
-    },
-})
-export default class StatsSummary extends Vue {
-    @Prop({ default: null }) globalMetrics!: Study.Class.GlobalQuestionMetricJSON | null
-    @Prop() choiceScores!: TChoiceScores
-    @Prop({ default: false }) isDarkMode!: boolean
-    @Prop({ default: false }) isMatrixQuestion!: boolean
-    @Prop() matrixChoiceScores!: TMatrixChoiceScores
-}
+<script setup lang="ts">
+import { dark as vDark } from '../../../directives'
+import { useQuestionContext } from './composables'
 
+const {
+    globalMetrics,
+    choiceScores,    
+    isDarkMode,
+    isMatrixQuestion,
+    matrixChoiceScores,
+} = useQuestionContext()
 </script>
 
 <style lang="scss">

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,71 +121,61 @@
     </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>