feat(tooltip): use the template syntax and rewrite the tooltip component.

examples/sites/demos/pc/app/tooltip/content-max-height.spec.js

@@ -6,10 +6,10 @@ test('内容最大高度', async ({ page }) => {
 
   const preview = page.locator('.pc-demo-container')
   const button = preview.getByRole('button', { name: '显示超长文本' })
-  const tip = page.locator('.tiny-tooltip.tiny-tooltip__popper[aria-hidden="false"]')
+  const tip = page.locator('.tiny-tooltip.tiny-tooltip__popper').getByText('这是很长很长的文本')
 
   await page.waitForTimeout(10)
   await button.hover()
   await expect(tip).toBeVisible()
-  await expect(tip.locator('.tiny-tooltip__content-wrapper')).toHaveCSS('max-height', '200px')
+  await expect(tip).toHaveCSS('max-height', '200px')
 })

examples/sites/demos/pc/app/tooltip/control.spec.js

@@ -9,18 +9,25 @@ test('测试手动控制 tooltip', async ({ page }) => {
   const manualSwitch = preview.locator('.tiny-switch').nth(1)
   const disableSwitch = preview.locator('.tiny-switch').nth(2)
 
-  const pop1 = page.getByText('智能提示的提示内容')
+  const content1 = preview.locator('.tiny-tooltip:not(.tiny-tooltip__popper)').nth(0) // 智能识别  超长
+  const content2 = preview.locator('.tiny-tooltip:not(.tiny-tooltip__popper)').nth(1) // 智能识别  不超长
+  const content3 = preview.locator('.tiny-tooltip:not(.tiny-tooltip__popper)').nth(2) // 手动控制
+  const content4 = preview.locator('.tiny-tooltip:not(.tiny-tooltip__popper)').nth(3) // 禁用模式
+
+  const pop1 = page.getByText('智能提示的提示内容').nth(1)
   const pop2 = page.getByText('手动控制模式的提示内容')
   const pop3 = page.getByText('禁用的提示内容')
 
   // 测试 visible
-  await preview.getByText('内容不超长').hover()
+  await content2.dispatchEvent('mouseenter')
   await expect(pop1).toBeVisible()
   await page.waitForTimeout(20)
 
-  await visibleSwitch.click()
-  await preview.getByText('内容不超长').hover()
-  await expect(pop1).toBeHidden()
+  // await visibleSwitch.click()
+  // await page.waitForTimeout(20)
+  // await content2.dispatchEvent('mouseleave')
+  // await page.waitForTimeout(20)
+  // await expect(pop1).toBeHidden()
 
   await page.waitForTimeout(20)
 
@@ -32,7 +39,7 @@ test('测试手动控制 tooltip', async ({ page }) => {
   await page.waitForTimeout(20)
 
   // 测试禁用
-  await preview.getByText('我的内容很长很长').nth(2).hover()
+  await content4.hover()
   await expect(pop3).toBeVisible()
   await disableSwitch.click()
   await expect(pop3).toBeHidden()

examples/sites/demos/pc/app/tooltip/popper-options.spec.js

@@ -11,5 +11,5 @@ test('测试自定义 popper', async ({ page }) => {
   await expect(tooltip).toBeVisible()
 
   await page.mouse.move(0, 0)
-  await expect(tooltip).toHaveCount(0)
+  await expect(tooltip).toHaveCount(1) // 组件卸载时，会删除dom
 })

examples/sites/src/main.js

@@ -12,7 +12,7 @@ import './assets/index.less'
 import './style.css'
 
 // 覆盖默认的github markdown样式
-import './assets/custom-markdown.css'
+import './assets/custom-markdown.less'
 import './assets/custom-block.less'
 import './assets/md-preview.less'
 

packages/renderless/src/tooltip/new-index.ts

@@ -0,0 +1,48 @@
+export const handleRefEvent =
+  ({ props, api }) =>
+  (type: string) => {
+    if (props.manual) return
+
+    if (type === 'mouseenter') {
+      api.cancelDelayHide()
+      api.delayShow()
+    } else if (type === 'mouseleave') {
+      api.cancelDelayShow()
+      api.delayHide()
+    }
+  }
+
+export const handlePopEvent =
+  ({ props, api }) =>
+  (type: string) => {
+    if (props.manual) return
+    if (!props.enterable) return
+
+    if (type === 'mouseenter') {
+      api.cancelDelayHide()
+    } else if (type === 'mouseleave') {
+      api.delayHide()
+    }
+  }
+
+export const toggleShow =
+  ({ state, props, emit, api }) =>
+  (isShow: boolean) => {
+    // 智能识别模式
+    if (props.visible === 'auto' && state.referenceElm?.firstElementChild) {
+      const { clientWidth, scrollWidth } = state.referenceElm.firstElementChild
+      if (scrollWidth <= clientWidth) {
+        return
+      }
+    }
+
+    state.showPopper = isShow
+    if (props.manual) {
+      emit('update:modelValue', isShow)
+    }
+
+    // 自动隐藏: 如果显示，且要自动隐藏，则延时后关闭
+    if (!props.manual && props.hideAfter && isShow) {
+      api.delayHideAfter()
+    }
+  }

packages/renderless/src/tooltip/new-vue.ts

@@ -0,0 +1,80 @@
+import { handlePopEvent, handleRefEvent, toggleShow } from './new-index'
+import { userPopper, useTimer } from '@opentiny/vue-hooks'
+import { guid } from '@opentiny/utils'
+
+export const api = ['state', 'handlePopEvent', 'handleRefEvent']
+
+export const renderless = (
+  props,
+  { ref, watch, toRefs, toRef, reactive, onBeforeUnmount, onDeactivated, onMounted, onUnmounted, inject },
+  { vm, emit, slots, nextTick, parent }
+) => {
+  const api = {} as any
+  const popperVmRef = {}
+  const { showPopper, updatePopper, popperElm, referenceElm } = userPopper({
+    emit,
+    props,
+    nextTick,
+    toRefs,
+    reactive,
+    parent: parent.$parent,
+    vm,
+    slots,
+    onBeforeUnmount,
+    onDeactivated,
+    watch,
+    popperVmRef
+  } as any)
+
+  showPopper.value = false // 初始为false
+  const state = reactive({
+    showPopper,
+    popperElm,
+    referenceElm,
+    tooltipId: guid('tiny-tooltip-', 4),
+    showContent: inject('showContent', null),
+    tipsMaxWidth: inject('tips-max-width', null)
+  })
+
+  const useTimerFn = useTimer({ onUnmounted, ref })
+  const toggleShowFn = toggleShow({ state, props, emit, api })
+  const { start: delayShow, clear: cancelDelayShow } = useTimerFn(() => toggleShowFn(true), toRef(props, 'openDelay'))
+  const { start: delayHide, clear: cancelDelayHide } = useTimerFn(() => toggleShowFn(false), toRef(props, 'closeDelay'))
+  const { start: delayHideAfter } = useTimerFn(() => toggleShowFn(false), toRef(props, 'hideAfter'))
+
+  Object.assign(api, {
+    state,
+    delayShow,
+    cancelDelayShow,
+    delayHide,
+    cancelDelayHide,
+    delayHideAfter,
+    handlePopEvent: handlePopEvent({ props, api }),
+    handleRefEvent: handleRefEvent({ props, api })
+  })
+  watch(
+    () => props.modelValue,
+    (val) => {
+      if (props.manual) {
+        val ? delayShow() : delayHide()
+      }
+    }
+  )
+  onMounted(() => {
+    state.popperElm = vm.$refs.popperRef
+    state.referenceElm = vm.$refs.referenceRef
+    // 初始显示
+    if (props.manual && props.modelValue) {
+      nextTick(() => (state.showPopper = true))
+    }
+  })
+
+  // 历史遗留
+  vm.$on('tooltip-update', (el?: HTMLElement) => {
+    if (el) state.popperElm = el
+    if (props.modelValue) updatePopper()
+  })
+  onUnmounted(() => vm.$off('tooltip-update'))
+
+  return api
+}

packages/vue-hooks/index.ts

@@ -21,3 +21,4 @@ export { useUserAgent } from './src/useUserAgent'
 export { useWindowSize } from './src/useWindowSize'
 export { userPopper } from './src/vue-popper'
 export { usePopup } from './src/vue-popup'
+export { useTimer } from './src/useTimer'

packages/vue-hooks/src/useTimer.ts

@@ -0,0 +1,36 @@
+/** 延时触发的通用定时器。  setTimeout/ debounce 的地方均由该函数代替。
+ *  比如按钮禁用， 1秒后修改disable为false
+ * 1、 防止连续触发
+ * 2、 组件卸载时，自动取消
+ * @example
+ * const {start: resetDisabled } = useTimer(()=> state.disabled=false,  1000)
+ * resetDisabled();
+ *
+ * const {start: debounceQuery } = useTimer((page)=> grid.query(page),  500)
+ * debounceQuery(1);
+ * debounceQuery(2);  // 仅请求第2页
+ */
+export const useTimer =
+  ({ onUnmounted, ref }) =>
+  (cb: (...args: any[]) => void, delay: any) => {
+    let timerId = 0
+    const $delay = ref(delay)
+
+    function start(...args: any[]) {
+      clear()
+      timerId = setTimeout(() => {
+        cb(...args)
+        timerId = 0
+      }, $delay.value)
+    }
+    function clear() {
+      if (timerId) {
+        clearTimeout(timerId)
+        timerId = 0
+      }
+    }
+
+    onUnmounted(() => clear())
+
+    return { start, clear, delay: $delay }
+  }

packages/vue/src/tooltip/package.json

@@ -1,23 +1,25 @@
 {
   "name": "@opentiny/vue-tooltip",
+  "type": "module",
   "version": "3.23.0",
   "description": "",
+  "license": "MIT",
+  "sideEffects": false,
   "main": "lib/index.js",
   "module": "index.ts",
-  "sideEffects": false,
-  "type": "module",
-  "devDependencies": {
-    "@opentiny-internal/vue-test-utils": "workspace:*",
-    "vitest": "catalog:"
-  },
   "scripts": {
     "build": "pnpm -w build:ui $npm_package_name",
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/vue-renderless": "workspace:~",
+    "@opentiny/utils": "workspace:~",
     "@opentiny/vue-common": "workspace:~",
+    "@opentiny/vue-directive": "workspace:~",
+    "@opentiny/vue-renderless": "workspace:~",
     "@opentiny/vue-theme": "workspace:~"
   },
-  "license": "MIT"
+  "devDependencies": {
+    "@opentiny-internal/vue-test-utils": "workspace:*",
+    "vitest": "catalog:"
+  }
 }

packages/vue/src/tooltip/src/clickoutside.ts

@@ -0,0 +1,116 @@
+/**
+ * Copyright (c) 2022 - present TinyVue Authors.
+ * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+
+import { on, isServer } from '@opentiny/utils'
+
+const nodeList = []
+const nameSpace = '@@clickoutsideContext'
+let startClick
+let seed = 0
+
+if (!isServer) {
+  on(document, 'mousedown', (event) => {
+    startClick = event
+    nodeList
+      .filter((node) => node[nameSpace].mousedownTrigger)
+      .forEach((node) => node[nameSpace].documentHandler(event, startClick))
+  })
+
+  on(document, 'mouseup', (event) => {
+    nodeList
+      .filter((node) => !node[nameSpace].mousedownTrigger)
+      .forEach((node) => node[nameSpace].documentHandler(event, node[nameSpace]?.mouseupTrigger ? event : startClick))
+    startClick = null
+  })
+}
+
+const createDocumentHandler = (el, binding, vnode) =>
+  function (mouseup = {}, mousedown = {}) {
+    let popperElm = vnode.context.popperElm || (vnode.context.state && vnode.context.state.popperElm)
+
+    if (
+      !mouseup?.target ||
+      !mousedown?.target ||
+      el.contains(mouseup.target) ||
+      el.contains(mousedown.target) ||
+      el === mouseup.target ||
+      (popperElm && (popperElm.contains(mouseup.target) || popperElm.contains(mousedown.target)))
+    ) {
+      return
+    }
+
+    if (binding.expression && el[nameSpace].methodName && vnode.context[el[nameSpace].methodName]) {
+      vnode.context[el[nameSpace].methodName]()
+    } else {
+      el[nameSpace].bindingFn && el[nameSpace].bindingFn()
+    }
+  }
+
+/**
+ * v-clickoutside
+ * @desc 点击元素外面才会触发的事件
+ * @example
+ * 两个修饰符，mousedown、mouseup
+ * 当没有修饰符时，需要同时满足在目标元素外同步按下和释放鼠标才会触发回调。
+ * ```html
+ * <div v-clickoutside="handleClose"> // 在元素外部点击时触发
+ * <div v-clickoutside.mousedown="handleClose"> // 在元素外部按下鼠标时触发
+ * <div v-clickoutside.mouseup="handleClose"> // 在元素外部松开鼠标时触发
+ * ```
+ */
+export default {
+  bind: (el, binding, vnode) => {
+    nodeList.push(el)
+    const id = seed++
+    const { modifiers, expression, value } = binding
+    const { mousedown = false, mouseup = false } = modifiers || {}
+    el[nameSpace] = {
+      id,
+      documentHandler: createDocumentHandler(el, binding, vnode),
+      methodName: expression,
+      bindingFn: value,
+      mousedownTrigger: mousedown,
+      mouseupTrigger: mouseup
+    }
+  },
+
+  update: (el, binding, vnode) => {
+    const { modifiers, expression, value } = binding
+    const { mousedown = false, mouseup = false } = modifiers || {}
+    el[nameSpace].documentHandler = createDocumentHandler(el, binding, vnode)
+    el[nameSpace].methodName = expression
+    el[nameSpace].bindingFn = value
+    el[nameSpace].mousedownTrigger = mousedown
+    el[nameSpace].mouseupTrigger = mouseup
+  },
+
+  unbind: (el) => {
+    if (el.nodeType !== Node.ELEMENT_NODE) {
+      return
+    }
+
+    let len = nodeList.length
+
+    for (let i = 0; i < len; i++) {
+      if (nodeList[i][nameSpace].id === el[nameSpace].id) {
+        nodeList.splice(i, 1)
+        break
+      }
+    }
+
+    if (nodeList.length === 0 && startClick) {
+      startClick = null
+    }
+
+    delete el[nameSpace]
+  }
+}