49 lines
1.5 KiB
Vue
49 lines
1.5 KiB
Vue
<template>
|
|
<div id="search_bar_container" class="flex w-[280px] h-8 px-4 items-center border-[#64748B] border-[1px] rounded-full
|
|
justify-between">
|
|
<input id="input_search" class="w-full outline-0" :placeholder="i18next.t('AcctMgmt.Search')"
|
|
v-model="inputQuery" @keypress="handleKeyPressOfSearch"
|
|
/>
|
|
<img src="@/assets/icon-search.svg" class="w-[17px] h-[17px] flex cursor-pointer" @click="onSearchClick"
|
|
alt="search"/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
// The Lucia project.
|
|
// Copyright 2024-2026 DSP, inc. All rights reserved.
|
|
// Authors:
|
|
// cindy.chang@dsp.im (Cindy Chang), 2024/5/30
|
|
// imacat.yang@dsp.im (imacat), 2023/9/23
|
|
/**
|
|
* @module components/AccountMenu/SearchBar Search input bar for
|
|
* filtering accounts, emits search query on click or Enter key.
|
|
*/
|
|
|
|
import { ref } from 'vue';
|
|
import i18next from '@/i18n/i18n.js';
|
|
|
|
const emit = defineEmits(['on-search-account-button-click']);
|
|
|
|
const inputQuery = ref("");
|
|
|
|
/**
|
|
* Emits the search query when the search icon is clicked.
|
|
* @param {Event} event - The click event.
|
|
*/
|
|
const onSearchClick = (event) => {
|
|
event.preventDefault();
|
|
emit('on-search-account-button-click', inputQuery.value);
|
|
};
|
|
|
|
/**
|
|
* Emits the search query when Enter key is pressed.
|
|
* @param {KeyboardEvent} event - The keypress event.
|
|
*/
|
|
const handleKeyPressOfSearch = (event) => {
|
|
if (event.key === 'Enter') {
|
|
emit('on-search-account-button-click', inputQuery.value);
|
|
}
|
|
};
|
|
</script>
|