50 lines
1.3 KiB
Vue
50 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import { ref, watch, computed } from 'vue'
|
|
import { notes, findNotes } from '@/composables/useNotes'
|
|
|
|
const active = ref(false)
|
|
watch(active, () => {
|
|
if (!active.value) query.value = ''
|
|
})
|
|
|
|
const query = ref('')
|
|
const results = computed<Note[]>(() => {
|
|
return query.value ? findNotes(query.value) : notes.value
|
|
})
|
|
|
|
const click = (note: Note) => {
|
|
console.log(note.title)
|
|
}
|
|
</script>
|
|
<template>
|
|
<div id="search-container" class="relative h-full flex-1">
|
|
<input
|
|
type="text"
|
|
placeholder="Search for notes"
|
|
class="h-full w-full rounded border-0 bg-[#355fd3] px-2 text-white outline-none placeholder:text-white focus:bg-white focus:text-black"
|
|
@focus="active = true"
|
|
@mousedown="active = true"
|
|
@blur="active = false"
|
|
v-model="query"
|
|
/>
|
|
<div
|
|
class="z-1000 dropdown absolute left-0 right-0 top-[100%]"
|
|
v-if="active && results.length > 0"
|
|
>
|
|
<ul
|
|
tabindex="0"
|
|
class="menu mt-1 w-full rounded-md bg-base-100 p-2 text-black shadow"
|
|
>
|
|
<li v-for="note in results">
|
|
<a
|
|
class="px-2 py-1"
|
|
@click.stop.prevent="() => click(note)"
|
|
@mousedown.prevent
|
|
>{{ note.title }}</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|