extern/heynote
1
0
Fork 0
mirror of https://github.com/heyman/heynote.git synced 2024-12-24 15:48:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

Use fuzzysearch to filter notes in NoteSelector

Browse Source
This commit is contained in:
Jonatan Heyman 2024-07-27 11:11:49 +02:00
parent d74499425e
commit a95b043b12
3 changed files with 41 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package-lock.json generated
View File

@ -11,6 +11,7 @@
"dependencies": {
"@sindresorhus/slugify": "^2.2.1",
"electron-log": "^5.0.1",
"fuzzysort": "^3.0.2",
"pinia": "^2.1.7",
"semver": "^7.6.3"
},
@ -3833,6 +3834,11 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/fuzzysort": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/fuzzysort/-/fuzzysort-3.0.2.tgz",
"integrity": "sha512-ZyahVgxvckB1Qosn7YGWLDJJp2XlyaQ2WmZeI+d0AzW0AMqVYnz5N89G6KAKa6m/LOtv+kzJn4lhDF/yVg11Cg=="
},
"node_modules/get-caller-file": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",

1
package.json
View File

@ -80,6 +80,7 @@
"dependencies": {
"@sindresorhus/slugify": "^2.2.1",
"electron-log": "^5.0.1",
"fuzzysort": "^3.0.2",
"pinia": "^2.1.7",
"semver": "^7.6.3"
}

40
src/components/NoteSelector.vue
View File

@ -1,4 +1,6 @@
<script>
import fuzzysort from 'fuzzysort'
import { mapState, mapActions } from 'pinia'
import { toRaw } from 'vue';
import { useNotesStore } from "../stores/notes-store"
@ -61,9 +63,21 @@
},
filteredItems() {
return this.orderedItems.filter((lang) => {
return lang.name.toLowerCase().indexOf(this.filter.toLowerCase()) !== -1
})
if (this.filter === "") {
return this.orderedItems
} else {
const searchResults = fuzzysort.go(this.filter, this.items, {
keys: ["name", "folder"],
})
return searchResults.map((result) => {
const obj = {...result.obj}
const nameHighlight = result[0].highlight("<b>", "</b>")
const folderHighlight = result[1].highlight("<b>", "</b>")
obj.name = nameHighlight !== "" ? nameHighlight : obj.name
obj.folder = folderHighlight !== "" ? folderHighlight : obj.folder
return obj
})
}
},
},
@ -74,7 +88,11 @@
onKeydown(event) {
if (event.key === "ArrowDown") {
this.selected = Math.min(this.selected + 1, this.filteredItems.length - 1)
if (this.selected === this.filteredItems.length - 1) {
this.selected = 0
} else {
this.selected = Math.min(this.selected + 1, this.filteredItems.length - 1)
}
event.preventDefault()
if (this.selected === this.filteredItems.length - 1) {
this.$refs.container.scrollIntoView({block: "end"})
@ -83,7 +101,11 @@
}
} else if (event.key === "ArrowUp") {
this.selected = Math.max(this.selected - 1, 0)
if (this.selected === 0) {
this.selected = this.filteredItems.length - 1
} else {
this.selected = Math.max(this.selected - 1, 0)
}
event.preventDefault()
if (this.selected === 0) {
this.$refs.container.scrollIntoView({block: "start"})
@ -143,8 +165,8 @@
@click="selectItem(item.path)"
ref="item"
>
<span class="name">{{ item.name }}</span>
<span class="path">{{ item.folder }}</span>
<span class="name" v-html="item.name" />
<span class="path" v-html="item.folder" />
</li>
</ul>
</form>
@ -231,6 +253,8 @@
overflow: hidden
text-overflow: ellipsis
text-wrap: nowrap
::v-deep b
font-weight: 700
.path
opacity: 0.6
font-size: 12px
@ -238,4 +262,6 @@
overflow: hidden
text-overflow: ellipsis
text-wrap: nowrap
::v-deep b
font-weight: 700
</style>