Merge pull request #95 from HC200ok/feature/rowsPerPage-new-css-varaiables

Feature/rows per page new css varaiables

Author: HC200ok

package-lock.json

@@ -3,7 +3,7 @@
   "author": "HC200ok",
   "description": "A customizable and easy-to-use data table component made with Vue.js 3.x.",
   "private": false,
-  "version": "1.4.12",
+  "version": "1.4.13",
   "types": "./types/main.d.ts",
   "license": "MIT",
   "files": [

package.json

@@ -354,7 +354,7 @@ const {
   sortBy,
   sortType,
   updateServerOptionsSort,
-  emits
+  emits,
 );
 
 const {
@@ -533,6 +533,9 @@ defineExpose({
     --easy-table-footer-font-size: 12px;
     --easy-table-footer-padding: 0px 5px;
     --easy-table-footer-height: 36px;
+    /**footer-rowsPerPage**/
+    --easy-table-rows-per-page-selector-width: auto;
+    --easy-table-rows-per-page-selector-option-padding: 5px;
     /*message*/
     --easy-table-message-font-color: #212121;
     --easy-table-message-font-size: 12px;
@@ -557,4 +560,3 @@ defineExpose({
   height: v-bind(tableHeightPx);
 }
 </style>
-

src/components/DataTable.vue

@@ -103,6 +103,7 @@ const themeColor = inject('themeColor');
   min-width: 45px;
   position: relative;
   margin: 0px 10px;
+  width: var(--easy-table-rows-per-page-selector-width);
   .rows-input__wrapper {
     height: 20px;
     border-bottom: 1px solid var(--easy-table-footer-font-color);
@@ -141,7 +142,7 @@ const themeColor = inject('themeColor');
     box-shadow: 0 5px 5px -3px rgb(0 0 0 / 20%), 0 8px 10px 1px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%);
     li {
       cursor: pointer;
-      padding: 5px;
+      padding: var(--easy-table-rows-per-page-selector-option-padding);
       background-color: var(--easy-table-footer-background-color);
 
       &.selected {

src/components/RowsSelector.vue

@@ -34,6 +34,7 @@
       @click-row="showItem"
       @update-sort="updateSort"
     >
+
       <template #expand="item">
         <div style="padding: 15px">
           {{ item.name }} won championships
@@ -278,6 +279,9 @@ const updatePage = (paginationNumber: number) => {
   --easy-table-footer-padding: 0px 10px;
   --easy-table-footer-height: 40px;
 
+  --easy-table-rows-per-page-selector-width: 70px;
+  --easy-table-rows-per-page-selector-option-padding: 10px;
+
   --easy-table-scrollbar-track-color: #4c5d7a;
   --easy-table-scrollbar-color: #4c5d7a;
   --easy-table-scrollbar-corner-color: #4c5d7a;