blob: 54c16f353849e5911a828d998977bb8c7e1e3d3f (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
/*!
* SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
* SPDX-License-Identifier: AGPL-3.0-or-later
*/
import { registerFileListFilter, unregisterFileListFilter } from '@nextcloud/files'
import { watchThrottled } from '@vueuse/core'
import { onMounted, onUnmounted, ref } from 'vue'
import { FilenameFilter } from '../filters/FilenameFilter'
/**
* This is for the `Navigation` component to provide a filename filter
*/
export function useFilenameFilter() {
const searchQuery = ref('')
const filenameFilter = new FilenameFilter()
/**
* Updating the search query ref from the filter
* @param event The update:query event
*/
function updateQuery(event: CustomEvent) {
if (event.type === 'update:query') {
searchQuery.value = event.detail
event.stopPropagation()
}
}
onMounted(() => {
filenameFilter.addEventListener('update:query', updateQuery)
registerFileListFilter(filenameFilter)
})
onUnmounted(() => {
filenameFilter.removeEventListener('update:query', updateQuery)
unregisterFileListFilter(filenameFilter.id)
})
// Update the query on the filter, but throttle to max. every 800ms
// This will debounce the filter refresh
watchThrottled(searchQuery, () => {
filenameFilter.updateQuery(searchQuery.value)
}, { throttle: 800 })
return {
searchQuery,
}
}
|
