@fy-/fws-vue 2.1.26 → 2.1.28

package/components/ui/DefaultPaging.vue

@@ -1,19 +1,11 @@
 <script setup lang="ts">
-import type {
-  WatchStopHandle,
-} from 'vue'
+import type { WatchStopHandle } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
 import type { APIPaging } from '../../composables/rest'
 import { getURL, hasFW } from '@fy-/fws-js'
 import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/24/solid'
 import { useServerHead } from '@unhead/vue'
-import {
-  computed,
-  onMounted,
-  onUnmounted,
-  ref,
-  watch,
-} from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { useEventBus } from '../../composables/event-bus'
 import { useServerRouter } from '../../stores/serverRouter'
@@ -35,8 +27,6 @@ const route = useRoute()
 const eventBus = useEventBus()
 const history = useServerRouter()
 
-const prevNextSeo = ref<{ prev?: string, next?: string }>({})
-
 function isNewPage(page: number) {
   return (
     page >= 1 && page <= props.items.page_max && page !== props.items.page_no
@@ -80,64 +70,62 @@ function page(page: number): RouteLocationRaw {
   }
 }
 
-function checkPageNumber(page: number = 1) {
-  // Reset prev and next
-  prevNextSeo.value.next = undefined
-  prevNextSeo.value.prev = undefined
-
-  if (hasFW()) {
-    const url = getURL()
-    if (url) {
-      if (page + 1 <= props.items.page_max) {
-        prevNextSeo.value.next = `${url.Scheme}://${url.Host}${url.Path}?page=${page + 1}${props.hash !== '' ? `#${props.hash}` : ''}`
-      }
-      if (page - 1 >= 1) {
-        prevNextSeo.value.prev = `${url.Scheme}://${url.Host}${url.Path}?page=${page - 1}${props.hash !== '' ? `#${props.hash}` : ''}`
-      }
-    }
-  }
-}
-
-// Watch for changes in the current page number
 pageWatcher.value = watch(
-  () => props.items.page_no,
-  (newPage) => {
-    checkPageNumber(newPage)
+  () => route.query.page,
+  (v) => {
+    eventBus.emit(`${props.id}GoToPage`, v || 1)
   },
-  { immediate: true }, // Ensure it's called initially
 )
 
-onMounted(() => {
-  eventBus.on(`${props.id}GoToPage`, checkPageNumber)
-})
-onUnmounted(() => {
-  eventBus.off(`${props.id}GoToPage`, checkPageNumber)
-  if (pageWatcher.value) pageWatcher.value()
-})
-
-// Initial check
-checkPageNumber(props.items.page_no)
-
-// Setup SEO head
 useServerHead({
   link: computed(() => {
-    const links: any[] = []
+    const result: any = []
+    const page = props.items.page_no
+    const page_max = props.items.page_max
+
+    let next
+    let prev
+
+    if (hasFW()) {
+      const url = getURL()
+      if (url) {
+        const currentQuery = { ...route.query }
+        // 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}`
+        }
+
+        if (page - 1 >= 1) {
+          const prevQuery = { ...currentQuery, page: (page - 1).toString() }
+          const prevQueryString = new URLSearchParams(prevQuery).toString()
+          prev = `${baseURL}?${prevQueryString}${hashPart}`
+        }
+      }
+    }
 
-    if (prevNextSeo.value.next) {
-      links.push({
-        href: prevNextSeo.value.next,
+    if (next) {
+      result.push({
+        href: next,
         rel: 'next',
-        key: 'paging-next',
+        key: `paging-next${props.id}`,
       })
     }
-    if (prevNextSeo.value.prev) {
-      links.push({
-        href: prevNextSeo.value.prev,
+    if (prev) {
+      result.push({
+        href: prev,
         rel: 'prev',
-        key: 'paging-prev',
+        key: `paging-prev${props.id}`,
       })
     }
-    return links
+
+    return result
   }),
 })
 </script>
@@ -170,8 +158,7 @@ useServerHead({
           </li>
           <li v-if="items.page_no - 2 > 2">
             <div
-              v-if="items.page_no - 2 > 2"
-              class="flex items-center justify-center px-1.5 h-8 leading-tight text-fv-neutral-500 bg-white border border-fv-neutral-300 hover:bg-fv-neutral-100 hover:text-fv-neutral-700 dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-400 dark:hover:bg-fv-neutral-700 dark:hover:text-white"
+              class="flex items-center justify-center px-1.5 h-8 leading-tight text-fv-neutral-500 bg-white border border-fv-neutral-300 dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-400"
             >
               ...
             </div>
@@ -179,7 +166,7 @@ useServerHead({
           <template v-for="i in 2">
             <li
               v-if="items.page_no - (3 - i) >= 1"
-              :key="`page-${items.page_no + i}`"
+              :key="`page-${items.page_no - (3 - i)}`"
             >
               <router-link
                 class="flex items-center justify-center px-3 h-8 leading-tight text-fv-neutral-500 bg-white border border-fv-neutral-300 hover:bg-fv-neutral-100 hover:text-fv-neutral-700 dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-400 dark:hover:bg-fv-neutral-700 dark:hover:text-white"
@@ -192,7 +179,7 @@ useServerHead({
           <li>
             <div
               aria-current="page"
-              class="z-10 flex items-center justify-center px-3 h-8 leading-tight text-primary-600 border border-primary-300 bg-primary-50 hover:bg-primary-100 hover:text-primary-700 dark:border-fv-neutral-700 dark:bg-fv-neutral-700 dark:text-white"
+              class="z-10 flex items-center justify-center px-3 h-8 leading-tight text-primary-600 border border-primary-300 bg-primary-50 dark:border-fv-neutral-700 dark:bg-fv-neutral-700 dark:text-white"
             >
               {{ items.page_no }}
             </div>
@@ -212,7 +199,7 @@ useServerHead({
           </template>
           <li v-if="items.page_no + 2 < items.page_max - 1">
             <div
-              class="flex items-center justify-center px-1.5 h-8 leading-tight text-fv-neutral-500 bg-white border border-fv-neutral-300 hover:bg-fv-neutral-100 hover:text-fv-neutral-700 dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-400 dark:hover:bg-fv-neutral-700 dark:hover:text-white"
+              class="flex items-center justify-center px-1.5 h-8 leading-tight text-fv-neutral-500 bg-white border border-fv-neutral-300 dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-400"
             >
               ...
             </div>
@@ -225,7 +212,7 @@ useServerHead({
               {{ items.page_max }}
             </router-link>
           </li>
-          <li v-if="items.page_no < items.page_max - 1">
+          <li v-if="items.page_no < items.page_max">
             <button
               type="button"
               class="flex items-center justify-center px-1.5 h-8 leading-tight text-fv-neutral-500 bg-white border border-fv-neutral-300 hover:bg-fv-neutral-100 hover:text-fv-neutral-700 dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-400 dark:hover:bg-fv-neutral-700 dark:hover:text-white"
@@ -243,8 +230,8 @@ useServerHead({
       >
         {{
           $t("global_paging", {
-            start: items.results_per_page * (items.page_no - 1),
-            end: items.results_per_page * items.page_no,
+            start: items.results_per_page * (items.page_no - 1) + 1,
+            end: Math.min(items.results_per_page * items.page_no, items.count),
             total: items.count >= 10000 ? $t("paging_a_lot_of") : items.count,
           })
         }}

package/package.json

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