From fb43832911ad95e9eb25cce1b9d5bc99bb8385d6 Mon Sep 17 00:00:00 2001
From: TZGyn <ca538901d@mozmail.com>
Date: Sun, 12 Feb 2023 16:51:27 +0800
Subject: [PATCH] feature: options for each note in notes index

---
 components/card/Note.vue    | 27 ++++++++++++++++++++-------
 components/card/Options.vue | 13 +++++++++++++
 2 files changed, 33 insertions(+), 7 deletions(-)
 create mode 100644 components/card/Options.vue

diff --git a/components/card/Note.vue b/components/card/Note.vue
index 50362e4..55f4acd 100644
--- a/components/card/Note.vue
+++ b/components/card/Note.vue
@@ -7,12 +7,25 @@
 			<div class="w-full text-center text-2xl font-bold">
 				{{ props.title }}
 			</div>
-
-			<ElementButton @click.stop="toggleOptions()">
-				<Icon
-					class="invisible group-hover/note:visible"
-					name="fa6-solid:ellipsis-vertical" />
-			</ElementButton>
+			<div class="flex flex-col">
+				<ElementButton @click.stop="toggleOptions()">
+					<Icon name="fa6-solid:ellipsis-vertical" />
+				</ElementButton>
+				<div
+					class="relative"
+					v-auto-animate>
+					<div
+						v-if="showOptions"
+						@click="toggleOptions()">
+						<div
+							class="bg-secondary border-lightgray absolute right-0 top-0 flex h-fit w-64 flex-col border">
+							<CardOptions
+								name="View Note"
+								@click.stop="noteDetail(props.uuid)" />
+						</div>
+					</div>
+				</div>
+			</div>
 		</div>
 		<div
 			v-if="showDetail"
@@ -42,7 +55,7 @@
 		showDetail.value = !showDetail.value;
 	};
 
-	const noteDetail = (id: string | number) => {
+	const noteDetail = (id: string) => {
 		navigateTo(`/notes/${id}`);
 	};
 </script>
diff --git a/components/card/Options.vue b/components/card/Options.vue
new file mode 100644
index 0000000..3cbcd43
--- /dev/null
+++ b/components/card/Options.vue
@@ -0,0 +1,13 @@
+<template>
+	<div class="hover:bg-lightgray flex h-12 w-full items-center p-4">
+		{{ props.name }}
+	</div>
+</template>
+
+<script setup lang="ts">
+	interface Props {
+		name: string;
+	}
+
+	const props = defineProps<Props>();
+</script>