47 lines
902 B
Vue
47 lines
902 B
Vue
 
|
<script setup lang="ts">
|
||
|
|
defineProps<{
|
||
|
|
modelValue?: string
|
||
|
|
placeholder?: string
|
||
|
|
}>()
|
||
|
|
|
||
|
|
defineEmits<{
|
||
|
|
'update:modelValue': [value: string]
|
||
|
|
}>()
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="search-field">
|
||
|
|
<input
|
||
|
|
class="search-field__input"
|
||
|
|
type="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>
|