mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-19 22:09:37 +00:00
2636136f87
## Summary This PR improves the user experience by automatically focusing the search input field when opening the Workflows, Model Library, or Node Library sidebar tabs. ## Changes - **SearchBox.vue**: Exposed a `focus()` method to allow parent components to programmatically set focus on the input. - **WorkflowsSidebarTab.vue**: Added a watcher to focus the search box when the tab is activated. - **ModelLibrarySidebarTab.vue**: Added autofocus on component mount. - **NodeLibrarySidebarTab.vue**: Added autofocus on component mount. ## Motivation Users often switch to these tabs specifically to search for an item. Automatically focusing the search box reduces friction and saves a click. https://github.com/user-attachments/assets/8438e71c-a5e4-4b6c-8665-04d535d3ad8e ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7179-feat-sidebar-autofocus-search-input-in-Workflows-Model-and-Node-tabs-2c06d73d36508199b8c0e83d19f1cd84) by [Unito](https://www.unito.io)
117 lines
2.6 KiB
Vue
117 lines
2.6 KiB
Vue
<template>
|
|
<div>
|
|
<IconField>
|
|
<Button
|
|
v-if="filterIcon"
|
|
class="p-inputicon filter-button"
|
|
:icon="filterIcon"
|
|
text
|
|
severity="contrast"
|
|
@click="$emit('showFilter', $event)"
|
|
/>
|
|
<InputText
|
|
ref="inputRef"
|
|
class="search-box-input w-full"
|
|
:model-value="modelValue"
|
|
:placeholder="placeholder"
|
|
:autofocus="autofocus"
|
|
@input="handleInput"
|
|
/>
|
|
<InputIcon v-if="!modelValue" :class="icon" />
|
|
<Button
|
|
v-if="modelValue"
|
|
class="p-inputicon clear-button"
|
|
icon="pi pi-times"
|
|
text
|
|
severity="contrast"
|
|
@click="clearSearch"
|
|
/>
|
|
</IconField>
|
|
<div
|
|
v-if="filters?.length"
|
|
class="search-filters flex flex-wrap gap-2 pt-2"
|
|
>
|
|
<SearchFilterChip
|
|
v-for="filter in filters"
|
|
:key="filter.id"
|
|
:text="filter.text"
|
|
:badge="filter.badge"
|
|
:badge-class="filter.badgeClass"
|
|
@remove="$emit('removeFilter', filter)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts" generic="TFilter extends SearchFilter">
|
|
import { debounce } from 'es-toolkit/compat'
|
|
import Button from 'primevue/button'
|
|
import IconField from 'primevue/iconfield'
|
|
import InputIcon from 'primevue/inputicon'
|
|
import InputText from 'primevue/inputtext'
|
|
import { ref } from 'vue'
|
|
|
|
import type { SearchFilter } from './SearchFilterChip.vue'
|
|
import SearchFilterChip from './SearchFilterChip.vue'
|
|
|
|
const {
|
|
modelValue,
|
|
placeholder = 'Search...',
|
|
icon = 'pi pi-search',
|
|
debounceTime = 300,
|
|
filterIcon,
|
|
filters = [],
|
|
autofocus = false
|
|
} = defineProps<{
|
|
modelValue: string
|
|
placeholder?: string
|
|
icon?: string
|
|
debounceTime?: number
|
|
filterIcon?: string
|
|
filters?: TFilter[]
|
|
autofocus?: boolean
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'update:modelValue', value: string): void
|
|
(e: 'search', value: string, filters: TFilter[]): void
|
|
(e: 'showFilter', event: Event): void
|
|
(e: 'removeFilter', filter: TFilter): void
|
|
}>()
|
|
|
|
const inputRef = ref()
|
|
|
|
defineExpose({
|
|
focus: () => {
|
|
inputRef.value?.$el?.focus()
|
|
}
|
|
})
|
|
|
|
const emitSearch = debounce((value: string) => {
|
|
emit('search', value, filters)
|
|
}, debounceTime)
|
|
|
|
const handleInput = (event: Event) => {
|
|
const target = event.target as HTMLInputElement
|
|
emit('update:modelValue', target.value)
|
|
emitSearch(target.value)
|
|
}
|
|
|
|
const clearSearch = () => {
|
|
emit('update:modelValue', '')
|
|
emitSearch('')
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
@reference '../../assets/css/style.css';
|
|
|
|
:deep(.p-inputtext) {
|
|
--p-form-field-padding-x: 0.625rem;
|
|
}
|
|
|
|
.p-button.p-inputicon {
|
|
@apply p-0 w-auto border-none;
|
|
}
|
|
</style>
|