@fy-/fws-vue 0.3.61 → 0.3.63

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 +90 -82
  2. package/package.json +1 -1
package/components/ui/DefaultPaging.vue CHANGED
@@ -128,89 +128,97 @@ useFyHead({
128
128
  v-if="items && items.page_max > 1 && items.page_no"
129
129
  >
130
130
  <div class="paging-container">
131
- <nav
132
- aria-label="Pagination"
133
- class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px"
134
- >
135
- <a
136
- href="javascript:void(0);"
137
- @click="prev()"
138
- v-if="items.page_no >= 2"
139
- class="relative inline-flex items-center px-2 pt-2 pb-1.5 border text-sm font-medium border-fv-neutral-300 bg-fv-neutral-100 text-fv-neutral-500 hover:bg-fv-neutral-200 hover:text-fv-neutral-600 dark:border-fv-neutral-600 dark:bg-fv-neutral-800 dark:text-fv-neutral-200 dark:hover:bg-fv-neutral-800 dark:hover:text-fv-neutral-100"
140
- >
141
- <span class="sr-only">{{ $t("previous_paging") }}</span>
142
- <ChevronLeftIcon class="w-4 h-4" />
143
- </a>
144
- <a
145
- v-if="items.page_no - 2 > 1"
146
- class="relative inline-flex items-center px-4 pt-2 pb-1.5 border text-sm font-medium bg-fv-neutral-100 border-fv-neutral-300 text-fv-neutral-500 hover:bg-fv-neutral-200 hover:text-fv-neutral-600 dark:bg-fv-neutral-800 dark:border-fv-neutral-600 dark:text-fv-neutral-200 dark:hover:bg-fv-neutral-800 dark:hover:text-fv-neutral-100"
147
- href="javascript:void(0);"
148
- @click="page(1)"
149
- >
150
- 1
151
- </a>
152
- <span
153
- v-if="items.page_no - 2 > 2"
154
- class="relative inline-flex items-center px-2 pt-2 pb-1.5 border text-sm font-medium border-fv-neutral-300 bg-fv-neutral-100 text-fv-neutral-700 hover:text-fv-neutral-600 dark:border-fv-neutral-600 dark:bg-fv-neutral-800 dark:text-fv-neutral-700 dark:hover:text-fv-neutral-100"
155
- >
156
- ...
157
- </span>
158
- <template v-for="i in 2">
159
- <a
160
- v-if="items.page_no - (3 - i) >= 1"
161
- class="relative inline-flex items-center px-4 pt-2 pb-1.5 border text-sm font-medium bg-fv-neutral-100 border-fv-neutral-300 text-fv-neutral-500 hover:bg-fv-neutral-200 hover:text-fv-neutral-600 dark:bg-fv-neutral-800 dark:border-fv-neutral-600 dark:text-fv-neutral-200 dark:hover:bg-fv-neutral-800 dark:hover:text-fv-neutral-100"
162
- href="javascript:void(0);"
163
- :key="`${i}-sm`"
164
- @click="page(items.page_no - (3 - i))"
165
- >
166
- {{ items.page_no - (3 - i) }}
167
- </a>
168
- </template>
169
- <a
170
- href="#"
171
- aria-current="page"
172
- class="z-10 relative inline-flex items-center px-4 pt-2 pb-1.5 border text-sm font-medium font-bold bg-fv-primary-50 border-fv-primary-500 text-fv-primary-600 hover:text-fv-neutral-600 dark:bg-fv-primary-900 dark:border-fv-primary-500 dark:text-fv-primary-200 dark:hover:text-fv-neutral-100"
173
- >
174
- {{ items.page_no }}
175
- </a>
176
- <template v-for="i in 2">
177
- <a
178
- v-if="items.page_no + i <= items.page_max"
179
- class="relative inline-flex items-center px-4 pt-2 pb-1.5 border text-sm font-medium bg-fv-neutral-100 border-fv-neutral-300 text-fv-neutral-500 hover:bg-fv-neutral-200 hover:text-fv-neutral-600 dark:bg-fv-neutral-800 dark:border-fv-neutral-600 dark:text-fv-neutral-200 dark:hover:bg-fv-neutral-800 dark:hover:text-fv-neutral-100"
180
- href="javascript:void(0);"
181
- :key="`${i}-md`"
182
- @click="page(items.page_no + i)"
183
- >
184
- {{ items.page_no + i }}
185
- </a>
186
- </template>
187
- <span
188
- v-if="items.page_no + 2 < items.page_max - 1"
189
- class="relative inline-flex items-center px-2 pt-2 pb-1.5 border text-sm font-medium border-fv-neutral-300 bg-fv-neutral-100 text-fv-neutral-700 hover:text-fv-neutral-600 dark:border-fv-neutral-600 dark:bg-fv-neutral-800 dark:text-fv-neutral-700 dark:hover:text-fv-neutral-100"
190
- >
191
- ...
192
- </span>
193
- <a
194
- v-if="items.page_no + 2 < items.page_max"
195
- class="relative inline-flex items-center px-4 pt-2 pb-1.5 border text-sm font-medium bg-fv-neutral-100 border-fv-neutral-300 text-fv-neutral-500 hover:bg-fv-neutral-200 hover:text-fv-neutral-600 dark:bg-fv-neutral-800 dark:border-fv-neutral-600 dark:text-fv-neutral-200 dark:hover:bg-fv-neutral-800 dark:hover:text-fv-neutral-100"
196
- href="javascript:void(0);"
197
- @click="page(items.page_max)"
198
- >
199
- {{ items.page_max }}
200
- </a>
201
- <a
202
- href="javascript:void(0);"
203
- @click="next()"
204
- v-if="items.page_no < items.page_max - 1"
205
- class="relative inline-flex items-center px-2 pt-2 pb-1.5 border text-sm font-medium border-fv-neutral-300 bg-fv-neutral-100 text-fv-neutral-500 hover:bg-fv-neutral-200 hover:text-fv-neutral-600 dark:border-fv-neutral-600 dark:bg-fv-neutral-800 dark:text-fv-neutral-200 dark:hover:bg-fv-neutral-800 dark:hover:text-fv-neutral-100"
206
- >
207
- <span class="sr-only">{{ $t("next_paging") }}</span>
208
- <ChevronRightIcon class="w-4 h-4" />
209
- </a>
131
+ <nav aria-label="Pagination">
132
+ <ul class="flex items-center -space-x-px h-8 text-sm">
133
+ <li v-if="items.page_no >= 2">
134
+ <a
135
+ href="javascript:void(0);"
136
+ @click="prev()"
137
+ class="rounded-s-lg 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"
138
+ >
139
+ <span class="sr-only">{{ $t("previous_paging") }}</span>
140
+ <ChevronLeftIcon class="w-4 h-4" />
141
+ </a>
142
+ </li>
143
+ <li v-if="items.page_no - 2 > 1">
144
+ <a
145
+ 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"
146
+ :class="{ 'rounded-l-lg': items.page_no - 2 > 2 }"
147
+ href="javascript:void(0);"
148
+ @click="page(1)"
149
+ >
150
+ 1
151
+ </a>
152
+ </li>
153
+ <li v-if="items.page_no - 2 > 2">
154
+ <span
155
+ v-if="items.page_no - 2 > 2"
156
+ 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"
157
+ >
158
+ ...
159
+ </span>
160
+ </li>
161
+ <template v-for="i in 2">
162
+ <li v-if="items.page_no - (3 - i) >= 1" :key="`${i}-sm`">
163
+ <a
164
+ 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"
165
+ href="javascript:void(0);"
166
+ @click="page(items.page_no - (3 - i))"
167
+ >
168
+ {{ items.page_no - (3 - i) }}
169
+ </a>
170
+ </li>
171
+ </template>
172
+ <li>
173
+ <a
174
+ href="#"
175
+ aria-current="page"
176
+ class="z-10 flex items-center justify-center px-3 h-8 leading-tight text-primary-600 border border-primary-300 bg-primary-50 hover:bg-primary-100 hover:text-primary-700 dark:border-fv-neutral-700 dark:bg-fv-neutral-700 dark:text-white"
177
+ >
178
+ {{ items.page_no }}
179
+ </a>
180
+ </li>
181
+ <template v-for="i in 2">
182
+ <li :key="`${i}-md`" v-if="items.page_no + i <= items.page_max">
183
+ <a
184
+ 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"
185
+ href="javascript:void(0);"
186
+ @click="page(items.page_no + i)"
187
+ >
188
+ {{ items.page_no + i }}
189
+ </a>
190
+ </li>
191
+ </template>
192
+ <li v-if="items.page_no + 2 < items.page_max - 1">
193
+ <span
194
+ class="relative inline-flex items-center px-2 pt-2 pb-1.5 border text-sm font-medium border-fv-neutral-300 bg-fv-neutral-100 text-fv-neutral-700 hover:text-fv-neutral-600 dark:border-fv-neutral-600 dark:bg-fv-neutral-800 dark:text-fv-neutral-700 dark:hover:text-fv-neutral-100"
195
+ >
196
+ ...
197
+ </span>
198
+ </li>
199
+ <li v-if="items.page_no + 2 < items.page_max">
200
+ <a
201
+ 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"
202
+ href="javascript:void(0);"
203
+ @click="page(items.page_max)"
204
+ >
205
+ {{ items.page_max }}
206
+ </a>
207
+ </li>
208
+ <li v-if="items.page_no < items.page_max - 1">
209
+ <a
210
+ href="javascript:void(0);"
211
+ @click="next()"
212
+ :class="{ 'rounded-r-lg': items.page_no < items.page_max - 2 }"
213
+ class="rounded-e-lg 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"
214
+ >
215
+ <span class="sr-only">{{ $t("next_paging") }}</span>
216
+ <ChevronRightIcon class="w-4 h-4" />
217
+ </a>
218
+ </li>
219
+ </ul>
210
220
  </nav>
211
- <p
212
- class="text-xs text-center italic mt-0.5 text-fv-neutral-700 dark:text-fv-neutral-300"
213
- >
221
+ <p class="text-xs text-fv-neutral-700 dark:text-fv-neutral-400">
214
222
  {{
215
223
  $t("global_paging", {
216
224
  start: items.results_per_page * (items.page_no - 1),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fy-/fws-vue",
3
- "version": "0.3.61",
3
+ "version": "0.3.63",
4
4
  "author": "Florian 'Fy' Gasquez <m@fy.to>",
5
5
  "license": "MIT",
6
6
  "repository": {