@fy-/fws-vue 2.3.48 → 2.3.50

package/components/ui/DefaultGallery.vue

@@ -1,4 +1,3 @@
-# This file has been completely rewritten and optimized
 <script setup lang="ts">
 import type { Component } from 'vue'
 import type { APIPaging } from '../../composables/rest'
@@ -129,29 +128,46 @@ const currentImage = computed(() => {
 const imageCount = computed(() => props.images.length)
 const currentIndex = computed(() => modelValue.value + 1)
 
-// Simple image sizing that relies on flexbox layout to handle the info panel
+/**
+ * Dynamically update the size of the displayed image/video
+ * so it fits inside the viewport, taking into account:
+ * - Top controls
+ * - Info panel (if open)
+ * - Side panel (if open)
+ * - A little padding
+ */
 const updateImageSizes = useDebounceFn(() => {
-  // Get the main image
-  const mainImage = document.querySelector('.image-display img') as HTMLImageElement
-  if (!mainImage) return
+  // Only adjust if gallery is open
+  if (!isGalleryOpen.value) return
+
+  // Find the container and the main media element (img or video)
+  const container = document.querySelector('.image-display') as HTMLDivElement
+  if (!container) return
+  const mainMedia = container.querySelector('img, video') as HTMLElement | null
+  if (!mainMedia) return
 
   // Standard padding
   const padding = 24
 
-  // Handle width constraints
+  // Side panel width if visible
   const sidebarWidth = sidePanel.value ? 256 : 0
+
+  // Calculate available width
   const availableWidth = windowWidth.value - sidebarWidth - padding * 2
 
-  // Set width constraints
-  mainImage.style.maxWidth = windowWidth.value <= 768
-    ? '90vw'
-    : `${availableWidth}px`
+  // Set max width
+  mainMedia.style.maxWidth
+    = windowWidth.value <= 768 ? '90vw' : `${availableWidth}px`
 
-  // Let height be auto to preserve aspect ratio and fit in flexbox container
-  mainImage.style.height = 'auto'
+  // Preserve aspect ratio; let height be auto
+  mainMedia.style.height = 'auto'
 
-  // Set a reasonable max-height if needed
-  mainImage.style.maxHeight = '75vh'
+  // Deduct top controls height + info panel height (if open) + padding
+  const topSpace = topControlsHeight.value || 0
+  const infoSpace = infoPanel.value ? (infoPanelHeight.value || 0) : 0
+  const availableHeight = windowHeight.value - topSpace - infoSpace - padding * 2
+
+  mainMedia.style.maxHeight = `${availableHeight}px`
 }, 50)
 
 // Modal controls
@@ -164,8 +180,6 @@ function setModal(value: boolean) {
       useEventListener(document, 'keydown', handleKeyboardInput)
       useEventListener(document, 'keyup', handleKeyboardRelease)
     }
-
-    // No longer auto-hide controls on mobile
   }
   else {
     if (props.onClose) props.onClose()
@@ -185,7 +199,6 @@ function setModal(value: boolean) {
   }
   isGalleryOpen.value = value
   showControls.value = true
-  // Don't reset info panel state when opening/closing
 }
 
 // Open gallery with debounce to prevent accidental double-clicks
@@ -207,7 +220,6 @@ const openGalleryImage = useDebounceFn((index: number | undefined) => {
 // Navigation functions
 function goNextImage() {
   direction.value = 'next'
-
   if (modelValue.value < props.images.length - 1) {
     modelValue.value++
   }
@@ -216,7 +228,6 @@ function goNextImage() {
   }
   resetControlsTimer()
 
-  // Force image sizing update after navigation
   nextTick(() => {
     updateImageSizes()
   })
@@ -224,7 +235,6 @@ function goNextImage() {
 
 function goPrevImage() {
   direction.value = 'prev'
-
   if (modelValue.value > 0) {
     modelValue.value--
   }
@@ -233,7 +243,6 @@ function goPrevImage() {
   }
   resetControlsTimer()
 
-  // Force image sizing update after navigation
   nextTick(() => {
     updateImageSizes()
   })
@@ -245,11 +254,6 @@ function resetControlsTimer() {
   showControls.value = true
 }
 
-// eslint-disable-next-line unused-imports/no-unused-vars
-function toggleControls() {
-  showControls.value = !showControls.value
-}
-
 function toggleInfoPanel() {
   infoPanel.value = !infoPanel.value
   resetControlsTimer()
@@ -257,10 +261,8 @@ function toggleInfoPanel() {
   // Update layout immediately AND after nextTick to ensure DOM updates
   updateImageSizes()
 
-  // Schedule multiple updates to handle any transition effects
   nextTick(() => {
     updateImageSizes()
-
     // Additional delayed updates to catch transitions
     setTimeout(() => updateImageSizes(), 50)
     setTimeout(() => updateImageSizes(), 300)
@@ -271,7 +273,6 @@ function toggleSidePanel() {
   sidePanel.value = !sidePanel.value
   resetControlsTimer()
 
-  // Update layout after panel toggle
   nextTick(() => {
     updateImageSizes()
   })
@@ -283,7 +284,6 @@ function toggleFullscreen() {
       enterFullscreen()
         .then(() => {
           isFullscreen.value = true
-          // Give browser time to adjust fullscreen before updating sizing
           if (fullscreenResizeTimeout) clearTimeout(fullscreenResizeTimeout)
           fullscreenResizeTimeout = window.setTimeout(() => {
             updateImageSizes()
@@ -311,12 +311,11 @@ const touchStart = useDebounceFn((event: TouchEvent) => {
   const touch = event.touches[0]
   const targetElement = touch.target as HTMLElement
 
-  // Store start time for tap detection
   touchStartTime.value = Date.now()
 
-  // Check if the touch started on an interactive element
+  // Ignore swipes if starting on an interactive element
   if (targetElement.closest('button, a, input, textarea, select')) {
-    return // Don't handle swipe if interacting with controls
+    return
   }
 
   start.x = touch.screenX
@@ -328,9 +327,9 @@ const touchEnd = useDebounceFn((event: TouchEvent) => {
   const targetElement = touch.target as HTMLElement
   const touchDuration = Date.now() - touchStartTime.value
 
-  // Check if the touch ended on an interactive element
+  // Ignore swipes if ending on an interactive element
   if (targetElement.closest('button, a, input, textarea, select')) {
-    return // Don't handle swipe if interacting with controls
+    return
   }
 
   const end = { x: touch.screenX, y: touch.screenY }
@@ -338,12 +337,12 @@ const touchEnd = useDebounceFn((event: TouchEvent) => {
   const diffX = start.x - end.x
   const diffY = start.y - end.y
 
-  // For taps, we don't toggle controls anymore - they always stay visible
+  // If it's a quick tap (not a swipe), do nothing
   if (Math.abs(diffX) < 10 && Math.abs(diffY) < 10 && touchDuration < 300) {
     return
   }
 
-  // Add a threshold to prevent accidental swipes
+  // Left/right swipe
   if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > 50) {
     if (diffX > 0) {
       goNextImage()
@@ -401,14 +400,14 @@ function closeGallery() {
   setModal(false)
 }
 
-// Click outside gallery content to close - with debounce to prevent accidental closes
+// Click outside gallery content to close - with debounce
 const handleBackdropClick = useDebounceFn((event: MouseEvent) => {
   if (event.target === event.currentTarget) {
     setModal(false)
   }
 }, 200)
 
-// Watch for image changes, fullscreen, or panel visibility changes
+// Watch for changes that affect sizing
 watch(
   [
     currentImage,
@@ -462,7 +461,7 @@ onUnmounted(() => {
   eventBus.off(`${props.id}GalleryClose`, closeGallery)
 
   if (!import.meta.env.SSR) {
-    document.body.style.overflow = '' // Ensure body scrolling is restored
+    document.body.style.overflow = '' // Restore scrolling
   }
 
   // Clear any remaining timeouts
@@ -500,7 +499,7 @@ onUnmounted(() => {
         aria-modal="true"
         @click="handleBackdropClick"
       >
-        <!-- Top Controls Bar - Fixed at top -->
+        <!-- Top Controls Bar -->
         <transition
           enter-active-class="transition-opacity duration-300"
           enter-from-class="opacity-0"
@@ -551,19 +550,19 @@ onUnmounted(() => {
           </div>
         </transition>
 
-        <!-- Main Gallery Content - Flexbox layout -->
+        <!-- Main Gallery Content -->
         <div
           ref="galleryContentRef"
           class="w-full h-full flex flex-col lg:flex-row"
         >
-          <!-- Main Image Area with flex column layout -->
+          <!-- Main Image Area -->
           <div
             class="relative flex-1 h-full flex flex-col"
             :style="{ paddingTop: `${topControlsHeight}px` }"
             :class="{ 'lg:pr-64': sidePanel, 'lg:max-w-[calc(100%-16rem)]': sidePanel }"
             style="max-width: 100%;"
           >
-            <!-- Image Navigation Controls - Left -->
+            <!-- Left Navigation (Previous) -->
             <transition
               enter-active-class="transition-opacity duration-300"
               enter-from-class="opacity-0"
@@ -586,7 +585,7 @@ onUnmounted(() => {
               </div>
             </transition>
 
-            <!-- Image Container - flex-grow to fill available space -->
+            <!-- Image/Video Container -->
             <div
               ref="imageContainerRef"
               class="flex-grow flex items-center justify-center"
@@ -603,17 +602,19 @@ onUnmounted(() => {
                   :key="`image-display-${modelValue}`"
                   class="image-display relative w-full h-full flex flex-col items-center justify-center"
                 >
-                  <!-- Actual Image/Video Content -->
+                  <!-- If video -->
                   <template v-if="videoComponent && isVideo(images[modelValue])">
                     <ClientOnly>
                       <component
                         :is="videoComponent"
                         :src="isVideo(images[modelValue])"
                         class="shadow max-w-full h-auto object-contain video-component"
-                        @load="updateImageSizes"
+                        @loadedmetadata="updateImageSizes"
+                        @loadeddata="updateImageSizes"
                       />
                     </ClientOnly>
                   </template>
+                  <!-- Otherwise, image -->
                   <template v-else>
                     <img
                       v-if="modelValueSrc && imageComponent === 'img'"
@@ -635,7 +636,7 @@ onUnmounted(() => {
               </transition>
             </div>
 
-            <!-- Image Navigation Controls - Right -->
+            <!-- Right Navigation (Next) -->
             <transition
               enter-active-class="transition-opacity duration-300"
               enter-from-class="opacity-0"
@@ -659,7 +660,7 @@ onUnmounted(() => {
               </div>
             </transition>
 
-            <!-- Info Panel directly in flex column flow -->
+            <!-- Info Panel -->
             <transition
               enter-active-class="transition-all duration-300 ease-out"
               enter-from-class="opacity-0 transform translate-y-4"
@@ -678,7 +679,7 @@ onUnmounted(() => {
             </transition>
           </div>
 
-          <!-- Side Thumbnails Panel -->
+          <!-- Side Thumbnails Panel (Desktop) -->
           <transition
             enter-active-class="transform transition ease-in-out duration-300"
             enter-from-class="translate-x-full"
@@ -693,12 +694,12 @@ onUnmounted(() => {
               class="side-panel hidden lg:block absolute right-0 top-0 bottom-0 w-64 overflow-y-auto z-40 cool-scroll"
               :style="{ paddingTop: `${topControlsHeight + 8}px` }"
             >
-              <!-- Paging Controls if needed -->
+              <!-- Paging Controls -->
               <div v-if="paging" class="flex items-center justify-center pt-2">
                 <DefaultPaging :id="id" :items="paging" />
               </div>
 
-              <!-- Thumbnail Grid -->
+              <!-- Thumbnails -->
               <div class="grid grid-cols-2 gap-2 p-2">
                 <div
                   v-for="i in images.length"
@@ -746,7 +747,7 @@ onUnmounted(() => {
             </div>
           </transition>
 
-          <!-- Mobile Thumbnail Preview (bottom of screen on mobile) -->
+          <!-- Mobile Thumbnail Row (Bottom) -->
           <transition
             enter-active-class="transition-transform duration-300 ease-out"
             enter-from-class="translate-y-full"
@@ -799,7 +800,7 @@ onUnmounted(() => {
       </div>
     </transition>
 
-    <!-- Thumbnail Grid/Mason/Custom Layouts for non-opened gallery -->
+    <!-- Thumbnail Grid/Masonry/Custom Layouts if gallery is not open -->
     <div v-if="mode === 'grid' || mode === 'mason' || mode === 'custom'" class="gallery-grid">
       <div
         :class="{
@@ -809,8 +810,11 @@ onUnmounted(() => {
         }"
       >
         <slot name="thumbnail" />
+
+        <!-- Iterate images -->
         <template v-for="i in images.length" :key="`g_${id}_${i}`">
           <template v-if="mode === 'mason'">
+            <!-- Example naive "masonry" approach -->
             <div
               v-if="i + (1 % gridHeight) === 0"
               class="masonry-column relative"
@@ -818,7 +822,6 @@ onUnmounted(() => {
               <div v-if="ranking" class="img-gallery-ranking">
                 {{ i }}
               </div>
-
               <template v-for="j in gridHeight" :key="`gi_${id}_${i + j}`">
                 <div class="masonry-item">
                   <img
@@ -893,12 +896,10 @@ onUnmounted(() => {
 </template>
 
 <style scoped>
-/* Ensure controls stay fixed at top */
 .controls-bar {
   height: auto;
 }
 
-/* Layout container for main image and info panel */
 .image-container {
   position: relative;
   display: flex;
@@ -909,87 +910,74 @@ onUnmounted(() => {
   width: 100%;
 }
 
-/* Side panel positioning */
 .side-panel {
   height: 100vh;
   overflow-y: auto;
   overflow-x: hidden;
 }
 
-/* Info panel styling */
 .info-panel {
   width: 100%;
   border-top-left-radius: 0.5rem;
   border-top-right-radius: 0.5rem;
 }
 
-/* Transition styles for next (right) navigation */
+/* Transitions for next/prev images */
 .slide-next-enter-active,
-.slide-next-leave-active {
+.slide-next-leave-active,
+.slide-prev-enter-active,
+.slide-prev-leave-active {
   transition:
     opacity 0.15s,
     transform 0.15s,
     filter 0.15s;
 }
 
+/* Next (slide from right) */
 .slide-next-enter-from {
   opacity: 0;
   transform: translateX(30px);
   filter: blur(8px);
 }
-
 .slide-next-enter-to {
   opacity: 1;
   transform: translateX(0);
   filter: blur(0);
 }
-
 .slide-next-leave-from {
   opacity: 1;
   transform: translateX(0);
   filter: blur(0);
 }
-
 .slide-next-leave-to {
   opacity: 0;
   transform: translateX(-30px);
   filter: blur(8px);
 }
 
-/* Transition styles for prev (left) navigation */
-.slide-prev-enter-active,
-.slide-prev-leave-active {
-  transition:
-    opacity 0.15s,
-    transform 0.15s,
-    filter 0.15s;
-}
-
+/* Prev (slide from left) */
 .slide-prev-enter-from {
   opacity: 0;
   transform: translateX(-30px);
   filter: blur(8px);
 }
-
 .slide-prev-enter-to {
   opacity: 1;
   transform: translateX(0);
   filter: blur(0);
 }
-
 .slide-prev-leave-from {
   opacity: 1;
   transform: translateX(0);
   filter: blur(0);
 }
-
 .slide-prev-leave-to {
   opacity: 0;
   transform: translateX(30px);
   filter: blur(8px);
 }
 
-/* Grid layouts for thumbnails */
+/* Grid layouts */
 .gallery-grid {
   min-height: 200px;
 }
@@ -999,32 +987,27 @@ onUnmounted(() => {
   grid-template-columns: repeat(1, 1fr);
   gap: 0.75rem;
 }
-
 @media (min-width: 480px) {
   .standard-grid {
     grid-template-columns: repeat(2, 1fr);
   }
 }
-
 @media (min-width: 768px) {
   .standard-grid {
     grid-template-columns: repeat(3, 1fr);
     gap: 1rem;
   }
 }
-
 @media (min-width: 1024px) {
   .standard-grid {
     grid-template-columns: repeat(4, 1fr);
   }
 }
-
 @media (min-width: 1280px) {
   .standard-grid {
     grid-template-columns: repeat(5, 1fr);
   }
 }
-
 @media (min-width: 1536px) {
   .standard-grid {
     grid-template-columns: repeat(6, 1fr);
@@ -1036,20 +1019,17 @@ onUnmounted(() => {
   grid-template-columns: repeat(1, 1fr);
   gap: 0.75rem;
 }
-
 @media (min-width: 480px) {
   .masonry-grid {
     grid-template-columns: repeat(2, 1fr);
   }
 }
-
 @media (min-width: 768px) {
   .masonry-grid {
     grid-template-columns: repeat(3, 1fr);
     gap: 1rem;
   }
 }
-
 @media (min-width: 1024px) {
   .masonry-grid {
     grid-template-columns: repeat(4, 1fr);
@@ -1087,13 +1067,12 @@ onUnmounted(() => {
   z-index: 10;
 }
 
-/* Special class to hide scrollbars on mobile */
+/* Hide scrollbars on mobile */
 .no-scrollbar {
   -ms-overflow-style: none; /* IE and Edge */
   scrollbar-width: none; /* Firefox */
 }
-
 .no-scrollbar::-webkit-scrollbar {
-  display: none; /* Chrome, Safari and Opera */
+  display: none; /* Chrome, Safari, and Opera */
 }
 </style>

package/composables/rest.ts

@@ -30,11 +30,19 @@ export interface APIResult {
 // Cache for URL parsing to avoid repeated parsing of the same URL
 const urlParseCache = new Map<string, string>()
 
+// Global request hash cache shared across all instances
+const globalHashCache = new Map<string, number>()
+
+// Track in-flight requests to avoid duplicates
+const inFlightRequests = new Map<number, Promise<any>>()
+
+// Detect if we're in SSR mode once and cache the result
+let isSSRMode: boolean | null = null
+
 // Memoized function to extract URL pathname and search for hashing
 function getUrlForHash(url: string): string {
-  if (urlParseCache.has(url)) {
-    return urlParseCache.get(url)!
-  }
+  const cached = urlParseCache.get(url)
+  if (cached) return cached
 
   let urlForHash: string
   try {
@@ -49,20 +57,34 @@ function getUrlForHash(url: string): string {
   return urlForHash
 }
 
-// Detect if we're in SSR mode once and cache the result
-let isSSRMode: boolean | null = null
+// Check SSR mode with caching
 function checkSSRMode(): boolean {
   if (isSSRMode === null) {
     isSSRMode = getMode() === 'ssr'
   }
+
   return isSSRMode
 }
 
-// Optimized JSON.stringify for params
+// Fast JSON.stringify for params
 function stringifyParams(params?: RestParams): string {
   return params ? JSON.stringify(params) : ''
 }
 
+// Compute request hash with global caching
+function computeRequestHash(url: string, method: RestMethod, params?: RestParams): number {
+  const cacheKey = `${url}|${method}|${stringifyParams(params)}`
+
+  const cached = globalHashCache.get(cacheKey)
+  if (cached !== undefined) return cached
+
+  const urlForHash = getUrlForHash(url)
+  const hash = stringHash(urlForHash + method + stringifyParams(params))
+
+  globalHashCache.set(cacheKey, hash)
+  return hash
+}
+
 export function useRest(): <ResultType extends APIResult>(
 url: string,
 method: RestMethod,
@@ -71,23 +93,8 @@ params?: RestParams,
   const serverRouter = useServerRouter()
   const eventBus = useEventBus()
 
-  // Cache for request hash computations
-  const hashCache = new Map<string, number>()
-
-  // Function to compute and cache request hash
-  function computeRequestHash(url: string, method: RestMethod, params?: RestParams): number {
-    const cacheKey = `${url}|${method}|${stringifyParams(params)}`
-
-    if (hashCache.has(cacheKey)) {
-      return hashCache.get(cacheKey)!
-    }
-
-    const urlForHash = getUrlForHash(url)
-    const hash = stringHash(urlForHash + method + stringifyParams(params))
-
-    hashCache.set(cacheKey, hash)
-    return hash
-  }
+  // Pre-check for server rendering state
+  const isSSR = isServerRendered()
 
   // Handle API error response consistently
   function handleErrorResult<ResultType extends APIResult>(result: ResultType): Promise<ResultType> {
@@ -104,7 +111,7 @@ params?: RestParams,
     const requestHash = computeRequestHash(url, method, params)
 
     // Check for server-rendered results first
-    if (isServerRendered()) {
+    if (isSSR) {
       const hasResult = serverRouter.getResult(requestHash)
       if (hasResult !== undefined) {
         const result = hasResult as ResultType
@@ -118,35 +125,55 @@ params?: RestParams,
       }
     }
 
-    try {
-      const restResult: ResultType = await rest(url, method, params)
+    // Check if this exact request is already in-flight
+    const existingRequest = inFlightRequests.get(requestHash)
+    if (existingRequest) {
+      // Return the existing promise for the in-flight request
+      return existingRequest
+    }
 
-      // Store result in server router if in SSR mode
-      if (checkSSRMode()) {
-        // Use structuredClone if available for better performance than JSON.parse/stringify
-        const resultCopy = typeof structuredClone !== 'undefined'
-          ? structuredClone(restResult)
-          : JSON.parse(JSON.stringify(restResult))
+    // Create the actual request function
+    const performRequest = async (): Promise<ResultType> => {
+      try {
+        const restResult: ResultType = await rest(url, method, params)
 
-        serverRouter.addResult(requestHash, resultCopy)
-      }
+        // Store result in server router if in SSR mode
+        if (checkSSRMode()) {
+          // Use structuredClone if available for better performance than JSON.parse/stringify
+          const resultCopy = typeof structuredClone !== 'undefined'
+            ? structuredClone(restResult)
+            : JSON.parse(JSON.stringify(restResult))
 
-      if (restResult.result === 'error') {
-        return handleErrorResult(restResult)
-      }
+          serverRouter.addResult(requestHash, resultCopy)
+        }
 
-      return Promise.resolve(restResult)
-    }
-    catch (error) {
-      const restError = error as ResultType
+        if (restResult.result === 'error') {
+          return handleErrorResult(restResult)
+        }
 
-      if (checkSSRMode()) {
-        serverRouter.addResult(requestHash, restError)
+        return Promise.resolve(restResult)
       }
+      catch (error) {
+        const restError = error as ResultType
+
+        if (checkSSRMode()) {
+          serverRouter.addResult(requestHash, restError)
+        }
 
-      eventBus.emit('main-loading', false)
-      eventBus.emit('rest-error', restError)
-      return Promise.resolve(restError)
+        eventBus.emit('main-loading', false)
+        eventBus.emit('rest-error', restError)
+        return Promise.resolve(restError)
+      }
+      finally {
+        // Always remove from in-flight requests when done
+        inFlightRequests.delete(requestHash)
+      }
     }
+
+    // Track this request as in-flight
+    const requestPromise = performRequest()
+    inFlightRequests.set(requestHash, requestPromise)
+
+    return requestPromise
   }
 }

package/composables/templating.ts

@@ -11,86 +11,112 @@ import ru from 'timeago.js/esm/lang/ru'
 import zh_CN from 'timeago.js/esm/lang/zh_CN'
 import { useTranslation } from './translations'
 
-// Register common locales
-register('fr', fr)
-register('fr_FR', fr)
-register('es', es)
-register('es_ES', es)
-register('de', de)
-register('de_DE', de)
-register('it', it)
-register('it_IT', it)
-register('nl', nl)
-register('nl_NL', nl)
-register('ru', ru)
-register('ru_RU', ru)
-register('ja', ja)
-register('ja_JP', ja)
-register('zh_CN', zh_CN)
+// Register common locales - do this once at module initialization
+const localeMap = {
+  fr,
+  fr_FR: fr,
+  es,
+  es_ES: es,
+  de,
+  de_DE: de,
+  it,
+  it_IT: it,
+  nl,
+  nl_NL: nl,
+  ru,
+  ru_RU: ru,
+  ja,
+  ja_JP: ja,
+  zh_CN,
+}
+
+// Register all locales at once
+Object.entries(localeMap).forEach(([locale, func]) => register(locale, func))
 
 // Cache common constants and patterns
 const k = 1024
 const byteSizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+
+// Precompute log(k) for formatBytes
+const logK = Math.log(k)
+
+// Define date format options once
 const dateFormatOptions = {
-  date: {
+  date: Object.freeze({
     year: 'numeric',
     month: 'long',
     day: 'numeric',
-  },
-  datetime: {
+  }),
+  datetime: Object.freeze({
     year: 'numeric',
     month: 'long',
     day: 'numeric',
     hour: 'numeric',
     minute: 'numeric',
     second: 'numeric',
-  },
+  }),
 }
 
 // Color cache for contrast calculations to avoid repeated calculations
 const colorContrastCache = new Map<string, string>()
 
+// Locale transform cache to avoid repeated replacements
+const localeTransformCache = new Map<string, string>()
+
+// Default colors for contrast errors
+const DEFAULT_DARK_COLOR = '#000000'
+const DEFAULT_LIGHT_COLOR = '#FFFFFF'
+
 function cropText(str: string, ml = 100, end = '...') {
-  if (!str) return str
+  if (!str) {
+    return str
+  }
   if (str.length > ml) {
     return `${str.slice(0, ml)}${end}`
   }
+
   return str
 }
 
 function getContrastingTextColor(backgroundColor: string) {
   // Return from cache if available
-  if (colorContrastCache.has(backgroundColor)) {
-    return colorContrastCache.get(backgroundColor)!
+  const cached = colorContrastCache.get(backgroundColor)
+  if (cached) {
+    return cached
   }
 
   // Input validation
   if (!backgroundColor || backgroundColor.length !== 7 || backgroundColor[0] !== '#') {
-    return '#000000'
+    return DEFAULT_DARK_COLOR
   }
 
   try {
+    // Parse hex color components more efficiently
     const r = Number.parseInt(backgroundColor.substring(1, 3), 16)
     const g = Number.parseInt(backgroundColor.substring(3, 5), 16)
     const b = Number.parseInt(backgroundColor.substring(5, 7), 16)
 
+    // Calculate relative luminance (standard formula for text contrast)
     const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255
-    const result = luminance > 0.5 ? '#000000' : '#FFFFFF'
+    const result = luminance > 0.5 ? DEFAULT_DARK_COLOR : DEFAULT_LIGHT_COLOR
 
     // Cache the result
     colorContrastCache.set(backgroundColor, result)
     return result
   }
   catch {
-    return '#000000'
+    return DEFAULT_DARK_COLOR
   }
 }
 
 function formatBytes(bytes: number, decimals = 2) {
-  if (!+bytes) return '0 Bytes'
+  if (!+bytes) {
+    return '0 Bytes'
+  }
 
   const dm = decimals < 0 ? 0 : decimals
-  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  // Use precomputed logK for better performance
+  const i = Math.floor(Math.log(bytes) / logK)
 
   return `${Number.parseFloat((bytes / k ** i).toFixed(dm))} ${byteSizes[i]}`
 }
@@ -103,7 +129,7 @@ function parseDateInput(dt: Date | string | number): number {
 
   if (typeof dt === 'string') {
     const parsed = Date.parse(dt)
-    return Number.isNaN(parsed) ? Number.parseInt(dt) : parsed
+    return Number.isNaN(parsed) ? Number.parseInt(dt, 10) : parsed
   }
 
   return dt
@@ -137,14 +163,17 @@ function formatTimeago(dt: Date | string | number) {
   const timestamp = parseDateInput(dt)
   const dateObj = new Date(timestamp)
 
-  // Get browser locale and format it for timeago.js
+  // Get browser locale and lookup in cache
   const fullLocale = getLocale()
 
-  // Convert locale format (e.g., fr-FR to fr_FR)
-  const localeWithUnderscore = fullLocale.replace('-', '_')
+  // Use cached locale transformation if available
+  let localeWithUnderscore = localeTransformCache.get(fullLocale)
+  if (!localeWithUnderscore) {
+    localeWithUnderscore = fullLocale.replace('-', '_')
+    localeTransformCache.set(fullLocale, localeWithUnderscore)
+  }
 
   // Use the locale directly - the registration above ensures support
-  // timeago.js will fall back to en_US if no matching locale is found
   return formatDateTimeago(dateObj, localeWithUnderscore)
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fy-/fws-vue",
-  "version": "2.3.48",
+  "version": "2.3.50",
   "author": "Florian 'Fy' Gasquez <m@fy.to>",
   "license": "MIT",
   "homepage": "https://github.com/fy-to/FWJS#readme",