@fy-/fws-vue 2.3.51 → 2.3.53

package/components/ui/DefaultPaging.vue

@@ -6,7 +6,7 @@ import { getURL, hasFW } from '@fy-/fws-js'
 import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/24/solid'
 import { useServerHead } from '@unhead/vue'
 import { useDebounceFn } from '@vueuse/core'
-import { computed, onMounted, shallowRef, watch } from 'vue'
+import { computed, onMounted, ref, shallowRef, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { useEventBus } from '../../composables/event-bus'
 import { useServerRouter } from '../../stores/serverRouter'
@@ -32,6 +32,10 @@ const history = useServerRouter()
 const isMounted = shallowRef(false)
 const pageWatcher = shallowRef<WatchStopHandle>()
 
+// Jump to page functionality
+const jumpPageValue = ref('')
+const showJumpInput = ref(false)
+
 // Memoize the hash string to avoid repeated computation
 const hashString = computed(() => props.hash !== '' ? `#${props.hash}` : undefined)
 
@@ -73,6 +77,45 @@ const prev = useDebounceFn(() => {
   })
 }, 300)
 
+// Jump to page functionality
+const jumpToPage = useDebounceFn(() => {
+  const targetPage = Number.parseInt(jumpPageValue.value)
+
+  if (Number.isNaN(targetPage) || !isNewPage(targetPage)) {
+    jumpPageValue.value = ''
+    return
+  }
+
+  const newQuery = { ...route.query }
+  newQuery.page = targetPage.toString()
+
+  history.push({
+    path: history.currentRoute.path,
+    query: newQuery,
+    hash: hashString.value,
+  })
+
+  jumpPageValue.value = ''
+  showJumpInput.value = false
+}, 300)
+
+function toggleJumpInput() {
+  showJumpInput.value = !showJumpInput.value
+  if (!showJumpInput.value) {
+    jumpPageValue.value = ''
+  }
+}
+
+function handleJumpInputKeydown(event: KeyboardEvent) {
+  if (event.key === 'Enter') {
+    jumpToPage()
+  }
+  else if (event.key === 'Escape') {
+    showJumpInput.value = false
+    jumpPageValue.value = ''
+  }
+}
+
 // Extract route generation to a reusable function to reduce duplicated code
 function page(page: number): RouteLocationRaw {
   if (!isNewPage(page)) {
@@ -210,12 +253,26 @@ onMounted(() => {
               1
             </router-link>
           </li>
-          <li v-if="items.page_no - 1 > 2" aria-hidden="true">
+          <li v-if="items.page_no - 1 > 2">
             <div
-              class="flex items-center justify-center w-5 md:w-6 h-7 md:h-8 text-fv-neutral-500 dark:text-fv-neutral-400"
+              v-if="!showJumpInput"
+              class="flex items-center justify-center w-5 md:w-6 h-7 md:h-8 text-fv-neutral-500 hover:text-primary-600 dark:text-fv-neutral-400 dark:hover:text-white cursor-pointer transition-all"
+              title="Jump to page"
+              @click="toggleJumpInput"
             >
               <span class="text-[10px] md:text-xs font-medium">•••</span>
             </div>
+            <input
+              v-else
+              v-model="jumpPageValue"
+              type="number"
+              :min="1"
+              :max="items.page_max"
+              class="w-8 md:w-10 h-7 md:h-8 text-xs text-center text-fv-neutral-700 bg-white/80 border border-fv-neutral-300 rounded-md shadow-sm focus:ring-2 focus:ring-primary-400/40 focus:border-primary-400 focus:outline-none dark:bg-fv-neutral-800 dark:text-fv-neutral-300 dark:border-fv-neutral-600 dark:focus:ring-primary-500/40 dark:focus:border-primary-500 transition-all"
+              :placeholder="items.page_max.toString().length > 2 ? '···' : '••'"
+              @keydown="handleJumpInputKeydown"
+              @blur="showJumpInput = false; jumpPageValue = ''"
+            >
           </li>
           <li
             v-if="items.page_no - 1 >= 1"
@@ -250,12 +307,26 @@ onMounted(() => {
               {{ items.page_no + 1 }}
             </router-link>
           </li>
-          <li v-if="items.page_no + 1 < items.page_max - 1" aria-hidden="true">
+          <li v-if="items.page_no + 1 < items.page_max - 1">
             <div
-              class="flex items-center justify-center w-5 md:w-6 h-7 md:h-8 text-fv-neutral-500 dark:text-fv-neutral-400"
+              v-if="!showJumpInput"
+              class="flex items-center justify-center w-5 md:w-6 h-7 md:h-8 text-fv-neutral-500 hover:text-primary-600 dark:text-fv-neutral-400 dark:hover:text-white cursor-pointer transition-all"
+              title="Jump to page"
+              @click="toggleJumpInput"
             >
               <span class="text-[10px] md:text-xs font-medium">•••</span>
             </div>
+            <input
+              v-else
+              v-model="jumpPageValue"
+              type="number"
+              :min="1"
+              :max="items.page_max"
+              class="w-8 md:w-10 h-7 md:h-8 text-xs text-center text-fv-neutral-700 bg-white/80 border border-fv-neutral-300 rounded-md shadow-sm focus:ring-2 focus:ring-primary-400/40 focus:border-primary-400 focus:outline-none dark:bg-fv-neutral-800 dark:text-fv-neutral-300 dark:border-fv-neutral-600 dark:focus:ring-primary-500/40 dark:focus:border-primary-500 transition-all"
+              :placeholder="items.page_max.toString().length > 2 ? '···' : '••'"
+              @keydown="handleJumpInputKeydown"
+              @blur="showJumpInput = false; jumpPageValue = ''"
+            >
           </li>
           <li v-if="items.page_no + 1 < items.page_max">
             <router-link
@@ -266,6 +337,27 @@ onMounted(() => {
               {{ items.page_max }}
             </router-link>
           </li>
+          <li v-if="items.page_max > 5 && (items.page_no - 1 <= 2 && items.page_no + 1 >= items.page_max - 1)">
+            <div
+              v-if="!showJumpInput"
+              class="flex items-center justify-center w-6 md:w-8 h-7 md:h-8 text-fv-neutral-500 hover:text-primary-600 dark:text-fv-neutral-400 dark:hover:text-white cursor-pointer transition-all"
+              title="Jump to page"
+              @click="toggleJumpInput"
+            >
+              <span class="text-[10px] md:text-xs font-bold">⋯</span>
+            </div>
+            <input
+              v-else
+              v-model="jumpPageValue"
+              type="number"
+              :min="1"
+              :max="items.page_max"
+              class="w-8 md:w-10 h-7 md:h-8 text-xs text-center text-fv-neutral-700 bg-white/80 border border-fv-neutral-300 rounded-md shadow-sm focus:ring-2 focus:ring-primary-400/40 focus:border-primary-400 focus:outline-none dark:bg-fv-neutral-800 dark:text-fv-neutral-300 dark:border-fv-neutral-600 dark:focus:ring-primary-500/40 dark:focus:border-primary-500 transition-all"
+              :placeholder="items.page_max.toString().length > 2 ? '···' : '••'"
+              @keydown="handleJumpInputKeydown"
+              @blur="showJumpInput = false; jumpPageValue = ''"
+            >
+          </li>
           <li v-if="items.page_no < items.page_max">
             <button
               type="button"

package/package.json

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