@redseed/redseed-ui-vue3 2.13.14 → 2.14.0

package/package.json

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

package/src/components/CardGroup/CardGroup.vue

@@ -81,6 +81,7 @@ const showNotFoundMessage = computed(() => !props.totalItems && props.controlApp
     <div v-if="totalItems" class="rsui-card-group__cards">
         <slot></slot>
     </div>
+
     <div v-if="showEmptyMessage" class="rsui-card-group__empty">
         <Empty
             @clickPrimaryAction="$emit('clickEmptyAction')"

package/src/components/List/List.vue

@@ -144,5 +144,8 @@ function controlChanged(event) {
     &__empty {
         @apply mt-6;
     }
+    &___control {
+        @apply mt-3;
+    }
 }
 </style>

package/src/components/List/ListControl.vue

@@ -168,7 +168,7 @@ function fireLastPageEvent() {
             :perPage="perPage"
             :currentPage="currentPage"
             @change="pagination = $event"
-            @fitst="paginationFirst = $event"
+            @first="paginationFirst = $event"
             @last="paginationLast = $event"
         ></Pagination>
     </div>

package/src/components/Pagination/Pagination.vue

@@ -4,6 +4,7 @@ import PaginationItem from './PaginationItem.vue'
 import PaginationItemCollapsed from './PaginationItemCollapsed.vue'
 import PaginationItemNext from './PaginationItemNext.vue'
 import PaginationItemPrevious from './PaginationItemPrevious.vue'
+import RecordCount from './RecordCount.vue'
 
 const props = defineProps({
     totalItems: {
@@ -25,6 +26,10 @@ const props = defineProps({
     currentPageOnly: {
         type: Boolean,
         default: false
+    },
+    recordCount: {
+        type: Boolean,
+        default: true
     }
 })
 
@@ -201,90 +206,109 @@ function goToLastPage(page) {
         perPage: props.perPage,
     })
 }
+
+const firstItemIndex = computed(() => {
+    return (props.currentPage - 1) * props.perPage + 1
+})
+
+const lastItemIndex = computed(() => {
+    const lastIndex = props.currentPage * props.perPage
+    return lastIndex > props.totalItems ? props.totalItems : lastIndex
+})
+
 </script>
 <template>
-<div class="rsui-pagination">
+<div class="rsui-pagination-parent">
+    <div class="rsui-pagination">
     <!-- Previous button -->
-    <div class="rsui-pagination__previous">
-        <PaginationItemPrevious
-            :disabled="disabledPrevious"
-            @click="goToPage(current - 1)"
-        ></PaginationItemPrevious>
-    </div>
-    <!-- Page items if not arrows only -->
-    <div  v-if="!arrowsOnly"
-        class="rsui-pagination__items"
-    >
-        <!-- Single scale for current page only -->
-        <div v-if="showSingleScale"
-            class="rsui-pagination__items-group"
-        >
-            <PaginationItem freeze>
-                {{ current }}
-            </PaginationItem>
+        <div class="rsui-pagination__previous">
+            <PaginationItemPrevious
+                :disabled="disabledPrevious"
+                @click="goToPage(current - 1)"
+            ></PaginationItemPrevious>
         </div>
-        <!-- Full scale if total pages equals to scale max -->
-        <div v-if="showFullScale"
-            class="rsui-pagination__items-group"
+        <!-- Page items if not arrows only -->
+        <div  v-if="!arrowsOnly"
+            class="rsui-pagination__items"
         >
-            <PaginationItem v-for="page in totalPages"
-                :key="page"
-                :active="page == current"
-                @click="goToPage(page)"
+            <!-- Single scale for current page only -->
+            <div v-if="showSingleScale"
+                class="rsui-pagination__items-group"
             >
-                {{ page }}
-            </PaginationItem>
-        </div>
-        <!-- Ranged scale if total pages is greater than scale max -->
-        <div v-if="showRangedScale"
-            class="rsui-pagination__items-group"
-        >
-            <PaginationItem
-                v-if="showCollapsedStart"
-                :active="current == 1"
-                @click="goToFirstPage(1)"
+                <PaginationItem freeze>
+                    {{ current }}
+                </PaginationItem>
+            </div>
+            <!-- Full scale if total pages equals to scale max -->
+            <div v-if="showFullScale"
+                class="rsui-pagination__items-group"
             >
-                1
-            </PaginationItem>
-
-            <PaginationItemCollapsed
-                v-if="showCollapsedStart"
-            ></PaginationItemCollapsed>
-
-            <PaginationItem v-for="page in range"
-                :key="page"
-                :active="page == current"
-                @click="goToPage(page)"
+                <PaginationItem v-for="page in totalPages"
+                    :key="page"
+                    :active="page == current"
+                    @click="goToPage(page)"
+                >
+                    {{ page }}
+                </PaginationItem>
+            </div>
+            <!-- Ranged scale if total pages is greater than scale max -->
+            <div v-if="showRangedScale"
+                class="rsui-pagination__items-group"
             >
-                {{ page }}
-            </PaginationItem>
-
-            <PaginationItemCollapsed
-                v-if="showCollapsedEnd"
-            ></PaginationItemCollapsed>
-
-            <PaginationItem
-                v-if="showCollapsedEnd"
-                :active="totalPages == current"
-                @click="goToLastPage(totalPages)"
-            >
-                {{ totalPages }}
-            </PaginationItem>
+                <PaginationItem
+                    v-if="showCollapsedStart"
+                    :active="current == 1"
+                    @click="goToFirstPage(1)"
+                >
+                    1
+                </PaginationItem>
+
+                <PaginationItemCollapsed
+                    v-if="showCollapsedStart"
+                ></PaginationItemCollapsed>
+
+                <PaginationItem v-for="page in range"
+                    :key="page"
+                    :active="page == current"
+                    @click="goToPage(page)"
+                >
+                    {{ page }}
+                </PaginationItem>
+
+                <PaginationItemCollapsed
+                    v-if="showCollapsedEnd"
+                ></PaginationItemCollapsed>
+
+                <PaginationItem
+                    v-if="showCollapsedEnd"
+                    :active="totalPages == current"
+                    @click="goToLastPage(totalPages)"
+                >
+                    {{ totalPages }}
+                </PaginationItem>
+            </div>
+        </div>
+        <!-- Next button -->
+        <div class="rsui-pagination__next">
+            <PaginationItemNext
+                :disabled="disabledNext"
+                @click="goToPage(current + 1)"
+            ></PaginationItemNext>
         </div>
     </div>
-    <!-- Next button -->
-    <div class="rsui-pagination__next">
-        <PaginationItemNext
-            :disabled="disabledNext"
-            @click="goToPage(current + 1)"
-        ></PaginationItemNext>
+    <div class="rsui-pagination-parent__record-count">
+        <RecordCount v-if="recordCount"
+            :firstItemIndex="firstItemIndex"
+            :lastItemIndex="lastItemIndex"
+            :totalItems="totalItems"
+        ></RecordCount>
     </div>
 </div>
 </template>
 <style lang="scss" scoped>
 .rsui-pagination {
     @apply flex flex-nowrap items-center;
-    @apply w-fit border border-rsui-grey-200 rounded-full p-1;
+    @apply w-fit border border-rsui-grey-200 rounded-full p-1 bg-white;
     @apply divide-x;
     &__previous {
         @apply size-full flex items-center pr-1;
@@ -299,4 +323,10 @@ function goToLastPage(page) {
         @apply size-full flex items-center pl-1;
     }
 }
+.rsui-pagination-parent {
+    @apply flex flex-col items-center;
+    &__record-count {
+        @apply size-full flex items-center justify-center;
+    }
+}
 </style>

package/src/components/Pagination/RecordCount.vue

@@ -0,0 +1,26 @@
+<script setup>
+const props = defineProps({
+    firstItemIndex: {
+        type: Number,
+        required: true
+    },
+    lastItemIndex: {
+        type: Number,
+        required: true
+    },
+    totalItems: {
+        type: Number,
+        required: true
+    }
+})
+</script>
+<template>
+    <div class="record-count">
+        Showing {{ firstItemIndex }} - {{ lastItemIndex }} of {{ totalItems }}
+    </div>
+</template>
+<style lang="scss" scoped>
+.record-count {
+    @apply my-2 text-sm text-rsui-medium
+}
+</style>