@fy-/fws-vue 2.3.52 → 2.3.54
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -36,6 +36,15 @@ const pageWatcher = shallowRef<WatchStopHandle>()
|
|
|
36
36
|
const jumpPageValue = ref('')
|
|
37
37
|
const showJumpInput = ref(false)
|
|
38
38
|
|
|
39
|
+
// Compute input width based on max page digits
|
|
40
|
+
const inputWidthClass = computed(() => {
|
|
41
|
+
const digits = props.items.page_max.toString().length
|
|
42
|
+
if (digits >= 3) {
|
|
43
|
+
return 'w-12 md:w-14'
|
|
44
|
+
}
|
|
45
|
+
return 'w-8 md:w-10'
|
|
46
|
+
})
|
|
47
|
+
|
|
39
48
|
// Memoize the hash string to avoid repeated computation
|
|
40
49
|
const hashString = computed(() => props.hash !== '' ? `#${props.hash}` : undefined)
|
|
41
50
|
|
|
@@ -253,12 +262,26 @@ onMounted(() => {
|
|
|
253
262
|
1
|
|
254
263
|
</router-link>
|
|
255
264
|
</li>
|
|
256
|
-
<li v-if="items.page_no - 1 > 2"
|
|
265
|
+
<li v-if="items.page_no - 1 > 2">
|
|
257
266
|
<div
|
|
258
|
-
|
|
267
|
+
v-if="!showJumpInput"
|
|
268
|
+
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"
|
|
269
|
+
title="Jump to page"
|
|
270
|
+
@click="toggleJumpInput"
|
|
259
271
|
>
|
|
260
272
|
<span class="text-[10px] md:text-xs font-medium">•••</span>
|
|
261
273
|
</div>
|
|
274
|
+
<input
|
|
275
|
+
v-else
|
|
276
|
+
v-model="jumpPageValue"
|
|
277
|
+
type="number"
|
|
278
|
+
:min="1"
|
|
279
|
+
:max="items.page_max"
|
|
280
|
+
:class="`${inputWidthClass} 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 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none`"
|
|
281
|
+
:placeholder="items.page_max.toString().length > 2 ? '···' : '••'"
|
|
282
|
+
@keydown="handleJumpInputKeydown"
|
|
283
|
+
@blur="showJumpInput = false; jumpPageValue = ''"
|
|
284
|
+
>
|
|
262
285
|
</li>
|
|
263
286
|
<li
|
|
264
287
|
v-if="items.page_no - 1 >= 1"
|
|
@@ -308,7 +331,7 @@ onMounted(() => {
|
|
|
308
331
|
type="number"
|
|
309
332
|
:min="1"
|
|
310
333
|
:max="items.page_max"
|
|
311
|
-
class="
|
|
334
|
+
:class="`${inputWidthClass} 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 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none`"
|
|
312
335
|
:placeholder="items.page_max.toString().length > 2 ? '···' : '••'"
|
|
313
336
|
@keydown="handleJumpInputKeydown"
|
|
314
337
|
@blur="showJumpInput = false; jumpPageValue = ''"
|
|
@@ -323,6 +346,27 @@ onMounted(() => {
|
|
|
323
346
|
{{ items.page_max }}
|
|
324
347
|
</router-link>
|
|
325
348
|
</li>
|
|
349
|
+
<li v-if="items.page_max > 5 && (items.page_no - 1 <= 2 && items.page_no + 1 >= items.page_max - 1)">
|
|
350
|
+
<div
|
|
351
|
+
v-if="!showJumpInput"
|
|
352
|
+
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"
|
|
353
|
+
title="Jump to page"
|
|
354
|
+
@click="toggleJumpInput"
|
|
355
|
+
>
|
|
356
|
+
<span class="text-[10px] md:text-xs font-bold">⋯</span>
|
|
357
|
+
</div>
|
|
358
|
+
<input
|
|
359
|
+
v-else
|
|
360
|
+
v-model="jumpPageValue"
|
|
361
|
+
type="number"
|
|
362
|
+
:min="1"
|
|
363
|
+
:max="items.page_max"
|
|
364
|
+
:class="`${inputWidthClass} 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 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none`"
|
|
365
|
+
:placeholder="items.page_max.toString().length > 2 ? '···' : '••'"
|
|
366
|
+
@keydown="handleJumpInputKeydown"
|
|
367
|
+
@blur="showJumpInput = false; jumpPageValue = ''"
|
|
368
|
+
>
|
|
369
|
+
</li>
|
|
326
370
|
<li v-if="items.page_no < items.page_max">
|
|
327
371
|
<button
|
|
328
372
|
type="button"
|