<!-- 项目搜索输入组件，统一项目列表的搜索和清空交互。 -->
<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>
