@fy-/fws-vue 2.3.11 → 2.3.12

package/components/ui/DefaultBreadcrumb.vue

@@ -4,6 +4,7 @@ import { getURL, stringHash } from '@fy-/fws-js'
 import { ChevronRightIcon, HomeIcon } from '@heroicons/vue/24/solid'
 import { defineBreadcrumb } from '@unhead/schema-org'
 import { useSchemaOrg } from '@unhead/schema-org/vue'
+import { computed } from 'vue'
 
 const props = withDefaults(
   defineProps<{
@@ -16,27 +17,46 @@ const props = withDefaults(
   },
 )
 
-const breadcrumbsSchemaFormat = props.nav.map((item, index) => {
-  const fullUrl = `${
-    getURL().Host
-  }${item.to}`.replace(/\/\//g, '/')
+// Memoize URL computation
+const baseUrl = computed(() => {
+  const url = getURL()
+  return {
+    host: url.Host,
+    scheme: url.Scheme,
+  }
+})
+
+// Memoize breadcrumb schema format to avoid recalculation
+const breadcrumbsSchemaFormat = computed(() => props.nav.map((item, index) => {
+  if (!item.to) {
+    return {
+      'position': index + 1,
+      'name': item.name,
+      '@type': 'ListItem',
+    }
+  }
+
+  const fullUrl = `${baseUrl.value.host}${item.to}`.replace(/\/\//g, '/')
   return {
     'position': index + 1,
     'name': item.name,
-    'item': item.to
-      ? `${getURL().Scheme}://${fullUrl}`
-      : undefined,
+    'item': `${baseUrl.value.scheme}://${fullUrl}`,
     '@type': 'ListItem',
   }
-})
-function getBreadcrumbID() {
+}))
+
+// Cache breadcrumb ID to avoid string operations on every render
+const breadcrumbId = computed(() => {
+  if (!props.nav.length) return ''
   const chain = props.nav.map(item => item.name).join(' > ')
   return stringHash(chain)
-}
+})
+
+// Only run schema.org setup if we have breadcrumbs
 if (props.nav && props.nav.length) {
   useSchemaOrg([
     defineBreadcrumb({
-      '@id': `#${getBreadcrumbID()}`,
+      '@id': `#${breadcrumbId.value}`,
       'itemListElement': breadcrumbsSchemaFormat,
     }),
   ])

package/components/ui/DefaultConfirm.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useDebounceFn } from '@vueuse/core'
 import { nextTick, onMounted, onUnmounted, ref } from 'vue'
 import { useEventBus } from '../../composables/event-bus'
 import DefaultModal from './DefaultModal.vue'
@@ -17,12 +18,12 @@ interface ConfirmModalData {
   onConfirm: Function
 }
 
-async function _onConfirm() {
+const _onConfirm = useDebounceFn(async () => {
   if (onConfirm.value) {
     await onConfirm.value()
   }
   resetConfirm()
-}
+}, 300)
 
 function resetConfirm() {
   title.value = null
@@ -43,9 +44,8 @@ function showConfirm(data: ConfirmModalData) {
   // Emit event first to ensure it's registered before opening the modal
   eventBus.emit('confirmModal', true)
 
-  // Force this to happen at the end of the event loop
-  // to ensure it happens after any other modal operations
-  setTimeout(() => {
+  // Use requestAnimationFrame instead of setTimeout for better performance
+  requestAnimationFrame(() => {
     isOpen.value = true
     eventBus.emit('confirmModal', true)
 
@@ -57,7 +57,7 @@ function showConfirm(data: ConfirmModalData) {
       catch {
       }
     })
-  }, 0)
+  })
 }
 
 onMounted(() => {

package/components/ui/DefaultDateSelection.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { useDebounceFn } from '@vueuse/core'
 import { computed } from 'vue'
 import { DefaultInput } from '../..'
 
@@ -22,10 +23,15 @@ const props = withDefaults(
 
 const emit = defineEmits(['update:modelValue'])
 
+// Use debounced emitter to reduce update frequency
+const emitUpdate = useDebounceFn((value: DateInterval) => {
+  emit('update:modelValue', value)
+}, 150)
+
 const model = computed({
   get: () => props.modelValue,
   set: (items) => {
-    emit('update:modelValue', items)
+    emitUpdate(items)
   },
 })
 </script>

package/components/ui/DefaultDropdown.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref } from 'vue'
+import { onClickOutside, useEventListener } from '@vueuse/core'
+import { onMounted, shallowRef } from 'vue'
 import ScaleTransition from './transitions/ScaleTransition.vue'
 
 const props = defineProps<{
@@ -16,31 +17,22 @@ const props = defineProps<{
   closeDropdown: () => void
 }>()
 
-const dropdownRef = ref<HTMLElement | null>(null)
-
-// Custom implementation of click-outside functionality
-function handleClickOutsideElement(event: MouseEvent) {
-  if (props.preventClickOutside) return
-
-  if (props.show && dropdownRef.value && !dropdownRef.value.contains(event.target as Node)) {
-    props.handleClickOutside()
-  }
-}
-
-function handleCloseOnEscape(event: KeyboardEvent) {
-  if (['Escape', 'Esc'].includes(event.key)) {
-    props.closeDropdown()
-  }
-}
+const dropdownRef = shallowRef<HTMLElement | null>(null)
 
+// Use VueUse's onClickOutside for more efficient click handling
 onMounted(() => {
-  document.addEventListener('keydown', handleCloseOnEscape)
-  document.addEventListener('click', handleClickOutsideElement)
-})
+  onClickOutside(dropdownRef, (_event) => {
+    if (!props.preventClickOutside && props.show) {
+      props.handleClickOutside()
+    }
+  })
 
-onUnmounted(() => {
-  document.removeEventListener('keydown', handleCloseOnEscape)
-  document.removeEventListener('click', handleClickOutsideElement)
+  // Use VueUse's useEventListener for cleaner event management
+  useEventListener(document, 'keydown', (event: KeyboardEvent) => {
+    if (['Escape', 'Esc'].includes(event.key) && props.show) {
+      props.closeDropdown()
+    }
+  })
 })
 </script>
 

package/components/ui/DefaultDropdownLink.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useDebounceFn } from '@vueuse/core'
 import { computed } from 'vue'
 
 const props = defineProps<{
@@ -7,21 +8,28 @@ const props = defineProps<{
   color?: string
 }>()
 
+// Fixed class strings to avoid string recreation on each render
 const baseClasses = `w-full px-4 py-3 flex items-center border-b opacity-60 
-dark:opacity-70 outline-none text-sm  border-fv-neutral-200 dark:border-fv-neutral-600 
+dark:opacity-70 outline-none text-sm border-fv-neutral-200 dark:border-fv-neutral-600 
 transition-all duration-200`
 
-const colorClasses = computed(() => {
-  if (props.color === 'danger') {
-    return 'text-red-500 dark:hover:text-red-50 hover:bg-red-50 active:bg-red-100 dark:hover:bg-red-900'
-  }
-  else {
-    return `text-black dark:text-white active:bg-fv-neutral-100 dark:hover:bg-fv-neutral-600 
-        dark:focus:bg-fv-neutral-600 hover:bg-fv-neutral-50`
-  }
-})
+// Cache color classes to avoid recomputation
+const dangerClasses = 'text-red-500 dark:hover:text-red-50 hover:bg-red-50 active:bg-red-100 dark:hover:bg-red-900'
+const defaultClasses = `text-black dark:text-white active:bg-fv-neutral-100 dark:hover:bg-fv-neutral-600 
+dark:focus:bg-fv-neutral-600 hover:bg-fv-neutral-50`
 
+// Memoize color classes
+const colorClasses = computed(() =>
+  props.color === 'danger' ? dangerClasses : defaultClasses,
+)
+
+// Memoize final classes to avoid string concatenation on each render
 const classes = computed(() => `${baseClasses} ${colorClasses.value}`)
+
+// Debounce click handler to prevent rapid clicks
+const debouncedClick = props.handleClick
+  ? useDebounceFn(props.handleClick, 150)
+  : undefined
 </script>
 
 <template>
@@ -30,7 +38,7 @@ const classes = computed(() => `${baseClasses} ${colorClasses.value}`)
     :class="classes"
     role="menuitem"
     type="button"
-    @click.prevent="props.handleClick"
+    @click.prevent="debouncedClick || props.handleClick"
   >
     <slot />
   </button>

package/components/ui/DefaultGallery.vue

@@ -9,7 +9,8 @@ import {
   InformationCircleIcon,
   XMarkIcon,
 } from '@heroicons/vue/24/solid'
-import { computed, h, nextTick, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
+import { useDebounceFn, useEventListener, useFullscreen, useResizeObserver } from '@vueuse/core'
+import { computed, h, nextTick, onMounted, onUnmounted, reactive, ref, shallowRef, watch } from 'vue'
 import { useEventBus } from '../../composables/event-bus'
 import DefaultPaging from './DefaultPaging.vue'
 
@@ -21,6 +22,21 @@ const isFullscreen = ref<boolean>(false)
 const infoPanel = ref<boolean>(true) // Show info panel by default
 const touchStartTime = ref<number>(0)
 const infoHeight = ref<number>(0)
+const galleryContainerRef = shallowRef<HTMLElement | null>(null)
+
+// Use VueUse's useFullscreen for better fullscreen handling
+const { isFullscreen: isElementFullscreen, enter: enterFullscreen, exit: exitFullscreen } = useFullscreen(galleryContainerRef)
+
+// Track when fullscreen changes externally (like Escape key)
+watch(isElementFullscreen, (newValue) => {
+  isFullscreen.value = newValue
+  if (newValue) {
+    // Force update of image size when entering fullscreen
+    nextTick(() => {
+      updateImageSizes()
+    })
+  }
+})
 
 const props = withDefaults(
   defineProps<{
@@ -72,14 +88,34 @@ const modelValue = computed({
 const direction = ref<'next' | 'prev'>('next')
 
 let controlsTimeout: number | null = null
+let fullscreenResizeTimeout: number | null = null
+
+// Used to maintain consistent image sizes
+function updateImageSizes() {
+  nextTick(() => {
+    const imageContainers = document.querySelectorAll('.image-container img, .image-container .video-component') as NodeListOf<HTMLElement>
+    if (imageContainers && imageContainers.length > 0) {
+      imageContainers.forEach((img) => {
+        // Force a reflow to ensure correct sizing
+        if (img.style.maxHeight) {
+          const currentMaxHeight = img.style.maxHeight
+          img.style.maxHeight = ''
+          // Force browser to recalculate styles
+          void img.offsetHeight
+          img.style.maxHeight = currentMaxHeight
+        }
+      })
+    }
+  })
+}
 
 function setModal(value: boolean) {
   if (value === true) {
     if (props.onOpen) props.onOpen()
     document.body.style.overflow = 'hidden' // Prevent scrolling when gallery is open
     if (!import.meta.env.SSR) {
-      document.addEventListener('keydown', handleKeyboardInput)
-      document.addEventListener('keyup', handleKeyboardRelease)
+      useEventListener(document, 'keydown', handleKeyboardInput)
+      useEventListener(document, 'keyup', handleKeyboardRelease)
     }
     // Auto-hide controls after 3 seconds on mobile
     if (window.innerWidth < 1024) {
@@ -91,27 +127,23 @@ function setModal(value: boolean) {
   else {
     if (props.onClose) props.onClose()
     document.body.style.overflow = '' // Restore scrolling
-    if (!import.meta.env.SSR) {
-      document.removeEventListener('keydown', handleKeyboardInput)
-      document.removeEventListener('keyup', handleKeyboardRelease)
+    // Exit fullscreen if active
+    if (isFullscreen.value) {
+      exitFullscreen()
+      isFullscreen.value = false
     }
     // Clear timeout if modal is closed
     if (controlsTimeout) {
       clearTimeout(controlsTimeout)
       controlsTimeout = null
     }
-    // Exit fullscreen if active
-    if (isFullscreen.value && document.exitFullscreen) {
-      document.exitFullscreen().catch(() => {})
-      isFullscreen.value = false
-    }
   }
   isGalleryOpen.value = value
   showControls.value = true
   // Don't reset info panel state when opening/closing
 }
 
-function openGalleryImage(index: number | undefined) {
+const openGalleryImage = useDebounceFn((index: number | undefined) => {
   if (index === undefined) {
     modelValue.value = 0
   }
@@ -119,7 +151,7 @@ function openGalleryImage(index: number | undefined) {
     modelValue.value = Number.parseInt(index.toString())
   }
   setModal(true)
-}
+}, 50) // Debounce to prevent accidental double-opens
 
 function goNextImage() {
   direction.value = 'next'
@@ -200,24 +232,31 @@ function toggleInfoPanel() {
 
 function toggleFullscreen() {
   if (!isFullscreen.value) {
-    const element = document.querySelector('.gallery-container') as HTMLElement
-    if (element && element.requestFullscreen) {
-      element.requestFullscreen().then(() => {
-        isFullscreen.value = true
-      }).catch(() => {})
+    if (galleryContainerRef.value) {
+      enterFullscreen()
+        .then(() => {
+          isFullscreen.value = true
+          // Give browser time to adjust fullscreen before updating sizing
+          if (fullscreenResizeTimeout) clearTimeout(fullscreenResizeTimeout)
+          fullscreenResizeTimeout = window.setTimeout(() => {
+            updateImageSizes()
+          }, 50)
+        })
+        .catch(() => {})
     }
   }
   else {
-    if (document.exitFullscreen) {
-      document.exitFullscreen().then(() => {
+    exitFullscreen()
+      .then(() => {
         isFullscreen.value = false
-      }).catch(() => {})
-    }
+      })
+      .catch(() => {})
   }
   resetControlsTimer()
 }
 
-function touchStart(event: TouchEvent) {
+// Touch handling with debounce to prevent multiple rapid changes
+const touchStart = useDebounceFn((event: TouchEvent) => {
   const touch = event.touches[0]
   const targetElement = touch.target as HTMLElement
 
@@ -231,9 +270,9 @@ function touchStart(event: TouchEvent) {
 
   start.x = touch.screenX
   start.y = touch.screenY
-}
+}, 50)
 
-function touchEnd(event: TouchEvent) {
+const touchEnd = useDebounceFn((event: TouchEvent) => {
   const touch = event.changedTouches[0]
   const targetElement = touch.target as HTMLElement
   const touchDuration = Date.now() - touchStartTime.value
@@ -265,7 +304,7 @@ function touchEnd(event: TouchEvent) {
       goPrevImage()
     }
   }
-}
+}, 50)
 
 function getBorderColor(i: any) {
   if (props.borderColor !== undefined) {
@@ -316,18 +355,23 @@ function closeGallery() {
   setModal(false)
 }
 
-// Click outside gallery content to close
-function handleBackdropClick(event: MouseEvent) {
+// Click outside gallery content to close - with debounce to prevent accidental closes
+const handleBackdropClick = useDebounceFn((event: MouseEvent) => {
   if (event.target === event.currentTarget) {
     setModal(false)
   }
-}
+}, 200)
 
-watch(currentImage, () => {
-  // Only update the info height, don't change user's preference
+// Watch for both image changes and fullscreen mode changes
+watch([currentImage, isFullscreen], () => {
+  // Update the info height when image changes or fullscreen state changes
   if (infoPanel.value) {
     nextTick(() => {
       updateInfoHeight()
+      // Fix image sizing issue when navigating in fullscreen
+      if (isFullscreen.value) {
+        updateImageSizes()
+      }
     })
   }
 })
@@ -349,37 +393,59 @@ onMounted(() => {
   eventBus.on(`${props.id}Gallery`, openGalleryImage)
   eventBus.on(`${props.id}GalleryClose`, closeGallery)
 
+  // Store reference to the gallery container
+  galleryContainerRef.value = document.querySelector('.gallery-container')
+
   // Initialize info height once mounted (only if info panel is shown)
   if (infoPanel.value) {
     updateInfoHeight()
   }
 
-  // Set up a resize observer to track info panel height changes
-  const resizeObserver = new ResizeObserver(() => {
-    if (infoPanel.value) {
-      updateInfoHeight()
-    }
-  })
-
+  // Use vueUse's useResizeObserver instead of native ResizeObserver
   const infoElement = document.querySelector('.info-panel-slot')
   if (infoElement) {
-    resizeObserver.observe(infoElement)
+    useResizeObserver(infoElement as HTMLElement, () => {
+      if (infoPanel.value) {
+        updateInfoHeight()
+      }
+    })
   }
+
+  // Listen for fullscreen changes to update image sizes
+  useEventListener(document, 'fullscreenchange', () => {
+    if (document.fullscreenElement) {
+      // This handles the case of using F11 or browser fullscreen controls
+      isFullscreen.value = true
+      updateImageSizes()
+    }
+    else {
+      isFullscreen.value = false
+    }
+  })
 })
 
 onUnmounted(() => {
   eventBus.off(`${props.id}Gallery`, openGalleryImage)
   eventBus.off(`${props.id}GalleryImage`, openGalleryImage)
   eventBus.off(`${props.id}GalleryClose`, closeGallery)
+
   if (!import.meta.env.SSR) {
-    document.removeEventListener('keydown', handleKeyboardInput)
-    document.removeEventListener('keyup', handleKeyboardRelease)
     document.body.style.overflow = '' // Ensure body scrolling is restored
   }
+
   // Clear any remaining timeouts
   if (controlsTimeout) {
     clearTimeout(controlsTimeout)
   }
+
+  if (fullscreenResizeTimeout) {
+    clearTimeout(fullscreenResizeTimeout)
+  }
+
+  // Ensure we exit fullscreen mode on unmount
+  if (isFullscreen.value) {
+    exitFullscreen().catch(() => {})
+  }
 })
 </script>
 
@@ -451,7 +517,7 @@ onUnmounted(() => {
                       class="flex-1 w-full max-w-full flex flex-col items-center justify-center absolute inset-0 z-[2]"
                     >
                       <div
-                        class="flex-1 w-full max-w-full flex items-center justify-center"
+                        class="flex-1 w-full max-w-full flex items-center justify-center image-container"
                       >
                         <template
                           v-if="videoComponent && isVideo(images[modelValue])"
@@ -460,9 +526,15 @@ onUnmounted(() => {
                             <component
                               :is="videoComponent"
                               :src="isVideo(images[modelValue])"
-                              class="shadow max-w-full h-auto object-contain"
+                              class="shadow max-w-full h-auto object-contain video-component"
                               :style="{
-                                maxHeight: infoPanel ? 'calc(80vh - var(--info-height, 0px) - 4rem)' : 'calc(80vh - 4rem)',
+                                maxHeight: isFullscreen
+                                  ? infoPanel
+                                    ? 'calc(90vh - var(--info-height, 0px) - 4rem)'
+                                    : 'calc(90vh - 4rem)'
+                                  : infoPanel
+                                    ? 'calc(80vh - var(--info-height, 0px) - 4rem)'
+                                    : 'calc(80vh - 4rem)',
                               }"
                             />
                           </ClientOnly>
@@ -472,7 +544,13 @@ onUnmounted(() => {
                             v-if="modelValueSrc && imageComponent === 'img'"
                             class="shadow max-w-full h-auto object-contain"
                             :style="{
-                              maxHeight: infoPanel ? 'calc(80vh - var(--info-height, 0px) - 4rem)' : 'calc(80vh - 4rem)',
+                              maxHeight: isFullscreen
+                                ? infoPanel
+                                  ? 'calc(90vh - var(--info-height, 0px) - 4rem)'
+                                  : 'calc(90vh - 4rem)'
+                                : infoPanel
+                                  ? 'calc(80vh - var(--info-height, 0px) - 4rem)'
+                                  : 'calc(80vh - 4rem)',
                             }"
                             :src="modelValueSrc"
                             :alt="`Gallery image ${modelValue + 1}`"
@@ -485,7 +563,13 @@ onUnmounted(() => {
                             :alt="modelValueSrc.alt"
                             class="shadow max-w-full h-auto object-contain"
                             :style="{
-                              maxHeight: infoPanel ? 'calc(80vh - var(--info-height, 0px) - 4rem)' : 'calc(80vh - 4rem)',
+                              maxHeight: isFullscreen
+                                ? infoPanel
+                                  ? 'calc(90vh - var(--info-height, 0px) - 4rem)'
+                                  : 'calc(90vh - 4rem)'
+                                : infoPanel
+                                  ? 'calc(80vh - var(--info-height, 0px) - 4rem)'
+                                  : 'calc(80vh - 4rem)',
                             }"
                           />
                         </template>

package/components/ui/DefaultInput.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { ErrorObject } from '@vuelidate/core'
-import { computed, ref, toRef } from 'vue'
+import { useDebounceFn } from '@vueuse/core'
+import { computed, shallowRef, toRef } from 'vue'
 import { useTranslation } from '../../composables/translations'
 import DefaultTagInput from './DefaultTagInput.vue'
 
@@ -53,11 +54,13 @@ const props = withDefaults(
 )
 
 const translate = useTranslation()
-const inputRef = ref<HTMLInputElement>()
+// Use shallowRef for DOM elements to reduce reactivity overhead
+const inputRef = shallowRef<HTMLInputElement>()
 
 const errorProps = toRef(props, 'error')
 const errorVuelidateProps = toRef(props, 'errorVuelidate')
 
+// Memoized error calculation
 const checkErrors = computed(() => {
   if (errorProps.value) return errorProps.value
   if (errorVuelidateProps.value && errorVuelidateProps.value.length > 0) {
@@ -84,20 +87,23 @@ const emit = defineEmits([
   'blur',
 ])
 
-function handleFocus() {
+// Debounced event handlers to reduce CPU usage from rapid events
+const handleFocus = useDebounceFn(() => {
   emit('focus', props.id)
-}
-function handleBlur() {
+}, 50)
+
+const handleBlur = useDebounceFn(() => {
   emit('blur', props.id)
-}
+}, 50)
 
-// Copy input value to clipboard
-function copyToClipboard() {
+// Copy input value to clipboard with debounce
+const copyToClipboard = useDebounceFn(() => {
   if (props.modelValue) {
     navigator.clipboard.writeText(props.modelValue.toString())
   }
-}
+}, 200)
 
+// Optimized computed properties with explicit types
 const model = computed<modelValueType>({
   get: () => props.modelValue,
   set: (value) => {

package/components/ui/DefaultLoader.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref } from 'vue'
+import { useDebounceFn } from '@vueuse/core'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useEventBus } from '../../composables/event-bus'
 
 const props = withDefaults(
@@ -13,18 +14,26 @@ const props = withDefaults(
     id: '',
   },
 )
+
 const eventBus = useEventBus()
 const loading = ref<boolean>(false)
-function setLoading(value: boolean) {
+
+// Compute event name once to avoid string concatenation on each event
+const eventName = computed(() => props.id ? `${props.id}-loading` : 'loading')
+
+// Debounce the loading state change to prevent rapid toggles
+const setLoading = useDebounceFn((value: boolean) => {
   loading.value = value
-}
+}, 50)
+
+// Setup event listeners with computed event name
 onMounted(() => {
-  if (props.id) eventBus.on(`${props.id}-loading`, setLoading)
-  else eventBus.on('loading', setLoading)
+  eventBus.on(eventName.value, setLoading)
 })
+
+// Proper cleanup of event listeners
 onUnmounted(() => {
-  if (props.id) eventBus.off(`${props.id}-loading`, setLoading)
-  else eventBus.off('loading', setLoading)
+  eventBus.off(eventName.value, setLoading)
 })
 </script>