/
githubmirror
/
halo
Обзор
Документация
Войти
/
githubmirror
/
halo
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
ui/src/components/input/SearchInput.vue
66 строк
1 KB
Ryan Wang
Upgrade FormKit to 2.1.0 (#10075)
11 июн 2026, 13:21
Не верифицирован
11 июн 2026, 13:21
753b9e4
Код
Авторство
О чём код?
<script lang="ts" setup> import { getNode, reset } from "@formkit/core"; import { IconCloseCircle } from "@halo-dev/components"; import { utils } from "@halo-dev/ui-shared"; const props = withDefaults( defineProps<{ placeholder?: string; modelValue: string; sync?: boolean; }>(), { placeholder: undefined, sync: false, } ); const emit = defineEmits<{ (event: "update:modelValue", modelValue: string): void; }>(); const id = `search-input-${utils.id.uuid()}`; function handleReset() { emit("update:modelValue", ""); reset(id); } function onKeywordChange() { const keywordNode = getNode(id); if (keywordNode) { emit("update:modelValue", keywordNode._value as string); } } function onInput(value?: unknown) { if (props.sync) { emit("update:modelValue", (value || "") as string); } } </script> <template> <FormKit :id="id" outer-class="!p-0 w-full sm:w-auto" :placeholder="placeholder || $t('core.common.placeholder.search')" type="text" name="keyword" :model-value="modelValue" ignore @update:model-value="onInput" @keyup.enter="onKeywordChange" > <template v-if="modelValue" #suffix> <div class="group flex h-full cursor-pointer items-center bg-white px-2 transition-all hover:bg-gray-50" @click="handleReset" > <IconCloseCircle class="h-4 w-4 text-gray-500 group-hover:text-gray-700" /> </div> </template> </FormKit> </template>