@fy-/fws-vue 2.2.77 → 2.2.79
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 +27 -18
- package/package.json +1 -1
|
@@ -153,34 +153,37 @@ 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 -space-x-px 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.5 h-8 leading-tight text-fv-neutral-
|
|
165
|
+
class="flex items-center justify-center px-1.5 h-8 leading-tight text-fv-neutral-600 bg-white border border-fv-neutral-300 hover:bg-fv-neutral-100 hover:text-fv-neutral-800 focus:ring-1 focus:ring-primary-400 focus:outline-none focus:z-10 dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-300 dark:hover:bg-fv-neutral-700 dark:hover:text-white dark:focus:ring-primary-500 transition-colors rounded-l-md"
|
|
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-
|
|
170
|
+
<ChevronLeftIcon class="w-3.5 h-3.5" aria-hidden="true" />
|
|
169
171
|
</button>
|
|
170
172
|
</li>
|
|
171
173
|
<li v-if="items.page_no - 2 > 1">
|
|
172
174
|
<router-link
|
|
173
|
-
class="flex items-center justify-center
|
|
175
|
+
class="flex items-center justify-center w-7 h-8 leading-tight text-fv-neutral-600 bg-white border border-fv-neutral-300 hover:bg-fv-neutral-100 hover:text-fv-neutral-800 focus:ring-1 focus:ring-primary-400 focus:outline-none focus:z-10 dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-300 dark:hover:bg-fv-neutral-700 dark:hover:text-white dark:focus:ring-primary-500 transition-colors"
|
|
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 - 2 > 2" aria-hidden="true">
|
|
180
183
|
<div
|
|
181
|
-
class="flex items-center justify-center
|
|
184
|
+
class="flex items-center justify-center w-6 h-8 leading-tight text-fv-neutral-600 bg-white border border-fv-neutral-300 dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-300"
|
|
182
185
|
>
|
|
183
|
-
|
|
186
|
+
<span class="text-xs">...</span>
|
|
184
187
|
</div>
|
|
185
188
|
</li>
|
|
186
189
|
<template v-for="i in 2">
|
|
@@ -189,8 +192,9 @@ onMounted(() => {
|
|
|
189
192
|
:key="`page-${items.page_no - (3 - i)}`"
|
|
190
193
|
>
|
|
191
194
|
<router-link
|
|
192
|
-
class="flex items-center justify-center
|
|
195
|
+
class="flex items-center justify-center w-7 h-8 leading-tight text-fv-neutral-600 bg-white border border-fv-neutral-300 hover:bg-fv-neutral-100 hover:text-fv-neutral-800 focus:ring-1 focus:ring-primary-400 focus:outline-none focus:z-10 dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-300 dark:hover:bg-fv-neutral-700 dark:hover:text-white dark:focus:ring-primary-500 transition-colors"
|
|
193
196
|
:to="page(items.page_no - (3 - i))"
|
|
197
|
+
:aria-label="`Go to page ${items.page_no - (3 - i)}`"
|
|
194
198
|
>
|
|
195
199
|
{{ items.page_no - (3 - i) }}
|
|
196
200
|
</router-link>
|
|
@@ -199,7 +203,8 @@ onMounted(() => {
|
|
|
199
203
|
<li>
|
|
200
204
|
<div
|
|
201
205
|
aria-current="page"
|
|
202
|
-
class="z-10 flex items-center justify-center
|
|
206
|
+
class="z-10 flex items-center justify-center w-7 h-8 leading-tight text-white border border-primary-500 bg-primary-500 font-medium dark:border-primary-600 dark:bg-primary-600"
|
|
207
|
+
:aria-label="`Current page, page ${items.page_no}`"
|
|
203
208
|
>
|
|
204
209
|
{{ items.page_no }}
|
|
205
210
|
</div>
|
|
@@ -210,24 +215,26 @@ onMounted(() => {
|
|
|
210
215
|
:key="`page-x-${items.page_no + i}`"
|
|
211
216
|
>
|
|
212
217
|
<router-link
|
|
213
|
-
class="flex items-center justify-center
|
|
218
|
+
class="flex items-center justify-center w-7 h-8 leading-tight text-fv-neutral-600 bg-white border border-fv-neutral-300 hover:bg-fv-neutral-100 hover:text-fv-neutral-800 focus:ring-1 focus:ring-primary-400 focus:outline-none focus:z-10 dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-300 dark:hover:bg-fv-neutral-700 dark:hover:text-white dark:focus:ring-primary-500 transition-colors"
|
|
214
219
|
:to="page(items.page_no + i)"
|
|
220
|
+
:aria-label="`Go to page ${items.page_no + i}`"
|
|
215
221
|
>
|
|
216
222
|
{{ items.page_no + i }}
|
|
217
223
|
</router-link>
|
|
218
224
|
</li>
|
|
219
225
|
</template>
|
|
220
|
-
<li v-if="items.page_no + 2 < items.page_max - 1">
|
|
226
|
+
<li v-if="items.page_no + 2 < items.page_max - 1" aria-hidden="true">
|
|
221
227
|
<div
|
|
222
|
-
class="flex items-center justify-center
|
|
228
|
+
class="flex items-center justify-center w-6 h-8 leading-tight text-fv-neutral-600 bg-white border border-fv-neutral-300 dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-300"
|
|
223
229
|
>
|
|
224
|
-
|
|
230
|
+
<span class="text-xs">...</span>
|
|
225
231
|
</div>
|
|
226
232
|
</li>
|
|
227
233
|
<li v-if="items.page_no + 2 < items.page_max">
|
|
228
234
|
<router-link
|
|
229
|
-
class="flex items-center justify-center
|
|
235
|
+
class="flex items-center justify-center w-7 h-8 leading-tight text-fv-neutral-600 bg-white border border-fv-neutral-300 hover:bg-fv-neutral-100 hover:text-fv-neutral-800 focus:ring-1 focus:ring-primary-400 focus:outline-none focus:z-10 dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-300 dark:hover:bg-fv-neutral-700 dark:hover:text-white dark:focus:ring-primary-500 transition-colors"
|
|
230
236
|
:to="page(items.page_max)"
|
|
237
|
+
:aria-label="`Go to page ${items.page_max}`"
|
|
231
238
|
>
|
|
232
239
|
{{ items.page_max }}
|
|
233
240
|
</router-link>
|
|
@@ -235,18 +242,20 @@ onMounted(() => {
|
|
|
235
242
|
<li v-if="items.page_no < items.page_max">
|
|
236
243
|
<button
|
|
237
244
|
type="button"
|
|
238
|
-
class="flex items-center justify-center px-1.5 h-8 leading-tight text-fv-neutral-
|
|
245
|
+
class="flex items-center justify-center px-1.5 h-8 leading-tight text-fv-neutral-600 bg-white border border-fv-neutral-300 hover:bg-fv-neutral-100 hover:text-fv-neutral-800 focus:ring-1 focus:ring-primary-400 focus:outline-none focus:z-10 dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-300 dark:hover:bg-fv-neutral-700 dark:hover:text-white dark:focus:ring-primary-500 transition-colors rounded-r-md"
|
|
246
|
+
aria-label="Next page"
|
|
239
247
|
@click="next()"
|
|
240
248
|
>
|
|
241
249
|
<span class="sr-only">{{ $t("next_paging") }}</span>
|
|
242
|
-
<ChevronRightIcon class="w-
|
|
250
|
+
<ChevronRightIcon class="w-3.5 h-3.5" aria-hidden="true" />
|
|
243
251
|
</button>
|
|
244
252
|
</li>
|
|
245
253
|
</ul>
|
|
246
254
|
</nav>
|
|
247
255
|
<p
|
|
248
256
|
v-if="showLegend"
|
|
249
|
-
|
|
257
|
+
:id="`pagination-info-${id}`"
|
|
258
|
+
class="text-xs text-fv-neutral-700 dark:text-fv-neutral-300 pt-1 text-center"
|
|
250
259
|
>
|
|
251
260
|
{{
|
|
252
261
|
$t("global_paging", {
|