@redseed/redseed-ui-vue3 2.13.1 → 2.13.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redseed/redseed-ui-vue3",
-  "version": "2.13.1",
+  "version": "2.13.2",
   "description": "RedSeed UI Vue 3 components",
   "main": "index.js",
   "scripts": {

package/src/components/Pagination/Pagination.vue

@@ -124,8 +124,11 @@ const range = computed(() => {
         if (goingNext.value) return startRange
     }
 
-    // default to show start range
-    return startRange
+    if (current.value <= scaleOffset + 1) return startRange
+
+    if (current.value == totalPages.value) return endRange
+
+    return middleRangeGoingNext
 })
 
 const showSingleScale = computed(() => hasOnePage.value || props.currentPageOnly)
@@ -150,7 +153,7 @@ const showCollapsedEnd = computed(() => totalPages.value > 6
     && !range.value.includes(totalPages.value)
 )
 
-const emit = defineEmits(['change'])
+const emit = defineEmits(['change', 'first', 'last'])
 
 const goingPrevious = ref(false)
 const goingNext = ref(false)
@@ -176,6 +179,26 @@ function goToPage(page) {
         perPage: props.perPage,
     })
 }
+
+function goToFirstPage(page) {
+    goToPage(page)
+
+    emit('first', {
+        currentPage: current.value,
+        totalPages: totalPages.value,
+        perPage: props.perPage,
+    })
+}
+
+function goToLastPage(page) {
+    goToPage(page)
+
+    emit('last', {
+        currentPage: current.value,
+        totalPages: totalPages.value,
+        perPage: props.perPage,
+    })
+}
 </script>
 <template>
 <div class="rsui-pagination">
@@ -217,7 +240,7 @@ function goToPage(page) {
             <PaginationItem
                 v-if="showCollapsedStart"
                 :active="current == 1"
-                @click="goToPage(1)"
+                @click="goToFirstPage(1)"
             >
                 1
             </PaginationItem>
@@ -241,7 +264,7 @@ function goToPage(page) {
             <PaginationItem
                 v-if="showCollapsedEnd"
                 :active="totalPages == current"
-                @click="goToPage(totalPages)"
+                @click="goToLastPage(totalPages)"
             >
                 {{ totalPages }}
             </PaginationItem>