59 lines
1.1 KiB
Vue
59 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
|
|
defineProps<{
|
|
modelValue?: string
|
|
placeholder?: string
|
|
}>()
|
|
|
|
defineEmits<{
|
|
'update:modelValue': [value: string]
|
|
}>()
|
|
|
|
const inputRef = ref<HTMLInputElement | null>(null)
|
|
|
|
function focus() {
|
|
inputRef.value?.focus()
|
|
}
|
|
|
|
defineExpose({ focus })
|
|
</script>
|
|
|
|
<template>
|
|
<div class="search-field">
|
|
<input
|
|
ref="inputRef"
|
|
class="search-field__input"
|
|
type="search"
|
|
enterkeyhint="search"
|
|
:value="modelValue"
|
|
:placeholder="placeholder"
|
|
@input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.search-field__input {
|
|
width: 100%;
|
|
height: 48px;
|
|
padding: 0 16px;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
color: var(--color-text);
|
|
font-family: inherit;
|
|
font-size: 0.9375rem;
|
|
line-height: 1.5;
|
|
transition: border-color 0.15s;
|
|
}
|
|
|
|
.search-field__input::placeholder {
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.search-field__input:focus {
|
|
outline: none;
|
|
border-color: var(--color-primary);
|
|
}
|
|
</style>
|