dropdown with tooltip

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<{

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'

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>>()

spx-gui/src/components/ui/UIDropdownWithTooltip.vue

@@ -0,0 +1,43 @@
+<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
+ if (v) {
+ tooltipVisible.value = false
+ }
+}
+
+const handleTooltipVisibleChange = (v: boolean) => {
+ tooltipVisible.value = v && !dropdownVisible.value
+}
+</script>

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>
 

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'