From 871cf5da4e2b2fd2112c82254f588075f7a8902b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=9C=D0=B0?=
 =?UTF-8?q?=D0=BB=D1=8E=D0=B3=D0=B8=D0=BD?= <d.malygin@iqdev.digital>
Date: Tue, 28 Jan 2025 19:34:15 +0500
Subject: [PATCH] feat: start to add 'Paginator' for 'Table'

---
 src/Playground.vue                            |  2 +-
 src/common/interfaces/componentsProps.ts      |  1 +
 src/components/Paginator/Paginator.vue        |  4 ++++
 src/components/Paginator/PaginatorItem.vue    |  2 +-
 src/components/Table/Table.vue                | 16 +++++++++++++++-
 src/components/Table/components/TableCell.vue |  1 +
 6 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/Playground.vue b/src/Playground.vue
index f2b8e19..572f7bb 100644
--- a/src/Playground.vue
+++ b/src/Playground.vue
@@ -137,7 +137,6 @@ const tableColumns: ITableColumn[] = [
     type: 'progressBar',
     options: {
       theme: 'red',
-      width: '150px',
       size: 'small',
     },
   },
@@ -202,6 +201,7 @@ const pbValue = ref(0);
     theme="black"
     stripedRows
     editable
+    paginator
     :no-editing-settings="{
       cells: [[0, 0]],
     }"
diff --git a/src/common/interfaces/componentsProps.ts b/src/common/interfaces/componentsProps.ts
index 150309a..da8caaf 100644
--- a/src/common/interfaces/componentsProps.ts
+++ b/src/common/interfaces/componentsProps.ts
@@ -36,6 +36,7 @@ export interface ITableProps {
   darknessTheme?: TDarkness;
   darknessTextColor?: TDarkness;
   paginator?: boolean;
+  paginatorOptions?: IPaginatorProps;
   editable?: boolean;
   noEditingSettings?: {
     columns?: number[];
diff --git a/src/components/Paginator/Paginator.vue b/src/components/Paginator/Paginator.vue
index 058a818..0f0126d 100644
--- a/src/components/Paginator/Paginator.vue
+++ b/src/components/Paginator/Paginator.vue
@@ -133,6 +133,8 @@ watch(perPage, (cur, prev) => {
   display: flex;
   gap: calc(v-bind(fontSize) * 0.25);
   align-items: center;
+  width: max-content;
+  height: calc(v-bind(itemSize) * 1.2);
 }
 .paginatorItem {
   width: v-bind(itemSize);
@@ -142,5 +144,7 @@ watch(perPage, (cur, prev) => {
 .digital {
   font-size: v-bind(fontSize);
   font-weight: bold;
+  position: relative;
+  z-index: 100;
 }
 </style>
diff --git a/src/components/Paginator/PaginatorItem.vue b/src/components/Paginator/PaginatorItem.vue
index 1b8fe0b..e44b2ca 100644
--- a/src/components/Paginator/PaginatorItem.vue
+++ b/src/components/Paginator/PaginatorItem.vue
@@ -63,7 +63,7 @@ defineProps<{
   left: 50%;
   transform: translate(-50%, -50%);
   padding: 10px;
-  z-index: -1;
+  z-index: 5;
   border-radius: 50%;
   background-color: transparent;
   opacity: 0;
diff --git a/src/components/Table/Table.vue b/src/components/Table/Table.vue
index e85cf5f..922e657 100644
--- a/src/components/Table/Table.vue
+++ b/src/components/Table/Table.vue
@@ -5,6 +5,7 @@ import { convertThemeToColor, convertThemeToSecondaryColor, convertThemeToTextCo
 import { calcAdditionalHeight, calcGap, calcRows } from '@components/Table/helpers';
 import TableHeader from '@components/Table/components/TableHeader.vue';
 import TableCell from '@components/Table/components/TableCell.vue';
+import Paginator from '@components/Paginator/Paginator.vue';
 
 const props = withDefaults(defineProps<ITableProps>(), {
   size: 'normal',
@@ -17,6 +18,7 @@ const data = defineModel() as Ref<unknown[][]>;
 const emit = defineEmits(['updateData']);
 
 const table = ref();
+const currentPage = ref(1);
 const columns = ref(props.columns);
 const sortStateActive = ref<[number, string] | []>([]);
 const indexColumnToFilter = ref<number>(0);
@@ -105,7 +107,7 @@ const updateData = (newValue: Ref<unknown>, rowIndex: number, columnIndex: numbe
 </script>
 
 <template>
-  <div>
+  <div :style="`background-color: ${themeColor}; color: ${color}`">
     <table
       :class="{
         tableLines: showAllLines,
@@ -178,6 +180,14 @@ const updateData = (newValue: Ref<unknown>, rowIndex: number, columnIndex: numbe
         </tr>
       </tbody>
     </table>
+    <Paginator
+      v-show="paginator"
+      v-model="currentPage"
+      :theme="theme"
+      :total="data.length"
+      v-bind="paginatorOptions"
+      class="paginator"
+    />
   </div>
 </template>
 
@@ -213,6 +223,10 @@ tr::after {
   justify-content: center;
   align-items: center;
 }
+.paginator {
+  display: block;
+  margin: 0 auto;
+}
 .leftBorder {
   border-left: 1px solid v-bind(secondaryColor);
 }
diff --git a/src/components/Table/components/TableCell.vue b/src/components/Table/components/TableCell.vue
index 48eb2a7..7f5ddca 100644
--- a/src/components/Table/components/TableCell.vue
+++ b/src/components/Table/components/TableCell.vue
@@ -101,6 +101,7 @@ input::-webkit-inner-spin-button {
   margin: 0;
 }
 input[type='number'] {
+  appearance: textfield;
   -moz-appearance: textfield;
 }
 </style>
-- 
GitLab