@pocketprep/ui-kit 3.4.90 → 3.5.1

package/lib/components/Quiz/QuizContainer.vue

@@ -1,93 +1,89 @@
 <template>
     <div
-        ref="quiz-container"
+        ref="quiz-container-ref"
         v-breakpoint
         v-dark="isDarkMode"
         class="uikit-quiz-container"
     >
-        <div
-            v-breakpoint:quizContainerEl
-            class="uikit-quiz-container__header"
-            :class="{'uikit-quiz-container__header--dark': isDarkMode}"
-            :style="customHeaderStyles"
-        >
-            <slot name="header" />
-        </div>
-        <div class="uikit-quiz-container__main" :style="customMainStyles">
+        <template v-if="quizContainerEl">
             <div
-                v-if="showSide"
-                v-breakpoint:quizContainerEl
-                v-dark="isDarkMode"
-                class="uikit-quiz-container__side"
+                v-breakpoint="{ containerEl: quizContainerEl }"
+                class="uikit-quiz-container__header"
+                :class="{'uikit-quiz-container__header--dark': isDarkMode}"
+                :style="customHeaderStyles"
             >
-                <slot name="definition"></slot>
-                <slot name="side" />
+                <slot name="header" />
+            </div>
+            <div class="uikit-quiz-container__main" :style="customMainStyles">
+                <div
+                    v-if="showSide"
+                    v-breakpoint="{ containerEl: quizContainerEl }"
+                    v-dark="isDarkMode"
+                    class="uikit-quiz-container__side"
+                >
+                    <slot name="definition"></slot>
+                    <slot name="side" />
+                </div>
+                <div
+                    v-breakpoint="{ containerEl: quizContainerEl }"
+                    class="uikit-quiz-container__question"
+                    :class="{
+                        'uikit-quiz-container__question--show-side': showSide,
+                        'uikit-quiz-container__question--dark': isDarkMode
+                    }"
+                >
+                    <slot name="question" />
+                </div>
             </div>
             <div
-                v-breakpoint:quizContainerEl
-                class="uikit-quiz-container__question"
-                :class="{
-                    'uikit-quiz-container__question--show-side': showSide,
-                    'uikit-quiz-container__question--dark': isDarkMode
-                }"
+                v-breakpoint="{ containerEl: quizContainerEl }"
+                class="uikit-quiz-container__footer"
+                :class="{'uikit-quiz-container__footer--dark': isDarkMode}"
+                :style="customFooterStyles"
             >
-                <slot name="question" />
+                <slot name="footer" />
             </div>
-        </div>
-        <div
-            v-breakpoint:quizContainerEl
-            class="uikit-quiz-container__footer"
-            :class="{'uikit-quiz-container__footer--dark': isDarkMode}"
-            :style="customFooterStyles"
-        >
-            <slot name="footer" />
-        </div>
+        </template>
     </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>
-
-    get quizContainerEl () {
-        return this.$refs['quiz-container']
-    }
 
-    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'
-        }
+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/Quiz/question.d.ts

@@ -6,12 +6,12 @@ export type TMatrixChoiceKey = `${'a' | 'd'}${1 | 2 | 3 }_${1 | 2 | 3 | 4 | 5 |
 export type TQuizMode = 'qotd' | 'quick10' | 'timed' | 'weakest' | 'missed' | 'custom'
 
 // eslint-disable-next-line max-len
-export type TContextIcon = 'quick10' | 'calendar' | 'missedQuestions' | 'subject' | 'stopwatch' | 'exam' | 'levelup' | 'pencil'
+export type TContextIcon = 'quick10' | 'calendar' | 'missedQuestions' | 'subject' | 'stopwatch' | 'exam' | 'levelup' | 'pencil' | 'link'
 
 export type TBreakPointsObject = {
-    mobile: number
-    tabletPortrait: number
-    tabletLandscape: number
+    'mobile': number
+    'tablet-portrait': number
+    'tablet-landscape': number
 }
 
 export type TChoice = { text?: string; key: TChoiceKey }

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

@@ -4,7 +4,11 @@ import { ResizeObserver as ResizeObserverPonyFill } from 'resize-observer'
 
 type TBreakpoints = { [breakpointName: string]: number }
 
-const updateBreakpointClasses = (el: HTMLElement, breakpoints?: TBreakpoints, container?: HTMLElement) => {
+const updateBreakpointClasses = (
+    el: HTMLElement,
+    breakpointsWithEl?: { breakpoints?: TBreakpoints; containerEl?: HTMLElement | null },
+    container?: HTMLElement | null
+) => {
     // calculate screen width
     const mediaBreakpoints: string[] = []
     if (window.matchMedia(`(max-width: ${MediaBreakpoints.blackBear}px)`).matches) {
@@ -20,24 +24,20 @@ const updateBreakpointClasses = (el: HTMLElement, breakpoints?: TBreakpoints, co
     const customBreakpoints: string[] = []
 
     // If no custom breakpoints passed, use default breakpoints that match design's
-    if (!breakpoints) {
-        breakpoints = {
-            'mobile': Number(MediaBreakpoints.blackBear),
-            'tablet-portrait': Number(MediaBreakpoints.brownBear),
-            'tablet-landscape': Number(MediaBreakpoints.grizzlyBear),
-            'desktop': Number(MediaBreakpoints.polarBear),
-        }
+    const appliedBreakpoints = breakpointsWithEl?.breakpoints || {
+        'mobile': Number(MediaBreakpoints.blackBear),
+        'tablet-portrait': Number(MediaBreakpoints.brownBear),
+        'tablet-landscape': Number(MediaBreakpoints.grizzlyBear),
+        'desktop': Number(MediaBreakpoints.polarBear),
     }
 
-    if (breakpoints) {
-        Object.entries(breakpoints)
-            .forEach(([ name, width ]) => {
-                breakpointSuffixes.push(name)
-                if (elWidth <= width) {
-                    customBreakpoints.push(name)
-                }
-            })
-    }
+    Object.entries(appliedBreakpoints)
+        .forEach(([ name, width ]) => {
+            breakpointSuffixes.push(name)
+            if (elWidth <= width) {
+                customBreakpoints.push(name)
+            }
+        })
 
     const classes = el.getAttribute('class')?.split(' ') || []
     const nonModifierClasses = classes.filter(className => !className.includes('--'))
@@ -65,17 +65,19 @@ const updateBreakpointClasses = (el: HTMLElement, breakpoints?: TBreakpoints, co
     }
 }
 
-const getCustomContainer = (binding: DirectiveBinding) => {
-    const bindingArg = binding.arg
-    const container = bindingArg && binding.instance && binding.instance[bindingArg as keyof typeof binding.instance]
-    return container
+const getCustomContainer = (binding: DirectiveBinding<{
+    breakpoints?: TBreakpoints
+    containerEl?: HTMLElement | null
+} | undefined>) => {
+    const container = binding.value?.containerEl
+    return container || null
 }
 
 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()
@@ -105,7 +107,10 @@ export const fixed: Directive = {
     },
 }
 
-export const breakpoint: Directive = {
+export const breakpoint: Directive<HTMLElement, {
+    breakpoints?: TBreakpoints
+    containerEl?: HTMLElement | null
+} | undefined> = {
     beforeMount (el, binding) {
         if (!el.dataset.breakpointId) {
             binding.instance?.$nextTick(() => {

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 {