@fy-/fws-vue 2.3.10 → 2.3.12

package/components/ui/DefaultSidebar.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import type { NavLink } from '../../types'
 import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/vue/24/solid'
-import { useStorage } from '@vueuse/core'
+import { useDebounceFn, useStorage } from '@vueuse/core'
+import { computed, shallowRef } from 'vue'
 import { useRoute } from 'vue-router'
 
 const props = withDefaults(
@@ -15,21 +16,48 @@ const props = withDefaults(
     baseUrl: '/',
   },
 )
+
 const route = useRoute()
+
+// Cache storage key to avoid string concatenation
+const storageKey = computed(() => `isOpenSidebar-${props.id}`)
+
+// Create a cache for active links to avoid recalculation
+const activeLinkCache = shallowRef(new Map<string, string>())
+
+// Optimized link active check with memoization
 function isLinkActive(link: NavLink) {
-  if (link.to !== props.baseUrl) {
-    if (route.path === link.to || route.path.includes(link.to)) {
-      return 'fvside-active'
+  const linkTo = link.to
+
+  // Return from cache if available
+  if (activeLinkCache.value.has(linkTo)) {
+    return activeLinkCache.value.get(linkTo)
+  }
+
+  let result = ''
+  if (linkTo !== props.baseUrl) {
+    if (route.path === linkTo || route.path.includes(linkTo)) {
+      result = 'fvside-active'
     }
   }
   else {
-    if (route.path === link.to) {
-      return 'fvside-active'
+    if (route.path === linkTo) {
+      result = 'fvside-active'
     }
   }
-  return ''
+
+  // Cache the result
+  activeLinkCache.value.set(linkTo, result)
+  return result
 }
-const isOpen = useStorage(`isOpenSidebar-${props.id}`, true)
+
+// Debounce storage updates to prevent rapid toggling
+const isOpen = useStorage(storageKey.value, true)
+
+// Debounced toggle function
+const toggleSidebar = useDebounceFn(() => {
+  isOpen.value = !isOpen.value
+}, 150)
 </script>
 
 <template>
@@ -38,7 +66,7 @@ const isOpen = useStorage(`isOpenSidebar-${props.id}`, true)
       <button
         class="btn neutral defaults"
         aria-controls="side-nav"
-        @click="isOpen = !isOpen"
+        @click="toggleSidebar"
       >
         <ArrowLeftIcon v-if="isOpen" />
         <ArrowRightIcon v-else />

package/components/ui/DefaultTagInput.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue'
+import { useDebounceFn, useVModel } from '@vueuse/core'
+import { computed, onMounted, shallowRef, watch } from 'vue'
 import { useEventBus } from '../../composables/event-bus'
 
 /**
@@ -41,23 +42,41 @@ const props = withDefaults(
 )
 
 /**
- * Refs & Data
+ * Refs & Data - using shallowRef for DOM elements for better performance
  */
-const textInput = ref<HTMLElement>()
-const isMaxReached = ref(false)
-const inputContainer = ref<HTMLElement>()
+const textInput = shallowRef<HTMLElement>()
+const isMaxReached = shallowRef(false)
+const inputContainer = shallowRef<HTMLElement>()
 
 const emit = defineEmits(['update:modelValue'])
 
 /**
- * Create a two-way computed property for modelValue
+ * Use VueUse's useVModel for more efficient two-way binding
  */
-const model = computed({
-  get: () => props.modelValue,
-  set: (items) => {
-    emit('update:modelValue', items)
-  },
-})
+const model = useVModel(props, 'modelValue', emit)
+
+/**
+ * Cache regex patterns to avoid creating them on each input
+ */
+const getSeparatorRegex = (() => {
+  let cachedRegex: RegExp | null = null
+  let cachedGlobalRegex: RegExp | null = null
+
+  return (isGlobal = false) => {
+    if (isGlobal) {
+      if (!cachedGlobalRegex) {
+        cachedGlobalRegex = new RegExp(props.separators.join('|'), 'g')
+      }
+      return cachedGlobalRegex
+    }
+    else {
+      if (!cachedRegex) {
+        cachedRegex = new RegExp(props.separators.join('|'))
+      }
+      return cachedRegex
+    }
+  }
+})()
 
 /**
  * Compute aria-describedby IDs if help or error exist
@@ -101,9 +120,11 @@ onMounted(() => {
 const eventBus = useEventBus()
 
 /**
- * Copy the tags to clipboard
+ * Copy the tags to clipboard with debounce to prevent multiple executions
  */
-async function copyText() {
+const copyText = useDebounceFn(async () => {
+  if (!model.value.length) return
+
   const text = model.value.join(', ')
 
   try {
@@ -122,35 +143,33 @@ async function copyText() {
       time: 2500,
     })
   }
-}
+}, 300)
 
 /**
  * On each character input, check if user typed a separator
  */
-function handleInput(event: Event) {
+const handleInput = useDebounceFn((event: Event) => {
   const inputEvent = event as InputEvent
   if (!inputEvent.data) return
-  const separatorsRegex = new RegExp(props.separators.join('|'))
-  if (separatorsRegex.test(inputEvent.data)) {
+
+  if (getSeparatorRegex().test(inputEvent.data)) {
     addTag()
   }
-}
+}, 50)
 
 /**
- * Add a tag by splitting on the separator
+ * Add a tag by splitting on the separator - optimized with fewer operations
  */
 function addTag() {
   if (!textInput.value || isMaxReached.value) return
 
-  const separatorsRegex = new RegExp(props.separators.join('|'))
   const textContent = textInput.value.textContent?.trim()
-
   if (!textContent) return
 
   const newTags = textContent
-    .split(separatorsRegex)
-    .map((tag: string) => tag.trim())
-    .filter((tag: string) => tag.length > 0)
+    .split(getSeparatorRegex())
+    .map(tag => tag.trim())
+    .filter(tag => tag.length > 0)
 
   // Remove duplicates if noDuplicates is enabled
   const filteredTags = props.noDuplicates
@@ -160,28 +179,41 @@ function addTag() {
   // If maxTags is set, ensure adding tags doesn't exceed the limit
   if (props.maxTags && props.maxTags > 0) {
     const slotsAvailable = props.maxTags - model.value.length
-    filteredTags.splice(slotsAvailable)
+    if (slotsAvailable <= 0) {
+      // If no slots are available, clear input and return
+      textInput.value.textContent = ''
+      return
+    }
+    if (filteredTags.length > slotsAvailable) {
+      filteredTags.splice(slotsAvailable)
+    }
+  }
+
+  if (filteredTags.length) {
+    model.value = [...model.value, ...filteredTags]
   }
 
-  model.value = [...model.value, ...filteredTags]
   textInput.value.textContent = ''
 }
 
 /**
  * Remove a tag by index
  */
-function removeTag(index: number) {
+const removeTag = useDebounceFn((index: number) => {
+  if (index < 0 || index >= model.value.length) return
+
   const newTags = [...model.value]
   newTags.splice(index, 1)
   model.value = newTags
   focusInput()
-}
+}, 50)
 
 /**
  * Handle backspace/delete on an empty input
  */
 function removeLastTag() {
   if (!textInput.value) return
+
   if (textInput.value.textContent === '') {
     // If input is empty, remove the last tag
     if (model.value.length > 0) {
@@ -201,16 +233,20 @@ function removeLastTag() {
 
 /**
  * Place the cursor at the end of the contenteditable text
+ * Using requestAnimationFrame for better performance
  */
 function placeCursorToEnd() {
   if (!textInput.value) return
-  const range = document.createRange()
-  const sel = window.getSelection()
-  range.selectNodeContents(textInput.value)
-  range.collapse(false)
-  if (!sel) return
-  sel.removeAllRanges()
-  sel.addRange(range)
+
+  requestAnimationFrame(() => {
+    const range = document.createRange()
+    const sel = window.getSelection()
+    range.selectNodeContents(textInput.value!)
+    range.collapse(false)
+    if (!sel) return
+    sel.removeAllRanges()
+    sel.addRange(range)
+  })
 }
 
 /**
@@ -224,32 +260,37 @@ function focusInput() {
 }
 
 /**
- * Handle pasting text
+ * Handle pasting text with debounce
  */
-function handlePaste(e: ClipboardEvent) {
+const handlePaste = useDebounceFn((e: ClipboardEvent) => {
   if (!textInput.value || isMaxReached.value) return
 
   const clipboardData = e.clipboardData ?? (window as any).clipboardData
   if (!clipboardData) return
 
   const text = clipboardData.getData('text')
-  const separatorsRegex = new RegExp(props.separators.join('|'), 'g')
-  const pasteText = text.replace(separatorsRegex, ',')
-  textInput.value.textContent += pasteText
+  if (!text.trim()) return
+
+  const pasteText = text.replace(getSeparatorRegex(true), ',')
+
+  // Set the text content directly, rather than appending
+  textInput.value.textContent = pasteText
   e.preventDefault()
   addTag()
-}
+}, 50)
 
 /**
- * Handle keyboard navigation between tags
+ * Handle keyboard navigation between tags - optimized with element lookup caching
  */
 function handleKeyNavigation(e: KeyboardEvent, index: number) {
+  if (!inputContainer.value) return
+
   if (e.key === 'ArrowLeft' && index > 0) {
-    const prevTag = inputContainer.value?.querySelector(`[data-index="${index - 1}"] button`) as HTMLElement
+    const prevTag = inputContainer.value.querySelector(`[data-index="${index - 1}"] button`) as HTMLElement
     if (prevTag) prevTag.focus()
   }
   else if (e.key === 'ArrowRight' && index < model.value.length - 1) {
-    const nextTag = inputContainer.value?.querySelector(`[data-index="${index + 1}"] button`) as HTMLElement
+    const nextTag = inputContainer.value.querySelector(`[data-index="${index + 1}"] button`) as HTMLElement
     if (nextTag) nextTag.focus()
   }
 }

package/composables/seo.ts

@@ -1,6 +1,7 @@
 import type { Ref } from 'vue'
 import { getLocale, getPrefix, getURL } from '@fy-/fws-js'
 import { useHead, useSeoMeta } from '@unhead/vue'
+import { computed } from 'vue'
 
 export interface LazyHead {
   name?: string
@@ -26,10 +27,53 @@ export interface LazyHead {
   twitterCreator?: string
 }
 
+// Helper function to process image URLs
+function processImageUrl(image: string | undefined, imageType: string | undefined): string | undefined {
+  if (!image) return undefined
+
+  if (image.includes('?vars=')) {
+    if (imageType) {
+      return image.replace(
+        '?vars=',
+        `.${imageType.replace('image/', '')}?vars=`,
+      )
+    }
+    else {
+      return image.replace('?vars=', '.png?vars=')
+    }
+  }
+  return image
+}
+
+// Helper function to normalize image type
+function normalizeImageType(imageType: string | undefined): 'image/jpeg' | 'image/gif' | 'image/png' | false {
+  if (!imageType) return false
+
+  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'
+  }
+  return 'image/png'
+}
+
 // eslint-disable-next-line unused-imports/no-unused-vars
 export function useSeo(seoData: Ref<LazyHead>, initial: boolean = false) {
   const currentLocale = getLocale()
-  // const url = getURL()
+
+  // Cache the URL components
+  const urlBase = computed(() => ({
+    scheme: getURL().Scheme,
+    host: getURL().Host,
+    path: getURL().Path,
+    canonical: getURL().Canonical,
+    prefix: getPrefix(),
+  }))
+
+  // Memoize common values
+  const localeForOg = computed(() => currentLocale?.replace('-', '_'))
+  const imageUrl = computed(() => processImageUrl(seoData.value.image, seoData.value.imageType))
+  const imageType = computed(() => normalizeImageType(seoData.value.imageType))
+  const imageAlt = computed(() => seoData.value.image ? seoData.value.title : undefined)
 
   useHead({
     meta: () => {
@@ -64,9 +108,9 @@ export function useSeo(seoData: Ref<LazyHead>, initial: boolean = false) {
           links.push({
             rel: 'alternate',
             hreflang: locale,
-            href: `${getURL().Scheme}://${
-              getURL().Host
-            }/l/${locale}${getURL().Path.replace(getPrefix(), '')}`,
+            href: `${urlBase.value.scheme}://${
+              urlBase.value.host
+            }/l/${locale}${urlBase.value.path.replace(urlBase.value.prefix, '')}`,
             key: `alternate-${locale}`,
           })
         }
@@ -88,12 +132,8 @@ export function useSeo(seoData: Ref<LazyHead>, initial: boolean = false) {
   })
 
   useSeoMeta({
-    ogUrl: () => `${getURL().Canonical}`,
-    ogLocale: () => {
-      if (currentLocale) {
-        return currentLocale.replace('-', '_')
-      }
-    },
+    ogUrl: () => urlBase.value.canonical,
+    ogLocale: () => localeForOg.value,
     robots:
       'index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1',
     title: () => seoData.value.title || '',
@@ -103,97 +143,22 @@ export function useSeo(seoData: Ref<LazyHead>, initial: boolean = false) {
     ogSiteName: () => seoData.value.name,
     twitterTitle: () => seoData.value.title,
     twitterDescription: () => seoData.value.description,
-    ogImageAlt: () => {
-      if (seoData.value.image) {
-        return seoData.value.title
-      }
-      return undefined
-    },
+    ogImageAlt: () => imageAlt.value,
     // @ts-expect-error: Type 'string' is not assignable to type 'undefined'.
     ogType: () => (seoData.value.type ? seoData.value.type : 'website'),
     twitterCreator: () => seoData.value.twitterCreator,
     twitterSite: () => seoData.value.twitterCreator,
-    twitterImageAlt: () => {
-      if (seoData.value.image) {
-        return seoData.value.title
-      }
-      return undefined
-    },
+    twitterImageAlt: () => imageAlt.value,
     description: () => seoData.value.description,
     keywords: () => seoData.value.keywords,
     articlePublishedTime: () => seoData.value.published,
     articleModifiedTime: () => seoData.value.modified,
-    ogImageSecureUrl: () => {
-      if (seoData.value.image) {
-        if (seoData.value.image.includes('?vars=')) {
-          if (seoData.value.imageType) {
-            return seoData.value.image.replace(
-              '?vars=',
-              `.${seoData.value.imageType.replace('image/', '')}?vars=`,
-            )
-          }
-          else {
-            return seoData.value.image.replace('?vars=', '.png?vars=')
-          }
-        }
-        return seoData.value.image
-      }
-    },
-    ogImageUrl: () => {
-      if (seoData.value.image) {
-        if (seoData.value.image.includes('?vars=')) {
-          if (seoData.value.imageType) {
-            return seoData.value.image.replace(
-              '?vars=',
-              `.${seoData.value.imageType.replace('image/', '')}?vars=`,
-            )
-          }
-          else {
-            return seoData.value.image.replace('?vars=', '.png?vars=')
-          }
-        }
-        return seoData.value.image
-      }
-    },
-    ogImageType: () => {
-      if (seoData.value.imageType) {
-        const type = seoData.value.imageType.includes('image/')
-          ? seoData.value.imageType
-          : `image/${seoData.value.imageType}`
-        if (type === 'image/jpeg' || type === 'image/gif' || type === 'image/png') {
-          return type
-        }
-        return 'image/png'
-      }
-      return undefined
-    },
-    twitterImageUrl: () => {
-      if (seoData.value.image) {
-        if (seoData.value.image.includes('?vars=')) {
-          if (seoData.value.imageType) {
-            return seoData.value.image.replace(
-              '?vars=',
-              `.${seoData.value.imageType.replace('image/', '')}?vars=`,
-            )
-          }
-          else {
-            return seoData.value.image.replace('?vars=', '.png?vars=')
-          }
-        }
-        return seoData.value.image
-      }
-    },
+    ogImageSecureUrl: () => imageUrl.value,
+    ogImageUrl: () => imageUrl.value,
+    ogImageType: () => imageType.value,
+    twitterImageUrl: () => imageUrl.value,
     twitterImageType() {
-      if (seoData.value.imageType) {
-        const type = seoData.value.imageType.includes('image/')
-          ? seoData.value.imageType
-          : `image/${seoData.value.imageType}`
-        if (type === 'image/jpeg' || type === 'image/gif' || type === 'image/png') {
-          return type
-        }
-        return 'image/png'
-      }
-      return undefined
+      return imageType.value
     },
   })
 }

package/composables/templating.ts

@@ -2,86 +2,116 @@ import { getLocale } from '@fy-/fws-js'
 import { format as formatDateTimeago } from 'timeago.js'
 import { useTranslation } from './translations'
 
+// Cache common constants and patterns
+const k = 1024
+const byteSizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+const dateFormatOptions = {
+  date: {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  },
+  datetime: {
+    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>()
+
 function cropText(str: string, ml = 100, end = '...') {
+  if (!str) return str
   if (str.length > ml) {
     return `${str.slice(0, ml)}${end}`
   }
   return str
 }
+
 function getContrastingTextColor(backgroundColor: string) {
-  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)
+  // Return from cache if available
+  if (colorContrastCache.has(backgroundColor)) {
+    return colorContrastCache.get(backgroundColor)!
+  }
+
+  // Input validation
+  if (!backgroundColor || backgroundColor.length !== 7 || backgroundColor[0] !== '#') {
+    return '#000000'
+  }
 
-  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255
+  try {
+    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)
 
-  return luminance > 0.5 ? '#000000' : '#FFFFFF'
+    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255
+    const result = luminance > 0.5 ? '#000000' : '#FFFFFF'
+
+    // Cache the result
+    colorContrastCache.set(backgroundColor, result)
+    return result
+  }
+  catch {
+    return '#000000'
+  }
 }
+
 function formatBytes(bytes: number, decimals = 2) {
   if (!+bytes) return '0 Bytes'
 
-  const k = 1024
   const dm = decimals < 0 ? 0 : decimals
-  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
-
   const i = Math.floor(Math.log(bytes) / Math.log(k))
 
-  return `${Number.parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`
+  return `${Number.parseFloat((bytes / k ** i).toFixed(dm))} ${byteSizes[i]}`
 }
 
-function formatDate(dt: Date | string | number) {
-  let _dt = dt as number
+// Helper to parse date inputs consistently
+function parseDateInput(dt: Date | string | number): number {
+  if (dt instanceof Date) {
+    return dt.getTime()
+  }
+
   if (typeof dt === 'string') {
-    _dt = Date.parse(dt)
-    if (Number.isNaN(_dt)) {
-      _dt = Number.parseInt(dt)
-    }
+    const parsed = Date.parse(dt)
+    return Number.isNaN(parsed) ? Number.parseInt(dt) : parsed
   }
 
+  return dt
+}
+
+function formatDate(dt: Date | string | number) {
+  const timestamp = parseDateInput(dt)
   const translate = useTranslation()
+
   return translate('global_datetime', {
-    val: new Date(_dt),
+    val: new Date(timestamp),
     formatParams: {
-      val: {
-        year: 'numeric',
-        month: 'long',
-        day: 'numeric',
-      },
+      val: dateFormatOptions.date,
     },
   })
 }
+
 function formatDatetime(dt: Date | string | number) {
-  let _dt = dt as number
-  if (typeof dt === 'string') {
-    _dt = Date.parse(dt)
-    if (Number.isNaN(_dt)) {
-      _dt = Number.parseInt(dt)
-    }
-  }
+  const timestamp = parseDateInput(dt)
   const translate = useTranslation()
+
   return translate('global_datetime', {
-    val: new Date(_dt),
+    val: new Date(timestamp),
     formatParams: {
-      val: {
-        year: 'numeric',
-        month: 'long',
-        day: 'numeric',
-        hour: 'numeric',
-        minute: 'numeric',
-        second: 'numeric',
-      },
+      val: dateFormatOptions.datetime,
     },
   })
 }
+
 function formatTimeago(dt: Date | string | number) {
-  let _dt = dt as number
-  if (typeof dt === 'string') {
-    _dt = Date.parse(dt)
-    if (Number.isNaN(_dt)) {
-      _dt = Number.parseInt(dt)
-    }
-  }
-  return formatDateTimeago(new Date(_dt), getLocale().replace('_', '-'))
+  const timestamp = parseDateInput(dt)
+  const locale = getLocale().replace('_', '-')
+
+  return formatDateTimeago(new Date(timestamp), locale)
 }
 
 export {