@pocketprep/ui-kit 3.4.90 → 3.5.1

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

@@ -1,28 +1,31 @@
 <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[]
-    showAnswers: boolean
-    disabled: boolean
+    isDarkMode?: boolean
+    choices?: TMatrixChoiceKey[]
+    labels?: string[]
+    showAnswers?: boolean
+    disabled?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
     isDarkMode: false,
+    choices: () => [],
+    labels: () => [],
     showAnswers: false,
     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 +55,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"
@@ -90,8 +93,8 @@ const stripHtmlTags = (string?: string) => {
 </template>
 
 <style lang="scss" scoped>
-@import '../../../styles/breakpoints';
-@import '../../../styles/colors';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-mobile-matrix-radio-group {
     list-style: none;

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,55 +66,44 @@
     </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>
 
 <style lang="scss">
-@import '../../../styles/colors';
-@import '../../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-question-passage-and-image {
     position: relative;

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,52 +108,42 @@
     </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>
 
 <style lang="scss">
-@import '../../../styles/colors';
-@import '../../../styles/breakpoints';
+@use 'sass:color';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-question-passage-and-image-dropdown {
     &__passage-and-image-dropdown-btn {
@@ -172,11 +162,11 @@ export default class PassageAndImageDropdown extends Vue {
 
         &:hover {
             .uikit-question-passage-and-image-dropdown__passage-and-image-dropdown-text {
-                color: mix($brand-blue, black, 90%);
+                color: color.mix($brand-blue, black, 90%);
             }
 
             .uikit-question-passage-and-image-dropdown__passage-and-image-dropdown-arrow {
-                color: mix($brand-blue, black, 90%);
+                color: color.mix($brand-blue, black, 90%);
             }
 
             &::before {
@@ -272,7 +262,7 @@ export default class PassageAndImageDropdown extends Vue {
         line-height: 24px;
         font-size: 16px;
         font-weight: 400;
-        letter-spacing: -0.1;
+        letter-spacing: -0.1px;
 
         &--mobile {
             line-height: 24px;
@@ -326,7 +316,7 @@ export default class PassageAndImageDropdown extends Vue {
         font-size: 15px;
         line-height: 22px;
         font-weight: 500;
-        letter-spacing: -0.2;
+        letter-spacing: -0.2px;
 
         &--dark {
             color: $fog;

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,53 +32,42 @@
     </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">
-@import '../../../styles/colors';
-@import '../../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-question-paywall {
     width: 100%;

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,50 +51,41 @@
         </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
+    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>
 
 <style lang="scss">
-@import '../../../styles/colors';
-@import '../../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-question-context {
     display: flex;

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

@@ -28,32 +28,22 @@
     </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">
-@import '../../../styles/colors';
-@import '../../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-question-stats-summary {
     margin-top: 24px;