@fy-/fws-vue 2.2.85 → 2.2.87
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 -15
- package/package.json +1 -1
|
@@ -158,21 +158,21 @@ onMounted(() => {
|
|
|
158
158
|
>
|
|
159
159
|
<div class="paging-container">
|
|
160
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
|
+
<ul class="flex items-center gap-1 h-8 text-xs md:text-sm" role="list">
|
|
162
162
|
<li v-if="items.page_no >= 2">
|
|
163
163
|
<button
|
|
164
164
|
type="button"
|
|
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"
|
|
165
|
+
class="flex items-center justify-center w-7 md:w-8 h-7 md: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
166
|
aria-label="Previous page"
|
|
167
167
|
@click="prev()"
|
|
168
168
|
>
|
|
169
169
|
<span class="sr-only">{{ $t("previous_paging") }}</span>
|
|
170
|
-
<ChevronLeftIcon class="w-4 h-4" aria-hidden="true" />
|
|
170
|
+
<ChevronLeftIcon class="w-3.5 h-3.5 md:w-4 md:h-4" aria-hidden="true" />
|
|
171
171
|
</button>
|
|
172
172
|
</li>
|
|
173
173
|
<li v-if="items.page_no - 1 > 1">
|
|
174
174
|
<router-link
|
|
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"
|
|
175
|
+
class="flex items-center justify-center w-7 md:w-8 h-7 md: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"
|
|
176
176
|
:to="page(1)"
|
|
177
177
|
aria-label="Go to page 1"
|
|
178
178
|
>
|
|
@@ -181,9 +181,9 @@ onMounted(() => {
|
|
|
181
181
|
</li>
|
|
182
182
|
<li v-if="items.page_no - 1 > 2" aria-hidden="true">
|
|
183
183
|
<div
|
|
184
|
-
class="flex items-center justify-center w-6 h-8 text-fv-neutral-500 dark:text-fv-neutral-400"
|
|
184
|
+
class="flex items-center justify-center w-5 md:w-6 h-7 md:h-8 text-fv-neutral-500 dark:text-fv-neutral-400"
|
|
185
185
|
>
|
|
186
|
-
<span class="text-xs font-medium">•••</span>
|
|
186
|
+
<span class="text-[10px] md:text-xs font-medium">•••</span>
|
|
187
187
|
</div>
|
|
188
188
|
</li>
|
|
189
189
|
<li
|
|
@@ -191,7 +191,7 @@ onMounted(() => {
|
|
|
191
191
|
:key="`page-${items.page_no - 1}`"
|
|
192
192
|
>
|
|
193
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"
|
|
194
|
+
class="flex items-center justify-center w-7 md:w-8 h-7 md: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
195
|
:to="page(items.page_no - 1)"
|
|
196
196
|
:aria-label="`Go to page ${items.page_no - 1}`"
|
|
197
197
|
>
|
|
@@ -201,7 +201,7 @@ onMounted(() => {
|
|
|
201
201
|
<li>
|
|
202
202
|
<div
|
|
203
203
|
aria-current="page"
|
|
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"
|
|
204
|
+
class="flex items-center justify-center w-7 md:w-8 h-7 md:h-8 text-white rounded-md shadow-sm bg-primary-600 font-medium dark:bg-primary-500 transition-all"
|
|
205
205
|
:aria-label="`Current page, page ${items.page_no}`"
|
|
206
206
|
>
|
|
207
207
|
{{ items.page_no }}
|
|
@@ -212,7 +212,7 @@ onMounted(() => {
|
|
|
212
212
|
:key="`page-x-${items.page_no + 1}`"
|
|
213
213
|
>
|
|
214
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"
|
|
215
|
+
class="flex items-center justify-center w-7 md:w-8 h-7 md: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
216
|
:to="page(items.page_no + 1)"
|
|
217
217
|
:aria-label="`Go to page ${items.page_no + 1}`"
|
|
218
218
|
>
|
|
@@ -221,14 +221,14 @@ onMounted(() => {
|
|
|
221
221
|
</li>
|
|
222
222
|
<li v-if="items.page_no + 1 < items.page_max - 1" aria-hidden="true">
|
|
223
223
|
<div
|
|
224
|
-
class="flex items-center justify-center w-6 h-8 text-fv-neutral-500 dark:text-fv-neutral-400"
|
|
224
|
+
class="flex items-center justify-center w-5 md:w-6 h-7 md:h-8 text-fv-neutral-500 dark:text-fv-neutral-400"
|
|
225
225
|
>
|
|
226
|
-
<span class="text-xs font-medium">•••</span>
|
|
226
|
+
<span class="text-[10px] md:text-xs font-medium">•••</span>
|
|
227
227
|
</div>
|
|
228
228
|
</li>
|
|
229
229
|
<li v-if="items.page_no + 1 < items.page_max">
|
|
230
230
|
<router-link
|
|
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"
|
|
231
|
+
class="flex items-center justify-center w-7 md:w-8 h-7 md: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"
|
|
232
232
|
:to="page(items.page_max)"
|
|
233
233
|
:aria-label="`Go to page ${items.page_max}`"
|
|
234
234
|
>
|
|
@@ -238,12 +238,12 @@ onMounted(() => {
|
|
|
238
238
|
<li v-if="items.page_no < items.page_max">
|
|
239
239
|
<button
|
|
240
240
|
type="button"
|
|
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"
|
|
241
|
+
class="flex items-center justify-center w-7 md:w-8 h-7 md: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
242
|
aria-label="Next page"
|
|
243
243
|
@click="next()"
|
|
244
244
|
>
|
|
245
245
|
<span class="sr-only">{{ $t("next_paging") }}</span>
|
|
246
|
-
<ChevronRightIcon class="w-4 h-4" aria-hidden="true" />
|
|
246
|
+
<ChevronRightIcon class="w-3.5 h-3.5 md:w-4 md:h-4" aria-hidden="true" />
|
|
247
247
|
</button>
|
|
248
248
|
</li>
|
|
249
249
|
</ul>
|
|
@@ -251,7 +251,7 @@ onMounted(() => {
|
|
|
251
251
|
<p
|
|
252
252
|
v-if="showLegend"
|
|
253
253
|
:id="`pagination-info-${id}`"
|
|
254
|
-
class="text-xs text-fv-neutral-500 dark:text-fv-neutral-400 pt-1.5 text-center"
|
|
254
|
+
class="text-[10px] md:text-xs text-fv-neutral-500 dark:text-fv-neutral-400 pt-1 md:pt-1.5 text-center"
|
|
255
255
|
>
|
|
256
256
|
{{
|
|
257
257
|
$t("global_paging", {
|