@fy-/fws-vue 2.2.83 → 2.2.85

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 +47 -42
  2. package/package.json +1 -1
package/components/ui/DefaultPaging.vue CHANGED
@@ -153,81 +153,84 @@ onMounted(() => {
153
153
  <template>
154
154
  <div
155
155
  v-if="items && items.page_max > 1 && items.page_no"
156
+ :id="`pagination-${id}`"
156
157
  class="flex items-center justify-center"
157
158
  >
158
159
  <div class="paging-container">
159
- <nav aria-label="Pagination">
160
- <ul class="flex items-center -space-x-px h-8 text-sm">
160
+ <nav aria-label="Pagination" :aria-describedby="showLegend ? `pagination-info-${id}` : undefined">
161
+ <ul class="flex items-center gap-1 h-8 text-sm" role="list">
161
162
  <li v-if="items.page_no >= 2">
162
163
  <button
163
164
  type="button"
164
- class="flex items-center justify-center px-1 h-8 leading-tight text-fv-neutral-500 bg-white border border-fv-neutral-300 hover:bg-fv-neutral-100 hover:text-fv-neutral-700 dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-400 dark:hover:bg-fv-neutral-700 dark:hover:text-white"
165
+ class="flex items-center justify-center w-8 h-8 text-fv-neutral-700 bg-white/80 rounded-md shadow-sm hover:bg-fv-neutral-100 hover:text-primary-600 focus:ring-2 focus:ring-primary-400/40 focus:outline-none dark:bg-fv-neutral-800 dark:text-fv-neutral-300 dark:hover:bg-fv-neutral-700/70 dark:hover:text-white dark:focus:ring-primary-500/40 transition-all"
166
+ aria-label="Previous page"
165
167
  @click="prev()"
166
168
  >
167
169
  <span class="sr-only">{{ $t("previous_paging") }}</span>
168
- <ChevronLeftIcon class="w-4 h-4" />
170
+ <ChevronLeftIcon class="w-4 h-4" aria-hidden="true" />
169
171
  </button>
170
172
  </li>
171
- <li v-if="items.page_no - 2 > 1">
173
+ <li v-if="items.page_no - 1 > 1">
172
174
  <router-link
173
- class="flex items-center justify-center px-1.5 h-8 leading-tight text-fv-neutral-500 bg-white border border-fv-neutral-300 hover:bg-fv-neutral-100 hover:text-fv-neutral-700 dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-400 dark:hover:bg-fv-neutral-700 dark:hover:text-white"
175
+ class="flex items-center justify-center w-8 h-8 text-fv-neutral-700 bg-white/80 rounded-md shadow-sm hover:bg-fv-neutral-100 hover:text-primary-600 focus:ring-2 focus:ring-primary-400/40 focus:outline-none dark:bg-fv-neutral-800 dark:text-fv-neutral-300 dark:hover:bg-fv-neutral-700/70 dark:hover:text-white dark:focus:ring-primary-500/40 transition-all"
174
176
  :to="page(1)"
177
+ aria-label="Go to page 1"
175
178
  >
176
179
  1
177
180
  </router-link>
178
181
  </li>
179
- <li v-if="items.page_no - 2 > 2">
182
+ <li v-if="items.page_no - 1 > 2" aria-hidden="true">
180
183
  <div
181
- class="flex items-center justify-center px-1 h-8 leading-tight text-fv-neutral-500 bg-white border border-fv-neutral-300 dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-400"
184
+ class="flex items-center justify-center w-6 h-8 text-fv-neutral-500 dark:text-fv-neutral-400"
182
185
  >
183
- ...
186
+ <span class="text-xs font-medium">•••</span>
184
187
  </div>
185
188
  </li>
186
- <template v-for="i in 2">
187
- <li
188
- v-if="items.page_no - (3 - i) >= 1"
189
- :key="`page-${items.page_no - (3 - i)}`"
189
+ <li
190
+ v-if="items.page_no - 1 >= 1"
191
+ :key="`page-${items.page_no - 1}`"
192
+ >
193
+ <router-link
194
+ class="flex items-center justify-center w-8 h-8 text-fv-neutral-700 bg-white/80 rounded-md shadow-sm hover:bg-fv-neutral-100 hover:text-primary-600 focus:ring-2 focus:ring-primary-400/40 focus:outline-none dark:bg-fv-neutral-800 dark:text-fv-neutral-300 dark:hover:bg-fv-neutral-700/70 dark:hover:text-white dark:focus:ring-primary-500/40 transition-all"
195
+ :to="page(items.page_no - 1)"
196
+ :aria-label="`Go to page ${items.page_no - 1}`"
190
197
  >
191
- <router-link
192
- class="flex items-center justify-center px-1.5 h-8 leading-tight text-fv-neutral-500 bg-white border border-fv-neutral-300 hover:bg-fv-neutral-100 hover:text-fv-neutral-700 dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-400 dark:hover:bg-fv-neutral-700 dark:hover:text-white"
193
- :to="page(items.page_no - (3 - i))"
194
- >
195
- {{ items.page_no - (3 - i) }}
196
- </router-link>
197
- </li>
198
- </template>
198
+ {{ items.page_no - 1 }}
199
+ </router-link>
200
+ </li>
199
201
  <li>
200
202
  <div
201
203
  aria-current="page"
202
- class="z-10 flex items-center justify-center px-1.5 h-8 leading-tight text-primary-600 border border-primary-300 bg-primary-50 dark:border-fv-neutral-700 dark:bg-fv-neutral-700 dark:text-white"
204
+ class="flex items-center justify-center w-8 h-8 text-white rounded-md shadow-sm bg-primary-600 font-medium dark:bg-primary-500 transition-all"
205
+ :aria-label="`Current page, page ${items.page_no}`"
203
206
  >
204
207
  {{ items.page_no }}
205
208
  </div>
206
209
  </li>
207
- <template v-for="i in 2">
208
- <li
209
- v-if="items.page_no + i <= items.page_max"
210
- :key="`page-x-${items.page_no + i}`"
210
+ <li
211
+ v-if="items.page_no + 1 <= items.page_max"
212
+ :key="`page-x-${items.page_no + 1}`"
213
+ >
214
+ <router-link
215
+ class="flex items-center justify-center w-8 h-8 text-fv-neutral-700 bg-white/80 rounded-md shadow-sm hover:bg-fv-neutral-100 hover:text-primary-600 focus:ring-2 focus:ring-primary-400/40 focus:outline-none dark:bg-fv-neutral-800 dark:text-fv-neutral-300 dark:hover:bg-fv-neutral-700/70 dark:hover:text-white dark:focus:ring-primary-500/40 transition-all"
216
+ :to="page(items.page_no + 1)"
217
+ :aria-label="`Go to page ${items.page_no + 1}`"
211
218
  >
212
- <router-link
213
- class="flex items-center justify-center px-1.5 h-8 leading-tight text-fv-neutral-500 bg-white border border-fv-neutral-300 hover:bg-fv-neutral-100 hover:text-fv-neutral-700 dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-400 dark:hover:bg-fv-neutral-700 dark:hover:text-white"
214
- :to="page(items.page_no + i)"
215
- >
216
- {{ items.page_no + i }}
217
- </router-link>
218
- </li>
219
- </template>
220
- <li v-if="items.page_no + 2 < items.page_max - 1">
219
+ {{ items.page_no + 1 }}
220
+ </router-link>
221
+ </li>
222
+ <li v-if="items.page_no + 1 < items.page_max - 1" aria-hidden="true">
221
223
  <div
222
- class="flex items-center justify-center px-1 h-8 leading-tight text-fv-neutral-500 bg-white border border-fv-neutral-300 dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-400"
224
+ class="flex items-center justify-center w-6 h-8 text-fv-neutral-500 dark:text-fv-neutral-400"
223
225
  >
224
- ...
226
+ <span class="text-xs font-medium">•••</span>
225
227
  </div>
226
228
  </li>
227
- <li v-if="items.page_no + 2 < items.page_max">
229
+ <li v-if="items.page_no + 1 < items.page_max">
228
230
  <router-link
229
- class="flex items-center justify-center px-1.5 h-8 leading-tight text-fv-neutral-500 bg-white border border-fv-neutral-300 hover:bg-fv-neutral-100 hover:text-fv-neutral-700 dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-400 dark:hover:bg-fv-neutral-700 dark:hover:text-white"
231
+ class="flex items-center justify-center w-8 h-8 text-fv-neutral-700 bg-white/80 rounded-md shadow-sm hover:bg-fv-neutral-100 hover:text-primary-600 focus:ring-2 focus:ring-primary-400/40 focus:outline-none dark:bg-fv-neutral-800 dark:text-fv-neutral-300 dark:hover:bg-fv-neutral-700/70 dark:hover:text-white dark:focus:ring-primary-500/40 transition-all"
230
232
  :to="page(items.page_max)"
233
+ :aria-label="`Go to page ${items.page_max}`"
231
234
  >
232
235
  {{ items.page_max }}
233
236
  </router-link>
@@ -235,18 +238,20 @@ onMounted(() => {
235
238
  <li v-if="items.page_no < items.page_max">
236
239
  <button
237
240
  type="button"
238
- class="flex items-center justify-center px-1 h-8 leading-tight text-fv-neutral-500 bg-white border border-fv-neutral-300 hover:bg-fv-neutral-100 hover:text-fv-neutral-700 dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-400 dark:hover:bg-fv-neutral-700 dark:hover:text-white"
241
+ class="flex items-center justify-center w-8 h-8 text-fv-neutral-700 bg-white/80 rounded-md shadow-sm hover:bg-fv-neutral-100 hover:text-primary-600 focus:ring-2 focus:ring-primary-400/40 focus:outline-none dark:bg-fv-neutral-800 dark:text-fv-neutral-300 dark:hover:bg-fv-neutral-700/70 dark:hover:text-white dark:focus:ring-primary-500/40 transition-all"
242
+ aria-label="Next page"
239
243
  @click="next()"
240
244
  >
241
245
  <span class="sr-only">{{ $t("next_paging") }}</span>
242
- <ChevronRightIcon class="w-4 h-4" />
246
+ <ChevronRightIcon class="w-4 h-4" aria-hidden="true" />
243
247
  </button>
244
248
  </li>
245
249
  </ul>
246
250
  </nav>
247
251
  <p
248
252
  v-if="showLegend"
249
- class="text-xs text-fv-neutral-700 dark:text-fv-neutral-400 pt-0.5"
253
+ :id="`pagination-info-${id}`"
254
+ class="text-xs text-fv-neutral-500 dark:text-fv-neutral-400 pt-1.5 text-center"
250
255
  >
251
256
  {{
252
257
  $t("global_paging", {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fy-/fws-vue",
3
- "version": "2.2.83",
3
+ "version": "2.2.85",
4
4
  "author": "Florian 'Fy' Gasquez <m@fy.to>",
5
5
  "license": "MIT",
6
6
  "homepage": "https://github.com/fy-to/FWJS#readme",