@fy-/fws-vue 2.3.63 → 2.3.64

package/components/ui/DefaultBreadcrumb.vue

@@ -27,23 +27,44 @@ const baseUrl = computed(() => {
 })
 
 // Memoize breadcrumb schema format to avoid recalculation
-const breadcrumbsSchemaFormat = computed(() => props.nav.map((item, index) => {
-  if (!item.to) {
+const breadcrumbsSchemaFormat = computed(() => {
+  const navLength = props.nav.length
+
+  return props.nav.map((item, index) => {
+    const isLastItem = index === navLength - 1
+
+    // According to Google's guidelines, the last item should not have a URL
+    if (!item.to || isLastItem) {
+      return {
+        '@type': 'ListItem',
+        'position': index + 1,
+        'name': item.name,
+      }
+    }
+
+    // Ensure proper URL construction
+    let itemUrl = item.to
+
+    // Handle relative URLs
+    if (itemUrl.startsWith('/')) {
+      itemUrl = `${baseUrl.value.scheme}://${baseUrl.value.host}${itemUrl}`
+    }
+    else if (!itemUrl.startsWith('http')) {
+      // Handle paths without leading slash
+      itemUrl = `${baseUrl.value.scheme}://${baseUrl.value.host}/${itemUrl}`
+    }
+
+    // Clean up any double slashes (except after protocol)
+    itemUrl = itemUrl.replace(/([^:]\/)\/+/g, '$1')
+
     return {
+      '@type': 'ListItem',
       'position': index + 1,
       'name': item.name,
-      '@type': 'ListItem',
+      'item': itemUrl,
     }
-  }
-
-  const fullUrl = `${baseUrl.value.host}${item.to}`.replace(/\/\//g, '/')
-  return {
-    'position': index + 1,
-    'name': item.name,
-    'item': `${baseUrl.value.scheme}://${fullUrl}`,
-    '@type': 'ListItem',
-  }
-}))
+  })
+})
 
 // Cache breadcrumb ID to avoid string operations on every render
 const breadcrumbId = computed(() => {
@@ -52,11 +73,19 @@ const breadcrumbId = computed(() => {
   return stringHash(chain)
 })
 
+// Class strings extracted for reusability and mobile optimization
+const linkClasses = 'text-xs font-medium text-fv-neutral-700 hover:text-fv-neutral-900 dark:text-fv-neutral-200 dark:hover:text-white transition-colors duration-200'
+const textClasses = 'text-xs font-medium text-fv-neutral-500 dark:text-fv-neutral-200'
+const chevronClasses = 'w-4 h-4 md:w-5 md:h-5 text-fv-neutral-400 inline-block mx-0.5 md:mx-1.5'
+const homeIconClasses = 'w-3.5 h-3.5 md:w-4 md:h-4 mr-1.5 md:mr-2 inline-block'
+
 // Only run schema.org setup if we have breadcrumbs
-if (props.nav && props.nav.length) {
+if (props.nav && props.nav.length > 0) {
   useSchemaOrg([
     defineBreadcrumb({
       '@id': `#${breadcrumbId.value}`,
+      '@context': 'https://schema.org',
+      '@type': 'BreadcrumbList',
       'itemListElement': breadcrumbsSchemaFormat,
     }),
   ])
@@ -64,44 +93,36 @@ if (props.nav && props.nav.length) {
 </script>
 
 <template>
-  <ol class="inline-flex items-center flex-wrap">
-    <template v-for="(item, index) in nav" :key="`bc_${index.toString()}`">
-      <li class="inline-flex items-center">
-        <ChevronRightIcon
-          v-if="index !== 0"
-          :class="
-            index === 0
-              ? 'w-4 h-4 mr-2 inline-block'
-              : 'w-5 h-5 text-fv-neutral-400 inline-block mx-0.5 md:mx-1.5'
-          "
-        />
-
-        <router-link
-          v-if="item.to"
-          :to="item.to"
-          :class="
-            index === 0
-              ? 'text-xs font-medium text-fv-neutral-700 hover:text-fv-neutral-900 dark:text-fv-neutral-200 dark:hover:text-white'
-              : 'text-xs font-medium text-fv-neutral-700 hover:text-fv-neutral-900 dark:text-fv-neutral-200 dark:hover:text-white'
-          "
-        >
-          <HomeIcon
-            v-if="showHome && index === 0"
-            :class="
-              index === 0
-                ? 'w-4 h-4 mr-2 inline-block'
-                : 'w-4 h-4 text-fv-neutral-400 inline-block mx-0.5 md:mx-1.5'
-            "
+  <nav aria-label="Breadcrumb">
+    <ol class="inline-flex items-center flex-wrap gap-y-1">
+      <template v-for="(item, index) in nav" :key="`bc_${index.toString()}`">
+        <li class="inline-flex items-center">
+          <ChevronRightIcon
+            v-if="index !== 0"
+            :class="chevronClasses"
           />
-          <span>{{ item.name }}</span>
-        </router-link>
-        <span
-          v-else
-          class="text-xs font-medium text-fv-neutral-500 dark:text-fv-neutral-200"
-        >
-          {{ item.name }}
-        </span>
-      </li>
-    </template>
-  </ol>
+
+          <router-link
+            v-if="item.to && index !== nav.length - 1"
+            :to="item.to"
+            :class="linkClasses"
+            :aria-current="index === nav.length - 1 ? 'page' : undefined"
+          >
+            <HomeIcon
+              v-if="showHome && index === 0"
+              :class="homeIconClasses"
+            />
+            <span>{{ item.name }}</span>
+          </router-link>
+          <span
+            v-else
+            :class="textClasses"
+            :aria-current="index === nav.length - 1 ? 'page' : undefined"
+          >
+            {{ item.name }}
+          </span>
+        </li>
+      </template>
+    </ol>
+  </nav>
 </template>

package/components/ui/DefaultInput.vue

@@ -387,7 +387,7 @@ defineExpose({ focus, blur, getInputRef })
               @blur="handleBlur"
             >
               <option
-                v-for="opt in options"
+                v-for="opt in (options || [])"
                 :key="opt[0]?.toString()"
                 :value="opt[0]"
               >

package/components/ui/DefaultModal.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { XCircleIcon } from '@heroicons/vue/24/solid'
 import { useDebounceFn, useEventListener } from '@vueuse/core'
-import { h, nextTick, onMounted, onUnmounted, ref, shallowRef, watch } from 'vue'
+import { computed, h, nextTick, onMounted, onUnmounted, ref, shallowRef, watch } from 'vue'
 import { useEventBus } from '../../composables/event-bus'
 
 // Use a shared global registry in the window to track all modals across instances
@@ -75,7 +75,7 @@ const props = withDefaults(
 const eventBus = useEventBus()
 
 const isOpen = ref<boolean>(false)
-const modalRef = ref<HTMLElement | null>(null)
+const modalRef = shallowRef<HTMLElement | null>(null)
 let previouslyFocusedElement: HTMLElement | null = null
 let focusableElements: HTMLElement[] = []
 
@@ -91,6 +91,14 @@ const modalUniqueId = shallowRef('')
 // Trap focus within modal for accessibility - memoize selector for better performance
 const focusableSelector = 'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'
 
+// Mobile-optimized backdrop classes
+const backdropClasses = 'flex fixed backdrop-blur-[8px] inset-0 flex-col items-center py-4 md:py-8 px-2 md:px-4 overflow-y-auto text-fv-neutral-800 dark:text-fv-neutral-300 bg-fv-neutral-900/[.20] dark:bg-fv-neutral-50/[.20]'
+
+// Modal panel classes with mobile optimization
+const modalPanelClasses = computed(() => {
+  return `relative ${props.mSize} max-w-[calc(100vw-1rem)] md:max-w-6xl max-h-[85vh] my-auto px-0 box-border bg-white rounded-lg shadow-xl dark:bg-fv-neutral-900 flex flex-col`
+})
+
 function getFocusableElements(element: HTMLElement): HTMLElement[] {
   return Array.from(
     element.querySelectorAll(focusableSelector),
@@ -99,12 +107,11 @@ function getFocusableElements(element: HTMLElement): HTMLElement[] {
   ) as HTMLElement[]
 }
 
-// Use VueUse's useEventListener for better event handling
-function setupKeydownListener() {
-  useEventListener(document, 'keydown', handleKeyDown)
-}
+// Forward declare setModal to avoid use-before-define
+let setModal: any
 
-function handleKeyDown(event: KeyboardEvent) {
+// Memoize keydown handler for better performance
+const handleKeyDown = useDebounceFn((event: KeyboardEvent) => {
   // Only handle events for the top-most modal
   if (!isOpen.value) return
 
@@ -117,25 +124,28 @@ function handleKeyDown(event: KeyboardEvent) {
   // Close on escape
   if (event.key === 'Escape') {
     event.preventDefault()
-    // Use direct state to avoid the use-before-define issue
-    isOpen.value = false
+    setModal(false)
     return
   }
 
-  // Handle tab trapping
+  // Handle tab trapping only if we have focusable elements
   if (event.key === 'Tab' && focusableElements.length > 0) {
+    const firstElement = focusableElements[0]
+    const lastElement = focusableElements[focusableElements.length - 1]
+    const activeElement = document.activeElement
+
     // If shift + tab on first element, focus last element
-    if (event.shiftKey && document.activeElement === focusableElements[0]) {
+    if (event.shiftKey && activeElement === firstElement) {
       event.preventDefault()
-      focusableElements[focusableElements.length - 1].focus()
+      lastElement.focus()
     }
     // If tab on last element, focus first element
-    else if (!event.shiftKey && document.activeElement === focusableElements[focusableElements.length - 1]) {
+    else if (!event.shiftKey && activeElement === lastElement) {
       event.preventDefault()
-      focusableElements[0].focus()
+      firstElement.focus()
     }
   }
-}
+}, 10)
 
 // Check if this modal is the top-most (highest z-index)
 function isTopMostModal(id: string): boolean {
@@ -152,7 +162,7 @@ function isTopMostModal(id: string): boolean {
   return highestEntry[0] === id
 }
 
-const setModal = useDebounceFn((value: boolean) => {
+setModal = useDebounceFn((value: boolean) => {
   if (value === true) {
     if (props.onOpen) props.onOpen()
     previouslyFocusedElement = document.activeElement as HTMLElement
@@ -176,7 +186,8 @@ const setModal = useDebounceFn((value: boolean) => {
     // Set this modal's z-index
     zIndex.value = newZIndex
 
-    setupKeydownListener()
+    // Set up keyboard listener directly
+    useEventListener(document, 'keydown', handleKeyDown)
   }
   if (value === false) {
     if (props.onClose) props.onClose()
@@ -197,12 +208,13 @@ const setModal = useDebounceFn((value: boolean) => {
 watch(isOpen, async (newVal) => {
   if (newVal) {
     await nextTick()
-    if (modalRef.value) {
-      focusableElements = getFocusableElements(modalRef.value)
+    const modalEl = modalRef.value
+    if (modalEl) {
+      focusableElements = getFocusableElements(modalEl)
 
       // Focus the close button or first focusable element
       requestAnimationFrame(() => {
-        const closeButton = modalRef.value?.querySelector('button[aria-label="Close modal"]') as HTMLElement
+        const closeButton = modalEl.querySelector('button[aria-label="Close modal"]') as HTMLElement
         if (closeButton) {
           closeButton.focus()
         }
@@ -211,7 +223,7 @@ watch(isOpen, async (newVal) => {
         }
         else {
           // If no focusable elements, focus the modal itself
-          modalRef.value?.focus()
+          modalEl.focus()
         }
       })
     }
@@ -243,10 +255,10 @@ const handleBackdropClick = useDebounceFn((event: MouseEvent) => {
 <template>
   <ClientOnly>
     <transition
-      enter-active-class="duration-50 ease-out"
+      enter-active-class="duration-150 ease-out"
       enter-from-class="opacity-0"
       enter-to-class="opacity-100"
-      leave-active-class="duration-50 ease-in"
+      leave-active-class="duration-100 ease-in"
       leave-from-class="opacity-100"
       leave-to-class="opacity-0"
     >
@@ -262,14 +274,14 @@ const handleBackdropClick = useDebounceFn((event: MouseEvent) => {
       >
         <!-- Backdrop with click to close functionality -->
         <div
-          class="flex fixed backdrop-blur-[8px] inset-0 flex-col items-center py-8 px-4 overflow-y-auto text-fv-neutral-800 dark:text-fv-neutral-300 bg-fv-neutral-900/[.20] dark:bg-fv-neutral-50/[.20]"
+          :class="backdropClasses"
           :style="{ zIndex }"
           @click="handleBackdropClick"
         >
           <!-- Modal panel -->
           <div
             ref="modalRef"
-            :class="`relative ${mSize} max-w-6xl max-h-[85vh] my-auto px-0 box-border bg-white rounded-lg shadow dark:bg-fv-neutral-900 flex flex-col`"
+            :class="modalPanelClasses"
             :style="{ zIndex }"
             tabindex="-1"
             @click.stop
@@ -277,17 +289,17 @@ const handleBackdropClick = useDebounceFn((event: MouseEvent) => {
             <!-- Header with title if provided -->
             <div
               v-if="title"
-              class="flex items-center justify-between p-2 w-full border-b rounded-t dark:border-fv-neutral-700"
+              class="flex items-center justify-between p-2 md:p-3 w-full border-b rounded-t dark:border-fv-neutral-700"
             >
               <slot name="before" />
               <h2
                 v-if="title"
                 :id="`${props.id}-title`"
-                class="text-xl font-semibold text-fv-neutral-900 dark:text-white"
+                class="text-lg md:text-xl font-semibold text-fv-neutral-900 dark:text-white"
                 v-html="title"
               />
               <button
-                class="text-fv-neutral-400 bg-transparent hover:bg-fv-neutral-200 hover:text-fv-neutral-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center dark:hover:bg-fv-neutral-600 dark:hover:text-white"
+                class="text-fv-neutral-400 bg-transparent hover:bg-fv-neutral-200 hover:text-fv-neutral-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center dark:hover:bg-fv-neutral-600 dark:hover:text-white transition-colors duration-200"
                 aria-label="Close modal"
                 @click="setModal(false)"
               >
@@ -295,7 +307,7 @@ const handleBackdropClick = useDebounceFn((event: MouseEvent) => {
               </button>
             </div>
             <!-- Content area -->
-            <div :class="`p-2 space-y-3 flex-grow ${ofy}`">
+            <div :class="`p-2 md:p-4 space-y-3 flex-grow ${ofy}`">
               <slot />
             </div>
           </div>

package/components/ui/DefaultPaging.vue

@@ -282,12 +282,13 @@ onMounted(() => {
             </div>
             <input
               v-else
+              :id="`jump-input-${id}`"
               v-model="jumpPageValue"
               type="number"
               :min="1"
               :max="items.page_max"
               :class="`pagination-jump-input ${inputWidthClass}`"
-              placeholder=""
+              placeholder="#"
               @keydown="handleJumpInputKeydown"
               @blur="showJumpInput = false; jumpPageValue = ''"
             >
@@ -336,12 +337,13 @@ onMounted(() => {
             </div>
             <input
               v-else
+              :id="`jump-input-${id}`"
               v-model="jumpPageValue"
               type="number"
               :min="1"
               :max="items.page_max"
               :class="`pagination-jump-input ${inputWidthClass}`"
-              placeholder=""
+              placeholder="#"
               @keydown="handleJumpInputKeydown"
               @blur="showJumpInput = false; jumpPageValue = ''"
             >
@@ -366,12 +368,13 @@ onMounted(() => {
             </div>
             <input
               v-else
+              :id="`jump-input-${id}`"
               v-model="jumpPageValue"
               type="number"
               :min="1"
               :max="items.page_max"
               :class="`pagination-jump-input ${inputWidthClass}`"
-              placeholder=""
+              placeholder="#"
               @keydown="handleJumpInputKeydown"
               @blur="showJumpInput = false; jumpPageValue = ''"
             >

package/package.json

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