@fy-/fws-vue 2.3.70 → 2.3.72

package/components/fws/DataTable.vue

@@ -391,7 +391,7 @@ onUnmounted(() => {
 
 <style scoped>
 .data-table-container {
-  @apply transition-all duration-300;
+  @apply transition-shadow duration-300;
 }
 
 /* Responsive styles */
@@ -407,18 +407,19 @@ onUnmounted(() => {
 
 /* Loading spinner animation */
 @keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
 }
 
 .loading-spinner {
   animation: spin 1s linear infinite;
+  will-change: transform;
 }
 
 /* Fade in animation for rows */
 tbody tr {
-  animation: fadeIn 0.2s ease-out forwards;
+  animation: fadeIn 0.2s ease-out;
+  will-change: opacity;
 }
 
 @keyframes fadeIn {
@@ -427,7 +428,10 @@ tbody tr {
 }
 
 /* Improved hover states for better interactivity */
-th, td {
+th[scope="col"]:hover {
+  @apply transition-colors duration-200;
+}
+tbody tr:hover {
   @apply transition-colors duration-200;
 }
 

package/components/fws/FilterData.vue

@@ -260,7 +260,7 @@ onUnmounted(() => {
 
 <style scoped>
 .filter-data-wrapper {
-  @apply transition-all duration-300;
+  @apply transition-shadow duration-300;
 }
 
 .filter-data-form {
@@ -268,12 +268,19 @@ onUnmounted(() => {
 }
 
 @keyframes fadeIn {
-  from { opacity: 0; transform: translateY(-10px); }
-  to { opacity: 1; transform: translateY(0); }
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 .animate-fadeIn {
-  animation: fadeIn 0.3s ease-out forwards;
+  animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: transform, opacity;
 }
 
 /* Responsive styles */

package/components/fws/UserFlow.vue

@@ -421,13 +421,13 @@ onMounted(async () => {
 
 <style scoped>
 .fws-login {
-  @apply transition-all duration-300;
+  @apply transition-opacity duration-300;
 }
 
 .fws-login__oauth a,
 .fws-login__oauth button,
 .fws-login__form button[type="submit"] {
-  @apply transition-all duration-200;
+  @apply transition-colors duration-200 transition-shadow;
 }
 
 @media (max-width: 640px) {

package/components/ui/DefaultGallery.vue

@@ -927,54 +927,44 @@ onUnmounted(() => {
 .slide-next-leave-active,
 .slide-prev-enter-active,
 .slide-prev-leave-active {
-  transition:
-    opacity 0.15s,
-    transform 0.15s,
-    filter 0.15s;
+  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: transform, opacity;
 }
 
 /* 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);
 }
 
 /* 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 */

package/components/ui/DefaultInput.vue

@@ -569,8 +569,11 @@ input[type="range"]:focus::-moz-range-thumb {
 }
 
 /* Add smooth transitions */
-input, select, textarea, input[type="range"]::-webkit-slider-thumb, input[type="range"]::-moz-range-thumb {
-  @apply transition-all duration-200;
+input, select, textarea {
+  @apply transition-colors duration-200 transition-shadow;
+}
+input[type="range"]::-webkit-slider-thumb, input[type="range"]::-moz-range-thumb {
+  @apply transition-transform duration-200;
 }
 
 /* Placeholder styling */

package/components/ui/DefaultNotif.vue

@@ -342,18 +342,19 @@ onUnmounted(() => {
 <style scoped>
 /* Optional: Add animation for notifications */
 @keyframes slide-in-right {
-  0% {
+  from {
     transform: translateX(100%);
     opacity: 0;
   }
-  100% {
+  to {
     transform: translateX(0);
     opacity: 1;
   }
 }
 
 #base-notif {
-  animation: slide-in-right 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+  animation: slide-in-right 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  will-change: transform, opacity;
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 }
 

package/components/ui/DefaultSidebar.vue

@@ -97,7 +97,7 @@ const toggleSidebar = useDebounceFn(() => {
 
 <style lang="scss" scoped>
 .fui-sidebar {
-  @apply w-60 transition-all duration-300 ease-in-out;
+  @apply w-60 transition-[width] duration-300 ease-in-out;
   .fui-sidebar__controller {
     @apply py-3 flex items-center justify-end pr-3;
     svg {
@@ -108,7 +108,7 @@ const toggleSidebar = useDebounceFn(() => {
     @apply relative flex w-full items-center py-3 px-3 font-semibold text-sm border-l-[.4rem] border-l-transparent;
     @apply text-fv-neutral-600 hover:bg-fv-neutral-200/[.3] focus:bg-fv-neutral-200/[.3] hover:text-fv-primary-600;
     @apply dark:text-fv-neutral-300 dark:hover:bg-fv-neutral-700/[.3] dark:focus:bg-fv-neutral-700/[.3] dark:hover:text-fv-primary-400;
-    @apply transition-all duration-300 ease-in-out;
+    @apply transition-colors duration-200 ease-in-out;
     &.fvside-active {
       @apply border-l-fv-primary-500 bg-fv-neutral-200  hover:text-fv-neutral-600 focus:text-fv-neutral-600;
       @apply dark:bg-fv-neutral-700 dark:hover:text-fv-neutral-300 dark:text-fv-neutral-300;

package/components/ui/DefaultTagInput.vue

@@ -383,24 +383,23 @@ function handleKeyNavigation(e: KeyboardEvent, index: number) {
       >
         {{ help }}
       </span>
-      <!-- Tag counter when maxTags is set -->
     </div>
-    <div v-if="maxTags > 0" class="tag-counter">
-      <span>{{ model.length }}/{{ maxTags }}</span>
-    </div>
-    <!-- Inline error display if needed -->
-    <p
-      v-if="$props.error"
-      :id="`error_tags_${id}`"
-      class="text-xs text-red-500 mt-1"
-      aria-live="assertive"
-    >
-      {{ $props.error }}
-    </p>
 
-    <!-- Copy button / or any additional actions -->
-    <div v-if="copyButton" class="copy-button-container">
+    <!-- Tag count and copy button container -->
+    <div class="flex items-center justify-between mt-2">
+      <!-- Tag counter -->
+      <div class="tag-counter">
+        <span v-if="maxLenghtPerTag > 0">
+          {{ model.length }}/{{ maxLenghtPerTag }} tag{{ model.length !== 1 ? 's' : '' }}
+        </span>
+        <span v-else>
+          {{ model.length }} tag{{ model.length !== 1 ? 's' : '' }}
+        </span>
+      </div>
+
+      <!-- Copy button -->
       <button
+        v-if="copyButton"
         class="copy-button"
         type="button"
         :disabled="model.length === 0"
@@ -424,6 +423,16 @@ function handleKeyNavigation(e: KeyboardEvent, index: number) {
         Copy tags
       </button>
     </div>
+
+    <!-- Inline error display if needed -->
+    <p
+      v-if="$props.error"
+      :id="`error_tags_${id}`"
+      class="text-xs text-red-500 mt-1"
+      aria-live="assertive"
+    >
+      {{ $props.error }}
+    </p>
   </div>
 </template>
 
@@ -436,7 +445,7 @@ function handleKeyNavigation(e: KeyboardEvent, index: number) {
     dark:bg-fv-neutral-800 dark:border-fv-neutral-600
     dark:placeholder-fv-neutral-400 dark:text-white p-2
     dark:focus-within:ring-fv-primary-500 dark:focus-within:border-fv-primary-500
-    transition-all duration-200 ease-in-out shadow-sm;
+    transition-colors duration-200 ease-in-out shadow-sm;
   cursor: text;
   min-height: 2.5rem;
 }
@@ -455,7 +464,7 @@ function handleKeyNavigation(e: KeyboardEvent, index: number) {
 .tag {
   @apply inline-flex items-center justify-between
     text-sm font-medium rounded-full px-3 py-1
-    dark:text-white transition-all duration-200 ease-in-out;
+    dark:text-white transition-colors duration-200 ease-in-out;
 }
 
 .tag-text {
@@ -522,10 +531,6 @@ function handleKeyNavigation(e: KeyboardEvent, index: number) {
 }
 
 /* Copy button styling */
-.copy-button-container {
-  @apply flex justify-end mt-2;
-}
-
 .copy-button {
   @apply inline-flex items-center justify-center
     bg-fv-neutral-100 hover:bg-fv-neutral-200
@@ -539,7 +544,7 @@ function handleKeyNavigation(e: KeyboardEvent, index: number) {
 
 /* Tag counter styling */
 .tag-counter {
-  @apply text-xs text-right text-fv-neutral-500 dark:text-fv-neutral-400 mt-1;
+  @apply text-sm text-fv-neutral-600 dark:text-fv-neutral-400;
 }
 
 /* Responsive adjustments */

package/components/ui/transitions/CollapseTransition.vue

@@ -5,26 +5,20 @@
 </template>
 
 <style scoped>
-.collapse-enter-active {
-  animation: collapse reverse 300ms ease;
-}
-
+.collapse-enter-active,
 .collapse-leave-active {
-  animation: collapse 300ms ease;
+  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  transform-origin: top;
+  will-change: transform, opacity;
 }
 
-@keyframes collapse {
-  100% {
-    max-height: 0px;
-    opacity: 0;
-  }
-
-  50% {
-    max-height: 400px;
-  }
+.collapse-enter-from {
+  transform: scaleY(0);
+  opacity: 0;
+}
 
-  0% {
-    opacity: 1;
-  }
+.collapse-leave-to {
+  transform: scaleY(0);
+  opacity: 0;
 }
 </style>

package/components/ui/transitions/ExpandTransition.vue

@@ -5,28 +5,20 @@
 </template>
 
 <style scoped>
-.expand-enter-active {
-  animation: expand reverse 300ms ease;
-}
-
+.expand-enter-active,
 .expand-leave-active {
-  animation: expand 300ms ease;
+  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  transform-origin: center;
+  will-change: transform, opacity;
 }
 
-@keyframes expand {
-  100% {
-    max-height: 0px;
-    opacity: 0;
-    transform: scale(0.9);
-  }
-
-  50% {
-    max-height: 400px;
-  }
+.expand-enter-from {
+  transform: scale(0.9) scaleY(0);
+  opacity: 0;
+}
 
-  0% {
-    transform: scale(1);
-    opacity: 1;
-  }
+.expand-leave-to {
+  transform: scale(0.9) scaleY(0);
+  opacity: 0;
 }
 </style>

package/components/ui/transitions/FadeTransition.vue

@@ -7,7 +7,8 @@
 <style scoped>
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity 0.2s ease-in;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 1, 1);
+  will-change: opacity;
 }
 
 .fade-enter-from,

package/components/ui/transitions/ScaleTransition.vue

@@ -6,11 +6,13 @@
 
 <style scoped>
 .scale-enter-active {
-  transition: all 0.1s ease-out;
+  transition: transform 100ms cubic-bezier(0, 0, 0.2, 1), opacity 100ms cubic-bezier(0, 0, 0.2, 1);
+  will-change: transform, opacity;
 }
 
 .scale-leave-active {
-  transition: all 0.075s ease-in;
+  transition: transform 75ms cubic-bezier(0.4, 0, 1, 1), opacity 75ms cubic-bezier(0.4, 0, 1, 1);
+  will-change: transform, opacity;
 }
 
 .scale-enter-from {
@@ -18,16 +20,6 @@
   transform: scale(0.95);
 }
 
-.scale-enter-to {
-  opacity: 1;
-  transform: scale(1);
-}
-
-.scale-leave-from {
-  opacity: 1;
-  transform: scale(1);
-}
-
 .scale-leave-to {
   opacity: 0;
   transform: scale(0.95);

package/components/ui/transitions/SlideTransition.vue

@@ -12,12 +12,10 @@ const props = defineProps<{
 
 <style scoped>
 /* slide left */
-.slide-left-enter-active {
-  transition: all 0.2s;
-}
-
+.slide-left-enter-active,
 .slide-left-leave-active {
-  transition: all 0.2s;
+  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: transform, opacity;
 }
 
 .slide-left-enter-from {
@@ -31,12 +29,10 @@ const props = defineProps<{
 }
 
 /* slide right */
-.slide-right-enter-active {
-  transition: all 0.2s;
-}
-
+.slide-right-enter-active,
 .slide-right-leave-active {
-  transition: all 0.2s;
+  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: transform, opacity;
 }
 
 .slide-right-enter-from {
@@ -50,12 +46,10 @@ const props = defineProps<{
 }
 
 /* slide up */
-.slide-up-enter-active {
-  transition: all 0.2s;
-}
-
+.slide-up-enter-active,
 .slide-up-leave-active {
-  transition: all 0.2s;
+  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: transform, opacity;
 }
 
 .slide-up-enter-from {
@@ -69,12 +63,10 @@ const props = defineProps<{
 }
 
 /* slide down */
-.slide-down-enter-active {
-  transition: all 0.2s;
-}
-
+.slide-down-enter-active,
 .slide-down-leave-active {
-  transition: all 0.2s;
+  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: transform, opacity;
 }
 
 .slide-down-enter-from {
@@ -88,12 +80,10 @@ const props = defineProps<{
 }
 
 /* shelf up */
-.shelf-up-enter-active {
-  transition: all 0.2s;
-}
-
+.shelf-up-enter-active,
 .shelf-up-leave-active {
-  transition: all 0.2s;
+  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: transform, opacity;
 }
 
 .shelf-up-enter-from {
@@ -107,12 +97,10 @@ const props = defineProps<{
 }
 
 /* shelf down */
-.shelf-down-enter-active {
-  transition: all 0.2s;
-}
-
+.shelf-down-enter-active,
 .shelf-down-leave-active {
-  transition: all 0.2s;
+  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: transform, opacity;
 }
 
 .shelf-down-enter-from {

package/composables/rest.ts

@@ -27,8 +27,9 @@ export interface APIResult {
   status?: number
 }
 
-// Use WeakMap for caches to allow garbage collection of unused entries
+// Use Map with size limit for better performance than WeakMap in this case
 const urlParseCache = new Map<string, string>()
+const MAX_URL_CACHE_SIZE = 500
 
 // Global request hash cache with size limit to prevent memory leaks
 const globalHashCache = new Map<string, number>()
@@ -59,6 +60,14 @@ function getUrlForHash(url: string): string {
     urlForHash = url
   }
 
+  // Implement LRU-like cache eviction for URL cache
+  if (urlParseCache.size >= MAX_URL_CACHE_SIZE) {
+    const firstKey = urlParseCache.keys().next().value
+    if (firstKey !== undefined) {
+      urlParseCache.delete(firstKey)
+    }
+  }
+
   urlParseCache.set(url, urlForHash)
   return urlForHash
 }
@@ -72,9 +81,11 @@ function checkSSRMode(): boolean {
   return isSSRMode
 }
 
-// Fast JSON.stringify for params
+// Fast JSON.stringify for params with caching for common cases
+const EMPTY_PARAMS = ''
 function stringifyParams(params?: RestParams): string {
-  return params ? JSON.stringify(params) : ''
+  if (!params) return EMPTY_PARAMS
+  return JSON.stringify(params)
 }
 
 // Compute request hash with global caching and size limit
@@ -138,9 +149,13 @@ params?: RestParams,
   const emitMainLoading = (value: boolean) => eventBus.emit('main-loading', value)
   const emitRestError = (result: any) => eventBus.emit('rest-error', result)
 
+  // Pre-bind emit functions to avoid recreation
+  const boundEmitMainLoading = emitMainLoading
+  const boundEmitRestError = emitRestError
+
   function handleErrorResult<ResultType extends APIResult>(result: ResultType): Promise<ResultType> {
-    emitMainLoading(false)
-    emitRestError(result)
+    boundEmitMainLoading(false)
+    boundEmitRestError(result)
     return Promise.reject(result)
   }
 
@@ -212,8 +227,8 @@ params?: RestParams,
           serverRouter.addResult(requestHash, restError)
         }
 
-        emitMainLoading(false)
-        emitRestError(restError)
+        boundEmitMainLoading(false)
+        boundEmitRestError(restError)
         return Promise.resolve(restError)
       }
       finally {

package/composables/seo.ts

@@ -27,8 +27,9 @@ export interface LazyHead {
   twitterCreator?: string
 }
 
-// Cache for processed image URLs
+// Cache for processed image URLs with size limit
 const processedImageUrlCache = new Map<string, string>()
+const MAX_IMAGE_URL_CACHE_SIZE = 200
 
 // Helper function to process image URLs with caching
 function processImageUrl(image: string | undefined, imageType: string | undefined): string | undefined {
@@ -48,22 +49,46 @@ function processImageUrl(image: string | undefined, imageType: string | undefine
     result = image
   }
 
+  // Implement LRU-like cache eviction
+  if (processedImageUrlCache.size >= MAX_IMAGE_URL_CACHE_SIZE) {
+    const firstKey = processedImageUrlCache.keys().next().value
+    if (firstKey !== undefined) {
+      processedImageUrlCache.delete(firstKey)
+    }
+  }
+
   processedImageUrlCache.set(cacheKey, result)
   return result
 }
 
-// Helper function to normalize image type
+// Cache normalized image types
+const normalizedImageTypeCache = new Map<string | undefined, 'image/jpeg' | 'image/gif' | 'image/png' | null>()
+
+// Helper function to normalize image type with caching
 function normalizeImageType(imageType: string | undefined): 'image/jpeg' | 'image/gif' | 'image/png' | null {
-  if (!imageType) return null
+  const cached = normalizedImageTypeCache.get(imageType)
+  if (cached !== undefined) return cached
+
+  let result: 'image/jpeg' | 'image/gif' | 'image/png' | null
 
-  const type = imageType.includes('image/') ? imageType : `image/${imageType}`
-  if (type === 'image/jpeg' || type === 'image/gif' || type === 'image/png') {
-    return type as 'image/jpeg' | 'image/gif' | 'image/png'
+  if (!imageType) {
+    result = null
   }
-  return 'image/png'
+  else {
+    const type = imageType.includes('image/') ? imageType : `image/${imageType}`
+    if (type === 'image/jpeg' || type === 'image/gif' || type === 'image/png') {
+      result = type as 'image/jpeg' | 'image/gif' | 'image/png'
+    }
+    else {
+      result = 'image/png'
+    }
+  }
+
+  normalizedImageTypeCache.set(imageType, result)
+  return result
 }
 
-// Precomputed alternate locale URL template
+// Precomputed alternate locale URL template - inline for better JIT
 function ALTERNATE_LOCALE_TEMPLATE(scheme: string, host: string, locale: string, path: string) {
   return `${scheme}://${host}/l/${locale}${path}`
 }

package/composables/templating.ts

@@ -57,11 +57,13 @@ const dateFormatOptions = {
   }),
 }
 
-// Color cache for contrast calculations to avoid repeated calculations
+// Color cache for contrast calculations with size limit
 const colorContrastCache = new Map<string, string>()
+const MAX_COLOR_CACHE_SIZE = 100
 
 // Locale transform cache to avoid repeated replacements
 const localeTransformCache = new Map<string, string>()
+const MAX_LOCALE_CACHE_SIZE = 50
 
 // Default colors for contrast errors
 const DEFAULT_DARK_COLOR = '#000000'
@@ -100,7 +102,14 @@ function getContrastingTextColor(backgroundColor: string) {
     const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255
     const result = luminance > 0.5 ? DEFAULT_DARK_COLOR : DEFAULT_LIGHT_COLOR
 
-    // Cache the result
+    // Cache the result with LRU eviction
+    if (colorContrastCache.size >= MAX_COLOR_CACHE_SIZE) {
+      const firstKey = colorContrastCache.keys().next().value
+      if (firstKey !== undefined) {
+        colorContrastCache.delete(firstKey)
+      }
+    }
+
     colorContrastCache.set(backgroundColor, result)
     return result
   }
@@ -109,6 +118,12 @@ function getContrastingTextColor(backgroundColor: string) {
   }
 }
 
+// Cache for power calculations in formatBytes
+const kPowerCache = new Float64Array(9) // Support up to YB
+for (let i = 0; i < 9; i++) {
+  kPowerCache[i] = k ** i
+}
+
 function formatBytes(bytes: number, decimals = 2) {
   if (!+bytes) {
     return '0 Bytes'
@@ -118,18 +133,40 @@ function formatBytes(bytes: number, decimals = 2) {
   // Use precomputed logK for better performance
   const i = Math.floor(Math.log(bytes) / logK)
 
-  return `${Number.parseFloat((bytes / k ** i).toFixed(dm))} ${byteSizes[i]}`
+  // Use cached power value instead of recalculating
+  const divisor = i < kPowerCache.length ? kPowerCache[i] : k ** i
+
+  return `${Number.parseFloat((bytes / divisor).toFixed(dm))} ${byteSizes[i]}`
 }
 
-// Helper to parse date inputs consistently
+// Cache for parsed date strings
+const parsedDateCache = new Map<string, number>()
+const MAX_DATE_CACHE_SIZE = 100
+
+// Helper to parse date inputs consistently with caching
 function parseDateInput(dt: Date | string | number): number {
   if (dt instanceof Date) {
     return dt.getTime()
   }
 
   if (typeof dt === 'string') {
+    // Check cache first
+    const cached = parsedDateCache.get(dt)
+    if (cached !== undefined) return cached
+
     const parsed = Date.parse(dt)
-    return Number.isNaN(parsed) ? Number.parseInt(dt, 10) : parsed
+    const result = Number.isNaN(parsed) ? Number.parseInt(dt, 10) : parsed
+
+    // Cache with LRU eviction
+    if (parsedDateCache.size >= MAX_DATE_CACHE_SIZE) {
+      const firstKey = parsedDateCache.keys().next().value
+      if (firstKey !== undefined) {
+        parsedDateCache.delete(firstKey)
+      }
+    }
+
+    parsedDateCache.set(dt, result)
+    return result
   }
 
   return dt
@@ -170,6 +207,15 @@ function formatTimeago(dt: Date | string | number) {
   let localeWithUnderscore = localeTransformCache.get(fullLocale)
   if (!localeWithUnderscore) {
     localeWithUnderscore = fullLocale.replace('-', '_')
+
+    // Implement LRU eviction for locale cache
+    if (localeTransformCache.size >= MAX_LOCALE_CACHE_SIZE) {
+      const firstKey = localeTransformCache.keys().next().value
+      if (firstKey !== undefined) {
+        localeTransformCache.delete(firstKey)
+      }
+    }
+
     localeTransformCache.set(fullLocale, localeWithUnderscore)
   }
 

package/package.json

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