From d9936fc8d5e22a0219ab9492a5353bb2f48c9d33 Mon Sep 17 00:00:00 2001
From: Jin Yi <jin12cc@gmail.com>
Date: Sun, 31 Aug 2025 14:01:54 +0900
Subject: [PATCH] refactor: Fix SearchBox v-model binding and rename
 ModelSelector to SampleModelSelector

SearchBox:
- Fix defineModel usage to use default 'modelValue' prop name
- Remove incorrect empty string parameter that caused Vue warning
- Add comment explaining defineModel behavior

SampleModelSelector (formerly ModelSelector):
- Rename ModelSelector.vue to SampleModelSelector.vue to indicate it's a sample component
- Fix v-model syntax error in SearchBox binding (remove extra '=' character)
- Add v-model:search-query binding to MultiSelect for search functionality
- Add watch handlers for searchText and searchQuery debugging
- Import watch from Vue and add searchText ref for MultiSelect search

useModelSelectorDialog:
- Update import to use renamed SampleModelSelector component

These changes fix the v-model binding issues preventing search functionality
from working properly in both the header SearchBox and MultiSelect components.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/input/SearchBox.vue                 |  3 ++-
 .../{ModelSelector.vue => SampleModelSelector.vue} | 14 ++++++++++++--
 src/composables/useModelSelectorDialog.ts          |  4 ++--
 3 files changed, 16 insertions(+), 5 deletions(-)
 rename src/components/widget/{ModelSelector.vue => SampleModelSelector.vue} (94%)

diff --git a/src/components/input/SearchBox.vue b/src/components/input/SearchBox.vue
index a28db6a60..dcf9212a0 100644
--- a/src/components/input/SearchBox.vue
+++ b/src/components/input/SearchBox.vue
@@ -19,7 +19,8 @@ const { placeHolder, showBorder = false } = defineProps<{
   placeHolder?: string
   showBorder?: boolean
 }>()
-const searchQuery = defineModel<string>('')
+// defineModel without arguments uses 'modelValue' as the prop name
+const searchQuery = defineModel<string>()
 
 const wrapperStyle = computed(() => {
   return showBorder
diff --git a/src/components/widget/ModelSelector.vue b/src/components/widget/SampleModelSelector.vue
similarity index 94%
rename from src/components/widget/ModelSelector.vue
rename to src/components/widget/SampleModelSelector.vue
index 6cb351a7c..8a5ea674e 100644
--- a/src/components/widget/ModelSelector.vue
+++ b/src/components/widget/SampleModelSelector.vue
@@ -12,7 +12,7 @@
     </template>
 
     <template #header>
-      <SearchBox v-model:="searchQuery" class="max-w-[384px]" />
+      <SearchBox v-model="searchQuery" class="max-w-[384px]" />
     </template>
 
     <template #header-right-area>
@@ -59,6 +59,7 @@
       <div class="relative px-6 pt-2 pb-4 flex gap-2">
         <MultiSelect
           v-model="selectedFrameworks"
+          v-model:search-query="searchText"
           class="w-[250px]"
           label="Select Frameworks"
           :options="frameworkOptions"
@@ -135,7 +136,7 @@
 </template>
 
 <script setup lang="ts">
-import { provide, ref } from 'vue'
+import { provide, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import IconButton from '@/components/button/IconButton.vue'
@@ -201,9 +202,18 @@ const { onClose } = defineProps<{
 provide(OnCloseKey, onClose)
 
 const searchQuery = ref<string>('')
+const searchText = ref<string>('')
 const selectedFrameworks = ref([])
 const selectedProjects = ref([])
 const selectedSort = ref<string>('popular')
 
 const selectedNavItem = ref<string | null>('installed')
+
+watch(searchText, (newQuery) => {
+  console.log('searchText:', searchText.value, newQuery)
+})
+
+watch(searchQuery, (newQuery) => {
+  console.log('searchQuery:', searchQuery.value, newQuery)
+})
 </script>
diff --git a/src/composables/useModelSelectorDialog.ts b/src/composables/useModelSelectorDialog.ts
index 70dc88bdd..4c1ecde0e 100644
--- a/src/composables/useModelSelectorDialog.ts
+++ b/src/composables/useModelSelectorDialog.ts
@@ -1,4 +1,4 @@
-import ModelSelector from '@/components/widget/ModelSelector.vue'
+import SampleModelSelector from '@/components/widget/SampleModelSelector.vue'
 import { useDialogService } from '@/services/dialogService'
 import { useDialogStore } from '@/stores/dialogStore'
 
@@ -15,7 +15,7 @@ export const useModelSelectorDialog = () => {
   function show() {
     dialogService.showLayoutDialog({
       key: DIALOG_KEY,
-      component: ModelSelector,
+      component: SampleModelSelector,
       props: {
         onClose: hide
       }