@redseed/redseed-ui-vue3 2.0.0 → 2.0.1
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/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<script setup>
|
|
2
|
-
import { ref, computed } from 'vue'
|
|
2
|
+
import { ref, computed, watch } from 'vue'
|
|
3
3
|
import PaginationItem from './PaginationItem.vue'
|
|
4
4
|
import PaginationItemCollapsed from './PaginationItemCollapsed.vue'
|
|
5
5
|
import PaginationItemNext from './PaginationItemNext.vue'
|
|
@@ -40,6 +40,8 @@ const totalPages = computed(() => {
|
|
|
40
40
|
return Math.ceil(props.totalItems / props.perPage)
|
|
41
41
|
})
|
|
42
42
|
|
|
43
|
+
watch(totalPages, () => goToPage(1))
|
|
44
|
+
|
|
43
45
|
const hasOnePage = computed(() => totalPages.value == 1)
|
|
44
46
|
|
|
45
47
|
const hasMoreThanOnePage = computed(() => totalPages.value > 1)
|
|
@@ -153,7 +155,7 @@ const emit = defineEmits(['change'])
|
|
|
153
155
|
const goingPrevious = ref(false)
|
|
154
156
|
const goingNext = ref(false)
|
|
155
157
|
|
|
156
|
-
function
|
|
158
|
+
function goToPage(page) {
|
|
157
159
|
if (page == current.value) return
|
|
158
160
|
|
|
159
161
|
if (page < current.value) {
|
|
@@ -181,7 +183,7 @@ function clickPage(page) {
|
|
|
181
183
|
<div class="rsui-pagination__previous">
|
|
182
184
|
<PaginationItemPrevious
|
|
183
185
|
:disabled="disabledPrevious"
|
|
184
|
-
@click="
|
|
186
|
+
@click="goToPage(current - 1)"
|
|
185
187
|
></PaginationItemPrevious>
|
|
186
188
|
</div>
|
|
187
189
|
<!-- Page items if not arrows only -->
|
|
@@ -203,7 +205,7 @@ function clickPage(page) {
|
|
|
203
205
|
<PaginationItem v-for="page in totalPages"
|
|
204
206
|
:key="page"
|
|
205
207
|
:active="page == current"
|
|
206
|
-
@click="
|
|
208
|
+
@click="goToPage(page)"
|
|
207
209
|
>
|
|
208
210
|
{{ page }}
|
|
209
211
|
</PaginationItem>
|
|
@@ -215,7 +217,7 @@ function clickPage(page) {
|
|
|
215
217
|
<PaginationItem
|
|
216
218
|
v-if="showCollapsedStart"
|
|
217
219
|
:active="current == 1"
|
|
218
|
-
@click="
|
|
220
|
+
@click="goToPage(1)"
|
|
219
221
|
>
|
|
220
222
|
1
|
|
221
223
|
</PaginationItem>
|
|
@@ -227,7 +229,7 @@ function clickPage(page) {
|
|
|
227
229
|
<PaginationItem v-for="page in range"
|
|
228
230
|
:key="page"
|
|
229
231
|
:active="page == current"
|
|
230
|
-
@click="
|
|
232
|
+
@click="goToPage(page)"
|
|
231
233
|
>
|
|
232
234
|
{{ page }}
|
|
233
235
|
</PaginationItem>
|
|
@@ -239,7 +241,7 @@ function clickPage(page) {
|
|
|
239
241
|
<PaginationItem
|
|
240
242
|
v-if="showCollapsedEnd"
|
|
241
243
|
:active="totalPages == current"
|
|
242
|
-
@click="
|
|
244
|
+
@click="goToPage(totalPages)"
|
|
243
245
|
>
|
|
244
246
|
{{ totalPages }}
|
|
245
247
|
</PaginationItem>
|
|
@@ -249,7 +251,7 @@ function clickPage(page) {
|
|
|
249
251
|
<div class="rsui-pagination__next">
|
|
250
252
|
<PaginationItemNext
|
|
251
253
|
:disabled="disabledNext"
|
|
252
|
-
@click="
|
|
254
|
+
@click="goToPage(current + 1)"
|
|
253
255
|
></PaginationItemNext>
|
|
254
256
|
</div>
|
|
255
257
|
</div>
|