cleanup: Unify the SearchBox, align use in sidebars

Author: DrJKL

src/components/input/SearchBox.stories.ts …c/components/common/SearchBox.stories.tssrc/components/input/SearchBox.stories.ts renamed to src/components/common/SearchBox.stories.ts src/components/input/SearchBox.stories.ts renamed to src/components/common/SearchBox.stories.ts

@@ -1,13 +1,20 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import { ref } from 'vue'
 
-import SearchBox from './SearchBox.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
+import type { ComponentExposed } from 'vue-component-type-helpers'
+interface GenericMeta<C> extends Omit<Meta<C>, 'component'> {
+  component: Omit<ComponentExposed<C>, 'focus'>
+}
 
-const meta: Meta<typeof SearchBox> = {
+const meta: GenericMeta<typeof SearchBox> = {
   title: 'Components/Input/SearchBox',
   component: SearchBox,
   tags: ['autodocs'],
   argTypes: {
+    modelValue: {
+      control: 'text'
+    },
     placeholder: {
       control: 'text'
     },
@@ -19,9 +26,12 @@ const meta: Meta<typeof SearchBox> = {
       control: 'select',
       options: ['md', 'lg'],
       description: 'Size variant of the search box'
-    }
+    },
+    'onUpdate:modelValue': { action: 'update:modelValue' },
+    onSearch: { action: 'search' }
   },
   args: {
+    modelValue: '',
     placeholder: 'Search...',
     showBorder: false,
     size: 'md'

src/components/input/SearchBox.test.ts src/components/common/SearchBox.test.tssrc/components/input/SearchBox.test.ts renamed to src/components/common/SearchBox.test.ts

@@ -3,7 +3,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
 
-import SearchBox from './SearchBox.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 
 const i18n = createI18n({
   legacy: false,

src/components/common/SearchBox.vue

@@ -1,84 +1,89 @@
 <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
+    :class="
+      cn(
+        'relative flex w-full items-center gap-2 bg-comfy-input cursor-text text-comfy-input-foreground',
+        wrapperStyle
+      )
+    "
+  >
+    <InputText
+      ref="inputRef"
+      v-model="modelValue"
+      :placeholder
+      :autofocus
+      unstyled
+      class="absolute inset-0 size-full pl-11 border-none outline-none bg-transparent text-sm"
+    />
+    <IconButton
+      v-if="filterIcon"
+      class="p-inputicon filter-button absolute right-0 inset-y-0 h-full m-0 p-0"
+      :icon="filterIcon"
+      severity="contrast"
+      @click="$emit('showFilter', $event)"
+    />
+    <InputIcon v-if="!modelValue" :class="icon" />
+    <Button
+      v-if="modelValue"
+      class="p-inputicon clear-button"
+      icon="pi pi-times"
+      text
+      severity="contrast"
+      @click="modelValue = ''"
+    />
+  </div>
+  <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>
 </template>
 
 <script setup lang="ts" generic="TFilter extends SearchFilter">
-import { debounce } from 'es-toolkit/compat'
+import { cn } from '@comfyorg/tailwind-utils'
+import { watchDebounced } from '@vueuse/core'
 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 { computed, ref } from 'vue'
 
+import IconButton from '../button/IconButton.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
+  autofocus = false,
+  showBorder = false,
+  size = 'md'
 } = defineProps<{
-  modelValue: string
   placeholder?: string
   icon?: string
   debounceTime?: number
   filterIcon?: string
   filters?: TFilter[]
   autofocus?: boolean
+  showBorder?: boolean
+  size?: 'md' | 'lg'
 }>()
 
 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 modelValue = defineModel<string>({ required: true })
+
 const inputRef = ref()
 
 defineExpose({
@@ -87,20 +92,27 @@ defineExpose({
   }
 })
 
-const emitSearch = debounce((value: string) => {
-  emit('search', value, filters)
-}, debounceTime)
+watchDebounced(
+  modelValue,
+  (value: string) => {
+    emit('search', value, filters)
+  },
+  { debounce: debounceTime }
+)
 
-const handleInput = (event: Event) => {
-  const target = event.target as HTMLInputElement
-  emit('update:modelValue', target.value)
-  emitSearch(target.value)
-}
+const wrapperStyle = computed(() => {
+  if (showBorder) {
+    return cn('rounded p-2 border border-solid border-border-default')
+  }
 
-const clearSearch = () => {
-  emit('update:modelValue', '')
-  emitSearch('')
-}
+  // Size-specific classes matching button sizes for consistency
+  const sizeClasses = {
+    md: 'h-8 px-2 py-1.5', // Matches button sm size
+    lg: 'h-10 px-4 py-2' // Matches button md size
+  }[size]
+
+  return cn('rounded-lg', sizeClasses)
+})
 </script>
 
 <style scoped>

src/components/custom/widget/WorkflowTemplateSelectorDialog.vue

@@ -388,8 +388,8 @@ import CardBottom from '@/components/card/CardBottom.vue'
 import CardContainer from '@/components/card/CardContainer.vue'
 import CardTop from '@/components/card/CardTop.vue'
 import SquareChip from '@/components/chip/SquareChip.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import MultiSelect from '@/components/input/MultiSelect.vue'
-import SearchBox from '@/components/input/SearchBox.vue'
 import SingleSelect from '@/components/input/SingleSelect.vue'
 import AudioThumbnail from '@/components/templates/thumbnails/AudioThumbnail.vue'
 import CompareSliderThumbnail from '@/components/templates/thumbnails/CompareSliderThumbnail.vue'

src/components/input/MultiSelect.vue

@@ -178,7 +178,7 @@ import MultiSelect from 'primevue/multiselect'
 import { computed, useAttrs } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import SearchBox from '@/components/input/SearchBox.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import { usePopoverSizing } from '@/composables/usePopoverSizing'
 import { cn } from '@/utils/tailwindUtil'
 

src/components/input/SearchBox.vue

@@ -17,17 +17,19 @@
       />
     </template>
     <template #header>
-      <SearchBox
-        ref="searchBoxRef"
-        v-model:model-value="searchQuery"
-        class="model-lib-search-box p-2 2xl:p-4"
-        :placeholder="$t('g.searchModels') + '...'"
-        @search="handleSearch"
-      />
+      <div class="px-2 2xl:px-4">
+        <SearchBox
+          ref="searchBoxRef"
+          v-model:model-value="searchQuery"
+          :placeholder="$t('g.searchModels') + '...'"
+          @search="handleSearch"
+        />
+      </div>
     </template>
     <template #body>
       <ElectronDownloadItems v-if="isElectron()" />
 
+      <Divider type="dashed" class="m-2" />
       <TreeExplorer
         v-model:expanded-keys="expandedKeys"
         class="model-lib-tree-explorer"
@@ -43,6 +45,7 @@
 </template>
 
 <script setup lang="ts">
+import { Divider } from 'primevue'
 import Button from 'primevue/button'
 import { computed, nextTick, onMounted, ref, toRef, watch } from 'vue'
 

src/components/sidebar/tabs/ModelLibrarySidebarTab.vue

@@ -75,11 +75,11 @@
         </Popover>
       </template>
       <template #header>
-        <div>
+        <div class="px-2 2xl:px-4">
           <SearchBox
             ref="searchBoxRef"
             v-model:model-value="searchQuery"
-            class="node-lib-search-box p-2 2xl:p-4"
+            class="node-lib-search-box"
             :placeholder="$t('g.searchNodes') + '...'"
             filter-icon="pi pi-filter"
             :filters