refactor: implement tooltip with floating-ui

Blackman99 · Blackman99 · commit deebefce87ae · 2023-06-26T12:04:06.000+08:00
diff --git a/.changeset/strong-camels-grow.md b/.changeset/strong-camels-grow.md
@@ -0,0 +1,5 @@
+---
+"@casual-ui/vue": minor
+---
+
+refactor: implement tooltip with floating-ui
diff --git a/.gitmodules b/.gitmodules
@@ -4,3 +4,6 @@
 [submodule "packages/types"]
 	path = packages/types
 	url = https://github.com/Casual-UI/types.git
+[submodule "packages/utils"]
+	path = packages/utils
+	url = https://github.com/Casual-UI/utils.git
diff --git a/package.json b/package.json
@@ -1,9 +1,9 @@
 {
   "license": "MIT",
   "devDependencies": {
-    "@casual-ui/eslint-config-vue": "^0.0.5",
-    "@changesets/cli": "^2.25.2",
-    "eslint": "^8.27.0"
+    "@casual-ui/eslint-config-vue": "^0.3.2",
+    "@changesets/cli": "^2.26.1",
+    "eslint": "^8.43.0"
   },
   "scripts": {
     "release": "cd packages/ui && pnpm build && cd ../.. && changeset publish"
diff --git a/packages/docs/components/feedback/tooltip.md b/packages/docs/components/feedback/tooltip.md
@@ -17,48 +17,38 @@ componentPath: popup/CTooltip
 
 ```vue live
 <script setup>
+import { ref } from 'vue'
+const pos = ref('top-start')
 const positions = [
-  'top-left',
+  'top-start',
   'top',
-  'top-right',
-  'right-top',
+  'top-end',
+  'right-start',
   'right',
-  'right-bottom',
-  'bottom-left',
+  'right-end',
+  'bottom-start',
   'bottom',
-  'bottom-right',
-  'left-top',
+  'bottom-end',
+  'left-start',
   'left',
-  'left-bottom',
-]
+  'left-end',
+].map(p => ({
+  label: p,
+  value: p
+}))
 </script>
 
 <template>
-  <div class="tooltips">
-    <c-tooltip
-      v-for="p in positions"
-      :key="p"
-      :content="`A message rom position ${p}`"
-      :position="p"
-    >
-      {{ p }}
+  <c-radio-group
+    :options="positions"
+    v-model="pos"
+  />
+  <div text-center py-8>
+    <c-tooltip :position="pos" :content="`I'm tooltip content from ${pos}`">
+      <c-button label="Hover me" />
     </c-tooltip>
   </div>
 </template>
-
-<style scoped>
-.tooltips {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 24px;
-}
-.tooltips > div {
-  line-height: 3em;
-  text-align: center;
-  background-color: var(--casual-primary);
-  color: #eee;
-}
-</style>
 ```
 
 ### Custom Content
@@ -86,9 +76,7 @@ const positions = [
 <style scoped>
 .custom-content {
   white-space: nowrap;
-  background: #333;
   padding: 12px;
-  color: #fff;
 }
 </style>
 ```
diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -15,19 +15,19 @@
     "@casual-ui/styles": "latest",
     "@casual-ui/vue": "workspace:*",
     "@casual-ui/vuepress-plugin-casual-code": "workspace:*",
-    "@iconify/json": "^2.1.77",
-    "@quasar/extras": "^1.13.4",
+    "@iconify/json": "^2.2.82",
+    "@quasar/extras": "^1.16.4",
     "@vuepress/bundler-vite": "2.0.0-beta.51",
     "@vuepress/client": "2.0.0-beta.51",
     "@vuepress/plugin-docsearch": "2.0.0-beta.51",
     "@vuepress/plugin-google-analytics": "2.0.0-beta.51",
     "@vuepress/plugin-shiki": "2.0.0-beta.51",
     "ali-oss-static-web-deploy": "^0.3.4",
-    "dayjs": "^1.11.0",
-    "typedoc": "^0.22.15",
-    "unocss": "^0.43.1",
-    "vue": "^3.2.31",
-    "vue-styleguidist": "^4.44.28",
+    "dayjs": "^1.11.8",
+    "typedoc": "^0.24.8",
+    "unocss": "^0.53.3",
+    "vue": "^3.3.4",
+    "vue-styleguidist": "^4.72.4",
     "vuepress": "2.0.0-beta.51"
   },
   "scripts": {
diff --git a/packages/docs/vuepress.config.mjs b/packages/docs/vuepress.config.mjs
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
 // @ts-nocheck
 import path from 'path'
 import { defaultTheme, defineUserConfig } from 'vuepress'
@@ -381,6 +380,9 @@ export default defineUserConfig({
       plugins: [
         Unocss({ presets: [presetIcons(), presetAttributify(), presetUno()] }),
       ],
+      ssr: {
+        noExternal: ['@casual-ui/utils']
+      }
     },
   }),
 })
diff --git a/packages/docs/zh-CN/components/feedback/tooltip.md b/packages/docs/zh-CN/components/feedback/tooltip.md
@@ -17,50 +17,41 @@ componentPath: popup/CTooltip
 
 ```vue live
 <script setup>
+import { ref } from 'vue'
+const pos = ref('top-start')
 const positions = [
-  'top-left',
+  'top-start',
   'top',
-  'top-right',
-  'right-top',
+  'top-end',
+  'right-start',
   'right',
-  'right-bottom',
-  'bottom-left',
+  'right-end',
+  'bottom-start',
   'bottom',
-  'bottom-right',
-  'left-top',
+  'bottom-end',
+  'left-start',
   'left',
-  'left-bottom',
-]
+  'left-end',
+].map(p => ({
+  label: p,
+  value: p
+}))
 </script>
 
 <template>
-  <div class="tooltips">
-    <c-tooltip
-      v-for="p in positions"
-      :key="p"
-      :content="`来自于位置${p}的tooltip信息`"
-      :position="p"
-    >
-      {{ p }}
+  <c-radio-group
+    :options="positions"
+    v-model="pos"
+  />
+  <div text-center py-8>
+    <c-tooltip :position="pos" :content="`我是一个来自于 ${pos} 位置的提示`">
+      <c-button label="Hover me" />
     </c-tooltip>
   </div>
 </template>
-
-<style scoped>
-.tooltips {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 24px;
-}
-.tooltips > div {
-  line-height: 3em;
-  text-align: center;
-  background-color: var(--casual-primary);
-  color: #eee;
-}
-</style>
 ```
 
+
 ### 自定义内容
 
 ```vue live
diff --git a/packages/styles b/packages/styles
@@ -1 +1 @@
-Subproject commit 22e31baa6b3a880dacd611bf46ffa56ea52b9c60
+Subproject commit 360a0fbb5c95d2e2ab137d5c540b31896d7cfecc
diff --git a/packages/types b/packages/types
@@ -1 +1 @@
-Subproject commit 6d4c3ec81ea7e09d2adf5db680a7e50dd9e11bbe
+Subproject commit 696020c89385d6d068aa100b9744965c2bc4c92e
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -30,23 +30,24 @@
     "vue": "^3.2.31"
   },
   "devDependencies": {
-    "@types/node": "^18.11.17",
-    "@vitejs/plugin-vue": "^4.0.0",
-    "@vue/tsconfig": "^0.1.3",
-    "sass": "^1.52.1",
-    "typescript": "^4.9.3",
-    "vite": "^4.0.2",
+    "@types/node": "^20.3.1",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "@vue/tsconfig": "^0.4.0",
+    "sass": "^1.63.6",
+    "typescript": "^5.1.3",
+    "vite": "^4.3.9",
     "vite-plugin-vue-auto-name": "latest",
-    "vue": "^3.2.31",
-    "vue-tsc": "^1.0.16"
+    "vue": "^3.3.4",
+    "vue-tsc": "^1.8.1"
   },
   "dependencies": {
     "@casual-ui/i18n": "^0.1.7",
     "@casual-ui/styles": "workspace:*",
     "@casual-ui/types": "workspace:*",
     "@casual-ui/vue": "workspace:*",
-    "@quasar/extras": "^1.13.4",
-    "dayjs": "^1.11.0"
+    "@casual-ui/utils": "workspace:*",
+    "@quasar/extras": "^1.16.4",
+    "dayjs": "^1.11.8"
   },
   "publishConfig": {
     "main": "./dist/casual-ui-vue.umd.js",
diff --git a/packages/ui/src/components/popup/CTooltip.vue b/packages/ui/src/components/popup/CTooltip.vue
@@ -1,10 +1,8 @@
-<script lang="ts">
-export type Position = `${'top' | 'right' | 'bottom' | 'left'}${`-${'start' | 'end'}` | ''}`
-</script>
-
 <script setup lang="ts">
+import type { CTooltipPosition } from '@casual-ui/types'
 import { useClickOutside } from '@casual-ui/vue'
-import { ref, watch } from 'vue'
+import { recomputePos } from '@casual-ui/utils'
+import { nextTick, onMounted, reactive, ref, watch } from 'vue'
 
 const props = withDefaults(defineProps<{
   /**
@@ -16,7 +14,7 @@ const props = withDefaults(defineProps<{
    * The popup position.
    * @zh 弹出位置
    */
-  position?: Position
+  position?: CTooltipPosition
   /**
    * The trigger method.
    * @zh 触发方式
@@ -34,7 +32,7 @@ const props = withDefaults(defineProps<{
   show: false,
 })
 
-defineEmits<{
+const emit = defineEmits<{
   /**
    * Emit when the show status change.
    * @zh 手动触发时使用，用于<code>v-model:show</code>绑定
@@ -43,9 +41,14 @@ defineEmits<{
 }>()
 
 const innerShow = ref(props.show)
-const tooltipDom = ref<HTMLDivElement | null>(null)
-const triggerDom = ref<HTMLDivElement | null>(null)
-const arrowDom = ref<HTMLDivElement | null>(null)
+const pos = reactive({
+  left: '0',
+  top: '0'
+})
+const tooltipDom = ref<HTMLDivElement | undefined>()
+const contentDom = ref<HTMLDivElement | undefined>()
+const triggerDom = ref<HTMLDivElement | undefined>()
+const arrowDom = ref<HTMLDivElement | undefined>()
 
 watch(
   () => props.show,
@@ -54,6 +57,13 @@ watch(
   },
 )
 
+watch(innerShow, newInnerShow => {
+  emit('update:show', newInnerShow)
+  if (newInnerShow) {
+    nextTick(computePosition)
+  }
+})
+
 const onMouseEnter = () => {
   if (props.trigger === 'hover')
     innerShow.value = true
@@ -75,6 +85,21 @@ if (props.trigger === 'click') {
     },
   })
 }
+
+onMounted(computePosition)
+
+async function computePosition () {
+  const { left, top } = await recomputePos({
+    triggerDom: triggerDom.value,
+    contentDom: contentDom.value,
+    arrowDom: arrowDom.value,
+    placement: props.position
+  })
+  Object.assign(pos, {
+    left,
+    top,
+  })
+}
 </script>
 
 <template>
@@ -84,6 +109,10 @@ if (props.trigger === 'click') {
     :class="[{ 'c-tooltip--show': innerShow }]"
     @mouseenter="onMouseEnter"
     @mouseleave="onMouseLeave"
+    :style="{
+      '--c-tooltip-top': pos.top,
+      '--c-tooltip-left': pos.left,
+    }"
   >
     <div ref="triggerDom" class="c-tooltip--trigger">
       <!--
@@ -92,13 +121,16 @@ if (props.trigger === 'click') {
       <slot />
     </div>
     <div
-      class="c-tooltip--popper-content"
+      ref="contentDom"
+      class="c-tooltip--content"
       @click.stop
     >
       <!--
         @slot The popup content. Will override the content prop.
         @zh 弹出层内容，如果设置了该插槽，会覆盖<code>content</code>属性 -->
-      <slot name="popup" />
+      <slot name="popup">
+        {{ content }}
+      </slot>
       <div ref="arrowDom" class="c-tooltip--arrow" />
     </div>
   </div>
diff --git a/packages/utils b/packages/utils
@@ -0,0 +1 @@
+Subproject commit 60707bd229ae226ac1d8e24187bbedd6d0aaff4c
diff --git a/packages/vuepress-plugin-casual-code/package.json b/packages/vuepress-plugin-casual-code/package.json

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@casual-ui/vue": minor
 +---
++
 +refactor: implement tooltip with floating-ui