From e1d91c3b32aa9a0ca1f6a56c3d9d2f1ff4beca4d Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Fri, 15 Dec 2023 09:48:26 +0700
Subject: [PATCH] fix: when click and drag outside should not close

---
 Services/client/src/lib/directives.ts | 30 ++++++++++++++++++++++++---
 1 file changed, 27 insertions(+), 3 deletions(-)

diff --git a/Services/client/src/lib/directives.ts b/Services/client/src/lib/directives.ts
index b0f9483..fbc4b03 100644
--- a/Services/client/src/lib/directives.ts
+++ b/Services/client/src/lib/directives.ts
@@ -2,14 +2,38 @@ import type { ObjectDirective } from 'vue'
 
 export const clickOutside = {
   beforeMount(element, binding) {
+    element.setDragging = () => {
+      !element.hasAttribute('data-dragging') &&
+        element.setAttribute('data-dragging', true)
+    }
+    element.clearDragging = () => {
+      element.removeAttribute('data-dragging')
+    }
     element.clickOutsideEvent = (e: MouseEvent) => {
-      if (!(element === e.target || element.contains(e.target))) {
+      if (
+        !(
+          element === e.target ||
+          element.contains(e.target) ||
+          element.hasAttribute('data-dragging')
+        )
+      ) {
         binding.value(e)
       }
     }
-    document.addEventListener('click', element.clickOutsideEvent)
+
+    document.addEventListener('touchstart', element.clearDragging)
+    document.addEventListener('touchmove', element.setDragging)
+    document.addEventListener('touchend', element.clickOutsideEvent)
+    document.addEventListener('mousedown', element.clearDragging)
+    document.addEventListener('mousemove', element.setDragging)
+    document.addEventListener('mouseup', element.clickOutsideEvent)
   },
   unmounted(element) {
-    document.removeEventListener('click', element.clickOutsideEvent)
+    document.removeEventListener('touchstart', element.clearDragging)
+    document.removeEventListener('touchmove', element.setDragging)
+    document.removeEventListener('touchend', element.clickOutsideEvent)
+    document.removeEventListener('mousedown', element.clearDragging)
+    document.removeEventListener('mousemove', element.setDragging)
+    document.removeEventListener('mouseup', element.clickOutsideEvent)
   },
 } satisfies ObjectDirective