Update notes page to use element plus

components/card/MarkdownRenderer.vue

@@ -7,7 +7,7 @@ const parsedMarkdown = computed(() => {
 
 <template>
 	<div
-		class="scrollbar-hidden flex h-full min-h-screen w-full flex-col items-center overflow-y-scroll bg-secondary px-12 py-4">
+		class="scrollbar-hidden flex h-full min-h-screen w-full flex-col items-center overflow-y-scroll px-12 py-4">
 		<div
 			class="scrollbar-hidden h-full max-h-full w-full"
 			v-html="parsedMarkdown">

pages/notes/[id].vue

@@ -1,33 +1,33 @@
 <template>
-    <NuxtLayout name="edit">
+	<NuxtLayout name="edit">
-        <template #content>
+		<template #content>
-            <div class="mb-2 flex w-full">
+			<div class="mb-2 flex w-full">
-                <input type="text" v-model="note.title" placeholder="untitled" @change="submit()" />
+				<el-input
-            </div>
+					v-model="note.title"
-            <div class="sticky top-0 flex w-full justify-between">
+					placeholder="untitled"
-                <div @click="toggleComp('text')" class="w-1/2 bg-lightgray p-2 text-center text-xl"
+					@change="submit()" />
-                    :class="{ 'bg-secondary': comp === 'text' }">
+			</div>
-                    Text
+			<el-tabs type="border-card">
-                </div>
+				<el-tab-pane label="Text">
-                <div @click="toggleComp('md')" class="w-1/2 bg-lightgray p-2 text-center text-xl"
+					<el-input
-                    :class="{ 'bg-secondary': comp === 'md' }">
+						v-model="input"
-                    Markdown
+						:autosize="{ minRows: 40 }"
-                </div>
+						type="textarea"
-            </div>
+						placeholder="Please input" />
-            <div class="flex h-full w-full flex-col">
+				</el-tab-pane>
-                <textarea ref="noteTextArea" v-show="comp === 'text'"
+				<el-tab-pane label="Markdown">
-                    class="min-h-screen w-full flex-grow resize-none border-none bg-secondary p-4 outline-none placeholder:text-zinc-700 focus:outline-none"
+					<CardMarkdownRenderer
-                    v-model="input" @change="submit()">
+						:content="note.description"
-				</textarea>
+						:state="'description'" />
-                <CardMarkdownRenderer v-show="comp === 'md'" :content="note.description" :state="'description'" />
+				</el-tab-pane>
-            </div>
+			</el-tabs>
-        </template>
+		</template>
-    </NuxtLayout>
+	</NuxtLayout>
 </template>
 
 <script setup lang="ts">
 definePageMeta({
-    middleware: ['auth'],
+	middleware: ['auth'],
 })
 import 'highlight.js/styles/github-dark-dimmed.css'
 
@@ -43,58 +43,66 @@ const comp = ref<Mode>('text')
 const { textarea: noteTextArea, input } = useTextareaAutosize()
 
 const toggleComp = (name: Mode) => {
-    comp.value = name
+	comp.value = name
 }
 
 const { refresh } = await useFetch('/api/note', {
-    method: 'GET',
+	method: 'GET',
-    query: {
+	query: {
-        id: route.params.id,
+		id: route.params.id,
-    },
+	},
-    onResponse({ response }) {
+	onResponse({ response }) {
-        console.log('Response: ', response)
+		console.log('Response: ', response)
-        if (response.status === 500) {
+		if (response.status === 500) {
-            console.log(`Error: ${response._data.message}`)
+			console.log(`Error: ${response._data.message}`)
-            router.push('/notes')
+			router.push('/notes')
-            return
+			return
-        }
+		}
-        note.value.title = response._data.note.title
+		note.value.title = response._data.note.title
-        note.value.description = response._data.note.description
+		note.value.description = response._data.note.description
-        input.value = note.value.description
+		input.value = note.value.description
-    },
+	},
 })
 
 const submitTimeout = ref()
 
 const submit = async () => {
-    isSubmitting.value = true
+	isSubmitting.value = true
 
-    if (submitTimeout.value) clearTimeout(submitTimeout.value)
+	if (submitTimeout.value) clearTimeout(submitTimeout.value)
 
-    submitTimeout.value = setTimeout(async () => {
+	submitTimeout.value = setTimeout(async () => {
-        await submitNote(note.value, route.params.id)
+		await submitNote(note.value, route.params.id)
-        isSubmitting.value = false
+		isSubmitting.value = false
-    }, 1000)
+	}, 1000)
 }
 
 const remove = async () => {
-    isDeleting.value = true
+	isDeleting.value = true
 
-    await deleteNote(route.params.id)
+	await deleteNote(route.params.id)
 
-    isDeleting.value = false
+	isDeleting.value = false
 }
 
 onMounted(() => {
-    isLoading.value = true
+	isLoading.value = true
-    refresh()
+	refresh()
-    isLoading.value = false
+	isLoading.value = false
 })
 
 watch(
-    () => input.value,
+	() => input.value,
-    () => {
+	() => {
-        note.value.description = input.value
+		note.value.description = input.value
-    }
+	}
 )
 </script>
+
+<style scoped>
+:deep(.el-tabs__header) {
+	position: sticky;
+	top: 0;
+	z-index: 100;
+}
+</style>