@fy-/fws-vue 2.1.31 → 2.1.32

package/components/ui/DefaultPaging.vue

@@ -5,7 +5,7 @@ import type { APIPaging } from '../../composables/rest'
 import { getURL, hasFW } from '@fy-/fws-js'
 import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/24/solid'
 import { useHead } from '@unhead/vue'
-import { ref, watch, watchEffect } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { useEventBus } from '../../composables/event-bus'
 import { useServerRouter } from '../../stores/serverRouter'
@@ -69,17 +69,20 @@ function page(page: number): RouteLocationRaw {
     hash: props.hash !== '' ? `#${props.hash}` : undefined,
   }
 }
-
+const isMounted = ref(false)
 pageWatcher.value = watch(
   () => route.query.page,
-  (v) => {
+  (oldValue, v) => {
+    if (v === undefined || v === oldValue || !isMounted.value) return
     eventBus.emit(`${props.id}GoToPage`, v || 1)
   },
 )
 
-watchEffect(() => {
-  const page = props.items.page_no
-  const page_max = props.items.page_max
+// Compute pagination links for useHead
+const paginationLinks = computed(() => {
+  const result: any[] = []
+  const page = Number(props.items.page_no)
+  const page_max = Number(props.items.page_max)
 
   let next
   let prev
@@ -87,32 +90,37 @@ watchEffect(() => {
   if (hasFW()) {
     const url = getURL()
     if (url) {
-      const currentQuery = { ...route.query }
+      // Parse the canonical URL to get the base URL and current query parameters
+      const canonicalUrl = new URL(url.Canonical)
+
+      const baseUrl = `${url.Scheme}://${url.Host}${url.Path}`
+      const currentQuery: Record<string, string> = {}
+      canonicalUrl.searchParams.forEach((value, key) => {
+        currentQuery[key] = value
+      })
       // Remove the existing 'page' parameter to avoid duplicates
       delete currentQuery.page
 
-      const baseURL = `${url.Scheme}://${url.Host}${url.Path}`
       const hashPart = props.hash !== '' ? `#${props.hash}` : ''
 
       if (page + 1 <= page_max) {
         const nextQuery = { ...currentQuery, page: (page + 1).toString() }
         const nextQueryString = new URLSearchParams(nextQuery).toString()
-        next = `${baseURL}?${nextQueryString}${hashPart}`
+        next = `${baseUrl}?${nextQueryString}${hashPart}`
       }
 
       if (page - 1 >= 1) {
         const prevQuery = { ...currentQuery, page: (page - 1).toString() }
         const prevQueryString = new URLSearchParams(prevQuery).toString()
-        prev = `${baseURL}?${prevQueryString}${hashPart}`
+        prev = `${baseUrl}?${prevQueryString}${hashPart}`
       }
     }
   }
-  const result: any = []
 
   if (next) {
     result.push({
-      href: next,
       rel: 'next',
+      href: next,
       key: `paging-next${props.id}`,
       hid: `paging-next${props.id}`,
       id: `paging-next${props.id}`,
@@ -120,16 +128,24 @@ watchEffect(() => {
   }
   if (prev) {
     result.push({
-      href: prev,
       rel: 'prev',
+      href: prev,
       key: `paging-prev${props.id}`,
       hid: `paging-prev${props.id}`,
       id: `paging-prev${props.id}`,
     })
   }
-  useHead({
-    link: result,
-  })
+
+  return result
+})
+
+// Use useHead outside of any reactive context to ensure it runs during SSR
+useHead({
+  link: paginationLinks.value,
+})
+
+onMounted(() => {
+  isMounted.value = true
 })
 </script>
 

package/package.json

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