Merge remote-tracking branch 'origin/main'

src/components/ui/context-menu/ContextMenuList.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ComputedRef, inject, ref } from 'vue';
-import { ClickOutside as vClickOutside } from 'element-plus';
 
 interface ContextMenuItem {
   title: string;

src/directives/click-outside/clickOutside.ts

@@ -0,0 +1,19 @@
+import { Directive } from 'vue';
+
+const clickOutsideDirective: Directive = {
+  beforeMount(el, binding) {
+    el.clickOutsideEvent = function (event: MouseEvent) {
+      // Check that click was outside the element
+      if (!(el == event.target || el.contains(event.target))) {
+        // If yes, call method provided in attribute value
+        binding.value(event);
+      }
+    };
+    document.addEventListener('click', el.clickOutsideEvent);
+  },
+  unmounted(el) {
+    document.removeEventListener('click', el.clickOutsideEvent);
+  },
+};
+
+export default clickOutsideDirective;

src/package/create-app.ts

@@ -15,6 +15,7 @@ import 'normalize.css/normalize.css';
 import 'element-plus/theme-chalk/index.css';
 import '@/styles/index.scss';
 import { initChartJS } from '@/utils/chart';
+import clickOutsideDirective from '@/directives/click-outside/clickOutside';
 
 export const getDefaultCreateAppOptions = (): CreateAppOptions => {
   return {
@@ -97,6 +98,7 @@ const _createApp = async (options?: CreateAppOptions): Promise<App> => {
   if (options.loadLocate) app.directive('locate', locate as any);
   if (options.loadAuth) app.directive('auth', auth as any);
   if (options.loadExport) app.directive('export', export_ as any);
+  app.directive('click-outside', clickOutsideDirective);
 
   // mount
   if (options.mount) {

src/views/database/detail/tabs/DatabaseDetailTabDatabases.vue

@@ -95,6 +95,7 @@ const getTablePreview = async () => {
 
 const activeNavItem = ref<DatabaseNavItem>();
 const onNodeClick = async (data: DatabaseNavItem) => {
+  console.debug('onNodeClick');
   activeNavItem.value = data;
   const { type } = data;
   if (type === 'table') {
@@ -339,6 +340,7 @@ defineOptions({ name: 'ClDatabaseDetailTabDatabases' });
                 </div>
               </template>
               <cl-context-menu-list
+                v-if="isContextMenuVisible(data.id)"
                 :items="contextMenuItems"
                 @hide="onContextMenuHide(data.id)"
               />