Update note card to use element plus

components/card/Note.vue

@@ -1,65 +1,64 @@
 <template>
-	<div
-		class="group/note flex w-full cursor-pointer flex-col gap-4 bg-secondary px-4 py-2"
-		v-auto-animate
-		@click="toggleDetail()">
-		<div class="flex items-center">
-			<div class="w-full text-center text-2xl font-bold">
-				{{ props.title }}
-			</div>
-			<div class="flex flex-col">
-				<ElementButton @click.stop="toggleOptions()">
-					<Icon name="fa6-solid:ellipsis-vertical" />
-				</ElementButton>
-				<div class="relative">
-					<div
-						ref="contextMenu"
-						v-if="showOptions">
-						<div
-							class="absolute right-0 top-0 z-50 flex h-fit w-64 flex-col border border-lightgray bg-secondary">
-							<CardOptions
-								name="View Note"
-								@click.stop="noteDetail(props.uuid)" />
-						</div>
-					</div>
+	<el-card>
+		<template #header>
+			<div
+				class="flex cursor-pointer items-center"
+				@click.stop="noteDetail(props.uuid)">
+				<div class="w-full text-center text-2xl font-bold">
+					{{ props.title }}
 				</div>
 			</div>
-		</div>
+		</template>
 		<div
-			v-if="showDetail"
-			class="mb-2 line-clamp-6 whitespace-pre">
-			{{ props.description }}
+			class="flex w-full cursor-pointer flex-col gap-4"
+			v-auto-animate
+			@click="toggleDetail()">
+			<div
+				v-if="showDetail"
+				class="mb-2 line-clamp-6 whitespace-pre px-4 pt-2">
+				{{ props.description }}
+			</div>
+			<div
+				class="w-full px-4 py-2 text-center text-sm hover:bg-[--el-color-primary-light-9] hover:bg-opacity-50 hover:text-[--el-color-primary]"
+				>{{ showDetail ? 'Hide Details' : 'Show Details' }}</div
+			>
 		</div>
-	</div>
+	</el-card>
 </template>
 
 <script setup lang="ts">
-	interface Props {
-		id: string | number
-		uuid: string
-		title: string
-		description: string
-	}
+interface Props {
+	id: string | number
+	uuid: string
+	title: string
+	description: string
+}
 
-	const props = defineProps<Props>()
-	const showDetail = ref<boolean>(false)
-	const showOptions = ref<boolean>(false)
+const props = defineProps<Props>()
+const showDetail = ref<boolean>(false)
+const showOptions = ref<boolean>(false)
 
-	const contextMenu = ref()
+const contextMenu = ref()
 
-	const toggleOptions = () => {
-		showOptions.value = !showOptions.value
-	}
+const toggleOptions = () => {
+	showOptions.value = !showOptions.value
+}
 
-	const toggleDetail = () => {
-		showDetail.value = !showDetail.value
-	}
+const toggleDetail = () => {
+	showDetail.value = !showDetail.value
+}
 
-	const noteDetail = (id: string) => {
-		navigateTo(`/notes/${id}`)
-	}
+const noteDetail = (id: string) => {
+	navigateTo(`/notes/${id}`)
+}
 
-	onClickOutside(contextMenu, (event) => {
-		toggleOptions()
-	})
+onClickOutside(contextMenu, (event) => {
+	toggleOptions()
+})
 </script>
+
+<style scoped>
+:deep(.el-card__body) {
+	--el-card-padding: 0;
+}
+</style>