49 lines
1.6 KiB
Vue
49 lines
1.6 KiB
Vue
<!--
|
|
Ported from legacy henza_pwa/src/components/search/SearchInput.vue.
|
|
EXISTING ISSUE, ported as-is: the debounce watcher checks `if (value)` (the
|
|
ref object itself, always truthy) instead of `if (value.value)`, so the "x"
|
|
clear icon shows after any input and never hides itself based on actual
|
|
emptiness — only the explicit clear() click correctly hides it.
|
|
-->
|
|
<template>
|
|
<div class="w-full relative">
|
|
<input
|
|
v-model="value"
|
|
class="w-full h-[44px] rounded-[5px] px-[44px] py-[10px] text-[15px] border-solid border-[1px] border-lightGray"
|
|
:placeholder="placeHolder"
|
|
@keyup.enter="onSearch"
|
|
/>
|
|
<Icon icon="vuesax-linear:search-normal-1" class="cursor-pointer absolute top-[11.82px] right-[12px] text-primary" size="25" @click="onSearch" />
|
|
<span class="absolute top-[10px] left-[12px] cursor-pointer text-primary">
|
|
<Icon icon="vuesax-linear:add" v-if="data.clear" class="ml-1 rotate-45" size="25" @click="clear" />
|
|
</span>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { reactive, ref, watch } from 'vue'
|
|
import { useDebounce } from '@vueuse/core'
|
|
import Icon from '../icon/Icon.vue'
|
|
|
|
defineProps<{ placeHolder: string }>()
|
|
const emit = defineEmits<{ (e: 'search', value: string | undefined): void }>()
|
|
const data = reactive({ clear: false })
|
|
const value = ref<string | undefined>(undefined)
|
|
|
|
const onSearch = (): void => {
|
|
emit('search', value.value)
|
|
}
|
|
const clear = (): void => {
|
|
value.value = undefined
|
|
data.clear = false
|
|
emit('search', undefined)
|
|
}
|
|
|
|
const debounced = useDebounce(value, 700)
|
|
watch(debounced, () => {
|
|
if (value) data.clear = true
|
|
else data.clear = false
|
|
onSearch()
|
|
})
|
|
</script>
|