@pocketprep/ui-kit 3.8.4 → 3.9.0

package/lib/components/Toasts/Toast.vue

@@ -29,7 +29,7 @@
                 <slot />
             </div>
             <div
-                v-if="$slots.subtext?.()"
+                v-if="$slots.subtext"
                 v-dark="isDarkMode"
                 class="toast__content-subtext"
             >
@@ -39,57 +39,59 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Vue, Component, Prop, Emit } from 'vue-facing-decorator'
+<script setup lang="ts">
 import Icon from '../Icons/Icon.vue'
-import { dark } from '../../directives'
-
-@Component({
-    directives: {
-        dark,
-    },
-    components: {
-        Icon,
-    },
+import { dark as vDark } from '../../directives'
+import { onMounted, ref, useTemplateRef } from 'vue'
+
+const props = withDefaults(defineProps<{
+    showCloseButton?: boolean
+    isDarkMode?: boolean
+    right?: boolean
+}>(), {
+    showCloseButton: true,
+    isDarkMode: false,
+    right: false,
 })
-export default class Toast extends Vue {
-    @Prop({ default: true }) showCloseButton!: boolean
-    @Prop({ default: false }) isDarkMode!: boolean
-    @Prop({ default: false }) right!: boolean
 
-    closeTimeout: NodeJS.Timeout | null = null
+const emit = defineEmits<{
+    'close': []
+}>()
 
-    mounted () {
-        this.setCloseTimeout()
-        const toastEl = this.$refs['toast'] as HTMLElement
+const closeTimeout = ref<NodeJS.Timeout | null>(null)
+const toastEl = useTemplateRef<HTMLElement>('toast')
 
-        setTimeout(() => {
-            toastEl.classList.add(`toast--visible${this.right ? '--right' : ''}`)
-        }, 1)
-    }
-
-    setCloseTimeout () {
-        this.closeTimeout = setTimeout(() => {
-            const toastEl = this.$refs['toast'] as HTMLElement
-            toastEl?.classList.add('toast--closing')
+onMounted(() => {
+    setCloseTimeout()
 
-            setTimeout(() => {
-                this.emitClose()
-            }, 300)
-        }, 5000)
-    }
+    setTimeout(() => {
+        if (toastEl.value) {
+            toastEl.value.classList.add(`toast--visible${props.right ? '--right' : ''}`)
+        }
+    }, 1)
+})
 
-    clearCloseTimeout () {
-        if (this.closeTimeout) {
-            clearTimeout(this.closeTimeout)
+const setCloseTimeout = () => {
+    closeTimeout.value = setTimeout(() => {
+        if (toastEl.value) {
+            toastEl.value.classList.add('toast--closing')
         }
-    }
 
-    @Emit('close')
-    emitClose () {
-        return true
+        setTimeout(() => {
+            emitClose()
+        }, 300)
+    }, 5000)
+}
+
+const clearCloseTimeout = () => {
+    if (closeTimeout.value) {
+        clearTimeout(closeTimeout.value)
     }
 }
+
+const emitClose = () => {
+    emit('close')
+}
 </script>
 
 <style lang="scss" scoped>
@@ -230,4 +232,4 @@ export default class Toast extends Vue {
         }
     }
 }
-</style>
+</style>

package/lib/components/Tooltips/OverflowTooltip.vue

@@ -27,57 +27,51 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Vue, Component } from 'vue-facing-decorator'
+<script setup lang="ts">
+import { nextTick, onMounted, onUnmounted, ref, useTemplateRef } from 'vue'
 import Tooltip from '../Tooltips/Tooltip.vue'
 
-@Component({
-    components: {
-        Tooltip,
-    },
-})
-export default class OverflowTooltip extends Vue {
-    showTooltip = false
-    textOverflows = false
-    measurementComplete = false
-    uid = Math.floor(Math.random() * 1e9)
-    intersectionObserver: IntersectionObserver | null = null
-    isVisible = false
+const showTooltip = ref(false)
+const textOverflows = ref(false)
+const measurementComplete = ref(false)
+const uid = Math.floor(Math.random() * 1e9)
+const intersectionObserver = ref<IntersectionObserver | null>(null)
+const isVisible = ref(false)
+const containerEl = useTemplateRef<HTMLDivElement>('uikit-overflow-tooltip')
+const contentEl = useTemplateRef<HTMLElement>(`content_${uid}`)
+const contentFullWidthEl = useTemplateRef<HTMLElement>(`content_fullwidth_${uid}`)
 
-    mounted () {
-        this.checkTextOverflows()
+onMounted(() => {
+    checkTextOverflows()
 
-        // Watch for changes in the element's visibility to recalculate whether the text overflows
-        const containerEl = this.$refs['uikit-overflow-tooltip'] as HTMLDivElement | undefined
-        if (containerEl) {
-            this.intersectionObserver = new IntersectionObserver((entries) => {
-                if (!this.isVisible && entries[0]?.isIntersecting) {
-                    this.measurementComplete = false
-                    this.$nextTick(() => {
-                        this.isVisible = true
-                        this.checkTextOverflows()
-                    })
-                }
-            })
-            this.intersectionObserver.observe(containerEl)
-        }
-    }
-
-    unmounted () {
-        this.intersectionObserver?.disconnect()
+    // Watch for changes in the element's visibility to recalculate whether the text overflows
+    if (containerEl.value) {
+        intersectionObserver.value = new IntersectionObserver(entries => {
+            if (!isVisible.value && entries[0]?.isIntersecting) {
+                measurementComplete.value = false
+                nextTick(() => {
+                    isVisible.value = true
+                    checkTextOverflows()
+                })
+            }
+        })
+        intersectionObserver.value.observe(containerEl.value)
     }
+})
 
-    checkTextOverflows () {
-        const content = this.$refs[`content_${this.uid}`] as HTMLElement
-        const contentFullWidth = this.$refs[`content_fullwidth_${this.uid}`] as HTMLElement
+onUnmounted(() => {
+    intersectionObserver.value?.disconnect()
+})
 
-        this.$nextTick(() => {
-            const truncatedWidth = content.getBoundingClientRect().width
-            const fullWidth = contentFullWidth.getBoundingClientRect().width
-            this.textOverflows = truncatedWidth < fullWidth
-            this.measurementComplete = true
-        })
-    }
+const checkTextOverflows = () => {
+    nextTick(() => {
+        if (contentEl.value && contentFullWidthEl.value) {
+            const truncatedWidth = contentEl.value.getBoundingClientRect().width
+            const fullWidth = contentFullWidthEl.value.getBoundingClientRect().width
+            textOverflows.value = truncatedWidth < fullWidth
+            measurementComplete.value = true
+        }
+    })
 }
 </script>
 
@@ -105,4 +99,4 @@ export default class OverflowTooltip extends Vue {
         top: calc(-100% - 14px);
     }
 }
-</style>
+</style>

package/lib/components/Tooltips/Tooltip.vue

@@ -7,7 +7,7 @@
             :id="`tooltip-${tooltipId}`"
             v-dark="isDarkMode"
             class="uikit-tooltip-popup"
-            :class="{ 
+            :class="{
                 'uikit-tooltip-popup--rightalign': theme === 'rightalign',
                 'uikit-tooltip-popup--leftalign': theme === 'leftalign'
             }"
@@ -15,7 +15,7 @@
             <div
                 v-dark="isDarkMode"
                 class="uikit-tooltip-popup__triangle"
-                :class="{ 
+                :class="{
                     'uikit-tooltip-popup__triangle--rightalign': theme === 'rightalign',
                     'uikit-tooltip-popup__triangle--leftalign': theme === 'leftalign',
                     'uikit-tooltip-popup__triangle--offset': theme === 'offset'
@@ -28,78 +28,77 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Component, Vue, Prop } from 'vue-facing-decorator'
-import { dark } from '../../directives'
-
-@Component({
-    directives: {
-        dark,
-    },
+<script setup lang="ts">
+import { nextTick, onMounted, onUnmounted } from 'vue'
+import { dark as vDark } from '../../directives'
+
+const props = withDefaults(defineProps<{
+    theme?: 'leftalign' | 'rightalign' | 'offset' | ''
+    styles?: Record<string, string> | null
+    isDarkMode?: boolean
+}>(), {
+    theme: '',
+    styles: null,
+    isDarkMode: false,
 })
-export default class Tooltip extends Vue {
-    @Prop({ default: '' }) theme!: 'leftalign' | 'rightalign' | 'offset'
-    @Prop({ default: null }) styles!: null | Record<string, string>
-    @Prop({ default: false }) isDarkMode!: boolean
-
-    tooltipId = Math.floor(Math.random() * 1000000)
-
-    mounted () {
-        this.$nextTick(() => {
-            const tooltipEl = document.querySelector(`.uikit-tooltip-popup#tooltip-${this.tooltipId}`) as HTMLElement
-            const body = document.querySelector('body') as HTMLElement
-
-            // Get original positioning before adding element to body
-            const clientRectTop = tooltipEl.getBoundingClientRect().top
-            const clientRectLeft = tooltipEl.getBoundingClientRect().left
-            const computedStyle = getComputedStyle(tooltipEl)
-            const singleLineTooltipHeight = parseInt(computedStyle.lineHeight)
-                + parseInt(computedStyle.paddingTop)
-                + parseInt(computedStyle.paddingBottom)
-
-            // Move element to body
-            tooltipEl.parentNode?.removeChild(tooltipEl)
-            body.appendChild(tooltipEl)
-            tooltipEl.style.position = 'absolute'
-            tooltipEl.style.zIndex = '1002'
-
-            // Apply Prop styles
-            const propStyle = this.styles
-            if (propStyle) {
-                Object.keys(propStyle).forEach(styleProp => {
-                    tooltipEl.style[styleProp as 'color'] = propStyle[styleProp] || ''
-                })
-                if (tooltipEl.style.backgroundColor) {
-                    const triangleEl = document.querySelector(
-                        `.uikit-tooltip-popup#tooltip-${this.tooltipId} .uikit-tooltip-popup__triangle`
-                    ) as HTMLElement
-                    triangleEl.style.borderColor = `${tooltipEl.style.backgroundColor} transparent transparent`
-                }
+
+const tooltipId = Math.floor(Math.random() * 1000000)
+
+onMounted(() => {
+    nextTick(() => {
+        const tooltipEl = document.querySelector(`.uikit-tooltip-popup#tooltip-${tooltipId}`) as HTMLElement
+        const body = document.querySelector('body') as HTMLElement
+
+        // Get original positioning before adding element to body
+        const clientRectTop = tooltipEl.getBoundingClientRect().top
+        const clientRectLeft = tooltipEl.getBoundingClientRect().left
+        const computedStyle = getComputedStyle(tooltipEl)
+        const singleLineTooltipHeight = parseInt(computedStyle.lineHeight)
+            + parseInt(computedStyle.paddingTop)
+            + parseInt(computedStyle.paddingBottom)
+
+        // Move element to body
+        tooltipEl.parentNode?.removeChild(tooltipEl)
+        body.appendChild(tooltipEl)
+        tooltipEl.style.position = 'absolute'
+        tooltipEl.style.zIndex = '1002'
+
+        // Apply Prop styles
+        const propStyle = props.styles
+        if (propStyle) {
+            Object.keys(propStyle).forEach(styleProp => {
+                tooltipEl.style[styleProp as 'color'] = propStyle[styleProp] || ''
+            })
+            if (tooltipEl.style.backgroundColor) {
+                const triangleEl = document.querySelector(
+                    `.uikit-tooltip-popup#tooltip-${tooltipId} .uikit-tooltip-popup__triangle`
+                ) as HTMLElement
+                triangleEl.style.borderColor = `${tooltipEl.style.backgroundColor} transparent transparent`
             }
+        }
 
-            // Apply horizontal positioning before vertical positioning (because the height depends on text wrap)
-            const tooltipWidth = tooltipEl.clientWidth
-            const leftOffset = this.theme === 'rightalign' 
-                ? 20
-                : this.theme === 'leftalign'
-                    ? tooltipWidth - 20
-                    : Math.floor(tooltipWidth / 2)
-            const left = Math.round(clientRectLeft + window.pageXOffset - leftOffset)
-            tooltipEl.style.left = `${left}px`
-
-            // Apply vertical positioning
-            const top = Math.round(clientRectTop + window.pageYOffset)
-                - tooltipEl.clientHeight
-                + singleLineTooltipHeight
-            tooltipEl.style.top = `${top}px`
-        })
-    }
+        // Apply horizontal positioning before vertical positioning (because the height depends on text wrap)
+        const tooltipWidth = tooltipEl.clientWidth
+        const leftOffset = props.theme === 'rightalign'
+            ? 20
+            : props.theme === 'leftalign'
+                ? tooltipWidth - 20
+                : Math.floor(tooltipWidth / 2)
+        const left = Math.round(clientRectLeft + window.pageXOffset - leftOffset)
+        tooltipEl.style.left = `${left}px`
+
+        // Apply vertical positioning
+        const top = Math.round(clientRectTop + window.pageYOffset)
+            - tooltipEl.clientHeight
+            + singleLineTooltipHeight
+        tooltipEl.style.top = `${top}px`
+    })
+})
 
-    unmounted () {
-        const tooltipEl = document.querySelector(`.uikit-tooltip-popup#tooltip-${this.tooltipId}`) as HTMLElement
-        tooltipEl.remove()
-    }
-}
+onUnmounted(() => {
+    const tooltipEl = document.querySelector(`.uikit-tooltip-popup#tooltip-${tooltipId}`) as HTMLElement
+    tooltipEl.remove()
+})
 </script>
 
 <style lang="scss">

package/lib/directives.ts

@@ -207,15 +207,15 @@ export const breakpoint: Directive<HTMLElement, {
             updateBreakpointClasses(el, binding.value, getCustomContainer(binding))
         })
     },
-    unmounted: (el) => {
+    unmounted: el => {
         removeBreakpointListeners(el)
     },
 }
 
 export const dark: Directive<HTMLElement> = (el, { value }: { value?: boolean }) => {
     const isDarkMode = !!value
-    const classes = (typeof el.className === 'string' 
-        ? el.className 
+    const classes = (typeof el.className === 'string'
+        ? el.className
         : (el.className as unknown as { baseVal: string }).baseVal).split(' ')
     if (isDarkMode) {
         if (classes.find(c => c.endsWith('--dark'))) {
@@ -231,4 +231,4 @@ export const dark: Directive<HTMLElement> = (el, { value }: { value?: boolean })
             }
         })
     }
-}
+}

package/lib/utils.ts

@@ -99,8 +99,8 @@ export const highlightKeywordsInText = (params: {
 
     // Create an array for all matching keywords and substrings with their start and end indexes
     const allMatches: { start: number; end: number; keyword: string; keywordMatch: string }[] = []
-    
-    sortedKeywords.forEach((keyword) => {
+
+    sortedKeywords.forEach(keyword => {
         const escapedKeyword = escapeRegex(keyword)
         const regex = new RegExp(`\\b${escapedKeyword}\\b`, 'gi')
 
@@ -108,7 +108,7 @@ export const highlightKeywordsInText = (params: {
         // This will include keyword matches that are substrings of other keywords
         // ie: keyword 'stakeholder' will match in a keyword string 'key stakeholder'
         const matches = Array.from(params.text.matchAll(regex))
-        matches.forEach((match) => {
+        matches.forEach(match => {
             allMatches.push({
                 start: match.index,
                 end: match.index + match[0].length,
@@ -117,7 +117,7 @@ export const highlightKeywordsInText = (params: {
             })
         })
     })
-    
+
     // Sort all matches by start index
     allMatches.sort((a, b) => a.start - b.start)
 
@@ -127,27 +127,28 @@ export const highlightKeywordsInText = (params: {
     // Create an array to track non-overlapping keyword matches
     const nonOverlappingMatches: { start: number; end: number; keyword: string; keywordMatch: string }[] = []
     // Do not include any matches that are substrings of other matches
-    allMatches.forEach((match) => {
-        const overlaps = highlightedRanges.some(range => 
+    allMatches.forEach(match => {
+        const overlaps = highlightedRanges.some(range =>
             (match.start < range.end && match.end > range.start)
         )
-        
+
         if (!overlaps) {
             nonOverlappingMatches.push(match)
             highlightedRanges.push({ start: match.start, end: match.end })
         }
     })
-    
+
     // Sort by start position again and process in reverse order to maintain positions
     nonOverlappingMatches.sort((a, b) => b.start - a.start)
 
     let result = params.text
 
-    nonOverlappingMatches.forEach((match) => {
+    nonOverlappingMatches.forEach(match => {
         const beforeMatch = result.substring(0, match.start)
         const afterMatch = result.substring(match.end)
-        const highlightedMatch = `<span class="keyword-highlight${params.isDarkMode 
-            ? ' keyword-highlight--dark' : ''}" data-location="${
+        const highlightedMatch = `<span class="keyword-highlight${params.isDarkMode
+            ? ' keyword-highlight--dark'
+            : ''}" data-location="${
             params.location}" role="button" tabindex="0" aria-label="${
             match.keywordMatch}, Instruction. Click for definition" aria-haspopup="dialog" aria-expanded="false">
                 <span style="pointer-events: none;">${match.keywordMatch}</span></span>`
@@ -164,4 +165,4 @@ export const stripHtmlTags = (string?: string) => {
         return div.textContent || ''
     }
     return ''
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pocketprep/ui-kit",
-  "version": "3.8.4",
+  "version": "3.9.0",
   "description": "Pocket Prep UI Kit",
   "author": "pocketprep",
   "scripts": {
@@ -77,34 +77,33 @@
     "highcharts": "10.3.3",
     "litepicker": "2.0.12",
     "resize-observer": "1.0.4",
-    "vue": "3.5.13",
-    "vue-facing-decorator": "3.0.4",
-    "vue-router": "4.5.0"
+    "vue": "3.5.27",
+    "vue-router": "4.6.4"
   },
   "devDependencies": {
-    "@pocketprep/types": "1.15.17",
-    "@stylistic/eslint-plugin-ts": "4.2.0",
-    "@tsconfig/node22": "22.0.0",
-    "@types/node": "22.13.10",
-    "@vitejs/plugin-vue": "5.2.3",
-    "@vue/eslint-config-typescript": "14.5.0",
-    "@vue/tsconfig": "0.7.0",
-    "cypress": "14.2.0",
-    "eslint": "9.22.0",
-    "eslint-plugin-cypress": "4.2.0",
-    "eslint-plugin-vue": "10.0.0",
+    "@pocketprep/types": "1.16.22",
+    "@stylistic/eslint-plugin": "5.7.1",
+    "@tsconfig/node24": "24.0.4",
+    "@types/node": "24.10.4",
+    "@vitejs/plugin-vue": "6.0.3",
+    "@vue/eslint-config-typescript": "14.6.0",
+    "@vue/tsconfig": "0.8.1",
+    "cypress": "15.9.0",
+    "eslint": "9.39.2",
+    "eslint-plugin-cypress": "5.2.1",
+    "eslint-plugin-vue": "10.7.0",
     "jiti": "2.4.2",
-    "npm-run-all2": "7.0.2",
-    "postcss-html": "1.8.0",
-    "sass": "1.86.0",
-    "start-server-and-test": "2.0.11",
-    "stylelint": "16.16.0",
-    "stylelint-config-recommended-scss": "14.1.0",
-    "stylelint-config-recommended-vue": "1.6.0",
-    "stylelint-config-standard-scss": "14.0.0",
-    "typescript": "5.8.2",
-    "vite": "6.2.2",
-    "vite-plugin-vue-devtools": "7.7.2",
+    "npm-run-all2": "8.0.4",
+    "postcss-html": "1.8.1",
+    "sass": "1.97.3",
+    "start-server-and-test": "2.1.3",
+    "stylelint": "16.26.1",
+    "stylelint-config-recommended-scss": "16.0.2",
+    "stylelint-config-recommended-vue": "1.6.1",
+    "stylelint-config-standard-scss": "16.0.0",
+    "typescript": "5.9.3",
+    "vite": "7.3.1",
+    "vite-plugin-vue-devtools": "8.0.5",
     "vue-tsc": "2.2.8",
     "yorkie": "2.0.0"
   },
@@ -124,7 +123,7 @@
     "url": "git+https://github.com/Pocket-Prep/ui-kit.git"
   },
   "engines": {
-    "node": "20.10.0",
-    "npm": "10.2.3"
+    "node": "24.12.0",
+    "npm": "11.6.2"
   }
 }