@fy-/fws-vue 2.3.56 → 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.
Files changed (2) hide show
  1. package/components/ui/DefaultPaging.vue +9 -15
  2. package/package.json +1 -1
package/components/ui/DefaultPaging.vue CHANGED
@@ -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)
@@ -116,9 +108,8 @@ function toggleJumpInput() {
116
108
  else {
117
109
  // Focus the input after Vue updates the DOM
118
110
  nextTick(() => {
119
- const input = document.querySelector('input[type="number"]') as HTMLInputElement
120
- if (input) {
121
- input.focus()
111
+ if (jumpInputRef.value) {
112
+ jumpInputRef.value.focus()
122
113
  }
123
114
  })
124
115
  }
@@ -282,11 +273,12 @@ onMounted(() => {
282
273
  </div>
283
274
  <input
284
275
  v-else
276
+ ref="jumpInputRef"
285
277
  v-model="jumpPageValue"
286
278
  type="number"
287
279
  :min="1"
288
280
  :max="items.page_max"
289
- :class="`${inputWidthClass} !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 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none`"
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;"
290
282
  placeholder=""
291
283
  @keydown="handleJumpInputKeydown"
292
284
  @blur="showJumpInput = false; jumpPageValue = ''"
@@ -336,11 +328,12 @@ onMounted(() => {
336
328
  </div>
337
329
  <input
338
330
  v-else
331
+ ref="jumpInputRef"
339
332
  v-model="jumpPageValue"
340
333
  type="number"
341
334
  :min="1"
342
335
  :max="items.page_max"
343
- :class="`${inputWidthClass} !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 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none`"
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;"
344
337
  placeholder=""
345
338
  @keydown="handleJumpInputKeydown"
346
339
  @blur="showJumpInput = false; jumpPageValue = ''"
@@ -366,11 +359,12 @@ onMounted(() => {
366
359
  </div>
367
360
  <input
368
361
  v-else
362
+ ref="jumpInputRef"
369
363
  v-model="jumpPageValue"
370
364
  type="number"
371
365
  :min="1"
372
366
  :max="items.page_max"
373
- :class="`${inputWidthClass} !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 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none`"
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;"
374
368
  placeholder=""
375
369
  @keydown="handleJumpInputKeydown"
376
370
  @blur="showJumpInput = false; jumpPageValue = ''"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fy-/fws-vue",
3
- "version": "2.3.56",
3
+ "version": "2.3.57",
4
4
  "author": "Florian 'Fy' Gasquez <m@fy.to>",
5
5
  "license": "MIT",
6
6
  "homepage": "https://github.com/fy-to/FWJS#readme",