@redseed/redseed-ui-vue3 2.13.1 → 2.13.3

package/package.json

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

package/src/components/CardGroup/CardGroup.vue

@@ -45,7 +45,15 @@ const pageUpdated = (event) => {
     emit('pageUpdated', event)
 }
 
-const emit = defineEmits(['pageUpdated'])
+const firstPageUpdated = (event) => {
+    emit('firstPageUpdated', event)
+}
+
+const lastPageUpdated = (event) => {
+    emit('lastPageUpdated', event)
+}
+
+const emit = defineEmits(['pageUpdated', 'firstPageUpated', 'lastPageUpdated'])
 
 const showEmptyMessage = computed(() => !props.totalItems && !props.controlApplied)
 
@@ -54,8 +62,14 @@ const showNotFoundMessage = computed(() => !props.totalItems && props.controlApp
 <template>
 <div ref="cardGroupElement" :class="cardGroupClasses">
     <div class="rsui-card-group__pagination">
-        <Pagination v-if="totalItems > perPage" :totalItems="totalItems" :perPage="perPage" :currentPage="currentPage"
-            @change="pageUpdated"></Pagination>
+        <Pagination v-if="totalItems > perPage"
+            :totalItems="totalItems"
+            :perPage="perPage"
+            :currentPage="currentPage"
+            @change="pageUpdated"
+            @first="pageUpdated"
+            @last="pageUpdated"
+        ></Pagination>
     </div>
     <div v-if="totalItems" class="rsui-card-group__cards">
         <slot></slot>
@@ -95,7 +109,7 @@ const showNotFoundMessage = computed(() => !props.totalItems && props.controlApp
         }
     }
 
-    &--md, 
+    &--md,
     &--lg,
     &--xl {
         .rsui-card-group__cards {

package/src/components/List/ListControl.vue

@@ -40,7 +40,7 @@ const paginationClass = computed(() => [
     }
 ])
 
-const emit = defineEmits(['change'])
+const emit = defineEmits(['change', 'firstPage', 'lastPage'])
 
 const listControlElement = ref(null)
 
@@ -64,11 +64,15 @@ const searchText = ref('')
 const appliedFilters = ref([])
 const sortDesc = ref(false)
 const pagination = ref(null)
+const paginationFirst = ref(null)
+const paginationLast = ref(null)
 
 watch(searchText, () => { fireChangeEvent() }, { flush: 'post' })
 watch(appliedFilters, () => { fireChangeEvent() }, { deep: true, flush: 'post' })
 watch(sortDesc, () => { fireChangeEvent() }, { flush: 'post' })
 watch(pagination, () => { fireChangeEvent() }, { deep: true, flush: 'post' })
+watch(paginationFirst, () => { fireFirstPageEvent() }, { deep: true, flush: 'post' })
+watch(paginationLast, () => { fireLastPageEvent() }, { deep: true, flush: 'post' })
 
 function fireChangeEvent() {
     emit('change', {
@@ -78,6 +82,24 @@ function fireChangeEvent() {
         pagination: pagination.value
     })
 }
+
+function fireFirstPageEvent() {
+    emit('firstPage', {
+        searchText: searchText.value,
+        appliedFilters: appliedFilters.value,
+        sortDesc: sortDesc.value,
+        pagination: pagination.value
+    })
+}
+
+function fireLastPageEvent() {
+    emit('lastPage', {
+        searchText: searchText.value,
+        appliedFilters: appliedFilters.value,
+        sortDesc: sortDesc.value,
+        pagination: pagination.value
+    })
+}
 </script>
 <template>
 <div ref="listControlElement"
@@ -135,6 +157,8 @@ function fireChangeEvent() {
             :perPage="perPage"
             :currentPage="currentPage"
             @change="pagination = $event"
+            @fitst="paginationFirst = $event"
+            @last="paginationLast = $event"
         ></Pagination>
     </div>
 </div>

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>