From 63a915ca4f4ca8eb5a3807a9f254909914588b9d Mon Sep 17 00:00:00 2001
From: ComfyFluffy <24245520+ComfyFluffy@users.noreply.github.com>
Date: Thu, 13 Jun 2024 16:48:50 +0800
Subject: [PATCH 1/3] feat: UIDropdownWithTooltip

---
 .../components/editor/common/EditorList.vue   | 34 ++++++---------
 spx-gui/src/components/ui/UIDropdown.vue      |  5 +++
 .../components/ui/UIDropdownWithTooltip.vue   | 41 +++++++++++++++++++
 spx-gui/src/components/ui/UITooltip.vue       | 17 +++++++-
 spx-gui/src/components/ui/index.ts            |  1 +
 5 files changed, 75 insertions(+), 23 deletions(-)
 create mode 100644 spx-gui/src/components/ui/UIDropdownWithTooltip.vue

diff --git a/spx-gui/src/components/editor/common/EditorList.vue b/spx-gui/src/components/editor/common/EditorList.vue
index 6ab8d41ef..10a764f79 100644
--- a/spx-gui/src/components/editor/common/EditorList.vue
+++ b/spx-gui/src/components/editor/common/EditorList.vue
@@ -4,26 +4,19 @@
       <ul class="items">
         <slot></slot>
       </ul>
-      <UIDropdown trigger="click">
+      <UIDropdownWithTooltip>
+        <template #dropdown-content>
+          <slot name="add-options"></slot>
+        </template>
+        <template #tooltip-content>
+          {{ addText }}
+        </template>
         <template #trigger>
-          <!--
-            TODO:
-            1. dropdown & tooltip should not be both visible: when dropdown visible, hide the tooltip
-            2. the empty `div` should be avoided. It is now required due to `Runtime directive used on component with non-element root node. The directives will not function as intended.`
-           -->
-          <div>
-            <UITooltip>
-              <template #trigger>
-                <button class="add">
-                  <UIIcon class="icon" type="plus" />
-                </button>
-              </template>
-              {{ addText }}
-            </UITooltip>
-          </div>
+          <button class="add">
+            <UIIcon class="icon" type="plus" />
+          </button>
         </template>
-        <slot name="add-options"></slot>
-      </UIDropdown>
+      </UIDropdownWithTooltip>
     </div>
     <slot name="detail"></slot>
   </div>
@@ -33,11 +26,10 @@
 import { computed } from 'vue'
 import {
   UIIcon,
-  UIDropdown,
-  UITooltip,
   type Color,
   useUIVariables,
-  getCssVars
+  getCssVars,
+  UIDropdownWithTooltip
 } from '@/components/ui'
 
 const props = defineProps<{
diff --git a/spx-gui/src/components/ui/UIDropdown.vue b/spx-gui/src/components/ui/UIDropdown.vue
index 59cbf9250..31cb668c5 100644
--- a/spx-gui/src/components/ui/UIDropdown.vue
+++ b/spx-gui/src/components/ui/UIDropdown.vue
@@ -11,6 +11,7 @@
     :show-arrow="false"
     :style="{ marginTop: offset.y + 'px', marginLeft: offset.x + 'px' }"
     raw
+    @update:show="(v) => emit('update:visible', v)"
   >
     <template #trigger>
       <slot name="trigger"></slot>
@@ -58,6 +59,10 @@ withDefaults(
   }
 )
 
+const emit = defineEmits<{
+  'update:visible': [boolean]
+}>()
+
 const attachTo = usePopupContainer()
 
 const nPopoverRef = ref<InstanceType<typeof NPopover>>()
diff --git a/spx-gui/src/components/ui/UIDropdownWithTooltip.vue b/spx-gui/src/components/ui/UIDropdownWithTooltip.vue
new file mode 100644
index 000000000..471e86d47
--- /dev/null
+++ b/spx-gui/src/components/ui/UIDropdownWithTooltip.vue
@@ -0,0 +1,41 @@
+<template>
+  <UIDropdown
+    trigger="click"
+    :visible="dropdownVisible"
+    @update:visible="handleDropdownVisibleChange"
+  >
+    <template #trigger>
+      <div>
+        <!--
+            TODO:
+            The empty `div` should be avoided. It is now required due to a warning: 
+            `Runtime directive used on component with non-element root node. The directives will not function as intended.`
+           -->
+        <UITooltip :visible="tooltipVisible" @update:visible="handleTooltipVisibleChange">
+          <template #trigger>
+            <slot name="trigger"></slot>
+          </template>
+          <slot name="tooltip-content"></slot>
+        </UITooltip>
+      </div>
+    </template>
+    <slot name="dropdown-content"></slot>
+  </UIDropdown>
+</template>
+
+<script setup lang="ts">
+import { UIDropdown, UITooltip } from '@/components/ui'
+import { ref } from 'vue'
+
+const dropdownVisible = ref(false)
+const tooltipVisible = ref(false)
+
+const handleDropdownVisibleChange = (v: boolean) => {
+  dropdownVisible.value = v
+  tooltipVisible.value = false
+}
+
+const handleTooltipVisibleChange = (v: boolean) => {
+  tooltipVisible.value = v
+}
+</script>
diff --git a/spx-gui/src/components/ui/UITooltip.vue b/spx-gui/src/components/ui/UITooltip.vue
index 40942397f..2e40b57ba 100644
--- a/spx-gui/src/components/ui/UITooltip.vue
+++ b/spx-gui/src/components/ui/UITooltip.vue
@@ -1,5 +1,12 @@
 <template>
-  <NTooltip class="ui-tooltip" trigger="hover" :to="attachTo" :placement="placement">
+  <NTooltip
+    class="ui-tooltip"
+    trigger="hover"
+    :to="attachTo"
+    :placement="placement"
+    :show="visible"
+    @update:show="(v) => emit('update:visible', v)"
+  >
     <template #trigger>
       <slot name="trigger"></slot>
     </template>
@@ -16,12 +23,18 @@ export type Placement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-sta
 withDefaults(
   defineProps<{
     placement?: Placement
+    visible?: boolean
   }>(),
   {
-    placement: 'top'
+    placement: 'top',
+    visible: undefined
   }
 )
 
+const emit = defineEmits<{
+  'update:visible': [boolean]
+}>()
+
 const attachTo = usePopupContainer()
 </script>
 
diff --git a/spx-gui/src/components/ui/index.ts b/spx-gui/src/components/ui/index.ts
index 00a9c54bd..affc6a070 100644
--- a/spx-gui/src/components/ui/index.ts
+++ b/spx-gui/src/components/ui/index.ts
@@ -31,3 +31,4 @@ export * from './tab'
 export { default as UICode } from './UICode.vue'
 export { default as UIButtonGroup } from './UIButtonGroup.vue'
 export { default as UIButtonGroupItem } from './UIButtonGroupItem.vue'
+export { default as UIDropdownWithTooltip } from './UIDropdownWithTooltip.vue'

From 808c094a41a89f5c2a8e274f43809c8d8a7d85ca Mon Sep 17 00:00:00 2001
From: ComfyFluffy <24245520+ComfyFluffy@users.noreply.github.com>
Date: Thu, 13 Jun 2024 16:49:05 +0800
Subject: [PATCH 2/3] fix: missing import for UILoading

---
 spx-gui/src/components/editor/stage/BackdropDetail.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/spx-gui/src/components/editor/stage/BackdropDetail.vue b/spx-gui/src/components/editor/stage/BackdropDetail.vue
index 52c5dd43b..079bb1c47 100644
--- a/spx-gui/src/components/editor/stage/BackdropDetail.vue
+++ b/spx-gui/src/components/editor/stage/BackdropDetail.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script setup lang="ts">
-import { useModal } from '@/components/ui'
+import { useModal, UILoading } from '@/components/ui'
 import { useFileUrl } from '@/utils/file'
 import type { Backdrop } from '@/models/backdrop'
 import { useEditorCtx } from '../EditorContextProvider.vue'

From 203c9f83a29866052296da56f700777daa863e17 Mon Sep 17 00:00:00 2001
From: ComfyFluffy <24245520+ComfyFluffy@users.noreply.github.com>
Date: Fri, 14 Jun 2024 09:58:15 +0800
Subject: [PATCH 3/3] fix: logic

---
 spx-gui/src/components/ui/UIDropdownWithTooltip.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/spx-gui/src/components/ui/UIDropdownWithTooltip.vue b/spx-gui/src/components/ui/UIDropdownWithTooltip.vue
index 471e86d47..8a105bebd 100644
--- a/spx-gui/src/components/ui/UIDropdownWithTooltip.vue
+++ b/spx-gui/src/components/ui/UIDropdownWithTooltip.vue
@@ -32,10 +32,12 @@ const tooltipVisible = ref(false)
 
 const handleDropdownVisibleChange = (v: boolean) => {
   dropdownVisible.value = v
-  tooltipVisible.value = false
+  if (v) {
+    tooltipVisible.value = false
+  }
 }
 
 const handleTooltipVisibleChange = (v: boolean) => {
-  tooltipVisible.value = v
+  tooltipVisible.value = v && !dropdownVisible.value
 }
 </script>