@pocketprep/ui-kit 3.4.89 → 3.5.0

package/lib/components/Quiz/QuizContainer.vue

@@ -5,43 +5,45 @@
         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>
 
@@ -66,9 +68,7 @@ export default class QuizContainer extends Vue {
     @Prop({ default: () => ({}) }) customMainStyles!: Record<string, string>
     @Prop({ default: () => ({}) }) customFooterStyles!: Record<string, string>
 
-    get quizContainerEl () {
-        return this.$refs['quiz-container']
-    }
+    quizContainerEl: HTMLElement | null = null
 
     beforeUnmount () {
         const bodyEl = document.getElementsByTagName('body')[0]
@@ -82,6 +82,8 @@ export default class QuizContainer extends Vue {
         if (bodyEl) {
             bodyEl.style.overflow = 'hidden'
         }
+        const quizContainerEl = this.$refs['quiz-container'] as HTMLElement || null 
+        this.quizContainerEl = quizContainerEl
     }
 }
 </script>

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/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,10 +65,12 @@ 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>> = {}
@@ -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/styles/_breakpoints.scss

@@ -7,29 +7,23 @@ $teddy-bear: 319;
 
 @mixin breakpoint($point) {
     @if $point == 'polar-bear' {
-        @media (max-width: $polar-bear + 'px') { @content; }
+        @media (max-width: ($polar-bear + 'px')) { @content; }
     }
-
     @else if $point == 'grizzly-bear' {
-        @media (max-width: $grizzly-bear + 'px') { @content; }
+        @media (max-width: ($grizzly-bear + 'px')) { @content; }
     }
-
     @else if $point == 'brown-bear' {
-        @media (max-width: $brown-bear + 'px') { @content; }
+        @media (max-width: ($brown-bear + 'px')) { @content; }
     }
-
     @else if $point == 'black-bear' {
-        @media (max-width: $black-bear + 'px') { @content; }
+        @media (max-width: ($black-bear + 'px')) { @content; }
     }
-
     @else if $point == 'koala-bear' {
-        @media (max-width: $koala-bear + 'px') { @content; }
+        @media (max-width: ($koala-bear + 'px')) { @content; }
     }
-
     @else if $point == 'teddy-bear' {
-        @media (max-width: $teddy-bear + 'px') { @content; }
+        @media (max-width: ($teddy-bear + 'px')) { @content; }
     }
-
     @else {
         @media (max-width: $point) { @content; }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pocketprep/ui-kit",
-  "version": "3.4.89",
+  "version": "3.5.0",
   "description": "Pocket Prep UI Kit",
   "author": "pocketprep",
   "scripts": {
@@ -9,7 +9,7 @@
     "build-only": "vite build && vite build --config vite.config.docs.ts",
     "preview": "vite preview --config vite.config.docs.ts",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --ignore-path .gitignore && stylelint '**/*.{scss,vue}'",
-    "type-check": "vue-tsc --noEmit -p tsconfig.json --composite false",
+    "type-check": "vue-tsc --noEmit -p tsconfig.cypress-ct.json --composite false",
     "test:e2e": "start-server-and-test preview :4173 'cypress run --e2e'",
     "test:e2e:dev": "start-server-and-test 'vite dev --port 4173' :4173 'cypress open --e2e'",
     "test:unit": "cypress run --component",
@@ -73,7 +73,7 @@
     "highcharts": "10.3.3",
     "litepicker": "2.0.12",
     "resize-observer": "1.0.4",
-    "vue": "3.4.15",
+    "vue": "3.5.13",
     "vue-facing-decorator": "2.1.20",
     "vue-router": "4.2.5"
   },
@@ -87,7 +87,7 @@
     "cypress": "12.0.2",
     "eslint": "8.34.0",
     "eslint-plugin-cypress": "2.12.1",
-    "eslint-plugin-vue": "9.9.0",
+    "eslint-plugin-vue": "9.32.0",
     "npm-run-all": "4.1.5",
     "postcss-html": "1.5.0",
     "sass": "1.58.3",