From bc98fb7cf728e4e8705f132fdb3394d76cb7e1e2 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: Mon, 27 Jan 2025 19:34:30 +0500
Subject: [PATCH] feat: add 'handlers' prop for 'Table'

---
 src/Playground.vue                            |  9 +++++++++
 src/common/interfaces/componentsProps.ts      | 10 +++++++---
 src/components/Table/Table.vue                |  6 ++++++
 src/components/Table/components/TableCell.vue |  7 ++++---
 4 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/Playground.vue b/src/Playground.vue
index 6098fa5..f2b8e19 100644
--- a/src/Playground.vue
+++ b/src/Playground.vue
@@ -202,6 +202,15 @@ const pbValue = ref(0);
     theme="black"
     stripedRows
     editable
+    :no-editing-settings="{
+      cells: [[0, 0]],
+    }"
+    :handlers="[
+      {
+        cell: [0, 0],
+        handler: () => (visibleDrawer = true),
+      },
+    ]"
   ></Table>
   <button class="testButton" @click="visibleDrawer = !visibleDrawer">Нажми меня</button>
   <div class="hui" style="width: 500px; height: 500px; background-color: gray"></div>
diff --git a/src/common/interfaces/componentsProps.ts b/src/common/interfaces/componentsProps.ts
index 2ca28bb..341b92d 100644
--- a/src/common/interfaces/componentsProps.ts
+++ b/src/common/interfaces/componentsProps.ts
@@ -37,10 +37,14 @@ export interface ITableProps {
   darknessTextColor?: TDarkness;
   editable?: boolean;
   noEditingSettings?: {
-    columns: number[];
-    rows: number[];
-    cells: [number, number][];
+    columns?: number[];
+    rows?: number[];
+    cells?: [number, number][];
   };
+  handlers?: {
+    cell: [number, number];
+    handler?: unknown;
+  }[];
 }
 
 export interface ITLProps {
diff --git a/src/components/Table/Table.vue b/src/components/Table/Table.vue
index 8f69d34..4d59d31 100644
--- a/src/components/Table/Table.vue
+++ b/src/components/Table/Table.vue
@@ -151,10 +151,12 @@ const updateData = (newValue: Ref<unknown>, rowIndex: number, columnIndex: numbe
           <td
             v-for="(item, columnIndex) of row"
             :key="columnIndex"
+            @click="handlers?.find((i) => i.cell?.[0] === rowIndex && i.cell?.[1] === columnIndex)?.handler"
             :class="{
               leftBorder: showAllLines,
               darkRow: stripedRows && rowIndex % 2,
               noEdit: !editable || (noEditingSettings?.columns && ~noEditingSettings.columns?.indexOf(columnIndex)),
+              pointer: handlers?.find((i) => i.cell?.[0] === rowIndex && i.cell?.[1] === columnIndex),
             }"
             :style="`padding: calc(${initGap} / 2 + ${additionalHeightFromSize}) ${initGap}`"
           >
@@ -169,6 +171,7 @@ const updateData = (newValue: Ref<unknown>, rowIndex: number, columnIndex: numbe
               :noEditingSettings="noEditingSettings?.cells"
               :fontSize="fontSize"
               :knobWidth="knobWidth"
+              :noEdit="!!handlers?.find((i) => i.cell?.[0] === rowIndex && i.cell?.[1] === columnIndex)"
               @updateData="updateData"
             />
           </td>
@@ -219,4 +222,7 @@ tr::after {
 .noEdit {
   pointer-events: none;
 }
+.pointer {
+  cursor: pointer;
+}
 </style>
diff --git a/src/components/Table/components/TableCell.vue b/src/components/Table/components/TableCell.vue
index 1c89050..eda94c2 100644
--- a/src/components/Table/components/TableCell.vue
+++ b/src/components/Table/components/TableCell.vue
@@ -15,9 +15,10 @@ interface IProps {
   columnIndex: number;
   center: boolean | undefined;
   editable: boolean;
-  noEditingSettings: [number, number][] | undefined;
   fontSize: string;
   knobWidth: string;
+  noEditingSettings: [number, number][] | undefined;
+  noEdit: boolean;
 }
 defineProps<IProps>();
 defineEmits(['updateData']);
@@ -30,9 +31,9 @@ defineEmits(['updateData']);
       {
         cellCenter: center,
         noEdit:
+          noEdit ||
           !editable ||
-          (noEditingSettings &&
-            noEditingSettings.find((i: [number, number]) => i[0] === rowIndex && i[1] === columnIndex)),
+          noEditingSettings?.find((i: [number, number]) => i[0] === rowIndex && i[1] === columnIndex),
       },
     ]"
   >
-- 
GitLab