42 lines
773 B
Vue
42 lines
773 B
Vue
<script setup lang="ts">
|
|
import { ref, watch } from 'vue'
|
|
|
|
interface Props {
|
|
modelValue?: string | null
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), { modelValue: null })
|
|
const emit = defineEmits<{ 'update:modelValue': [value: string | null] }>()
|
|
|
|
const text = ref(props.modelValue)
|
|
|
|
watch(
|
|
() => props.modelValue,
|
|
(value) => {
|
|
text.value = value
|
|
},
|
|
)
|
|
|
|
function onSearch() {
|
|
emit('update:modelValue', text.value || null)
|
|
}
|
|
|
|
function onClear() {
|
|
text.value = null
|
|
emit('update:modelValue', null)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<v-text-field
|
|
v-model="text"
|
|
clearable
|
|
prepend-inner-icon="mdi-text"
|
|
placeholder="Search..."
|
|
@keydown.enter.prevent="onSearch"
|
|
@click:clear="onClear"
|
|
/>
|
|
</template>
|
|
|
|
<style scoped lang="scss"></style>
|