From 4754694b4db9624e05855b368a851be14ed63ab9 Mon Sep 17 00:00:00 2001
From: YFAnt <46584057+YFAnt@users.noreply.github.com>
Date: Thu, 30 May 2024 19:25:54 +0800
Subject: [PATCH] fix: tip is not displayed completely on boundaries (#321)

Co-authored-by: YF <YF>
Co-authored-by: Anthony Fu <github@antfu.me>
---
 package.json             |  1 +
 pnpm-lock.yaml           | 41 +++++++++++++++++++++++++
 src/App.vue              |  6 ++--
 src/components/Icons.vue | 65 +++++++++++++++++++++-------------------
 src/hooks/color.ts       | 11 +++++++
 src/hooks/index.ts       |  1 +
 src/hooks/search.ts      |  8 ++++-
 src/main.css             | 31 +++++--------------
 src/main.ts              |  1 +
 9 files changed, 106 insertions(+), 59 deletions(-)
 create mode 100644 src/hooks/color.ts

diff --git a/package.json b/package.json
index dee9b6ad..86b873f5 100755
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "@vueuse/core": "^10.9.0",
     "dexie": "^4.0.1",
     "file-saver": "^2.0.5",
+    "floating-vue": "^5.2.2",
     "fzf": "^0.5.2",
     "hotkeys-js": "^3.13.7",
     "iconify-icon": "^2.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c1cc87fa..9a13a6f1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -28,6 +28,9 @@ importers:
       file-saver:
         specifier: ^2.0.5
         version: 2.0.5
+      floating-vue:
+        specifier: ^5.2.2
+        version: 5.2.2(vue@3.4.21)
       fzf:
         specifier: ^0.5.2
         version: 0.5.2
@@ -2070,6 +2073,22 @@ packages:
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     dev: true
 
+  /@floating-ui/core@1.6.2:
+    resolution: {integrity: sha512-+2XpQV9LLZeanU4ZevzRnGFg2neDeKHgFLjP6YLW+tly0IvrhqT4u8enLGjLH3qeh85g19xY5rsAusfwTdn5lg==}
+    dependencies:
+      '@floating-ui/utils': 0.2.2
+    dev: false
+
+  /@floating-ui/dom@1.1.1:
+    resolution: {integrity: sha512-TpIO93+DIujg3g7SykEAGZMDtbJRrmnYRCNYSjJlvIbGhBjRSNTLVbNeDQBrzy9qDgUbiWdc7KA0uZHZ2tJmiw==}
+    dependencies:
+      '@floating-ui/core': 1.6.2
+    dev: false
+
+  /@floating-ui/utils@0.2.2:
+    resolution: {integrity: sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw==}
+    dev: false
+
   /@humanwhocodes/config-array@0.12.3:
     resolution: {integrity: sha512-jsNnTBlMWuTpDkeE3on7+dWJi0D6fdDfeANj/w7MpS8ztROCoLvIO2nG0CcFj+E4k8j4QrSTh4Oryi3i2G669g==}
     engines: {node: '>=10.10.0'}
@@ -5089,6 +5108,20 @@ packages:
     resolution: {integrity: sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==}
     dev: true
 
+  /floating-vue@5.2.2(vue@3.4.21):
+    resolution: {integrity: sha512-afW+h2CFafo+7Y9Lvw/xsqjaQlKLdJV7h1fCHfcYQ1C4SVMlu7OAekqWgu5d4SgvkBVU0pVpLlVsrSTBURFRkg==}
+    peerDependencies:
+      '@nuxt/kit': ^3.2.0
+      vue: ^3.2.0
+    peerDependenciesMeta:
+      '@nuxt/kit':
+        optional: true
+    dependencies:
+      '@floating-ui/dom': 1.1.1
+      vue: 3.4.21(typescript@5.4.4)
+      vue-resize: 2.0.0-alpha.1(vue@3.4.21)
+    dev: false
+
   /follow-redirects@1.15.3(debug@4.3.4):
     resolution: {integrity: sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==}
     engines: {node: '>=4.0'}
@@ -8390,6 +8423,14 @@ packages:
       - supports-color
     dev: true
 
+  /vue-resize@2.0.0-alpha.1(vue@3.4.21):
+    resolution: {integrity: sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==}
+    peerDependencies:
+      vue: ^3.0.0
+    dependencies:
+      vue: 3.4.21(typescript@5.4.4)
+    dev: false
+
   /vue-router@4.3.0(vue@3.4.21):
     resolution: {integrity: sha512-dqUcs8tUeG+ssgWhcPbjHvazML16Oga5w34uCUmsk7i0BcnskoLGwjpa15fqMr2Fa5JgVBrdL2MEgqz6XZ/6IQ==}
     peerDependencies:
diff --git a/src/App.vue b/src/App.vue
index 789b8760..415e01bb 100755
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,9 +1,7 @@
 <script setup lang='ts'>
-import { themeColor } from './store'
+import { useThemeColor } from './hooks'
 
-const style = computed<any>(() => ({
-  '--theme-color': themeColor.value,
-}))
+const { style } = useThemeColor()
 </script>
 
 <template>
diff --git a/src/components/Icons.vue b/src/components/Icons.vue
index 2c03e3e8..c41dcfe2 100644
--- a/src/components/Icons.vue
+++ b/src/components/Icons.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { PropType } from 'vue'
-import { getSearchHighlightHTML } from '../hooks'
+import { Tooltip } from 'floating-vue'
+import { getSearchHighlightHTML, useThemeColor } from '../hooks'
 
 defineProps({
   icons: {
@@ -36,44 +37,41 @@ defineProps({
     default: 'text-dark-600 dark:text-dark-900',
   },
 })
-
 defineEmits<{
   (event: 'select', id: string): void
 }>()
+
+const { style } = useThemeColor()
 </script>
 
 <template>
-  <div
-    class="non-dragging flex flex-wrap select-none justify-center"
-    :class="`text-${size} ${colorClass}`"
-  >
+  <div class="non-dragging flex flex-wrap select-none justify-center" :class="`text-${size} ${colorClass}`">
     <div
-      v-for="icon of icons"
-      :key="icon"
-      class="non-dragging icons-item flex tooltip"
+      v-for="icon of icons " :key="icon" class="non-dragging icons-item relative"
       :class="[spacing, selected.includes(namespace + icon) ? 'active' : '']"
       @click="$emit('select', namespace + icon)"
     >
-      <Icon
-        :key="icon"
-        class="tooltip-content non-dragging leading-none h-1em"
-        :cache="true"
-        :icon="namespace + icon"
-      />
-      <span
-        v-if="display === 'list'"
-        class="tooltip-content text-sm ml-1 px-1 m-auto"
-        v-html="getSearchHighlightHTML(icon, search)"
-      />
-      <span
-        v-else
-        border="~ dark-only"
-        class="tooltip-text bg-base shadow leading-none whitespace-nowrap z-100"
-      >
-        <span class="opacity-75">
-          {{ icon }}
-        </span>
-      </span>
+      <div v-if="display === 'list'" class="icon-border flex gap-1">
+        <Icon
+          :key="icon" class="non-dragging leading-none" :cache="true"
+          :icon="namespace + icon"
+        />
+        <span
+          class="text-sm px-1 m-auto"
+          v-html="getSearchHighlightHTML(icon, search)"
+        />
+      </div>
+      <Tooltip v-else placement="bottom">
+        <Icon
+          :key="icon" class="non-dragging leading-none icon-border h-1em" :cache="true"
+          :icon="namespace + icon"
+        />
+        <template #popper>
+          <div :style="style" class="leading-none border-none z-100 text-primary opacity-75 text-sm">
+            {{ icon }}
+          </div>
+        </template>
+      </Tooltip>
     </div>
   </div>
 </template>
@@ -82,9 +80,13 @@ defineEmits<{
 .icons-item:hover,
 .icons-item.active {
   color: var(--theme-color);
+}
+
+.icon-border {
   position: relative;
 }
-.icons-item.active::after {
+
+.icon-border.active::after {
   content: '';
   position: absolute;
   top: -3px;
@@ -95,7 +97,8 @@ defineEmits<{
   background: var(--theme-color);
   opacity: 0.1;
 }
-.icons-item:hover::before {
+
+.icon-border:hover::before {
   content: '';
   position: absolute;
   top: -4px;
diff --git a/src/hooks/color.ts b/src/hooks/color.ts
new file mode 100644
index 00000000..2fd422ef
--- /dev/null
+++ b/src/hooks/color.ts
@@ -0,0 +1,11 @@
+import { themeColor } from '../store'
+
+export function useThemeColor() {
+  const style = computed<any>(() => ({
+    '--theme-color': themeColor.value,
+  }))
+
+  return {
+    style,
+  }
+}
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index 74b6aa9b..29268fb5 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -1 +1,2 @@
 export * from './search'
+export * from './color'
diff --git a/src/hooks/search.ts b/src/hooks/search.ts
index 09768a6a..30d2127d 100644
--- a/src/hooks/search.ts
+++ b/src/hooks/search.ts
@@ -138,7 +138,13 @@ export function useSearch(collection: Ref<CollectionMeta | null>) {
   }
 }
 
-export function getSearchHighlightHTML(text: string, search: string, baseClass = 'text-gray-500', activeClass = 'text-primary') {
+// @unocss-include
+export function getSearchHighlightHTML(
+  text: string,
+  search: string,
+  baseClass = 'color-fade',
+  activeClass = 'text-primary',
+) {
   const start = text.indexOf(search || '')
 
   if (!search || start < 0)
diff --git a/src/main.css b/src/main.css
index c19bcd92..a1808ce2 100755
--- a/src/main.css
+++ b/src/main.css
@@ -71,31 +71,16 @@ html.dark {
 }
 
 /* Tootip */
-.tooltip {
-  position: relative;
+.v-popper--theme-tooltip .v-popper__inner {
+  --uno: important-bg-base;
 }
 
-.tooltip .tooltip-text {
-  visibility: hidden;
-  font-size: 14px;
-  text-align: center;
-  border-radius: 4px;
-  position: absolute;
-  z-index: 1;
-  padding: 5px 8px;
-  top: 135%;
-  left: 50%;
-  transform: translateX(-50%);
-  opacity: 0;
-  transition: opacity 0.3s;
-  @apply whitespace-nowrap;
-}
-
-@media (hover: hover) {
-  .tooltip:hover .tooltip-text {
-    visibility: visible;
-    opacity: 1;
-  }
+.v-popper--theme-tooltip .v-popper__arrow-outer {
+  --uno: important-border-none;
+}
+
+.v-popper--theme-tooltip .v-popper__inner {
+  --uno: border border-base;
 }
 
 /* fallback black svg in dark mode */
diff --git a/src/main.ts b/src/main.ts
index e7a99ac4..7af1a460 100755
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,6 +3,7 @@ import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router
 import { disableCache } from 'iconify-icon'
 import App from './App.vue'
 import '@unocss/reset/tailwind.css'
+import 'floating-vue/dist/style.css'
 import './utils/electron'
 import './main.css'
 import 'uno.css'