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>

Author: viva-jinyi

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

src/components/widget/ModelSelector.vue …omponents/widget/SampleModelSelector.vuesrc/components/widget/ModelSelector.vue renamed to src/components/widget/SampleModelSelector.vue src/components/widget/ModelSelector.vue renamed to 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>

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
       }