diff --git a/src/components/ui/search-input/SearchAutocomplete.vue b/src/components/ui/search-input/SearchAutocomplete.vue new file mode 100644 index 0000000000..95523ae806 --- /dev/null +++ b/src/components/ui/search-input/SearchAutocomplete.vue @@ -0,0 +1,213 @@ + + + + + + + + + + + + + + + + {{ suggestionLabel(suggestion) }} + + + + + + + diff --git a/src/components/ui/search-input/SearchInput.vue b/src/components/ui/search-input/SearchInput.vue index c67af8dd50..89a7df4252 100644 --- a/src/components/ui/search-input/SearchInput.vue +++ b/src/components/ui/search-input/SearchInput.vue @@ -1,10 +1,5 @@ - + - + - - - - - + autofocus + size="lg" + class="max-w-96 flex-1" + @select="onOptionSelect" + /> import { until, whenever } from '@vueuse/core' -import { merge, stubTrue } from 'es-toolkit/compat' -import type { AutoCompleteOptionSelectEvent } from 'primevue/autocomplete' +import { merge } from 'es-toolkit/compat' import { computed, onBeforeUnmount, @@ -187,7 +158,7 @@ import { useI18n } from 'vue-i18n' import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue' import VirtualGrid from '@/components/common/VirtualGrid.vue' import SingleSelect from '@/components/input/SingleSelect.vue' -import AutoCompletePlus from '@/components/primevueOverride/AutoCompletePlus.vue' +import SearchAutocomplete from '@/components/ui/search-input/SearchAutocomplete.vue' import Button from '@/components/ui/button/Button.vue' import BaseModalLayout from '@/components/widget/layout/BaseModalLayout.vue' import LeftSidePanel from '@/components/widget/panel/LeftSidePanel.vue' @@ -196,6 +167,7 @@ import { useWorkflowStore } from '@/platform/workflow/management/stores/workflow import { useComfyRegistryStore } from '@/stores/comfyRegistryStore' import type { components } from '@/types/comfyRegistryTypes' import type { NavGroupData, NavItemData } from '@/types/navTypes' +import type { QuerySuggestion } from '@/types/searchServiceTypes' import { OnCloseKey } from '@/types/widgetTypes' import PackInstallButton from '@/workbench/extensions/manager/components/manager/button/PackInstallButton.vue' import PackUpdateButton from '@/workbench/extensions/manager/components/manager/button/PackUpdateButton.vue' @@ -399,8 +371,8 @@ const availableSortOptions = computed(() => { })) }) -const onOptionSelect = (event: AutoCompleteOptionSelectEvent) => { - searchQuery.value = event.value.query +const onOptionSelect = (suggestion: QuerySuggestion) => { + searchQuery.value = suggestion.query } const onApproachEnd = () => {