@pocketprep/ui-kit 3.4.8 → 3.4.9

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

@@ -11,9 +11,9 @@
             class="uikit-question-choices-container__choice-container"
             :class="{
                 'uikit-question-choices-container__choice-container--hover': 
-                    !showAnswers && choiceKeyHover === choice.key,
+                    !showAnswers && hoverChoiceKey === choice.key,
                 'uikit-question-choices-container__choice-container--focus': 
-                    !showAnswers && choiceKeyFocus === choice.key,
+                    !showAnswers && focusChoiceKey === choice.key,
                 'uikit-question-choices-container__choice-container--selected': !showAnswers
                     && selectedChoices.includes(choice.key),
                 'uikit-question-choices-container__choice-container--correct': 
@@ -29,7 +29,7 @@
             }"
             @mousedown.prevent
             @mouseover="emitChoiceMouseOver(choice.key)"
-            @mouseleave="emitChoiceMouseleave"
+            @mouseleave="emitChoiceMouseLeave"
             @focusin="emitChoiceFocusIn(choice.key)"
             @focusout="emitChoiceFocusOut($event)"
             @click.stop="emitSelectedChoice(choice.key)"
@@ -181,7 +181,7 @@
                     :aria-checked="choiceStrikes.includes(choice.key) ? 'true' : 'false'"
                     :class="{
                         'uikit-question-choices-container__strikethrough--visible': !showAnswers
-                            && [ choiceKeyHover, choiceKeyFocus ].includes(choice.key),
+                            && [ hoverChoiceKey, focusChoiceKey ].includes(choice.key),
                         'uikit-question-choices-container__strikethrough--active': choiceStrikes.includes(choice.key),
                     }"
                     @mousedown.prevent
@@ -324,14 +324,6 @@ export default class ChoicesContainer extends Vue {
         'tablet-landscape': 1439,
     } }) breakpoints!: TBreakPointsObject
 
-    choiceKeyHover: TChoiceKey | null = null
-    choiceKeyFocus: TChoiceKey | null = null
-
-    mounted () {
-        this.choiceKeyHover = this.hoverChoiceKey
-        this.choiceKeyFocus = this.focusChoiceKey
-    }
-
     stripText (string?: string) {
         return string?.replace(/<[^\s>]+[^>]*>/gi, ' ').trim()
     }
@@ -339,25 +331,21 @@ export default class ChoicesContainer extends Vue {
 
     @Emit('emitChoiceFocusIn')
     emitChoiceFocusIn (choiceKey: TChoiceKey) {
-        this.choiceKeyFocus = choiceKey
         return choiceKey
     }
 
     @Emit('emitChoiceFocusOut')
     emitChoiceFocusOut (event: FocusEvent) {
-        this.choiceKeyFocus = null
         return event
     }
 
     @Emit('emitChoiceMouseOver')
     emitChoiceMouseOver (choiceKey: TChoiceKey) {
-        this.choiceKeyHover = choiceKey
         return choiceKey
     }
 
-    @Emit('emitChoiceMouseleave')
-    emitChoiceMouseleave () {
-        this.choiceKeyHover = null
+    @Emit('emitChoiceMouseLeave')
+    emitChoiceMouseLeave () {
         return
     }
 

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

@@ -0,0 +1,104 @@
+<template>
+    <div
+        v-if="globalMetrics"
+        class="uikit-question-stats-summary"
+    >
+        <div v-dark="isDarkMode" class="uikit-question-stats-summary__stats-summary-total">
+            <div class="uikit-question-stats-summary__stats-summary-value">
+                {{ choiceScores.totalAnswered }}
+            </div>
+            <div v-dark="isDarkMode" class="uikit-question-stats-summary__stats-summary-label">
+                Studiers Answered
+            </div>
+        </div>
+        <div v-dark="isDarkMode" class="uikit-question-stats-summary__stats-summary-correct">
+            <div class="uikit-question-stats-summary__stats-summary-value">
+                {{ Math.round((choiceScores.answeredCorrectly / choiceScores.totalAnswered) * 100) }}%
+            </div>
+            <div v-dark="isDarkMode" class="uikit-question-stats-summary__stats-summary-label">
+                Answered Correctly
+            </div>
+        </div>
+    </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 } 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
+}
+
+</script>
+
+<style lang="scss">
+@import '../../../styles/colors';
+@import '../../../styles/breakpoints';
+
+.uikit-question-stats-summary {
+    margin-top: 24px;
+    display: flex;
+    width: 100%;
+    max-width: 492px;
+    padding-bottom: 50px;
+
+    &__stats-summary-total {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        flex: 1;
+        margin-right: 16px;
+        background-color: rgba($sky-blue, 0.8);
+        padding: 9px 0;
+        border-radius: 6px;
+
+        &--dark {
+            background-color: $brand-black;
+        }
+    }
+
+    &__stats-summary-correct {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        flex: 1;
+        background-color: rgba($cadaverous, 0.13);
+        padding: 9px 0;
+        border-radius: 6px;
+
+        &--dark {
+            background-color: $brand-black;
+        }
+    }
+
+    &__stats-summary-value {
+        font-weight: 600;
+        font-size: 26px;
+        letter-spacing: 0.26px;
+        line-height: 31px;
+    }
+
+    &__stats-summary-label {
+        color: $ash;
+        font-size: 13px;
+        line-height: 16px;
+        text-align: center;
+
+        &--dark {
+            color: $white;
+        }
+    }
+}
+</style>

package/lib/components/Quiz/Question.vue

@@ -176,7 +176,7 @@
                     :question-el="questionEl"
                     :breakpoints="breakpoints"
                     @emitChoiceMouseOver="choiceMouseOver"
-                    @emitChoiceMouseleave="choiceMouseLeave"
+                    @emitChoiceMouseLeave="choiceMouseLeave"
                     @emitChoiceFocusIn="choiceFocusIn"
                     @emitChoiceFocusOut="choiceFocusOut"
                     @emitHandleTouchStart="handleTouchStart"
@@ -234,27 +234,13 @@
                 @toggleSummaryExplanationImageLongAlt="toggleExplanationImageLongAlt"
             />
             <slot name="metricsTiles">
-                <div
+                <StatsSummary
                     v-if="globalMetrics"
                     class="uikit-question__stats-summary"
-                >
-                    <div v-dark="isDarkMode" class="uikit-question__stats-summary-total">
-                        <div class="uikit-question__stats-summary-value">
-                            {{ choiceScores.totalAnswered }}
-                        </div>
-                        <div v-dark="isDarkMode" class="uikit-question__stats-summary-label">
-                            Studiers Answered
-                        </div>
-                    </div>
-                    <div v-dark="isDarkMode" class="uikit-question__stats-summary-correct">
-                        <div class="uikit-question__stats-summary-value">
-                            {{ Math.round((choiceScores.answeredCorrectly / choiceScores.totalAnswered) * 100) }}%
-                        </div>
-                        <div v-dark="isDarkMode" class="uikit-question__stats-summary-label">
-                            Answered Correctly
-                        </div>
-                    </div>
-                </div>
+                    :global-metrics="globalMetrics"
+                    :choice-scores="choiceScores"
+                    :is-dark-mode="isDarkMode"
+                />
             </slot>
             <div
                 v-breakpoint:questionEl="breakpoints"
@@ -485,6 +471,7 @@ import DropdownExplanation from '../Quiz/Question/DropdownExplanation.vue'
 import Paywall from '../Quiz/Question/Paywall.vue'
 import Summary from '../Quiz/Question/Summary.vue'
 import ChoicesContainer from '../Quiz/Question/ChoicesContainer.vue'
+import StatsSummary from '../Quiz/Question/StatsSummary.vue'
 import type { Study } from '@pocketprep/types'
 import { breakpoint, dark } from '../../directives'
 import { studyModes } from '../../utils'
@@ -502,6 +489,7 @@ import type { Ref, TQuizMode, TChoiceKey, TChoice, TChoiceScores, TNamesRow, TVi
         DropdownExplanation,
         Summary,
         ChoicesContainer,
+        StatsSummary,
     },
     directives: {
         breakpoint,
@@ -2111,61 +2099,6 @@ export default class Question extends Vue {
         }
     }
 
-    &__stats-summary {
-        margin-top: 24px;
-        display: flex;
-        width: 100%;
-        max-width: 492px;
-        padding-bottom: 50px;
-    }
-
-    &__stats-summary-total {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        flex: 1;
-        margin-right: 16px;
-        background-color: rgba($sky-blue, 0.8);
-        padding: 9px 0;
-        border-radius: 6px;
-
-        &--dark {
-            background-color: $brand-black;
-        }
-    }
-
-    &__stats-summary-correct {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        flex: 1;
-        background-color: rgba($cadaverous, 0.13);
-        padding: 9px 0;
-        border-radius: 6px;
-
-        &--dark {
-            background-color: $brand-black;
-        }
-    }
-
-    &__stats-summary-value {
-        font-weight: 600;
-        font-size: 26px;
-        letter-spacing: 0.26px;
-        line-height: 31px;
-    }
-
-    &__stats-summary-label {
-        color: $ash;
-        font-size: 13px;
-        line-height: 16px;
-        text-align: center;
-
-        &--dark {
-            color: $white;
-        }
-    }
-
     &__action-container {
         display: flex;
         justify-content: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pocketprep/ui-kit",
-  "version": "3.4.8",
+  "version": "3.4.9",
   "description": "Pocket Prep UI Kit",
   "author": "pocketprep",
   "scripts": {