mirror of
https://gitee.com/wanwujie/sub2api
synced 2026-04-08 09:10:20 +08:00
99308ab4fb
- Standardized table loading logic with enhanced useTableLoader. - Unified form submission patterns via new useForm composable. - Extracted common UI components: SearchInput and StatusBadge. - Centralized common interface definitions in types/index.ts. - Achieved TypeScript zero-error status across refactored files. - Greatly improved code reusability and maintainability.
55 lines
1.3 KiB
Vue
55 lines
1.3 KiB
Vue
<template>
|
|
<div class="relative w-full">
|
|
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
|
|
<svg
|
|
class="h-5 w-5 text-gray-400"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1.5"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<input
|
|
:value="modelValue"
|
|
type="text"
|
|
class="input pl-10"
|
|
:placeholder="placeholder"
|
|
@input="handleInput"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useDebounceFn } from '@vueuse/core'
|
|
|
|
const props = withDefaults(defineProps<{
|
|
modelValue: string
|
|
placeholder?: string
|
|
debounceMs?: number
|
|
}>(), {
|
|
placeholder: 'Search...',
|
|
debounceMs: 300
|
|
})
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'update:modelValue', value: string): void
|
|
(e: 'search', value: string): void
|
|
}>()
|
|
|
|
const debouncedEmitSearch = useDebounceFn((value: string) => {
|
|
emit('search', value)
|
|
}, props.debounceMs)
|
|
|
|
const handleInput = (event: Event) => {
|
|
const value = (event.target as HTMLInputElement).value
|
|
emit('update:modelValue', value)
|
|
debouncedEmitSearch(value)
|
|
}
|
|
</script>
|