@fy-/fws-vue 2.2.80 → 2.2.82
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 +18 -27
- package/package.json +1 -1
|
@@ -153,37 +153,34 @@ onMounted(() => {
|
|
|
153
153
|
<template>
|
|
154
154
|
<div
|
|
155
155
|
v-if="items && items.page_max > 1 && items.page_no"
|
|
156
|
-
:id="`pagination-${id}`"
|
|
157
156
|
class="flex items-center justify-center"
|
|
158
157
|
>
|
|
159
158
|
<div class="paging-container">
|
|
160
|
-
<nav aria-label="Pagination"
|
|
161
|
-
<ul class="flex items-center h-8 text-sm"
|
|
159
|
+
<nav aria-label="Pagination">
|
|
160
|
+
<ul class="flex items-center -space-x-px h-8 text-sm">
|
|
162
161
|
<li v-if="items.page_no >= 2">
|
|
163
162
|
<button
|
|
164
163
|
type="button"
|
|
165
|
-
class="flex items-center justify-center px-1.5 h-8
|
|
166
|
-
aria-label="Previous page"
|
|
164
|
+
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"
|
|
167
165
|
@click="prev()"
|
|
168
166
|
>
|
|
169
167
|
<span class="sr-only">{{ $t("previous_paging") }}</span>
|
|
170
|
-
<ChevronLeftIcon class="w-
|
|
168
|
+
<ChevronLeftIcon class="w-4 h-4" />
|
|
171
169
|
</button>
|
|
172
170
|
</li>
|
|
173
171
|
<li v-if="items.page_no - 2 > 1">
|
|
174
172
|
<router-link
|
|
175
|
-
class="flex items-center justify-center
|
|
173
|
+
class="flex items-center justify-center px-3 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"
|
|
176
174
|
:to="page(1)"
|
|
177
|
-
aria-label="Go to page 1"
|
|
178
175
|
>
|
|
179
176
|
1
|
|
180
177
|
</router-link>
|
|
181
178
|
</li>
|
|
182
|
-
<li v-if="items.page_no - 2 > 2"
|
|
179
|
+
<li v-if="items.page_no - 2 > 2">
|
|
183
180
|
<div
|
|
184
|
-
class="flex items-center justify-center
|
|
181
|
+
class="flex items-center justify-center px-1.5 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"
|
|
185
182
|
>
|
|
186
|
-
|
|
183
|
+
...
|
|
187
184
|
</div>
|
|
188
185
|
</li>
|
|
189
186
|
<template v-for="i in 2">
|
|
@@ -192,9 +189,8 @@ onMounted(() => {
|
|
|
192
189
|
:key="`page-${items.page_no - (3 - i)}`"
|
|
193
190
|
>
|
|
194
191
|
<router-link
|
|
195
|
-
class="flex items-center justify-center
|
|
192
|
+
class="flex items-center justify-center px-3 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"
|
|
196
193
|
:to="page(items.page_no - (3 - i))"
|
|
197
|
-
:aria-label="`Go to page ${items.page_no - (3 - i)}`"
|
|
198
194
|
>
|
|
199
195
|
{{ items.page_no - (3 - i) }}
|
|
200
196
|
</router-link>
|
|
@@ -203,8 +199,7 @@ onMounted(() => {
|
|
|
203
199
|
<li>
|
|
204
200
|
<div
|
|
205
201
|
aria-current="page"
|
|
206
|
-
class="z-10 flex items-center justify-center
|
|
207
|
-
:aria-label="`Current page, page ${items.page_no}`"
|
|
202
|
+
class="z-10 flex items-center justify-center px-3 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"
|
|
208
203
|
>
|
|
209
204
|
{{ items.page_no }}
|
|
210
205
|
</div>
|
|
@@ -215,26 +210,24 @@ onMounted(() => {
|
|
|
215
210
|
:key="`page-x-${items.page_no + i}`"
|
|
216
211
|
>
|
|
217
212
|
<router-link
|
|
218
|
-
class="flex items-center justify-center
|
|
213
|
+
class="flex items-center justify-center px-3 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"
|
|
219
214
|
:to="page(items.page_no + i)"
|
|
220
|
-
:aria-label="`Go to page ${items.page_no + i}`"
|
|
221
215
|
>
|
|
222
216
|
{{ items.page_no + i }}
|
|
223
217
|
</router-link>
|
|
224
218
|
</li>
|
|
225
219
|
</template>
|
|
226
|
-
<li v-if="items.page_no + 2 < items.page_max - 1"
|
|
220
|
+
<li v-if="items.page_no + 2 < items.page_max - 1">
|
|
227
221
|
<div
|
|
228
|
-
class="flex items-center justify-center
|
|
222
|
+
class="flex items-center justify-center px-1.5 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"
|
|
229
223
|
>
|
|
230
|
-
|
|
224
|
+
...
|
|
231
225
|
</div>
|
|
232
226
|
</li>
|
|
233
227
|
<li v-if="items.page_no + 2 < items.page_max">
|
|
234
228
|
<router-link
|
|
235
|
-
class="flex items-center justify-center
|
|
229
|
+
class="flex items-center justify-center px-3 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"
|
|
236
230
|
:to="page(items.page_max)"
|
|
237
|
-
:aria-label="`Go to page ${items.page_max}`"
|
|
238
231
|
>
|
|
239
232
|
{{ items.page_max }}
|
|
240
233
|
</router-link>
|
|
@@ -242,20 +235,18 @@ onMounted(() => {
|
|
|
242
235
|
<li v-if="items.page_no < items.page_max">
|
|
243
236
|
<button
|
|
244
237
|
type="button"
|
|
245
|
-
class="flex items-center justify-center px-1.5 h-8
|
|
246
|
-
aria-label="Next page"
|
|
238
|
+
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"
|
|
247
239
|
@click="next()"
|
|
248
240
|
>
|
|
249
241
|
<span class="sr-only">{{ $t("next_paging") }}</span>
|
|
250
|
-
<ChevronRightIcon class="w-
|
|
242
|
+
<ChevronRightIcon class="w-4 h-4" />
|
|
251
243
|
</button>
|
|
252
244
|
</li>
|
|
253
245
|
</ul>
|
|
254
246
|
</nav>
|
|
255
247
|
<p
|
|
256
248
|
v-if="showLegend"
|
|
257
|
-
|
|
258
|
-
class="text-xs text-fv-neutral-700 dark:text-fv-neutral-300 pt-1 text-center"
|
|
249
|
+
class="text-xs text-fv-neutral-700 dark:text-fv-neutral-400 pt-0.5"
|
|
259
250
|
>
|
|
260
251
|
{{
|
|
261
252
|
$t("global_paging", {
|