From 5d68e24396fc469abae2ffe2bf5010381c60ce60 Mon Sep 17 00:00:00 2001
From: TZGyn <ca538901d@mozmail.com>
Date: Sun, 12 Feb 2023 17:58:50 +0800
Subject: [PATCH] update: note card onClickOutside for context menu

---
 components/card/Note.vue | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/components/card/Note.vue b/components/card/Note.vue
index 037928b..1411e29 100644
--- a/components/card/Note.vue
+++ b/components/card/Note.vue
@@ -11,12 +11,10 @@
 				<ElementButton @click.stop="toggleOptions()">
 					<Icon name="fa6-solid:ellipsis-vertical" />
 				</ElementButton>
-				<div
-					class="relative"
-					v-auto-animate>
+				<div class="relative">
 					<div
-						v-if="showOptions"
-						@click="toggleOptions()">
+						ref="options"
+						v-if="showOptions">
 						<div
 							class="bg-secondary border-lightgray absolute right-0 top-0 z-50 flex h-fit w-64 flex-col border">
 							<CardOptions
@@ -47,6 +45,8 @@
 	const showDetail = ref<boolean>(false);
 	const showOptions = ref<boolean>(false);
 
+	const options = ref();
+
 	const toggleOptions = () => {
 		showOptions.value = !showOptions.value;
 	};
@@ -58,4 +58,8 @@
 	const noteDetail = (id: string) => {
 		navigateTo(`/notes/${id}`);
 	};
+
+	onClickOutside(options, (event) => {
+		toggleOptions();
+	});
 </script>