listview component

src/components/Note/Autocomplete.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { notes, findNotesByByTitle, activeNote } from '@/composables/useNotes'
+
+const props = defineProps<{
+  autocompleteText: string
+}>()
+
+const emit = defineEmits<{
+  createLink: [title: string]
+}>()
+
+const results = computed<Note[]>(() => {
+  return (
+    props.autocompleteText ? findNotesByByTitle(props.autocompleteText) : notes.value
+  ).filter((note) => note.id !== activeNote.value?.id)
+})
+
+const activeResult = ref<Note>()
+
+const changeActiveResult = (direction: number) => {
+  const index = results.value.findIndex((note) => note.id === activeResult.value?.id)
+  const newIndex =
+    index + direction < results.value.length
+      ? index + direction >= -1
+        ? index + direction
+        : results.value.length - 1
+      : -1
+  activeResult.value = newIndex >= 0 ? results.value[newIndex] : undefined
+}
+
+const handleKeypress = (event: { [key: string]: number }) => {
+  const keyCode = event.keyCode
+  const keyCodes = {
+    cycle: [38, 40],
+    confirm: [13],
+  }
+  if (keyCodes.cycle.includes(keyCode)) {
+    const direction = keyCode === 38 ? -1 : 1
+    changeActiveResult(direction)
+  } else if (keyCodes.confirm.includes(keyCode)) {
+    const contextedLink = activeResult.value
+      ? activeResult.value.title
+      : props.autocompleteText
+    emit('createLink', contextedLink)
+  }
+}
+defineExpose({ handleKeypress })
+</script>
+<template>
+  <ul
+    tabindex="0"
+    class="menu rounded-md border-[1px] bg-base-100 p-2 text-[0.875rem] text-black shadow-md"
+  >
+    <li class="flex flex-row" @click="emit('createLink', props.autocompleteText)">
+      <a class="flex-grow px-2 py-1" :class="!activeResult && 'active'">
+        <span class="flex-grow">{{ props.autocompleteText }}</span>
+        <i class="fas fa-plus-circle ml-auto text-white" />
+      </a>
+    </li>
+    <SearchResult
+      v-for="result in results"
+      :result="result"
+      :active-result="activeResult"
+      @go-to-note="emit('createLink', result.title)"
+    />
+  </ul>
+</template>

src/components/Note/NoteEditor.vue

@@ -14,7 +14,7 @@ import AutoformatPlugin from '@ckeditor/ckeditor5-autoformat/src/autoformat'
 import ContextedPlugin from '@/ckeditor/ContextedPlugin'
 import { mdToHtml, htmlToMd } from '@/utils/markdown'
 import { getNoteByTitle, setActiveNote, addNote } from '@/composables/useNotes'
-import Autocomplete from '@/components/Autocomplete.vue'
+import Autocomplete from '@/components/Note/Autocomplete.vue'
 
 const props = defineProps<{ note: Note }>()