@fy-/fws-vue 2.4.2 → 2.4.4

package/components/ui/DefaultGallery.vue

@@ -18,13 +18,20 @@ import {
   useWindowSize,
 } from '@vueuse/core'
 import { computed, h, nextTick, onMounted, onUnmounted, reactive, ref, shallowRef, watch } from 'vue'
+import { useRoute } from 'vue-router'
 import { useEventBus } from '../../composables/event-bus'
+import { useServerRouter } from '../../stores/serverRouter'
 import { ClientOnly } from '../ssr/ClientOnly'
 import DefaultPaging from './DefaultPaging.vue'
 
 // Core state
 const isGalleryOpen = ref<boolean>(false)
 const eventBus = useEventBus()
+const route = useRoute()
+const history = useServerRouter()
+// Cross-page navigation: set while a prev/next page change is in flight
+const pendingPageFlip = ref<'next' | 'prev' | null>(null)
+let pendingPageFlipTimeout: number | null = null
 const sidePanel = ref<boolean>(true)
 const showControls = ref<boolean>(true)
 const isFullscreen = ref<boolean>(false)
@@ -322,6 +329,13 @@ function setModal(value: boolean) {
       clearTimeout(controlsTimeout)
       controlsTimeout = null
     }
+
+    // Abort any in-flight cross-page navigation
+    pendingPageFlip.value = null
+    if (pendingPageFlipTimeout) {
+      clearTimeout(pendingPageFlipTimeout)
+      pendingPageFlipTimeout = null
+    }
   }
   isGalleryOpen.value = value
   showControls.value = true
@@ -343,12 +357,60 @@ const openGalleryImage = useDebounceFn((index: number | undefined) => {
   })
 }, 50)
 
+// Cross-page navigation: push the new page into the route query, exactly like
+// DefaultPaging does. The consumer's paging watchers react to the route change
+// and refetch, replacing `images` — the watcher below then lands the index.
+function goToGalleryPage(page: number) {
+  const newQuery = { ...route.query }
+  newQuery.page = page.toString()
+  history.push({
+    path: history.currentRoute.path,
+    query: newQuery,
+  })
+}
+
+function startPageFlip(dir: 'next' | 'prev', page: number) {
+  pendingPageFlip.value = dir
+  // Safety: if the refetch never lands (network error), unlock navigation
+  if (pendingPageFlipTimeout) clearTimeout(pendingPageFlipTimeout)
+  pendingPageFlipTimeout = window.setTimeout(() => {
+    pendingPageFlip.value = null
+  }, 5000)
+  goToGalleryPage(page)
+}
+
+// When the images array is replaced while a page flip is pending, land on the
+// first image (next) or last image (prev) of the new page. Default pre-flush
+// watcher: runs before render, so the old index never flashes.
+watch(
+  () => props.images,
+  (newImages) => {
+    if (!pendingPageFlip.value) return
+    if (newImages && newImages.length > 0) {
+      modelValue.value = pendingPageFlip.value === 'next' ? 0 : newImages.length - 1
+    }
+    pendingPageFlip.value = null
+    if (pendingPageFlipTimeout) {
+      clearTimeout(pendingPageFlipTimeout)
+      pendingPageFlipTimeout = null
+    }
+    nextTick(() => {
+      updateImageSizes()
+    })
+  },
+)
+
 // Navigation functions
 function goNextImage() {
   direction.value = 'next'
+  if (pendingPageFlip.value) return // page change in flight — ignore extra input
   if (modelValue.value < props.images.length - 1) {
     modelValue.value++
   }
+  else if (props.paging && props.paging.page_no < props.paging.page_max) {
+    // Last image of the page → go to the first image of the next page
+    startPageFlip('next', props.paging.page_no + 1)
+  }
   else {
     modelValue.value = 0
   }
@@ -361,9 +423,14 @@ function goNextImage() {
 
 function goPrevImage() {
   direction.value = 'prev'
+  if (pendingPageFlip.value) return // page change in flight — ignore extra input
   if (modelValue.value > 0) {
     modelValue.value--
   }
+  else if (props.paging && props.paging.page_no > 1) {
+    // First image of the page → go to the last image of the previous page
+    startPageFlip('prev', props.paging.page_no - 1)
+  }
   else {
     modelValue.value = props.images.length - 1 > 0 ? props.images.length - 1 : 0
   }
@@ -599,6 +666,10 @@ onUnmounted(() => {
     clearTimeout(fullscreenResizeTimeout)
   }
 
+  if (pendingPageFlipTimeout) {
+    clearTimeout(pendingPageFlipTimeout)
+  }
+
   // Ensure we exit fullscreen mode on unmount
   if (isFullscreen.value) {
     exitFullscreen().catch(() => {})
@@ -698,7 +769,7 @@ onUnmounted(() => {
               leave-to-class="opacity-0"
             >
               <div
-                v-if="showControls && images.length > 1"
+                v-if="showControls && (images.length > 1 || (paging && paging.page_max > 1))"
                 class="absolute left-0 z-40 h-full flex items-center px-2 md:px-4"
               >
                 <button
@@ -772,7 +843,7 @@ onUnmounted(() => {
               leave-to-class="opacity-0"
             >
               <div
-                v-if="showControls && images.length > 1"
+                v-if="showControls && (images.length > 1 || (paging && paging.page_max > 1))"
                 class="absolute right-0 z-40 h-full flex items-center px-2 md:px-4"
                 :class="{ 'lg:mr-64': sidePanel }"
               >

package/index.ts

@@ -1,8 +1,10 @@
+import type { TFunction } from 'i18next'
 import type { Emitter } from 'mitt'
 import type { App, Plugin } from 'vue'
 import type { Events } from './composables/event-bus'
 import i18next from 'i18next'
 import mitt from 'mitt'
+import { shallowRef } from 'vue'
 import CmsArticleBoxed from './components/fws/CmsArticleBoxed.vue'
 import CmsArticleSingle from './components/fws/CmsArticleSingle.vue'
 import DataTable from './components/fws/DataTable.vue'
@@ -70,15 +72,40 @@ function createFWS(): Plugin {
   // @ts-expect-error: Emitter<Events> is not assignable to Emitter<Events>
   const eventBus: Emitter<Events> = mitt<Events>()
 
+  // i18next's `t` is NOT reactive. If a component renders a key during a window
+  // where the resource isn't loaded yet (cold deep-link, client-nav before a late
+  // locale fetch, hydration race) it paints the RAW token and Vue never re-renders
+  // — nothing reactive changed, so the miss sticks. Wrap `t` so it depends on a
+  // tick bumped by i18next's own events: any raw key then self-heals the instant
+  // resources land, and `changeLanguage` live-updates every string. Client-only:
+  // on the server strings are already resolved by the `await i18nextPromise` before
+  // render, and `install()` runs per-request there — adding listeners to the global
+  // i18next singleton each request would leak. So SSR keeps the plain `t`.
+  let translate: TFunction = i18next.t
+  if (typeof window !== 'undefined') {
+    const tick = shallowRef(0)
+    const bump = (): void => {
+      tick.value++
+    }
+    i18next.on('loaded', bump)
+    i18next.on('added', bump)
+    i18next.on('languageChanged', bump)
+    const rawT = i18next.t as unknown as (...a: unknown[]) => unknown
+    translate = ((...args: Parameters<typeof i18next.t>) => {
+      void tick.value
+      return rawT(...args)
+    }) as unknown as TFunction
+  }
+
   return {
     install(app: App) {
       if (app.config.globalProperties) {
         app.config.globalProperties.$eventBus = eventBus
         app.provide('fwsVueEventBus', eventBus)
 
-        // i18next
-        app.config.globalProperties.$t = i18next.t
-        app.provide('fwsVueTranslate', i18next.t)
+        // i18next (reactive wrapper — see note above)
+        app.config.globalProperties.$t = translate
+        app.provide('fwsVueTranslate', translate)
 
         // Templating
         app.config.globalProperties.$cropText = cropText

package/package.json

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