@pocketprep/ui-kit 3.5.28 → 3.5.30

package/lib/components/Messaging/InfoMessage.vue

@@ -1,7 +1,14 @@
 <script setup lang="ts">
 import { dark as vDark } from '../../directives'
+import Icon from '../Icons/Icon.vue'
+
 defineProps<{
     isDarkMode?: boolean
+    showCloseButton?: boolean
+}>()
+
+const emit = defineEmits<{
+    'close': []
 }>()
 </script>
 
@@ -10,6 +17,13 @@ defineProps<{
         <div v-dark="isDarkMode" class="info-message__content">
             <slot></slot>
         </div>
+        <Icon
+            v-if="showCloseButton"
+            v-dark="isDarkMode"
+            class="info-message__close-btn"
+            type="close"
+            @click="emit('close')"
+        />
     </div>
 </template>
 
@@ -18,11 +32,17 @@ defineProps<{
 @use '@/styles/colors' as *;
 
 .info-message {
+    position: relative;
     padding: 11px 16px;
     background-color: $barely-blue;
     border: 1px solid rgba($brand-blue, 0.4);
     border-radius: 6px;
 
+    &--dark {
+        background-color: rgba($brand-blue, 0.2);
+        border-color: rgba($baby-blue, 0.4);
+    }
+
     &__content {
         font-size: 15px;
         line-height: 20px;
@@ -33,9 +53,30 @@ defineProps<{
         }
     }
 
-    &--dark {
-        background-color: rgba($brand-blue, 0.2);
-        border-color: rgba($baby-blue, 0.4);
+    &__close-btn {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        width: 20px;
+        height: 20px;
+        color: $steel;
+        cursor: pointer;
+
+        @media (hover: hover) {
+            &:hover {
+                color: $brand-blue;
+            }
+        }
+
+        &--dark {
+            color: rgba($white, 0.7);
+
+            @media (hover: hover) {
+                &:hover {
+                    color: $banana-bread;
+                }
+            }
+        }
     }
 }
 </style>

package/lib/components/Quiz/Question.vue

@@ -9,7 +9,7 @@
     >
         <slot name="closeIcon">
             <Icon
-                v-breakpoint:questionEl="breakpointsWithEl"
+                v-breakpoint="breakpointsWithEl"
                 v-dark="isDarkMode"
                 class="uikit-question__close-icon"
                 role="button"

package/lib/directives.ts

@@ -1,4 +1,4 @@
-import type { Directive, DirectiveBinding } from 'vue'
+import { type Directive, type DirectiveBinding } from 'vue'
 import MediaBreakpoints from './pocketprep-export.module.scss'
 import { ResizeObserver as ResizeObserverPonyFill } from 'resize-observer'
 
@@ -107,92 +107,108 @@ export const fixed: Directive<HTMLElement> = {
     },
 }
 
-export const breakpoint: Directive<HTMLElement, {
+const addBreakpointListeners = (el: HTMLElement, binding: DirectiveBinding<{
     breakpoints?: TBreakpoints
     containerEl?: HTMLElement | null
-} | undefined> = {
-    beforeMount (el, binding) {
-        if (!el.dataset.breakpointId) {
-            binding.instance?.$nextTick(() => {
-                const breakpointId = el.dataset.breakpointId || Math.floor(Math.random() * 1e8)
-                el.dataset.breakpointId = String(breakpointId)
-
-                // Set resize event listener
-                const resizeEventListener = () => {
-                    updateBreakpointClasses(el, binding.value, getCustomContainer(binding))
-                }
-                eventListeners[breakpointId] = resizeEventListener
-                window.addEventListener('resize', resizeEventListener)
-        
-                // Set mutation observer
-                const mutationObserver = new MutationObserver(() => {
-                    updateBreakpointClasses(el, binding.value, getCustomContainer(binding))
-                })
-                mutationObservers[breakpointId] = mutationObserver
-                mutationObserver.observe(el, { attributes: true })
-        
-                // Set resize observer
-                const container = getCustomContainer(binding)
-                if (container) {
-                    const resizeObserver = window.ResizeObserver
-                        ? new ResizeObserver(() => {
-                            updateBreakpointClasses(el, binding.value, getCustomContainer(binding))
-                        })
-                        : new ResizeObserverPonyFill(() => {
-                            updateBreakpointClasses(el, binding.value, getCustomContainer(binding))
-                        })
-                    resizeObservers[breakpointId] = resizeObserver
-                    resizeObserver.observe(container)
-                } else {
-                    const resizeObserver = window.ResizeObserver
-                        ? new ResizeObserver(() => {
-                            updateBreakpointClasses(el, binding.value, getCustomContainer(binding))
-                        })
-                        : new ResizeObserverPonyFill(() => {
-                            updateBreakpointClasses(el, binding.value, getCustomContainer(binding))
-                        })
-                    resizeObservers[breakpointId] = resizeObserver
-                    resizeObserver.observe(el)
-                }
+} | undefined>) => {
+    const existingBreakpointId = el.dataset.breakpointId
+
+    // Remove existing listeners on the element if present
+    // This is essential to avoid performance issues (like when an element's container changes)
+    if (existingBreakpointId) {
+        removeBreakpointListeners(el)
+    }
+    const breakpointId = existingBreakpointId || Math.floor(Math.random() * 1e8)
+    el.dataset.breakpointId = String(breakpointId)
+
+    // Set resize event listener
+    const resizeEventListener = () => {
+        updateBreakpointClasses(el, binding.value, getCustomContainer(binding))
+    }
+    eventListeners[breakpointId] = resizeEventListener
+    window.addEventListener('resize', resizeEventListener)
+
+    // Set mutation observer
+    const mutationObserver = new MutationObserver(() => {
+        updateBreakpointClasses(el, binding.value, getCustomContainer(binding))
+    })
+    mutationObservers[breakpointId] = mutationObserver
+    mutationObserver.observe(el, { attributes: true })
+
+    // Set resize observer
+    const container = getCustomContainer(binding)
+    if (container) {
+        const resizeObserver = window.ResizeObserver
+            ? new ResizeObserver(() => {
+                updateBreakpointClasses(el, binding.value, getCustomContainer(binding))
+            })
+            : new ResizeObserverPonyFill(() => {
+                updateBreakpointClasses(el, binding.value, getCustomContainer(binding))
+            })
+        resizeObservers[breakpointId] = resizeObserver
+        resizeObserver.observe(container)
+    } else {
+        const resizeObserver = window.ResizeObserver
+            ? new ResizeObserver(() => {
+                updateBreakpointClasses(el, binding.value, getCustomContainer(binding))
+            })
+            : new ResizeObserverPonyFill(() => {
+                updateBreakpointClasses(el, binding.value, getCustomContainer(binding))
             })
+        resizeObservers[breakpointId] = resizeObserver
+        resizeObserver.observe(el)
+    }
+}
+
+const removeBreakpointListeners = (el: HTMLElement) => {
+    const breakpointId = el.dataset.breakpointId
+    if (breakpointId) {
+        // Remove event listener
+        const eventListener = eventListeners[breakpointId]
+        if (eventListener) {
+            window.removeEventListener('resize', eventListener)
+            delete eventListeners[breakpointId]
+        }
+
+        // Disconnect mutation observer
+        const mutationObserver = mutationObservers[breakpointId]
+        if (mutationObserver) {
+            mutationObserver.disconnect()
+            delete mutationObservers[breakpointId]
+        }
+
+        // Disconnect resize observer
+        const resizeObserver = resizeObservers[breakpointId]
+        if (resizeObserver) {
+            resizeObserver.disconnect()
+            delete resizeObservers[breakpointId]
         }
+
+        delete el.dataset.breakpointId
+    }
+}
+
+export const breakpoint: Directive<HTMLElement, {
+    breakpoints?: TBreakpoints
+    containerEl?: HTMLElement | null
+} | undefined> = {
+    beforeMount: (el, binding) => {
+        addBreakpointListeners(el, binding)
     },
     mounted: (el, binding) => {
+        addBreakpointListeners(el, binding)
         binding.instance?.$nextTick(() => {
             updateBreakpointClasses(el, binding.value, getCustomContainer(binding))
         })
     },
     updated: (el, binding) => {
+        addBreakpointListeners(el, binding)
         binding.instance?.$nextTick(() => {
             updateBreakpointClasses(el, binding.value, getCustomContainer(binding))
         })
     },
     unmounted: (el) => {
-        const breakpointId = el.dataset.breakpointId
-        if (breakpointId) {
-            // Remove event listener
-            const eventListener = eventListeners[breakpointId]
-            if (eventListener) {
-                window.removeEventListener('resize', eventListener)
-                delete eventListeners[breakpointId]
-            }
-
-            // Disconnect mutation observer
-            const mutationObserver = mutationObservers[breakpointId]
-            if (mutationObserver) {
-                mutationObserver.disconnect()
-                delete mutationObservers[breakpointId]
-            }
-
-            // Disconnect resize observer
-            const resizeObserver = resizeObservers[breakpointId]
-            if (resizeObserver) {
-                resizeObserver.disconnect()
-                delete resizeObservers[breakpointId]
-            }
-
-            delete el.dataset.breakpointId
-        }
+        removeBreakpointListeners(el)
     },
 }
 

package/package.json

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