@fy-/fws-vue 2.3.11 → 2.3.12

package/components/ui/DefaultModal.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { XCircleIcon } from '@heroicons/vue/24/solid'
-import { h, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useDebounceFn, useEventListener } from '@vueuse/core'
+import { h, nextTick, onMounted, onUnmounted, ref, shallowRef, watch } from 'vue'
 import { useEventBus } from '../../composables/event-bus'
 
 // Use a shared global registry in the window to track all modals across instances
@@ -83,23 +84,32 @@ let focusableElements: HTMLElement[] = []
 const baseZIndex = 40 // Starting z-index value
 const zIndex = ref<number>(baseZIndex)
 
-// Trap focus within modal for accessibility
+// Cache the modal ID to avoid repeated string concatenation
+const modalId = shallowRef(`${props.id}Modal`)
+const modalUniqueId = shallowRef('')
+
+// Trap focus within modal for accessibility - memoize selector for better performance
+const focusableSelector = 'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'
+
 function getFocusableElements(element: HTMLElement): HTMLElement[] {
   return Array.from(
-    element.querySelectorAll(
-      'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])',
-    ),
+    element.querySelectorAll(focusableSelector),
   ).filter(
     el => !el.hasAttribute('disabled') && !el.getAttribute('aria-hidden'),
   ) as HTMLElement[]
 }
 
+// Use VueUse's useEventListener for better event handling
+function setupKeydownListener() {
+  useEventListener(document, 'keydown', handleKeyDown)
+}
+
 function handleKeyDown(event: KeyboardEvent) {
   // Only handle events for the top-most modal
   if (!isOpen.value) return
 
   // Check if this modal is the top-most one
-  const isTopMost = isTopMostModal(props.id)
+  const isTopMost = isTopMostModal(modalUniqueId.value)
   if (!isTopMost) {
     return
   }
@@ -107,7 +117,8 @@ function handleKeyDown(event: KeyboardEvent) {
   // Close on escape
   if (event.key === 'Escape') {
     event.preventDefault()
-    setModal(false)
+    // Use direct state to avoid the use-before-define issue
+    isOpen.value = false
     return
   }
 
@@ -141,7 +152,7 @@ function isTopMostModal(id: string): boolean {
   return highestEntry[0] === id
 }
 
-function setModal(value: boolean) {
+const setModal = useDebounceFn((value: boolean) => {
   if (value === true) {
     if (props.onOpen) props.onOpen()
     previouslyFocusedElement = document.activeElement as HTMLElement
@@ -149,8 +160,9 @@ function setModal(value: boolean) {
     // Get the next z-index from the global registry
     const newZIndex = modalRegistry.getNextZIndex()
 
-    // Register this modal in the global registry with a unique ID (combines component id with instance id)
+    // Register this modal in the global registry with a unique ID
     const uniqueId = `${props.id}-${Date.now()}`
+    modalUniqueId.value = uniqueId
     modalRegistry.modals.set(uniqueId, newZIndex)
 
     // Store the unique ID as a data attribute for future reference
@@ -164,27 +176,22 @@ function setModal(value: boolean) {
     // Set this modal's z-index
     zIndex.value = newZIndex
 
-    document.addEventListener('keydown', handleKeyDown)
+    setupKeydownListener()
   }
   if (value === false) {
     if (props.onClose) props.onClose()
 
     // Find and remove this modal from the registry
-    const modalElement = document.querySelector(`[data-modal-id="${props.id}"]`) as HTMLElement
-    if (modalElement) {
-      const uniqueId = modalElement.getAttribute('data-modal-unique-id')
-      if (uniqueId) {
-        modalRegistry.modals.delete(uniqueId)
-      }
+    if (modalUniqueId.value) {
+      modalRegistry.modals.delete(modalUniqueId.value)
     }
 
-    document.removeEventListener('keydown', handleKeyDown)
     if (previouslyFocusedElement) {
       previouslyFocusedElement.focus()
     }
   }
   isOpen.value = value
-}
+}, 50)
 
 // After modal is opened, set focus and collect focusable elements
 watch(isOpen, async (newVal) => {
@@ -193,49 +200,44 @@ watch(isOpen, async (newVal) => {
     if (modalRef.value) {
       focusableElements = getFocusableElements(modalRef.value)
 
-      // Focus the first focusable element or the close button if available
-      const closeButton = modalRef.value.querySelector('button[aria-label="Close modal"]') as HTMLElement
-      if (closeButton) {
-        closeButton.focus()
-      }
-      else if (focusableElements.length > 0) {
-        focusableElements[0].focus()
-      }
-      else {
-        // If no focusable elements, focus the modal itself
-        modalRef.value.focus()
-      }
+      // Focus the close button or first focusable element
+      requestAnimationFrame(() => {
+        const closeButton = modalRef.value?.querySelector('button[aria-label="Close modal"]') as HTMLElement
+        if (closeButton) {
+          closeButton.focus()
+        }
+        else if (focusableElements.length > 0) {
+          focusableElements[0].focus()
+        }
+        else {
+          // If no focusable elements, focus the modal itself
+          modalRef.value?.focus()
+        }
+      })
     }
   }
 })
 
 onMounted(() => {
-  eventBus.on(`${props.id}Modal`, setModal)
+  eventBus.on(modalId.value, setModal)
 })
 
 onUnmounted(() => {
-  eventBus.off(`${props.id}Modal`, setModal)
-  document.removeEventListener('keydown', handleKeyDown)
+  eventBus.off(modalId.value, setModal)
 
   // Clean up the modal registry if this modal was open when unmounted
-  if (isOpen.value) {
-    const modalElement = document.querySelector(`[data-modal-id="${props.id}"]`) as HTMLElement
-    if (modalElement) {
-      const uniqueId = modalElement.getAttribute('data-modal-unique-id')
-      if (uniqueId) {
-        modalRegistry.modals.delete(uniqueId)
-      }
-    }
+  if (isOpen.value && modalUniqueId.value) {
+    modalRegistry.modals.delete(modalUniqueId.value)
   }
 })
 
-// Click outside to close
-function handleBackdropClick(event: MouseEvent) {
+// Click outside to close - use debounce to prevent accidental double-clicks
+const handleBackdropClick = useDebounceFn((event: MouseEvent) => {
   // Close only if clicking the backdrop, not the modal content
   if (event.target === event.currentTarget) {
     setModal(false)
   }
-}
+}, 200)
 </script>
 
 <template>

package/components/ui/DefaultNotif.vue

@@ -7,7 +7,8 @@ import {
   SparklesIcon,
   XMarkIcon,
 } from '@heroicons/vue/24/solid'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { useDebounceFn, useRafFn } from '@vueuse/core'
+import { computed, onMounted, onUnmounted, ref, shallowRef } from 'vue'
 import { useEventBus } from '../../composables/event-bus'
 import ScaleTransition from './transitions/ScaleTransition.vue'
 
@@ -30,7 +31,7 @@ interface NotifProps {
 const eventBus = useEventBus()
 
 /** Current displayed notification */
-const currentNotif = ref<NotifProps | null>(null)
+const currentNotif = shallowRef<NotifProps | null>(null)
 
 /** Progress percentage (0 to 100) for the notification's life */
 const progress = ref(0)
@@ -40,7 +41,7 @@ const isPaused = ref(false)
 
 /** References to setTimeout / setInterval so we can clear them properly */
 let hideTimeout: ReturnType<typeof setTimeout> | null = null
-let progressInterval: ReturnType<typeof setInterval> | null = null
+let rafStop: Function | null = null
 
 /**
  * Primary logic when a 'SendNotif' event is called.
@@ -48,7 +49,7 @@ let progressInterval: ReturnType<typeof setInterval> | null = null
  * - Sets up the new notification
  * - Starts a progress bar
  */
-function onCall(data: NotifProps) {
+const onCall = useDebounceFn((data: NotifProps) => {
   // If there's an existing notification, remove it first
   hideNotif()
 
@@ -68,19 +69,30 @@ function onCall(data: NotifProps) {
   // (A) Hide the notification after the specified time
   hideTimeout = setTimeout(() => hideNotif(), data.time)
 
-  // (B) Animate the progress bar from 0 to 100% within that time
+  // (B) Use requestAnimationFrame for smoother animation
   progress.value = 0
-  progressInterval = setInterval(() => {
-    if (currentNotif.value && data.time && !isPaused.value) {
-      // update progress based on a 100ms tick
-      progress.value += (100 / (data.time / 100))
-      // if progress hits or exceeds 100, hide
-      if (progress.value >= 100) {
-        hideNotif()
-      }
+  const startTime = performance.now()
+  const duration = Number(data.time || 5000)
+
+  const { pause } = useRafFn((timestamp) => {
+    if (isPaused.value) return
+
+    const elapsed = timestamp.timestamp - startTime
+    const newProgress = Math.min(100, (elapsed / duration) * 100)
+    progress.value = newProgress
+
+    if (newProgress >= 100) {
+      hideNotif()
     }
-  }, 100)
-}
+  })
+
+  rafStop = pause
+
+  // Pause if initially paused
+  if (isPaused.value) {
+    pause()
+  }
+}, 50)
 
 /**
  * Clears everything related to the current notification
@@ -94,9 +106,10 @@ function hideNotif() {
     clearTimeout(hideTimeout)
     hideTimeout = null
   }
-  if (progressInterval) {
-    clearInterval(progressInterval)
-    progressInterval = null
+
+  if (rafStop) {
+    rafStop()
+    rafStop = null
   }
 }
 
@@ -126,96 +139,83 @@ function resumeTimer() {
 }
 
 /** Execute CTA action if provided */
-function handleCtaClick() {
+const handleCtaClick = useDebounceFn(() => {
   if (currentNotif.value?.ctaAction) {
     currentNotif.value.ctaAction()
   }
-}
+}, 300)
 
-/** Get ARIA label based on notification type */
+/** Get ARIA label based on notification type - moved to computed for caching */
 const ariaDescribedBy = computed(() => {
   if (!currentNotif.value) return ''
   return `notif-${currentNotif.value.type || 'info'}`
 })
 
+// Color computation mapping - reduces repeated switch statements
+const typeColorMap = {
+  success: {
+    bg: 'bg-green-50 dark:bg-green-900/20',
+    border: 'border-green-300 dark:border-green-700',
+    text: 'text-green-800 dark:text-green-200',
+    icon: 'text-green-500 dark:text-green-400',
+    progress: 'bg-green-500 dark:bg-green-400',
+  },
+  warning: {
+    bg: 'bg-amber-50 dark:bg-amber-900/20',
+    border: 'border-amber-300 dark:border-amber-700',
+    text: 'text-amber-800 dark:text-amber-200',
+    icon: 'text-amber-500 dark:text-amber-400',
+    progress: 'bg-amber-500 dark:bg-amber-400',
+  },
+  secret: {
+    bg: 'bg-fuchsia-50 dark:bg-fuchsia-900/20',
+    border: 'border-fuchsia-300 dark:border-fuchsia-700',
+    text: 'text-fuchsia-800 dark:text-fuchsia-200',
+    icon: 'text-fuchsia-500 dark:text-fuchsia-400',
+    progress: 'bg-fuchsia-500 dark:bg-fuchsia-400',
+  },
+  info: {
+    bg: 'bg-blue-50 dark:bg-blue-900/20',
+    border: 'border-blue-300 dark:border-blue-700',
+    text: 'text-blue-800 dark:text-blue-200',
+    icon: 'text-blue-500 dark:text-blue-400',
+    progress: 'bg-blue-500 dark:bg-blue-400',
+  },
+}
+
 /** Get background color based on notification type */
 const bgColor = computed(() => {
   if (!currentNotif.value) return ''
-
-  switch (currentNotif.value.type) {
-    case 'success':
-      return 'bg-green-50 dark:bg-green-900/20'
-    case 'warning':
-      return 'bg-amber-50 dark:bg-amber-900/20'
-    case 'secret':
-      return 'bg-fuchsia-50 dark:bg-fuchsia-900/20'
-    default: // info
-      return 'bg-blue-50 dark:bg-blue-900/20'
-  }
+  const type = currentNotif.value.type || 'info'
+  return typeColorMap[type].bg
 })
 
 /** Get border color based on notification type */
 const borderColor = computed(() => {
   if (!currentNotif.value) return ''
-
-  switch (currentNotif.value.type) {
-    case 'success':
-      return 'border-green-300 dark:border-green-700'
-    case 'warning':
-      return 'border-amber-300 dark:border-amber-700'
-    case 'secret':
-      return 'border-fuchsia-300 dark:border-fuchsia-700'
-    default: // info
-      return 'border-blue-300 dark:border-blue-700'
-  }
+  const type = currentNotif.value.type || 'info'
+  return typeColorMap[type].border
 })
 
 /** Get text color based on notification type */
 const textColor = computed(() => {
   if (!currentNotif.value) return ''
-
-  switch (currentNotif.value.type) {
-    case 'success':
-      return 'text-green-800 dark:text-green-200'
-    case 'warning':
-      return 'text-amber-800 dark:text-amber-200'
-    case 'secret':
-      return 'text-fuchsia-800 dark:text-fuchsia-200'
-    default: // info
-      return 'text-blue-800 dark:text-blue-200'
-  }
+  const type = currentNotif.value.type || 'info'
+  return typeColorMap[type].text
 })
 
 /** Get icon color based on notification type */
 const iconColor = computed(() => {
   if (!currentNotif.value) return ''
-
-  switch (currentNotif.value.type) {
-    case 'success':
-      return 'text-green-500 dark:text-green-400'
-    case 'warning':
-      return 'text-amber-500 dark:text-amber-400'
-    case 'secret':
-      return 'text-fuchsia-500 dark:text-fuchsia-400'
-    default: // info
-      return 'text-blue-500 dark:text-blue-400'
-  }
+  const type = currentNotif.value.type || 'info'
+  return typeColorMap[type].icon
 })
 
 /** Get progress bar color based on notification type */
 const progressColor = computed(() => {
   if (!currentNotif.value) return ''
-
-  switch (currentNotif.value.type) {
-    case 'success':
-      return 'bg-green-500 dark:bg-green-400'
-    case 'warning':
-      return 'bg-amber-500 dark:bg-amber-400'
-    case 'secret':
-      return 'bg-fuchsia-500 dark:bg-fuchsia-400'
-    default: // info
-      return 'bg-blue-500 dark:bg-blue-400'
-  }
+  const type = currentNotif.value.type || 'info'
+  return typeColorMap[type].progress
 })
 
 /**
@@ -230,6 +230,7 @@ onMounted(() => {
  */
 onUnmounted(() => {
   eventBus.off('SendNotif', onCall)
+  hideNotif()
 })
 </script>
 

package/components/ui/DefaultPaging.vue

@@ -5,7 +5,8 @@ import type { APIPaging } from '../../composables/rest'
 import { getURL, hasFW } from '@fy-/fws-js'
 import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/24/solid'
 import { useServerHead } from '@unhead/vue'
-import { computed, onMounted, ref, watch } from 'vue'
+import { useDebounceFn } from '@vueuse/core'
+import { computed, onMounted, shallowRef, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { useEventBus } from '../../composables/event-bus'
 import { useServerRouter } from '../../stores/serverRouter'
@@ -27,120 +28,150 @@ const route = useRoute()
 const eventBus = useEventBus()
 const history = useServerRouter()
 
+// Using shallowRef for non-reactive values
+const isMounted = shallowRef(false)
+const pageWatcher = shallowRef<WatchStopHandle>()
+
+// Memoize the hash string to avoid repeated computation
+const hashString = computed(() => props.hash !== '' ? `#${props.hash}` : undefined)
+
+// Check if a page is valid to navigate to
 function isNewPage(page: number) {
   return (
     page >= 1 && page <= props.items.page_max && page !== props.items.page_no
   )
 }
 
-const pageWatcher = ref<WatchStopHandle>()
-
-function next() {
+// Debounced navigation functions to prevent rapid clicks
+const next = useDebounceFn(() => {
   const page = props.items.page_no + 1
 
   if (!isNewPage(page)) return
+
   const newQuery = { ...route.query }
   newQuery.page = page.toString()
+
   history.push({
     path: history.currentRoute.path,
     query: newQuery,
-    hash: props.hash !== '' ? `#${props.hash}` : undefined,
+    hash: hashString.value,
   })
-}
+}, 300)
 
-function prev() {
+const prev = useDebounceFn(() => {
   const page = props.items.page_no - 1
+
   if (!isNewPage(page)) return
+
   const newQuery = { ...route.query }
   newQuery.page = page.toString()
+
   history.push({
     path: history.currentRoute.path,
     query: newQuery,
-    hash: props.hash !== '' ? `#${props.hash}` : undefined,
+    hash: hashString.value,
   })
-}
+}, 300)
 
+// Extract route generation to a reusable function to reduce duplicated code
 function page(page: number): RouteLocationRaw {
+  if (!isNewPage(page)) {
+    // Return current route if the page is not valid
+    return {
+      path: history.currentRoute.path,
+      query: route.query,
+      hash: hashString.value,
+    }
+  }
+
   const newQuery = { ...route.query }
   newQuery.page = page.toString()
+
   return {
     path: history.currentRoute.path,
     query: newQuery,
-    hash: props.hash !== '' ? `#${props.hash}` : undefined,
+    hash: hashString.value,
   }
 }
-const isMounted = ref(false)
+
+// Watch for route changes to trigger page change events
 pageWatcher.value = watch(
   () => route.query.page,
   (v, oldValue) => {
+    // Skip if component is not mounted or value hasn't changed
     if (v === oldValue || !isMounted.value) return
+
+    // Emit page change event with fallback to page 1
     eventBus.emit(`${props.id}GoToPage`, v || 1)
   },
 )
 
-// Compute pagination links for useHead
+// Compute pagination links for SEO head tags with performance optimizations
 const paginationLinks = computed(() => {
+  // Early exit if basic conditions aren't met
+  if (!hasFW() || props.items.page_max <= 1) {
+    return []
+  }
+
   const result: any[] = []
   const page_max = Number(props.items.page_max)
+  const url = getURL()
 
-  let next
-  let prev
+  if (!url) return result
 
-  if (hasFW()) {
-    const url = getURL()
-    if (url) {
-      // Parse the canonical URL to get the base URL and current query parameters
-      const canonicalUrl = new URL(url.Canonical)
+  try {
+    // Parse the canonical URL once
+    const canonicalUrl = new URL(url.Canonical)
+    const baseUrl = `${url.Scheme}://${url.Host}${url.Path}`
 
-      const baseUrl = `${url.Scheme}://${url.Host}${url.Path}`
-      const currentQuery: Record<string, string> = {}
-      canonicalUrl.searchParams.forEach((value, key) => {
-        currentQuery[key] = value
-      })
-      // Remove the existing 'page' parameter to avoid duplicates
-      const page = Number(currentQuery.page)
-
-      delete currentQuery.page
+    // Build query params object
+    const currentQuery: Record<string, string> = {}
+    canonicalUrl.searchParams.forEach((value, key) => {
+      currentQuery[key] = value
+    })
 
-      const hashPart = props.hash !== '' ? `#${props.hash}` : ''
+    // Get current page and create hash part once
+    const page = Number(currentQuery.page) || 1
+    const hashPart = props.hash !== '' ? `#${props.hash}` : ''
 
-      if (page + 1 <= page_max) {
-        const nextQuery = { ...currentQuery, page: (page + 1).toString() }
-        const nextQueryString = new URLSearchParams(nextQuery).toString()
-        next = `${baseUrl}?${nextQueryString}${hashPart}`
-      }
+    // Remove page from query params to avoid duplicates
+    delete currentQuery.page
 
-      if (page - 1 >= 1) {
-        const prevQuery = { ...currentQuery, page: (page - 1).toString() }
-        const prevQueryString = new URLSearchParams(prevQuery).toString()
-        prev = `${baseUrl}?${prevQueryString}${hashPart}`
-      }
+    // Add next link if applicable
+    if (page + 1 <= page_max) {
+      const nextQuery = { ...currentQuery, page: (page + 1).toString() }
+      const nextQueryString = new URLSearchParams(nextQuery).toString()
+      result.push({
+        rel: 'next',
+        href: `${baseUrl}?${nextQueryString}${hashPart}`,
+        key: `paging-next${props.id}`,
+        hid: `paging-next${props.id}`,
+        id: `paging-next${props.id}`,
+      })
     }
-  }
 
-  if (next) {
-    result.push({
-      rel: 'next',
-      href: next,
-      key: `paging-next${props.id}`,
-      hid: `paging-next${props.id}`,
-      id: `paging-next${props.id}`,
-    })
+    // Add prev link if applicable
+    if (page - 1 >= 1) {
+      const prevQuery = { ...currentQuery, page: (page - 1).toString() }
+      const prevQueryString = new URLSearchParams(prevQuery).toString()
+      result.push({
+        rel: 'prev',
+        href: `${baseUrl}?${prevQueryString}${hashPart}`,
+        key: `paging-prev${props.id}`,
+        hid: `paging-prev${props.id}`,
+        id: `paging-prev${props.id}`,
+      })
+    }
   }
-  if (prev) {
-    result.push({
-      rel: 'prev',
-      href: prev,
-      key: `paging-prev${props.id}`,
-      hid: `paging-prev${props.id}`,
-      id: `paging-prev${props.id}`,
-    })
+  catch (e) {
+    // Silently fail if URL parsing fails
+    console.error('Error generating pagination links:', e)
   }
 
   return result
 })
 
-// Use useHead outside of any reactive context to ensure it runs during SSR
+// Set head tags using useServerHead
 useServerHead({
   link: paginationLinks.value,
 })