webui: fix search.ts

webui/src/components/ab-search-bar.vue

@@ -2,8 +2,17 @@
 import {ref} from 'vue';
 import {vOnClickOutside} from "@vueuse/components";
 
+defineEmits(['add-bangumi']);
 const showProvider = ref(false);
-const {providers, getProviders, provider, loading, onSearch} = useSearchStore();
+const {
+  providers,
+  getProviders,
+  provider,
+  loading,
+  onSearch,
+  inputValue,
+  bangumiList,
+} = useSearchStore();
 
 onMounted(() => {
   getProviders();
@@ -18,6 +27,7 @@ function onSelect(site: string) {
 
 <template>
   <ab-search
+      v-model:inputValue="inputValue"
       :provider="provider"
       :loading="loading"
       @search="onSearch"
@@ -52,10 +62,27 @@ function onSelect(site: string) {
       </div>
     </div>
   </div>
+  <div
+      abs top-84px left-192px space-y-12px z-8
+  >
+    <TransitionGroup name="search-result">
+      <ab-bangumi-card
+          v-for="bangumi in bangumiList"
+          :key="bangumi.id"
+          :bangumi="bangumi"
+          type="search"
+          @click="() => $emit('add-bangumi', bangumi)"
+      />
+    </TransitionGroup>
+
+  </div>
 
 </template>
 
 
 <style lang="scss" scoped>
+.search-result-enter-active, .search-result-leave-active {
+  transition: all 0.3s;
+}
 
 </style>

webui/src/components/basic/ab-search.vue

@@ -16,9 +16,9 @@ withDefaults(
 
 defineEmits(['select', 'search']);
 
-const inputValue = ref('');
+const inputValue = defineModel<string>('inputValue');
 
-watch (inputValue, (val) => {
+watch(inputValue, (val) => {
   console.log(val);
 });
 
@@ -44,7 +44,7 @@ watch (inputValue, (val) => {
         fill="#fff"
         is-btn
         btn-click
-        @click="$emit('search', inputValue)"
+        @click="$emit('search')"
     />
     <NSpin v-else :size="20"/>
 
@@ -53,7 +53,7 @@ watch (inputValue, (val) => {
         type="text"
         :placeholder="$t('topbar.search.placeholder')"
         input-reset
-        @keyup.enter="$emit('search', inputValue)"
+        @keyup.enter="$emit('search')"
     />
       <div
           h-full

webui/src/store/search.ts

@@ -55,7 +55,7 @@ export function useSearchStore() {
     ).subscribe()
 
     function onSearch() {
-        console.log('onSearch');
+        console.log(inputValue.value, 'onSearch');
         loading.value = true;
         input$.next(inputValue.value);
         loading.value = false;