@fy-/fws-vue 2.3.57 → 2.3.58
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 +15 -9
- package/package.json +1 -1
- package/style.css +13 -0
|
@@ -35,7 +35,15 @@ const pageWatcher = shallowRef<WatchStopHandle>()
|
|
|
35
35
|
// Jump to page functionality
|
|
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
|
+
})
|
|
39
47
|
|
|
40
48
|
// Memoize the hash string to avoid repeated computation
|
|
41
49
|
const hashString = computed(() => props.hash !== '' ? `#${props.hash}` : undefined)
|
|
@@ -108,8 +116,9 @@ function toggleJumpInput() {
|
|
|
108
116
|
else {
|
|
109
117
|
// Focus the input after Vue updates the DOM
|
|
110
118
|
nextTick(() => {
|
|
111
|
-
|
|
112
|
-
|
|
119
|
+
const input = document.querySelector('.pagination-jump-input') as HTMLInputElement
|
|
120
|
+
if (input) {
|
|
121
|
+
input.focus()
|
|
113
122
|
}
|
|
114
123
|
})
|
|
115
124
|
}
|
|
@@ -273,12 +282,11 @@ onMounted(() => {
|
|
|
273
282
|
</div>
|
|
274
283
|
<input
|
|
275
284
|
v-else
|
|
276
|
-
ref="jumpInputRef"
|
|
277
285
|
v-model="jumpPageValue"
|
|
278
286
|
type="number"
|
|
279
287
|
:min="1"
|
|
280
288
|
:max="items.page_max"
|
|
281
|
-
|
|
289
|
+
:class="`pagination-jump-input ${inputWidthClass}`"
|
|
282
290
|
placeholder=""
|
|
283
291
|
@keydown="handleJumpInputKeydown"
|
|
284
292
|
@blur="showJumpInput = false; jumpPageValue = ''"
|
|
@@ -328,12 +336,11 @@ onMounted(() => {
|
|
|
328
336
|
</div>
|
|
329
337
|
<input
|
|
330
338
|
v-else
|
|
331
|
-
ref="jumpInputRef"
|
|
332
339
|
v-model="jumpPageValue"
|
|
333
340
|
type="number"
|
|
334
341
|
:min="1"
|
|
335
342
|
:max="items.page_max"
|
|
336
|
-
|
|
343
|
+
:class="`pagination-jump-input ${inputWidthClass}`"
|
|
337
344
|
placeholder=""
|
|
338
345
|
@keydown="handleJumpInputKeydown"
|
|
339
346
|
@blur="showJumpInput = false; jumpPageValue = ''"
|
|
@@ -359,12 +366,11 @@ onMounted(() => {
|
|
|
359
366
|
</div>
|
|
360
367
|
<input
|
|
361
368
|
v-else
|
|
362
|
-
ref="jumpInputRef"
|
|
363
369
|
v-model="jumpPageValue"
|
|
364
370
|
type="number"
|
|
365
371
|
:min="1"
|
|
366
372
|
:max="items.page_max"
|
|
367
|
-
|
|
373
|
+
:class="`pagination-jump-input ${inputWidthClass}`"
|
|
368
374
|
placeholder=""
|
|
369
375
|
@keydown="handleJumpInputKeydown"
|
|
370
376
|
@blur="showJumpInput = false; jumpPageValue = ''"
|
package/package.json
CHANGED
package/style.css
CHANGED
|
@@ -60,4 +60,17 @@
|
|
|
60
60
|
&.small {
|
|
61
61
|
@apply px-2 py-1 text-xs;
|
|
62
62
|
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.pagination-jump-input {
|
|
66
|
+
@apply h-7 md:h-8 text-[10px] md:text-xs font-normal 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 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;
|
|
67
|
+
appearance: textfield !important;
|
|
68
|
+
-webkit-appearance: textfield !important;
|
|
69
|
+
-moz-appearance: textfield !important;
|
|
70
|
+
padding: 0 !important;
|
|
71
|
+
}
|
|
72
|
+
.pagination-jump-input::-webkit-outer-spin-button,
|
|
73
|
+
.pagination-jump-input::-webkit-inner-spin-button {
|
|
74
|
+
-webkit-appearance: none !important;
|
|
75
|
+
margin: 0 !important;
|
|
63
76
|
}
|