@appscode/design-system 2.1.2 → 2.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {

package/vue-components/v3/pagination/Pagination.vue

@@ -16,8 +16,16 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits(["pagination:pagechange", "pagination:countchange"]);
 
 const activePageNo = ref(1);
+
 const selectedItemCountPerPage = computed({
   get() {
+    if (props.itemsPerPage > 5 && props.totalNoOfItems <= 5) return 5;
+    else if (props.itemsPerPage > 10 && props.totalNoOfItems <= 10) return 10;
+    else if (props.itemsPerPage > 15 && props.totalNoOfItems <= 15) return 15;
+    else if (props.itemsPerPage > 20 && props.totalNoOfItems <= 20) return 20;
+    else if (props.itemsPerPage > 25 && props.totalNoOfItems <= 25) return 25;
+    else if (props.itemsPerPage > 50 && props.totalNoOfItems <= 50) return 50;
+
     return props.itemsPerPage;
   },
   set(n) {
@@ -102,7 +110,7 @@ watch(
 <template>
   <div class="level inner-table-pagination" v-show="showPagination">
     <div class="pagination-filter level-left">
-      <div class="level-item" v-show="!hideRowsPerPageSelection">
+      <div class="level-item" v-show="!hideRowsPerPageSelection && totalNoOfItems > 5">
         <label>Rows per page</label>
         <select v-model="selectedItemCountPerPage" name="page" data-testid="rows-per-page-selector">
           <option :value="5">5</option>
@@ -147,6 +155,7 @@ watch(
     </nav>
   </div>
 </template>
+
 <style lang="scss" scoped>
 .inner-table-pagination {
   padding: 4px 20px;
@@ -219,50 +228,4 @@ watch(
     }
   }
 }
-
-// .counting-page {
-//   color: $color-text;
-//   font-size: 12px;
-
-//   span {
-//     color: $color-heading;
-//     padding: 0 4px;
-//     font-weight: 500;
-//   }
-// }
-
-// .pagination-filter {
-//   border-radius: 4px;
-//   height: 20px;
-//   font-size: 11px;
-//   background-color: $white-100;
-//   color: $color-text;
-//   &:focus-visible {
-//     outline: none;
-//   }
-//   select {
-//     border: 1px solid
-//       hsla(
-//         var(--hsl-hue),
-//         var(--hsl-saturation),
-//         calc(var(--hsl-lightness) - 5%),
-//         1
-//       );
-//   }
-
-//   label {
-//     color: $gray-40;
-//     padding-right: 5px;
-//     display: inline-block;
-//     font-size: 13px;
-//   }
-// }
-
-// .is-dark-theme {
-//   .pagination-filter {
-//     label {
-//       $gray-40: $primary-20;
-//     }
-//   }
-// }
 </style>