refactor(core): FloatingTooltip component

Author: antfu

packages/core/src/client/webcomponents/components/DockEmbedded.vue

@@ -2,7 +2,7 @@
 import type { DocksContext } from '@vitejs/devtools-kit/client'
 import Dock from './Dock.vue'
 import DockPanel from './DockPanel.vue'
-import FloatingTooltip from './FloatingTooltip.vue'
+import FloatingTooltip from './FloatingTooltip'
 
 defineProps<{
   context: DocksContext

packages/core/src/client/webcomponents/components/DockEntries.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import type { DevToolsDockEntry } from '@vitejs/devtools-kit'
+import type { DocksContext } from '@vitejs/devtools-kit/client'
 import { toRefs } from 'vue'
 import DockEntry from './DockEntry.vue'
 
 const props = defineProps<{
+  context: DocksContext
   entries: DevToolsDockEntry[]
   selected: DevToolsDockEntry | null
   isVertical: boolean

packages/core/src/client/webcomponents/components/DockEntriesWithCategories.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import type { DevToolsDockEntry } from '@vitejs/devtools-kit'
+import type { DocksContext } from '@vitejs/devtools-kit/client'
 import { computed, toRefs } from 'vue'
 import { DEFAULT_CATEGORIES_ORDER } from '../constants'
 import DockEntries from './DockEntries.vue'
 import DockEntry from './DockEntry.vue'
 
 const props = defineProps<{
+  context: DocksContext
   entries: DevToolsDockEntry[]
   selected: DevToolsDockEntry | null
   capacity?: number
@@ -88,6 +90,7 @@ const overflowBadge = computed(() => {
       <div class="border-base m1 h-20px w-px border-r-1.5" />
     </slot>
     <DockEntries
+      :context="context"
       :entries="entries"
       :is-vertical="isVertical"
       :selected="selected"

packages/core/src/client/webcomponents/components/DockEntry.vue

@@ -19,7 +19,7 @@ function updatePos() {
   const rect = button.value?.getBoundingClientRect()
   if (rect) {
     setFloatingTooltip({
-      text: props.dock.title,
+      render: props.dock.title,
       width: rect.width,
       height: rect.height,
       left: rect.left,

packages/core/src/client/webcomponents/components/FloatingTooltip.ts

@@ -0,0 +1,100 @@
+import type { FloatingTooltip } from '../state/floating-tooltip'
+import { computed, defineComponent, h, ref, watchEffect } from 'vue'
+import { useFloatingTooltip } from '../state/floating-tooltip'
+
+// @unocss-include
+
+const DETECT_MARGIN = 100
+const GAP = 10
+
+const FloatingTooltipComponent = defineComponent({
+  name: 'FloatingTooltip',
+  setup() {
+    const current = useFloatingTooltip()
+    const box = ref<FloatingTooltip>({
+      render: '',
+      width: 0,
+      height: 0,
+      left: 0,
+      top: 0,
+    })
+
+    // guess alignment of the tooltip based on viewport position
+    const align = computed<'bottom' | 'left' | 'right' | 'top'>(() => {
+      const vw = window.innerWidth
+      const vh = window.innerHeight
+      if (box.value.left < DETECT_MARGIN)
+        return 'right'
+      if (box.value.left + box.value.width > vw - DETECT_MARGIN)
+        return 'left'
+      if (box.value.top < DETECT_MARGIN)
+        return 'bottom'
+      if (box.value.top + box.value.height > vh - DETECT_MARGIN)
+        return 'top'
+      return 'bottom'
+    })
+
+    const style = computed(() => {
+      switch (align.value) {
+        case 'bottom': {
+          return {
+            left: `${box.value.left + box.value.width / 2}px`,
+            top: `${box.value.top + box.value.height + GAP}px`,
+            transform: 'translateX(-50%)',
+          }
+        }
+        case 'top': {
+          return {
+            left: `${box.value.left + box.value.width / 2}px`,
+            bottom: `${window.innerHeight - box.value.top + GAP}px`,
+            transform: 'translateX(-50%)',
+          }
+        }
+        case 'left': {
+          return {
+            right: `${window.innerWidth - box.value.left + GAP}px`,
+            top: `${box.value.top + box.value.height / 2}px`,
+            transform: 'translateY(-50%)',
+          }
+        }
+        case 'right': {
+          return {
+            left: `${box.value.left + box.value.width + GAP}px`,
+            top: `${box.value.top + box.value.height / 2}px`,
+            transform: 'translateY(-50%)',
+          }
+        }
+        default: {
+          throw new Error('Unreachable')
+        }
+      }
+    })
+
+    watchEffect(() => {
+      if (current.value) {
+        box.value = { ...current.value }
+      }
+    })
+
+    return () => {
+      if (!box.value.render)
+        return null
+
+      const content = typeof box.value.render === 'string' ? h('span', box.value.render) : box.value.render()
+
+      return h(
+        'div',
+        {
+          class: [
+            'fixed z-floating-tooltip text-xs transition-all duration-300 w-max bg-glass border border-base rounded px2 p1',
+            current ? 'op100' : 'op0 pointer-events-none',
+          ],
+          style: style.value,
+        },
+        content,
+      )
+    }
+  },
+})
+
+export default FloatingTooltipComponent

packages/core/src/client/webcomponents/components/FloatingTooltip.vue

@@ -12,7 +12,7 @@ import { createGenerator } from 'unocss'
 import config from '../uno.config'
 
 const SRC_DIR = fileURLToPath(new URL('..', import.meta.url))
-const GLOBS = ['components/**/*.vue']
+const GLOBS = ['components/**/*.{ts,vue}']
 const USER_STYLE = join(SRC_DIR, 'style.css')
 const GENERATED_CSS = join(SRC_DIR, '.generated/css.ts')
 const MINIFY = true

packages/core/src/client/webcomponents/scripts/build-css.ts

@@ -1,11 +1,12 @@
+import type { VNode } from 'vue'
 import { shallowRef } from 'vue'
 
 export interface FloatingTooltip {
   left: number
   top: number
   width: number
   height: number
-  text: string
+  render: string | (() => VNode)
 }
 
 const state = shallowRef<FloatingTooltip | null>(null)