From 36994be369132f0c6c6b56ae11c0167c844f25b8 Mon Sep 17 00:00:00 2001
From: EstrellaXD <estrellaxd05@gmail.com>
Date: Fri, 8 Sep 2023 10:49:41 +0800
Subject: [PATCH] feat: add click outside to close search result and provider
 select.

---
 webui/src/components/basic/ab-search.vue | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/webui/src/components/basic/ab-search.vue b/webui/src/components/basic/ab-search.vue
index 9b4a073a..b5535db1 100644
--- a/webui/src/components/basic/ab-search.vue
+++ b/webui/src/components/basic/ab-search.vue
@@ -1,5 +1,8 @@
 <script lang="ts" setup>
 import {Down, Search} from '@icon-park/vue-next';
+import { vOnClickOutside } from '@vueuse/components'
+
+defineEmits(['click']);
 
 const {
   onSelect,
@@ -12,6 +15,11 @@ const {
   bangumiList
 } = useSearchStore();
 
+function closeModal() {
+  selectingProvider.value = false;
+  bangumiList.value = [];
+}
+
 
 onMounted(() => {
   getProviders();
@@ -66,7 +74,12 @@ onMounted(() => {
       </div>
     </div>
   </div>
-  <div v-show="selectingProvider" abs top-84px left-540px w-100px rounded-12px shadow bg-white z-99 overflow-hidden>
+  <div
+      v-show="selectingProvider"
+      v-on-click-outside="closeModal"
+      abs top-84px
+      left-540px w-100px
+      rounded-12px shadow bg-white z-99 overflow-hidden>
     <div
         v-for="site in providers"
         :key="site"
@@ -91,9 +104,11 @@ onMounted(() => {
     <ab-bangumi-card
         v-for="(item, index) in bangumiList"
         :key="index"
+        v-on-click-outside="closeModal"
         :bangumi="item"
         type="search"
         transition-opacity
+        @click="$emit('click', item)"
     />
   </div>
 </template>