88 lines
2.1 KiB
Vue
88 lines
2.1 KiB
Vue
<!-- 项目搜索输入组件，统一项目列表的搜索和清空交互。 -->
|
||
<script setup lang="ts">
|
||
import { Search, X } from "@/icons";
|
||
|
||
withDefaults(defineProps<{ modelValue: string; placeholder?: string }>(), {
|
||
placeholder: "搜索项目",
|
||
});
|
||
const emit = defineEmits<{ "update:modelValue": [value: string] }>();
|
||
</script>
|
||
|
||
<template>
|
||
<div class="project-search-field">
|
||
<Search :size="17" />
|
||
<input
|
||
:value="modelValue"
|
||
type="search"
|
||
:placeholder="placeholder"
|
||
@input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
|
||
/>
|
||
<button
|
||
v-if="modelValue"
|
||
type="button"
|
||
title="清空搜索"
|
||
@click="emit('update:modelValue', '')"
|
||
>
|
||
<X :size="16" />
|
||
</button>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.project-search-field {
|
||
width: min(380px, 100%);
|
||
height: var(--control-height-lg);
|
||
padding: 0 var(--space-xs) 0 var(--space-md);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-sm);
|
||
color: var(--web-text-tertiary);
|
||
background: var(--web-surface);
|
||
border: 1px solid var(--web-line-strong);
|
||
border-radius: var(--radius-sm);
|
||
transition:
|
||
color 0.18s,
|
||
border-color 0.18s,
|
||
box-shadow 0.18s;
|
||
}
|
||
.project-search-field:focus-within {
|
||
color: var(--web-accent-dark);
|
||
border-color: var(--web-line-accent);
|
||
box-shadow: 0 0 0 2px var(--web-search-outline);
|
||
}
|
||
.project-search-field input {
|
||
min-width: 0;
|
||
width: 100%;
|
||
color: var(--web-text);
|
||
background: transparent;
|
||
border: 0;
|
||
font-size: 14px;
|
||
outline: 0;
|
||
appearance: none;
|
||
}
|
||
.project-search-field input::-webkit-search-cancel-button {
|
||
display: none;
|
||
appearance: none;
|
||
}
|
||
.project-search-field button {
|
||
width: var(--control-height-sm);
|
||
height: var(--control-height-sm);
|
||
padding: 0;
|
||
display: grid;
|
||
place-items: center;
|
||
flex: 0 0 var(--control-height-sm);
|
||
color: var(--web-control-muted);
|
||
background: transparent;
|
||
border: 0;
|
||
border-radius: var(--radius-sm);
|
||
cursor: pointer;
|
||
transition:
|
||
color 0.18s,
|
||
background-color 0.18s;
|
||
}
|
||
.project-search-field button:hover:not(:disabled) {
|
||
color: var(--web-accent-muted);
|
||
background: var(--web-hover);
|
||
}
|
||
</style>
|