mirror of
https://github.com/Bubka/2FAuth.git
synced 2024-11-25 01:34:15 +01:00
45 lines
1.4 KiB
Vue
45 lines
1.4 KiB
Vue
|
<script setup>
|
||
|
|
const props = defineProps({
|
||
|
|
keyword: String
|
||
|
|
})
|
||
|
|
const searchInput = ref(null)
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
document.addEventListener('keydown', keyListener)
|
||
|
|
})
|
||
|
|
|
||
|
|
onUnmounted(() => {
|
||
|
|
document.removeEventListener('keydown', keyListener)
|
||
|
|
})
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Attach an event listen for ctrl+F
|
||
|
|
*/
|
||
|
|
function keyListener(e) {
|
||
|
|
if (e.key === "f" && (e.ctrlKey || e.metaKey)) {
|
||
|
|
e.preventDefault();
|
||
|
|
searchInput.value?.focus()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div role="search" class="field">
|
||
|
|
<div class="control has-icons-right">
|
||
|
|
<input
|
||
|
|
ref="searchInput"
|
||
|
|
id="txtSearch"
|
||
|
|
type="search"
|
||
|
|
tabindex="1"
|
||
|
|
:aria-label="$t('commons.search')"
|
||
|
|
:title="$t('commons.search')"
|
||
|
|
class="input is-rounded is-search"
|
||
|
|
:value="keyword"
|
||
|
|
v-on:keyup="$emit('update:keyword', $event.target.value)">
|
||
|
|
<span class="icon is-small is-right">
|
||
|
|
<button v-if="keyword != ''" id="btnClearSearch" tabindex="1" :title="$t('commons.clear_search')" class="clear-selection delete" @click="$emit('update:keyword','')"></button>
|
||
|
|
<FontAwesomeIcon v-else :icon="['fas', 'search']" />
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|