@pocketprep/ui-kit 3.4.90 → 3.5.0

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,63 +87,53 @@
     </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>