File size: 1,055 Bytes
8059bf0 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <template>
<div class="relative w-full">
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
<Icon name="search" size="md" class="text-gray-400" />
</div>
<input
:value="modelValue"
type="text"
class="input pl-10"
:placeholder="placeholder"
@input="handleInput"
/>
</div>
</template>
<script setup lang="ts">
import { useDebounceFn } from '@vueuse/core'
import Icon from '@/components/icons/Icon.vue'
const props = withDefaults(defineProps<{
modelValue: string
placeholder?: string
debounceMs?: number
}>(), {
placeholder: 'Search...',
debounceMs: 300
})
const emit = defineEmits<{
(e: 'update:modelValue', value: string): void
(e: 'search', value: string): void
}>()
const debouncedEmitSearch = useDebounceFn((value: string) => {
emit('search', value)
}, props.debounceMs)
const handleInput = (event: Event) => {
const value = (event.target as HTMLInputElement).value
emit('update:modelValue', value)
debouncedEmitSearch(value)
}
</script>
|