@pocketprep/ui-kit 3.5.0 → 3.5.2

package/lib/components/Quiz/Question.vue

@@ -167,22 +167,22 @@
                         <slot name="explanationTopExperiment"></slot>
                     </template>
                     <template #motivationalMoment="{
-                        isCorrect,
+                        isCorrect:isCorrectMM,
                         choiceKey,
-                        showAnswers,
-                        answerKeys,
+                        showAnswers:showAnswersMM,
+                        answerKeys:answerKeysMM,
                     }">
                         <slot 
                             name="motivationalMoment"
-                            :showAnswers="showAnswers"
-                            :answerKeys="answerKeys"
+                            :showAnswers="showAnswersMM"
+                            :answerKeys="answerKeysMM"
                             :choiceKey="choiceKey"
-                            :isCorrect="isCorrect"
+                            :isCorrect="isCorrectMM"
                         />
                     </template>
                     <template #showNamesTable="{
                         choiceKey,
-                    }" >
+                    }">
                         <slot 
                             name="showNamesTable"
                             :choiceKey="choiceKey"
@@ -200,17 +200,17 @@
                     @emitSelectedMatrixChoice="selectMatrixChoice"
                 > 
                     <template #motivationalMoment="{
-                        isCorrect,
+                        isCorrect:isCorrectMM,
                         choiceKey,
-                        showAnswers,
-                        answerKeys,
+                        showAnswers:showAnswersMM,
+                        answerKeys:answerKeysMM,
                     }">
                         <slot 
                             name="motivationalMoment"
-                            :showAnswers="showAnswers"
-                            :answerKeys="answerKeys"
+                            :showAnswers="showAnswersMM"
+                            :answerKeys="answerKeysMM"
                             :choiceKey="choiceKey"
-                            :isCorrect="isCorrect"
+                            :isCorrect="isCorrectMM"
                         />
                     </template>
                     <template #explanationBottomExperiment>
@@ -225,18 +225,18 @@
                 > 
                     <template
                         #motivationalMoment="{
-                            isCorrect,
+                            isCorrect:isCorrectMM,
                             choiceKey,
-                            showAnswers,
-                            answerKeys,
+                            showAnswers:showAnswersMM,
+                            answerKeys:answerKeysMM,
                         }"
                     >
                         <slot 
                             name="motivationalMoment"
-                            :showAnswers="showAnswers"
-                            :answerKeys="answerKeys"
+                            :showAnswers="showAnswersMM"
+                            :answerKeys="answerKeysMM"
                             :choiceKey="choiceKey"
-                            :isCorrect="isCorrect"
+                            :isCorrect="isCorrectMM"
                         />
                     </template>
                     <template #explanationBottomExperiment>
@@ -424,7 +424,7 @@ const props = withDefaults(defineProps<{
     hideReferences?: boolean
     isTeachReview?: boolean
     isTeachGroupReview?: boolean
-    keywordDefinitions: { keyword: string; definition: string }[]
+    keywordDefinitions?: { keyword: string; definition: string }[]
 }>(), {
     imageUrlPrefix: '',
     quizMode: 'quick10',
@@ -621,7 +621,7 @@ const passageAndImageTitle = computed(() => {
     } else if (!props.question.passage && passageImageUrl.value) {
         return 'Image'
     } else {
-        return props.question.passageLabel ? `${props.question.passageLabel}` :
+        return props.question.passageLabel ? props.question.passageLabel :
             'Passage'
     }
 })
@@ -737,7 +737,7 @@ const isMatrixQuestionAnswered = computed(() => {
     // Matrix questions are answered if each row has a selected choice
     if (isMatrixQuestion.value) {
         const answeredRowNums = selectedMatrixChoices.value.map(choice => {
-            if (choice as TMatrixChoiceKey) {
+            if (choice) {
                 return Number(choice.split('_')[0]?.slice(1))
             }
             return
@@ -834,7 +834,7 @@ const moveFocusToPassage = () => {
     }
 }
 
-const moveFocusToPrompt = async () => {
+const moveFocusToPrompt = () => {
     promptEl?.value?.focus()
 }
 
@@ -861,7 +861,7 @@ const startReviewMode = () => {
     } else {
         showMatrixAnswers.value = true
         showExplanation.value = props.defaultShowExplanation === null ? true : props.defaultShowExplanation
-        selectedMatrixChoices.value = matrixAnswerKeys.value as TMatrixChoiceKey[]
+        selectedMatrixChoices.value = matrixAnswerKeys.value
     }
 }
 
@@ -956,7 +956,7 @@ const handleTouchMove = (event: TouchEvent) => {
     }
 }
 
-const handleTouchEnd = (option: {choiceKey: TChoiceKey; event: TouchEvent}) => {
+const handleTouchEnd = (option: { choiceKey: TChoiceKey; event: TouchEvent }) => {
     const choiceKey = option.choiceKey
     const event = option.event
     const targetEl = event.target as Ref
@@ -1237,7 +1237,7 @@ if (isMatrixQuestion.value && props.previousMatrixChoices) {
     updateSelectedMatrixChoices(props.previousMatrixChoices)
 }
 
-onMounted(async () => {
+onMounted(() => {
     questionEl.value = props.containerEl || questionRef.value
 
     if (props.initialShowAnswers) {
@@ -1315,8 +1315,8 @@ provide(InjectionKeys.isTeachGroupReviewKey, isTeachGroupReview)
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
-@import '../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-question {
     position: relative;
@@ -1812,6 +1812,7 @@ provide(InjectionKeys.isTeachGroupReviewKey, isTeachGroupReview)
 
     &__matrix-choices-container {
         display: block;
+
         @include breakpoint(black-bear) {
             display: none;
         }

package/lib/components/Quiz/QuizContainer.vue

@@ -1,6 +1,6 @@
 <template>
     <div
-        ref="quiz-container"
+        ref="quiz-container-ref"
         v-breakpoint
         v-dark="isDarkMode"
         class="uikit-quiz-container"
@@ -47,49 +47,43 @@
     </div>
 </template>
 
-<script lang="ts">
-import { breakpoint, dark } from '../../directives'
-import { Component, Prop, Vue } from 'vue-facing-decorator'
-import Icon from '../Icons/Icon.vue'
-
-@Component({
-    directives: {
-        breakpoint,
-        dark,
-    },
-    components: {
-        Icon,
-    },
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, useTemplateRef } from 'vue'
+import { dark as vDark, breakpoint as vBreakpoint } from '../../directives'
+
+withDefaults(defineProps<{
+    showSide?: boolean
+    isDarkMode?: boolean
+    customHeaderStyles?: Record<string, string>
+    customMainStyles?: Record<string, string>
+    customFooterStyles?: Record<string, string>
+}>(), {
+    showSide: false,
+    isDarkMode: false,
+    customHeaderStyles: () => ({}),
+    customMainStyles: () => ({}),
+    customFooterStyles: () => ({}),
 })
-export default class QuizContainer extends Vue {
-    @Prop({ default: false }) showSide!: boolean
-    @Prop({ default: false }) isDarkMode!: boolean
-    @Prop({ default: () => ({}) }) customHeaderStyles!: Record<string, string>
-    @Prop({ default: () => ({}) }) customMainStyles!: Record<string, string>
-    @Prop({ default: () => ({}) }) customFooterStyles!: Record<string, string>
-
-    quizContainerEl: HTMLElement | null = null
-
-    beforeUnmount () {
-        const bodyEl = document.getElementsByTagName('body')[0]
-        if (bodyEl) {
-            bodyEl.style.overflow = ''
-        }
+
+const quizContainerEl = useTemplateRef('quiz-container-ref')
+
+onBeforeUnmount(() => {
+    const bodyEl = document.getElementsByTagName('body')[0]
+    if (bodyEl) {
+        bodyEl.style.overflow = ''
     }
+})
 
-    mounted () {
-        const bodyEl = document.getElementsByTagName('body')[0]
-        if (bodyEl) {
-            bodyEl.style.overflow = 'hidden'
-        }
-        const quizContainerEl = this.$refs['quiz-container'] as HTMLElement || null 
-        this.quizContainerEl = quizContainerEl
+onMounted(() => {
+    const bodyEl = document.getElementsByTagName('body')[0]
+    if (bodyEl) {
+        bodyEl.style.overflow = 'hidden'
     }
-}
+})
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
+@use '@/styles/colors' as *;
 
 .uikit-quiz-container {
     display: flex;

package/lib/components/Quiz/QuizProgress.vue

@@ -35,104 +35,100 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Component, Emit, Prop, Vue } from 'vue-facing-decorator'
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
 import QuizProgressBar from '../Quiz/QuizProgressBar.vue'
 import { ResizeObserver as ResizeObserverPonyFill } from 'resize-observer'
 
-@Component({
-    components: {
-        QuizProgressBar,
-    },
+const props = withDefaults(defineProps<{
+    answeredIndexList: number[]
+    selectedIndex: number
+    numQuestions: number
+    forceSlider?: boolean
+}>(), {
+    forceSlider: false,
 })
-export default class QuizProgress extends Vue {
-    @Prop() answeredIndexList!: number[]
-    @Prop() selectedIndex!: number
-    @Prop() numQuestions!: number
-    @Prop({ default: false }) forceSlider!: boolean
 
-    containerWidth = 0
-    mutationObserver: ResizeObserver | null = null
+const emit = defineEmits<{
+    'barClicked': [ index: number ]
+}>()
 
-    get isSlider () {
-        return this.forceSlider || this.numQuestions > 100
-    }
+const containerWidth = ref(0)
+const mutationObserver = ref<ResizeObserver | null>(null)
 
-    get barMaxMargin () {
-        return this.numQuestions > 100 || this.forceSlider
-            ? 0 // No margin for >100 questions or slider mode
-            : this.numQuestions < 50
-                ? 2
-                : 2.5
-    }
+const isSlider = computed(() => {
+    return props.forceSlider || props.numQuestions > 100
+})
 
-    get barWidth () {
-        const numGaps = this.numQuestions - 1
-        const totalMarginWidth = numGaps * this.barMaxMargin * 2
-        const availableWidth = this.containerWidth - totalMarginWidth
-        const barWidth = (this.forceSlider || this.numQuestions > 100)
-            ? availableWidth / this.numQuestions
-            : Math.floor(Math.max(availableWidth / this.numQuestions, 1))
-        return barWidth
-    }
+const barMaxMargin = computed(() => {
+    return props.numQuestions > 100 || props.forceSlider
+        ? 0 // No margin for >100 questions or slider mode
+        : props.numQuestions < 50
+            ? 2
+            : 2.5
+})
 
-    get barMargin () {
-        const maxMargin = ((this.containerWidth - (this.barWidth * this.numQuestions)) / (this.numQuestions - 1)) / 2
+const barWidth = computed(() => {
+    const numGaps = props.numQuestions - 1
+    const totalMarginWidth = numGaps * barMaxMargin.value * 2
+    const availableWidth = containerWidth.value - totalMarginWidth
+    const calculatedBarWidth = (props.forceSlider || props.numQuestions > 100)
+        ? availableWidth / props.numQuestions
+        : Math.floor(Math.max(availableWidth / props.numQuestions, 1))
+    return calculatedBarWidth
+})
 
-        return Math.max(
-            Math.min(this.barMaxMargin, Math.floor(maxMargin)),
-            0
-        )
-    }
+const barMargin = computed(() => {
+    const maxMargin = ((containerWidth.value - (barWidth.value * props.numQuestions)) / (props.numQuestions - 1)) / 2
 
-    get barWidthString () {
-        return `${this.barWidth}px`
-    }
+    return Math.max(
+        Math.min(barMaxMargin.value, Math.floor(maxMargin)),
+        0
+    )
+})
 
-    get barMarginString () {
-        return `${this.barMargin}px`
-    }
+const barWidthString = computed(() => {
+    return `${barWidth.value}px`
+})
 
-    mounted () {
-        this.containerWidth = document.querySelector('.uikit-quiz-progress')?.getBoundingClientRect().width || 0
-        const el = document.querySelector('.uikit-quiz-progress') as Element
-        const resizeMutationObserver = window.ResizeObserver
-            ? new ResizeObserver(() => {
-                this.containerWidth = document.querySelector('.uikit-quiz-progress')?.getBoundingClientRect().width || 0
-            })
-            : new ResizeObserverPonyFill(() => {
-                this.containerWidth = document.querySelector('.uikit-quiz-progress')?.getBoundingClientRect().width || 0
-            })
-        this.mutationObserver = resizeMutationObserver
-        this.mutationObserver.observe(el)
-    }
+onMounted(() => {
+    containerWidth.value = document.querySelector('.uikit-quiz-progress')?.getBoundingClientRect().width || 0
+    const el = document.querySelector('.uikit-quiz-progress') as Element
+    const resizeMutationObserver = window.ResizeObserver
+        ? new ResizeObserver(() => {
+            containerWidth.value = document.querySelector('.uikit-quiz-progress')?.getBoundingClientRect().width || 0
+        })
+        : new ResizeObserverPonyFill(() => {
+            containerWidth.value = document.querySelector('.uikit-quiz-progress')?.getBoundingClientRect().width || 0
+        })
+    mutationObserver.value = resizeMutationObserver
+    mutationObserver.value.observe(el)
+})
 
-    beforeUnmount () {
-        this.mutationObserver?.disconnect()
-    }
+onBeforeUnmount(() => {
+    mutationObserver.value?.disconnect()
+})
 
-    clickAndFocus (index: number) {
-        const bars = document.querySelectorAll('.uikit-quiz-progress__bar')
-        const bar = bars[index - 1] as HTMLElement
-        if (bar) {
-            this.emitBarClicked(index)
-            setTimeout(() => {
-                this.$nextTick(() => {
-                    bar.focus()
-                })
-            }, 50)
-        }
+const clickAndFocus = (index: number) => {
+    const bars = document.querySelectorAll('.uikit-quiz-progress__bar')
+    const bar = bars[index - 1] as HTMLElement
+    if (bar) {
+        emitBarClicked(index)
+        setTimeout(() => {
+            nextTick(() => {
+                bar.focus()
+            })
+        }, 50)
     }
+}
 
-    @Emit('barClicked')
-    emitBarClicked (index: number) {
-        return index
-    }
+const emitBarClicked = (index: number) => {
+    emit('barClicked', index)
 }
 </script>
 
 <style lang="scss">
-@import '../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
 
 .uikit-quiz-progress {
     display: flex;

package/lib/components/Quiz/QuizProgressBar.vue

@@ -18,6 +18,7 @@ import { Component, Emit, Prop, Vue } from 'vue-facing-decorator'
 import { breakpoint } from '../../directives'
 
 @Component({
+    name: 'QuizProgressBar',
     directives: {
         breakpoint,
     },
@@ -40,8 +41,8 @@ export default class QuizProgressBar extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
-@import '../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-quiz-progress-bar {
     flex: 1;

package/lib/components/Search/Pill.vue

@@ -40,8 +40,8 @@ export default class Pill extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/breakpoints';
-@import '../../styles/colors';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-pill {
     background: $brand-black;

package/lib/components/Search/Search.vue

@@ -124,8 +124,8 @@ export default class Search extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
-@import '../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-search {
     position: relative;

package/lib/components/SidePanels/SidePanel.vue

@@ -128,6 +128,7 @@ import Icon from '../Icons/Icon.vue'
 import { dark } from '../../directives'
 
 @Component({
+    name: 'SidePanel',
     components: {
         Icon,
         PocketButton: Button,
@@ -150,7 +151,7 @@ export default class SidePanel extends Vue {
     @Prop({ default: false }) isDarkMode!: boolean
 
     openSidePanel = false
-    notContentHeight = this.tabs && this.tabs.length ? 262 : 218
+    notContentHeight = this.tabs?.length ? 262 : 218
     focusListener: Parameters<typeof addEventListener>[1] | null = null
     savedYPosition = 0
     sidePanelNumber = 0
@@ -289,8 +290,8 @@ export default class SidePanel extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
-@import '../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-page-overlay {
     background: rgba($brand-black, 0);
@@ -588,6 +589,10 @@ export default class SidePanel extends Vue {
 
         &--teach-side-panel {
             background-color: $white;
+
+            &--dark {
+                background: $charcoal;
+            }
         }
 
         &--dark {

package/lib/components/Tables/Table.vue

@@ -379,8 +379,9 @@ export default class Table extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
-@import '../../styles/breakpoints';
+@use 'sass:color';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-table {
     &__container {
@@ -584,7 +585,7 @@ export default class Table extends Vue {
 
         &--hover-focus {
             &:hover {
-                background-color: mix($barely-background, $brand-black, 96%);
+                background-color: color.mix($barely-background, $brand-black, 96%);
             }
 
             &:focus {

package/lib/components/Tables/TableActions.vue

@@ -77,7 +77,7 @@ export default class TableActions extends Vue {
     }
 
     actionClicked (action: ITableAction | ITableSubAction) {
-        if ('menu' in action && action.menu && action.menu.length) {
+        if ('menu' in action && action.menu?.length) {
             if (this.visibleMenuActionId !== action.id) {
                 this.focusedMenuOptionIndex = null
                 this.visibleMenuActionId = action.id
@@ -139,8 +139,8 @@ export default class TableActions extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
-@import '../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-table-actions {
     display: flex;

package/lib/components/Tags/Tag.vue

@@ -64,8 +64,8 @@ export default class Tag extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/breakpoints';
-@import '../../styles/colors';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-tag {
     box-sizing: border-box;

package/lib/components/Toasts/Toast.vue

@@ -80,7 +80,9 @@ export default class Toast extends Vue {
     }
 
     clearCloseTimeout () {
-        this.closeTimeout && clearTimeout(this.closeTimeout)
+        if (this.closeTimeout) {
+            clearTimeout(this.closeTimeout)
+        }
     }
 
     @Emit('close')
@@ -91,8 +93,8 @@ export default class Toast extends Vue {
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/breakpoints';
-@import '../../styles/colors';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .toast {
     background-color: rgba($charcoal, 0.9);

package/lib/components/Tooltips/OverflowTooltip.vue

@@ -82,8 +82,8 @@ export default class OverflowTooltip extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/breakpoints';
-@import '../../styles/colors';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-overflow-tooltip {
     position: relative;

package/lib/components/Tooltips/Tooltip.vue

@@ -103,8 +103,8 @@ export default class Tooltip extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
-@import '../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-tooltip-popup {
     color: $white;

package/lib/directives.ts

@@ -77,7 +77,7 @@ const eventListeners: Partial<Record<string, () => void>> = {}
 const mutationObservers: Partial<Record<string, MutationObserver>> = {}
 const resizeObservers: Partial<Record<string, ResizeObserver>> = {}
 
-export const fixed: Directive = {
+export const fixed: Directive<HTMLElement> = {
     beforeMount: el => {
         if (!el.dataset.breakpointId) {
             const { top, left } = el.getBoundingClientRect()

package/lib/pocketprep-export.module.scss

@@ -1,5 +1,5 @@
-@import './styles/breakpoints';
-@import './styles/colors';
+@use './styles/breakpoints' as *;
+@use './styles/colors' as *;
 
 /* stylelint-disable property-case */
 :export {
@@ -10,6 +10,7 @@
     blackBear: $black-bear;
     koalaBear: $koala-bear;
     teddyBear: $teddy-bear;
+
     // colors
     white: $white;
     pickledBluewood: $pickled-bluewood;

package/lib/pocketprep.scss

@@ -1,5 +1,5 @@
-@import './styles/breakpoints';
-@import './styles/colors';
+@use './styles/breakpoints' as *;
+@use './styles/colors' as *;
 
 body,
 html {