PATCH: add possibility to custom paginatedList : (#191)

* add possibility to custom paginatedList : - background-color property - display or not number of data elements - display or not first and last chevron icons * add default value for backgroundColor props
bimdata · Apr 13, 2022 · 2e64152 · 2e64152
1 parent a91e34b
commit 2e64152
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 3 deletions.
diff --git a/src/BIMDataComponents/BIMDataNavigation/BIMDataNavigation.vue b/src/BIMDataComponents/BIMDataNavigation/BIMDataNavigation.vue
@@ -1,5 +1,8 @@
 <template>
-  <ul class="bimdata-list bimdata-navigation">
+  <ul
+    class="bimdata-list bimdata-navigation"
+    :style="{ 'background-color': backgroundColor }"
+  >
     <li class="bimdata-navigation__left m-r-6">
       <slot name="left"></slot>
     </li>
@@ -107,6 +110,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    backgroundColor: {
+      type: String,
+      default: "var(--color-white)",
+    },
   },
   emits: ["first", "previous", "next", "last"],
 };

diff --git a/src/BIMDataComponents/BIMDataNavigation/_BIMDataNavigation.scss b/src/BIMDataComponents/BIMDataNavigation/_BIMDataNavigation.scss
@@ -4,7 +4,6 @@
   height: 38px;
   justify-content: center;
   align-items: center;
-  background-color: var(--color-white);
   &__item {
     padding: 6px 2px;
 

diff --git a/src/BIMDataComponents/BIMDataPaginatedList/BIMDataPaginatedList.vue b/src/BIMDataComponents/BIMDataPaginatedList/BIMDataPaginatedList.vue
@@ -24,6 +24,10 @@
         @pagechanged="onPageChange"
         :totalPages="totalPages"
         :perPage="perPage"
+        :first="first"
+        :last="last"
+        :numberDataElements="numberDataElements"
+        :backgroundColor="backgroundColor"
       />
     </div>
   </div>
@@ -57,6 +61,22 @@ export default {
       type: Boolean,
       default: false,
     },
+    first: {
+      type: Boolean,
+      default: true,
+    },
+    last: {
+      type: Boolean,
+      default: true,
+    },
+    numberDataElements: {
+      type: Boolean,
+      default: true,
+    },
+    backgroundColor: {
+      type: String,
+      default: "var(--color-white)",
+    },
   },
   emits: ["element-click"],
   data() {

diff --git a/src/BIMDataComponents/BIMDataPagination/BIMDataPagination.vue b/src/BIMDataComponents/BIMDataPagination/BIMDataPagination.vue
@@ -9,8 +9,9 @@
     :nextDisabled="isLastPage"
     :lastDisabled="isLastPage"
     class="bimdata-pagination"
+    :backgroundColor="backgroundColor"
   >
-    <template #left>
+    <template #left v-if="numberDataElements">
       {{ firstIndex }} - {{ lastIndex }} of {{ length }}
     </template>
     <span class="bimdata-pagination__item">
@@ -43,6 +44,14 @@ export default {
       type: Number,
       required: true,
     },
+    numberDataElements: {
+      type: Boolean,
+      default: true,
+    },
+    backgroundColor: {
+      type: String,
+      default: "var(--color-white)",
+    },
     perPage: {
       type: Number,
       required: true,