extern/2FAuth
1
0
Fork 0
mirror of https://github.com/Bubka/2FAuth.git synced 2025-06-25 14:32:09 +02:00
Code Issues Packages Projects Releases Wiki Activity

Make the search feature act as soon as the user starts typing - Closes #441

Browse Source
This commit is contained in:
Bubka 2025-02-25 15:45:15 +01:00
parent 11db01e889
commit 530b1a5cf6
1 changed files with 35 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
resources/js/components/SearchBox.vue
View File

@ -1,6 +1,6 @@
<script setup>
const keyword = defineModel('keyword')
const props = defineProps({
keyword: String,
hasNoBackground: {
type: Boolean,
default: false
@ -10,28 +10,56 @@
const searchInput = ref(null)
onMounted(() => {
document.addEventListener('keydown', keyListener)
document.addEventListener('keydown', ctrlFHandler)
document.addEventListener('keypress', anyPrintableKeyHandler)
})
onUnmounted(() => {
document.removeEventListener('keydown', keyListener)
document.removeEventListener('keydown', ctrlFHandler)
document.removeEventListener('keypress', anyPrintableKeyHandler)
})
/**
* Attach an event listen for ctrl+F
*/
function keyListener(e) {
function ctrlFHandler(e) {
if (e.key === "f" && (e.ctrlKey || e.metaKey)) {
e.preventDefault();
e.preventDefault()
searchInput.value?.focus()
}
}
/**
* Clear the search field
*/
function clearSearch() {
keyword.value = ''
}
/**
* Attach an event listen for any key press to automatically focus on search
* without having to ctrl+F
*/
function anyPrintableKeyHandler(e) {
if (e.key === 'Enter') {
return
}
keyword.value = e.key
searchInput.value?.setSelectionRange(1, 1)
searchInput.value?.focus()
e.preventDefault()
}
</script>
<template>
<div role="search" class="field">
<div class="control has-icons-right">
<input
v-model="keyword"
@keyup.esc.prevent="(event) => { clearSearch(); event.target.blur() }"
@keyup.enter.prevent="(event) => event.target.blur()"
@keypress.stop
ref="searchInput"
id="txtSearch"
type="search"
@ -40,11 +68,9 @@
:title="$t('commons.search')"
:placeholder="placeholder"
class="input is-rounded is-search"
:class="{ 'has-no-background': hasNoBackground }"
:value="keyword"
v-on:keyup="$emit('update:keyword', $event.target.value)">
:class="{ 'has-no-background': hasNoBackground }">
<span class="icon is-small is-right">
<button type="button" v-if="keyword != ''" id="btnClearSearch" tabindex="1" :title="$t('commons.clear_search')" class="clear-selection delete" @click="$emit('update:keyword','')"></button>
<button type="button" v-if="keyword != ''" id="btnClearSearch" tabindex="1" :title="$t('commons.clear_search')" class="clear-selection delete" @click="clearSearch"></button>
<FontAwesomeIcon v-else :icon="['fas', 'search']" />
</span>
</div>