From 3722a7fb36416ff7e46022437068b15ee7034dbc Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Tue, 23 Aug 2022 14:41:34 +0800
Subject: [PATCH] perf: dropdown closes after click

Signed-off-by: Ryan Wang <i@ryanc.cc>
---
 src/modules/contents/attachments/AttachmentList.vue    | 10 ++++++++++
 .../attachments/components/AttachmentUploadModal.vue   |  1 +
 src/modules/contents/pages/PageList.vue                |  1 +
 src/modules/system/plugins/PluginList.vue              |  4 ++++
 .../system/plugins/components/PluginListItem.vue       |  7 ++++++-
 src/modules/system/roles/RoleList.vue                  |  6 ++++++
 src/modules/system/users/UserList.vue                  | 10 ++++++++++
 7 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/src/modules/contents/attachments/AttachmentList.vue b/src/modules/contents/attachments/AttachmentList.vue
index 09fb22e6..67765c0f 100644
--- a/src/modules/contents/attachments/AttachmentList.vue
+++ b/src/modules/contents/attachments/AttachmentList.vue
@@ -156,16 +156,19 @@ const folders = [
                         <div class="w-72 p-4">
                           <ul class="space-y-1">
                             <li
+                              v-close-popper
                               class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                             >
                               <span class="truncate">本地</span>
                             </li>
                             <li
+                              v-close-popper
                               class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                             >
                               <span class="truncate">阿里云 OSS</span>
                             </li>
                             <li
+                              v-close-popper
                               class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                             >
                               <span class="truncate">Amazon S3</span>
@@ -197,6 +200,7 @@ const folders = [
                               <li
                                 v-for="(user, index) in users"
                                 :key="index"
+                                v-close-popper
                                 class="cursor-pointer py-4 hover:bg-gray-50"
                               >
                                 <div class="flex items-center space-x-4">
@@ -246,11 +250,13 @@ const folders = [
                         <div class="w-72 p-4">
                           <ul class="space-y-1">
                             <li
+                              v-close-popper
                               class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                             >
                               <span class="truncate">未被引用</span>
                             </li>
                             <li
+                              v-close-popper
                               class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                             >
                               <span class="truncate">文章</span>
@@ -280,21 +286,25 @@ const folders = [
                         <div class="w-72 p-4">
                           <ul class="space-y-1">
                             <li
+                              v-close-popper
                               class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                             >
                               <span class="truncate">较近上传</span>
                             </li>
                             <li
+                              v-close-popper
                               class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                             >
                               <span class="truncate">较晚上传</span>
                             </li>
                             <li
+                              v-close-popper
                               class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                             >
                               <span class="truncate">文件大小降序</span>
                             </li>
                             <li
+                              v-close-popper
                               class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                             >
                               <span class="truncate">文件大小升序</span>
diff --git a/src/modules/contents/attachments/components/AttachmentUploadModal.vue b/src/modules/contents/attachments/components/AttachmentUploadModal.vue
index cf36c40c..896ff578 100644
--- a/src/modules/contents/attachments/components/AttachmentUploadModal.vue
+++ b/src/modules/contents/attachments/components/AttachmentUploadModal.vue
@@ -66,6 +66,7 @@ const onVisibleChange = (visible: boolean) => {
               <li
                 v-for="(strategy, index) in strategies"
                 :key="index"
+                v-close-popper
                 class="flex cursor-pointer flex-col rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
               >
                 <span class="truncate">
diff --git a/src/modules/contents/pages/PageList.vue b/src/modules/contents/pages/PageList.vue
index 2dd3f2d8..2216139d 100644
--- a/src/modules/contents/pages/PageList.vue
+++ b/src/modules/contents/pages/PageList.vue
@@ -187,6 +187,7 @@ useExtensionPointsState("PAGES", pagesPublicState);
                               <li
                                 v-for="(user, index) in users"
                                 :key="index"
+                                v-close-popper
                                 class="cursor-pointer py-4 hover:bg-gray-50"
                               >
                                 <div class="flex items-center space-x-4">
diff --git a/src/modules/system/plugins/PluginList.vue b/src/modules/system/plugins/PluginList.vue
index 6db43991..84d42c52 100644
--- a/src/modules/system/plugins/PluginList.vue
+++ b/src/modules/system/plugins/PluginList.vue
@@ -110,11 +110,13 @@ onMounted(handleFetchPlugins);
                     <div class="w-52 p-4">
                       <ul class="space-y-1">
                         <li
+                          v-close-popper
                           class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                         >
                           <span class="truncate">已启用</span>
                         </li>
                         <li
+                          v-close-popper
                           class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                         >
                           <span class="truncate">未启用</span>
@@ -199,11 +201,13 @@ onMounted(handleFetchPlugins);
                     <div class="w-72 p-4">
                       <ul class="space-y-1">
                         <li
+                          v-close-popper
                           class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                         >
                           <span class="truncate">较近安装</span>
                         </li>
                         <li
+                          v-close-popper
                           class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                         >
                           <span class="truncate">较晚安装</span>
diff --git a/src/modules/system/plugins/components/PluginListItem.vue b/src/modules/system/plugins/components/PluginListItem.vue
index 542f594b..1ca0c509 100644
--- a/src/modules/system/plugins/components/PluginListItem.vue
+++ b/src/modules/system/plugins/components/PluginListItem.vue
@@ -120,7 +120,12 @@ const { isStarted, changeStatus, uninstall } = usePluginLifeCycle(plugin);
               <template #popper>
                 <div class="w-48 p-2">
                   <VSpace class="w-full" direction="column">
-                    <VButton block type="danger" @click="uninstall">
+                    <VButton
+                      v-close-popper
+                      block
+                      type="danger"
+                      @click="uninstall"
+                    >
                       卸载
                     </VButton>
                   </VSpace>
diff --git a/src/modules/system/roles/RoleList.vue b/src/modules/system/roles/RoleList.vue
index 98b9ce96..7c80f950 100644
--- a/src/modules/system/roles/RoleList.vue
+++ b/src/modules/system/roles/RoleList.vue
@@ -95,11 +95,13 @@ onMounted(() => {
                     <div class="w-52 p-4">
                       <ul class="space-y-1">
                         <li
+                          v-close-popper
                           class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                         >
                           <span class="truncate">正常</span>
                         </li>
                         <li
+                          v-close-popper
                           class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                         >
                           <span class="truncate">已禁用</span>
@@ -121,11 +123,13 @@ onMounted(() => {
                     <div class="w-52 p-4">
                       <ul class="space-y-1">
                         <li
+                          v-close-popper
                           class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                         >
                           <span class="truncate">系统保留</span>
                         </li>
                         <li
+                          v-close-popper
                           class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                         >
                           <span class="truncate">自定义</span>
@@ -147,11 +151,13 @@ onMounted(() => {
                     <div class="w-72 p-4">
                       <ul class="space-y-1">
                         <li
+                          v-close-popper
                           class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                         >
                           <span class="truncate">更高权限</span>
                         </li>
                         <li
+                          v-close-popper
                           class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                         >
                           <span class="truncate">更低权限</span>
diff --git a/src/modules/system/users/UserList.vue b/src/modules/system/users/UserList.vue
index ca73a4e3..19b0eac8 100644
--- a/src/modules/system/users/UserList.vue
+++ b/src/modules/system/users/UserList.vue
@@ -168,11 +168,13 @@ onMounted(() => {
                     <div class="w-52 p-4">
                       <ul class="space-y-1">
                         <li
+                          v-close-popper
                           class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                         >
                           <span class="truncate">正常</span>
                         </li>
                         <li
+                          v-close-popper
                           class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                         >
                           <span class="truncate">已禁用</span>
@@ -194,21 +196,25 @@ onMounted(() => {
                     <div class="w-52 p-4">
                       <ul class="space-y-1">
                         <li
+                          v-close-popper
                           class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                         >
                           <span class="truncate">Super Administrator</span>
                         </li>
                         <li
+                          v-close-popper
                           class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                         >
                           <span class="truncate">Administrator</span>
                         </li>
                         <li
+                          v-close-popper
                           class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                         >
                           <span class="truncate">Editor</span>
                         </li>
                         <li
+                          v-close-popper
                           class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                         >
                           <span class="truncate">Guest</span>
@@ -230,11 +236,13 @@ onMounted(() => {
                     <div class="w-72 p-4">
                       <ul class="space-y-1">
                         <li
+                          v-close-popper
                           class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                         >
                           <span class="truncate">较近登录</span>
                         </li>
                         <li
+                          v-close-popper
                           class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                         >
                           <span class="truncate">较晚登录</span>
@@ -327,6 +335,7 @@ onMounted(() => {
                         <div class="w-48 p-2">
                           <VSpace class="w-full" direction="column">
                             <VButton
+                              v-close-popper
                               block
                               type="secondary"
                               @click="handleOpenCreateModal(user)"
@@ -334,6 +343,7 @@ onMounted(() => {
                               修改资料
                             </VButton>
                             <VButton
+                              v-close-popper
                               block
                               @click="handleOpenPasswordChangeModal(user)"
                             >