38 lines
1.1 KiB
Vue
38 lines
1.1 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>
|
|
import { ref, } from 'vue';
|
|
import i18next from '@/i18n/i18n.js';
|
|
export default {
|
|
setup(props, { emit, }) {
|
|
const inputQuery = ref("");
|
|
|
|
const onSearchClick = (event) => {
|
|
event.preventDefault();
|
|
emit('on-search-account-button-click', inputQuery.value);
|
|
};
|
|
|
|
const handleKeyPressOfSearch = (event) => {
|
|
if (event.key === 'Enter') {
|
|
emit('on-search-account-button-click', inputQuery.value);
|
|
}
|
|
}
|
|
|
|
return {
|
|
inputQuery,
|
|
onSearchClick,
|
|
handleKeyPressOfSearch,
|
|
i18next,
|
|
};
|
|
},
|
|
};
|
|
</script> |