From 891a427820ec621093920fe7304b3cfc1453c899 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: Wed, 22 Jan 2025 08:04:47 +0500
Subject: [PATCH] feat: component 'Paginator'

---
 src/common/interfaces/componentsProps.ts   |  2 ++
 src/components/Paginator/Paginator.vue     | 21 +++++++++++++++++++--
 src/components/Paginator/PaginatorItem.vue | 20 ++++++++++----------
 3 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/src/common/interfaces/componentsProps.ts b/src/common/interfaces/componentsProps.ts
index 689ac68..48ee7d8 100644
--- a/src/common/interfaces/componentsProps.ts
+++ b/src/common/interfaces/componentsProps.ts
@@ -18,10 +18,12 @@ import type {
   ISelectOption,
   ISliderOptions,
   ITableColumn,
+  ITableItem,
   ITreeItem,
 } from '@interfaces/componentsProp';
 
 export interface ITableProps {
+  data?: ITableItem[][];
   columns: ITableColumn[];
   multipleSort?: boolean;
   gap?: string;
diff --git a/src/components/Paginator/Paginator.vue b/src/components/Paginator/Paginator.vue
index 1080535..058a818 100644
--- a/src/components/Paginator/Paginator.vue
+++ b/src/components/Paginator/Paginator.vue
@@ -67,16 +67,30 @@ watch(perPage, (cur, prev) => {
 
 <template>
   <section class="container">
-    <PaginatorItem @click="current = 1" :color="color" :disable="isStartDisabled" class="paginatorItem">
+    <PaginatorItem
+      @click="current = 1"
+      :textColor="textColor"
+      :color="color"
+      :disable="isStartDisabled"
+      class="paginatorItem"
+    >
       <ArrowDoubleLeftShortIcon :color="isStartDisabled ? '#aaa' : textColor" :size="iconSize" />
     </PaginatorItem>
-    <PaginatorItem @click="current--" :color="color" :disable="isStartDisabled" class="paginatorItem">
+    <PaginatorItem
+      @click="current--"
+      :textColor="textColor"
+      :color="color"
+      :disable="isStartDisabled"
+      class="paginatorItem"
+    >
       <ArrowLeftShortIcon :color="isStartDisabled ? '#aaa' : textColor" :size="iconSize" />
     </PaginatorItem>
     <PaginatorItem
       v-for="item of items"
       :key="item"
       @click="current = item"
+      :textColor="textColor"
+      :color="color"
       :active="current === item"
       class="paginatorItem"
     >
@@ -84,6 +98,7 @@ watch(perPage, (cur, prev) => {
     </PaginatorItem>
     <PaginatorItem
       @click="isEndDisabled ? '' : current++"
+      :textColor="textColor"
       :color="color"
       :disable="isEndDisabled"
       class="paginatorItem"
@@ -92,6 +107,7 @@ watch(perPage, (cur, prev) => {
     </PaginatorItem>
     <PaginatorItem
       @click="isEndDisabled ? '' : (current = itemsLength)"
+      :textColor="textColor"
       :color="color"
       :disable="isEndDisabled"
       class="paginatorItem"
@@ -102,6 +118,7 @@ watch(perPage, (cur, prev) => {
       v-if="itemsPerPageOptions"
       v-model="perPage"
       :theme="theme"
+      :darknessTheme="darknessTheme"
       :size="size"
       width="max-width"
       no-highlight
diff --git a/src/components/Paginator/PaginatorItem.vue b/src/components/Paginator/PaginatorItem.vue
index 08e4b83..1b8fe0b 100644
--- a/src/components/Paginator/PaginatorItem.vue
+++ b/src/components/Paginator/PaginatorItem.vue
@@ -2,7 +2,8 @@
 defineProps<{
   active?: boolean;
   disable?: boolean;
-  color?: string;
+  textColor: string;
+  color: string;
 }>();
 </script>
 
@@ -36,6 +37,7 @@ defineProps<{
   align-items: center;
   cursor: pointer;
   line-height: 1.2;
+  color: v-bind(textColor);
 }
 .item::before {
   content: '';
@@ -43,17 +45,15 @@ defineProps<{
   width: 100%;
   height: 100%;
   border-radius: 50%;
-  top: 0;
-  left: 0;
   z-index: -1;
   background-color: v-bind(color);
 }
-.item:hover > .bg {
-  opacity: 1;
+.item:hover > .bg:not(.active) {
+  background-color: v-bind(textColor);
+  opacity: 0.1;
 }
-.item:active > .bg {
+.item:active > .bg:not(.active) {
   opacity: 0.2;
-  background-color: black;
 }
 .bg {
   width: 120%;
@@ -63,18 +63,18 @@ defineProps<{
   left: 50%;
   transform: translate(-50%, -50%);
   padding: 10px;
-  z-index: -2;
+  z-index: -1;
   border-radius: 50%;
   background-color: transparent;
   opacity: 0;
   transition: all 0.2s ease;
 }
 .item > .active {
-  background-color: black !important;
+  background-color: v-bind(textColor) !important;
   opacity: 1;
 }
 .active + * {
-  color: white;
+  color: v-bind(color);
 }
 .disable {
   cursor: auto;
-- 
GitLab