@fy-/fws-vue 2.3.55 → 2.3.57
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.
- package/components/ui/DefaultPaging.vue +16 -13
- package/package.json +1 -1
|
@@ -6,7 +6,7 @@ import { getURL, hasFW } from '@fy-/fws-js'
|
|
|
6
6
|
import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/24/solid'
|
|
7
7
|
import { useServerHead } from '@unhead/vue'
|
|
8
8
|
import { useDebounceFn } from '@vueuse/core'
|
|
9
|
-
import { computed, onMounted, ref, shallowRef, watch } from 'vue'
|
|
9
|
+
import { computed, nextTick, onMounted, ref, shallowRef, watch } from 'vue'
|
|
10
10
|
import { useRoute } from 'vue-router'
|
|
11
11
|
import { useEventBus } from '../../composables/event-bus'
|
|
12
12
|
import { useServerRouter } from '../../stores/serverRouter'
|
|
@@ -35,15 +35,7 @@ const pageWatcher = shallowRef<WatchStopHandle>()
|
|
|
35
35
|
// Jump to page functionality
|
|
36
36
|
const jumpPageValue = ref('')
|
|
37
37
|
const showJumpInput = ref(false)
|
|
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
|
-
})
|
|
38
|
+
const jumpInputRef = ref<HTMLInputElement>()
|
|
47
39
|
|
|
48
40
|
// Memoize the hash string to avoid repeated computation
|
|
49
41
|
const hashString = computed(() => props.hash !== '' ? `#${props.hash}` : undefined)
|
|
@@ -113,6 +105,14 @@ function toggleJumpInput() {
|
|
|
113
105
|
if (!showJumpInput.value) {
|
|
114
106
|
jumpPageValue.value = ''
|
|
115
107
|
}
|
|
108
|
+
else {
|
|
109
|
+
// Focus the input after Vue updates the DOM
|
|
110
|
+
nextTick(() => {
|
|
111
|
+
if (jumpInputRef.value) {
|
|
112
|
+
jumpInputRef.value.focus()
|
|
113
|
+
}
|
|
114
|
+
})
|
|
115
|
+
}
|
|
116
116
|
}
|
|
117
117
|
|
|
118
118
|
function handleJumpInputKeydown(event: KeyboardEvent) {
|
|
@@ -273,11 +273,12 @@ onMounted(() => {
|
|
|
273
273
|
</div>
|
|
274
274
|
<input
|
|
275
275
|
v-else
|
|
276
|
+
ref="jumpInputRef"
|
|
276
277
|
v-model="jumpPageValue"
|
|
277
278
|
type="number"
|
|
278
279
|
:min="1"
|
|
279
280
|
:max="items.page_max"
|
|
280
|
-
|
|
281
|
+
style="width: 32px !important; height: 28px !important; font-size: 10px !important; font-weight: normal !important; text-align: center !important; padding: 0 !important; margin: 0 !important; line-height: 1 !important; border: 1px solid #d1d5db !important; border-radius: 6px !important; background: rgba(255,255,255,0.8) !important; color: #374151 !important; outline: none !important; -webkit-appearance: textfield !important; -moz-appearance: textfield !important;"
|
|
281
282
|
placeholder=""
|
|
282
283
|
@keydown="handleJumpInputKeydown"
|
|
283
284
|
@blur="showJumpInput = false; jumpPageValue = ''"
|
|
@@ -327,11 +328,12 @@ onMounted(() => {
|
|
|
327
328
|
</div>
|
|
328
329
|
<input
|
|
329
330
|
v-else
|
|
331
|
+
ref="jumpInputRef"
|
|
330
332
|
v-model="jumpPageValue"
|
|
331
333
|
type="number"
|
|
332
334
|
:min="1"
|
|
333
335
|
:max="items.page_max"
|
|
334
|
-
|
|
336
|
+
style="width: 32px !important; height: 28px !important; font-size: 10px !important; font-weight: normal !important; text-align: center !important; padding: 0 !important; margin: 0 !important; line-height: 1 !important; border: 1px solid #d1d5db !important; border-radius: 6px !important; background: rgba(255,255,255,0.8) !important; color: #374151 !important; outline: none !important; -webkit-appearance: textfield !important; -moz-appearance: textfield !important;"
|
|
335
337
|
placeholder=""
|
|
336
338
|
@keydown="handleJumpInputKeydown"
|
|
337
339
|
@blur="showJumpInput = false; jumpPageValue = ''"
|
|
@@ -357,11 +359,12 @@ onMounted(() => {
|
|
|
357
359
|
</div>
|
|
358
360
|
<input
|
|
359
361
|
v-else
|
|
362
|
+
ref="jumpInputRef"
|
|
360
363
|
v-model="jumpPageValue"
|
|
361
364
|
type="number"
|
|
362
365
|
:min="1"
|
|
363
366
|
:max="items.page_max"
|
|
364
|
-
|
|
367
|
+
style="width: 32px !important; height: 28px !important; font-size: 10px !important; font-weight: normal !important; text-align: center !important; padding: 0 !important; margin: 0 !important; line-height: 1 !important; border: 1px solid #d1d5db !important; border-radius: 6px !important; background: rgba(255,255,255,0.8) !important; color: #374151 !important; outline: none !important; -webkit-appearance: textfield !important; -moz-appearance: textfield !important;"
|
|
365
368
|
placeholder=""
|
|
366
369
|
@keydown="handleJumpInputKeydown"
|
|
367
370
|
@blur="showJumpInput = false; jumpPageValue = ''"
|